下载此文档

WEB程序设计页面设计.pptx

文档分类：IT计算机 | 页数：约69页举报非法文档有奖

1/69

下载提示

1.该资料是网友上传的，本站提供全文预览，预览什么样，下载就什么样。
2.下载该文档所得收入归上传者、原创者。
3.下载的文档，不会出现我们的网址水印。

同意并开始全文预览

(约 1-6 秒)

1/69 下载此文档

文档列表 文档介绍

1
第4章页面设计
1 静态页面设计
2 动态页面设计
3 样式表设计
本章小结
网页设计要使用多种技术，包括HTML、脚本程序设计、CSS样式表及美工技术等。仅使用HTML设计的页面属于静态页面。Web刚出现的一段时间内，它是一个静态信息发布平台，所设计的页面都是静态的；而当今的Web已经具有更丰富的功能。
2
静态页面设计
静态页面主要是使用HTML语言设计的页面，用户只能浏览Web服务器上预先安排好的信息。
设计静态页面主要使用各种页面开发工具，如Dreamweaver，FrontPage等
3
HTML基本标记
头部标记
<head>，</head> HTML文件头部的起始和结束标记。
<title>，</title> HTML文件的标题，是显示于浏览器标题栏的字符串。
<style>，</style> CSS样式定义
<meta> 该标记位于<head>与<title>标记之间，用于描述文档的
属性
体部标记
<body>，</body>标记
4
表4-1 <body>标记属性表
5
文字显示和段落控制标记
表4-2 常用的文字显示和段落控制标记表
6
【例4-1】图4-1是一个具有不同的文字显示格式和段落控制格式的HTML文件的显示效果，相应的HTML文件中包含了文字显示和段落控制标记。
图4-1 文字显示和段落控制示例
查看源代码
7
图像标记<img>
<img>标记的属性包括以下5种：
src 指定图像文件的地址。该属性值必须指明，值的形式可以是本地文件名，
也可以是URL形式。
border 指定图像边框粗细，值为整数。若为0，表示无边框，值越大，边框越
粗。
width 指定图像宽度，值为整数，单位为屏幕像素点。若不指定该属性值，则浏
览器根据图像的实际尺寸显示。
height 指定图像高度，值为整数，单位为屏幕像素点。若不指定该属性值，则浏
览器根据图像的实际尺寸显示。
alt 指定图像的提示标签。若设置了该属性值，则当鼠标移至该图像区域时，
将以一个小标签显示该属性的值。
8
超链接标记
超链接标记的格式如下：
<a href="URL信息">超链接文本或图像</a>
超链接标记除了有必备的href属性外，还有一个属性target，它指明目标页面显示的窗口
target=_blank 表示目标页面显示于一个新的浏览器窗口中
target=_top 表示目标页面显示于整个浏览器窗口中，而不是显示在
帧所在窗口中，通常在帧中的超链接才需要设置该值
target=帧名目标页面显示于指定帧所在的窗口中
target的默认值是本页面所在的浏览器窗口
9
根据目标页面位置的不同，href属性的URL信息的构成分为以下3种情况：
目标页面位于另外的主机或采用非http协议，此时采用绝对URL格式，即使用如下格式：
协议名://主机名[/目录信息]
若目标页面位于本主机，可采用相对URL格式：
<a href="">超链接文本</a>
或<a href="/">超链接文本</a>
通常超链接总是指向目标HTML文件的头部，但超链接的目标也可以是某个文件的特定位置（称为“锚点”，anchor）
其格式如下：
<a name="锚名">文本或图像等页面元素</a>
10
列表标记和预定格式标记
列表标记是HTML的一个基本结构。有以下3种类型的列表：
无序列表（Unordered list） <ul>列表项</ul>
有序列表（Ordered list） <ol>列表项</ol>
定义列表（Definition list） <dl>列表项</dl>
预定格式（Preformatted）标记可以使信息完全按照HTML文件中编排的格式原样显示于浏览器中，该标记的格式如下：
<pre>预定格式的信息</pre>

WEB程序设计页面设计来自淘豆网www.taodocs.com转载请标明出处.

WEB程序设计 页面设计.pptx

WEB程序设计页面设计.pptx