任务二 首页的静态页面设计——布局
一、网页的页面布局 网页布局类型大致可分为“国”字型、拐角型、标题正文型、左右框架型、上下框架型、 综合框架型、封面型、Flash 型、变化型，下面分别论述。 （1） “国”字型：也可以称为“同”字型，是一些大型网站所喜欢的类型，即最上面是 网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列一些小内容，中间是主 要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等。这 种结构是网上最常见的结构类型。 （2）拐角型：这种结构与上一种其实只是形式上的区别，上面是标题及广告横幅，接下 来的左侧是一窄列链接等，右列是很宽的正文，下面也是一些网站的辅助信息。在这种类型 中，很常见的类型是最上面是标题及广告，左侧是导航链接。 （3）标题正文型：这种类型即最上面是标题或类似的一些东西，下面是正文。如一些文 章页面或注册页面等就是这种类型。 （4）左右框架型：这是一种左右分为两面的框架结构，一般左面是导航链接，有时最上 面会有一个小的标题或标志，右面是正文。大部分的大型论坛都是这种结构，有一些企业网 站也喜欢采用。这种类型结构非常清晰，一目了然。 （5）上下框架型：与上面类似，区别仅仅在于是一种上下分为两页的框架。 （6）综合框架型：是多种结构的结合，是一种相对复杂的框架结构。 （7）封面型：这种类型大部分出现在企业网站和个人主页，如果处理的好，会给人带来 赏心悦目的感觉。 （8）Flash 型：其实这与封面型结构是类似的。与封面型不同的是，由于 Flash 强大 的功能，页面所表达的信息更丰富，其视觉效果及听觉效果如果处理得当，绝不差于传统 的多媒体。 （9）变化型：即上面几种类型的结合与变化，比如视觉上很接近拐角型，但所实现的功 能却是综合框架型。 一般根据内容的需求来选择合适的布局：网页如果内容非常多，就要考虑用“国字型” 或“拐角型” ；如果内容不算太多而一些说明性的东西比较多，则可以考虑标题正文型；框架 结构的一个共同特点就是浏览方便，速度快，但结构变化不灵活；而如果是一个企业网站想 展示一下企业形象或个人主页想展示个人风采， 封面性是首选； Flash 型更灵活一些， 好的 Flash 大大丰富了网页，但是它不能表达过多的文字信息。二、认识网站的首页 网站的首页也称为主页，主页的文件名一般为 index，至于扩展名可以根据开发的工具来 确定，因为本课程使用的是 ASP 来开发的，所以我们的首页文件全名为 index.asp。 首页是网站中第一个被访问也是被访问次数最多的页面，可见首页对于一个网站来说起 着至关重要的作用，人们通过访问首页对你的网站有一个整体的认识和了解。好的开始是成 功的一半，所以对于“网站的门面”——首页的设计与制作是绝对要重视的。所以我们不能 茫目地开始设计首页，首先应该先去参考一些著名的电子商务网站，了解关于电子商务网站 首页需要具备的各种元素，先构建出“武进网上商城”的首页布局，再进一步进行填充内容 及完善。 我们比较熟悉的电子商务网站，如淘宝网、易趣网、当当网等，对于这些网站首页进行 一些分析，我们会发现电子商务网站的首页一般包含以下几个部分。 内容 1：网站标题和标识（能体现站点主题和特色） 。 内容 2：网站导航（本网站提供了哪些服务功能）和站点层次。 内容 3：搜索（让用户能够快速找到自己需要的资料） 。 内容 4：导读（就像杂志封面一样，主页要用一些“里面有精彩内容”的暗示来吸引用 户。 “内容推荐”部分应该突出最新、最好、最热门的内容片断，例如头条促销信息或者热销 商品等。 “功能推荐”部分邀请用户去访问网站更多的栏目或者使用一些个性化功能或邮件简 报等。 ） 内容 5：内容更新（最新的新闻或公告信息、网站新动向、推行的新业务等，让用户了 解我们的网站很活跃，不是一潭死水） 。 内容 6：登陆注册（如果网站使用会员制，主页应该为新用户注册和老用户登陆提供链 接或者直接登陆框，免得用户四处寻找） 。 内容 7：快捷方式（用户最常访问的内容片断，如软件升级等，值得在主页上放置链接， 免得用户四处寻找） 。 内容 8：友情链接（用来放置广告、交叉推广、合作品牌的友情链接等） 。 内容 9：网站的帮助（帮助访问该网站的用户如何使用相应的服务，遇到问题时如何帮 助用户解决） 。 内容 10：网站版权。 根据首页的内容分析，以及一些常见的网页布局类型，一般电子商务网站首页的总体布 局如图 422 所示。 另外在布局时还要考虑用户机的屏显模式， 一般 800×600 的屏幕显示模式是比较常见的， 对于这种屏幕显示模式，在 IE 安装后默认的状态（即工具栏、地址栏等没有改变）下，IE 窗 口内能看到的部分为 778×435px。所以根据这个特点，我们一般设计的网页内容的宽度以 780px 适合，因为导航栏是一定要安排在首页上的，要求放在明显的地方，打开首页后不需 要任何操作就能找到的位置，根据 435px 这个数据及导航栏的要求，横向放置的导航栏要优 于纵向的导航栏考虑。
图 422 三、HTML 基础知识 HTML 语言，又称超文本标记语言，是英文 Hyper Text Markup Language 的缩写。HTML 语言作为一种标识性的语言，是由一些特定符号和语法组成的。 网站的开发离不开网页，而网页的核心技术就是 HTML 语言，特别是静态网页的设计就 更离不开 HTML 语言了，现在有了很多图形化的 HTML 开发工具如 Dreamweaver、Frontpage 等， 使得我们学习 HTML 更加容易。 要知道动态网页的设计一般都要与 HTML 语言合作完成， 所以了解一些常见的 HTML 语言标签的作用是十分必要的。 通过 HTML 语言编写网页时可以 直接通过记事本来实现，但在保存时一定要保存为扩展名为.htm 的网页文件（至于动态网页， 其扩展名有所不同）。 一个网页文件中的标记有一定的组成结构，不能随意颠倒和错乱这种关系，下面这段内 容说明了一个最基本的网页文件的标记组成结构。 在记事本中输入如图 423 所示的代码，然后“另存为”index.htm 文件，双击该文件即可 通过默认的浏览器看到该网页的效果，如图 424 所示。下面进一步来认识一下网页基础结构 图中各个标签的含义和作用。 HTML 标记的通用格式：<标记 属性名 1=“属性值 1”属性名 2=“属性值 2”……>内 容</标记> 网站主题图或动画 LOGO 标志 网站主导航、商品搜索栏 会员登录 商品分类目录 公告/新闻 新品上架 销售排行/热门类别/特价促销 在线调查 买家、卖家星级排行榜 友情链接 专题活动 网站底部/版权
图 423 图 424 （一）网页文件的基础组成结构 （1）<html></html>——<html>标记用于 HTML 文档的最前边，用来标识 HTML 文档的 开始。而</html>标记恰恰相反，它放在 HTML 文档的最后边，用来标识 HTML 文档的结束， 两个标记必须成对使用，网页中所有的内容都要放在<html>和</html>之间。 （2）<head></head>——网页文档从总体上可分为头和主体两部分。<head>和</head>定 义了 HTML 文档的头部分，必须是结束标签与起始标签成对使用。在此标签对之间可以使用 <title></title>、<script></script>等标签对，这些标签对都是描述 HTML 文档相关信息的标签 对，<head></head>标签对之间的内容是不会在浏览器的文档窗口中显示出来的。 （3）<title></title>——使用过浏览器的人可能都会注意到浏览器窗口的标题栏上显示的 文本信息， 那些信息一般是网页的 “主题” ， 要将网页的主题显示到浏览器的顶部其实很简单， 只要在<title></title>标签对之间加入主题文本即可。 注意：<title></title>标签对只能放在<head></head>标签对之间。 （4）<body></body>——定义了 HTML 文档的主体部分，必须是结束标签与起始标签成 对使用。 在<body>和</body>之间放置的是实际要显示的文本内容和其他用于控制文本显示方 式的标签，它们中间所定义的文本、图像等将会在浏览器的窗口内显示出来。 若需要修改网页的 HTML 源代码，可以在 IE 浏览器显示的网页空白处右击，在弹出的 快捷菜单中选择“查看源文件”命令，在打开的源码记事本中进行修改。这时如果网页没有 关闭，可以通过工具栏上的“刷新”按钮来观查网页修改的结果。
其中网页中内容显示的样式可以通过设置 body 标签的属性项目来完成， 常见的属性如表 41 所示。 表 41 文档整体属性 属性名 作用及说明 bgcolor 设置背景颜色，使用名字或十六进制值
background 设置背景图片，gif 或 jpeg 都可以，可以是绝对路径或相对路径
text 设置文本文字颜色，使用名字或十六进制值 link 设置链接颜色，使用名字或十六进制值 vlink 设置已使用的链接颜色，使用名字或十六进制值 alink 设置正在被击中的链接颜色，使用名字或十六进制值 bgproperties="fixed" 设置用于固定背景图片，防止背景图片滚动 示例： <body text="#000000" link="#000000" alink="#000000" vlink="#000000" background= "gifnam.gif" bgcolor="#000000" leftmargin=3 topmargin=2 bgproperties="fixed"> （二）常用标记简介 1．文本设置 l 字体设置标记 作用：font 标签用来标记字体的大小、颜色、字型等。 格式：<font>...</font> 属性： size = 字体大小，可取 1、2、3、4、5、6。 face = 字型名称，可取字体 1、字体 2、宋体、楷体等。 color= 字体颜色，可取 #rrggbb，其中 rr、gg、bb 为十六进制数据，它还可以采用颜色 英文名称进行设置。 示例： <html> <head> <title>字体设置</title> </head> <body bgcolor="#808000"> <font color="#0000ff" face="宋体" size=30>字体设置</font> </body> </html> l 字体的其他标记 格式及作用： <B>……</B>粗体；<I>……</I>斜体；<U>……</U>加下划线；<s>……</s>加删除线；<em>…… </em>加倾斜线；<TT>……</TT>打字机字体；<BIG>……</BIG>大型字体；<SMALL>……</SMALL>小 型字体；<STRONG>……</STRONG>加强显示；<CITE>……</CITE>用于引证。
l 标题标记 作用：以标题字体显示内容。 格式：<hi>...</hi>i=1……6 属性：对齐属性 align="center"对齐，另可选 right、left。 l 注释标记 作用：用来对代码进行注释，解释说明代码的用处及作用等，这样有助于你和他人日后 能够更好地理解代码。 格式：<!注释内容> 示例： <!这是首页> 注意：在执行网页时，浏览器是忽略注释的，你不会在网页效果图中看到注释。 l 换行标记 作用：用于换行，相当于按回车键的作用。 格式：<br> l 段落标记 作用：设置段落效果。 格式：<p>段落内容</p> l 水平线标记 作用：可以在屏幕上显示一条水平线，用以分割页面中的不同部分。 格式：<hr> 属性： size 以像素为单位的数字，表示水平线的宽度。 width 表示水平线长度。 align 水平线的对齐方式，有 LEFT、RIGHT、CENTER 三种。 noshade 线段不要阴影属性； color="#rrggbb"表示颜色。 l 文本预定义标签 作用：以原始样式显示内容。 格式：<pre>...</pre> 2．列表格式 l 无序列表 作用：显示出没有进行编号的列表格式。 格式 1： <ul> <li>第一项 <li>第二项 <li>第三项 </ul> 格式 2： <ul> <li type=disc>第一项
<li type=circle>第二项 <li type=square>第三项 </ul>
属性：type 属性有 3 个选项，分别是 disc 实心圆、circle 空心圆、square 小方块。 示例： <ul> <li>默认的无序列表加"实心圆" <li>默认的无序列表"实心圆" <li>默认的无序列表"实心圆" </ul> <ul> <li> type=square>无序列表 square 加方块 <li >type=square>无序列表 square 加方块 <li >type=square>无序列表 square 加方块 </ul> <ul> <li> type=circle>无序列表 circle 加空心圆 <li >type=circle>无序列表 circle 加空心圆 <li >type=circle>无序列表 circle 加空心圆 </ul> l 有序列表 作用：显示出进行编号的列表格式。 格式 1： <ol star=数字 type=编号类型> <li>第 1 项 <li>第 2 项 <li>第 3 项 </ol> 格式 2： <ol> <li>第 1 项 <li>第 2 项 <li>第 3 项 </ol> 属性：两个参数，star=编号开始的数字，如 star=2 则编号从 2 开始；如果从 1 开始可以 省略； type=用于编号的数字、字母等的类型，如 type=a，则编号用英文字母。 示例： <ol> <li>默认的有序列表 <li>默认的有序列表 <li>默认的有序列表 </ol> <ol type=a> <li>第 1 项 <li>第 2 项
<li>第 3 项 </ol> l 定义性列表 作用：生成一个带注释的列表。 格式： <dl> <dt>第 1 项 <dd>注释 1 <dt>第 2 项 <dd>注释 2 <dt>第 3 项 <dd>注释 3 </dl> 示例： 定义性列表<P> <dl> <dt> WWW <dd> WWW 是（World Wide Web）的缩写； <dt> WWW <dd> WWW 又叫万维网； <dt> WWW <dd> Internet 提供的最常用的服务是 WWW； </dl> 3．表格标记 作用：生成一个表格。 格式： <table> <caption>表标题</caption> <tr><th>表头标记 1</th>……<th>表头标记 n</th> </tr> <tr> <td>单元格 1</td>……<td>单元格 n</td> </tr> ... </table> 属性： border=数字，用来设置表格边框的粗细，省略时为无边框。 bordercolor="#ff0000"，指定边框颜色。 align="center"，指定对齐方式（左 left，右 right）。 bgcolor=#808080，表格背景色。 width=数字，用来设置表格宽度，单位像素。 示例： <html> <head> <title>值班表</title> </head> </html> <table border=1 bordercolor="#ff0000" "bgcolor=#808080" align="center" > <caption>值班表</caption> <tr>
<th>星期一 </th> <th>星期二 </th> <th>星期三 </th> </tr> <td>小李</td> <td>小赵</td> <td>小王</td> </table> 4．链接 l 超链接概述 （1）超链接的类型。 内部链接——这种链接的目标端点是本站中的其他文档。利用这种链接，可以跳转到本 站点其他的页面上。 外部链接——这种链接的目标端点是本站点之外的站点或文档。利用这种链接，可以跳 转到其他的网站上。 Email 链接——单击这种链接，可以启动电子邮件程序书写邮件，并发送到指定的地址。 锚点链接——这种链接的目标端点是文档中的命名锚记，利用这种链接，可以跳转到当 前文档中的某一指定位置上，也可以跳转到其他文档中的某一指定位置上。 （2）链接路径。 1）绝对路径：如果在链接中使用完整的 URL 地址，这种链接路径就称为绝对路径。路 径同链接的源端点无关。 2）相对路径：相对路径可以表述源端点同目标端点之间的相互位置，它同源端点的位置 密切相关。 3）基于目录的路径：所有的路径都是从站点的根目录开始的，它同源端点的位置无关。 通常用一个斜线“/”表示根目录。 l 超文本链接 作用：在浏览器上鼠标移动时，当移动到某些文本或者图形之上时，有时会变成一只小 手，表示这是一个超连接，单击此处就会打开目标网页。 格式：<A 属性>要显示的文本或图像</A> 属性： href="url"，定义了链接指向的节点。 target="_blank"，在新开的窗口中显示。 title="提示文本"，在浏览器中鼠标滑过时要显示的内容。 name="name"，超链文本链接的名称。
href="url"，href 是超链接<a>的一个最重要属性，url 是传递给 href 的值，url 代表了网页 中的一个信息点，这个信息点包含了信息资源的类型（协议） 、地址和文件名，所以 url 又叫 统一资源定位器或叫做网址。
示例：
<a href="http://bbs.cnlsj.com/">中国老三届论坛首页</a><br><!锚点链接> <a href="1 网站连接.html">连接到本地文件"1 网站连接"</a><br> <!外部链接>
<a href="秋天的树.jpg">连接到本地文件"秋天的树.jpg"</a><br> <a href="雷.mp3">连接到本地文件"雷.mp3"</a><br>
<a href="http://bbs.cnlsj.com/" target="_blank" >中国老三届论坛首页</a><br> <a href="mailtzh@126.com">发送邮件</a><!Email 链接>
<a href="#n3" title="滑过弹出的字">flash 基础课</a><!锚点链接> 5．图像标记 作用：img 叫图像标记，通过 img 可以在 html 文件中添加图像。 格式：<A 属性>要显示的文本或图像</A> 属性： src 表示图像文件地址 url。 dynsrc 表示视频文件地址 url。 width 表示图像宽度。 height 表示图像高度。 align 表示图像对齐方式 left、right、top、bottom、middle。 alt 表示鼠标滑过时弹出的内容。 border 图像边框粗细。 controls 设置视频能否使用。 start 设置视频播放方式，默认打开就播放，mouseover 为鼠标移过播放。 loop 设置视频播放次数。 vspace 表示图像上下空白区。 hspacp 表示图像左右空白区。 示例： <img src="小狗.gif" border=2 align=bottom> 底对齐 align=bottom </img> <img dynsrc="旋转的球.avi" loop=3 >播放次数 loop</img>
<img dynsrc="旋转的球.avi" loop=100 start=mouseover>鼠标滑过播放</img> <img src="welcome.gif" border=1 alt="视频连接" width=20 height=20></img> 6．滚动字幕 作用：marquee 为滚动字幕标记。 格式：<marquee>文字或图片等内容</marquee> 属性： align 指定对齐方式 top、middle、bottom。 behavior 指定动画的运动属性：scroll 单向运动；slide 如幻灯片，一格格的，效果是文字 一接触左边就停止；alternate 左右往返运动。 direction 设定文字的卷动方向，left 表示向左，right 表示向右。 bgcolor="#0000FF" 设定文字卷动范围的背景颜色。 loop 设定文字卷动次数，其值可以是正整数或 infinite，infinite 表示无限次。 height="30" 设定字幕高度。 width="150" 设定字幕宽度。 scrollamount="30" 指定每次移动的距离，距离越大则速度越快。 scrolldelay="500" 文字卷动的停顿时间，单位是毫秒。时间越短滚动越快。
hspac 指定字幕左右空白区的大小。 vspac 指定字幕上下空白区的大小。 示例： <marquee width=250>滚动字幕</marquee> <marquee behavior=alternate>左右往返运动</marquee> <marquee scrolldelay=50>滚动字幕移动速度</marquee> <marquee scrollamount="3" >滚动字幕移动距离</marquee> 7．框架 l 一般框架 作用：框架指的是将一个较大的页面分割成几个较小的窗体，页面用 frameset 表示，里 面的较小窗体用 frame 表示，frameset 中放入多少个 frame 就会分成多少个小窗体，每个小窗 体都拥有自己的 url，在一个 html 文件中如果使用了框架结构，就不能再使用 body 了。 格式： <html> <head> <title>..</title> </head> <frameset>//框架集 <frame>//框架 <frame> <frame> ... </frameset> </html> 框架集的属性。 border 设置边框粗细，默认是 5 像素，如果设置小于 5，分割线就不可见了。 bordercolor 设置边框颜色。 frameborder 指定是否显示边框。 cols 用“像素数”和“%”分割左右窗口， “*”表示剩余部分。 rows 用“像素数”和“%”分割上下窗口， “*”表示剩余部分。 框架的属性： src 指示加载的 url。 border 设置边框粗细。 bordercolor 设置边框颜色。 frameborder 指示是否要边框，1 显示边框，0 不显示边框（可以是 yes 或 no） 。 name 指示框架名称，是连结标记的 target 所要的参数。 noresiae 指示不能调整窗口的大小，省略此项时就可调整。
scorlling 指示是否要滚动条，auto 根据需要自动出现，yes 有，no 无。 marginwidth 设置左右边距。
width="100" height="100" 框窗的宽及高。 align 可选值为 left、right、top、middle、bottom。 示例： <frameset rows="80，*，80"> <frame name="top" src="a.html"> <frame name="middle" src="b.html"> <frame name="bottom" src="c.html"> </frameset> l 浮动框架 作用：它的作用是在网页中插入一个框窗以显示另一个文件。 格式：格式与 frame 一样。 属性：属性与 frame 一样。 示例： <html> <body>
<iframe src="c.html" name="ss" align="middle" width="300" height="100" marginwidth="1" marginheight="1" frameborder="1" scrolling="Yes"> </iframe> </body> </html> 8．表单与控件 l 认识表单 （1）表单的概念。 表单是用户与服务器管理员或作者进行信息交流的感应器，主要负责客户数据的采集功 能，用户可以通过表单将自己的姓名、Email、留言等数据，传到服务器的接口 cgi 上，再由 cgi 传到服务器，如果服务器不支持 cgi，也可以用电子邮件传递给作者。 （2）表单的基本组成。 表单是由窗体和控件组成的，一个表单一般应该包含指导用户填写的说明性文字，用户 填写的表格、提交和复位按钮等；这些表格、按钮等叫做控件，所以说表单是一个容器，因 为它能够容纳各种各样的控件。 要构造一个表单必须使用表单标记 form，其格式为<form>...</form>，然后就是在开始标 记<form>和结束标记</form>之间，使用写入标记 input 把各种控件标记放进去。 l 窗体 格式：<form>...</form> 属性：action＝"url"。action 指定接收这个表单数据文件的地址，这个地址一般是服务器 的 URL 或者电子邮件地址 Email，如果这个属性是空值则当前文档的 url 将被使用；一般来 说，处理用户反馈信息的程序是放在 Web 服务器的 cgibin 目录下。 method=get/post：method 指定与服务器交换数据的方法，可选 get 和 post。当 method=get 时表示交换少量信息，主要用于从服务器获取信息，在向服务器传送信息时，信息长度不能
超过 255 个字符，即小于 1K 的资料，当 method=post 时则表示要传递大量信息，数据将按照 HTTP 传输协议中的 post 传输方式传送到服务器，电子邮件接收一般采用这种方式。 name="myform" 用于设定表单的名称。 target="blank" target：指定目标窗口，可选当前窗口 self、父级窗口 parent、顶层窗口 top 和空白窗口 blank。 l 控件 <select multiple name="name" size=""></select> 创建滚动菜单，size 设置在需要滚动前可 以看到的表单项数目。 <select name="name"></select>创建下拉菜单。 <option>设置每个菜单项的内容。 <textarea name="name" cols=40 rows=8></textarea> 创建一个文本框区域，列的数目设置 宽度，行的数目设置高度。 <input type="checkbox" name="name"> 创建一个复选框，文字在标签后面。 <input type="radio" name="name" value=""> 创建一个单选框，文字在标签后面。 <input type=text name="foo" size=20> 创建一个单行文本输入区域， size 设置字符串的 宽度。 <input type="submit" value="name"> 创建提交（submit）按钮。
<input type="image" border=0 name="name" src="name.gif"> 创建一个使用图像的提交 （submit）按钮。 <input type="reset"> 创建重置（reset）按钮。 示例： <html> <head> <title>form and input</title> </head> <body> <form action="forminput2.htm" method="post" name="forminput1"><br> 请选择你喜欢的课程<br> flash 脚本课 <input type="checkbox" name=checkox1><br> flash 基础课 <input type="checkbox" name=checkox2><br> flash 实例课 <input type="checkbox" name=checkox3><br> flash 提高课 <input type="checkbox" name=checkox4><br> 请选择你<font color="#ff0000" size="5">最</font>喜欢的课程<br> flash 脚本课 <input type="radio" name=radio><br> flash 基础课 <input type="radio" name=radio><br> flash 实例课
<input type="radio" name=radio><br> flash 提高课 <input type="radio" name=radio><br> <font color="#ff3300" size="5" face="华文行楷">输入账号</font> <input name=user size=20><br> <font color="#ff3300" size="5" face="华文行楷">输入密码</font> <input type="password" name=password size=20><br> <input type="submit" value="提交按钮"> <input type="reset" value="清除按钮"> </form> </body> </html> 9．其他 <div>、<span>标记一般与 CSS 合作使用完成网页的布局。 l <div>块标记 作用：块标记也称为层标记或定位标记，它不像链接或者表格具有实际的意义，其作用 就是设定文字表格等摆放位置。由于早期的浏览器对于CSS 样式表支持不好，导致层的作用 被忽略，人们更愿意用易控制的表格来布局页面，不过随着浏览器对样式表支持的力度越来 越大，层的应用位置也明显提高。 格式：<div>块中的内容</div> 示例： <div style="color：#00FF00"> <h2>This is a header</h2> <p>This is a paragraph</p> </div> l <span> 标签 作用：请使用 <span> 来组合行内元素，以便通过样式来格式化它们。 格式：<span>内容</span> 注释：span 没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。 示例： HTML： <p class="tip"><span>提示：</span>……</p> CSS： p.tip span{ fontweight：bold； color：#FF9944； } l <div>与<span>标签的区别 <div> 是块标签，用来定义大段的页面元素，可以包含段落、标题、表格，乃至诸如章 节、摘要和备注等。DIV 也被用来在 HTML 文件中建立逻辑部分。但与 SPAN 不同，＜div ＞工作于文本块一级，它在它所包含的 HTML 元素的前面及后面都引入了行分隔。
当其他行内元素都不合适时，可以使用 SPAN。它有一个重要而实用的特性，即它什么事也不 会做， 它的唯一目的就是围绕 HTML 代码中的其他元素， 这样就可以为它们指定样式了。 SPAN 在它所包含的 HTML 元素的前面及后面都不产生分行效果。 l META 标签 作用：META 标签是 HTML 语言 HEAD 区的一个辅助性标签。META 标签分两大部分： HTTPEQUIV 和 NAME 变量。META 是对网站发展非常重要的标签，它可以用于鉴别作者、 设定页面格式、标注内容提要和关键字及刷新页面等。 META 标签的 NAME 变量语法格式如下所示： ＜META NAME=xxx CONTENT=xxxxxxxxxxxxxxxxxx＞ <meta charset=" gb2312" />根据这一行代码，浏览器就可以识别出这个网页应该用中文简 体字符显示。 <meta name="description" content="这里是网页的描述，是给搜索引擎看的，搜索引擎根据 这个描述进行收录排名，一般是网页内的关键字。"/> <与 META 标签中的"description"类似，"Keywords"也是用来描述一个网页的属性，只不过要列 出的内容是“关键词” ，而不是网页的介绍。这就意味着，要根据网页的主题和内容选择合适的关键词。/> ＜META CONTENT=5；URL=http://www.yahoo.com＞ 其中的 5 是指停留 5 秒钟后自动刷新到 URL 网址。 四、网页结构布局 网站要有好的浏览量，受到用户的欢迎，网页的布局非常重要。一个简洁明快的网页往 往给人印象深刻，更容易吸引浏览者浏览。网页的结构布局常见的方式有：表格布局法、框 架布局法、Photoshop+Firework 切割布局以及最流行的 CSS+DIV 布局法。 （一）在 Dreamweaver 8 中的表格布局法 表格在网页中用于网页的布局，它的优势在于可以有效地定位网页中不同的元素，而又 不用担心不同元素之间的影响。Dreamweaver 8 中提供了两种方式来进行表格布局，一是普通 表格布局，通过如图 425 所示来插入表格进行页面布局；二是“布局”模式，通过如图 426 所示进入该模式操作。在“布局”模式中，既可以使用表格作为基础结构来设计网页，又可 避免使用传统的方法创建基于表格的设计时经常出现的一些问题。 图 425 图 426 表格制作网页比较简单易学，但是缺点很多，如代码很多、不易修改、不易升级、占用 空间大、打开网页速度慢等。 1．认识表格 表格包括行、列、单元格 3 个组成部分，如图 427 所示。 单击这里插入表格 绘制布局单元格 绘制布局表格
2．Dreamweaver 8 中表格的操作 （1）创建表格。 1）插入表格。 可以使用“插入”栏或“插入”菜单来创建一个新表格。具体步骤如下： 图 427 ① 在文档窗口的设计视图中，将插入点放在需要插入表格的位置。 ② 单击“插入”栏“常用”类别中的“表格”按钮，或选择“插入”→“表格”命令。 在“表格”设置对话框中有两个数据设置解释一下：一个是“单元格边距” （也称填充）指的 是单元格内的内容与单元格边框线之间的距离；另一个是“单元格间距” （也称间距）指的是 相邻单元格之间的空白距离。具体认识参照图 428 所示。 图 428 内容
③ 按需要设置表格参数后，单击“确定”按钮完成表格的创建。 2）向单元格中添加内容。 可以像 Word 等文本编辑器中一样，在表格单元格中添加文本和图像等元素。 （2）编辑表格。 1）选择表格元素。 可以一次选择整个表、行、列或在表格中选择一个连续的单元格块，还可以选择表格中 多个不相邻的单元格，并修改这些单元格的属性。 ①选择整个表格。单击表格的左上角或者单击右部或底部边缘的任意位置。 ②选择行或列。首先定位鼠标指针，使其指向行的左边缘或列的上边缘，当鼠标指针变 为选择箭头时，单击选择行或列，或拖动选择多个行或列。 ③选择一个单元格：光标定位至单元格，然后单击标签选择器中的<td>标签选择一个单 元格。 ④选择相邻单元格： 将鼠标从一个单元格拖到另一个单元格或者使用 Shift 来选择多个相 邻的单元格。 ⑤选择不相邻的单元格：按住 Ctrl 键的同时单击要选择的单元格、行或列，则该单元格 会将其选中。如果它已经被选中，则再次单击会将其从选择中删除。 2）设置表格和单元格的格式。 可以通过设置表格及表格单元格的属性或将预先设置的设计应用于表格来更改表格的外 观。若要设置表格中文本的格式，可以对所选的文本应用格式设置或使用样式。 ①关于表格格式设置中的冲突。 当在设计视图中对表格进行格式设置时，可以设置整个表格或表格中所选行、列或单元 格的属性。如果将整个表格的某个属性（如背景颜色或对齐）设置为一个值，而将单个单元 格的属性设置为另一个值，则单元格格式设置优先于行格式设置，行格式设置又优先于表格 格式设置，即表格格式设置的优先顺序为：单元格 >行 >表格。 ②查看和设置表格属性。 I．选择一个表格。 II．选择“窗口”→“属性”命令，打开“属性”面板，如图 429 所示。 图 429 1－表格 Id。表格名称（只有在需要控制行为时填） 。 2－行、列。表格行、列（可在这里增/删数据） 。 3－表格高、宽度及单位设置（一般高度不要填） 。 1 2 11 3 4 6 8 5 9 10 7
4－设置表中单元格间空白及内容与格边的间隔。 5－边框宽度。 6－表格在页面中的对齐方式。 7－表格尺寸属性：其中有橡皮的两个图标的作用是去除已定义尺寸限制；有“PX”和 “%”标志的图标作用是像素与“%”间的转换。 8－可添加表格的 CSS 效果。 9－表格边线颜色。 10－表格背景图。 11－表格背景颜色。 3）通过设置“属性”面板中的参数来更改表格的格式设置。 3．调整表格的大小 通过拖动选择控制点可以调整整个表格或单个行和列的大小， 当调整整个表格的大小时， 表格中的所有单元格按比例更改大小。 说明：如果表格的单元格指定了明确的宽度或高度，则调整表格大小会在文档窗口中更 改单元格的可视大小，而不更改这些单元格的指定宽度和高度。 4．更改列宽和行高 通过使用属性检查器或拖动列或行的边框，可以更改列宽或行高。还可以使用代码视图 直接在 HTML 代码中更改单元格的宽度和高度。 说明：可以按像素或百分比指定宽度和高度，并且可以在像素和百分比之间互相转换。 5．添加及删除行和列 添加、删除行和列应首先确定操作的位置，即选定当前的行或列。 （1）添加及删除行和列，可以选择“修改”→“表格”命令。 （2）若要一次添加多行或多列，或者在当前单元格的下面添加行或在其右边添加列，请 选择“修改”→“表格”→“插入行或列”命令，此时会出现“插入行或列”对话框。在该 对话框中输入必要的信息，然后单击“确定”按钮。 （3） 清除完整的行或列时， 可以在选择后直接按 Delete 键， 整个行或列将从表格中删除。 6．拆分和合并单元格 拆分和合并单元格可使用属性检查器左下角的“ ”工具或选择“修改”→“表格” “拆分或合并单元格”命令。 7．嵌套表格 嵌套表格是放置在另一个表格的单元格中的表格。可以像对其他任何表格一样对嵌套表 格进行格式设置；但是，其宽度受它所在单元格宽度的限制。 具体操作是将光标插入当前表格的某个单元格中，然后选择“插入”→“表格”命令， 或单击“插入”栏的“常用”类型中的“插入表格”按钮。 8．单元格的基本操作 （1）插入单元格，操作步骤是选择“表格”→“插入”→“单元格”命令。 （2）编辑单元格，操作步骤如下： 1）选择一个单元格。
2）选择“窗口”→“属性”命令，打开“属性”面板，如图 430 所示。 图 430 在此单元格“属性”面板中可设置以下几项： 1－合并/拆分单元格。 2－单元格内元素水平/垂直方向对齐方式。 3－设置单元格尺寸。 4－格内文本自动换行（一般设置为缺省） 。 5－设置成标题单元格。 6－背景色。 7－背景图片。 8－边框颜色。 3）通过设置“属性”对话框中的参数来更改单元格的格式设置。 （3）单元格的复制、粘贴、移动和清除。 在设计网页时，可以一次复制、粘贴、移动和清除一个或多个单元格。操作方法如下： 在网页编辑窗口中选中要复制的对象。 复制——按 Ctrl+C 组合键，或选择“编辑”→“复制”命令。 移动——按 Ctrl+X 组合键，或选择“编辑”→“剪切”命令。 粘贴——按 Ctrl+V 组合键，或选择“编辑”→“粘贴”命令。 拖动——按住 Ctrl 并拖动鼠标，则完成复制操作。 清除——按 Delete 键，或选择“编辑”→“清除”命令。 五、使用表格的其他视图 Dreamweaver 8 提供了标准视图、扩展视图、布局视图 3 种视图模式。通常使用的是标准 视图，可通过“插入”栏的“布局”类别，切换到布局视图或扩展视图。 扩展视图的主要作用是临时向文档中的所有表格添加单元格的边距和间距，并且增加表 格的边框，这样可以使编辑操作更加容易。 在“布局视图”方式下，利用表格进行网页排版设计更为直观、方便。通过鼠标自由拖 拽就可绘制任意的表格布局，且可自由移动。 创建布局表格和布局单元格： （1）绘制布局表格。 （2）绘制布局单元格。 （3）移动布局表格和布局单元格。 设置布局表格和单元格属性： （1）设置布局表格属性。
（2）设置布局单元格的属性。 （3）Dreamweaver 8 中进行表格布局法的一般步骤是： 根据要求画好网页的整体布局图，然后根据整体布局图在 Dreamweaver 8 中通过表格来 设计出网页的整体部局，如图 431 所示。 图 431 往表格布局里填充文字、图片等元素内容。其结果的效果如图 432 所示。 图 432
