Dreaweaver网页制作基础教程项目二制作学校概况.pptVIP

王焕杰 核心技术 了解网页中的文本样式 应用图片和多媒体丰富页面内容 项目背景 某公司招聘网页设计师，需要经过技能考试竞争上岗，要求利用Dreamweaver软件完成“学校概况”的制作。 “学校概况”网页要求图文并茂，各位应聘人员在规定的时间内完成本项目制作，择优录用。 任务一 网页中的文本 任务描述 为了让学校的校园网能够有一个美观的界面，需要对网页中的文字进行格式规划，并根据需要为网页中添加恰当的图片，以使页面美观、规范，内容充实。 任务实施 步骤1：设置导航文字 （1）将鼠标光标放置在导航栏的位置，直接在页面中输入导航文字，如图2.1.2所示。 步骤2：设置栏目导航 （1）将鼠标光标放置在栏目导航标题的位置，输入文字“栏目导航”，在属性面板中设置字体大小为14px，颜色为黑色，水平对齐方式为“居中对齐”，单击按钮，设置为粗体，如图2.1.4所示。 步骤3：设置“学校简介”正文 （1）在正文的左上方输入“本站首页”→“学校简介”，在属性面板设置其大小为12px，颜色为#006600，粗体，如图2.1.7所示。 步骤4：设置脚注文字 步骤5：添加无序列表 最后网页浏览效果如图2.1.18所示。 知识拓展 HTML中的列表 任务总结 主要让大家学习文本插入及属性设置，其中包括普通文本与特殊符号的插入、文本的基本属性设置、项目列表的应用，这些基本操作都是以后网站制作中经常应用的。 兴趣是最好的老师! 电话 邮箱:cnsyjsj@163.com 项目二 制作学校概况 任务目标 ? 任务一：网页中的文本 ? 任务二：利用图文混排制作漂亮网页 能力目标 文本的基本操作 插入特殊文本对象 项目符号和项目列表 插入与设置图像 项目分析 本项目包含了文本的插入及属性设置，包括文本的基本设置、特殊文本、项目列表、图片的插入及属性设置、Flash多媒体文件的插入。 文本的基本设置：网页中常用的字体为宋体，字体大小为12px。导航的字体大小及颜色可根据网站大小进行相应调试。 特殊文本：在网页中有一些特殊符号，如版权符号?、不换行空格等是无法直接通过键盘输入的，所以需要通过特殊文本来实现。 图片的插入及属性设置：导入素材中的图片文件，设置其对齐方式来调节位置。 任务准备 在Dreamweaver中打开网页“项目2/JianJie2.html”，如图2.1.1所示。 图2.1.1 页面布局效果 图2.1.2 页面顶部 （2）选中导航中的文字，在属性面板中设置字体大小为12px，颜色为#000000，水平对齐方式为“居中对齐”，如图2.1.3所示。 图2.1.3 文字效果 图2.1.4 栏目导航 （2）将鼠标光标放置在导航列表位置，输入导航列表文字，如图2.1.5所示。 （3）项目列表属性设置完成后，效果如图2.1.6所示。 图2.1.5 列表文字 图2.1.6 列表效果 图2.1.7 文字效果 （2）打开“新闻简介.txt”文件，选择所有文字，单击鼠标右键，从弹出的快捷菜单中选择“复制”选项，复制所有文字，回到Dreamweaver中，将鼠标光标放置在正文内容的位置，单击鼠标右键，从弹出的快捷菜单中选择“粘贴”选项，粘贴所有文字到页面中，如图2.1.8所示。 图2.1.8 设计视图 （3）在“学校简介”后单击“Enter”键，把“学校简介”划分为单独的段落，选择“学校简介”，在属性面板中设置居中对齐，选择菜单“插入记录”→“HTML”→“文本对象”→“h1”选项，设置格式为h1，效果如图2.1.9所示。 图2.1.9 标题效果 同样，设置“学校简报”、“创新办学模式”、“联合办学”、“展望未来”为h2，居中对齐。 （4）将鼠标光标放置在段落的起始位置，选择菜单“插入记录”→“HTML”→“特殊符号”→“不换行空格(k)”选项，插入4个空格，设置段落首行缩进2个字符，效果如图2.1.10所示。 图2.1.10 设置首行缩进 （1）在脚注部分输入脚注信息，如图2.1.11所示。 图2.1.11 脚注信息 （2）为脚注文本添加版权符号、空格 选择菜单“插入记录”→ “HTML”→ “特殊符号”→“版权?、空格”选项，效果如图2.1.12所示。 图2.1.12 设置版权信息 （3）选择脚注文字内容，在其属性面板中设置字体大小为12px，颜色为#000000，水平方向为居中对齐，垂直方向为顶端对齐。选择“育才网络”，单击属性面板中的按钮，设置为粗体，最终效果如图2.1.13所示。 图2.1.13 文字效果 将光标定位在“学校简介”的下一行。输入“学校简报”，在后面单击“Enter”键，划分段落，如图2.1.14所示。 图2.1.14 添加文