it-e-25 RosettaNet

Remember the promise of the paperless office? Computers communicating electronically with
one another were going to replace the tons of paperwork that characterized business-to-business
interaction: purchase orders, invoices, payments, confirmations, documentation. The list was nearly
endless. Electronic document interchange (EDI) was going to be the savior or our systems and
protector of our forests.
It didn't happen. EDI never met the challenges of connecting scores of proprietary and
mission-critical applications. Now a new success of is stepping up to the challenge.
RosettaNet is both a set of standards and a global consortium of more than 500 electronic
components, IT and semiconductor manufacturing companies working to create, implement and
promote open e-business process standards. Founded in 1998, RisettaNet aims to align specific
business processes among trading partners by defining and standardizing up to 100 e-business

transaction processes so that two companies' back-end systems can talk directly to each other.
RosettaNet takes its name from the Rosetta stone, which a soldier in Napoleon's army
discovered in Egypt in 1799. Since it contained parallel inscriptions in both Greek characters and
Egyptian hieroglyphics, it provided a key to deciphering ancient Egyptian writing.
This modern electronic translator speaks the contemporary languages of computer interoperability
XML and SOAP
which should allow disparate systems and business processes from different
organizations to understand and exchange data with one another.
The consortium began its Herculean task by looking at supply chain processes. Members used
business-process modeling to identify the elements of a working business process and create a
clearly defined model of current trading partner interfaces. After extensively researching every level
of the supply chain, as well as analyzing misalignments and inefficiencies, they developed a set of
generic, standardized processes that could serve as the basis for real-world business-to-business
alignment.
These Partner Interface Processes (PIP) are specialized system-to-system, XML-based
dialogues. Each PIP specification includes a business document and a detailed business process
that includes interaction, data transmission, security and error-handling requirements.
PIPs use two data dictionaries
one for business properties and another for technical properties
that help different companies define the same produce in exactly the same way. The Rosettanet
Implementation Framework defines an exchange protocol, and the Message Guidelines instruct
implementers on how to encode individual PIPs into specific packages.
Such efforts at standardizing generic processes have been tried before and failed. RosettaNet,
however, seems more carefully grounded in the real world, and its PIPs are tested by consortium
members. After consortium partners have agreed through a voting process that a PIP meets
industry needs, it is then published on the RosettaNet Web site and is available for anyone to use.

1, invoice  ['invɔis]
n. 发票,发货单,货物
v. 开发票,记清单
2, inscriptions  [in'skripʃən]
n. 题字,碑铭
3, deciphering   
解密
4, misalignment  ['misəlainmənt]
n. 不重合;未对准

Continue reading it-e-25 RosettaNet

it-e-26 Definitions and Content of the Electronic Commerce

Electronic Commerce over the Internet is a new concept. In recent years, it has become so
broadly used that it is often left undifferentiated from other current trends which rely on
automation, such as concurrent engineering and just in time manufacturing. Many companies,
including CyberCash, Dig Cash,First Virtual, and Open Market had provided a variety of
electronic commerce services.
[1] If you have access to a personal computer (PC) and can connect to the Internet with a
browser, you can do business online. No more worries about programming. No more searching
for outdated catalogs as a customer or printing catalogs as a merchant. No more looking for
phone numbers, paying long-distance to connect, or keeping the store open late into the evening.
Just get on the Web, open an online store, and watch your business grow.
The wired world of business, developed technology, human talent, and a new way of doing
business make up today's growing worldwide economy. The backbone of this electronic
commerce is the Internet. The wired world is not about technology, it is about information,
decision making and communication. The wired world is changing life for everyone, from the
single household to the largest corporation. [2]No business can afford to ignore the potential of a
connected economy.
Electronic commerce is anemergingconcept that describes the process of buying and

selling or exchanging of products, services, and information via computer networks including the
Internet. Kalakota and Whinston (1997) define EC from these perspectives:
From a communications perspective, EC is the delivery of information, products/services, or
payments over telephone lines, computer networks, or any other electronic means.
From a business process perspective, EC is the application of technology toward the
automation of business transactions and work flow.
From a service perspective, EC is a tool that addresses the desire of firms, consumers, and
management to cut service costs while improving the quality of goods and increasing the speed
of service delivery.
From an on-line perspective, EC provides the capability of buying and selling products and
information on the Internet and other on-line services.
The term commerce is viewed by some as transactions conducted between business partners.
Therefore, the term electronic commerce seems to be fairly narrow to some people. Thus, many
use the term e-business. It refers to a broader definition of EC, not just buying and selling but
also servicing customers and collaborating with business partners, and conducting electronic
transactions within an organization. According to Lou Gerstner, IBM's CEO: "E-business is all
about cycle time, speed, globalization, enhanced productivity, reaching new customers and
sharing knowledge across institutions for competitive advantage."
Just like any other type of commerce, electronic commerce involves two parties: businesses
and consumers. There are three basic types of electronic commerce.
Business-to-Consumer (B2C): These areretailingtransactions with individual shoppers. The
typical shopper at Amazon.com is a consumer, or a customer. Oftentimes, this arrangement
eliminates the middleman by providing manufacturers direct sales to customers. Other times,
retail stores create a presence on the Web as another way to reach customers.
Consumer-to-Consumer (C2C): This category involves individuals selling to individuals.
This often takes the form of an electronic version of the classified ads or anauction. Goods are
described and interested buyers contact sellers tonegotiateprices. [3]Unlike traditional sales via
classified ads and auctions, buyers and sellers typically never meet face-to-face. Examples are
individuals selling in classified ads and selling residential property, cars, and so on. Advertising
personal services on the Internet and selling knowledge and expertise is another example of C2C.
Several auction sites allow individuals to put items up for auctions. Finally , many individuals are
using internal networks to advertise items for sale or service.
Business-to-Business (B2B): This category involves the sale of a product or service from
one business to another. This is typically a manufacturer-supplier relationship. For example, a
furniture manufacturer requires raw materials such as wood, paint, andvarnish. In B2B electronic
commerce, manufacturers electronically place orders with suppliers and many times payment is
made electronically.
Many people think EC is just having a Web site, but EC is much more than that. There are
dozens of applications of EC such as home banking, shopping in on-line stores and malls, buying

stocks, finding a job, conducting an auction, and collaborating electronically on research and
development projects. To execute these applications, it is necessary to have supporting information
and organizational infrastructure and systems. EC applications are supported by infrastructures, and
their implementation is dependent on four major areas: people, public policy, technical standards
and protocols, and other organizations. The EC management coordinates the applications,
infrastructures, andpillars.

1, merchant  ['mə:tʃənt]
n. 商人,店主
a. 商业的
2, emerge  [i'mə:dʒ]
v. 浮现,(由某种状态)脱出,(事实)显现出来
3, retailing  ['ri:teiliŋ]
n. 零售业
4, auction  ['ɔ:kʃən]
vt. 拍卖;竞卖
n. 拍卖
5, negotiate  [ni'gəuʃieit]
v. 商议,谈判,交涉
6, varnish  ['vɑ:niʃ]
n. 油漆,掩饰,光泽面
v. 粉饰,涂油漆于
7, pillars  
n. 栋梁

Continue reading it-e-26 Definitions and Content of the Electronic Commerce

it-e-27 What is EDI?

(1) I thought electronic data interchange (EDI) was an old technology, why am I still
hearing about it? EDI refers to the electronic exchange of business information between two

companies using a specific and structured format. The concept has been around since the 1970s
and has traditionally been used to automate buyer-seller transactions such as invoices and
purchase orders. But as more processes within a company become automated, EDI has expended
to areas such as inventory management and product distribution.
(2) How does it work?
EDI relies on standards, or common methods of defining classes of business data, which
allow computers to recognize what data belongs to what department in a company. In the early
days of EDI, many companies built in-house EDI standards, but as interest grew, industries
started to agree on common standards, administered by standards organizations. These standards,
which allow computers in different organizations to share information over privately built, closed
networks known as value-added networks, led to the use of EDI for corporate purchasing.
(3) What are the benefitsF
Consider a very simple non-EDI-based purchase. A buyer decides he needs 365 hammers.
He creates a purchase order, prints it out and pops it in the mail. When the supplier gets the order,
she types it into her company's computer system. The inventory guy pulls the order and ships out
the hammers. Next, the supplier prints out and mails an invoice. It's not hard to imagine that this
process could take several days. EDI has the potential to cut massive amounts of time out of the
process. Sending documents, such as purchase orders or invoices, electronically takes minutes,
not days, and shipments can often go out the day the order comes in. Moreover, the electronic
format does not need to be rekeyed upon arrival, which also eliminates the possibility of typos.
And EDI reduces costs by cutting down on data input, routing and delivery.
(4) What does all of this have to do with the INTERNET
Building an EDI system has traditionally required a substantial investment in some
heavy-duty computers and networking equipment for both parties. Sometimes a large buyer, such
as Wal-mart, will require that all its suppliers be EDI-compliant. That puts a burden on smaller
suppliers, forcing them to choose between a heavy technical investment and a loss of business.
And EDI isn't instantaneous. Because it uses information that frequently resides in mainframes,
the quality of information on an EDI network depends on how frequently the data is refreshed
from the mainframe.
And that's the promise of the Web, which offers much lower connectivity costs. That, added
to the lower costs of PCs and simpler software, makes EDI over the Web a compelling
proposition. Moreover, XML, an open standard for sharing data on the Web, is starting to appear
as a method of coding EDI standards, which could provide technical clarity across industries.
E-business
(1) That does e-business really mean
The most basic definition of e-business is simply this: using the Internet to connect with
customers, partners, and suppliers. But the term also implies the transformation of existing business
processes to make them more efficient. To engage in e-business, companies need to be able to unlock

data in their back-end computer systems, so they can share information and conduct electronic
transactions with customers, partners, and suppliers via the Internet. And for some companies,
engaging in e-business means adopting new web-enabled business models-auctioning off surplus
goods, selling products directly to consumers, or joining in online purchasing cooperatives with their
competitors. Without a doubt, embarkingon an e-business effort requires as much thinking about
business strategy as it does about technology.
(2) How is e-business different from e-commerceF
In some instances, the terms are used interchangeably, but to purists, e-commerce refers
only to online transactions. The term e-business encompasses online transactions, but it also
refers to online exchanges of information, such as a manufacturer letting its suppliers monitor
production schedules via an extranet (a secure web site that can be accessed only by authorized
parties), or a financial institution letting its customers review their banking, credit card, and
mortgageaccounts via a single web interface. In this respect, e-business overlaps with the
business-technology disciplines of customer relationship management (CRM) and supply chain
management (SCM).
(3) Just how much electronic commerce is being conducted via the Net
Despite all the hype, Internet-based e-commerce currently amounts to only a small fraction of
the U.s. GDP. But experts predict e-commerce volumes will grow exponentially over the next few
years, particularly in business-to-business e-commerce
that is, transactions between businesses
and their suppliers, partners, and business customers. Cambridge, Mass.-based market researcher
Forrester Research Inc. predicts business-to-business e-commerce in the U.S. will grow from
$406.2 billion in 2000 to $207 trillion in 2004. By contrast, Forrester predicts that
business-to-consumer e-commerce in the U.S. will grow from $38.8 billion in 2000 to $184.5
billion in 2004.
(4) Who should be in charge of a company's e-business effort?
In some companies, early web efforts were led by marketing or IT departments as special
projects. But that is starting to change, as e-business becomes a higher priority for the business as
a whole. A recent survey of large global corporations by Pricewaterhouse Coopers and The
Conference Board found that nearly 50 percent of them have full-time units devoted to e-business.
A survey of dotcoms and traditional companies by International Data Corp. (a Darwin sister
company) found that roughly 50 percent of e-business efforts are headed by CEOs.
(5) Have all companies jumped on the e-business bandwagon?
Not yet. Pricewaterhouse Coopers and The Conference Board found that 70 percent of the
global companies they surveyed derive less than 5 percent of their revenues from e-business.
Several factors have kept some companies surveyed from rolling out e-business initiatives,
including the following: potentially high and uncertain implementation costs; lack of demonstrated
ROI within their industry; concern about tax, legal, and privacy issues related to e-business; and
scant use of the internet among their customers.

What is ERP?

(1) I'm tired of pretending I know what ERP is
An enterprise resource planning software, or ERP, doesn't live up to its acronym. Forget
about planning
it doesn't
and forget about resource, a throwaway term. But remember the
enterprise part. This is ERP's true ambition. It attempts to integrate all departments and functions
across a company to create a single software program that runs off one database.
That's tall order. Each of those departments, like finance or human resource, typically has its
own computer system, each optimized for the particular department. Typically, when a customer
places an order, the order begins a mostly paper-based journey from in-basket to in-basket around
the company, often being keyed and rekeyed into different computer systems along the way. All
that lounging around in in-baskets causes delays and lost orders, and all the keying into different
computer systems invites errors. Meanwhile, no one truly knows the order status.
(2) So what can ERP do
ERP automates the tasks necessary to perform a business process
such as order fulfillment,
which involves taking and order from a customer, shipping it and billing for it. With ERP, when
a customer service representative takes an order, he or she has all the necessary information
the
customer's credit rating and order history, the company's inventory levels and the shipping dock's
trucking schedule. Everyone else in the company can view the same information and has access
to the single database that holds the order. When one department finishes with the order, it is
automatically routed via the ERP system to the nest department. To find out where the order is at
any point, one need only log in to the system. With luck, the order process moves like a bolt of
lightning through the organization.
(3) Sounds too good to be true. What's the catch
To do ERP right, your company needs to change the way it does business. And that kind of
change doesn't come without pain. It's critical to figure out if your way of doing business will fit
within a standard ERP package before signing the check. The move to ERP is a project of
breathtaking scope, and the price tags on the front end are enough to make even the most placed
CFO a little twitchy. In addition to budgeting for software costs, financial executives should plan
to write checks to cover consulting, process rework, integration testing and a long list of other
expenses before the benefits of ERP appear. Underestimating the price of teaching users their
new job processes can lead to a rude shock, and so can failure to consider data warehouse
integration requirements and the cost of extra software to duplicate the old report formats.
Oversights in financial planning can send the costs of an ERP project spiraling out of control.
The impact will be far greater than any other systems project you have undertaken.

1, inventory  ['invəntri]
n. 详细目录,存货清单
2, embark  [em'bɑ:k, im-]
vi. 从事,着手;上船或飞机
vt. 使从事;使上船
3, mortgage  ['mɔ:gidʒ]
n.&v. 抵押
4, scant  [skænt]
a. 不充分的,不足的
v. 减缩,吝啬
5, lounge  [laundʒ]
n. 休息室;闲逛;躺椅;(英)酒吧间
vi. 闲逛;懒洋洋地躺卧;闲混
vt. 虚度光阴
6, twitchy  ['twitʃi]
adj. 焦急的;焦躁不安的,神经紧张的;痉挛的

Continue reading it-e-27 What is EDI?

it-e-28 Dial Peer

A dial peer, also known as an addressable call endpoint, is a device that can originate or
receive a call in a telephone network. In voice over IP (VoIP), addressable call endpoints can be
categorized as either voice-network dial peers or POTS (plain old telephone service) dial peers.
Voice-network dial peers include VoIP-capable computers, routers, and gateways within a
network. POTS dial peers include traditional phone sets, cell phones, and fax machines.
The term dial peer is sometimes used in reference to a program that matches a specific
dialed sequence of digits to an addressable call endpoint. According to this definition, there is
one dial peer for each call leg (connection between two addressable call endpoints).
Dial peer hunting is a feature of voice over IP(VoIP) systems in which the device at the
originating router attempts to find an alternative addressable call endpoint if it cannot establish a
connection to the intended endpoint. For dial peer hunting to work, the originating router must be
configured with a list (sequence) of dial peers, all of which can route a call to the same endpoint,
but using different destination routers. If the originating router receives an invalid-number or
user-busy code from the destination router, the originating router proceeds to the next dial peer
in the sequence.

Continue reading it-e-28 Dial Peer

wicket,tapestry5,sopo 模板实现比较

1 Wicket实现

Wicket模板是html格式,示例:index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Index.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

<meta http-equiv="description" content="this is my page">

<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

</head>

<body>

<a wicket:id="edit" href="UserEdit.html?uid=1" target="_blank" >edit form</a>

</body>

</html>

还要在后台page类Index 中手动添加进组件列表中。

public class Index extends WebPage

{

/**

* Constructor

*/

public Index()

{

PageLink link = new PageLink("edit",new IPageLink());

add(link);

}

}

add方法是继承自父类org.apache.wicket.MarkupContainer的方法,会将组件添加到其字段children中去.

模板由org.apache.wicket.markup.MarkupParser解析,遇到wicket:id属性的会转换为org.apache.wicket.markup.MarkupElement,

最终将html模板解析成MarkupElement列表,添加到org.apache.wicket.markup.Markup的List<MarkupElement> markupElements集合中,在组件绘制的时候,将其

包装成org.apache.wicket.markup.MarkupStream,会遍历MarkupElement列表,依据组件id获得组件,让每个组件进行绘制--调用方法

void org.apache.wicket.Component.render(MarkupStream markupStream).

具体的主要的解析实现是由org.apache.wicket.markup.parser.XmlPullParser完成的,通过过字符串操作来解析,详见其next方法,并没有使用第三方类库.

2 tapestry实现

tapestry5模板时xml格式,示例Index.tml

<html xmlns:t="http://tapestry.apache.org/schema/tapestry_5_0_0.xsd"> <head>
<title>Test</title>
</head>
<body>
<h1>Test</h1>
<h1>Address Book</h1>
<t:span c="d" >${fi}</t:span>
<ul>
<li>
<a t:type="pagelink" t:page="index" >Create new address</a>
</li>
</ul>
</body> </html>
因为已经在模板中指明了这个节点是什么类型的组件,所以,tapestry5就不需要再add组件了,它本身也不提供add方法。
public class Index

{

@Inject

private Logger logger;

private GridDataSource dss;

private int fi;

public Index()

{

super();

System.out.println("call ctor.");

}

public int getFi()

{

return fi;

}

public void setFi(int fi)

{

this.fi = fi;

}

}

tapastry5使用stAx实现的,这篇文章介绍了stax的用法,tapestry5通过注入的方式将org.apache.tapestry5.internal.services.TemplateParserImpl注入到

org.apache.tapestry5.internal.services.ComponentTemplateSourceImpl中的private final TemplateParser parser;字段中,TemplateParserImpl

实际使用的是org.apache.tapestry5.internal.services.StaxTemplateParser,在这里面会使用stax对模板进行解析。它通过节点是否有t:id,t:type属性来判断

是否是一个服务端组件。解析完模板会组建成一个节点列表,再在绘制页面的时候依据这个列表的顺序来调用相应的组件绘制。

逻辑主要在以下的类中
org.apache.tapestry5.internal.parser.ComponentTemplateImpl
org.apache.tapestry5.internal.structure.PageImpl
org.apache.tapestry5.internal.services.PageRenderRequestHandlerImpl

org.apache.tapestry5.internal.services.PageResponseRendererImpl

org.apache.tapestry5.internal.services.PageMarkupRendererImpl

org.apache.tapestry5.internal.services.PageRenderQueueImpl

Page org.apache.tapestry5.internal.pageload.PageLoaderImpl.loadPage(String logicalPageName, Locale locale)

3 sopo的实现方法

Sopo是可由每个page类来指明模板内容,只要是html格式就可以,示例:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>test.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

<meta http-equiv="description" content="this is my page">

<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

<link rel="stylesheet" type="text/css" href="./styles.css">

<script type="text/javascript" src="js/hello.js" ></script>

<script type="text/javascript">

function $(id){

return document.getElementById(id);

}

function test()

{

$('rst').innerHTML=reg.test($('d').value);

}

var reg = new RegExp("^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$");

//var reg = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/i;

</script>

</head>

<body>

  h--------

<!-- hahah  -->

<![CDATA[jkjkjk]]>

<form action="">

<label stype="s:Label" id="lab1" >Hello World1<label stype="s:Label" id="lab2" >Hello World3</label></label>

<input type="password" />

<label stype="s:Label" id="lab3" >Hello World2</label>

<input stype="s:Checkbox" id="chk" name="chk" >sss</input>

<select stype="s:Select" id="sel" name="sel" width="20px" >

<option stype="s:Option" text="1" ></option>

<option stype="s:Option" text="2" selected="selected" ></option>

<option stype="s:Option" text="3" ></option>

</select>

<input id="d" type="text" /><button onclick="test();">Test</button>

<span id="rst">true</span>

<input type="radio" name="1" >1</input>

<input type="radio" name="1" >2</input>

<input type="radio" name="1" onclick="alert(this.value);" >3</input>3

</form>

</body>

</html>

它和tapestry有些像,因为模板里面指明了组件类型,所以就不需要再添加了.

public class Index extends Page

{

@Override

public String getTemplate()

{

try

{

return FileUtils.readFileToString(new File(getSession().getServletContext().getRealPath("Index.html")));

}

catch (IOException e)

{

throw new RuntimeException(e);

}

}

@Override

public void onLoad()

{

Label lab = (Label)getRoot().findComponent("lab3");

lab.addComponent(new Literal("<a href=\"#\">hi i am dynamic!!</a>"));

Integer count = (Integer)getViewSate().get("count");

if (null == count)

{

count = 0;

}

count ++;

getViewSate().put("count", count);

Button btn = new Button("Ok" + count);

lab.addComponent(btn);

}

}

Sopo则是由neko解析模板,生成页面的组件树,web.sopo.template这个包下面包含了所有的模板解析类。每个page都有一个根组件

ComponentRoot web.sopo.page.Page.getRoot(),当开始绘制的时候则会从跟组件开始绘制。它的特点是可以在程序逻辑阶段动态的改变组件树的构造,上面的例子可以看到动态的加了个链接和按钮。使用了它的viewstate特性—存贮页面级变量,这和asp.net很像。

比较

这三种都支持模板(包括页面模板和组件模板),共同特点是模板是html格式,美工可以直接编辑模板,没有讨厌的jsp标签.wicket取经于tapestry,tapestry取经于asp.net,而sopo也是学asp.net并且和它最像。Wicket需要后台add对应模板的组件,通过匹配,这样做虽然可以动态的决定绘制组件的类型但是也比较繁琐,它类似于swing的方式,但是Mode这个概念入侵很大,通过session来保持状态。tapestry通过模板和组件的绘制来展示页面,不允许你new 一个组件,并且和prototype, scriptaculous集成了,它的performance是这三个中最快的,虽然page和组件都是pojo,但是有注入依赖,到底这个特性有没有用那是见仁见智了。Sopo则是比较灵活,可以动态的修改组件树,和asp.net非常接近,写组件和tapestry一样非常清晰,概念和实现都很单,缺点是它的性能只适用于中小型应用。

Continue reading wicket,tapestry5,sopo 模板实现比较

google doc api-python试验

本来想做个google document的客户端,但是发现:
python的支持版本还是1.0,而其它已经到3.0beta了
google doc本质是想作为web应用,它是REST的,所以做这个也没什么用
api里面获得文件夹列表就比较困难,我得不到顶层目录的entryid(不知道怎么找)
我找不到指定目录下面的子目录列表,category形式的查询会以文件夹名来找,那么
q/b/c
c
这样的结构,查找c会将q/b/c和c两个文件夹里面的都找出来
---放弃

Continue reading google doc api-python试验

DIV布局三注意

 

[日期]: 2008-01-02  [来源]:   [作者]: zuoyefeng

随着互联网的发展,web2.0思想的漫延,业界对网页设计(布局)需求越来越苛刻。网页的布局一般有两种方案:

1、表格布局(传统方案)
2、DIV布局(优化方案)
以下事件,不得不让我们去重视DIV布局的应用。
A、DreamWeaver8的可视化设计,实际上就是DIV+CSS布局方式。
(我们用DW对文字左对齐且加粗,DW会加上DIV标签,并用CSS来实现加粗,而不是用font标签)
B、微软最新开发IDE vs2005,默认的布局也是DIV+CSS布局方案,但它的DataList和GridView仍是用表格来实现了。
C、国外近70%以上的网站采用div布局开发,90%以上的新网站均是DIV布局。
D、国内越来越多的网站、软件均采用DIV布局来规划页面。
E、国内各大门户,如163、凤凰网、闪吧、闪客帝国等均是DIV布局。
DIV布局如此重要,为何在国内行动略慢呢?

原因1:DIV布局,以手写代码为主,主要是CSS,这样增加了美工从事DIV的难度。
原因2:DIV布局,本身属生前台的工作,程序员往往不与理采。
原因3:DIV布局,需要良好的html、css2.0基础。
原因4:DIV布局,IE、火狐对DIV盒子思想的执行标准不同,也增加了DIV的难度。
好,本文主要针对,你已经有了DIV布局的基础,使你的设计,如何能兼容主流浏览器,一般的教程上,书上,所载的DIV,仅仅是针对IE的,照上面去做,无疑是浪费时间、复而迷惑。

注意,以上三大事项,你的DIV布局,基本可以兼容IE和火狐。这里有一个很重要的原则,IE对DIV的解释比较松散一些,火狐比较严格一些,所以你写的DIV布局,也要严格一些。
就说这么多了,DIV布局,主要是css2.0“用来用去”,其思想是用div标签来作容器,用ul li来代码行和列,其它的细节,待于你自己去实践。

Continue reading DIV布局三注意

彻底弄懂CSS盒子模式(DIV布局快速入门)

 

http://bbs.blueidea.com/thread-2727499-1-3.html

前言

作者:唐国辉 天涯社区、经典论坛昵称:webflash

如果你想尝试一下不用表格来排版网页,而是用CSS来排版你的网页,也就是常听的用DIV来编排你的网页结构,又或者说你想学习网页标准设计,再或者说你的上司要你改变传统的表格排版方式,提高企业竞争力,那么你一定要接触到的一个知识点就是CSS的盒子模式,这就是DIV排版的核心所在,传统的表格排版是通过大小不一的表格和表格嵌套来定位排版网页内容,改用CSS排版后,就是通过由CSS定义的大小不一的盒子和盒子嵌套来编排网页。因为用这种方式排版的网页代码简洁,更新方便,能兼容更多的浏览器,比如PDA设备也能正常浏览,所以放弃自己之前钟爱的表格排版也是值得的,更重要的是CSS排版网页的优势远远不只这些,本人在这里就不多说,自己可以去查找相关信息。

理解CSS盒子模型

什么是CSS的盒子模式呢?为什么叫它是盒子?先说说我们在网页设计中常听的属性名:内容(content)、填充(padding)、边框(border)、边界(margin), CSS盒子模式都具备这些属性。CSS盒子模式CSS盒子模式这些属性我们可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子也具有这些属性,所以叫它盒子模式。那么内容就是盒子里装的东西;而填充就是怕盒子里装的东西(贵重的)损坏而添加的泡沫或者其它抗震的辅料;边框就是盒子本身了;至于边界则说明盒子摆放的时候的不能全部堆在一起,要留一定空隙保持通风,同时也为了方便取出嘛。在网页设计上,内容常指文字、图片等元素,但是也可以是小盒子(DIV嵌套),与现实生活中盒子不同的是,现实生活中的东西一般不能大于盒子,否则盒子会被撑坏的,而CSS盒子具有弹性,里面的东西大过盒子本身最多把它撑大,但它不会损坏的。填充只有宽度属性,可以理解为生活中盒子里的抗震辅料厚度,而边框有大小和颜色之分,我们又可以理解为生活中所见盒子的厚度以及这个盒子是用什么颜色材料做成的,边界就是该盒子与其它东西要保留多大距离。在现实生活中,假设我们在一个广场上,把不同大小和颜色的盒子,以一定的间隙和顺序摆放好,最后从广场上空往下看,看到的图形和结构就类似我们要做的网页版面设计了,如下图。由“盒子”堆出来的网页版面由“盒子”堆出来的网页版面

现在对CSS盒子模式理解多少了,如果还不够透彻,继续往下看,我会在后面举例,并延用盒子的概念来解释它。

转变我们的思路

传统的前台网页设计是这样进行的:根据要求,先考虑好主色调,要用什么类型的图片,用什么字体、颜色等等,然后再用Photoshop这类软件自由的画出来,最后再切成小图,再不自由的通过设计HTML生成页面,改用CSS排版后,我们要转变这个思想,此时我们主要考虑的是页面内容的语义和结构,因为一个强CSS控制的网页,等做好网页后,你还可以轻松的调你想要的网页风格,况且CSS排版的另外一个目的是让代码易读,区块分明,强化代码重用,所以结构很重要。如果你想说我的网页设计的很复杂,到后来能不能实现那样的效果?我要告诉你的是,如果用CSS实现不了的效果,一般用表格也是很难实现的,因为 CSS的控制能力实在是太强大了,顺便说一点的是用CSS排版有一个很实用的好处是,如果你是接单做网站的,如果你用了CSS排版网页,做到后来客户有什么不满意,特别是色调的话,那么改起来就相当容易,甚至你还可以定制几种风格的CSS文件供客户选择,又或者写一个程序实现动态调用,让网站具有动态改变风格的功能。

实现结构与表现分离

在真正开始布局实践之前,再来认识一件事——结构和表现相分离,这也用CSS布局的特色所在,结构与表现分离后,代码才简洁,更新才方便,这不正是我们学习 CSS的目的所在吗?举个例来说P是结构化标签,有P标签的地方表示这是一个段落区块,margin是表现属性,我要让一个段落右缩进2字高,有些人会想到加空格,然后不断地加空格,但现在可以给P标签指定一个CSS样式:P {text-indent: 2em;},这样结果body内容部分就如下,这没有外加任何表现控制的标签:

<p>加进天涯社区有一段时间了,但一直没有时间写点东西,今天写了一篇有关CSS布局的文章,并力求通过一种通俗的语言来说明知识点,还配以实例和图片,相信对初学CSS布局的人会带来一定的帮助。</p>

如果还要对这个段落加上字体、字号、背景、行距等修饰,直接把对应的CSS加进P样式里就行了,不用像这样来写了:

<p><font color="#FF0000" face="宋体">段落内容</font></p>

这个是结构和表现混合一起写的,如果很多段落有统一结构和表现的话,再这样累加写下去代码就繁冗了。

再直接列一段代码加深理解结构和表现相分离:
用CSS排版

<style type="text/css">
<!--
#photoList img{
height:80;
width:100;
margin:5px auto;
}
-->
</style> <div id="photoList">
<img src="01.jpg" />
<img src="02.jpg" />
<img src="03.jpg" />
<img src="04.jpg" />
<img src="05.jpg" />
</div>

不用CSS排版

<img src="01.jpg" width="100" height="80" align="middle" />
<img src="02.jpg" width="100" height="80" align="middle" />
<img src="03.jpg" width="100" height="80" align="middle" />
<img src="04.jpg" width="100" height="80" align="middle" />
<img src="05。jpg" width="100" height="80" align="middle" />

第一种方法是结构表现相分离,内容部分代码简单吧,如果还有更多的图片列表的话,那么第一种CSS布局方法就更有优势,我打个比喻你好理解:我在BODY向你介绍一个人,我只对你说他是一个人,至于他是一个什么样的人,有多高,是男是女,你去CSS那里查下就知道。这样我在BODY的工作就简单了,也就是说 BODY的代码就简单了。如果BODY有一个团队人在那里,我在CSS记录一项就行了,这有点像Flash软件里的元件和实例的概念,不同的实例共享同一个元件,这样动画文件就不大了,把这种想法移到CSS网页设计中,就是代码不复杂,网页文件体积小能较快被客户端下载了。用CSS排版减小网页文件体积演示地址:http://www.hsptc.com/css1.html用CSS排版减小网页文件体积

像上面我做的那个版面,一共分为四个区块,每个区块的框架是一样的,这个框架就是用CSS写出来的,样式写一次,就可以被无数次调用了(用class调用,而不是ID),只要改变其中的文字内容就可以生成风格统一的众多板块了,它的样式和结构代码是(请不要直接复制生成网页,把下面代码分别粘贴到网页中它们应在的位置):

<style type="text/css">
<!--
* {margin:0px; padding:0px;} 
body {
font-size: 12px; 
margin: 0px auto;
height: auto;
width: 805px;
}
.mainBox {
border: 1px dashed #0099CC;
margin: 3px;
padding: 0px;
float: left;
height: 300px;
width: 192px;
}
.mainBox h3 {
float: left;
height: 20px;
width: 179px;
color: #FFFFFF;
padding: 6px 3px 3px 10px;
background-color: #0099CC;
font-size: 16px;
}
.mainBox p {
line-height: 1.5em;
text-indent: 2em;
margin: 35px 5px 5px 5px;
}
-->
</style>
<div class="mainBox">
<h3>前言</h3>
<p>正文内容</p>
</div>
<div class="mainBox">
<h3>CSS盒子模式</h3>
<p>正文内容 </p>
</div>
<div class="mainBox">
<h3>转变思想</h3>
<p>正文内容 </p>
</div>
<div class="mainBox">
<h3>熟悉步骤</h3>
<p>正文内容 </p>
</div>

熟悉工作流程

在真正开始工作之前我们脑海中要形成这样一种思想:表格是什么我不知道,在内容部分我不能让它再出现表现控制标签,如:font、color、 height、width、align等标签不能再出现,(简单说工作前先洗脑,忘掉以前的一惯做法,去接受和使用全新的方法),我不是单纯的用DIV来实现排版的嵌套,DIV是块级元素,而像P也是块级元素,例如要分出几个文字内容块,不是一定要用DIV才叫DIV排版,不是“<div>文字块一</div><div>文字块二</div><div>文字块三</div>”,而用“<p>文字块一</p><p>文字块二</p><p>文字块三</p>” 更合适。

用 DIV+CSS设计思路是这样的: 1.用div来定义语义结构;2.然后用CSS来美化网页,如加入背景、线条边框、对齐属性等;3.最后在这个CSS定义的盒子内加上内容,如文字、图片等(没有表现属性的标签),下面大家跟我一起来做一个实例加深对这个步骤的理解。先看结果图:CSS排版结果图演示地址:http://www.hsptc.com/css2.htmlCSS排版结果图

  1. 用div来定义语义结构

现在我要给大家演示的是一个典型的版面分栏结构,即页头、导航栏、内容、版权(如下图),典型版面分栏结构其结构代码如下:

<div id="header"></div>
<div id="nav"></div>
<div id="content"></div>
<div id="footer"></div>

上面我们定义了四个盒子,按照我们想要的结果是,我们要让这些盒子等宽,并从下到下整齐排列,然后在整个页面中居中对齐,为了方便控制,我们再把这四个盒子装进一个更大的盒子,这个盒子就是BODY,这样代码就变成:

<body>
<div id="header"></div>
<div id="nav"></div>
<div id="content"></div>
<div id="footer"></div>
</body>

最外边的大盒子(装着小盒子的大盒子)我们要让它在页面居中,并重定义其宽度为760像素,同时加上边框,那么它的样式是:

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 0px auto;
height: auto;
width: 760px;
border: 1px solid #006633;
}

页头为了简单起见,我们这里只要让它整个区块应用一幅背景图就行了,并在其下边界设计定一定间隙,目的是让页头的图像不要和下面要做的导航栏连在一起,这样也是为了美观。其样式代码为:

#header {
height: 100px;
width: 760px;
background-image: url(headPic.gif);
background-repeat: no-repeat;
margin:0px 0px 3px 0px;
}

导航栏我做成像一个个小按钮,鼠标移上去会改变按钮背景色和字体色,那么这些小小的按钮我们又可以理解为小盒子,如此一来这是一个盒子嵌套问题了,样式代码如下:

#nav {
height: 25px;
width: 760px;
font-size: 14px;
list-style-type: none;
}
#nav li {
float:left;
}
#nav li a{
color:#000000;
text-decoration:none;
padding-top:4px;
display:block;
width:97px;
height:22px;
text-align:center;
background-color: #009966;
margin-left:2px;
}
#nav li a:hover{
background-color:#006633;
color:#FFFFFF;
}

内容部分主要放入文章内容,有标题和段落,标题加粗,为了规范化,我用H标签,段落要自动实现首行缩进2个字,同时所有内容看起来要和外层大盒子边框有一定距离,这里用填充。内容区块样式代码为:

#content {
height:auto;
width: 740px;
line-height: 1.5em;
padding: 10px;
}
#content p {
text-indent: 2em;
}
#content h3 {
font-size: 16px;
margin: 10px;

版权栏,给它加个背景,与页头相映,里面文字要自动居中对齐,有多行内容时,行间距合适,这里的链接样式也可以单独指定,我这里就不做了。其样式代码如下:

#footer {
height: 50px;
width: 740px;
line-height: 2em;
text-align: center;
background-color: #009966;
padding: 10px;
}

最后回到样式开头大家会看到这样的样式代码:

* {
margin: 0px;
padding: 0px;
}

这是用了通配符初始化各标签边界和填充,(因为有部分标签默认会有一定的边界,如Form标签)那么接下来就不用对每个标签再加以这样的控制,这可以在一定程度上简化代码。最终完成全部样式代码是这样的:

<style type="text/css">
<!--
* {
margin: 0px;
padding: 0px;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 0px auto;
height: auto;
width: 760px;
border: 1px solid #006633;
}
#header {
height: 100px;
width: 760px;
background-image: url(headPic.gif);
background-repeat: no-repeat;
margin:0px 0px 3px 0px;
}
#nav {
height: 25px;
width: 760px;
font-size: 14px;
list-style-type: none;
}
#nav li {
float:left;
}
#nav li a{
color:#000000;
text-decoration:none;
padding-top:4px;
display:block;
width:97px;
height:22px;
text-align:center;
background-color: #009966;
margin-left:2px;
}
#nav li a:hover{
background-color:#006633;
color:#FFFFFF;
}
#content {
height:auto;
width: 740px;
line-height: 1.5em;
padding: 10px;
}
#content p {
text-indent: 2em;
}
#content h3 {
font-size: 16px;
margin: 10px;
}
#footer {
height: 50px;
width: 740px;
line-height: 2em;
text-align: center;
background-color: #009966;
padding: 10px;
}
-->
</style>

结构代码是这样的:

<body>
<div id="header"></div>
<ul id="nav">
<li><a href="#">首 页</a></li>
<li><a href="#">文 章</a></li>
<li><a href="#">相册</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">论 坛</a></li>
<li><a href="#">帮助</a></li>
</ul>
<div id="content">
<h3>前言</h3>
<p>第一段内容</p>
<h3>理解CSS盒子模式</h3>
<p>第二段内容</p>
</div>
<div id="footer">
<p> 关于华升 | 广告服务 | 华升招聘 | 客服中心 | Q Q留言 | 网站管理 | 会员登录 | 购物车</p><p>Copyright ©2006 - 2008 Tang Guohui. All Rights Reserved</p>
</div>
</body>

好了,此文到此结束,更多内容,如:CSS中的盒子宽度计算,浏览器兼容问题,XHTML规范化写法等请大家去参考其它资料。如果觉得此文还可以,看过之后记得跟帖,你的鼓励是我不断出新文章的动力^-^

Continue reading 彻底弄懂CSS盒子模式(DIV布局快速入门)

Pagination


Total views.

© 2013 - 2020. All rights reserved.

Powered by Hydejack v6.6.1