《Dreamweaver CS5网页设计与制作教程 教学课件 ppt 作者 文琦 詹增荣 第二章》由会员分享，可在线阅读，更多相关《Dreamweaver CS5网页设计与制作教程 教学课件 ppt 作者 文琦 詹增荣 第二章（76页珍藏版）》请在金锄头文库上搜索。
1、第二章 XHTML与Dreamweaver基本操作,2.1 XHTML概念 2.2 文本操作 2.3 图像操作 2.4 超链接操作 2.5 表格操作,2.6 表格操作 2.7 框架结构 2.8 插入多媒体元素 2.9 AP DIV元素 2.10 Spry框架,2.1 XHTML概念-认识XHTML,XHTML 指可扩展超文本标签语言（EXtensible HyperText Markup Language），是HTML与XML（可扩展标记语言 ，Extensible Markup Language）的结合。, 无标题文档 , 与, 与,与标签,2.1 XHTML概念-常见的XHTML标签,网页
2、可以包含文字、图片、表格、声音等元素，因此有各种各样的标签来描述这些元素。特别地，不同的元素可能以不同的方式呈现给浏览者，所以标签又将会有属性与之对应。浏览器则对这些标签及属性进行解释并生成页面，于是就得到现在所看到的各式各样的网页效果。 基本标签 ：样式标签，用于定义HTML文档的样式 -：标题标签，可以用来定义文档中不同等级的标题 ：段落标签，用于定义文档的段落 ：水平线标签，作用是在文档中插入水平线，起分隔内容的作用 ：换行标签，在文档中插入一个换行 ：注释标签 ：块容器标签，用来定义文档中的分区或节。 ：行容器标签，主要用来对行内元素进行分组或标识，类似于div标签。,2.1 XHTM
3、L概念-常见的XHTML标签,文本标签 ：显示粗体文本的效果 ：显示斜体文本的效果。 ：将文本定义为强调的内容，实际效果类似于斜体文本。 ：呈现大号字体的效果。 ：将文本定义为更强调的内容，实际效果类似于粗体文本 ：呈现小号字体的效果。 ：可定义文本上标，如页面要显示类似于“a2”的文本 ：可定义文本下标，如页面要显示类似于“a1”的文本 超链接标签 标签用于创建网页中的超链接。该标签有两个重要属性：href属性和name属性。使用href属性创建网页到网页之间的链接，使用name属性创建本页面内部的一个锚点。,2.1 XHTML概念-常见的XHTML标签,列表标签 ：无序列表标签，定义一个无
4、序列表，标签只能包含标签，列表项通过项目符号排列项目。 ：有序列表标签，定义一个有序列表，标签只能包含标签，列表项通过编号排列项目。 ：列表项标签，表示列表中的项目。 ：定义列表标签，定义一个定义列表。 ：定义定义列表中的项目。 ：在定义列表中定义条目的定义部分超链接标签 图像标签 图像标签：XHTML中使用该标签在页面中定义图像。该标签在使用时有两个必选属性：src和alt，其中alt表示图像的替代文本，src则规定显示图像的URL。,2.1 XHTML概念-常见的XHTML标签,表格标签 表格是传统网页布局的常用标签，它允许我们把各种内容、数据放在表格单元格内。创建表格一定包含下面三个标签
5、。 ：表格标签，用来定义HTML表格。 ：表格行标签，定义HTML表格中的行。 ：单元格标签，定义HTML 表格中的标准单元格。 框架标签 ：框架集标签，可以在页面上定义一个框架集。该标签将页面划分成多个框架，每个框架都是独立的，可以显示不同的文档。 ：框架标签，定义框架集中的一个框架。,2.1 XHTML概念-常见的XHTML标签,表单标签 当需要用户编辑输入数据的时候，让使用者与网站能够交换信息，彼此沟通时，XHTML使用表单元素。表单标签主要有以下几个： ：表单标签，用来在页面上创建表单。 ：主要用来生成表单中用户输入区域的元素。通过type属性指明具体元素类型，如文本框、密码文本框、单
6、选按钮等。 ：列表/菜单标签，用于创建HTML中的列表框或下拉菜单。与标签结合使用。 ：选项标签，用来定义列表或下拉菜单中的一个选项。 ：文本区域标签，定义HTML页面中的多行文本框。,2.1 XHTML概念-页面头部信息,网页的头部信息，是为浏览器和搜索引擎而写，它往往不会被直观的显示在页面中，是用户不可见的，在标签部分定义。主要的头部标签有、：表单标签，用来在页面上创建表单。 标签 标签可提供有关页面的元信息（meta-information）。可以用来帮助主页被各大搜索引擎登录、定义页面的使用语言 、自动刷新并指向新的页面、实现网页转换时的动画效果、控制网页显示的窗口等。 ,2.1 XH
7、TML概念-页面头部信息,标签 标题是最常用的页面头部信息，是标签中唯一要求包含的元素。它不显示在HTML网页正文里，而是显示在浏览器窗口的标题栏。用法如： 文档标题 标签 标签用于为 HTML 文档定义样式信息，它也是放在页面的头部。用法如： h1 color: red p color: blue ,2.1 XHTML概念-页面头部信息,标签 标签作用是链接外部文件，如链接样式表文件。标签的位置只能放在之间，并且标签可以多次出现。用法如： 标题1通过外部样式表进行格式化。 段落也通过外部样式进行格式化！ ,2.1 XHTML概念-页面头部信息,Dreamweaver设置页面头部信息操作 1.
8、查看头部信息 2.设置网页编码 3.设置文档标题,2.1 XHTML概念-页面头部信息,Dreamweaver设置页面头部信息操作 1.设置网页的关键字 2.设置网页的刷新频率 ,2.1 XHTML概念- 页面属性,新建HTML文档后，在编辑该文档前可以对页面进行必要的设置，即页面属性的设置。单击“修改”菜单“页面属性”，或单击属性面板中的“页面属性”按钮，弹出“页面属性”对话框。 外观（CSS） 该分类是利用CSS方式设置页面的一些基本属性，如页面字体、页面文本大小、文本颜色、背景颜色和背景图像、页边距等。 外观（HTML） 该分类是利用HTML的方式设置页面的一些基本属性，如图2-8所示。
9、可以设置的属性包括：背景图像、背景颜色、文本颜色、链接颜色、边距等。,2.1 XHTML概念- 页面属性,链接（CSS） 该分类是通过CSS样式设置链接。“链接”选项内是一些与页面的链接效果有关的设置。 标题（CSS） 该分类是利用CSS样式设置标题字体的一些属性，如图2-10所示。这里的“标题”不是指页面的标题内容，而是可以应用在标题上的一种标题字体样式，可以定义“标题字体”及6种预定义的标题字体样式。,2.1 XHTML概念- 页面属性,标题/编码 该分类主要是设置标题的内容、文档的类型及编码方式等， 跟踪图像 该类别可以将网页布局设计的草图载入到页面。可以事先准备好规划好的图片，通过跟踪
10、图像设置载入到dreamweaver中，在“透明度”中设定跟踪图像的透明度，则可以在当前网页中方便地定位各个网页元素的位置了,2.2 文本操作,任务与目的 本任务完成图2-13页面的制作。该页面经过对文本的编辑及格式化，使页面更美观、更整齐地组织信息。页面操作包括文本的输入、文本的字体颜色、生成段落和列表、插入水平线及插入特殊符号等,掌握文本和特殊符号的输入 掌握文本的属性设置 掌握列表的使用 掌握水平线的插入及设置 掌握日期的插入 掌握页面背景图像的设置,2.2 文本操作-相关概念及操作,相关标签 1.标签 标签的作用是定义标题，其中x表示1到6的数字，定义最大的标题，表示最小的标题。它属于
11、双标签，语法格式为：,2.2 文本操作-相关概念及操作,相关标签 2.标签 标签的作用是定义段落。浏览器遇到标签时，通常会在相邻的段落之间插入一些垂直的间距。所有的主流浏览器都支持该标签，它属于双标签，语法格式为：，其中之间的内容为段落显示的内容。,这是段落。 这是段落。 这是段落。 段落元素由 p 标签定义。,2.2 文本操作-相关概念及操作,相关标签 3.标签 标签的作用是插入一个简单的换行符，它只是简单地开始新的一行，相邻行之间的间距没有段落之间的间距大。它属于单标签，语法格式为：。,2.2 文本操作-相关概念及操作,相关标签 4. 标签 标签的作用是在HTML页面上创建一条水平线。水平
12、线常常用于分隔页面内容，使页面结构更清晰,2.2 文本操作-相关概念及操作,相关标签 5. 标签和标签 标签的作用是定义一个无序列表，而标签则定义列表中的列表项。它们都属于双标签，语法格式为：，其中有N个列表项，在中则出现N个标签。 6.标签和标签 标签的作用是定义一个有序列表，而标签则定义列表中的列表项。它们都属于双标签，语法格式为：，其中有N个列表项，在中则出现N个标签。,2.2 文本操作-相关概念及操作,文本的属性面板 文本的基本操作主要是对文本属性的设置，这些设置可以在文本的属性面板中设置。属性面板包括：HTML选项表示利用HTML定义文本属性，如图2-35所示。CSS选项表示利用CS
13、S设定文本属性，如图2-36所示。,2.3 图像操作,任务与目的 本任务制作了如图2-37所示的页面设计效果。整个页面主要是对图像进行操作，如页面的Banner部分为图像，导航条则是利用鼠标经过的图像制作完成的，动感效果较好，正文部分用图像占位符，等待以后插入图像。,掌握普通图像的插入方法 掌握鼠标经过图像的插入方法。 掌握图像占位符的插入方法 掌握图像属性的设置方法 掌握图文混排。,2.3 图像操作-相关概念及操作,网页图像类型 网页中增加图像会令网页变得生动，但网页中的图像增加也会影响网页的下载的速度。因此设计网页使用图像的原则是：在保证画质的基础上使图像尽可能的小，同时需要考虑浏览器的兼
14、容问题,2.3 图像操作-相关概念及操作,相关标签 标签的作用是在页面中插入一幅图像。它属于单标签，语法格式为：。所有的浏览器都支持标签。,2.3 图像操作-相关概念及操作,图像的基本操作 图像的插入。 方法一：将光标放入要插入图像的位置，选择“插入”菜单，其中单击“图像”命令是插入普通的图像，单击“图像对象”菜单下的命令可以插入鼠标经过的图像及图像占位符。 方法二：选择“窗口”菜单“插入”命令，打开“插入”面板，在“常用”中选择“ ”图像按钮。 2.调整图像 图像的属性可以在属性面板中设置，从而调整图像。,2.4 超链接操作,任务与目的 本任务是将图2-50中的页面创建合理的超链接，浏览者通
15、过单击链接访问相应的信息,掌握普通超链接的创建 掌握锚点链接的创建 掌握图像热点链接的创建 掌握电子邮件链接的创建 掌握空链接的创建,2.4 超链接操作-相关概念及操作,链接路径 1.绝对路径 绝对路径用在创建一个外部链接时，即从一个网站跳转到另一个网站。此时的绝对路径是指链接目标文件的绝对URL地址，如任务中使用的http:/ 2.相对路径 相对路径则用在创建一个内部链接时，即在站点目录下的不同页面之间的跳转。此时链接目标文件采用相对路径。用“/”表示上一层的文件夹，用“/”表示根目录 相关标签 创建超级链接只需要一个XHTML标签，即为标签。标签属于双标签，它的语法格式，其中之间的内容是超
16、链接的载体，可以是文本或图像。,2.4 超链接操作-相关概念及操作,超链接的基本操作 1.超链接的创建 方法一：使用属性面板创建链接。选择超链接的载体后，在属性面板中设置两个属性，一是“链接”，在“链接”的文本框输入目标链接的文件路径，二是“目标”，在下拉列表框选择文档打开的位置，如图2-72所示 使用菜单创建链接。选择超链接的载体后，选择“插入”菜单中关于链接的命令，弹出“超级链接”对话框，如图2-73所示 2.超链接的删除 超链接的删除只需要选中已建立超链接的文本或对象，清除属性面板的“链接”文本框的值，超链接被删除。,2.5 表格操作,任务与目的 本任务制作完成如图2-74所示的页面，页面用表格布局，网页中通过一个细线表格组织信息。,掌握表格的概念 掌握表格的插入 掌握表格及单元格的属性设置 掌握表格的基本操作等 掌握细线表格的制作,2.5 表格操作-相关概念及操作,表格的概念及相关标签 表格由行和
