网页制作基础第2章.ppt

网页制作,第2章 XHTML,第2章 XHTML,2.1 XHTML基础 2.2 body元素 2.3 网页文本 2.4 网页图像 2.5 网页链接 2.6 网页表格 2.7 网页表单 2.8 网页多媒体,2.1 XHTML基础,2.1.1 HTML 2.1.2 XHTML,2.1.1 HTML,1. HTML 2. HTML文件基本结构,1. HTML,当客户从WWW服务器读取到一个网页文件后，客户需要在自己的显示屏幕上将它正确无误地显示出来。为保证每个人在屏幕上都能读到正确显示的文件，必须以某种各类型的计算机或终端都能“看懂”的方式来描述文件，于是就产生了HTML超文本标记语言（Hype Text Markup Language）。,HTML是一种基本的WEB设计语言，用于描述WEB页面的内容、格式等信息，现在的各种WEB页面都是建立在HTML基础之上的。 HTML是一种标记语言，也就是使用标记符来描述页面元素。 页面元素的基本格式为： 内容,标记符为英文字符串，不区分大小写，描述内容代表的含义； 属性用于设置辅助的信息，而属性需要一个明确的属性值来表示具体的信息。 标记符和属性、属性和属性之间用空格间隔。,标记符为英文字符串，不区分大小写，描述内容代表的含义； 属性用于设置辅助的信息，而属性需要一个明确的属性值来表示具体的信息。 标记符和属性、属性和属性之间用空格间隔。,2. HTML文件基本结构,HTML文件无论内容多少都有一个基本结构： 我第一个网页 你好！ ,标记符表示该文档为HTML文档。 标记符包含文档的标题、文档使用的脚本语言、WEB页面样式定义和WEB文档信息。 标记符包含文档的标题。 标记符中放置要在访问者浏览器中显示信息的所有标记符和内容。 标记符中放置段落文字。 用于放置网页注释信息。,HTML 文档本身是文本格式的，用任何一种文本编辑器都可以对它进行编辑。 普通HTML文档的文件扩展名为“.html”或“.htm”。,2.1.2 XHTML,XHTML就是在HTML的基础上，针对XML进行了扩展的语言。准确地说，XHTML是一种过渡技术，建立XHTML的目的就是实现HTML向XML的过渡。 XHTML是网页制作中常用的一种结构标准语言，通常网页的内容可以用XHTML代码进行结构设计。XHTML保留了HTML的大部分内容，并在此基础上又增加了XML语言的基本规范和要求。,XHTML文档：, 无标题文档 ,注释：,“”是头部信息结构元素； “”用于放置在浏览器标题栏中显示的内容； “”是网页主体内容元素。,1. 文档类型,XHTML文档的第1行为元素，用于定义文档的类型。DOCTYPE是document type（文档类型）的简写，用于设置当前文档所使用的XHTML的版本。 现在常用的XHTML1.0主要有3种类型：严格型（Strict）、过渡型（Transitional）和框架型（Frameset）。,（1）严格型（Strict）, 严格型（Strict）是一种严格的DTD，浏览器在解析时要求相对严格，不允许使用任何表现样式的元素和属性，对于初学者而言不建议采用这种类型。,（2）过渡型（Transitional）, 过渡型（Transitional）是一种要求相对宽松的DTD过渡类型。允许使用HTML4.0中原有的用于表现的标签和属性，但必须符合XHTML的语法要求。而且此类型的文档对标签所处的位置和顺序不像Strict那样严格，建议初学者采用此类型。,（3）框架型（Frameset）, 框架型（Frameset）是一种专门针对框架页面设计使用的DTD。如果网页中使用了框架结构，就要使用这种类型。,2. DTD,DTD主要用于规定在该XHTML文档中使用标签、属性和实体的规则。在XML中可以自定义标记，而这些标记、属性的定义都可以在DTD中完成。由于XHTML文档中不允许自定义标记，所以在所有相同类型的XHTML文档中使用的DTD都是相同的。DTD为XHTML文档定义了在该文档中应该包含的或者可以包含的标记、属性和实体的一个列表，以及它们之间的关系。,3. 声明命名空间,xmlns即xHTML namespace的缩写，可以理解为命名空间或名称空间。在XML中是允许用户自定义元素的，设置不同命名空间，可以在不同命名空间中设置同名元素来代表不同的含义。 XHTML必须符合XML规则，所以在XHTML中要定义命名空间。而XHTML不允许用户自定义元素，因此在XHTML中的命名空间的定义可以是一个统一的值，即“http:/www.w3.org/1999/xhtml”。在XHTML文档的根元素中，必须使用xmlns属性声明文档的命名空间。如：,4. XHTML语法规范,XHTML是HTML向XML过渡的一种标记语言，所以它必须符合XML文档的规范。 XHTML语法规范： 要定义文档类型，即在中所定义的内容。 在根元素中设置xmlns属性，即命名空间。 所有元素和属性都必须小写。 XHTML规范中禁用了name属性，取而代之的是id属性。,所有的属性都必须被赋值。 所有元素的标签都必须闭合，即使是没有结束标签的空标记也要闭合。 所有属性的属性值必须用引号括起来。 所有标签都必须合理嵌套。 不能在注释内容中使用“-”，“-”只能出现在注释的开始与结束。,2.2 body元素,body元素是XHTML文档中的核心元素，用于放置文档中各项内容（文字、图像、链接、表格、表单、音频、视频等对象）。 格式： 内容 属性： background属性：设置页面背景图片 bgcolor属性：设置页面背景颜色 text属性：设置文字颜色,link属性：设置链接颜色 alink属性：设置激活链接颜色 vlink属性：设置已访问过链接颜色 leftmargin属性：设置页面左边空白宽度 topmargin属性：设置页面顶端空白,XHTML文档中的颜色,网页中颜色采用RGB颜色体系，用红绿蓝三种颜色组合各种颜色效果，每一种颜色用一个字节（8个二进制位）来表示，即2进制0000000011111111，16进制00FF，10进制的0255。 所以一种颜色效果用6位16进制数表示，前面要加#。例如黄颜色为#FFFF00。 当前浏览器也可以使用颜色名来定义颜色，例如：red、green、blue、yellow等。,代码输入：,1. 在代码视图中直接输入,2. 利用对话框编辑 无论使用何种方式编辑，最终以形成的XHTML代码在浏览器中显示的结果为准。,2.3 网页文本,网页文本是WEB网页的信息主体。网页制作者通过文本展示信息，而网页浏览者通过文本获取信息。 2.3.1 文本基础 2.3.2 列表 2.3.3 其他文本元素 2.3.4 文本格式化,2.3.1 文本基础,当HTML文件被浏览器显示时，页面内容必须用HTML标记符修饰格式，而文件中的空格、制表位和回车在浏览器中的显示效果与传统文本文件中的效果不同。,2.3.1 文本基础,1. 段落 2. 标题 3. 换行 4. 水平线 5. 特殊字符,1. 段落,网页中一个段落文本为一个p元素，p元素之间会产生空行。在设计视图中按回车键自动产生p元素。 格式： 文字 属性： align属性：设置段落对齐属性，属性值为 left、right、center和justify（两端对齐 ）。,2. 标题,网页中也有各级标题文本，用于描述不同级别的文本信息，也是一种段落格式效果。XHTML使用h1h6元素来标示标题文本。标题元素也用于标明一个网页中各个部分的层次关系。 标题文字默认有加粗效果，h1元素的文字最大，h6元素的文字最小。,格式： 文字 文字 文字 文字 文字 文字 ,属性： align属性：设置标题文字对齐方式，属性值为left、right、center和justify。,3. 换行,在段落文本的特定位置处强行换行要使用br元素，这样上下行文字之间没有空行间隔。在设计视图按shift+enter键自动产生br元素。 格式： ,4. 水平线,网页上的一条水平线为一个hr元素。 格式： 属性： width属性：水平线宽度，属性值可以是像素数或百分比。 size属性：水平线高度。 align属性：水平线对齐方式，属性值为left、right 和center。,noshade属性：水平线没有阴影，属性值为noshade。 color属性：水平线颜色。,5. 特殊字符,XHTML语言提供了一些以&开始的助记符或数字，用于表示页面中特殊字符。 例如：  ；不换行空格 ¥；￥ ©； <；,2.3.2 列表,1. 项目列表 2. 编号列表 3. 定义列表,1. 项目列表,项目列表，即无序列表，会在列表的每个项目前加上列表符号（默认为圆点）。列表文字缩进显示。 格式： 项目1 项目2 项目3 ,ul元素属性： type属性：设置列表符号类型。值为disc（默认，圆点），square（方块），circle（圆圈）。,2. 编号列表,编号列表，即有序列表，会在列表的每个项目前加上字母或数字等列表符号。 格式： 项目1 项目2 项目3 ,ol元素属性： type属性：设置列表编号的样式。属性值： 1：表示是十进制数，如1、2、3等（默认） a：表示是小写字母，如a、b、c等 A：表示是大写字母，如A、B、C等 i： 表示是小写罗马数字，如i、ii、iii等 I：表示是大写罗马数字，如I、II、III等 start属性：设置列表的起始编号。,3. 定义列表,定义列表用了组织术语和相关定义。术语被突出，独占一行从页边开始显示，定义从另一行开始并且缩进。 格式： 术语 定义 ,2.3.3 其他文本元素,1. 预格式化文本 2. 文本缩进,1. 预格式化文本,前面介绍的段落元素不能保留空格、制表位和回车的效果，而为了保留这些效果，可以采用pre元素来完成。 格式： 文本,2. 文本缩进,blockquote元素可以实现成块文本缩进，起到特别的强调作用。 格式： 文本,2.3.4 文本格式化,1. 字体、字号、颜色 2. 逻辑样式元素 3. 物理样式元素,1. 字体、字号、颜色,XHTML中使用font元素来设置文字内容的字体、字号和颜色。 格式： 文字 属性： face属性：设置字体 size属性：设置字号（17，默认为3） color属性：设置颜色,2. 逻辑样式元素,逻辑样式元素，也称为短语元素，用了标明容器元素中的文本的逻辑样式。不同的浏览器对这些样式的表现方式会有不同。 格式： 文本,说明： 元素 作用效果 strong加强文本加粗 em强调文本倾斜 cite引用文本倾斜 code代码文本等宽字体 dfn定义文本倾斜 kbd输入文本等宽字体 samp示例文本等宽字体 var变量文本倾斜,3. 物理样式元素,物理样式元素，也称为字体样式元素，为浏览器提供了特定的字体指令。 格式： 文本,说明： 元素作用效果 b加粗文本加粗 i强调文本倾斜 big加大文本比正常字体大 small缩小文本比正常字体小 sub下标文本文本变小，低于基线显示 sup上标文本文本变小，高于基线显示 strike文本删除线添加删除线 s文本删除线添加删除线 u文本下划线添加下划线 tt电报文本用报文或等宽字体显示,2.4 网页图像,2.4.1 图像类型 2.4.2 图像元素,2.4.1 图像类型,网页图像也是WEB页面中主要信息对象，它不仅可以作为页面的主要装饰方式，而且也是网页信息的一种表现方式。 网页中的图像主要是三种类型：GIF、JPEG和PNG。,1. GIF图像,GIF（CompuServe Graphical Interchange Format，可交换的图像文件格式），最大颜色数为256色（8位色），通常用于纯色调图片和简单图片。GIF图片文件扩展名为.gif。 GIF图片可以实现图片透明效果，而且一个GIF文件中可以存多幅彩色图像，如果把存于一个文件中的多幅图像数据逐幅读出并显示到屏幕上，就可构成一种最简单的动画。,2. JPEG图像,JPEG（Joint Photographic Experts Group，联合图像专家组），最大颜色数为1677万色（24位色），通常用于照片图像。JPEG图片不能设置透明，不能用于动画。JPEG图片的文件扩展名为.jpg。,3. PNG图像,PNG (Portable Network Graphic Format，流式网络图形格式)，是一种位图文件(bitmap file)存储格式。PNG用来存储灰度图像时，灰度图像的深度可多到16位，存储彩色图像时，彩色图像的深度可多到48位，并且还可存储多到16位的通道数据。PNG使用从LZ77派生的无损数据压缩算法。 一般应用于JAVA程序中，或网页或S60程序中是因为它压缩比高，生成文件容量小。,2.4.2 图像元素,网页中的图像使用img元素进行描述。 格式： 属性： src属性：图像的文件位置 width属性：图像宽度 height属性：图像高度 图像宽度、高度改变后图像源文件不变。,alt属性：图像替换文字 border属性：图像边框 vspace属性：垂直边距 hspace属性：水平边距 lowsrc属性：在图像显示出来之前，显示一幅同样内容但是分辨率低的图像 align属性：图片与周围对象的垂直对齐方式 id属性：网页上对象标识，最好不要重复 name属性：网页上对象标识，可以重复,2.5 网页链接,超链接（hyperlink）是网络的灵魂，完善的链接会使网站或网页无所不达、无处不在。它提供了相关联文件的路径，以指向在WWW网络上存储的文件。 链接在网页的表现为：当鼠标指针移动到网页上的链接时，鼠标指针变成手型，单击可以完成链接转向，右击在快捷菜单中选择属性，可以看到链接的目标地址。,2.5 网页链接,2.5.1 链接元素 2.5.2 链接类型,2.5.1 链接元素,网页链接使用a元素进行描述。 格式： 文字或图片 属性： href属性：指定链接文件位置。 target属性：指定链接文件打开位置。其中属性值“_blank”表示打开一个新窗口。,2.5.2 链接类型,1. 站点外部链接 2. 站点内部链接 3. 页面锚点链接 4. 电子邮件链接 5. 文件下载链接 6. 空链接 7. 图像映射链接,1. 站点外部链接,主要用于创建指向其他网站资源的链接。 格式： 文字或图片 例子： 山东大学,2. 站点内部链接,主要用于创建站点内部资源的链接。 格式： 文字或图片 例子： fireworks,3. 页面锚点链接,页面锚点链接主要用于访问网页内部某一特定位置。 完成步骤： （1）网页页面添加锚点 （2）建立链接指向锚点,（1）网页页面添加锚点,使用a元素的name属性，在网页页面某处进行锚点标记。 格式: 文字或图片 如果没有href属性，则a标记符中间可为空。 这是在HTML中常用的方法。,在XHTML中推荐使用元素的id属性，各个元素都可以有id属性，所以可以不限定元素。 格式： 内容,（2）建立链接指向锚点,格式： 文本或图片 target对应页面a元素的name属性值或某页面元素的id属性值。,4. 电子邮件链接,电子邮件链接在网页中建立邮件链接，单击此链接会自动打开浏览器设置的默认邮件程序。 格式： 文本或图片 例如： 文本或图片,说明： 如果要使用mailto同时实现多个功能的话，第一个功能必须以“?”开头，后面的每一个功能都以“&”开头；另外，cc后为抄送地址，bcc后为暗送地址，subject后为邮件的主题，body后为邮件的内容。,5. 文件下载链接,文件下载链接主要用于通过WEB方式下载文件。其实文件下载链接和其他网页间链接没什么区别，主要是链接的文件的区别。 如果普通网页浏览者的浏览器访问的链接对象是网页、图片、flash动画等文件对象，则浏览器会显示相应对象；如果链接对象是rar、zip、exe等文件对象，则浏览器会出现提示下载文件的对话框。,6. 空链接,空链接是未指派链接目标的链接。空链接用于向页面上的对象或文本附加行为。 格式： 文字或图片,7. 图像映射链接,图像可以单独成为触发链接的对象，也可以将图像部分区域作为触发链接的对象。这些图像的部分区域称为“热点”，每一个“热点”就是一个映射，不同热点可以链接不同的网页资源。 完成图像映射链接用到area元素和map元素，使用编辑代码方式完成很麻烦，可以通过Dreamweaver的工具完成。,在Dreamweaver设计视图中，选择制作图像映射链接的图像，然后通过属性面板上的按钮完成操作。,2.6 网页表格,网页表格由行和列组成，行和列的交汇处称为单元格。 网页上的表格的使用通常有两种方式：（1）组织数据；（2）网页布局。,2.6 网页表格,2.6.1 表格基本结构 2.6.2 表格 2.6.3 表格行 2.6.4 标题单元格和普通单元格,2.6.1 表格基本结构, ,2.6.2 表格,table元素用来标识页面一个表格。 属性： width属性：表格宽度 height属性：表格高度 border属性：边框大小 bordercolor属性：边框颜色 cellpadding属性：单元格内容与边框距离 cellspacing属性：单元格之间距离,background属性：背景图片 bgcolor属性：背景颜色 align属性：指定表格的水平对齐方式。属性值为left、right和center。,2.6.3 表格行,tr元素用来标识表格中的一行。 属性： align属性：行内所有单元格内容水平对齐方式 valign属性：行内所有单元格内容垂直对齐方式。属性值为top、middle和bottom bgcolor属性：行内所有单元格背景颜色,2.6.4 标题单元格和普通单元格,th元素用来标识标题单元格，td元素用来标识普通单元格。 th元素内容加粗居中显示。 属性： align属性：单元格内容水平对齐方式 valign属性：单元格内容垂直对齐方式 bordercolor属性：单元格边框颜色 width属性：单元格宽度 height属性：单元格高度,background属性：单元格背景图片 bgcolor属性：单元格背景颜色 rowspan属性：设置单元格所跨的行数 colspan属性：设置单元格所跨的列数,2.7 网页表单,网页表单主要用于收集用户信息，实现浏览者同WWW服务器之间的交互。通过表单，可以将用户的信息发送到WWW服务器上，以供处理。 网页表单中通常包含表单普通内容、表单控件以及表单控件标签等。 表单普通内容主要指表单中的说明文字或图片等。 表单控件主要指表单中接收用户数据的表单元素。 表单控件标签主要指控件的文字标识。,表单和表单控件要设置合理的id属性值和name属性值。 id 属性值用于页面内的访问，页面唯一。 name属性值用于页面内表单专用访问和发送服务器时使用，可重复。,2.7 网页表单,2.7.1 表单 2.7.2 基本表单控件 2.7.3 改善表单,2.7.1 表单,表单元素是容器控件，关于相关信息调查的表单控件都要放到同一个表单元素里。 格式： 属性： action属性：属性值通常为服务器端的某个程序或脚本文件的URL，这个文件接受客户端传来的表单信息，并进行处理。,method属性：指定表单数据发送给服务器端的发送方式。属性值为get（默认值）或post。 get：将表单数据附加到action属性指定URL之后，发送给服务器。 post：将表单数据包含在HTTP反馈主体中，发送给服务器，数据隐蔽，W3C推荐方式。,2.7.2 基本表单控件,表单控件元素是表单元素中用于接收用户信息的对象控件。 1. 单行文本框 2. 密码输入框 3. 单选按钮 4. 复选框 5. 滚动文本框 6. 选择列表,7. 提交按钮 8. 重置按钮 9. 按钮,1. 单行文本框,功能： 用于接收文本或数字信息。 格式： 属性： size属性：设置文本框显示的宽度，值为数字。 maxlength属性：设置文本框所接收文本的最大长度，值为数字。 value属性：设置文本框初始值。,2. 密码输入框,功能： 用于接收在输入过程中需要隐藏的数据。 格式： 属性： size属性：设置密码框显示的宽度，值为数字。 maxlength属性：设置密码框所接收文本的最大长度，值为数字。,3. 单选按钮,功能： 允许用户从一组事先确定的选项中选择唯一项。 格式： 属性： checked属性：将单选按钮设置为默认选中状态，值为checked。 注意： 同一组单选按钮的name属性必须相同。,4. 复选框,功能： 允许用户从一组事先确定的选项中选择一项或多项。 格式： 属性： checked属性：将复选框设置为默认选中状态，值为checked。,5. 滚动文本框,功能： 用于接收输入的多行文本信息。 格式： 默认文本 属性： cols属性：设置滚动文本框宽度，值为数字。 rows属性：设置滚动文本框行数，值为数字。,6. 选择列表,功能： 允许用户从一组事先确定的列表中选择一项或多项。 格式： 选项一 选项二 选项三 ,select元素属性： size属性：设置显示的选项个数，值为数字。 multiple属性：设置为允许多选。值为multiple。 option元素属性： selected属性：将选项设置为默认选中状态。,7. 提交按钮,功能： 单击提交按钮用于提交表单。 格式： 属性： value属性：设置提交按钮上显示的文本。,8. 重置按钮,功能： 单击重置按钮用于将表单各元素重置为初始值。 格式： 属性： value属性：设置重置按钮上显示的文本。,9. 按钮,功能： 单击这种按钮时没有默认动作，通常与客户端脚本一起使用，从而在客户端产生某种操作。 格式： 属性： value属性：设置按钮上显示的文本。,2.7.3 改善表单,1. 表单控件标签 2. 表单控件元素分组 3. 图像按钮 4. 按钮元素,1. 表单控件标签,表单控件标签元素用于在文本描述和表单控件元素之间建立关联的容器标记。 格式： 文字 属性： for属性：与关联的表单控件元素id值相同。,2. 表单控件元素分组,将表单控件元素进行分组，分组后在分组的表单控件元素周围加上一圈轮廓线或边框。 格式： 文字或图片 表单控件元素 ,3. 图像按钮,用一幅图像代替了标准的提交按钮。 格式： 属性： 同图像属性。,4. 按钮元素,按钮元素可以将文本、图像设置成可点击区域，用来提交或重置一个表单。 格式： 文本或图片 属性： type属性：设置按钮类型。值为submit，reset或button。,2.8 网页多媒体,网页是一种多媒体信息展示方式，除了常见的文字、图像，还有音频、视频、动画等对象，共同形成一个信息集成体，多种形式展示网页信息。 XHTML网页中用于表现多媒体信息的元素有bgsound元素，embed元素，object元素，通过这些元素将外部的多媒体文件链入网页。,2.8.1 bgsound元素,bgsound元素用于在网页中提供网页背景音乐功能，但不属于W3C规范，只适用于IE浏览器。 格式： 属性： balance属性：设置音乐的左右均衡（-1000010000，0为左右平衡） delay属性：进行播放延时的设置（秒）（没用）,loop属性：循环次数的控制（-1，0，n） src属性：音乐文件的路径（mid、wav、mp3等） volume属性：音量设置（-100000，0音量最大）,2.8.2 embed元素,embed元素最初用于网景浏览器（Netscape Navigator）链入各种多媒体文件（像音频、视频、Flash文件等），为了考虑兼容性，会将它和object元素配合使用。浏览器对多媒体文件应该有相应插件支持。 格式： ,属性： src属性：定义多媒体文件的路径 autostart属性：定义音频或视频文件是否在下载完之后就自动播放。属性值为true或false，表示自动播放或不自动播放。 loop属性：定义音频或视频文件播放是否循环，如果循环，循环的次数。属性值为正整数值时，表示循环次数；属性值为true或false，表示循环或不循环。,hidden属性：规定控制面板是否显示。属性值为true或false，表示隐藏或显示。 volume属性：规定音频或视频文件的音量大小。属性值是0100之间的整数。 width属性：规定控制面板的显示宽度。 height属性：规定控制面板的显示高度。,2.8.3 object元素,object元素定义一个嵌入的对象。使用此元素向 XHTML 页面添加多媒体。此元素允许规定插入XHTML 文档中的对象的数据和参数，以及可用来显示和操作数据的代码。 object元素用于包含对象，比如图像、音频、视频、Java applets、ActiveX、PDF 以及 Flash。,object 的初衷是取代 img 和 applet 元素。不过由于漏洞以及缺乏浏览器支持，这一点并未实现。浏览器的对象支持有赖于对象类型。不幸的是，主流浏览器都使用不同的代码来加载相同的对象类型。 而幸运的是，object 对象提供了解决方案。如果未显示 object 元素，就会执行位于 和 之间的代码。通过这种方式，我们能够嵌套多个 object 元素（每个对应一个浏览器）。,