WEB前端开发经验总结--实战篇

现在我们接着来讲怎么在实际开发中结合我前面所讲的理论来开发制作页面吧。现在就来看看我们要制作的页面的图：

呵呵，希望我选的这张图没有让大家失望。那，现在图形已经在我们的面前了，现在我们就开始结合我们的理论--合理的布局。我在前面讲了，一个合理布局的页面，要结构清晰，要讲求语意化。那么我们实际的开发的时候要怎么做呢？那现在这个页面，我们一开始，先别忙着切图，先来分析以下页面的结构，说“结构清晰”嘛，我们大家一开始肯定要对页面的布局结构有了个框架后，我们才好动手制作啊。这个图形我分析的结构如下图：

现在我们就基本把页面的布局结构分析出来了，我们现在对页面的布局结构有了一个很清晰的了解了。不过还不要急着写代码。现在我们还要做的就是分析页面的数据结构。怎么理解？呵呵，还记得我们前面提到的XHTML标签要语言意化吗？即“使用合理的标签显示相应特征的数据”，放心，我们不是在做C#的开发，这里的数据结构的意思是，我们要对页面中显示的数据的特征进行分析，看看使用什么XHTML标签来显示它才更加语意话。

好，我们现在就从上到下的开始分析吧！首先是页面最上面的子导航，它就是3个（靠有对齐的）链接。所以没有什么大的疑问，XHTML代码如下：

复制内容到剪贴板

代码:

<!--不清楚那些韩文是什么意思，我就用了我们常用的导航了-->
<div><a href="#1">Cart</a>&nbsp;|&nbsp;<a href="#1">Account</a>&nbsp;|&nbsp;<a href="#1">GuestBook</a>&nbsp;|&nbsp;<a href="#1">FAQs</a></div>

下面接着是我们的LOGO和主导航，LOGO这部分我还是准备采取前面文章所采用的那个方法，至于导航菜单，用UL标签，我想大家一定没有什么异议，所以我们这里的XHTML代码如下：

复制内容到剪贴板

代码:

<div>
    <h1><a href="#1" title="FrameDesign">Frame Design</a></h1>
    <ul>
        <li><a href="#1">ARTICLES</a></li>
        <li><a href="#1">TOPICS</a></li>
        <li><a href="#1">ABOUT</a></li>
        <li><a href="#1">CONTACT</a></li>
        <li><a href="#1">FEED</a></li>
    </ul>
</div>

下面的Banner就更简单了，一张大图片，所以毫无疑问我们使用<img />标签，代码如下：

复制内容到剪贴板

代码:

<div><img src="img/banner.gif" alt="Nature is the best physician" /></div>

下面就是我们比较复杂的部分了，不过其实我们分析后页会发现，其实也不是我们想象中的那么复杂。先来看左边这部分，标题(h2)--标题banner(img)--新闻列表(ul)--标题(h2)--新闻列表(ul)，所以这里的代码就应该是这样的。

复制内容到剪贴板

代码:

<div>
<h2>What's News a person of artistic temperament[nature]</h2>
<div><img src="img/tlt-banner.gif" alt="What's News" /></a>
<ul>
   <li><a href="#1">A person of artistic temperament[nature]</a></li>
   <li><a href="#1">A person of artistic temperament[nature]</a></li>
   <li><a href="#1">A person of artistic temperament[nature]</a></li>
   <li><a href="#1">A person of artistic temperament[nature]</a></li>
   <li><a href="#1">A person of artistic temperament[nature]</a></li>
</ul>   
<h2>Green event a person of artistic temperament</h2>
<ul>
   <li><a href="#1">A person of artistic temperament[nature]</a></li>
   <li><a href="#1">A person of artistic temperament[nature]</a></li>
   <li><a href="#1">A person of artistic temperament[nature]</a></li>
   <li><a href="#1">A person of artistic temperament[nature]</a></li>
</ul>  
</div>

中间的部分，其实结构也很简单，一段文字说明，然后是一张图片，文字说明我们用p标签，图片就用img标签了，那就不多分析了，只是要说明的是，我们看到，第一行的文字是要加粗的，代码如下：

复制内容到剪贴板

代码:

<div>
<p>
  <strong>a person of an artistic turnof mind;</strong><br />
  a person of artistic temperament[nature] <br />
  a person of an artistic turn
</p>
<div><img src="img/pic-1.gif" alt="picture-1" /></div>
<p>
  <strong>a person of an artistic turnof mind;</strong><br />
  a person of artistic temperament[nature] <br />
  a person of an artistic turn
</p>
<div><img src="img/pic-2.gif" alt="picture-2" /></div>
</div>

接着是我们的左边部分。标题图片--这里采用我对LOGO的做法就再合适不过了，看上去是图片，而其实我们用的是<h2>标签，说明这里是标题。形式上是图片，结构（实际）上是标题文字，一举两得，我想现在大家看出这么处理的好处了吧？接着是说明的文字p标签，下面是两个banner图片，使用img标签。接着又是段说明文字（p标签了）。OK，这部分的代码如下：

复制内容到剪贴板

代码:

<div>
<h2>Couer Story</h2>
<p>
a person of an artistic turnof mind; a person of artistic temperament[nature] a person of an artistic turn
</p>
<div><img src="img/Cooperation.gif" alt="Cooperation" /></div>
<div><img src="img/ProjectWORK.gif" alt="Project WORK" /></div>
<p>
a person of an artistic turnof mind;<br />
a person of artistic temperament[nature]
</p>
</div>

OK，现在我们就可以把这3段代码合并起来，我们就得到了这块主体部分的代码了：

复制内容到剪贴板

代码:

<div>
<div><!--Left Part-->
<h2>What's News a person of artistic temperament[nature]</h2>
<div><img src="img/tlt-banner.gif" alt="What's News" /></a>
<ul>
   <li><a href="#1">A person of artistic temperament[nature]</a></li>
   <li><a href="#1">A person of artistic temperament[nature]</a></li>
   <li><a href="#1">A person of artistic temperament[nature]</a></li>
   <li><a href="#1">A person of artistic temperament[nature]</a></li>
   <li><a href="#1">A person of artistic temperament[nature]</a></li>
</ul>   
<h2>Green event a person of artistic temperament</h2>
<ul>
   <li><a href="#1">A person of artistic temperament[nature]</a></li>
   <li><a href="#1">A person of artistic temperament[nature]</a></li>
   <li><a href="#1">A person of artistic temperament[nature]</a></li>
   <li><a href="#1">A person of artistic temperament[nature]</a></li>
</ul>  
</div>
<div><!--Center Part-->
<p>
  <strong>a person of an artistic turnof mind;</strong><br />
  a person of artistic temperament[nature] <br />
  a person of an artistic turn
</p>
<div><img src="img/pic-1.gif" alt="picture-1" /></div>
<p>
  <strong>a person of an artistic turnof mind;</strong><br />
  a person of artistic temperament[nature] <br />
  a person of an artistic turn
</p>
<div><img src="img/pic-2.gif" alt="picture-2" /></div>
</div>
<div><!--Right Part-->
<h2>Couer Story</h2>
<p>
a person of an artistic turnof mind; a person of artistic temperament[nature] a person of an artistic turn
</p>
<div><img src="img/Cooperation.gif" alt="Cooperation" /></div>
<div><img src="img/ProjectWORK.gif" alt="Project WORK" /></div>
<p>
a person of an artistic turnof mind;<br />
a person of artistic temperament[nature]
</p>
</div>
</div>

呵呵，稍微花点信息去分析，其实也不是那么难的，对吗？下面就是是我们的底部的导航--都是链接，用A标签没有问题，以及版权信息。总的来说，这部分都算是说明的文字，所以我们就用p标签，但是我们发现它们有属于不动的两个部分，而这两个部分有在同一行显示，所以我们这里就要用到一个很常用的行内元素--span标签了。

让我们再回顾一下行内元素的说明：行内元素在一个文本行内生成元素框，而不会打断这行文本。而我们这里要做的就是在一行内生成两个不同的元素框，而又不打破这行文本（直白的说法：在同一行显示）。好了，现在我们就得到了这部分的代码了：

复制内容到剪贴板

代码:

<div>
<p>
   <span><a href="#1">Homepage</a>&nbsp;|&nbsp;<a href="#1">About Us</a>&nbsp;|&nbsp;<a href="#1">Contact Us</a>&nbsp;|&nbsp;<a href="#1">Site Map</a>&nbsp;|&nbsp;<a href="#1">FAQs</a></span>
   <span>Copyright &copy 2004  FD, All rights reserved.</span>
</p>
</div>

大功告成，现在我们就把这个页面里的全部XHTML代码都获得了，看看我们一步步的分析，对页面数据的的显示做了充分的语意化了。现在就把这个页面完整的代码给出来了，看看它是否也做到了，

尽量少的嵌套
页面里基本只显示用户需要看的数据（我们用CSS直接控制用户需要看的数据的显示的样式）
页面对搜索引擎友好（没有CSS支持时，浏览页面时同样清晰，层次分明，十分容易查看数据。），已做了基本的SEO优化

复制内容到剪贴板

代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="Frame Design,a person of artistic mind,temperament,trun,What's News,Green event,Couer Story,Cooperation,Project Work" />
<meta name="description" content="Frame Design,a person of artistic mind,temperament,trun,What's News,Green event,Couer Story,Cooperation,Project Work" />
<meta name="author" content="Frame Design! Scripted by Yaohaixiao" />
<title>Frame Design</title>
</head>
<div><!--Top Sub Navigation-->
    <a href="#1">Cart</a>&nbsp;|&nbsp;<a href="#1">Account</a>&nbsp;|&nbsp;<a href="#1">GuestBook</a>&nbsp;|&nbsp;<a href="#1">FAQs</a>
</div>
<div><!--LOGO and Main Navigation-->
    <h1><a href="#1" title="FrameDesign">Frame Design</a></h1>
    <ul>
        <li><a href="#1">ARTICLES</a></li>
        <li><a href="#1">TOPICS</a></li>
        <li><a href="#1">ABOUT</a></li>
        <li><a href="#1">CONTACT</a></li>
        <li><a href="#1">FEED</a></li>
    </ul>
</div>
<div><!--Banner-->
    <img src="img/banner.gif" alt="Nature is the best physician" />
</div>
<div><!--Main Content-->
<div><!--Left Part-->
    <h2>What's News a person of artistic temperament[nature]</h2>
    <div><img src="img/tlt-banner.gif" alt="What's News" /></a>
    <ul>
        <li><a href="#1">A person of artistic temperament[nature]</a></li>
        <li><a href="#1">A person of artistic temperament[nature]</a></li>
        <li><a href="#1">A person of artistic temperament[nature]</a></li>
        <li><a href="#1">A person of artistic temperament[nature]</a></li>
        <li><a href="#1">A person of artistic temperament[nature]</a></li>
    </ul>   
    <h2>Green event a person of artistic temperament</h2>
    <ul>
        <li><a href="#1">A person of artistic temperament[nature]</a></li>
        <li><a href="#1">A person of artistic temperament[nature]</a></li>
        <li><a href="#1">A person of artistic temperament[nature]</a></li>
        <li><a href="#1">A person of artistic temperament[nature]</a></li>
    </ul>  
</div>
<div><!--Center Part-->
    <p>
       <strong>a person of an artistic turnof mind;</strong><br />
       a person of artistic temperament[nature] <br />
       a person of an artistic turn
    </p>
    <div><img src="img/pic-1.gif" alt="picture-1" /></div>
    <p>
       <strong>a person of an artistic turnof mind;</strong><br />
       a person of artistic temperament[nature] <br />
       a person of an artistic turn
    </p>
    <div><img src="img/pic-2.gif" alt="picture-2" /></div>
</div>
<div><!--Right Part-->
    <h2>Couer Story</h2>
    <p>
        a person of an artistic turnof mind; a person of artistic temperament[nature] a person of an artistic turn
    </p>
    <div><img src="img/Cooperation.gif" alt="Cooperation" /></div>
    <div><img src="img/ProjectWORK.gif" alt="Project WORK" /></div>
    <p>
        a person of an artistic turnof mind;<br />
        a person of artistic temperament[nature]
    </p>
</div>
</div>
<div><!--Footer-->
<p>
   <span><a href="#1">Homepage</a>&nbsp;|&nbsp;<a href="#1">About Us</a>&nbsp;|&nbsp;<a href="#1">Contact Us</a>&nbsp;|&nbsp;<a href="#1">Site Map</a>&nbsp;|&nbsp;<a href="#1">FAQs</a></span>
   <span>Copyright &copy 2004  FD, All rights reserved.</span>
</p>
</div>
<body>
</body>
</html>

看看我们得到的代码，是不是结构清晰啊，页面上都是运用合理的标签显示相应特征的数据（新闻标题、新闻列表、文字说明、图片、导航链接）了，做到了XHTML标签充分的语意化。大家也看到了，没有多余的嵌套，做到了尽量少的嵌套。而且页面里显示的基本是用户需要的数据，所以我们也做到了页面里基本只显示用户需要看的数据，而我们用CSS直接控制用户需要看的数据的显示的样式，由于我这里还没有添加任何的CSS样式，所以暂时我们还做不到，不过CSS的运用技巧会在我接下文章里介绍，很快我们做到这个也不是什么问题了。

最后我们来看看页面对搜索引擎友好（没有CSS支持时，浏览页面时同样清晰，层次分明，十分容易查看数据。），已做了基本的SEO优化，具体的SEO的优化的一些技巧我要在讲完CSS运用技巧后再来介绍了，不过现在我们来看看，我们这个没有任何CSS支持的页面，在浏览器中的显示效果图：

怎么样？虽然没有CSS，页面看上去不是那么漂亮，但是结构还是很清晰，导航，新闻标题，新闻列表，说明文字我们一眼就可以看出来。而且要在页面中找到你想要的数据，也很容易。还是我之前提到的，我们的搜索引擎，看到的页面，跟你现在看的差不多，它有觉得页面结构十分的清晰啊。^-^！

不过这里要讲一下的就是页面的中的banner我没有把图片显示出来，但是我们看到了"Nature is the best physician"的字样，这个就是写XHTML标签的一个规范的问题了，我们在使用img标签的时候，一定记得给它加上alt属性，这样在用户看不到图片（用户屏闭到了浏览器的图片显示或者由于服务器图片丢失访问不到）的时候，用户可以知道这里的图片大致是显示的什么内容。也就是说alt属性里面的值要是对这张图片的一个介绍。而这么做也是用户友好的一个体现。

多说两句，在我们的设计师设计页面的时候，其实就要考虑到用户友好的问题，页面为什么要这么设计，用什么色调（用户常时间浏览的时候，眼睛不会很容易就疲劳，不同分辨率下，页面的显示不会相差太多）、页面中的哪个位置放什么，标题要用什么字体等等，其实都是很讲究的。在这个时候其实就已经在做合理布局的工作了。好了，到这里我对怎么合理布局的经验就总结的差不多了，后面的文章就要开始介绍CSS的技巧了。

很久没有写下文了，接着写,不过不用之前的那个图了，先来看看我们的这个图吧：

 

图一

演示地址:http://www.yaohaixiao.com/samples/fg114/index.htm

这个图是我最近给朋友做的一个详细页，呵呵，主要是一个左右布局的页面，可能大家已经想到了，我首先要讲的是处理浮动吧？不过在这个之前，我还是直接把我写的XHTML代码贴出来：

复制内容到剪贴板

代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>订餐小秘书</title>
<meta name="Keywords" content="订餐小秘书,yaohaixiao" />
<meta name="Description" content="订餐小秘书,yaohaixiao" />
<link href="css/layout.css" type="text/css" rel="stylesheet" media="all" />
<link href="css/print.css" type="text/css" rel="stylesheet" media="print" />
<script language="javascript" type="text/javascript" src="js/global.js"></script>
</head>
<body>
<div id="header">
     <h1><a href="http://www.57575777.com/" target="_blank">订餐小秘书</a></h1>    
     <ul>
          <li id="nav-first" ><a href="/Default.aspx" target="_blank">首页</a></li>
          <li><a href="/members/MemberDefault.aspx" target="_blank">会员登录/积分查询</a></li>
          <li><a href="/CommonHtml/57jf.aspx" target="_blank">积分兑奖</a></li>
          <li><a href="/members/MemberDefault.aspx?type=2" target="_blank">餐饮经理人专区</a></li>
          <li><a href="/members/MemberAction.aspx" target="_blank">免费注册</a></li>
          <li><a href="/0/0/SH/1/0/0/1/0/0/1/SearchRslt.aspx" target="_blank">折扣餐厅</a></li>
          <li><a href="/ResManage/resmanage.aspx" target="_blank">自助管理</a></li>
          <li id="nav-last"><a href="/CommonHtml/Market.aspx" target="_blank">市场活动</a></li>
     </ul>    
</div>
<div id="searchbar">
<p>千家餐厅<strong>VIP</strong>折扣<strong>!</strong>高额积分惊喜<strong>好礼!</strong>全上海餐厅免费订餐热线<strong>57575777</strong>(我吃我吃我吃吃吃)</p>    
<form id="frmsearch" name="frmsearch" action="" method="post">
<span>
       <label class="lblfirst">区&nbsp;&nbsp;&nbsp;&nbsp;域：</label>
<select name="mainregion" id="mainregion">
    <option value="SH">上海地区</option>
    <option value="SH_XH">徐汇区</option>
    <option value="SH_HP">黄浦区</option>
    <option value="SH_PD">浦东新区</option>
    <option value="SH_CN">长宁区</option>
    <option value="SH_LW">卢湾区</option>
    <option value="SH_JA">静安区</option>
    <option value="SH_HK">虹口区</option>
    <option value="SH_ZB">闸北区</option>
    <option value="SH_PT">普陀区</option>
    <option value="SH_YP">杨浦区</option>
    <option value="SH_BS">宝山区</option>
    <option value="SH_CM">崇明区</option>
    <option value="SH_FX">奉贤区</option>
    <option value="SH_JD">嘉定区</option>
    <option value="SH_JS">金山区</option>
    <option value="SH_MH">闵行区</option>
    <option value="SH_NH">南汇区</option>
    <option value="SH_QP">青浦区</option>
    <option value="SH_SJ">松江区</option>
</select>
<select name="subregion" id="subregion">
    <option value="SH_SJ">南京东路/新世界广场/置地广场</option>
</select>    
</span>
<span>
       <label>菜&nbsp;&nbsp;系：</label>
<select name="maincx" id="maincx">
    <option value="0">全部菜系</option>
    <option value="1">中餐馆</option>
    <option value="2">西餐厅</option>
    <option value="3">亚洲菜</option>
    <option value="4">娱乐场所</option>
</select>
<select name="subcx" id="subcx">
    <option value="SH_SJ">云贵菜餐厅</option>
</select>    
</span>
<span>
       <label>人均消费：</label>
<select name="avgcost" id="avgcost">
    <option value="0,50">0~50元</option>
    <option value="50,100">50~100元</option>
    <option value="100,200">100~200元</option>
    <option value="200,400">200~400元</option>
    <option value="400,10000">400元以上</option>
</select>
</span><br class="clear" />
<span>
      <label class="lblfirst">关&nbsp;键&nbsp;字：</label>
      <input name="keyword" type="text" value="可输入多个关键字，多个关键字请用空格分隔" id="keyword" />
      <img src="img/btnsearch.gif" type="image" name="btnsearch" id="btnsearch" alt="搜索" />
</span>    
<span>更多搜索选项，请点击<a href="#1">高级搜索</a></span>
</form>
</div>
<div id="advsearchbar">
<form name="frmadvsearch" id="frmadvsearch" action="" method="post">
<span>
        <label class="lblfirst">停&nbsp;&nbsp;&nbsp;&nbsp;车：</label>
<select name="ispark" id="ispark">
    <option value="1">需要</option>
    <option selected="selected" value="0">无所谓</option>
</select>
</span>
<span>
        <label>包&nbsp;&nbsp;&nbsp;&nbsp;房：</label>
<select name="isroom" id="isroom">
    <option value="1">需要</option>
    <option selected="selected" value="0">无所谓</option>
</select>
</span>
<span>
        <label>折&nbsp;&nbsp;&nbsp;&nbsp;扣：</label>
<select name="isdiscount" id="isdiscount">
    <option value="1">需要</option>
    <option selected="selected" value="0">无所谓</option>
</select>
</span>
<span>
        <label>特约商户：</label>
<select name="iscoshop" id="iscoshop">
    <option value="1">需要</option>
    <option selected="selected" value="0">无所谓</option>
</select>
</span><br class="clear" />
<span id="fitoptions">
        <label class="lblfirst">适合用途：</label>
        <input name="fitfor" type="checkbox" id="option1" value="1" /><label>商务宴请</label>
      <input name="fitfor" type="checkbox" id="option2" value="2" /><label>公司聚会</label>  
      <input name="fitfor" type="checkbox" id="option3" value="8" /><label>婚宴</label>  
      <input name="fitfor" type="checkbox" id="option4" value="128" /><label>情侣约会</label>
      <label>（可复选，将查询出满足任一选中用途的餐厅）</label>  
      <input type="image" src="img/btnadvs.gif" alt="开始搜索" name="btnadvsearch" id="btnadvsearch" />
</span>
</form>
</div>
<div id="location">您当前的位置：<a title="查看上海地区所有饭店" href="/SearchRsltForOldIE.aspx">上海地区</a> &gt; <a title="查看静安区所有饭店" href="/SH_JA/Region.aspx" >静安区</a> &gt; <a title="查看静安区所有粤菜 广东菜  类型饭店" href="/SH_JA/2/RegionStyle.aspx">粤菜 广东菜</a></div>
<div id="container">
     <div id="sidebar">
             <h2>近期活动</h2>
          <ul>
              <li><a href="main/LH/index.htm" target="ifmcontainer">“订餐小秘书”邀您共享饕餮盛宴</a></li>
              <li><a href="main/zc/index.htm" target="ifmcontainer">“请客”就要“有接有送”</a></li>
                          <li><a href="main/leaderclub01/leaderclub01.aspx" target="ifmcontainer">订餐小秘书年度“利得会”活动回顾</a></li>
                            <li><a href="main/sclub_6/index.htm" target="ifmcontainer">订餐小秘书“我吃卡”推广活动回顾</a></li>
                            <li><a href="main/foreshow/07/07_09_23/index.htm" target="ifmcontainer">美食美体，快乐生活</a></li>
                            <li><a href="main/foreshow/07/07_10_08/index.htm" target="ifmcontainer">中国专业秘书峰会</a></li>
                            <li><a href="main/sclub_5/index.htm" target="ifmcontainer">相约七夕，浪漫邂逅</a></li>
          </ul>    
             <h2>历史活动</h2>
          <ul>
              <li><a href="main/sclub_4/index.htm" target="ifmcontainer">“热情仲夏”——单身交友活动</a></li>
              <li><a href="main/sclub/index.htm" target="ifmcontainer">第一届VIP会员活动回顾</a></li>
                            <li><a href="main/sclub_1/index.htm" target="ifmcontainer">第二届秘书节活动回顾</a></li>
                            <li><a href="main/sclub_2/index.htm" target="ifmcontainer">第三届秘书节活动回顾</a></li>
                            <li><a href="main/sclub_3/index.htm" target="ifmcontainer">行车美食大型会员活动</a></li>
                            <li><a href="main/xunz/index.htm" target="ifmcontainer">订餐小秘书新闻发布会回顾</a></li>
                            <li><a href="main/wedding/wedding.htm" target="_blank">婚宴\团宴</a></li>
                            <li><a href="main/leaderclub/index.htm" target="ifmcontainer">“Leader Club”利得会活动回顾</a></li>
                            <li><a href="main/newsrelease/index.htm" target="ifmcontainer">新闻发布会回顾</a></li>
          </ul>
     </div>
     <div id="content">
<h1>前瞻：新网络媒体攻略 行为定向广告技术</h1>
<p id="article-info">2008-06-04 09:43:31    来源:CHINAZ用户投稿    作者:刘兴亮   【<a href="javascript:doZoom(16)">大</a> <a href="javascript:doZoom(14)">中</a> <a href="javascript:doZoom(12)">小</a>】  <a href="#plshow" class="fsource">评论：<font id='feedcounttop' color=red>0</font> 条</a></p>
<div id="article">
<p>如果有一天，妳发现坐在妳隔壁的男同事与妳同时打开同一个网站时，所出现的广告居然完全不一样，妳的页面弹出的是女性用品广告，然而他的页面则弹出信息3C广告，更奇妙的是，这些广告完全投其所好！请不要怀疑，这一天将指日可待！ </p>
<p>数十年来，世界各地的广告主之间流传一个老笑话：「我花在广告上的钱，有一半石沉大海。问题是，我不知道到底是哪一半。」这点从广告学理论提到的广告业三阶段可以看出端倪：第一个阶段，消费者仍处于消极面，接受广告主的所有讯息，然而广告主只要顺利将产品推出，便能得到预期效果。到了第二个阶段，消费者开始不再对每一个商品都充满兴趣。而现在的第三阶段，就是消费者的时代，广告主必须掌握消费者行为分析，针对消费者喜好投放广告，才能实现广告的最大价值。 </p>
<p>锁定关键目标，极大化访客行为价值 </p>
<p>精准行为定向广告的开路先锋欧科纳，率先观察到许多初次接触网络市场的传统媒体广告主，因缺乏必要的技术知识，不知如何投放广告至网络平台，甚至追踪访客之行为信息；便开始经营在线媒体业务，并协助广告主管理网络广告，包括追踪访客从哪里登入、去过哪些网站、使用哪些因特网服务。他的成功，即是以访客行为为基础，善用访客的价值，并进一步创造优势与利基。 </p>
<p>无论是过去、现在、或未来，「掌握消费者，等于成功营销」的说法，是不容否定，消费者潜在意图决定广告投放的成功关键；网络广告是针对正在被浏览的页面上投放广告内容，然而，只要广告主能针对消费者内在及外在行为模式来投放广告，这也是网络广告崭露头角的新趋势。</p>
<p>访客行为分析，单刀直入的营销手腕 </p>
<p>「对受众准确的切割，并分析他们的消费习惯」是分众传播的目标，透过清楚的划分各个族群，让广告主的花费效益达到100%；然而，这种分众传播的思维，却在网络广告的应用上发光发热。在网络上，营销人能针对各平台网页之属性进行营销活动，甚至透过网络流量分析系统的运用，收集访客完整的浏览历程数据，确实检视每一个营销活动之个别效益。</p>
<p>由于访客行为与营销活动的关系密不可分，透过行为定向广告分析系统的协助，能收集到最完整精确的访客行为分析讯息，协助营销人经由「定向」、「事实」、「理论」三个面向切入，能成功区隔市场、将所有访客行为数据归纳出市场现状、并将所有行为归因成为一种理论，有效利用这些得来不易的数据，便能降低网络营销成本、成功吸引大众目光、产生优质的广告内容，这也是网络广告的三大重点发展方向。</p>
<p>访客行为信息的进阶运用，行为定向广告 </p>
<p>PhoCusWrigh的研究报告显示：行为广告比文字广告拥有更高的转化率，因为它们成功地为用户带来了惊喜，能出乎意料的在网络平台播放他们感兴趣的信息。两个兴趣不同的用户访问同一网站，行为定向可以为他们显示截然不同的广告。</p>
<p>运用用户的网络浏览行为，提供符合用户意图的广告信息，是行为定向广告的主旨。虽然行为定向广告与一般网络广告，都是针对用户正在观看的内容平台属性而投放广告，但行为定向广告能给予更符合用户需求的广告内容。</p>
<p>例如：如果一访客浏览某旅行社网站，可以肯定这一访客对此旅行社感兴趣，但我们不能假设这个访客将要购买旅游产品。但如果在检视了同一访客的全部浏览行为之后，发现此访客也在同一期间内查阅了其它的班机信息与旅游景点信息，那我们就可以归纳出此一访客是个潜在的旅游产品购买者，进而针对此一访客在其浏览的所有网站上，播放符合其需求的行为定向广告，而不必局限于浏览页面的内容与属性。</p>
<p>行为定向并非新生事物，然而数据收集与分类能力的改进以及行为定向网络的出现，正使广告商实现丰厚的利润。网络技术日益创新，广告主与营销人必须随着时代的脉动不断进步。「科技始终来自于人性」，也不必担心被潮流所淹没，因为，随时掌握消费者行为，贴近市场需求，就是您成功的利器。</p>
<p>&nbsp;</p>
</div>
     </div>
</div>
<script language="javascript" type="text/javascript">
<!--
columnsEqualHeight("sidebar","content");
//-->
</script>
<div id="footer">
<p>
上海最大、最全的订餐平台。为您顾问式搜罗全上海所有餐厅、饭店和美食。预订餐厅、饭店全程服务，享受VIP折扣，获得惊喜积分。提供优质实惠的婚宴、团宴服务。
</p>
<p>
<a href="/CommonHtml/friendtxt.aspx">网友来稿</a> | <a href="/CommonHtml/link.aspx">友情链接</a> | <a href="/CommonHtml/AboutWebSite.aspx">关于本站</a> | <a href="/CommonHtml/Job.aspx">诚聘英才</a> | <a href="#1">合作入口</a> | <a href="#" onclick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.57575777.com/');">设置首页</a> | <a href="#" onclick="window.external.addFavorite('http://www.57575777.com/','订餐小秘书');">加入收藏夹</a>
</p>
<p>
Copyright &copy 2007 上海订餐中心 www.57575777.com, All Right Reserved.&nbsp;&nbsp;&nbsp;&nbsp;沪ICP备05062273号
</p>    
</div>
</body>
</html>

还是罗嗦下，之前提到的写XHTML的时候要充分结构化，这里的代码基本都是我们要看的数据了。基本做到了充分的结构化了。这里就是想跟大家说说这里代码：

复制内容到剪贴板

代码:

...
<select name="avgcost" id="avgcost">
    <option value="0,50">0~50元</option>
    <option value="50,100">50~100元</option>
    <option value="100,200">100~200元</option>
    <option value="200,400">200~400元</option>
    <option value="400,10000">400元以上</option>
</select>
</span><br class="clear" />
...
<select name="iscoshop" id="iscoshop">
    <option value="1">需要</option>
    <option selected="selected" value="0">无所谓</option>
</select>
</span><br class="clear" />

这里用了两个换行符号，当然这里这么处理并不是很好，之前有一个朋友跟我说过在一定使用<br />标签，说这么做是很失败的。呵呵，我也承认这么做不是很好，其实我完全可以在这些容器外面来加上一个div来区分两个不同的区域。但是我这里就是想拿出来跟大家讨论下，什么使用我么使用<br />标签，我说下我这里的一点的想法啊，当然这里是是说说我个人对br标签的使用。

不过在讲这个之前，我们先来看看我这里上面给出的代码在没有CSS帮助的情况下，是怎么个效果：

 

图二

大家到了，结构很清晰吧？这里还先插一下，大家看图一，看看这里：

 

图三

这里也是我后面要简单跟大家讨论BR标签的使用的地方，我们先看到这里的图，如果按照图的效果，我们从左到右，从上到下的写的话，我们代码应该这么写：

复制内容到剪贴板

代码:

<form id="frmsearch" name="frmsearch" action="" method="post">
...
<span>更多搜索选项，请点击<a href="#1">高级搜索</a></span>
</form>
</div>
<p>千家餐厅<strong>VIP</strong>折扣<strong>!</strong>高额积分惊喜<strong>好礼!</strong>全上海餐厅免费订餐热线<strong>57575777</strong>(我吃我吃我吃吃吃)</p>    
<div id="advsearchbar">
<form name="frmadvsearch" id="frmadvsearch" action="" method="post">
...
</form>
</div>

大家可以看到：

复制内容到剪贴板

代码:

<p>千家餐厅<strong>VIP</strong>折扣<strong>!</strong>高额积分惊喜<strong>好礼!</strong>全上海餐厅免费订餐热线<strong>57575777</strong>(我吃我吃我吃吃吃)</p>    

这段广告词，我（第一次做的时候）把它放到了两个搜索表单的中间，结果我发现我去掉CSS得到了这样的效果，如下图：

 

图四

我意识到这么写很不合理，为什么？我们看图会知道，我们的这里的两个搜索应该是一个整体的功能，应该是紧挨在一起的。而我这里却很奇怪的把一条广告词放在了他们中间，很别扭，不是吗？（所以我有去掉CSS看页面结构的习惯，你在这个时候会发现很多问题的。）

于是我最后把这个段广告放到了，两个搜索的前面去了。那为什么不放到后面呢？呵呵，其实大家看看图一就会很明白了：

 

图二

看到了，网站标题（LOGO），接着是主导航，呵呵，我们想我们在其他网站更多的情况下，就会看到BANNER（广告）了（当然，这个习惯我个人的主观意愿更多，不过这个也是很普遍的浏览习惯了。），是吧？所以在LOGO和导航后我就赶紧放了广告了。

其实大家再看看下面，你会发现我把本来是在正文右边的推荐新闻信息，也提到正文前面去了。这里我想大家也很清楚了，看图一。我们门看了主导航，广告，我们就该看推荐新闻列表了，是吗？呵呵，这么做，虽然是个详细页，其实还是可以看到些用做主页布局的思想来布局的。怎么讲？

我们的浏览习惯，我们到一个网站，一般都是扫描地看，看导航，看有没有我感兴趣的栏目，知道这个网站都有些什么。然后就是扫瞄页面的推荐新闻了，找到了，我们就点链接，到详细页去了。而且，作为我们浏览的顺序来说，我们都是从左到右，从上到下的扫描的顺序。这个没有CSS的页面，我们当然是从上到下的扫描了。

虽然我的这个观点，加了些我个人的主观的偏见，不过也确实是一般的浏览习惯。所以，我个人更喜欢我最后的那种布局顺序。其实，这里也推荐大家看看《Don't Make me Think》这本书，大家可以看到书中讲怎么做更符合大家的浏览习惯。怎么让用户更容易的查询数据。呵呵，其实这边书，我们的WEB设计师和网站的策划师也应该多看看。因为更合理的网站结构和页面结构是首先来至这里的。

说了这么多，其实这里要补充的一个合理布局的要素就是，我们的页面布局结构要更符合大家的浏览习惯，重点突出。Don't make our visitors think!

其实在很久前我们就听说过“内容为王”。这里的内容就是我们XHTML/HTML页面展示的数据。用户（普通用户和搜索引擎）来看你的网站（技术网站、电子商务网站、娱乐网站、BLOG等等），他们主要的目的是要来查看各自感兴趣的信息（页面的数据）的，而不是十分在乎你的页面到底有多好看。所以，首先你要做到的是让你的用户能够很容易的在你的站点里搜索到想要的数据。而展示数据，怎么合理展示？搭建合理布局的XHTML文档，在里面就担当了一个重要的角色。

而我们的W3C推荐的标准，则为我们提供了高效开发的工具。使用标准，我们可以更充分的做到表现和结构的分离，我们的XHTML基本上都用来展示数据，页面中集中的都是用户需要的数据，信息更集中，也可以说直接或间接做到方便用户查询信息。表现和结构分离，页面体积大大缩小，页面访问速度更快，也是为了让用户更方便快速的查信息。一个充分结构化，合理布局的页面，对用户更友好，用户也更容易查到数据。而其中搜索引擎还会为你向其他的用户推荐你的信息。

我们做WEB2.0的开发，做前端用户体验的开发，做更人性化的交互设计，其实都是为了方便用户查询数据。好象扯远了！

呵呵，我还算是很无私哦（自己夸自己，有点厚脸皮），把自己会的点东西都抖搂出来了。你很少能在一本书上看到告诉你怎么样来理解合理布局，讲得像我这么详细的和具体。更多的书，只是告诉你CSS的HACK技巧，技巧当然也很重要，不过就像我前面的文章提到的。在你动手写CSS代码前前，你首先要做的是搭建一个合理布局的XHTML页面。

 

评论

1 楼 gqf2008 2008-07-24  

呵呵，挺好的