网页设计第2章.ppt

1、网页设计与制作应用教程,机械工业出版社同名教材 配套电子课件2009.4,第2章 XHTML基础,2.1 XHTML简介 2.2 创建简单网页文件 2.3 XHTML文档的基本结构与标记,2.1 XHTML简介,XHTML的产生,HTML是HyperText Markup Language（超文本置标语言）的缩写，它是构成Web页面，表示Web页面的符号标记语言。XHTML 1.0是一种在HTML 4.0基础上优化和改进的新语言，其目的是实现基于XML的应用。XHTML是一种增强了的HTML，它的可扩展性和灵活性将更适应未来网络应用的需求。通过XHTML，将所需表达的信息按某种规则写成XHTM

2、L文件，再通过专用的浏览器来识别，并将这些XHTML文件翻译成可以识别妁信息，就是所见到的网页。,XHTML的优点,XHTML文档遵从XML标准在XHTML文档中可使用更多的应用程序,2.1 XHTML简介,XHTML代码规范,所有的标记都必须有一个相应的结束标记 所有标签的元素和属性的名字都必须使用小写 所有的标记都必须合理嵌套 所有的属性必须用引号括起来 特殊符号“”和“”用编码表示 每个属性必须赋值,2.2 创建简单网页文件,创建一个简单的网页，可以通过网页编辑器来编辑网页、并保存，生成XHTML文件。,打开记事本。单击Windows的“开始”按钮，在“程序”菜单的“附件”子菜单中单击“

3、记事本”命令。 创建新文件，并按XHTML语言规则编辑。在“记事本”窗口中输入XHTML代码，代码内容。 保存网页。打开“记事本”的“文件”菜单，选择“保存”命令。此时将出现“另存为”对话框，在“保存在”下拉列表框中选择文件要存放的路径，在“文件名”文本框输入以“html（或htm）”为后缀的文件名，最后单击“保存”按钮，生成网页文档。 在资源管理器窗口找到网页文档，双击文档图标，随即在打开的IE 浏览器窗口中可以浏览到网页内容。,2.3 XHTML文档的基本结构与标记,基本标记及其属性,1标记,2标记的属性,格式为： 受标记影响的内容,格式为： 被标记的内容,2.3 XHTML文档的基本结构

4、与标记,XHTML的基本结构,XHTML文档是一种纯文本格式的文件，XHTML文档的基本结构为：我的网页标题网页内容,2.3 XHTML文档的基本结构与标记,1XHTML文档标记,2XHTML文档头标记,3XHTML文档标题标记,4XHTML文档主体标记,格式为：网页的内容,说明:,说明： （1） 主体位于头部之后，以为开始标记，为结束标记。它定义网页上显示的主要内容与显示格式，是整个网页的核心，网页中要真正显示的内容都包含在主体中。 （2）标记有很多属性，可以定义页面的背景图像、背景色彩、文字色彩、超文本链接的色彩等。这些属性用于设定网页的总体风格。 bgcolor：设置网页的背景色。 te

5、xt：设置非可链接文字的色彩。 link：设置尚未被访问过的超文本链接的色彩，默认为蓝色。 alink：设置超文本链接在被访问瞬间的色彩，默认为蓝色。 vlink：设置已被访问过的超文本链接的色彩，默认为蓝色。 background：设置网页的背景图像，bgpropertiesfixed可使背景图像固定。 leftmargin：设置页面左边的空白，单位为像素值。 topmargin：设置页面上方的空白，单位为像素值,2.3 XHTML文档的基本结构与标记,2.3 XHTML文档的基本结构与标记,段落标记,2. 强制换行,注释标记格式为：,3. 段落标记 格式为： 文字,格式为： 文字,4. 定

6、位标记格式为：文本、图像或表格,说明: 属性align用来设置段落文字在网页上的对齐方式: left（左对齐）、默认为left。 center（居中） right（右对齐） 。,2.3 XHTML文档的基本结构与标记,5. 水平线标记格式为：hr align=“left|center|right” size=“横线粗细” width=横线长度 color=横线色彩noshadenoshade,说明： size：设定线条粗细，以像素为单位，默认值为2。 width：设定线段长度，可以是绝对值（以像素为单位）或相对值（相对于当前窗口的百分比）。所谓绝对值，是指线段的长度是固定的，不随窗口尺寸的改变

7、而改变。所谓相对值，是指线段的长度相对于窗口的宽度而定，窗口的宽度改变时，线段的长度也随之增减，默认值为100%，即始终填满当前窗口。 color：设定线条色彩，默认为黑色。色彩可以用相应的英文名称或以“#”引导的一个十六进制代码来表示，见表2-1。 noshade：设定线条为平面显示（没有三维效果），若省略则有阴影或立体效果。,2.3 XHTML文档的基本结构与标记,色彩代码表,2.3 XHTML文档的基本结构与标记,实例【2-1】,设置文字格式,1标题文字标记,说明： （1）“#”用来指定标题文字的大小，取16的整数值，取1时文字最大，6时最小。 （2）属性align用来设置标题在页面中的

8、对齐方式，取值为：left（左对齐）、center（居中）、right（右对齐），默认为left。 （3）标记默认显示宋体，在一个标题行中无法使用不同大小的字体。 （4）与用定义的网页标题不同，标题格式显示在浏览器窗口内，而不显示在浏览器的标题栏中。,格式为：标题文字 ,2.3 XHTML文档的基本结构与标记,2设置文字大小格式为 ：被设置的文字 说明：（1） size 用来设置文字的大小。数字的取值范围从17，size 取1时最小，取7时最大。（2）face 用来设置字体。当文字是汉字时，格式中的“字体名”可以为如黑体、宋体、楷体_GB2312、仿宋_ GB2312、隶书。当文字为英文时，字

9、体名可以为Times New Roman 等约50种字体。（3）Color 用来设置文字的颜色。（4） 和标记都可以设置文字的大小，二者的区别，见表2-2。另外，当中的size 取7时的文字比要大。,2.3 XHTML文档的基本结构与标记,表2-2 与比较表,2.3 XHTML文档的基本结构与标记,设置文字的颜色可以用 标记或者 标记。 （1）标记中的text 属性文字 与 标记所包含的内容是HTML文件的主体，所以它对整个文件起作用。（2） 标记中的color 属性被设置的文字 标记中的color属性可以作用于其后面的文字，可以在文件中多处设定。当 与 同时对文字颜色进行定义时， 标记优先。

10、,3设置文字颜色,2.3 XHTML文档的基本结构与标记,实例【2-2】,2.3 XHTML文档的基本结构与标记,超链接,1. 锚点标记锚点（anchor）标记由定义，它在网页上建立超文本链接。通过单击文本或图像，可以从此处转到另一个链接资源（目标资源），这个目标资源有惟一的地址（URL）。格式为：热点 说明：（1）href属性为超文本引用，它的值为一个URL，是目标资源的有效地址。如果要创建一个不链接到其它位置的空链接，可用“#”代替URL，即 （2）target 属性设定超级链接被单击后所打开窗口的方式，可选值为：_blank, _parent, _self和_top。,2.3 XHTML

11、文档的基本结构与标记,2指向其它页面的链接 （1）链接到同一目录内的网页文件格式为：热点文本 （2）链接到下一级目录中的网页文件格式为：热点文本,（3）链接到上一级目录中的网页文件,热点文本 其中，”/ ” 表示退到上一级目录。,（4）链接到同级目录中的网页文件,热点文本 表示先退到上一级目录，然后再进入目标文件所在的目录。,格式为：,格式为：,3指向本页中的链接,要在当前页面内实现超链接，需要定义两个标记：一个为超链接标记，另一个为书签标记。（1）超链接标记格式为：热点文本 即单击热点文本，将跳转到记号名开始的文本。（2）书签标记用a标记对该文本做一个记号。如果有多个链接，不同目标文本要设置

12、不同的书签名。书签名在的name属性中定义。格式为：目标文本附近的字符串,2.3 XHTML文档的基本结构与标记,4指向下载文件的链接如果链接到的文件不是HTML文件，则该文件将作为可下载文件。格式为：热点文本5指向电子邮件的链接单击指向电子邮件的链接，将打开默认的电子邮件程序，如Foxmail、Outlook Express 等，并自动填写邮件地址。格式为：热点文本,2.3 XHTML文档的基本结构与标记,实例【2-3】,图像,1设置图像标记使用图像标记可以把一幅图像加入到网页中。用图像标记还可以设置图像的替代文本、尺寸、布局等属性。 格式为： ,说明： src：指出要加入图像的文件名，并且

13、指出文件存放的路径，即“图像文件的路径图像文件名”。 alt：在浏览器尚未完全读入图像时，在图像位置显示的文字。,2.3 XHTML文档的基本结构与标记,height：设定图像的高度（像素数或百分数）。 hspace：设定图像边沿空白，以免文字或其它图像过于贴近。设定图像左右侧在空间水平方向上的空白像素数。 vspace：设定图像上下的空间，空白高度采用像素作为单位。 align：图像与文本混合排放时，设定图像在水平（环绕方式）或垂直（对齐方式）方向上的位置，取值为：left（图像居左，文本在图像的右边），right（图像居右，文本在图像的左边），top（文本与图像在顶部对齐），middle（

14、文本与图像在中央对齐）或bottom（文本与图像在底部对齐）。,width：即设定图像的宽度（像素数或百分数），通常应设为图像的真实大小以免失真。若需要改变图像大小最好事先使用图像编辑工具。百分数是相对于当前浏览器窗口的百分比。,2.3 XHTML文档的基本结构与标记,2设置网页的背景,(1)设置背景色利用色彩作为背景，比较容易在色彩上进行协调，而且其下载速度比采用图像作为背景快。网页背景默认为白色，的bgcolor属性用于设置网页的背景色。 格式为： “色彩值”可以为色彩的英文名或相应的十六进制值。,（2）用图像作为背景使用标记的background属性，可为网页加上背景图像。 格式为： 说

15、明: background取值为一个图像文件名，并且要指出文件存放的路径，可以是相对路径，也可以是绝对路径。图像文件可以是GIF格式或JPEG格式的文件。,2.3 XHTML文档的基本结构与标记,2.3 XHTML文档的基本结构与标记,3.用图像作为超级链接图像也可作为热点，单击则跳转到被链接的文本或其它文件中。链接到的文件名和图像文件名中均需要写出所需的路径。 格式为：,4.设置音频和视频 （1）加入背景声音用标记能在网页中加入背景音乐。格式为：说明:加入背景音乐文件的格式为： *.wav 、 *.au 、 *.mid 。播放的次数取-1或INFINITE时，声音将一直播放，直到关闭该网页为

16、止。例：,（2）加入视频剪辑用标记的属性可向网页中加入.avi视频剪辑文件。格式为：例：说明： dynsrc用来 指定播放视频文件存放的路径和文件名。 Src用来指定在浏览器尚未完成读入AVI文件时，先在AVI播放区显示的图像。 Loop 指定播放的次数。 Loopdelay 指定两次播放的间隔时间,单位为毫秒。 Start 指定何时开始播放视频文件。 Controls 用来在视频窗口下附加. AVI 播放控制栏。,实例【2-4】,2.3 XHTML文档的基本结构与标记,2.3 XHTML文档的基本结构与标记,其它标记,1.列表 列表分为无序列表和有序列表两类。 （1）无序列表 无序列表中每一

17、个表项的前面是符号。 格式为：第一个列表项 第一个列表项说明：用来定义一个无序列表， 用来定义列表项，Type=# 设置无 序列表的符号样式，其取值有： type=disc 实心圆 type=circle 空心圆 type=square 方框,（2）有序列表通过带序号的列表可以更清楚地表达信息的顺序。使用标记建立有序列表。 格式为：第一个列表项 第一个列表项 说明：用来定义一个有序列表，用来定义有序列表项，有序列表编号样式取值： Type=1 Type=a Type=A Type=I Type=i,2.3 XHTML文档的基本结构与标记,2.表格最简单的表格仅包括行和列。表格标记为，行标记为，

18、表项（单元格）标记为。 格式为：表头l表头2表头n表项l表项2表项n表项l表项2表项n,2.3 XHTML文档的基本结构与标记,3.框架框架（Frames）也称多窗口页面。它在同一浏览器窗口中显示多个相互隔离的XTHML页的结构，每个区域显示一个XTHML文件。利用框架结构可以在页面中同时浏览多个页面，还可以在一个区域中显示所有页面的总索引。 （1）建立框架框架的建立使用frameset和标记。用来划分窗格，每一个窗格由一个标标记来定义。 框架的基本结构为： ,2.3 XHTML文档的基本结构与标记,（2）框架间的链接在网页中，在一个框架中显示所有网页内容的目录，而通过单击，在另一个框架中显示

19、相应的内容。这些目录是热点文本，需要在框架之间建立超链接，并指明显示的目标文件的框架。 格式为： 热点文本 说明： 属性含义如下： target=“_blank“ ：链接的目标文件被显示在一个新的没有名字的浏览器窗口中。 target=“_self“ ：链接的目标文件被显示在当前框架窗口中，代替正在显示的热点文本所在的那个文件，是省略target属性的默认值。 target=“_top“ ：链接的目标文件被显示在整个浏览器窗口（取消了框架）。 target=“_parent“ ：当框架嵌套时，链接的目标文件被显示在父框架中；否则，被显示在整个浏览器窗口中。,2.3 XHTML文档的基本结构与标

20、记,4.表单表单是用于实现浏览者与网页制作者之间信息交互的一种网页对象。在Internet 中，表单被广泛应用于各种信息的搜集与反馈。当访问者在表单中输入信息，然后单击提交按钮时，这些信息将被发送到服务器中，服务器端脚本或应用程序在该处对这些信息进行处理。格式为： ,2.3 XHTML文档的基本结构与标记,5滚动字幕标记在网页设计中，为了引起浏览者的注意，经常用设置滚动字幕的方法增强动态效果，使之更生动，更鲜活。格式为： ,说明： direction: 设置滚动方向#的取值有 left,right,up,down bgcolor: 设置滚动区域的背景色 height :设置滚动区域的高度 wi

21、dth :设置滚动区域的宽度 scrollamount : 设置字母移动速度 scrolldelay : 设置移动每步的延时,2.3 XHTML文档的基本结构与标记,本章小结,本章主要介绍了网页代码标准 XHTML 语言的应用，包括XHTML文档的基本结构与标记，以及各种标记及属性的应用等。读者通过对本章知识的阅读，可以了解和掌握 XHTML 代码编写的基本方法，能够利用文本编辑器编写网页内容。从代码的角度剖析一个网页的内容，使得变换多彩的网页不再神秘莫测，大家都可以试着用XHTML 代码来设计实现一个图文并茂的网页。,思考与练习,XHTML 语言编写的基本环境是什么？你所了解的编辑器有哪些？ XHTML文档的基本结构是什么？语法规范有哪些？ 阅读下面一段XHTML 代码，说明代码能够实现的页面效果，并给相应代码行加注释。网页示例图片示例XHTML 代码规范说明文档,