经典论坛 › 论坛 › 网站开发区 › HTML5及WEB标准化专栏 › Web 标准实践系列（一）——Google 的首页

查看: 7660|回复: 30

[教程] Web 标准实践系列（一）——Google 的首页 [复制链接]

blank　楼主

怿飞

荣誉管理

帖子: 2375
体力: 12545
威望: 125
居住地: 浙江省杭州市

发表于 2007-1-15 09:52:45 |显示全部楼层

文章写的通俗易懂，很适合刚学标准的朋友，推荐给大家阅读。

作者：JunChen
原文：http://www.junchenwu.com/2007/01/web_standards_practice_series_01.html

今天我们来学习用 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>更多 »</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>更多 »</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>©2007 Google</div>

复制代码

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

第二部分、样式表

我们采用直接把样式写在 head 里面的方式，较为简单也方便演示。首先我们看到除了头部的登陆状态，其余部分都是居中对齐的，并且发现字体是 Arial，默认文字大小为 13 px。我们在 head 区域增加以下样式：

body{
font-family: Arial, sans-serif;
font-size: 13px;
text-align: center;
margin-top: 3px;
}
a:link{
color: #00C;
}
a:visited{
color: #551a8b;
}

复制代码

这里使用了 px 这个绝对单位。关于绝对单位和相对单位，网上相关文章很多，并且也一直是 Web 前台的热门话题，本文简单起见，直接使用绝对单位。

然后我们逐步增加其他样式：

#login{ /*这是头部的登陆状态*/
text-align: right;
}
#stype{ /*这就是上文提到的那 5 项搜索类型*/
margin-bottom: 4px;
}
#stype span{ /*此处增加了无意义的 span*/
padding: 0 6px;
}

复制代码

之后的搜索表单，我们碰到了样式化的难点，首先作为搜索的 size 为 55 的输入框从布局上来说是绝对居中的，而右侧高级搜索那三项的宽度加上输入框在内并不是绝对居中。也就是说视觉上，高级搜索那三项偏右了。如下图所示：

这里我们使用绝对定位的方法来处理它（在 HTML 中将高级搜索这三项的内容放入 form 之内）：

#search{ /*这是搜索表单*/
margin: 0 auto;
width: 400px;
position: relative;
}
#more{
width: 4em; /*4个汉字宽，这样可以形成类似列表的效果*/
position: absolute;
top: 0;
right: -4.5em;
}

复制代码

最后我们加上底部链接和版权信息部分的样式：

#ft{
margin: 54px auto 16px;
}

复制代码

在浏览器里面预览并且微调一下各个数值，这样就完成了 Google 首页的制作。最终效果及源文件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Google</title>
<style type="text/css">
body{
	background: #FFF;
	color: #000;
	font-family: Arial, sans-serif;
	font-size: 13px;
	text-align: center;
	margin-top: 3px;
}
a:link{
	color: #00C;
}
a:visited{
	color: #551a8b;
}
#login{
	text-align: right;
}
#stype{
	margin-bottom: 4px;
}
#stype span{
	padding: 0 6px;
}
#search{
	margin: 0 auto;
	width: 400px;
	position: relative;
}
#more{
	width: 4em;
	position: absolute;
	top: 0;
	right: -4.5em;
}
#ft{
	margin: 54px auto 16px;
}
</style>
</head>

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

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

<form id="search" action="" method="post">
<div><input type="text" size="55" title="Google 搜索" /></div>
<div><button type="submit">Google 搜索</button><button>手气不错</button></div>
<div style="margin-top: 6px;"><label><input type="radio" name="t" checked="checked" />搜索所有网页</label><label><input type="radio" name="t" />中文网页</label><label><input type="radio" name="t" />简体中文网页</label></div>
<div id="more"><a href="advanced_search">高级搜索</a> <a href="pref">使用偏好</a> <a href="lang">语言工具</a></div>
</form>

<div id="ft"><a href="ad">广告计划</a> - <a href="all">Google 大全</a> - <a href="en">Google.com in English</a></div>
<div>&copy;2007 Google</div>
</body>
</html>

提示：您可以先修改部分代码再运行

这在 Firefox 1.5 下测试，与 Google 首页没有任何像素的差异。在 IE 下会有一些像素上的差异，这就是各个浏览器的兼容性问题，留给大家自行处理了。本系列以后会有专门的文章讨论这些问题。

本例的最终代码还能够有进一步的优化，做法每个人习惯不同，希望本文能够帮助到大家。

怿飞补充：

1、对于“»”使用代码“＆raquo;”来代替;
2、label写法推荐写成 <label for="foo"> 针对 id 为 foo 的 label </label>。因为<label><input />xxxxx</label>只有在FF等对标准支持很好的浏览器里才显示正常，在IE6中无法显示正常的效果。
3、对于strong，需要重点显示出来的内容，可以使用strong，而对于布局里需要区分主次点的部分，就写到样式里，比如分类的一级分类为粗体，二级分类为一般字体……，其实strong对于搜索引擎优化也有一定的作用，搜索引擎会优先strong的内容，而写在样式里就不会有这样的效果！

[ 本帖最后由 blankzheng 于 2007-1-15 10:00 编辑 ]

个人Blog：PlanABC 团队Blog：淘宝UED 专注Web前端技术！

		自动登录	找回密码
密码			注册

[教程] Web 标准实践系列（一）——Google 的首页 [复制链接]

回复 #10 twinsenliang 的帖子

浏览过的帖子

浏览过的版块