Web制作的标准化实践 制作Google首页(1)

...

今天我们来学习用 Web 标准的方法来制作 Google 首页(中文)。Google 首页一直是用 table 布局的。我们把 Google 首页用 PrtScr 截屏,作为制作时的设计稿参考,并且不打开 Google 首页查看其源代码——就当它不存在。这样和真实项目工作比较接近。

第一部分、HTML 的构建(基于XHTML Transitional)

从设计稿上看到的内容,去揣摩结构。因为整个页面内容较少,容易理解,但也碰到了我们的第一个问题:是用 <p> 标签还是 <div>?各自代表着 paragraph 和 division,原则上说,这个页面上没有任何的段落存在,所以不应该用 <p>。但这里涉及到一个问题,抛开样式表显示的话,用 <p> 更加的清晰,因为默认 <div> 的 margin 和 padding 值都为零。好吧,用 <p> 还是用 <div> 是一个个人喜好问题,但是原则上应当用后者。在本例中也使用后者。开始找个称手的编辑器写 HTML :

<div><strong>junchenwu@gmail.com</strong> | <a href="ig">个性化主页</a> | <a href="MyAccount">我的帐户</a> | <a href="logout">退出</a></div> 
<div><img src="http://www.google.com/intl/zh-CN_ALL/images/logo.gif" alt="Google" /></div> 

这包括头部的登陆状态和中间的大 Logo。我们先不增加任何样式 id 和 class。

然后我们看到中间有“网页 图片 资讯 论坛 更多 »”这些链接。怎么做?一般就两种写法,看个人喜好。把这几个链接写一行里面或者写在一个 ul 里面,如下:

<div><strong>网页</strong> <a href="pic">图片</a> <a href="info">资讯</a> <a href="group">论坛</a> <a href="more"><strong>更多 &raquo;</strong></a></div> 

或者:

<ul> 
<li><strong>网页</strong></li> 
<li><a href="pic">图片</a></li> 
<li><a href="info">资讯</a></li> 
<li><a href="group">论坛</a></li> 
<li><a href="more"><strong>更多 &raquo;</strong></a></li> 
</ul>

这两种写法各有什么优缺点呢?这里一共有 5 项,第一项是加粗的文字,其余 4 项是链接。如果使用第一种写法对于样式的控制就显得力不从心,比如控制这 5 项之间的间距;如果使用第二种写法,那么在脱离样式的情况下,分了 5 行显示。这里我把缺点都写出来,根据本例情况,我们还是选择第一种写法,这样要控制样式就需要在每一项前后增加无意义的 <span>。

我们先继续往下写,遇到了搜索表单以及边上的高级搜索等三个链接。先写哪一个?看上去是平级的啊。这个时候最好问一下产品设计师的本意。我们在这里先写表单。如下:

<form action="" method="post"> 
<div><input type="text" size="55" title="Google 搜索" /></div> 
<div><button type="submit">Google 搜索</button><button>手气不错</button></div> 
<div><label><input type="radio" name="t" checked="checked" /> 搜索所有网页</label> <label><input type="radio" name="t" /> 中文网页</label> <label><input type="radio" name="t" /> 简体中文网页</label></div> 
</form> 

注意给每一项 radio button 添加一个 label,具体的效果大家可以自行测试一下。另外这里采用了 label 包含的写法,也可以写成 <label for="foo"> 针对 id 为 foo 的 label </label>。怎么写这也是看个人喜好的。

接下来是高级搜索等三个链接,以及底部的版权信息等,代码如下:

<div><a href="advanced_search">高级搜索</a> <a href="pref">使用偏好</a> <a href="lang">语言工具</a></div> 
<div><a href="ad">广告计划</a> - <a href="all">Google 大全</a> - <a href="en">Google.com in English</a></div> 
<div>&copy;2007 Google</div> 

到这里我们基本完成了 Google 首页的 HTML 构建,这里是样例文件,待会儿我们还会再修整一部分代码。

继续阅读
Web2.0爆发前痛苦:行网进中国不缺耐心
国内有2000家左右的Web2.0企业
Web Services入门者教程
web设计95%是排版
web设计95%是排版,5%?
发表评论

昵称:
最新评论
暂时没有评论!