网页设计与制作（第四版）.pptx

项目1班级风采网站制作本项目内容提要：本项目从清晰明确的任务训练入手，讲授了“班级风采”小型网站的规划设计，应用中文DreamweaverCS5、中文FireworksCS5建立网站并制作网页的全过程，并介绍了网站规划设计及应用上述软件进行网页制作的相关知识。本项目能力目标：1具备小型网站规划设计的基本能力。2掌握中文DreamweaverCS5、中文FireworksCS5最常用的基本操作，初步具备小型网站创建与管理及网页制作的基本能力。本项目知识目标：1熟悉网站规划设计的基本知识。2掌握中文DreamweaverCS5进行网页设计制作的相关知识。项目1班级风采网站制作1.1班级风采网站制作过程班级风采主页效果如图所示，下面详述其制作过程任务1-1设计规划班级风采网站网页制作之前要进行规划，内容包括：设置主题栏目，设计网页结构，确定网站风格等等。设置主题栏目：本班级风采网站的主题栏目包括：班级档案、组织机构、荣誉殿堂、风采图片、文体天地、学习园地、支部生活。设计网页结构：网站主页规划的结构下页图所示。网站的主页可采用简单明了的板块结构：采用上中下结构。上边为标题区，用于存放网站标题等内容。中间为主页主体区，主体区又分为左右两部分，左边窄，用坚式结构放置导航栏。右边宽，存放班级简介等内容。下边为版权区。用于存放版权声明信息。设计网站风格：由于是班级网站，可选简明清新型。设计网页尽寸：选择1024×768规格,实际尺寸为：980×***，(***代表768的倍数)。宽度最好限定在一个幅面内，长度一般是不超过3个版面。任务1-1设计规划班级风采网站标题区导航区正文区版权区班级风采站点规划布置图任务1-2创建班级风采网站站点【子任务1-2-1】设置本地站点文件夹本地站点文件夹用以确定存放所有站点文件的存储位置。设置本地站点文件夹的操作步骤如下：（1）在桌面双击“我的电脑”图标；（2）在“我的电脑”窗口中双击打开用于存储站点的硬盘驱动器（例如为E盘）；（3）使用【文件】→新建→文件夹命令，在硬盘中建立一个新文件夹。（4）在新文件夹上单击右键，选择“重命名”选项，在英文输入法状态下输入站点名称。例如输入“CLASS”，然后在空白处单击确定。（见操作演示）任务1-2创建班级风采网站站点【子任务1-2-2】建立一个名称为“班级”的站点站点是对网站进行组织、维护和管理的功能集合。通过站点管理，用户可以根据自己的需要设计出自己网站结构。操作步骤如下：（1）启动DreamweaverCS5（2）执行“站点”菜单中的“新建站点”命令，弹出“站点设置对象”对话框。（3）在菜单中选择“站点”选项，在“站点名称”文本框中输入：“班级”，在“本地站点文件夹”中输入E:\CLASS（或单击浏览器按钮，选择“E:\CLASS”）作为本地根文件夹。“站点设置对象”对话框。（见操作演示）（4）单击【保存】按钮，完成“班级”站点创建。任务1-2创建班级风采网站站点【子任务1-2-3】在“班级”站点中建立站点子文件夹在已建好的网站中，一般还需要建立一些子文件夹，用于归类存入网站中的图像、网页、动画、模板等文件。操作步骤如下：（1）在文件面板中选择“站点-班级（E:\class）”文件夹，单击鼠标右键，在快捷菜单中选择“新建文件夹”选项。（见操作演示）（2）单击untitled文件夹的名称部分，输入image，将文件夹改名为image，此文件夹用于存放图像文件；（3）参照步骤（1）和（2），依次建立文件夹“html”(用于存放非首页的其他网页)、“music”（用于存放音乐文件），“swf”（存放Flash动画）。（操作演示）（结果如图“建立站点子文件夹结果”所示）任务1-2创建班级风采网站站点建立站点子文件夹结果任务1-2创建班级风采网站站点【子任务1-2-4】在“班级”站点中建立网页文件建立网页文件的方法为：先选中要放置网页文件的文件夹，单击鼠标右键，在弹出的快捷菜单中选择“新建文件”命令。或执行“文件”→“新建文件”菜单命令，在弹出的“新建文档”对话框中选择“基本页”或“HTML”，单击【创建】按钮。编辑完成网页内容后，以适当的文件名称保存到相应站点文件夹下（如保存到E:\class\html下面）。在操作时要注意以下问题：（1）主页文件必须放在本地站点根目录下，例如，本例应将首页文件放在“E:\class”文件夹下。（2）网页文件名、文件夹名和网站内的其他文件名最好全部使用英文小写形式，因为Dreameaver不识别中文文件名，而且有些网站服务器要区分字母大小写。任务1-2创建班级风采网站站点【子任务1-2-4】在“班级”站点中建立网页文件操作步骤如下：①打开站点窗口，在文件面板上单击“展开”按钮即可打开“站点”