发布时间 : 星期三 文章Dreamweaver CS5网页设计案例教程02 - 图文更新完毕开始阅读190c8d3dc850ad02df804121
第2章 文本与文档 2.4 综合演练——化妆品网页 2.4.1 【案例分析】
CHAPTER 2 化妆品的主要受众群体是女性，所以本例要求化妆品网站要符合女性特点，在设计风格上要表现出化妆品的功能与效果，吸引消费主体。
2.4.2 【设计理念】
在网页设计制作过程中，背景采用了紫色渐变搭配，使整个面页看起来干净柔美。左侧蓝色的化妆品图片，在紫色的背景映衬下非常显眼，使产品在画面中更加突出，右侧的产品介绍简单明确，画面设计清爽整洁，下方的导航设计方便使浏览者查找需要的产品。整体设计风格符合女性的审美和需求，优雅并且时尚。
2.4.3 【知识要点】
使用“页面属性”命令，设置页面的边距、网页标题效果；使用“属性”面板，改变文字的大小；使用“加粗”按钮，将文字加粗；使用“编辑字体列表”命令，改变文字的字体；使用“颜色”按钮，改变文字的颜色；使用“其他字符”命令，插入特殊符号效果。（最终效果参看光盘中的“Ch02 > 效果 > 化妆品网页 > index.html”，如图2-1所示。）
图2-1
1．设置页面属性
1 选择“文件 > 打开”命令，在弹出的“打开”对话框中选择“Ch02 > 素材> 化妆品 选择“修改 > 页面属性”命令，弹出“页面属性”对话框，在“页面属性”对话框左
网页 > index.html”文件，单击“打开”按钮打开文件，如图2-2所示。
2 侧“分类”选项列表中选择“外观”选项，将“左边距”、“右边距”、“上边距”、“下边距”选项均设为0，如图2-3所示。
9
边做边学——Dreamweaver CS5网页设计案例教程 中等职业教育数字艺术类规划教材
图2-2 图2-3
10
3 在“分类”选项列表中选择“标题／编码”选项，在“标题”选项文本框中输入“化妆
品网页”，“编码”选项下拉列表中选择“简体中文（GB2312）”，如图2-4所示，单击“确定”按钮，效果如图2-5所示。
图2-4 图2-5
2．插入特殊字符并输入文字
1 将光标置入到如图2-6所示的单元格中。单击“插入”面板“文本”选项卡中的“其他
，在弹出的“插入其他字符”对话框中单击需要的字符，如图2-7所示，单
字符”按钮
击“确定”按钮，效果如图2-8所示。
2 选中插入的字符，在“属性”面板中，将“大小”选项的设为16，“文本颜色”选项设
为白色，效果如图2-9所示。
图2-6 图2-7
第2章 文本与文档 CHAPTER 2
图2-8 图2-9
3 选择“窗口 > CSS样式”命令，弹出“CSS样式”面板，单击“新建CSS规则”按钮
，在弹出的“新建CSS规则”对话框中进行设置，如图2-10所示，单击两次“确定”按钮，创建样式。
图2-10
4 选中如图2-11所示的文字。在“属性”面板“目标规则”选项的下拉列表中选择
“STYLE2”，应用样式，将“文本颜色”选项设为白色，效果如图2-12所示。
图2-11 图2-12
3．设置文字的字体和颜色
1 选择“窗口 > CSS样式”命令，弹出“CSS样式”面板，单击“新建CSS规则”按钮
，在弹出的“新建CSS规则”对话框中进行设置，如图2-13所示，单击两次“确定”按钮，创建样式。
11
边做边学——Dreamweaver CS5网页设计案例教程 图2-13
中等职业教育数字艺术类规划教材 2 选中文字“首页”，如图2-14所示，在“属性”面板“目标规则”选项的下拉列表中选
择“STYLE3”，应用样式单击“字体”选项右侧的下拉按钮，在弹出的列表中选择“编辑字体列表”选项，如图2-15所示。
12
图2-14 图2-15
3
弹出“编辑字体列表”对话框，在“可用字体”选项框中选择需要的字体，如图2-16
，在“选择的字体”选项框中添加所选字体，如图2-17所示，
所示，单击“注册”按钮单击“确定”按钮。
图2-16 图2-17
4
单击“属性”面板“字体”选项右侧的下拉按钮，在弹出的列表中选择需要的字体，并
，在弹出的颜色面板中再单
，如图2-20
，弹出“颜色”对话框，在右侧频谱中单击需要的颜色，并在明度调
将“大小”选项设为14，如图2-18所示，单击“颜色”按钮击“频谱图标”按钮
整条中设定亮度，如图2-19所示，单击“确定”按钮。并单击“加粗”按钮所示，文字效果如图2-21所示。
图2-18 图2-19