web程序设计第4章_页面设计PPT课件
合集下载
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
格边框越粗
0
表格宽度，以相对于充满窗口的百分比计（如 60%）
表格宽度，以屏幕像素点数计
100%
每个表项内容与表格边框之间的距离，以像素点为单位 0
表格边框之间的距离，以像素点为单位
2
表格边框的颜色 表格的背景图像
#000000 无
表格的位置
left
返 回 14
表4-4 <tr>标记属性表
属性 取 值
•
以标记<input>定义的多种输入域，包括text，radio，checkbox，password，
hidden，button，submit和reset等。
•
以标记<textarea>定义的文本域。
•
以标记<select>和<option>定义的下拉列表框
返回
构件对象模型:COM
19
输入域
说明
text
构件对象模型:COM
返回
10
⑤ 列表标记和预定格式标记
列表标记是HTML的一个基本结构。有以下3种类型 的列表：
无序列表（Unordered list）
<ul>列表项</ul>
有序列表（Ordered list）
<ol>列表项</ol>
定义列表（Definition list）
<dl>列表项</dl>
构件对象模型:COM
1
整体 概述
一 请在这里输入您的主要叙述内容
二
请在这里输入您的主要 叙述内容
三 请在这里输入您的主要叙述内容
4.1 静态页面设计
▪ 静态页面主要是使用HTML语言设计的页面， 用户只能浏览Web服务器上预先安排好的信 息。
▪ 设计静态页面主要使用各种页面开发工具， 如Dreamweaver，FrontPage等
1. 表格的定义
<table> [<caption>标题内容</caption>] <tr> <td>表格内容</td> {<td>表格内容</td>} </tr> </table>
2. 表格的属性
➢ 标记<table>，<tr>和<td>的属性用来定义表格的显示特性
构件对象模型:COM
返回
13
属性
上标字体 大字体
<small>, </small>
小字体
<h1>—<h6>
标题级别，数字越大，显示的标题字越小
<p>, </p>
分段标记，属性有布局方式 align：left—左对齐；center—居中对齐； right—右对齐
<div>, </div>
块容器标记，其中的内容是一个独立段落
<hr>
分隔线，属性有 width（线的宽度）、color（线的颜色）
整数 项在宽度上占用 2 列
1
整数
按行纵向结合。例如该值为 2，表示本表格 项在高构度上件占对用象2 行模型:COM
返 1回
16
【例4-4】 以下是一个显示图4-3所示表格页面的HTML文件，例中只给出 主要的表格部分的文本，其余部分读者可以很容易地补全
查看程序
返 回 17
【例4-5】 以下是一个显示图4-4所示较复杂表格页面的HTML 文件
<html><head>[头部标记]</head> <frameset>{<frameset>…</frameset>} <frame> <frame>
✓ 若目标页面位于本主机，可采用相对URL格式：
<a href="des1.htm">超链接文本</a> 或<a href="/des2.htm">超链接文本</a>
✓ 通常超链接总是指向目标HTML文件的头部，但超链接的目 标也可以是某个文件的特定位置（称为“锚点”，anchor）
其格式如下：
<a name="锚名">文本或图像等页面元素</a>
表
当有多个选项时，可以选其中多项。举例：
4-6
checkbox （复选框）
签字笔 <input type=checkbox name="ch1" checked> 钢笔<input type=checkbox name="ch2">
常
圆珠笔<input type=checkbox name="ch3">
border
width
cellpadding cellspacing bordercolor background align
表4-3 <table>标记属性表
取值
整数
百分比值 整数 整数 整数 颜色值 图像文件名 left|center|right
含义
默认值
表格边框粗细，该值为 0，表格没有边框；值越大，表
第4章 页 面 设 计
▪ 1 静态页面设计 ▪ 2 动态页面设计 ▪ 3 样式表设计 ▪ 本章小结
▪ 网页设计要使用多种技术， 包括HTML、脚本程序设计、 CSS样式表及美工技术等。 仅使用HTML设计的页面属 于静态页面。Web刚出现 的一段时间内，它是一个静 态信息发布平台，所设计的 页面都是静态的；而当今的 Web已经具有更丰富的功 能。
览器根据图像的实际尺寸显示。
height 指定图像高度，值为整数，单位为屏幕像素点。若不指定该属性值，则浏
览器根据图像的实际尺寸显示。
alt
指定图像的提示标签。若设置了该属性值，则当鼠标移至该图像区域时，
将以一个小标签显示该属性的值。
构件对象模型:COM
返回
8
④ 超链接标记
超链接标记的格式如下：
2. 体部标记
① <body>，</body>标记
构件对象模型:COM
返回
4
表4-1 <body>标记属性表
属性 bgcolor text link alink vlink background topmargin leftmargin
取值 颜色值 颜色值 颜色值 颜色值 颜色值 图像文件名 整数 整数
构件对象模型:COMFra bibliotek返回3
4.1.1 HTML基本标记
1. 头部标记
<head>，</head> <title>，</title> <style>，</style>
<meta>
HTML文件头部的起始和结束标记。 HTML文件的标题，是显示于浏览器标题栏的字符串。 CSS样式定义 该标记位于<head>与<title>标记之间，用于描述文档的 属性
查看程序
实际效果
返 回 21
4.1.4 框架
1. 框架简例
2. 【例4-7】 以下是使用框架的一个简例
查看每部分的代码 显示实际效果
构件对象模型:COM
返 回 22
2. 框架的定义
▪ 框架的定义较为特殊，首先需确定如何分割窗口，然后建立 描述窗口分割的主文件，再为每个框架建立相应的HTML文 件
0
构件对象模型:COM
返回
5
② 文字显示和段落控制标记
标记
含义
<font>, </font>
分别以属性 face，size，color 控制字体、字号、颜色显示特性
<I>, </I>
斜体显示
<B>, </B> <U>, </U> <sub>, </sub>
粗体显示 加下划线显示 下标字体
<sup>, </sup> <big>, </big>
• target=帧名
目标页面显示于指定帧所在的窗口中
• target的默认值是本页面所在的浏览器窗口
返回
9
根据目标页面位置的不同，href属性的URL信息的构成分为以 下3种情况：
✓ 目标页面位于另外的主机或采用非http协议，此时采用绝对 URL格式，即使用如下格式：
协议名://主机名[/目录信息]
返回
构件对象模型:COM
查看程序 18
4.1.3 表单
1. 表单的定义
➢ 定义表单的语法如下：
<form method="get|post" action="处理程序名"> [<input type=输入域种类 name=输入域名>] [textarea定义] [select定义]
</form>
2. 表单的输入域
用
将数据传送给服务器。举例：
的
submit （提交按钮）
<input type=submit name="ok" value="提交">
表
用户输入的字符以“*”显示。举例：
单
password （密码输入框）
输入密码：<input type=password size=12>
输
将用户输入的数据清除。举例：
<center>, </center>
居中显示
表4-2 常用的文字构显件示对和象段模落型控:C制OM标记表
返回 6
【例4-1】 图4-1是一个具有不同的文字显示格式和段落控制格式的HTML文件的显 示效果，相应的HTML文件中包含了文字显示和段落控制标记。
返回
图4-1 文字显构示件和对段象落模控型制:C示OM例
颜色值
本表格项的背景色
#000000
top|middle |bottom 本表格项的纵向排列方式
middle
百分比值|整数
本表格项宽度（受<table>和<tr>的 width 属 性值制约）
本表格项高度，以像素点为单位（受<tr>的 整数
height 属性值制约）
图像文件名
本表格项的背景图像
无
按列横向结合。例如该值为 2，表示本表格
<a href="URL信息">超链接文本或图像</a>
超链接标记除了有必备的href属性外，还有一个属
性target，它指明目标页面显示的窗口
• target=_blank 表示目标页面显示于一个新的浏览器窗口中
• target=_top
表示目标页面显示于整个浏览器窗口中，而不是显示在
帧所在窗口中，通常在帧中的超链接才需要设置该 值
含义
默认值
页面背景颜色 HTML 文件中文字的颜色
#FFFFFF #000000
HTML 文件中待链接的超链接对象的颜色
HTML 文件中链接中的超链接对象的颜色
HTML 文件中已链接的超链接对象的颜色
页面背景图像
无
页面显示区距窗口上边框的距离，以像素点为单位
0
页面显示区距窗口左边框的距离，以像素点为单位
查看源代码
7
③ 图像标记<img>
<img>标记的属性包括以下5种：
src 指定图像文件的地址。该属性值必须指明，值的形式可以是本地文件名，
也可以是URL形式。
border 指定图像边框粗细，值为整数。若为0，表示无边框，值越大，边框越
粗。
width 指定图像宽度，值为整数，单位为屏幕像素点。若不指定该属性值，则浏
height
整数
本行高度，以像素点为单位
构件对象模型:COM
返回
15
表4-5 <td>标记属性表
属性 align bgcolor valign width
height background colspan
rowspan
取值
含义
默认值
left|center |right
本表格项的横向排列方式
left（左对齐）
（文本框）
可输入一行文字。举例： <input type=text name="xm" size=10 value="">
当有多个选项时，只能选其中一项。举例：
radio
（单选按钮）
走<input type=radio name= "Rad" value="v1" checked>
留<input type=radio name="Rad" value="v2">
入
reset
（重置按钮）
<input type=reset name="re-input" value="重选">
域
在浏览器中不显示，但可通过程序取其值或改变值。它主要用于浏
hidden （隐藏域）
览器向服务器传送数据而不想让浏览器用户知道的情形。举例：
button （按钮）
<input type=hidden name=hiddata value= "HidValue" > 普通按钮，按下后的操作需设计程序完成。举例： <input type=button value="去我的主页">
标记属性表属性取值含义默认值bgcolor颜色值页面背景颜色fffffftext颜色值html文件中文字的颜色000000linklink颜色值颜色值html文件中待链接的超链接对象的颜色html文件中待链接的超链接对象的颜色4alink颜色值html文件中链接中的超链接对象的颜色vlink颜色值html文件中已链接的超链接对象的颜色background图像文件名页面背景图像无topmargin整数页面显示区距窗口上边框的距离以像素点为单位0leftmargin整数页面显示区距窗口左边框的距离以像素点为单位0返回文字显示和段落控制标记标记含义lt
可输入多行文字。举例：
textarea （文本域）
<b>请输入您的要求</b><br>
<textarea name="comment" rows=4 cols=20></textarea>
select （下拉列表框）
在构多件个可对选象项中 模进型行选 :C择O，M定义方法见下面的说明
20
【例4-6】 设计一个如图4-5所示的页面，其中包含radio， checkbox，textarea，submit和reset等表单输入域
含义
默认值
align
left|center|right 本行各表格项的横向排列方式
left（左对齐）
bgcolor 颜色值
本行各表格项的背景色
#000000