网页设计 第三章.ppt

第第3章章 网页结构语言网页结构语言XHTML3.1 标记语言简介标记语言简介3.1.1 标准通用标记语言标准通用标记语言SGMLSGML有高稳定性与完整性的优点，这使得SGML可以适用在各类应用领域。由于SGML的高度完整性与稳定性，相对的其复杂性也高，造成其高费用。3.1.2 超文本标记语言超文本标记语言HTML在HTML中被制定的DTD有3种：StrictDTD。TransitionalDTD。FramesetDTD。3.1.3 可扩展标记语言可扩展标记语言XMLXML（eXtensibleMarkupLanguage，可扩展标记语言）是W3C组织于1998年2月发布的标准，它的目的是定义一种互联网上交换数据的标准。3.1.4 可扩展超文本标记语言可扩展超文本标记语言XHTMLXHTML（ExtensibleHyperTextMarkupLanguage，可扩展超文本标记语言）的XHTML1.0规范也于2000年1月通过W3C的审核与推荐。3.2 XHTML文档基础文档基础3.2.1 XHTML文档的基本结构文档的基本结构现在以一个XHTML文档实例，来介绍XHTML文档的基本结构，并由基本结构认识、等控制标记的使用。【例3-1】XHTML文档是一种纯文本格式的文件，XHTML文档由被标记的内容和标记组成，XHTML文档的基本结构为：3.2.2 标记及标记及XHTML代码规范代码规范1标记及其属性标记及其属性XHTML文档由标记和被标记的内容组成。标记（tag，在Dreamweaver中文版中，tag被翻译为标签）能产生所需的各种效果。格式为：受受标标记记影影响响的的内内容容 有些标记不是成对的，称为单标记。其格式为：例如，插入图片标记表示为：2XHTML代码规范(1)所有的标记都必须要有一个相应的结束标记(2)所有标记的名称和属性的名字都必须使用小写(3)所有的标记都必须合理嵌套(4)所有属性必须用引号括起来(5)把所有“”和“&”特殊符号用编码表示(6)给所有属性赋一个值(7)不要在注释内容中使“-”3.2.3声明文档类型其格式为：XHTML1.0提供了三种DTD声明可供选择，这三种DTD的名称分别是：过渡的（Transitional）严格的（Strict）框架的（Frameset）3.2.4 XHTML文档根标记与声明命名空间文档根标记与声明命名空间XHTML文档标记的格式为：文档的内容文档的内容3.2.5 XHTML文档头和文档标题标记文档头和文档标题标记XHTML文档头标记的格式为：网页的标题网页的标题【例3-2】3.2.6 XHTML文档主体标记文档主体标记XHTML文档主体标记的格式为：网页的内容网页的内容主体位于头部之后，以为开始标记，为结束标记。3.3 网页文件的创建网页文件的创建3.3.1 编辑和保存网页文件编辑和保存网页文件用任何网页编辑器都能编辑制作XHTML文件。下面用最简单的“记事本”来编辑网页。打开记事本。创建新文件，并按XHTML语言规则编辑。保存网页。网页文件的扩展名是.html或.htm。首页（主页）文件名设为index.html或index.htm。3.3.2 预览和修改网页文件预览和修改网页文件打开.html网页文件最简单的方法是用“Windows资源管理器”或“我的电脑”。3.4 文本标记文本标记3.4.1 注释标记注释标记注释标记的格式为：结束标记与开始标记可以不在一行上，长度不受限制。3.4.2 强制换行和不换行标记强制换行和不换行标记强制换行标记的格式为：文字文字不换行标记格式为：文字文字【例3-3】3.4.3 特殊字符特殊字符常用的特殊字符见表3-1。3.4.4 段落标记段落标记段落标记的格式为：文字文字【例3-4】3.4.5 标题文字标记标题文字标记标题文字标记的格式为：标题文字标题文字【例3-5】3.4.6 水平线标记水平线标记水平线标记的格式为：color设定线条颜色，默认为黑色。颜色可以用相应英文单词或以“#”引导的一个十六进制数代码来表示，见表3-2。【例3-6】3.4.7 特定文字样式标记特定文字样式标记在显示文字时，有时会对某些短语显示一些特定的字形来产生一定的突出、区别、强调等效果。.（emphasis）被用来强调文本，显示为斜体字。.（strongemphasis）是近一步强调，显示为粗体字。.作为上标样式显示。.作为下标样式显示。【例3-7】3.4.8 原样显示文本标记原样显示文本标记其格式为：文本文本中不能包含、等标记。【例3-8】3.4.9 设置网页背景和文字的颜色设置网页背景和文字的颜色标记的格式为：网页的内容网页的内容【例3-9】3.4.10 字体标记字体标记字体标记的格式为：被被设设置置的的文文字字【例3-10】3.5 超链接3.5.1 锚点标记锚点标记标记的格式为：超超链链接接显显示文本示文本中不能包含其他，即自己不能嵌套。URL的格式为：通信协议通信协议:/链接地址链接地址/文件位置文件位置/文件名称文件名称3.5.2 链接到其他网页链接到其他网页1链接到同一目录中的网页文件链接到同一目录中的网页文件目标文件名是链接所指向的文件。链接到同一目录内的网页文件的格式为：超链接显示文本超链接显示文本【例3-11】2链接到下一级目录中的网页文件链接到下一级目录中的网页文件链接到下一级目录中网页文件的格式为：超链接显示文本超链接显示文本3链接到上一级目录中的网页文件链接到上一级目录中的网页文件链接到上一级目录中网页文件的格式为：超链接显示文本超链接显示文本其中“./表示退到上一级目录中。4链接到同级目录中的网页文件链接到同级目录中的网页文件链接到同级目录中网页文件的格式为：超链接显示文本超链接显示文本表示先退到上一级目录中，然后再进入到目标文件所在的目录。3.5.3 同一个网页中的链接同一个网页中的链接同一个网页中超链接标记的格式为：超链接显示文本超链接显示文本即单击源点超链接名称，将跳转到“锚点名称”开始的位置。书签就是用标记对该位置作一个记号。如果有多个链接，不同目标位置要设置不同的记号。定义书签的格式为：目标文本附近的文本目标文本附近的文本【例3-12】如果要建立指向其他页面某处的文本，格式为：超链接显示文本超链接显示文本要在跳转到的位置处加上链接标记：目标文本附近的文本目标文本附近的文本3.5.4 链接到其他站点链接到其他站点使用http协议，可以建立链接到其他网站上网页的超链接。其格式为：超链接显示文本超链接显示文本【例3-13】3.5.5 链接到下载文件链接到下载文件如果链接到的文件不是HTML文件，而是作为下载的文件，其格式为：超链接显示文本超链接显示文本【例3-14】3.5.6 链接到电子邮件链接到电子邮件指向电子邮件链接的格式为：超超链链接接显显示示文文本本例如，E-mail地址是，邮件主题是“新年好”，则建立如下链接：3.6 图像图像3.6.1 网页的背景网页的背景1设置背景色设置背景色的bgcolor属性用于设置网页的背景色。格式为：网页内容网页内容“颜色值”可以为颜色的英文名或相应十六进制值。2用图片作为背景用图片作为背景使用标记的background属性，可为网页铺上背景图像。格式为：网网页页内内容容在浏览器中滚动网页内容时，如果希望背景图像固定不动，可在中加入属性bgproperties=fixed。【例3-15】3.6.2 图像标记图像标记图像标记的格式为：【例3-16】【例3-17】文本将不再环绕图片。格式为：其中clear的取值可为：left（取消在图片左侧放置的文本）、right（取消在图片右侧放置的文本）或all（取消在图片左、右侧放置的文本）。【例3-18】3.6.3 用图像作为超链接用图像作为超链接把标记放在和之间，这个图像就可作为超链接，图像被加上蓝色边框，单击图像将跳转到其他地址。格式为：例如，【例3-18】中的代码：3.7 列表列表3.7.1 无序列表标记无序列表标记无序列表中每一个表项的前面是项目符号（如、等符号）。建立无序列表可使用标记和表项标记。格式为：第一个列表项第一个列表项 第二个列表项第二个列表项 【例3-19】3.7.2 有序列表标记有序列表标记通过带序号的列表可以更清楚地表达信息的顺序。使用标记可以建立有序列表，表项的标记仍为。格式为：表项表项1 表项表项2 【例3-20】【例3-21】3.8 表格表格3.8.1 简单表格简单表格最简单的表格仅包括行和列。格式为：表表头头1 表表头头2 表表头头n 表表项项1 表表项项2 表表项项n 表表项项1 表表项项2 表表项项n【例3-22】【例3-23】3.8.2 表格内文字的对齐方式表格内文字的对齐方式1水平对齐水平对齐表项数据的水平对齐用标记、和的align属性。align的属性值分别为：left（左对齐）、center（居中）、right（右对齐）或justify（左右调整）。【例3-24】2垂直对齐垂直对齐表项数据的垂直对齐用标记、和的valign属性。valign的属性值分别为：top（靠单元格顶）、bottom（靠单元格底）、middle（靠单元格中）或baseline（同行单元数据项位置一致）。【例3-25】3.8.3 表格在页面中的对齐方式表格在页面中的对齐方式使用标记的align属性，格式为：当表格位于页面的左侧或右侧时，文本填充在另一侧。当表格居中时，表格两边没有文本。默认情况下，文本在表格的下面。【例3-26】3.8.4 表格的颜色和图片背景表格的颜色和图片背景bgcolor=颜色或颜色值设置背景颜色。background=图片文件名设置背景图片。bordercolor=颜色设置表格边框的颜色。bordercolorlight=颜色设置表格边框亮部的颜色。rules=row,cols或none设置表内线的显示方法，none为无内线。2内嵌音频播放插件内嵌音频播放插件通过内嵌音频播放插件可以在浏览器中出现控制面板，也可作为背景音乐。其格式为：【例3-28】3IE中的背景音乐中的背景音乐可以插入背景音乐，只有在IE浏览器中才可以听到。其格式为：播放次数取-1或infinte时，声音将一直播放直到关闭该网页为止。3.9.3 视频标记视频标记用浏览器可以播放的格式有：MOV、AVI、WMV等格式。1链接一个视频文件链接一个视频文件.与链接音频文件一样，可将视频文件做成一个超链接。其格式为：超链接显示文本超链接显示文本例如：播放一段视频：欢迎光临2内嵌视频播放插件内嵌视频播放插件与播放音频文件一样，通过内嵌视频播放插件可以在浏览器中出现控制面板。其格式为：【例3-29】3.9字幕、音频和视频3.9.1字幕标记流动字幕标记的格式为：流动文字或（和）图片【例3-27】3.9.2音频标记1点播音乐将音乐做成一个超链接，只需单击该链接，就可以听到音乐了。其格式为：超链接显示文本例如：播放一段MIDI音乐：我们的爱3.9.3 视频标记视频标记用浏览器可以播放的格式有：MOV、AVI、WMV等格式。1链接一个视频文件链接一个视频文件.与链接音频文件一样，可将视频文件做成一个超链接。其格式为：超链接显示文本超链接显示文本例如：播放一段视频：欢迎光临2内嵌视频播放插件内嵌视频播放插件与播放音频文件一样，通过内嵌视频播放插件可以在浏览器中出现控制面板。其格式为：【例3-29】3.10 表单表单3.10.1 表单标记表单标记表单的基本语法及格式为：3.10.2 文字和密码的输入文字和密码的输入使用标记的type属性，可以在表单中加入表项，并控制表项的风格。type属性值为text，则输入的文本以标准的字符显示；type属性值为password，则输入的文本显示为“”。【例3-30】3.10.3 重置和提交重置和提交格式为：默认情况下，重置和提交的按钮分别显示为“重置”和“提交查询内容”。3.10.4 复选框和单选钮复选框和单选钮用标记的type属性可设置选择钮的类型属性value可设置该选择钮的控制初值，用以告诉表单制作者选择结果。用checked=checked表示是否为默认选项。name是该控件的惟一标识，同一组复选框或单选钮的名称是一样的。【例3-31】3.10.5 选择栏选择栏标记的格式为：选项说明选项说明 选项说明选项说明 【例3-32】3.10.6 多行文本框多行文本框格式为：多行文本多行文本其中的行数和列数是指不用滚动条就可看到的部分。3.11 框架（多窗口页面）框架（多窗口页面）3.11.1 建立框架建立框架框架的基本结构为：1标记标记2标记标记【例3-33】【例3-34】3.11.2 框架间的链接框架间的链接超超链链接接显显示示文文本本【例3-35】3.12 XHTML文档的验证文档的验证登录到http:/validator.w3.org/网站显示如图3-42所示。如果不能通过验证，则显示如图3-43所示，并显示错误代码的位置；如果通过验证，则显示如图3-44所示。3.13 习题习题31制作如图3-45所示的网页，要求章名为标题h2、居中；节名为标题h3、居左；小节为h4，居左等；整个网页背景色为乳白色，正文为宋体、蓝色。2按如图3-46所示制作指向其他页面的链接，要求例题使用超链接，在网页中单击例题名，则在新的浏览器窗口显示该例题。3制作如图3-47所示的网页，单击软件名称，则下载该文件。4分别制作如图3-48所示的网页，单击小图片，将显示放大的图片。5练习表格在页面中的应用，分别制作如图3-49所示的网页。其中在右图中单击“详细”则打开新的浏览器窗口，显示详细内容。6制作如图3-50所示的流动字幕和流动图片。7制作如图3-51所示的表单。8制作输入密码的表单，如图3-52。题中用到了表格和图片。9按如图3-53所示制作表单网页，并把表单数据送到某E-Mail。10制作如图3-54所示的框架网页。在左框架中单击项目，则右框架中显示相应的内容。