任务2 使用HTML编写网页规划
1．任务引导
本任务目标通过手工编写HTML文档来制作一个简单的网业规划页面，通过这个项目来进一步掌握HTML，以及回顾项目一中对电子商务网站的规划，效果如图2-5所示。
图2-5 使用HTML编写网页规划制作效果
2．任务实施
（1）创建网站文件夹
创建一个文件夹“任务二”，用于存放该任务中所用的文件文档。本任务的网页中需要使用到图像，为了保证当“任务二”文件夹被移动后，图像还能正常显示，对网页中所引用的图像采用相对路径的方式。在“任务二”文件夹根目录中，创建一个文件夹“images”，用于存放网页中引用的图像文件，将本任务中运用的图像复制并粘贴进去。接着在“任务二”文件夹根目录中创建文本文档并输入HTML。
（2）打开文本工具
执行“开始”→“程序”→“附件”→“记事本”命令，打开一个记事本；或者通过单击鼠标右键，在弹出的快捷菜单中选择“新建”选项，在列表中再选择“文本文档”，新建一个文本文档并通过鼠标双击将其打开。
（3）输入HTML源代码
在文本工具窗口中输入以下HTML源代码：
<HTML >
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
<title>内利网站规划</title>
</HEAD>
<BODY>
<p><h1 align="center"><a href="http://www.baidu.com">内利网站规划设计</a> </h1></p>
<hr>
<TABLE width="367" border="0">
<TR>
<TD width="720"><img src="Figure-s/IMG_3309-00.jpg" width="180" height= "340" align="left">内利公司：是一家专业从事现代电子服务业的高科技企业，公司主营线上线下的多元化产品及服务，打造实体商户加盟的内利商城，自主创新研发支持线下电子支付的终端POS机，发行集支付、储值、积分、打折优惠于一体的内利卡，实现落地电子商务的新模式。 </TD>
</TR>
</TABLE>
<p><ul><font size="6" color="#0000CC">网站整体规划：</font></p>
<li><font color="blue" size="4">公司网站风格颜色：可以以公司标准上的蓝色为主，黄色为点缀。</font></li><br>
<li><font color="blue" size="4">公司网站字体采用标准宋体，大小为12像素。</font> </li><br>
<li><font color="blue" size="4">公司网站布局：</font><font color="blue" size="4">
<ol><li type="a"> 主页采用“回字型”布局</li>
<li type="a">二级页面采用“左拐角”布局</li>
</ol></font></li><br>
<li><font color="blue" size="4">公司网站栏目：初步定为：“关于内利、内利新闻、 内利卡、加盟内利卡、客户中心、联系内利”</font></li>
</ul>
<h1 align="center">主页布局</h1>
<TABLE width="859" height="277" border="1" align="center">
<TR>
<TD width="360">此处为logo：<img src="images/LOGO.jpg" width="360" height="48"></TD>
<TD align="center"> 此处可插入导航栏内容</td>
</TR>
<TR>
<TD colspan="2"><p>此处为大幅动画图片组成的Banner：</p>
<p align="center">公司宣传口号加公司图片，也可加上购物图片修饰</p></TD>
</TR>
<TR>
<TD colspan="2"><TABLE width="99%" border="1" align="center">
<TR>
<TD width="23%"><p>公司栏目</p><p>加盟商家入口等</p></TD>
<TD width="48%" align="center">企业新闻</TD>
<TD width="29%">可考虑列出相关加盟商信息</TD>
</TR>
</TABLE></TD>
</TR>
<TR>
<TD colspan="2" align="center">版权信息，公司联系方式</td>
</TR>
</TABLE>
<p><font color="blue" size="4"> 滚动字幕和图片</font></p>
</BODY>
</HTML>
（4）保存为网页文件
执行“文件”→“另存为”命令，在弹出的对话框中选择存放位置，在“文件名”后的文本框中输入“2.html”，然后单击“保存”按钮。浏览效果如图2-6所示。
图2-6 2.html浏览效果
（5）创建滚动字幕和图片页面
首先把该页面中引用的图像文件保存入“images”文件夹中，再通过新建文本页面，在文本工具窗口中输入以下HTML源代码：
<HTML>
<HEAD>
<title>移动字幕和图片</title>
</HEAD>
<BODY>
<p align="center"><font color=blue size="6">最新新闻</font></p>
<TABLE width="230" border="1" align="center" cellpadding="0" cellspacing= "0" bordercolor="blue">
<TR>
<TD><MARQUEE direction="up" >1.2010年1月18日 新华社等四媒体来访我司参观访问 <br>
2.2010年1月13日 内利形象官网粉墨登场 数字化便民服务推陈出新<br>
3.2010年1月3日 公司公布2010年规划安排<br>
</MARQUEE>
</TD>
</TR>
</TABLE>
<p> </p>
<TABLE width="600" border="1" align="center" cellpadding="0" cellspacing= "0" bordercolor="blue">
<TR>
<TD><MARQUEE scrollamount="5" onMouseOver="this.stop()" onMouseOut= "this.start()"><TABLE width="95%" border="0" cellspacing="0" cellpadding="0">
<TR>
<TD><img src="images/12.jpg"></TD>
<TD><img src="images/13.jpg"></TD>
<TD><img src="images/15.jpg"></TD>
<TD><img src="images/18.jpg"></TD>
<TD><img src="images/27.jpg"></TD>
<TD><img src="images/12.jpg"></TD>
<TD><img src="images/13.jpg"></TD>
<TD><img src="images/15.jpg"></TD>
<TD><img src="images/18.jpg"></TD>
<TD><img src="images/27.jpg"></TD>
</TR></TABLE></MARQUEE></TD>
</TR>
</TABLE>
<p> </p>
</BODY>
</HTML>
（6）保存为网页文件
执行“文件”→“另存为”命令，在弹出的对话框中选择存放位置，在“文件名”后的文本框中输入“marquee.html”，然后单击“保存”按钮。浏览效果如图2-7所示。
（7）创建网页链接
单击“2.html”文件，使用记事本打开，将其中的HTML代码：
<p><font color="blue" size="4"> 滚动字幕和图片</font></p>
改为：
<p><font color="blue" size="4"> <a href= "marquee.html">滚动字幕和图片</a></font></p>
最后对文件进行保存，完成任务2。
图2-7 marquee.html浏览效果
3．任务分析
（1）嵌套表格的作用
在网页中使用表格布局时，经常使用嵌套表格，因为嵌套表格可以使页面布局更为合理，以及方便具体网页元素的填充。利用表格中跨行跨列的合并拆分并不能满足很多常见的页面布局需求，例如第一行需要4个单元格，而第二行需要布局与第一行相错的3个单元格，此时使用单一表格的拆分合并就无法解决，而可以通过嵌套表格来解决。
嵌套表格的宽度一般使用百分比的相对值来表示，这时的百分比是指相对于被嵌套单元格的宽度，这样方便于定位和判断修改表格合适的大小。
（2）HTML常用标记
① 文字标记<FONT>。用于设置页面中文本的现实效果，常用属性为face、size和color，其基本语法如下：
<font face="字体" size="字号" color="颜色值">…</font>
设置页面中文字字体名称face的属性值可以是当前系统上安装的任意一种字体类型，但设置后打开该页面的访问者的计算机系统中也需要安装相同的字体才可以正常显示。
设置页面中文字大小size属性的有效值范围为1～7，与标题标记<Hn>相反，字号越大则字体大小越大，也可在size属性值前加上“+”或“-”字符，则表示增加或减少相对于字号初始值的量。
设置页面中文字颜色color的属性值同样可以用16种颜色名的英文或16进制数两种方法来表示。
对于文字标记<font>，在最新的HTML版本中已被废弃，今后更多的将通过样式表（CSS）来设置。
② 图像标记<IMG>。<img> 也是单标签，要在页面上插入并显示图像，需要使用源属性src的设置。属性src用于设置图像源，属性值就是图像源的URL地址。其基本语法如下：
<img src="url" >
与超链接一样，图像源的URL地址一般也分为内部链接和外部链接。
内部链接，用于链接网站内部的图像源，注意为了在网站文件夹移动后还能正常显示图像，图像文件一般与页面文件处于同一个网站文件夹中，路径一般运用相对路径标记。例如：
<img src="images/123.jpg"><H3>详细目录</H3>
外部链接，用于链接网站外部的图像源，注意需要输入完整的URL路径。例如：
<img src=" http://www.baidu.com/img/baidu_logo.gif"><H3>百度</H3>
图2-8 替换文本属性alt
替换文本属性alt，对应的属性值可设置浏览器尚未完全读入图像时、当不能正常显示图像时或当鼠标移至图像上时，在图像位置显示的文字，如图2-8所示。
表示图像大小的属性height和width，单位默认为像素，可分别设置图像的高和宽。如果没有设置，图像按原始大小显示，设置属性值后，按设置值的大小显示图像。
图文混排设置，在网页中经常需要图像和文字排版在一起。通过设置图像的对齐属性可以获得较好的图文混排效果。一般图像对齐属性设置为align="left"，图像左对齐，文字对图像右环绕；align="right"，图像右对齐，文字对图像左环绕。
图像和周围网页元素距离属性vspace和hspace，分别可以设置图像与周围网页元素上下和左右的空白距离，默认值为1像素。
③ 无序列表标记<UL>。无序列表是一个项目的列表，该列表的每个项目起始位置默认使用粗体圆点（典型的小黑圆圈）进行标记，无序列表的每个项目标记类型一致，没有次序之分。
无序列表始于 <ul> 标记，每个列表项始于<li>。定制表中的标记形状可以通过设置<li>的属性type来决定，该属性值有disk、circle、square等类型。
④ 有序列表标记<OL>。有序列表也是一个项目的列表，列表项目使用有序的标记进行标记。有序列表始于 <ol> 标记，每个列表项同样始于 <li> 标记。定制有序列表表中的序号通过属性type的属性值A、a、I、i、1等来决定。
有序列表标记的起始值可以通过设置<ol>属性start的属性值来完成，属性值为数值。例如：
<ol start=3><li type="a"> 主页采用“回字型”布局</li> <li type="a">二级页面采用“左拐角”布局</li></ol>
效果如图2-9所示。
图2-9 有序列表标记的起始值
⑤ 滚动字幕<MARQUEE>。在标记对<marquee>内的文本或图像可以实现滚动。
相关属性如下：
属性direction 设置滚动的方向，属性值可以是left、right、up、down，默认值为left；
属性behavior 设置滚动的方式，属性值可以是scroll（表示连续滚动）、slide（表示滚动一次）、alternate（表示来回滚动）；
属性loop 设置循环的次数，属性值是正整数，默认值为无限循环或为-1；
属性scrollamount 设置运动速度，属性值是正整数，值越大速度越快，默认值为6；
属性scrolldelay 设置停顿时间，属性值是正整数，默认值为0，单位为毫秒；
事件onmouseover=this.stop() onmouseout=this.start() 用于设置鼠标移入滚动区域时滚动停止，当鼠标移开时又继续滚动。
4．任务拓展
（1）文本格式化标记
可以定义一些文本修饰效果，常见标记如下：
<b> 定义粗体文本
<big> 定义大号字
<em> 定义着重文字
<i> 定义斜体字
<small> 定义小号字
<strong> 定义加重语气
<sub> 定义下标字
<sup> 定义上标字
<ins> 定义插入字
<del> 定义删除字
（2）预格式文本标记<PRE>
可定义预格式化的文本，被包含在标记中的文本通常会保留空格和换行符，而文本也会呈现为等宽字体。<pre>标记的常见应用就是用来表示计算机的源代码。例如：
<pre> for i = 1 to 10 print i next i </pre>
（3）嵌入多媒体标记<EMBED>
<EMBED>标记可以在网页中嵌入多媒体元素，如声音、视频、Flash动画等，并能通过其属性控制播放多媒体的播放器和播放时间、次数等。<EMBED>标记可以放在<HTML>…</HTML>内的任意位置。基本语法如下：
<EMBED src="媒体文件地址">
例如，常见格式如下：
<embed src="歌曲地址，支持mp3,和wma等格式" pluginspage="http://www. microsoft.com/isapi/redir.dll?prd=windows&sbp=mediaplayer&ar=media&sba=plugin&" type="application/x-mplayer2" border="0" width="100%" height= "40" showcontrols="1" showaudiocontrols="1" showstatusbar="1" autostart="1" loop= "0" enablecontextmenu="1"> </embed>
（4）框架标记<FRAMESET>和<FRAME>
通过使用框架标记可以在同一个浏览器窗口中显示多个HTML页面。每个HTML文档称为一个框架页面<FRAME>，并且每个框架都独立于其他的框架，整体称为一个框架集<FRAMESET>。
常见的框架页面如下所示：
<html> <frameset rows="50%,50%"> <frame src="a.html"> <frameset cols="25%,75%"> <frame src="b.html"> <frame src="c.html"> </frameset> </frameset> </html>
框架存在的问题是不是所有浏览器都支持框架，对于应用了框架的页面，很难打印整张页面，不容易管理，对应代码复杂，无法被一些搜索引擎索引用，另外，多框架的页面会增加服务器的http请求等，在现在标准网页设计的理念中，框架的使用是逐步减少的。