web程序设计_第4章__页面设计

来源：网络收集时间：2026-09-07

导读：第4章页面设计 1 静态页面设计 2 动态页面设计网页设计要使用多种技术，包括HTML、脚本程序设计、 CSS样式表及美工技术等。仅使用HTML设计的页面属于静态页面。Web刚出现的一段时间内，它是一个静态信息发布平台，所设计的页面都是静态的；而当

第4章页面设计 1 静态页面设计 2 动态页面设计网页设计要使用多种技术，包括HTML、脚本程序设计、 CSS样式表及美工技术等。仅使用HTML设计的页面属于静态页面。Web刚出现的一段时间内，它是一个静态信息发布平台，所设计的页面都是静态的；而当今的Web已经具有更丰富的功能。构件对象模型:COM1

3 样式表设计本章小结

4.1

静态页面设计

静态页面主要是使用HTML语言设计的页面，用户只能浏览Web服务器上预先安排好的信息。设计静态页面主要使用各种页面开发工具，如Dreamweaver,FrontPage等

返构件对象模型:COM

回2

4.1.11. 头部标记<head>,</head> <title>,</title> <style>,</style> <meta>

HTML基本标记

HTML文件头部的起始和结束标记。 HTML文件的标题，是显示于浏览器标题栏的字符串。 CSS样式定义该标记位于<head>与<title>标记之间，用于描述文档的

属性

2. 体部标记① <body>,</body>标记

返构件对象模型:COM

回3

表4-1 <body>标记属性表

属性 bgcolor text link alink vlink background topmargin leftmargin

取颜色值颜色值颜色值颜色值颜色值

值页面背景颜色

含

义

默认值 #FFFFFF #000000

HTML 文件中文字的颜色 HTML 文件中待链接的超链接对象的颜色 HTML 文件中链接中的超链接对象的颜色 HTML 文件中已链接的超链接对象的颜色页面背景图像页面显示区距窗口上边框的距离，以像素点为单位页面显示区距窗口左边框的距离，以像素点为单位构件对象模型:COM

图像文件名整数整数

无 0 0返回4

②

文字显示和段落控制标记标 <font>, </font> <I>, </I> <B>, </B> <U>, </U> <sub>, </sub> <sup>, </sup> <big>, </big> <small>, </small> <h1>—<h6> <p>, </p> <p>, </p> <hr> <center>, </center> 记含义分别以属性 face, size,color 控制字体、字号、颜色显示特性斜体显示粗体显示加下划线显示下标字体上标字体大字体小字体标题级别，数字越大，显示的标题字越小分段标记，属性有布局方式 align:left—左对齐；center—居中对齐； right—右对齐块容器标记，其中的内容是一个独立段落分隔线，属性有 width(线的宽度) 、color(线的颜色) 居中显示

表4-2 常用的文字显示和段落控制标记表构件对象模型:COM

返

回

【例4-1】图4-1是一个具有不同的文字显示格式和段落控制格式的HTML文件的显示效果，相应的HTML文件中包含了文字显示和段落控制标记。

返

回

图4-1 文字显示和段落控制示例构件对象模型:COM

查看源代码6

③

图像标记<img> <img>标记的属性包括以下5种：

指定图像文件的地址。该属性值必须指明，值的形式可以是本地文件名，也可以是

URL形式。 border 指定图像边框粗细，值为整数。若为0,表示无边框，值越大，边框越粗。 width 指定图像宽度，值为整数，单位为屏幕像素点。若不指定该属性值，则浏览器根据图像的实际尺寸显示。 height 指定图像高度，值为整数，单位为屏幕像素点。若不指定该属性值，则浏览器根据图像的实际尺寸显示。 alt 指定图像的提示标签。若设置了该属性值，则当鼠标移至该图像区域时，将以一个小标签显示该属性的值。src

返构件对象模型:COM

回7

④

超链接标记

超链接标记的格式如下：<a href="URL信息">超链接文本或图像</a>

超链接标记除了有必备的href属性外，还有一个属性target,它指明目标页面显示的窗口表示目标页面显示于一个新的浏览器窗口中表示目标页面显示于整个浏览器窗口中，而不是显示在帧所在窗口中，通常在帧中的超链接才需要设置该值 target=帧名目标页面显示于指定帧所在的窗口中 target的默认值是本页面所在的浏览器窗口 target=_blank target=_top

返

回8

根据目标页面位置的不同，href属性的URL信息的构成分为以下3种情况：

目标页面位于另外的主机或采用非http协议，此时采用绝对 URL格式，即使用如下格式：协议名://主机名[/目录信息]

若目标页面位于本主机，可采用相对URL格式：<a href="des1.htm">超链接文本</a> 或<a href="/des2.htm">超链接文本</a>

通常超链接总是指向目标HTML文件的头部，但超链接的目标也可以是某个文件的特定位置(称为“锚点”,anchor) 其格式如下：<a name="锚名">文本或图像等页面元素</a>

返构件对象模型:COM

回9

⑤

列表标记和预定格式标记

列表标记是HTML的一个基本结构。有以下3种类型的列表：无序列表(Unordered list) 有序列表(Ordered list) 定义列表(Definition list)<ul>列表项</ul> <ol>列表项</ol> <dl>列表项</dl>

预定格式(Preformatted)标记可以使信息完全按照HTML文件中编排的格式原样显示于浏览器中，该标记的格式如下：<pre>预定格式的信息</pre>

返构件对象模型:COM

回10

【例4-3】下列程序采用3种列表标记显示如图4-2所示的页面

查看程序

构件对象模型:COM

返

回

4.1.21. 表格的定义<table> [<caption>标题内容</caption>] <tr> <td>表格内容</td> {<td>表格内容</td>} </tr> </table>

表格

表格的属性标记<table>,<tr>和<td>的属性用来定义表格的显示特性

返构件对象模型:COM

回12

表4-3 <table>标记属性表属 border width cellpadding cellspacing bordercolor background align 性取整数百分比值整数整数整数颜色值图像文件名 left|center|right 值格边框越粗表格宽

度，以相对于充满窗口的百分比计(如 60%) 表格宽度，以屏幕像素点数计每个表项内容与表格边框之间的距离，以像素点为单位表格边框之间的距离，以像素点为单位表格边框的颜色表格的背景图像表格的位置含义默认值 0 100% 0 2 #000000 无 left

表格边框粗细，该值为 0,表格没有边框；值越大，表

返

回

表4-4 <tr>标记属性表

属性 align bgcolor valign width height

含义本行各表格项的横向排列方式本行各表格项的背景色本行各表格项的纵向排列方式本行宽度(受<table>的 width 属性值制约) 本行高度，以像素点为单位构件对象模型:COM

默认值 left(左对齐) #000000 middle

返

回

表4-5 <td>标记属性表属 align bgcolor valign width height background colspan rowspan 性取值含义默认值 left(左对齐) #0 …… 此处隐藏：2024字，全部文档内容请下载后查看。喜欢就下载吧 ……

web程序设计_第4章__页面设计.doc 将本文的Word文档下载到电脑，方便复制、编辑、收藏和打印

下载这篇word文档

本文链接：https://www.jiaowen.net/fanwen/1993611.html（转载请注明文章来源）

上一篇：食品公司销售部门管理手册,销售人员管理与薪酬奖励制度
下一篇：2016考研政治冲刺复习阶段两大注意事项