项目1 班级风采网站制作过程摘要.ppt

项目1 班级风采网站制作 本项目内容提要： 本项目从清晰明确的任务训练入手，讲授了“班级风采”小型网站的规划设计，应用中文Dreamweaver CS5、中文Fireworks CS5建立网站并制作网页的全过程，并介绍了网站规划设计及应用上述软件进行网页制作的相关知识。 本项目能力目标： 1 具备小型网站规划设计的基本能力。 2 掌握中文Dreamweaver CS5、中文Fireworks CS5最常用的基本操作，初步具备小型网站创建与管理及网页制作的基本能力。 本项目知识目标： 1 熟悉网站规划设计的基本知识。 2 掌握中文Dreamweaver CS5进行网页设计制作的相关知识。 1.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）启动Dreamweaver CS5 （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】在“班级”站点中建立网页文件 操作步骤如下： ① 打开站点窗口，在文件面板上单击“展开”按钮