《实战Dreamweaver CS5 网页制作教程 第2版 教学课件 ppt 作者 刘天真 第2章 网页元素的添加》由会员分享，可在线阅读，更多相关《实战Dreamweaver CS5 网页制作教程 第2版 教学课件 ppt 作者 刘天真 第2章 网页元素的添加（85页珍藏版）》请在金锄头文库上搜索。
1、学习目标,掌握各种网页元素添加的方法 学会进行页面属性的设定 学会进行简单的页面布局,2.1 文本和页面属性 2.2 图像的插入和设置 2.3 超链接的设置方法 2.4 翻转图 2.5 Flash对象,本章内容,2.1 文本和页面属性,2.1.1 案例制作：网页“藏獒鉴赏”部分正文,通过本案例的操作，你将学会： 如何插入文本和设置文本的属性、如何插入网页背景图像和进行版式设计。,2.1 文本和页面属性,2.1.1 案例制作：网页“藏獒鉴赏”部分正文,操作步骤： 1）新建文件夹zangao，在该文件夹中新建子文件夹image，将所有素材拷贝到image文件夹中。在Dreamweaver CS5中
2、，单击菜单“站点” “新建站点”命令，打开“站点设置对象”对话框进行站点定义，设站点名称为“藏獒传说”，站点文件夹定义为文件夹zangao。 2）新建网页，保存为jianshang.html，在“文档”工具栏中设网页的标题为“藏獒传说-藏獒鉴赏”。单击属性面板中的“页面属性”按钮，打开“页面属性”对话框。在“外观（CSS）”选项下，设“背景图像”为image/bg.gif，单击“确定”按钮，为网页添加背景图像。,2.1 文本和页面属性,2.1.1 案例制作：网页“藏獒鉴赏”部分正文,操作步骤： 3）输入文本“藏獒鉴赏”。按回车键另起一段。打开image文件夹中的“藏獒文字介绍.doc”，将其中
3、的第1段文字复制粘贴到网页中，也可以输入文字。按回车键将文本分成不同的段落，如图所示。,2.1 文本和页面属性,2.1.1 案例制作：网页“藏獒鉴赏”部分正文,操作步骤： 4）在属性面板中单击 按钮切换到CSS属性面板。设“目标规则”为“新CSS规则”，单击“编辑规则”按钮，打开“新建CSS规则”对话框，在“选择器名称”中输入“t1”，如图所示，单击“确定”按钮两次，回到文档窗口。,2.1 文本和页面属性,2.1.1 案例制作：网页“藏獒鉴赏”部分正文,操作步骤： 此时CSS属性面板的“目标规则”显示样式“t1”，设文本“居中对齐”，字号为24，文字颜色为#FF6600。单击“字体”右侧的下拉
4、列表，选择“编辑字体列表”选项。在弹出的“编辑字体列表”对话框的“可用字体”中选择“隶书”，单击 按钮添加字体。单击对话框上部的 按钮，再在“可用字体”中选择“宋体”，单击 按钮添加字体。同样的，再添加字体楷体，如图所示。单击“确定”按钮退出对话框。 在属性面板的“字体”下拉列表中选择“隶书”。这样就将样式“t1”设置完成。,2.1 文本和页面属性,2.1.1 案例制作：网页“藏獒鉴赏”部分正文,操作步骤： 设“目标规则”为“新CSS规则”，单击“编辑规则”按钮，打开“新建CSS规则”对话框，在“选择器名称”中输入“t2”，单击“确定”按钮两次，回到文档窗口。在CSS属性面板中，设文本为宋体，
5、对齐方式为“左对齐”，字号为13，文字颜色为黑色。这样就将样式“t2”设置完成。 设“目标规则”为“新CSS规则”，单击“编辑规则”按钮，打开“新建CSS规则”对话框，在“选择器名称”中输入“t3”，单击“确定”按钮两次，回到文档窗口。在CSS属性面板中，设字体为楷体，字号为13，斜体。文字颜色为黑色。这样就将样式“t3”设置完成。,2.1 文本和页面属性,2.1.1 案例制作：网页“藏獒鉴赏”部分正文,操作步骤： 5）在文档中选中文本“藏獒鉴赏”，在属性面板的“目标规则”下拉列表中选择“t1”，则选中的文本就应用了样式“t1”所设置的属性。 选中第2段文字，在属性面板的“目标规则”下拉列表中
6、选择“t2”，则选中的文本就应用了样式“t2”所设置的属性。光标移到段落开始位置，按住Ctrl+Shift +空格键插入空格，共按4次，使得段落首行缩进2个字。 选中第3、4、5、6段文字，在HTML属性面板中单击项目列表按钮 ，添加项目符号。在“类”下拉列表中选择“t3”，则选中的文本就又应用了样式“t3”所设置的属性。,2.1 文本和页面属性,2.1.2 新知解析,1. 文本的属性面板 在文档窗口输入一段文字，此时属性面板如图2-5所示，可通过“属性”面板对文本的属性进行设置。 在Dreamweaver CS5中，属性面板中的各种属性都按照类别划分到相应的HTML代码和CSS样式标签下。在
7、属性面板中有两个标签将HTML格式和层叠样式表（CSS）格式完全分开，可以有选择性地设置文本属性。当选择HTML格式时，属性面板中呈现于HTML相关的选项，设置完成后，Dreamweaver CS5会将属性添加到页面正文的HTML代码中。同样，如果应用了CSS格式，Dreamweaver CS5会将属性写入文档头或单独的样式表中。,2.1 文本和页面属性,2.1.2 新知解析,1. 文本的属性面板 （1）在属性面板中编辑CSS规则 CSS属性面板如图所示，通过改变各属性参数可以对“目标规则”显示的CSS规则进行更改。,2.1 文本和页面属性,2.1.2 新知解析,1. 文本的属性面板 （2）在
8、属性面板中设置HTML格式 选中欲设置格式的文字，在HTML属性面板中设置相应的选项即可，如图所示。,2. 插入空格 在Dreamweaver CS5中，无论按键盘上的空格键多少次，只能添加一个空格。若要添加多个空格，一般采用按住Ctrl+Shift +空格键的方法，每按一次，添加一个空格。 还可以单击菜单“编辑”“首选参数”命令，在“首选参数”对话框中，在“分类”选项下选择“常规”，勾选右侧的“允许多个连续的空格”，如图所示。这样当需要添加空格的时候，就可以直接按空格键输入了！,2.1 文本和页面属性,3. 页面属性的设置 当我们需要对网页的整体外观进行设置时，可通过“页面属性”命令进行设置
9、。在属性面板中单击“页面属性”按钮，或单击菜单“修改”“页面属性”命令，出现如图所示的对话框。在“外观（CSS）”选项下可以整体上对网页中采用默认方式输入的文字的字体、大小、颜色、页面背景、边距等进行设定。,2.1 文本和页面属性,3. 页面属性的设置 在观“外（HTML）”选项下可以整体上对页面背景、文字颜色、超链接的显示状态颜色、边距等进行设定，如图所示。 页面属性的“分类”下的其他几个选项分别对页面的其他属性进行了设置。,2.1 文本和页面属性,2.1 文本和页面属性,4. 特殊字符,当在网页中需输入一些特殊字符时，可单击菜单“插入”“HTML” “特殊字符”选择相应选项。,2.1 文本
10、和页面属性,5. 水平线,水平线主要用于分隔文档内容，使文档结构清晰，层次分明。单击菜单“插入” “HTML”“水平线”命令，或单击“插入”面板组“HTML”选项下的 按钮可插入水平线，此时属性面板变为如图所示，可对水平线的宽、高、对齐方式、阴影等进行设置。,2.1 文本和页面属性,6. 插入日期,单击菜单“插入”“日期”命令，或单击“插入”面板组 “常用”选项下的 按钮，则弹出“插入日期”对话框，可设置相应的日期格式，如图所示。当选择“储存时自动更新”选项时，每次更改储存网页，系统自动更新日期为当前日期。,2.1 文本和页面属性,2.1.3 技巧提示,1. 水平线颜色的修改,2. 换行与回车
11、键的不同,2.1 文本和页面属性,2.1.4 实战演练：网页“藏獒鉴赏”的制作,通过本案例的操作，你将学会：如何插入文本和设置文本的属性、如何插入网页背景图像、如何插入水平线、日期、特殊符号并进行设置。,2.1 文本和页面属性,2.1.4 实战演练：网页“藏獒鉴赏”的制作,操作步骤： 在前面“藏獒鉴赏”网页部分正文制作的基础上，继续完成整个网页的制作。 1）将光标移到文字最后，按回车键另起一段。此时新段落带有项目列表符号，单击HTML属性面板上的项目列表按钮 ，取消项目列表符号。光标回到左侧段落开始的地方。 2）打开image文件夹中的“藏獒文字介绍.doc”，将第2段文字复制粘贴到网页中，也
12、可以输入文字。选中不同的文字，按回车键将文本分成不同的段落，形成第7、8、9、10、11、12段，如图所示。,2.1 文本和页面属性,2.1.4 实战演练：网页“藏獒鉴赏”的制作,操作步骤： 选中第8、9、10、11、12段文字，在HTML属性面板中单击项目列表按钮 ，添加项目符号,在“类”中单击“t2”。光标移到第7段开始，按住Ctrl+Shift +空格键4次将第7段文字向右缩进2个字，如图所示。,2.1 文本和页面属性,2.1.4 实战演练：网页“藏獒鉴赏”的制作,操作步骤： 3）将光标移到文字最后，按回车键另起一段。此时新段落带有项目列表符号，单击HTML属性面板上的项目列表按钮 ，取
13、消项目列表符号。光标回到左侧段落开始的地方。 4）单击菜单“插入”“HTML”“水平线”命令，在文档中插入水平线，并处于选中状态。切换到代码视图，找到处于反白显示的标记符。光标移到标记符中字母“r”的后面按空格键，在提示的属性中双击“color”属性，接着在颜色提示中选择橙色#FF6600。输入完的代码是。按F12可在浏览器中观察到水平线变成橙色了。,2.1 文本和页面属性,2.1.4 实战演练：网页“藏獒鉴赏”的制作,操作步骤： 5）光标移到水平线右侧，输入版权区域文字“Copyright ”。接着单击菜单“插入”“HTML”“特殊字符”“版权”命令，插入版权符“”。再接着输入文字“ 版权归
14、藏獒传说工作室 更新日期”。单击菜单“插入”“日期”命令，在“插入日期”对话框中，日期格式选择第2个格式，如图2-14所示，单击“确定”按钮。 在CSS属性面板中，设“目标规则”为“新CSS规则”，单击“编辑规则”按钮，打开“新建CSS规则”对话框，在“选择器名称”中输入“t4”，单击“确定”按钮两次，回到文档窗口。在CSS属性面板中，设文本为宋体，对齐方式为“居中对齐”，字号为13，文字颜色为黑色。这样就将样式“t4”设置完成。选中版权区域所有文字，在属性面板的“目标规则”下拉列表中选择“t4”。,2.2 图像的插入和设置,2.2.1 案例制作：网页“球星-亨利”,通过本案例的操作，你将学会
15、：如何插入图像和设置图像属性、如何设置网页背景颜色、如何设置图像和文本的对齐方式和进行文本换行。,2.2 图像的插入和设置,2.2.1 案例制作：网页“球星-亨利”,操作步骤： 1） 新建文件夹qiuxing，在该文件夹中新建子文件夹image，将所有的素材拷贝到image文件夹中。在Dreamweaver CS5中，单击菜单“站点” “新建站点”命令，打开“站点设置对象”对话框进行站点定义，设站点名称为“球星”，站点文件夹定义为文件夹qiuxing。 2）新建网页，保存为hengli.html，设网页的标题为“球星亨利”。单击CSS属性面板中的“页面属性”按钮，打开“页面属性”对话框，在外观
16、（CSS）选项下设文字大小为13，文字颜色为黑色，“背景颜色”为#F2F9FD，单击“确定”按钮，为网页添加了背景颜色，同时为整个网页设置了默认的文字属性，如图所示。,2.2 图像的插入和设置,2.2.1 案例制作：网页“球星-亨利”,操作步骤： 3）输入文本“球星-亨利”。 4）打开image文件夹中的“球星资料介绍.doc”，共有2段文字。将所有文字复制粘贴到网页中，也可以输入文字，形成网页中的第2、3段文字。 5）根据图2-19所示的样式，依次按Shift+回车键将第2段文本进行换行。在第3段文字“身体技术完美结合”后按回车键另起一段。 6）在CSS属性面板中，设“目标规则”为“新CSS规则”，单击“编辑规则”按钮，打开“新建CSS规则”对话框，在“选择器名称”中输入“t1”，单击“确定”按钮两次，回到文档窗口。在CSS属性面板中，设对齐方式为“居中对齐”，字号为20，这样就将样式“t1”
