项目1 班级风采网站制作过程

《项目1 班级风采网站制作过程》由会员分享，可在线阅读，更多相关《项目1 班级风采网站制作过程（120页珍藏版）》请在金锄头文库上搜索。

1、项目1 班级风采网站制作,本项目内容提要： 本项目从清晰明确的任务训练入手，讲授了“班级风采”小型网站的规划设计，应用中文Dreamweaver CS5、中文Fireworks CS5建立网站并制作网页的全过程，并介绍了网站规划设计及应用上述软件进行网页制作的相关知识。 本项目能力目标： 1 具备小型网站规划设计的基本能力。 2 掌握中文Dreamweaver CS5、中文Fireworks CS5最常用的基本操作，初步具备小型网站创建与管理及网页制作的基本能力。 本项目知识目标： 1 熟悉网站规划设计的基本知识。 2 掌握中文Dreamweaver CS5进行网页设计制作的相关知识。,1.1

2、 班级风采网站制作过程,1.1 班级风采网站制作过程,班级风采主页效果如图所示，下面详述其制作过程,任务1-1 设计规划班级风采网站,网页制作之前要进行规划，内容包括：设置主题栏目，设计网页结构，确定网站风格等等。 设置主题栏目：本班级风采网站的主题栏目包括：班级档案、组织机构、荣誉殿堂、风采图片、文体天地、学习园地、支部生活。 设计网页结构：网站主页规划的结构下页图所示。网站的主页可采用简单明了的板块结构：采用上中下结构。上边为标题区，用于存放网站标题等内容。中间为主页主体区，主体区又分为左右两部分，左边窄，用坚式结构放置导航栏。右边宽，存放班级简介等内容。下边为版权区。用于存放版权声明信息

3、。 设计网站风格：由于是班级网站，可选简明清新型。 设计网页尽寸：选择1024768规格,实际尺寸为：980*，(*代表768的倍数)。宽度最好限定在一个幅面内，长度一般是不超过3个版面。,任务1-1 设计规划班级风采网站,班级风采站点规划布置图,任务1-2 创建班级风采网站站点,【子任务1-2-1】设置本地站点文件夹 本地站点文件夹用以确定存放所有站点文件的存储位置。 设置本地站点文件夹的操作步骤如下： （1）在桌面双击“我的电脑”图标； （2）在“我的电脑”窗口中双击打开用于存储站点的硬盘驱动器（例如为E盘）； （3）使用【文件】新建文件夹命令，在硬盘中建立一个新文件夹。 （4）在新文件夹

4、上单击右键，选择“重命名”选项，在英文输入法状态下输入站点名称。例如输入 “CLASS”，然后在空白处单击确定。（见操作演示）,任务1-2 创建班级风采网站站点,【子任务1-2-2】建立一个名称为“班级”的站点 站点是对网站进行组织、维护和管理的功能集合。通过站点管理，用户可以根据自己的需要设计出自己网站结构。 操作步骤如下： （1）启动Dreamweaver CS5 （2）执行“站点”菜单中的“新建站点”命令，弹出“站点设置对象”对话框。 （3）在菜单中选择“站点”选项， 在“站点名称”文本框中输入：“班级”，在“本地站点文件夹”中输入E:CLASS（或单击浏览器按钮，选择“E:CLASS”

5、）作为本地根文件夹。“站点设置对象”对话框。（见操作演示） （4）单击【保存】按钮，完成“班级”站点创建。,任务1-2 创建班级风采网站站点,【子任务1-2-3】在“班级”站点中建立站点子文件夹 在已建好的网站中，一般还需要建立一些子文件夹，用于归类存入网站中的图像、网页、动画、模板等文件。 操作步骤如下 ： （1）在文件面板中选择“站点-班级（E:class）”文件夹，单击鼠标右键，在快捷菜单中选择“新建文件夹”选项。 （见操作演示） （2）单击untitled文件夹的名称部分，输入image，将文件夹改名为image，此文件夹用于存放图像文件； （3）参照步骤（1）和（2），依次建立文件夹

6、“html”(用于存放非首页的其他网页)、“music”（用于存放音乐文件），“swf”（存放Flash动画）。（操作演示）（结果如图“建立站点子文件夹结果 ”所示）,任务1-2 创建班级风采网站站点,建立站点子文件夹结果,任务1-2 创建班级风采网站站点,【子任务1-2-4】在“班级”站点中建立网页文件 建立网页文件的方法为：先选中要放置网页文件的文件夹，单击鼠标右键，在弹出的快捷菜单中选择“新建文件”命令。或执行“文件”“新建文件”菜单命令，在弹出的“新建文档”对话框中选择“基本页”或“HTML”，单击【创建】按钮。编辑完成网页内容后，以适当的文件名称保存到相应站点文件夹下（如保存到E:c

7、lasshtml下面）。 在操作时要注意以下问题： （1）主页文件必须放在本地站点根目录下，例如，本例应将首页文件放在“E:class”文件夹下。 （2）网页文件名、文件夹名和网站内的其他文件名最好全部使用英文小写形式，因为Dreameaver不识别中文文件名，而且有些网站服务器要区分字母大小写。,任务1-2 创建班级风采网站站点,【子任务1-2-4】在“班级”站点中建立网页文件 操作步骤如下： 打开站点窗口，在文件面板上单击“展开”按钮即可打开“站点”窗口。 选中“站点-班级（E:class）”文件夹，单击鼠标右键，在弹出的快捷菜单中选择“新建文件”命令。 单击新文件名的名称部分，将unti

8、tled.htm改名为index.htm(作为网站的首页文件)； 选中“html”文件夹，单击鼠标右键，在弹出的快捷菜单中选择“新建文件”命令，建立网页dangan.htm(班级档案)； 参照步骤，分别建立网页xuexi.htm（学习园地）、wenti.htm（文体天地）、jigou.htm（组织机构）、zhibu.htm（支部生活）、tupian.htm（风彩图片）、rongyu.htm（荣誉殿堂）。 （见操作演示）。（结果如 “建立网站新文件结果 ”图所示）,任务1-2 创建班级风采网站站点,建立网站新文件结果,任务1-3 制作并添加网页标题栏,【子任务1-3-1】制作网页标题图像 一个网

9、页通常有标题部分，来访者可以通过标题了解网站的名称及网站类型。标题部分可以是文本，也可以是图像。如果使用图像标题，我们可以用Fireworks CS5自己制作。 操作步骤如下： （1）启动Fireworks CS5，选择画布宽度为980，高度为80，画布颜色自定义为黑色。单击【确定】按钮，进入到Firework主界面。（见操作演示） （2）在画面中间用“文本”工具输入“班级风采”，在属性面板中设置：字体大小为80，颜色为淡兰色（#00FFFF），字体为隶书。（见操作演示）。 （3）在画布左边用“文本”工具输入“计算机多媒体”，在属性面板中设置：字体大小为22，颜色为白色，字体为黑体。 （4）在

10、画布右边用“文本”工具输入“Computer Multimedia” ，在属性面板中设置：字体大小为22，颜色为白色，字体为黑体。 （5）单击保存按钮，给出保存位置（如E:classimage）及文件名（扩展名为.png），以便以后修改。 （6）执行“文件”菜单中的“图像预览”命令，设置文件格式为GIF，单击“导出”按钮。（见操作演示） （7）在“导出”对话框中选择保存在：e:classimage，文件名为：bjbt，单击“保存”按钮。（见操作演示）,标题图像制作效果图如下：,任务1-3 制作并添加网页标题栏,【子任务1-3-2】添加主页标题图像“班级风采” 操作步骤如下： （1）在Dream

11、weaver应用程序窗口中执行“站点”“管理站点”菜单命令，在弹出的对话框中选中需要打开的站点名称。例如：班级。单击【完成】按钮，“班级”站点显示在文件面板中。 （2）双击打开需要制作的网页文件。例如，双击打开主页文件index.htm。首页文件打开，此时是空白页。 （3）执行“插入”菜单中的“图像”命令，或单击“常用”工具栏中的【图像】按钮，弹出“选择图像源文件”对话框（见操作演示）。如果“常用”工具栏未打开，可按快捷键【Ctrl】+【F2】打开。 （4）在指定文件夹中找到标题图像文件，选择标题图像文件后，对话框右侧将显示该图像的预览图，单击【确定】按钮，插入结束。,任务1-3 制作并添加网

12、页标题栏,【子任务1-3-3】添加水平分割线 为了将标题区与正文内容分隔开，通常在标题下面插入一条水平分隔线。 操作步骤如下： （1）将光标移到需要插入分隔线的地方（如标题图像下方）。 （2）执行“插入”菜单“HTML”下“水平线”命令。 （3）标题图像的下面出现一条水平分隔线，并处于选中状态，在属性面板中设置其属性，如宽度、高度、对齐方式、阴影等。这里设置宽度为980，阴影。（见操作演示）,任务1-3 制作并添加网页标题栏,图4-14 添加网页标题图片及水平线后效果图,任务1-4 设置导航栏,导航栏的作用是与其他网页链接，从而轻松地进入下一个页面，导航既可以使用文字，也可以使用图像。这里我们

13、使用文字制作导航，并且使用表格布局导航栏。 【子任务1-4-1】插入导航表格 操作步骤如下： （1）在水平分隔线下单击鼠标，出现光标插入点。 （2）执行“插入”菜单中“表格”命令，或在插入面板上单击“常用”工具栏中的【表格】按钮，弹出表格对话框，设置“行数”为7，“列数”为1，“宽度”为25，单位为“百分比”，（见操作演示） （3）单击【确定】按钮，表格插入。此时表格处于选中状态，拖动控制点（黑点）可以调整表格的大小（见操作演示） （4）在属性面板中设置表格的背景颜色为#CCFFCC。,任务1-4 设置导航栏,【子任务1-4-2】添加导航文本 （1）在表格的第一个单元格里单击鼠标，出现光标插入

14、点，通过键盘输入文字“班级档案”。 （2）选中文字“班级档案”，在属性面板中单击CSS按钮，出现CSS属性面板。（见操作演示） （3）单击字体大小中的下拉按钮，第一次使用字体设置会出现“新建样式规则”对话框，“输入选择器名称”为font1，“选择器类型”为“复合选择器（基于选择内容）”，“选择定义规则的位置”为“仅限该文档”，（见操作演示） （4）单击“确定”按钮，在属性面板中设置其字体为默认、大小为18、对齐方式 为居中对齐。（见操作演示）。 （5）参照步骤（2）（4），输入并设置其他导航栏：“组织机构”、“荣誉殿堂”、“风彩图片”、“文体天地”、“学习园地”、“支部生活”。 如图所示。,任

15、务1-4 设置导航栏,设置导航栏效果图,任务1-5 设置网页主体内容,为使网页内容设置更灵活，可以借助“层”来定位文字区域。 【子任务1-5-1】设置网页主体文字区域并添加文字 操作步骤如下： （1）在“插入”面板的“布局”工具栏上，单击【绘制AP Div】按钮。 （2）在页面需要放文字的地方，按住鼠标左键拖动出一个矩形区域（见操作演示）。 （3）此时层处于选中状态，通过拖动控制点可以调整层的大小。将鼠标放在层的边缘线上，鼠标呈“十字”箭头时，拖动鼠标可以移动层的位置。 （4）应用层属性面板可设置层属性，如背景颜色为#CCFFCC等（见操作演示） 。,任务1-5 设置网页主体内容,【子任务1-

16、5-2】添加网页主体文字 （1）在层内单击鼠标，出现插入点后，即可输入文字内容“我们的班级，计算机多媒体班，40颗年轻的心。我们来自五湖四海，操着不同的口音，怀着青春的梦想！共同撑起同一片蓝天，一起遨游知识的海洋。让我们扬帆出海，胜利起航。我们是快乐的一家人，我们是自信的一家人！。” （2）编辑文字，选中文本，在CSS属性面板的目标规则中选择新建规则，在新建CSS样式规则对话框中，选择器名称设为line1，单击确定后出现“line1的CSS规则定义”对话框，设置字体为宋体、字号为24、行距为200%。（见操作演示）。 （3）单击“确定”按钮后，文本内容将按line1定义呈现。（见设置网页主体内

17、容之后效果图）。,任务1-5 设置网页主体内容,设置网页主体内容之后的效果,任务1-6 制作版权区,本网站虽然不大，但也应体现完整性，所以也应设置版权区。 【子任务1-6-1】制作版权区 操作步骤如下： （1）将光标置于末行起始点，执行“插入”菜单“HTML”下“水平线”命令。出现一条水平分隔线，并处于选中状态，在属性面板中设置其属性，如宽度、高度、对齐方式、阴影等。这里设置宽度为980，阴影。（操作演示） （2）在下一行输入“Copyright2012-2016 班级风采工作” （3）选中输入的版权内容文本，设置对齐方式为居中对齐（首次使用对齐方式应用新建CSS规则，如选择器名称为center1。操作步骤与前述新建CSS规则类似），字号为16。设置效果如图“版权区的设置”所示。（操作演示）,