网页设计与制作 Dreamweaver CS6 标准教程

Presentation on theme: "网页设计与制作 Dreamweaver CS6 标准教程"— Presentation transcript:

1 网页设计与制作 Dreamweaver CS6 标准教程
第3章 页面与文本 网页设计与制作 Dreamweaver CS6 标准教程

2 本章学习的主要内容： 1. 页面属性 2. 文本属性 3. 项目列表和编号列表

3 3.1 页面属性 网页页面属性主要包括网页标题、网页背景图 像和颜色、网页边距、网页默认文字大小和颜 色、超链接颜色等。可以通过菜单【修改】| 【页面属性】来进行设置和修改。

4 3.1 页面属性 3.1.1 课堂案例—香格里湾峰会 3.1.2 网页的标题 3.1.3 文本分段与换行 3.1.4 输入空格
3.1.5 页面文字属性 3.1.6 显示不可见元素 3.1.7 设置页边距 3.1.8 背景属性 3.1.9 跟踪图像

5 3.1.1课堂案例—香格里湾峰会 案例学习目标：学习网页页面属性的设置方法， 以及文本的换行与分段，字体的选择与设置等方 法。
案例知识要点：使用【修改】|【页面属性】菜单 设置页面属性。 素材所在位置：光盘/案例素材/ch03/课堂案例- 香格里湾峰会。 案例效果如图3-1所示。

6

7 3.1.2 网页的标题 网页标题设置有两种方法。 （1）利用【页面属性】对话框
 选择菜单【修改】|【页面属性】或点击文本 【属性】面板中的【页面属性】按钮。  单击【页面属性】对话框中【分类】栏中的 【标题/编码】，在【标题】文本框中输入页面 标题，如图3-22所示，单击【确定】完成设置。 （2）在文档工具栏【标题】文本框中，输入 页面标题文字完成设置。

8 3.1.3 文本分段与换行 （1）将光标置于需要分段处，按回车键形成 一个新段落，同时在两个段落之间添加了一个 空行。在网页代码中，新形成的两个段落文字 均包含在<p>和</p>标签中。 （2）将光标置于需要换行处，按住<Shift> 的同时，按回车键换行，但没有形成新的空行。 在网页代码中，段落文字依然包含在<p>和 </p>标签中，并在换行处上添加了一个 <br>标签。

9 3.1.4 输入空格 选择菜单【编辑】|【首选参数】，在【首选参数】对话框的【分类】 栏中，选择【常规】，在【编辑选项】中勾选或取消勾选【允许多 个连续空格】完成设置。 除此之外，还可以通过以下四种方法输入空格。 （1）选择【插入】面板中【文本】选项卡，单击【字符】按钮 展 开选择【不换行空格】选项。 （2）选择菜单【插入】|【HTML】|【特殊字符】|【不换行空格】。 （3）按<Ctrl+Shift+Space>快捷键。 （4）将输入法转换到中文全角状态下，按<Space>空格键输入连 续空格。

10 3.1.5 页面文字属性 新建网页时，页面文字的字体、大小和颜色等均有默认设置， 可根据需要进行修改，具体步骤如下。
选择菜单【修改】|【页面属性】。 单击【页面属性】对话框【分类】栏中的【外观（CSS）】， 在右侧设置【页面字体】、【大小】、【文本颜色】。 页面文字属性设置完后，在【CSS样式】面板中出现了 body,td,th样式，【代码】窗口中新增一段CSS样式代码，如： body,td,th { font-family: 微软雅黑; font-size: 14px; color: #666; }

11 3.1.6 显示不可见元素 显示或隐藏不可见元素的操作步骤如下。 选择菜单【编辑】|【首选参数】，打开【首选参数】 对话框。
在【首选参数】对话框【分类】栏中选择【不可见 元素】，在右侧单击相应元素的复选框实现显示或隐 藏不可见元素，如图3-28所示，单击【确定】完成设 置。

12 3.1.7 设置页边距 页边距指整个页面到浏览器左、右边缘和顶部、底部边缘 的距离，通常设置为0。设置步骤如下。
选择菜单【修改】|【页面属性】 在【页面属性】对话框【分类】栏中选择【外观 （CSS）】，在【左边距】、【右边距】、【上边距】、 【下边距】选项分别输入相应数值，单击【确定】按钮完成 设置。 在【代码】窗口中看到新增一段代码： body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; }

13 3.1.8 背景属性 网页背景可以填充为颜色，也可以填充为图像。更改 网页背景的操作步骤如下。 选择菜单【修改】|【页面属性】。
单击【页面属性】对话框【分类】栏中的【外观 （CSS）】，在右侧设置【背景颜色】、【背景图像】、 【重复】等选项。 【重复】选项下拉列表中，各选项含义如下。 no-repeat（不重复）：背景图像不重复。 repeat（重复）：背景图像在页面中重复。 repeat-x（重复-x）：背景图像在页面中横向重复。 repeat-y（重复-y）：背景图像在页面中纵向重复。 如果【重复】空白，默认为repeat。

14 3.1.9 跟踪图像 网页背景可以填充为颜色，也可以填充为图像。更改 网页背景的操作步骤如下。设置跟踪图像的步骤如下。
选择菜单【修改】|【页面属性】。 单击【页面属性】对话框【分类】栏中的【跟踪图 像】，在右侧【跟踪图像】文本框中输入跟踪图像的 路径和文件名。或者单击【浏览…】按钮，在【选择 图像源文件】对话框中找到并选择跟踪图像，单击 【确定】按钮。 在【透明度】选项中设置跟踪图像透明度。

15 3.2 文本属性 在制作网页时，应用最多的元素就是文本，文本 有很多种，如文字、特殊符号、日期等。在网页 中添加文本之后，需要对文本的大小、颜色等属 性进行设置，以便网页更加美观。

16 3.2 文本属性 3.2.1 课堂案例—百货公司 3.2.2 设置文本属性 3.2.3 文本段落 3.2.4 插入日期
3.2.5 插入特殊字符

17 3.2.1 课堂案例—百货公司 案例学习目标：学习设置网页中的文字样式。 案例知识要点：使用CSS样式改变文本大小、颜 色、字体等样式。
素材所在位置：光盘/案例素材/ch03/课堂案例 -百货公司。 案例效果如图3-33所示。

18

19 3.2.2 设置文本属性 Dreamweaver基于层叠样式表（CSS）对网 页进行设置，即事先定义好文本的CSS样式 再应用到文本上。定义的一个CSS样式可以 应用在多处文本上，要改变文本样式属性只 需修改CSS样式属性。

20 3.2.2 设置文本属性 设置文本属性的操作步骤如下。
选择菜单【窗口】|【CSS样式】或按<Shift+F11>快 捷键打开【CSS样式】面板。单击【CSS样式】面板底部 【新建CSS规则】按钮，在【新建CSS规则】对话框中的 【选择器类型】下拉列表中选择“类（可应用于任何 HTML元素）”，在【选择器名称】文本框中输入样式 名称，如.text，单击【确定】按钮。 打开【.text的CSS规则定义】对话框，在【分类】中 选择【类型】，在右侧设置文本的属性。 选中需要设置样式的文本，在【属性】面板中单击 【HTML】按钮 切换到HTML属性，在【类】下拉列表 中选择.text。

21 3.2.3 文本段落 在页面文档中， <p>和</p>标签主要用于定义 一个段落。
如果一段短小的文字段落，需要加大或缩小文字 突出表现效果，那么还可以使用标题。 预定义格式在处理空格和空行较多的文本段落时 更加方便。 1. 应用段落或标题格式 2. 指定预格式

22 3.2.4 插入日期 在网页文档中插入日期的操作步骤如下。 在【文档】窗口中将光标置于要插入日期的位置上。
单击菜单【插入】|【日期】，或在【插入】面板中 选择【常用】选项卡，单击【日期】按钮 。 在【插入日期】对话框中选择需要显示的【星期格 式】、【日期格式】或【时间格式】。 如果勾选【储存时自动更新】，则每次保存该网页 文档时都会自动更新日期，否则不会更新。

23 3.2.5 插入特殊字符 可采用以下两种方法在网页中插入特殊字符。 （1）使用【插入】|【HTML】|【特殊字符】 菜单。
（2）使用【插入】面板插入特殊字符。

24 3.3 项目符号和编号列表 项目列表和编号是放在文本前的点、数字或 其他符号，起到强调作用。合理使用项目列 表和编号列表，可以使网页内容的层次结构 更清晰、更有条理。

25 3.3 项目符号和编号列表 3.3.1课堂案例—咨询网站 3.3.2设置项目列表或编号列表 3.3.3 修改项目符号或编号

26 3.3.1 课堂案例-咨询网站 案例学习目标：学习使用项目列表。 案例知识要点：使用【项目列表】按钮创建列 表、改变列表样式。
素材所在位置：光盘/案例素材/ch03/课堂案 例-咨询网站。 案例效果如图3-58所示。

27

28 3.3.2 设置项目列表或编号列表 1．项目列表 设置项目列表有以下两种方法。 （1）使用【属性面板】设置
（2）使用【格式】|【列表】菜单设置 网页中的项目列表也称为无序列表（unordered lists），添加完项目符号后，在【代码】视图中可以查 看HTML代码： <ul> <li>项目列表一</li> <li>项目列表二</li> <li>项目列表三</li> </ul> 整个项目列表包含在<ul>和</ul>标签之间，列表的 每一项包含在<li>和</li>标签内。

29 3.3.2 设置项目列表或编号列表 2．编号列表 设置编号列表有以下两种方法。 （1）使用【属性面板】设置
（2）使用【格式】|【列表】菜单设置 编号列表也称为有序列表（ordered lists），添加完编号 列表后，在【代码】视图中可以查看HTML代码： <ol> <li>项目列表一</li> <li>项目列表二</li> <li>项目列表三</li> </ol> 整个项目列表包含在<ol>和</ol>标签之间，列表的每一 项包含在<li>和</li>标签内。

30 3.3.3 修改项目符号或编号 修改项目符号或编号的操作步骤如下。 将光标置于设置了项目符号或编号的文本中。
单击【属性】面板中【列表项目】按钮 或选 择菜单【格式】|【列表】|【属性】，打开 【列表属性】对话框。 在【列表类型】下拉列表中选择要修改的列 表类型，在【样式】下拉列表中选择符号或编 号样式，在【开始计数】文本框中设置编号起 始值。

31 3.4 练习案例 3.4.1 练习案例—大学生国际电影节 3.4.2 练习案例—移动银行网站 3.4.3 练习案例—化妆品网站

32 3.4.1练习案例-大学生国际电影节 案例练习目标：练习页面属性设置。 案例操作要点： 1．设置网页标题为 “大学生国际电影节”。
2. 设置页面的文本属性：页面字体为微软雅黑， 文本大小为14px，颜色为#FFF。 3．设置页面的背景属性：背景颜色为#CA162F， 背景图像为bg.jpg，图像重复为no-repeat，图 像对齐为水平居中和垂直顶端，左边距、右边距、 上边距和下边距分别设为0px、0px、240px和 0px。 素材所在位置：光盘/案例素材/ch03/练习案例- 大学生国际电影节，效果如图3-75所示。

33

34 3.4.2练习案例-移动银行网站 案例练习目标：练习文字样式设定。 案例操作要点： 1．在页面相应位置分别输入文字。
2．设置如下样式，并应用到相应文本上。 样式名称为.menu，字体大小12px，颜色#FFF。 样式名称为.t1，字体大小12px、颜色#666；样式名 称为.t2，字体大小14px，字体颜色#000，字体粗细 bold；样式名称为.t3字体大小13px，字体颜色 #CD3E00。 样式名称为.title1，字体大小18px，字体颜色#000； 样式名称为.titile2，字体大小18px，字体颜色 #2C9BC9；样式名称为.title3，字体大小18px，字 体颜色#EF9514。 素材所在位置：光盘/案例素材/ch03/练习案例-移动 银行网站，效果如图3-76所示。

35

36 3.4.3练习案例-化妆品网站 案例练习目标：练习项目列表的使用。 案例操作要点： 1．将表格中的文字设置为项目列表。
2．在标签样式<li>中，文本大小为14px， 颜色为#727272，行高为150%。 素材所在位置：光盘/案例素材/ch03/练习案 例-化妆品网站，效果如图3-77所示。

37