《项目1班级风采网站制作过程.ppt》由会员分享，可在线阅读，更多相关《项目1班级风采网站制作过程.ppt（120页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、项目项目1 班级风采网站制作班级风采网站制作本项目内容提要：本项目内容提要：本项目内容提要：本项目内容提要：本项目从清晰明确的任务训练入手，讲授了本项目从清晰明确的任务训练入手，讲授了“班级风采班级风采”小型网站小型网站的规划设计，应用中文的规划设计，应用中文Dreamweaver CS5Dreamweaver CS5、中文、中文Fireworks CS5Fireworks CS5建立网站并建立网站并制作网页的全过程，并介绍了网站规划设计及应用上述软件进行网页制制作网页的全过程，并介绍了网站规划设计及应用上述软件进行网页制作的相关知识。作的相关知识。本项目能力目标：本项目能力目标：本项目能力目
2、标：本项目能力目标：1 1 具备小型网站规划设计的基本能力。具备小型网站规划设计的基本能力。2 2 掌握中文掌握中文Dreamweaver CS5Dreamweaver CS5、中文、中文Fireworks CS5Fireworks CS5最常用的基本操作，最常用的基本操作，初步具备小型网站创建与管理及网页制作的基本能力。初步具备小型网站创建与管理及网页制作的基本能力。本项目知识目标：本项目知识目标：本项目知识目标：本项目知识目标：1 1 熟悉网站规划设计的基本知识。熟悉网站规划设计的基本知识。2 2 掌握中文掌握中文Dreamweaver CS5Dreamweaver CS5进行网页设计制作
3、的相关知识。进行网页设计制作的相关知识。1.1 班级风采网站制作过程班级风采网站制作过程1.1 班级风采网站制作过程班级风采网站制作过程班级风采主页效果如图所示，下面详述其制作过程班级风采主页效果如图所示，下面详述其制作过程 任务1-1 设计规划班级风采网站网页制作之前要进行规划，内容包括：设置主题栏目，设计网页结构，确定网页制作之前要进行规划，内容包括：设置主题栏目，设计网页结构，确定网站风格等等。网站风格等等。设置主题栏目：本班级风采网站的主题栏目包括：班级档案、组织机构、荣设置主题栏目：本班级风采网站的主题栏目包括：班级档案、组织机构、荣誉殿堂、风采图片、文体天地、学习园地、支部生活。誉
4、殿堂、风采图片、文体天地、学习园地、支部生活。设计网页结构：网站主页规划的结构下页图所示。网站的主页可采用简单明设计网页结构：网站主页规划的结构下页图所示。网站的主页可采用简单明了的板块结构：采用上中下结构。上边为标题区，用于存放网站标题等内容。中了的板块结构：采用上中下结构。上边为标题区，用于存放网站标题等内容。中间为主页主体区，主体区又分为左右两部分，左边窄，用坚式结构放置导航栏。间为主页主体区，主体区又分为左右两部分，左边窄，用坚式结构放置导航栏。右边宽，存放班级简介等内容。下边为版权区。用于存放版权声明信息。右边宽，存放班级简介等内容。下边为版权区。用于存放版权声明信息。设计网站风格：
5、由于是班级网站，可选简明清新型。设计网站风格：由于是班级网站，可选简明清新型。设计网页尽寸：选择设计网页尽寸：选择10247681024768规格规格,实际尺寸为：实际尺寸为：980*980*，(*(*代表代表768768的倍数的倍数)。宽度最好限定在一个幅面内，长度一般是不超过。宽度最好限定在一个幅面内，长度一般是不超过3 3个版面。个版面。任务1-1 设计规划班级风采网站标题区标题区导航区导航区正文区正文区版权区版权区班级风采站点规划布置图班级风采站点规划布置图任务任务1-2 创建班级风采网站站点创建班级风采网站站点【子任务子任务子任务子任务1-2-11-2-1】设置本地站点文件夹设置本地
6、站点文件夹设置本地站点文件夹设置本地站点文件夹本地站点文件夹用以确定存放所有站点文件的存储位置。本地站点文件夹用以确定存放所有站点文件的存储位置。设置本地站点文件夹的操作步骤如下：设置本地站点文件夹的操作步骤如下：（1 1）在桌面双击）在桌面双击“我的电脑我的电脑”图标；图标；（2 2）在）在“我的电脑我的电脑”窗口中双击打开用于存储站点的硬窗口中双击打开用于存储站点的硬盘驱动器（例如为盘驱动器（例如为E E盘）；盘）；（3 3）使用）使用【文件文件】新建新建文件夹命令，在硬盘中建立文件夹命令，在硬盘中建立一个新文件夹。一个新文件夹。（4 4）在新文件夹上单击右键，选择）在新文件夹上单击右键，
7、选择“重命名重命名”选项，在选项，在英文输入法状态下输入站点名称。例如输入英文输入法状态下输入站点名称。例如输入“CLASS”CLASS”，然，然后在空白处单击确定。（见操作演示）后在空白处单击确定。（见操作演示）任务任务1-2 创建班级风采网站站点创建班级风采网站站点【子任务子任务子任务子任务1-2-21-2-2】建立一个名称为建立一个名称为建立一个名称为建立一个名称为“班级班级班级班级”的站点的站点的站点的站点站点是对网站进行组织、维护和管理的功能集合。通过站点是对网站进行组织、维护和管理的功能集合。通过站点管理，用户可以根据自己的需要设计出自己网站结构。站点管理，用户可以根据自己的需要设
8、计出自己网站结构。操作步骤如下：操作步骤如下：（1 1）启动）启动Dreamweaver CS5Dreamweaver CS5（2 2）执行）执行“站点站点”菜单中的菜单中的“新建站点新建站点”命令，弹出命令，弹出“站点设置对象站点设置对象”对话框。对话框。（3 3）在菜单中选择）在菜单中选择“站点站点”选项，选项，在在“站点名称站点名称”文文本框中输入：本框中输入：“班级班级”，在，在“本地站点文件夹本地站点文件夹”中输入中输入E:CLASSE:CLASS（或单击浏览器按钮，选择（或单击浏览器按钮，选择“E:CLASS”E:CLASS”）作为本）作为本地根文件夹。地根文件夹。“站点设置对象站
9、点设置对象”对话框。（见操作演示）对话框。（见操作演示）（4 4）单击）单击【保存保存】按钮，完成按钮，完成“班级班级”站点创建。站点创建。任务任务1-2 创建班级风采网站站点创建班级风采网站站点【子任务子任务子任务子任务1-2-31-2-3】在在在在“班级班级班级班级”站点中建立站点子文件夹站点中建立站点子文件夹站点中建立站点子文件夹站点中建立站点子文件夹在已建好的网站中，一般还需要建立一些子文件夹，用在已建好的网站中，一般还需要建立一些子文件夹，用于归类存入网站中的图像、网页、动画、模板等文件。于归类存入网站中的图像、网页、动画、模板等文件。操作步骤如下操作步骤如下 ：（1 1）在文件面板
10、中选择）在文件面板中选择“站点站点-班级（班级（E:classE:class）”文件文件夹，单击鼠标右键，在快捷菜单中选择夹，单击鼠标右键，在快捷菜单中选择“新建文件夹新建文件夹”选项。选项。（见操作演示）（见操作演示）（2 2）单击）单击untitleduntitled文件夹的名称部分，输入文件夹的名称部分，输入imageimage，将文，将文件夹改名为件夹改名为imageimage，此文件夹用于存放图像文件；，此文件夹用于存放图像文件；（3 3）参照步骤（）参照步骤（1 1）和（）和（2 2），依次建立文件夹），依次建立文件夹“html”(html”(用于存放非首页的其他网页用于存放非首页
11、的其他网页)、“music”music”（用于存（用于存放音乐文件），放音乐文件），“swfswf”（存放（存放FlashFlash动画）。（操作演示）动画）。（操作演示）（结果如图（结果如图“建立站点子文件夹结果”所示）所示）任务任务1-2 创建班级风采网站站点创建班级风采网站站点建立站点子文件夹结果 任务任务1-2 创建班级风采网站站点创建班级风采网站站点【子任务子任务子任务子任务1-2-41-2-4】在在在在“班级班级班级班级”站点中建立网页文件站点中建立网页文件站点中建立网页文件站点中建立网页文件建立网页文件的方法为：先选中要放置网页文件的文件夹，单击鼠建立网页文件的方法为：先选中要放
12、置网页文件的文件夹，单击鼠标右键，在弹出的快捷菜单中选择标右键，在弹出的快捷菜单中选择“新建文件新建文件”命令。或执行命令。或执行“文件文件”“”“新建文件新建文件”菜单命令，在弹出的菜单命令，在弹出的“新建文档新建文档”对话框中选择对话框中选择“基基本页本页”或或“HTML”HTML”，单击，单击【创建创建】按钮。编辑完成网页内容后，以适当按钮。编辑完成网页内容后，以适当的文件名称保存到相应站点文件夹下（如保存到的文件名称保存到相应站点文件夹下（如保存到E:classhtmlE:classhtml下面）。下面）。在操作时要注意以下问题：在操作时要注意以下问题：（1 1）主页文件必须放在本地站
13、点根目录下，例如，本例应将首页文）主页文件必须放在本地站点根目录下，例如，本例应将首页文件放在件放在“E:class”E:class”文件夹下。文件夹下。（2 2）网页文件名、文件夹名和网站内的其他文件名最好全部使用英）网页文件名、文件夹名和网站内的其他文件名最好全部使用英文小写形式，因为文小写形式，因为DreameaverDreameaver不识别中文文件名，而且有些网站服务器不识别中文文件名，而且有些网站服务器要区分字母大小写。要区分字母大小写。任务任务1-2 创建班级风采网站站点创建班级风采网站站点【子任务子任务子任务子任务1-2-41-2-4】在在在在“班级班级班级班级”站点中建立网页
14、文件站点中建立网页文件站点中建立网页文件站点中建立网页文件操作步骤如下：操作步骤如下：打开站点窗口，在文件面板上单击打开站点窗口，在文件面板上单击“展开展开”按钮即可打开按钮即可打开“站点站点”窗口。窗口。选中选中“站点站点-班级（班级（E:classE:class）”文件夹，单击鼠标右键，在弹出的文件夹，单击鼠标右键，在弹出的快捷菜单中选择快捷菜单中选择“新建文件新建文件”命令。命令。单击新文件名的名称部分，将单击新文件名的名称部分，将untitled.htmuntitled.htm改名为改名为index.htmindex.htm(作为网站作为网站的首页文件的首页文件)；选中选中“html”
15、html”文件夹，单击鼠标右键，在弹出的快捷菜单中选择文件夹，单击鼠标右键，在弹出的快捷菜单中选择“新建文件新建文件”命令，建立网页命令，建立网页dangan.htmdangan.htm(班级档案班级档案)；参照步骤，分别建立网页参照步骤，分别建立网页xuexi.htmxuexi.htm（学习园地）、（学习园地）、wenti.htmwenti.htm（文体（文体天地）、天地）、jigou.htmjigou.htm（组织机构）、（组织机构）、zhibu.htmzhibu.htm（支部生活）、（支部生活）、tupian.htmtupian.htm（风彩图片）、（风彩图片）、rongyu.htmro
16、ngyu.htm（荣誉殿堂）。（荣誉殿堂）。（见操作演示）。（结果如（见操作演示）。（结果如“建立网站新文件结果”图所示）图所示）任务任务1-2 创建班级风采网站站点创建班级风采网站站点建立网站新文件结果 任务任务1-3 制作并添加网页标题栏制作并添加网页标题栏【子任务子任务子任务子任务1-3-11-3-1】制作网页标题图像制作网页标题图像制作网页标题图像制作网页标题图像一个网页通常有标题部分，来访者可以通过标题了解网站的名称及网站类型。标题部分可以是文本，一个网页通常有标题部分，来访者可以通过标题了解网站的名称及网站类型。标题部分可以是文本，也可以是图像。如果使用图像标题，我们可以用也可以是
17、图像。如果使用图像标题，我们可以用Fireworks CS5Fireworks CS5自己制作。自己制作。操作步骤如下：操作步骤如下：（1 1）启动）启动Fireworks CS5Fireworks CS5，选择画布宽度为，选择画布宽度为980980，高度为，高度为8080，画布颜色自定义为黑色。单击，画布颜色自定义为黑色。单击【确定确定】按钮，进入到按钮，进入到FireworkFirework主界面。（见操作演示）主界面。（见操作演示）（2 2）在画面中间用）在画面中间用“文本文本”工具输入工具输入“班级风采班级风采”，在属性面板中设置：字体大小为，在属性面板中设置：字体大小为8080，颜色
18、为，颜色为淡兰色（淡兰色（#00FFFF#00FFFF），字体为隶书。（见操作演示）。），字体为隶书。（见操作演示）。（3 3）在画布左边用）在画布左边用“文本文本”工具输入工具输入“计算机多媒体计算机多媒体”，在属性面板中设置：字体大小为，在属性面板中设置：字体大小为2222，颜，颜色为白色，字体为黑体。色为白色，字体为黑体。（4 4）在画布右边用）在画布右边用“文本文本”工具输入工具输入“Computer Multimedia”Computer Multimedia”，在属性面板中设置：字体大小为，在属性面板中设置：字体大小为2222，颜色为白色，字体为黑体。，颜色为白色，字体为黑体。（5
19、 5）单击保存按钮，给出保存位置（如）单击保存按钮，给出保存位置（如E:classimageE:classimage）及文件名（扩展名为）及文件名（扩展名为.pngpng），以便以后修改。），以便以后修改。（6 6）执行）执行“文件文件”菜单中的菜单中的“图像预览图像预览”命令，设置文件格式为命令，设置文件格式为GIFGIF，单击，单击“导出导出”按钮。（见操按钮。（见操作演示）作演示）（7 7）在）在“导出导出”对话框中选择保存在：对话框中选择保存在：e:classimagee:classimage，文件名为：，文件名为：bjbtbjbt，单击，单击“保存保存”按钮。（见按钮。（见操作演示）
20、操作演示）标题图像制作效果图如下：标题图像制作效果图如下：任务任务1-3 制作并添加网页标题栏制作并添加网页标题栏【子任务子任务子任务子任务1-3-21-3-2】添加主页标题图像添加主页标题图像添加主页标题图像添加主页标题图像“班级风采班级风采班级风采班级风采”操作步骤如下：操作步骤如下：（1 1）在）在DreamweaverDreamweaver应用程序窗口中执行应用程序窗口中执行“站点站点”“”“管理站点管理站点”菜菜单命令，在弹出的对话框中选中需要打开的站点名称。例如：班级。单单命令，在弹出的对话框中选中需要打开的站点名称。例如：班级。单击击【完成完成】按钮，按钮，“班级班级”站点显示在
21、文件面板中。站点显示在文件面板中。（2 2）双击打开需要制作的网页文件。例如，双击打开主页文件）双击打开需要制作的网页文件。例如，双击打开主页文件index.htmindex.htm。首页文件打开，此时是空白页。首页文件打开，此时是空白页。（3 3）执行）执行“插入插入”菜单中的菜单中的“图像图像”命令，或单击命令，或单击“常用常用”工具栏工具栏中的中的【图像图像】按钮，弹出按钮，弹出“选择图像源文件选择图像源文件”对话框（见操作演示）。对话框（见操作演示）。如果如果“常用常用”工具栏未打开，可按快捷键工具栏未打开，可按快捷键【CtrlCtrl】+【F2F2】打开。打开。（4 4）在指定文件夹
22、中找到标题图像文件，选择标题图像文件后，对）在指定文件夹中找到标题图像文件，选择标题图像文件后，对话框右侧将显示该图像的预览图，单击话框右侧将显示该图像的预览图，单击【确定确定】按钮，插入结束。按钮，插入结束。任务任务1-3 制作并添加网页标题栏制作并添加网页标题栏【子任务子任务子任务子任务1-3-31-3-3】添加水平分割线添加水平分割线添加水平分割线添加水平分割线为了将标题区与正文内容分隔开，通常在标题为了将标题区与正文内容分隔开，通常在标题下面插入一条水平分隔线。下面插入一条水平分隔线。操作步骤如下：操作步骤如下：（1 1）将光标移到需要插入分隔线的地方（如标）将光标移到需要插入分隔线的
23、地方（如标题图像下方）。题图像下方）。（2 2）执行）执行“插入插入”菜单菜单“HTML”HTML”下下“水平线水平线”命令。命令。（3 3）标题图像的下面出现一条水平分隔线，并）标题图像的下面出现一条水平分隔线，并处于选中状态，在属性面板中设置其属性，如宽度、处于选中状态，在属性面板中设置其属性，如宽度、高度、对齐方式、阴影等。这里设置宽度为高度、对齐方式、阴影等。这里设置宽度为980980，阴，阴影。（见操作演示）影。（见操作演示）任务任务1-3 制作并添加网页标题栏制作并添加网页标题栏图4-14 添加网页标题图片及水平线后效果图任务任务1-4 设置导航栏设置导航栏导航栏的作用是与其他网页
24、链接，从而轻松地进入下一个页面，导导航栏的作用是与其他网页链接，从而轻松地进入下一个页面，导航既可以使用文字，也可以使用图像。这里我们使用文字制作导航，并航既可以使用文字，也可以使用图像。这里我们使用文字制作导航，并且使用表格布局导航栏。且使用表格布局导航栏。【子任务子任务子任务子任务1-4-11-4-1】插入导航表格插入导航表格插入导航表格插入导航表格操作步骤如下：操作步骤如下：（1 1）在水平分隔线下单击鼠标，出现光标插入点。）在水平分隔线下单击鼠标，出现光标插入点。（2 2）执行）执行“插入插入”菜单中菜单中“表格表格”命令，或在插入面板上单击命令，或在插入面板上单击“常常用用”工具栏中
25、的工具栏中的【表格表格】按钮，弹出表格对话框，设置按钮，弹出表格对话框，设置“行数行数”为为7 7，“列数列数”为为1 1，“宽度宽度”为为2525，单位为，单位为“百分比百分比”，（见操作演示），（见操作演示）（3 3）单击）单击【确定确定】按钮，表格插入。此时表格处于选中状态，拖动按钮，表格插入。此时表格处于选中状态，拖动控制点（黑点）可以调整表格的大小（见操作演示）控制点（黑点）可以调整表格的大小（见操作演示）（4 4）在属性面板中设置表格的背景颜色为）在属性面板中设置表格的背景颜色为#CCFFCC#CCFFCC。任务任务1-4 设置导航栏设置导航栏【子任务子任务子任务子任务1-4-21
26、-4-2】添加导航文本添加导航文本添加导航文本添加导航文本（1 1）在表格的第一个单元格里单击鼠标，出现光标插入点，通过键盘输入文字）在表格的第一个单元格里单击鼠标，出现光标插入点，通过键盘输入文字“班级档案班级档案”。（2 2）选中文字）选中文字“班级档案班级档案”，在属性面板中单击，在属性面板中单击CSSCSS按钮，出现按钮，出现CSSCSS属性面板。属性面板。（见操作演示）（见操作演示）（3 3）单击字体大小中的下拉按钮，第一次使用字体设置会出现）单击字体大小中的下拉按钮，第一次使用字体设置会出现“新建样式规则新建样式规则”对话框，对话框，“输入选择器名称输入选择器名称”为为font1f
27、ont1，“选择器类型选择器类型”为为“复合选择器复合选择器（基于选择内容）（基于选择内容）”，“选择定义规则的位置选择定义规则的位置”为为“仅限该文档仅限该文档”，（见操，（见操作演示）作演示）（4 4）单击）单击“确定确定”按钮，在属性面板中设置其字体为默认、大小为按钮，在属性面板中设置其字体为默认、大小为1818、对齐方、对齐方式式为居中对齐。（见操作演示）。为居中对齐。（见操作演示）。（5 5）参照步骤（）参照步骤（2 2）（）（4 4），输入并设置其他导航栏：），输入并设置其他导航栏：“组织机构组织机构”、“荣誉荣誉殿堂殿堂”、“风彩图片风彩图片”、“文体天地文体天地”、“学习园地学
28、习园地”、“支部生活支部生活”。如如图所示。图所示。任务任务1-4 设置导航栏设置导航栏设置导航栏效果图任务任务1-5 设置网页主体内容设置网页主体内容为使网页内容设置更灵活，可以借助为使网页内容设置更灵活，可以借助“层层”来定位文字区来定位文字区域。域。【子任务子任务子任务子任务1-5-11-5-1】设置网页主体文字区域并添加文字设置网页主体文字区域并添加文字设置网页主体文字区域并添加文字设置网页主体文字区域并添加文字操作步骤如下：操作步骤如下：（1 1）在）在“插入插入”面板的面板的“布局布局”工具栏上，单击工具栏上，单击【绘制绘制AP DivAP Div】按钮。按钮。（2 2）在页面需要
29、放文字的地方，按住鼠标左键拖动出一个）在页面需要放文字的地方，按住鼠标左键拖动出一个矩形区域（见操作演示）。矩形区域（见操作演示）。（3 3）此时层处于选中状态，通过拖动控制点可以调整层的）此时层处于选中状态，通过拖动控制点可以调整层的大小。将鼠标放在层的边缘线上，鼠标呈大小。将鼠标放在层的边缘线上，鼠标呈“十字十字”箭头时，箭头时，拖动鼠标可以移动层的位置。拖动鼠标可以移动层的位置。（4 4）应用层属性面板可设置层属性，如背景颜色为）应用层属性面板可设置层属性，如背景颜色为#CCFFCC#CCFFCC等（见操作演示）等（见操作演示）。任务任务1-5 设置网页主体内容设置网页主体内容【子任务子
30、任务子任务子任务1-5-21-5-2】添加网页主体文字添加网页主体文字添加网页主体文字添加网页主体文字（1 1）在层内单击鼠标，出现插入点后，即可输入文字内容）在层内单击鼠标，出现插入点后，即可输入文字内容“我我们的班级，计算机多媒体们的班级，计算机多媒体班，班，4040颗年轻的心。我们来自五湖四颗年轻的心。我们来自五湖四海，操着不同的口音，怀着青春的梦想！共同撑起同一片蓝天，海，操着不同的口音，怀着青春的梦想！共同撑起同一片蓝天，一起遨游知识的海洋。让我们扬帆出海，胜利起航。我们是快乐一起遨游知识的海洋。让我们扬帆出海，胜利起航。我们是快乐的一家人，我们是自信的一家人！。的一家人，我们是自信
31、的一家人！。”（2 2）编辑文字，选中文本，在）编辑文字，选中文本，在CSSCSS属性面板的目标规则中选择属性面板的目标规则中选择新建规则，在新建新建规则，在新建CSSCSS样式规则对话框中，选择器名称设为样式规则对话框中，选择器名称设为line1line1，单击确定后出现单击确定后出现“line1line1的的CSSCSS规则定义规则定义”对话框，设置字体为宋对话框，设置字体为宋体、字号为体、字号为2424、行距为、行距为200%200%。（见操作演示）。（见操作演示）。（3 3）单击）单击“确定确定”按钮后，文本内容将按按钮后，文本内容将按line1line1定义呈现。（见定义呈现。（见设
32、置网页主体内容之后效果图）。效果图）。任务任务1-5 设置网页主体内容设置网页主体内容设置网页主体内容之后的效果任务任务1-6 制作版权区制作版权区本网站虽然不大，但也应体现完整性，所以也应设置版权本网站虽然不大，但也应体现完整性，所以也应设置版权区。区。【子任务子任务子任务子任务1-6-11-6-1】制作版权区制作版权区制作版权区制作版权区操作步骤如下：操作步骤如下：（1 1）将光标置于末行起始点，执行）将光标置于末行起始点，执行“插入插入”菜单菜单“HTML”HTML”下下“水平线水平线”命令。出现一条水平分隔线，并处于命令。出现一条水平分隔线，并处于选中状态，在属性面板中设置其属性，如宽
33、度、高度、对齐选中状态，在属性面板中设置其属性，如宽度、高度、对齐方式、阴影等。这里设置宽度为方式、阴影等。这里设置宽度为980980，阴影。（操作演示），阴影。（操作演示）（2 2）在下一行输入）在下一行输入“Copyright2012-2016 Copyright2012-2016 班级风采工作班级风采工作”（3 3）选中输入的版权内容文本，设置对齐方式为居中对）选中输入的版权内容文本，设置对齐方式为居中对齐（首次使用对齐方式应用新建齐（首次使用对齐方式应用新建CSSCSS规则，如选择器名称为规则，如选择器名称为center1center1。操作步骤与前述新建。操作步骤与前述新建CSSCS
34、S规则类似），字号为规则类似），字号为1616。设。设置效果如图置效果如图“版权区的设置版权区的设置”所示。（操作演示）所示。（操作演示）任务任务1-6 制作版权区制作版权区版权区的设置版权区的设置任务任务1-7 设置页面属性设置页面属性网页页面属性主要包括页面标题、网页背景图像与颜色、文本与超级链接颜色、页边距等。网页标题可以标识和命名文档；网页背景图像与颜色可以设置文档的外观；文本颜色可以帮助浏览者区分普通文本和具有超级链接的文本，并且可以识别已经访问过和尚未访问过的超级链接。任务任务1-7 设置页面属性设置页面属性【子任务子任务子任务子任务1-7-11-7-1】添加网页文档标题添加网页文
35、档标题添加网页文档标题添加网页文档标题“班级风采班级风采班级风采班级风采”网页标题非常重要，它可以帮助浏览者在浏览网页时了解正在访问的内容，网页标题非常重要，它可以帮助浏览者在浏览网页时了解正在访问的内容，以及在历史记录和书签列表中标识页面。以及在历史记录和书签列表中标识页面。如果页面没有标题，则网页将作为如果页面没有标题，则网页将作为“无标题文档无标题文档”在文档窗口、浏览器窗口、在文档窗口、浏览器窗口、历史记录和书签列表中出现（见操作演示）历史记录和书签列表中出现（见操作演示）在在DreamweaverDreamweaver中有多种方法为网页添加文档标题。中有多种方法为网页添加文档标题。操
36、作步骤如下：操作步骤如下：方法方法1 1：直接在：直接在DreamweaverDreamweaver文档工具栏中的文档工具栏中的“标题标题”框中输入新标题。例如，框中输入新标题。例如，输入输入“班级风采班级风采”。然后按。然后按【EnterEnter】键确定。如果工具栏没有显示，可通过键确定。如果工具栏没有显示，可通过“查查看看”菜单打开工具栏。菜单打开工具栏。方法方法2 2：单击文档工具栏上的：单击文档工具栏上的【代码代码】按钮，然后在按钮，然后在和和标签之标签之间输入新标题，（见操作演示）。间输入新标题，（见操作演示）。方法方法3 3：执行：执行“修改修改”“”“页面属性页面属性”菜单命令
37、，或在网页空白处单击鼠标菜单命令，或在网页空白处单击鼠标右键，选择右键，选择“页面属性页面属性”选项，然后在选项，然后在“页面属性页面属性”对话框的对话框的“分类分类”中选中中选中“标题标题/编码编码”，在，在“标题标题”框中输入新标题，单击框中输入新标题，单击【确定确定】按钮。（见操作演示）。按钮。（见操作演示）。任务任务1-7 设置页面属性设置页面属性【子任务子任务子任务子任务1-7-21-7-2】设置网页背景图像和颜色设置网页背景图像和颜色设置网页背景图像和颜色设置网页背景图像和颜色使用使用“页面属性页面属性”对话框可以设置网页的背景图像或背景颜色。如果同时设置了对话框可以设置网页的背景
38、图像或背景颜色。如果同时设置了背景图像和背景颜色，则背景颜色不能显现。如果背景图像有透明像素，则背景颜色背景图像和背景颜色，则背景颜色不能显现。如果背景图像有透明像素，则背景颜色才能显示。才能显示。操作步骤如下：操作步骤如下：（1 1）打开）打开“页面属性页面属性”对话框，在对话框，在“分类分类”中选中中选中“外观（外观（CSSCSS）”选项，单击选项，单击“背景图像背景图像”文本框右侧的文本框右侧的【浏览浏览】按钮，弹出按钮，弹出“选择图像源文件选择图像源文件”对话框，在对话框，在“选选择图像源文件择图像源文件”对话框中选择一个图像文件（例如对话框中选择一个图像文件（例如image/bj1.
39、gifimage/bj1.gif），单击），单击【确定确定】按按钮；或者在钮；或者在“背景图像背景图像”文本框中直接输入图像文件名与路径，（见操作演示）。文本框中直接输入图像文件名与路径，（见操作演示）。（2 2）单击）单击“页面属性页面属性”对话框中的对话框中的【应用应用】按钮，背景图像将应用到网页中。按钮，背景图像将应用到网页中。（3 3）在）在“页面属性页面属性”对话框中单击对话框中单击“背景颜色背景颜色”右侧的按钮，鼠标变为滴管形右侧的按钮，鼠标变为滴管形状，并弹出一个颜色面板，可以使用取色滴管在颜色面板中选取一种颜色。也可以直状，并弹出一个颜色面板，可以使用取色滴管在颜色面板中选取一
40、种颜色。也可以直接输入颜色值，如接输入颜色值，如#CCC#CCC。（见操作演示）。（见操作演示）任务任务1-7 设置页面属性设置页面属性【子任务子任务子任务子任务1-7-21-7-2】设置网页背景图像和颜色设置网页背景图像和颜色设置网页背景图像和颜色设置网页背景图像和颜色注意：注意：n n同时设置背景图像和背景颜色的原因是当网络速度较慢时，同时设置背景图像和背景颜色的原因是当网络速度较慢时，背景图像可能显示迟缓，背景颜色将首先出现，让浏览者背景图像可能显示迟缓，背景颜色将首先出现，让浏览者明白这是有图片的页面，需要稍加等候。明白这是有图片的页面，需要稍加等候。n n背景图像的文件名不能使用中文
41、名称。背景图像的文件名不能使用中文名称。n n如果背景图像的尺寸小于文档窗口的大小，则如果背景图像的尺寸小于文档窗口的大小，则DreamweaverDreamweaver将重复排列背景图像直至填满文档窗口。将重复排列背景图像直至填满文档窗口。n n系统默认的网页背景颜色是白色。系统默认的网页背景颜色是白色。任务任务1-7 设置页面属性设置页面属性设置背景色与背景图页面属性 任务任务1-7 设置页面属性设置页面属性【子任务子任务子任务子任务1-7-31-7-3】设置网页文本颜色及链接颜色设置网页文本颜色及链接颜色设置网页文本颜色及链接颜色设置网页文本颜色及链接颜色设置了背景图像和颜色之后，还需要
42、设置网页中文本的字体、大小设置了背景图像和颜色之后，还需要设置网页中文本的字体、大小与颜色。与颜色。在在“页面属性页面属性”对话框中既可以设置普通文本的默认颜色与字体，对话框中既可以设置普通文本的默认颜色与字体，也可以设置超级链接、已访问链接和活动链接的默认颜色与字体。也可以设置超级链接、已访问链接和活动链接的默认颜色与字体。操作步骤如下：操作步骤如下：（1 1）打开）打开“页面属性页面属性”对话框，在对话框，在“分类分类”中选中中选中“外观外观（HTMLHTML）”选项。选项。（2 2）单击）单击“文本文本”右侧的按钮，弹出颜色面板。使用取色滴管选取右侧的按钮，弹出颜色面板。使用取色滴管选取
43、文本颜色（例如黑色文本颜色（例如黑色#000000#000000）（见操作演示）。）（见操作演示）。（3 3）单击）单击“链接链接”、“已访问链接已访问链接”、“活动链接活动链接”右侧的按钮，右侧的按钮，弹出颜色面板选项，分别设置链接颜色（例如黑色弹出颜色面板选项，分别设置链接颜色（例如黑色#000000#000000）、已访问链）、已访问链接（例如红色接（例如红色#FF0000#FF0000）、活动链接的颜色（例如兰色）、活动链接的颜色（例如兰色#0000FF#0000FF）。）。任务任务1-7 设置页面属性设置页面属性【子任务子任务子任务子任务1-7-41-7-4】设置网页页面边距设置网页
44、页面边距设置网页页面边距设置网页页面边距通过设置页面边距，可以使网页周围留出一些距离，也通过设置页面边距，可以使网页周围留出一些距离，也可以设置不留距离。可以设置不留距离。操作步骤如下：操作步骤如下：（1 1）打开）打开“页面属性页面属性”对话框，在对话框，在“分类分类”中选中中选中“外外观（观（HTMLHTML）”选项。选项。（2 2）直接在边界框中输入边距数值，（见操作演示）。）直接在边界框中输入边距数值，（见操作演示）。左边距：左边距：0 0（文档中左侧边缘的空白数值）。（文档中左侧边缘的空白数值）。上边距：上边距：0 0（文档中上侧边缘的空白数值）。（文档中上侧边缘的空白数值）。右边距
45、：（文档中右侧边缘的空白数值）。右边距：（文档中右侧边缘的空白数值）。下边距：（文档中下侧边缘的空白数值）。下边距：（文档中下侧边缘的空白数值）。任务任务1-8 制作子网页制作子网页这里以组织机构子网页制作为例，简述其制作过程。这里以组织机构子网页制作为例，简述其制作过程。【子任务子任务子任务子任务1-8-11-8-1】制作制作制作制作“组织机构组织机构组织机构组织机构”子网页子网页子网页子网页操作步骤如下：操作步骤如下：（1 1）在文件面板中展开）在文件面板中展开HTMLHTML文件夹，双击文件夹，双击jigou.htmljigou.html，组织机构子网页，组织机构子网页jigou.htm
46、ljigou.html出现在文档窗口中。出现在文档窗口中。（2 2）参照任务）参照任务5 5的操作方法，输入文本的操作方法，输入文本“计算机多媒体计算机多媒体121121班组织机构班组织机构”，设置字体为黑体、字号为设置字体为黑体、字号为3636、居中对齐。、居中对齐。（3 3）参照任务）参照任务5 5的操作方法，创建的操作方法，创建2 2个绘制层，用于输入班委会和团支部成个绘制层，用于输入班委会和团支部成员名单。设置字体为黑体、字号为员名单。设置字体为黑体、字号为1616、居中对齐，层背景色为、居中对齐，层背景色为#999900#999900等。等。（4 4）参照任务）参照任务7 7，设置网
47、页文档标题为：，设置网页文档标题为：“组织机构组织机构”，背景图像为，背景图像为imagebg3.jpgimagebg3.jpg（5 5）单击）单击“在浏览器中预览在浏览器中预览”按钮，效果不满意可进行修改，效果满意后，按钮，效果不满意可进行修改，效果满意后，执行执行“文件文件”菜单中的菜单中的“保存保存”命令将文件存盘。命令将文件存盘。“组织机构组织机构”子网页核心部分子网页核心部分效果如图所示。效果如图所示。【子任务子任务子任务子任务1-8-21-8-2】其它子网页制作其它子网页制作其它子网页制作其它子网页制作其它子网页参照子任务其它子网页参照子任务其它子网页参照子任务其它子网页参照子任务
48、1-8-11-8-1进行制作，这里不再详述。进行制作，这里不再详述。进行制作，这里不再详述。进行制作，这里不再详述。任务任务1-8 制作子网页制作子网页组织机构子网页核心部分效果图 任务任务1-9 建立网页之间的链接建立网页之间的链接【子任务子任务子任务子任务1-9-11-9-1】建立文字导航的超级链接建立文字导航的超级链接建立文字导航的超级链接建立文字导航的超级链接超级链接可以是一段文本、一幅图像或者其他的网页元素。这里以超级链接可以是一段文本、一幅图像或者其他的网页元素。这里以文字导航为例来建立链接。文字导航为例来建立链接。操作步骤如下：操作步骤如下：（1 1）首先选中设置超级链的文字，如
49、）首先选中设置超级链的文字，如“组织机构组织机构”。（2 2）单击属性面板中的）单击属性面板中的“浏览文件浏览文件”图标，弹出图标，弹出“选择文件选择文件”对话对话框（如图示），双击打开框（如图示），双击打开“html”html”文件夹，。单击选中与文件夹，。单击选中与“组织机构组织机构”相链接的网页文件相链接的网页文件jigou.htmljigou.html，单击，单击【确定确定】按钮后，在属性面板的链接按钮后，在属性面板的链接框内显示出链接的网页文件及路径。也可以在框内显示出链接的网页文件及路径。也可以在“链接链接”框中直接输入需框中直接输入需要链接的网址或文件路径。（见操作演示）要链接的
50、网址或文件路径。（见操作演示）（3 3）建立超级链接的文字颜色默认呈蓝色，并且出现一条下划线。）建立超级链接的文字颜色默认呈蓝色，并且出现一条下划线。（4 4）参照步骤（）参照步骤（1 1）（）（3 3），设置其他导航栏的文字链接。），设置其他导航栏的文字链接。任务任务1-9 建立网页之间的链接建立网页之间的链接“选择文件”对话框 任务任务1-10 浏览网页浏览网页一个网页制作完成后，可以在浏览器中预览，并根据预一个网页制作完成后，可以在浏览器中预览，并根据预览效果再对网页进行调整。览效果再对网页进行调整。【子任务子任务子任务子任务1-10-11-10-1】在浏览器中预览在浏览器中预览在浏览器