WebDB HTML页面设计(1)

1、1Web 页 面 设 计l1 HTMLl2 样式表设计样式表设计2345678910111213利用工具创建利用工具创建HTML页面页面14利用工具创建利用工具创建HTML页面页面1516HTML（超文本标记语言）（超文本标记语言）ll头 部 信 息l文 档 主 体， 正 文 部 分l171.1 HTML基本标记头部标记头部标记 ， HTML文件头部的起始和结束标记。，HTML文件的标题，是显示于浏览器标题栏的字符串。，CSS样式定义 该标记用于描述文档的 属性 体部标记体部标记 ，标记标记 18/* 链接颜色 */a:link color: #1f3a87; text-decoration:

2、none;a:visited color: #83006f;text-decoration:none;a:hover color: #bc2931; text-decoration:underline;a:active color: #bc2931;/* 字体大小*/.f12px font-size:12px;.f14px font-size:14px;191、告诉浏览器网页所识别的文件类型及语言类型 202、让一些搜索引擎搜索到你的网页 21l3、让网页每隔一段时间刷新一次，若要10秒刷新一次，代码这样写： 224、标注作者：235、控制页面缓冲，如不要页面缓冲的代码这样写： 24251.1

3、 HTML基本标记头部标记头部标记 ， HTML文件头部的起始和结束标记。，HTML文件的标题，是显示于浏览器标题栏的字符串。，CSS样式定义 该标记位于与标记之间，用于描述文档的 属性 体部标记体部标记 ，标记标记 26表1 标记属性表27文字显示和段落控制标记 表2 常用的文字显示和段落控制标记表28【例【例4-1】 图图4-1是一个具有不同的文字显示格式和段落控制格式的是一个具有不同的文字显示格式和段落控制格式的HTML文件的显文件的显示效果，相应的示效果，相应的HTML文件中包含了文字显示和段落控制标记文件中包含了文字显示和段落控制标记。 图4-1 文字显示和段落控制示例查看源代码29

4、转义字符转义字符l > >l“ "l空格  la. 转义序列各字符间不能有空格；b. 转义序列必须以；结束；c. 单独的&不被认为是转义开始。d.区分大小写 30313233343536图像标记 u标记的属性包括以下标记的属性包括以下5种种：src指定图像文件的地址。该属性值必须指明，值的形式可以是本地文件名，指定图像文件的地址。该属性值必须指明，值的形式可以是本地文件名，也可以是也可以是URL形式。形式。border指定图像边框粗细，值为整数。若为指定图像边框粗细，值为整数。若为0，表示无边框，值越大，边框越，表示无边框，值越大，边框越 粗。粗。width指

5、定图像宽度，值为整数，单位为屏幕像素点。若不指定该属性值，则浏指定图像宽度，值为整数，单位为屏幕像素点。若不指定该属性值，则浏览器根据图像的实际尺寸显示。览器根据图像的实际尺寸显示。height指定图像高度，值为整数，单位为屏幕像素点。若不指定该属性值，则浏指定图像高度，值为整数，单位为屏幕像素点。若不指定该属性值，则浏览器根据图像的实际尺寸显示。览器根据图像的实际尺寸显示。alt指定图像的提示标签。若设置了该属性值，则当鼠标移至该图像区域时，指定图像的提示标签。若设置了该属性值，则当鼠标移至该图像区域时，将以一个小标签显示该属性的值将以一个小标签显示该属性的值。 常用图像格式：gif、jpe

6、g、png37超链接标记 u超链接标记的格式如下超链接标记的格式如下：超链接文本或图像超链接文本或图像 u超链接标记除了有必备的超链接标记除了有必备的href属性外，还有一个属性属性外，还有一个属性target，它指明目标页面显示的窗口它指明目标页面显示的窗口target=_blank 表示目标页面显示于一个新的浏览器窗口中target=_top 表示目标页面显示于整个浏览器窗口中，而不是显示在 帧所在窗口中，通常在帧中的超链接才需要设置该值target=帧名 目标页面显示于指定帧所在的窗口中target的默认值是本页面所在的浏览器窗口 Target=_self Target=_search

7、Target=_parent38根据目标页面位置的不同，href属性的URL信息的构成分为以下3种情况：目标页面位于另外的主机或采用非目标页面位于另外的主机或采用非http协议，此时采用绝对协议，此时采用绝对URL格式，即使用格式，即使用如下格式：如下格式：协议名协议名:/主机名主机名/目录信息目录信息 若目标页面位于本主机，可采用相对若目标页面位于本主机，可采用相对URL格式：格式： 超链接文本超链接文本或或超链接文本超链接文本39比较：比较：超链接文本超链接文本超链接文本超链接文本4041通常超链接总是指向目标通常超链接总是指向目标HTML文件的头文件的头部，但超链接的目标也可以是某个文件

8、部，但超链接的目标也可以是某个文件的特定位置（称为的特定位置（称为“锚点锚点”，anchor） 其格式如下：其格式如下：文本或图像等页面文本或图像等页面元素元素 文本或文本或图像等页面元素图像等页面元素42利用图片制作链接利用图片制作链接注意：该图片有个边框，影响图片美观43利用图片制作链接（去边框）利用图片制作链接（去边框）注意：该图片无边框44链接邮件链接邮件与我联系45与我联系添加邮件主题464748 l列表标记是列表标记是HTML的一个基本结构。有以下的一个基本结构。有以下3种类型的列表：种类型的列表： 无序列表（无序列表（Unordered list）列表项列表项 有序列表（有序列表

9、（Ordered list）列表项列表项 定义列表（定义列表（Definition list）列表项列表项l预定格式（预定格式（Preformatted）标记可以使信息）标记可以使信息完全按照完全按照HTML文件中编排的格式原样显示于文件中编排的格式原样显示于浏览器中，该标记的格式如下：浏览器中，该标记的格式如下：预定格式的信息预定格式的信息 49清单元素清单元素l无序清单 l有序清单 l定义清单 l清单条目l定义清单中的清单条目l定义清单中的条目说明50【例4-3】 下列程序采用3种列表标记显示如图4-2所示的页面 查看程序查看程序51清单元素清单元素l改变无序清单的条目标记ll数据库原理l

10、操作系统l计算机网络ll默认方式为实心圆点，即 .52清单元素清单元素l改变有序清单条目标记ll阿拉伯数字标记l大写字母标记l小写字母标记l大写罗马数字标记l小写罗马数字标记l阿拉伯数字标记 大写字母标记 .小写字母标记 大写罗马数字标记 v.小写罗马数字标记 默认标记为数字53l改变有序清单条目的初始数字ll阿拉伯数字标记l#表示条目起始序号：，54预排版文本预排版文本l格式l保持该标记中的文字格式，浏览器不对其中的文字重新排版没有经过预排版经过预排版551.2 表格 表格的定义表格的定义 标题内容标题内容 表格内容表格内容 表格内容表格内容 表格的属性表格的属性标记标记，和和的属性用来定义

11、表格的显的属性用来定义表格的显示特性示特性 56表表3 标记属性表标记属性表 57表4 标记属性表58表5 标记属性表59【例4-4】 以下是一个显示图4-3所示表格页面的HTML文件，例中只给出主要的表格部分的文本，其余部分读者可以很容易地补全 查看程序60【例4-5】 以下是一个显示图4-4所示较复杂表格页面的HTML文件 查看程序查看程序611.3 表单 表单的定义表单的定义定义表单的语法如下：定义表单的语法如下： textarea定义定义 select定义定义 表单的输入域表单的输入域以标记以标记定义的多种输入域，包括定义的多种输入域，包括text，radio，checkbox，pas

12、sword，hidden，button，submit和和reset等。等。以标记以标记定义的文本域。定义的文本域。以标记以标记和和定义的下拉列表框定义的下拉列表框 62表表4-6 常用的表单输入域常用的表单输入域 63表单表单l. . GET, POST 64基本格式之一基本格式之一 text, password, checkbox, radio, image, hidden, submit, reset 程序识别的程序识别的输入域名称输入域名称 65文本和密码输入文本和密码输入 ll66复选框复选框l被选内容l被选内容如果是在同一组中，如果是在同一组中，名称应该是相同的名称应该是相同的67单

13、选按钮单选按钮l被选内容l被选内容如果是在同一组中，如果是在同一组中，名称应该是相同的名称应该是相同的68下拉菜单下拉菜单ll菜单项l基本结构基本结构ll菜单项可选参数可选参数69多行文本输入域多行文本输入域l 70提交按钮、重置按钮提交按钮、重置按钮ll按钮上显示的信息按钮上显示的信息71一般按钮l一般按钮用来控制其他定义了处理脚本的处理一般按钮用来控制其他定义了处理脚本的处理工作工作 ll例例:l 72Hidden(隐藏域隐藏域)linput type=hidden name=* value=*l说明说明:l隐藏域是用来收集或发送信息的不可见元素，对于网页的访隐藏域是用来收集或发送信息的不

14、可见元素，对于网页的访问者来说，隐藏域是看不见的。当表单被提交时，隐藏域就问者来说，隐藏域是看不见的。当表单被提交时，隐藏域就会将信息用你设置时定义的名称和值发送到服务器上。会将信息用你设置时定义的名称和值发送到服务器上。 73注意比较一下两种写法注意比较一下两种写法(1)：llll name属性是用于接收表单各个输入域时所需要的。 id属性是用于页面需要JavaScript处理时所需的。7475注意比较一下两种写法注意比较一下两种写法(1)：ll764.1.4 框架框架简例框架简例【例【例4-7】 以下是使用框架的一个简例以下是使用框架的一个简例 查看每部分的代码查看每部分的代码显示实际效果

15、显示实际效果7778框架的定义l框架的定义较为特殊，首先需确定如何分割窗框架的定义较为特殊，首先需确定如何分割窗口，然后建立描述窗口分割的主文件，再为每口，然后建立描述窗口分割的主文件，再为每个框架建立相应的个框架建立相应的HTML文件文件 头部标记头部标记 字符串字符串 是用以划分框窗，是用以划分框窗，每一框窗由一个每一框窗由一个 标标 记记所标示，所标示，必须在必须在 范围中使用。范围中使用。 79l 80表表4-7 标记属性表标记属性表表表4-8 标记属性标记属性表表81【例4-8】 设计如图4-7所示的框架页面 显示代码查看实际效果82l说明： 当别人使用的浏览器太旧，不支援框架这个功

16、能时，他看到的将当别人使用的浏览器太旧，不支援框架这个功能时，他看到的将会是一片空白。为了避免会是一片空白。为了避免 这种情况，可使用这种情况，可使用 这个这个标记，当使用者的浏览器看不到框架时，他就会看标记，当使用者的浏览器看不到框架时，他就会看 到到 与与 之间的内容，而不是一片空之间的内容，而不是一片空白。这些内容可以是提醒白。这些内容可以是提醒 浏览转用新的浏览器的字句，甚至是一浏览转用新的浏览器的字句，甚至是一个没有框架的网页或能自动切换至没有框架的版本个没有框架的网页或能自动切换至没有框架的版本 亦可。亦可。 83 内嵌框架内嵌框架l作用：是在一页网页中间插入一个框窗以显示另一个文件作用：是在一页网页中间插入一个框窗以显示另一个文件 。l例子：例子： 84HTML的缺陷：的缺陷：l不能适应现在越多的网络设备和应用的需要；lHTML代码不规范、臃肿，浏览器需要足够智能和庞大才能够正确显示HTML；l数据与表现混杂；85采用采用XHTML：lXHTML解决HTML语言所存在的严重制约其发展的问题；lXML是web发展的趋势；lXHTML非常严密；lXHTML是能与其它基于XML的标记语言、应用程序及协议进行良好的交互工作；lXHTML是Web标准家族的一部分，能很好在无线设备等其它用户代理上； 86XHTML区别于区别于HTML的规则：的规则：lXHTML文件的开始要声明