项目1 班级风采网站制作过程
班级网站建设
班级网站建设流程一、班级网站配置管理单击左侧”班级网站配置管理”——通过年级列表和班级列表查找自己的班级——单击编辑——进入班级网站配置管理班主任邮箱：自己填写Banner：上传一张班级横幅图片或Flash，例如：选择皮肤：选择网站皮肤班级格言：自己填写班主任寄语：自己填写二、班级栏目管理首先设想好自己班级的栏目（班级栏目导航条上要添加的）例如：班级新闻、班级动态、班级计划、同学录、家庭作业、辅导指南、班级展示园地、班级荣誉、心灵鸡汤等等（填满导航条）。
其次是步骤：单击左侧班级栏目管理——单击“添加”按钮——选好“年级班级”填好栏目名称和代码（代码从1开始）——首页导航条的栏目都是一级栏目——排序ID 要跟代码一致——单击下方“添加”按钮。
第三，如果需要建立二级栏目，例如“班级动态”为一级栏目，在它下面又分了班级快报、我型我秀、班级喜报等这些就是二级栏目。
二级栏目的添加和一级栏目的添加唯一不同就是在“上级栏目”处选择的是“班级动态”（所在的一级栏目）。
三、班级留言管理班级留言管理就是学生在班级网站上有自己的留言后，班主任单击左侧的“班级留言管理”——选择好“年级和班级”点击查找——点击“审核”（只有班主任审核通过之后才能在留言板上出现）——这时候其他学生看到留言，就可以发表评论和回复内容。
四、班级新闻发布管理班级新闻发布管理就是向栏目中添加内容和图片等。
步骤：单击左侧“班级新闻发布管理”——单击“添加”按钮——选择好“年级和班级”、“所属栏目”——自己填写“新闻标题、副标题、新闻描述、新闻内容”——如果有图片等附件就需要点击下方的添加附件“浏览”按钮（是否首页显示点选）——点击“发布新闻”提示发布成功后——再次单击左侧“班级新闻发布管理”——必须对刚才发布的新闻进行“审核”，审核通过后才能在网站上显示。
注意事项：如果你想发布的图片显示大图，就必须在审核完成后，重新单击“编辑”，在下方的“附件列表处”点击“插入内容中”就可以了。
网站制作流程和方法
网站制作流程和方法在当今数字化时代，网站已经成为企业和个人展示自己的重要平台。
而要制作一个优质的网站，需要经过一系列的流程和方法。
本文将为您详细介绍网站制作的流程和方法，帮助您更好地了解如何打造一个成功的网站。
第一步，需求分析。
在制作网站之前，首先需要进行需求分析。
这一步非常关键，因为它直接影响后续的网站设计和开发。
需求分析包括对网站定位、目标用户群体、功能需求等方面的调研和分析。
只有明确了网站的需求，才能更好地进行后续的工作。
第二步，网站规划。
在需求分析的基础上，接下来就是进行网站规划。
网站规划包括网站结构设计、内容策划、功能模块划分等工作。
在这一步，需要考虑网站的整体布局、导航结构、页面内容等方面，确保网站的结构合理、内容丰富。
第三步，设计与美化。
设计与美化是网站制作中非常重要的一环。
在这一步，需要进行网站的界面设计、视觉效果优化等工作。
设计师需要根据需求分析和网站规划的结果，进行页面的设计与美化，确保网站具有良好的用户体验和视觉效果。
第四步，前端开发。
前端开发是将设计与美化的结果转化为网页的过程。
在这一步，前端开发工程师需要将设计师提供的设计稿转化为前端页面，包括HTML、CSS、JavaScript等方面的编码工作。
同时，需要确保页面的兼容性和响应式设计，以适配不同的终端设备。
第五步，后端开发。
后端开发是网站制作中的另一个重要环节。
在这一步，后端开发工程师需要根据需求分析和网站规划的结果，进行网站的功能开发、数据库设计、服务器搭建等工作。
同时，需要确保网站的安全性和稳定性。
第六步，测试与上线。
在网站制作完成后，需要进行测试与上线。
测试包括功能测试、兼容性测试、性能测试等方面，确保网站的质量。
一旦通过测试，就可以将网站正式上线，让用户访问和使用。
总结。
以上就是网站制作的流程和方法。
通过需求分析、网站规划、设计与美化、前端开发、后端开发、测试与上线等一系列的步骤，可以打造一个成功的网站。
当然，网站制作是一个复杂的过程，需要不断学习和实践，才能不断提升自己的网站制作能力。
项目六任务1制作班级网站首页----框架网页.
1．框架和框架集的创建与编辑。
2．设置框架和框架集属性。
教学环境
机房+电子教室
教学过程
教学内容
上节回顾
上节课讲到了表单的创建和设置以及表单的检查方法等内容。同学们应掌握各表单对象的插入和属性的设置方法。请大家回答下面两个问题：
1.表单的标记是什么？通常用什么布局？
2.表单对象有几种？
新课讲授
* _self放在相同窗口中（默认窗口无须指定）。
* _top放到整个浏览器窗口并删除所有框架。
6.保存框架集和框架页，按F12预览。
随堂实训
1.创建框架网页。
2.编辑框架页，并进行链接。
小结
通过本章的学习，了解框架技术，掌握了框架和框架集的创建、编辑以及属性设置，能够使用框架技术灵活布局网页。本节通过“班级网站”框架网页的创建为例，介绍了框架的相关知识，希望能够更好地进行网页设计制作。
一个框架结构有两部分网页文件构成：
框架和框架集是两个不同的概念。框架集是一个网页文件，框架的多少根据具体有多少网页来决定，每个框架中要显示的就是不同的网页文件。
<FRAMESET ROWS="200,300">
<FRAME NAME="Top" SRC="top.htm">
<FRAME NAME="Bottom" SRC="bottom.htm">
</FRAMESET>
<FRAMESET>…</FRAMESET>标记，并使用ROWS属性将左方垂直框架分割为两个水平框架（高度各为窗口高度的1/2）。
大学生个人风采展示网站说明文档
大学生个人风采展示网站说明文档专业：学号：姓名：成绩：前言（介绍网站大的设计思想并引入网站的初步规划）在信息时代，我们需要用信息化、电子化的方式表达自我。
这样才能赶上时代前进的步伐！当今社会个人网站层出不穷，但是展示当代大学生自我风采的个人网站还是很新奇的。
一个个性而又丰富多彩的网站能够展示出你的魅力也能体现出你的智慧！下面我对本网站做简要介绍：（一）从技术上本站研究的是个人网站的设计与实现和ASP技术在创建个人网站中发挥的作用。
本文主要介绍如下内容：1、Windows XP + Dreamweaver8CS5+ Access+ ASP 的网站设计制作环境，ASP与Access的连接。
2、网站首页中的search可以实现对数据库中信息的查找。
(开发环境：Windows 2003+IIS6.0+asp)（二）从整体结构上首先，从整体的布局上来说，网站页面布局采用上、右导航栏的T字形布局，多版块布局方式，提高页面浏览速度；从内容上首页尽可能的展示网站所要表达的主旨——当代大学生的风采；从外观上我们采用淡色作为网站的主色调，淡淡的蓝色，赏心悦目的嫩绿色让整- 1 -个页面充满了生气与活力。
其次，网站丰富的内容更是给人耳目一新的感觉，美好的愿望、充满智慧的日志、色彩斑斓的生活照片、美妙的歌曲无不在展示着当代大学生的风采！我们期待您的光临：/cxb/index.asp- 2 -目录网站结构图 --------------------------------------------------------------------- 5 - 技术支持 ------------------------------------------------------------------------ 6 -一、开发环境 ------------------------------------------------------------ 6 -二、服务器 --------------------------------------------------------------- 6 -三、页面布局-------------------------------------------------------------- 6 -四、运行环境-------------------------------------------------------------- 6 -五、发布链接-------------------------------------------------------------- 7 -六、内容管理 ------------------------------------------------------------ 7 - 基本功能板块 ------------------------------------------------------------------ 8 -一、前台功能 ------------------------------------------------------------ 8 -二、前台功能特色 ------------------------------------------------------ 8 -三、后台管理功能 ------------------------------------------------------ 9 -四、后台管理功能特色 ------------------------------------------------ 9 - 特色功能板块 --------------------------------------------------------------- - 10 - 开发流程 --------------------------------------------------------------------- - 11 -一、网页制作团队具体分工 --------------------------------------- - 11 -二、网页开发流程 --------------------------------------------------- - 11 - 备注 --------------------------------------------------------------------------- - 12 -一、服务器的配置方法----------------------------------------------- - 12 -二、关于浏览网页的建议-------------------------------------------- - 13 -- 3 -附件： ------------------------------------------------------------------------ - 14 -- 4 -网站结构图根文件夹/ Admin文件夹Css文件夹Js文件夹Db文件夹Images文件夹Inc文件夹Upload文件夹网站后台管理页面文件夹层叠样式表网页图片文件夹数据库文件夹网站后台管理页面上传文件夹包含文件，head.html,top.html,conn.aspJavascript文件夹Index.asp欢迎页面Main.asp网站主页Bloglist.asp日志页面Music.asp音乐页面Aboutme.asp关于主人Photo.asp相册- 5 -技术支持一、开发环境windows2003 Server + IIS_6.0 + IE7.0 + access2003数据库+flashpaper。
《第十九课综合实践——制作班级网站》作业设计方案-初中信息技术浙教版13八年级上册自编模拟
《综合实践——制作班级网站》作业设计方案（第一课时）一、作业目标本作业设计旨在通过制作班级网站的第一课时实践，使学生掌握基本的网页制作技能，包括网页布局、文字排版、图片插入等，并能够独立完成一个简单的个人或小组网页。
通过实践操作，提高学生的信息技术应用能力和团队协作能力。
二、作业内容本课时的主要内容是制作班级网站的准备工作和基础框架搭建。
1. 确定网站主题与结构：学生需根据班级特色和活动，确定网站的主题和大致结构，如“班级风采”、“活动回顾”、“学习园地”等板块。
2. 网页布局设计：学生需学习并运用网页设计的基本原则，如色彩搭配、版面布局等，为网站设计出合理的页面布局。
3. 制作网站基础框架：学生需利用所学的HTML、CSS等网页制作知识，搭建网站的基础框架，包括页面的头部、底部、导航栏等。
4. 编写简短介绍文字：学生需为各自的板块编写简短的文字介绍，以便同学和老师了解相关内容。
三、作业要求1. 独立性：每位学生需独立完成作业，不得抄袭他人作品。
2. 创新性：在网站设计中应体现个人或小组的创新思维，展示独特的设计风格。
3. 实用性：网页布局应合理，内容应实用，方便同学和老师获取信息。
4. 技术规范：遵守HTML、CSS等网页制作规范，确保网站基础框架的稳定性和兼容性。
5. 按时提交：作业需在规定时间内提交，不得拖延。
四、作业评价本作业的评价将从以下几个方面进行：1. 设计的创意性和实用性；2. 网页布局的合理性和美观度；3. 内容撰写的简洁明了程度；4. 技术应用的准确性和规范性；5. 作业的按时提交情况。
评价将采用教师评价和同学互评相结合的方式，以全面了解学生的作业完成情况和学习能力。
五、作业反馈教师将对每位学生的作业进行仔细评阅，指出优点和不足，并提出改进建议。
同时，将选取优秀作品进行展示，以资鼓励。
学生应根据教师的反馈意见，对作业进行修改和完善。
此外，同学之间也可进行互评，互相学习，共同进步。
《第十九课综合实践——制作班级网站》作业设计方案-初中信息技术浙教版13八年级上册自编模拟
《综合实践——制作班级网站》作业设计方案（第一课时）一、作业目标本课程旨在通过实践操作，让学生掌握基本的网页制作技能，增强信息技术的实践能力，提升团队协作和创新能力。
第一课时的作业设计旨在引导学生了解网站制作的基本概念和流程，掌握网站规划与设计的基本方法。
二、作业内容作业内容主要包括以下几个方面：1. 确定网站主题与定位：学生需根据班级特色和活动，确定网站的主题和定位，如“班级风采”、“学习交流”等。
2. 网站规划与结构设计：学生需进行网站的整体规划，包括栏目设置、页面布局等，并绘制网站结构图。
3. 页面风格与色彩搭配：学生需设计网站的整体风格，包括色彩搭配、字体选择等，确保页面美观大方。
4. 编写网站文案：学生需撰写网站的各部分文案，如首页欢迎词、栏目介绍等。
三、作业要求1. 按时完成：学生需在规定时间内完成作业，并提交至教师指定的平台或邮箱。
2. 内容丰富：网站内容应丰富多样，能充分展示班级特色和活动。
3. 结构清晰：网站结构应清晰明了，便于用户浏览和查找信息。
4. 美观大方：页面设计应美观大方，色彩搭配合理，字体统一。
5. 文案精炼：网站文案应精炼、准确，表达清晰。
四、作业评价作业评价将根据以下标准进行：1. 创意性：网站的创意和主题是否独特，能否吸引人。
2. 实用性：网站的功能是否实用，能否满足用户需求。
3. 技术性：网页制作的技术水平，如页面布局、色彩搭配、代码规范等。
4. 完成度：作业是否按时完成，内容是否完整。
五、作业反馈教师将对每位学生的作业进行认真评阅，给出详细的评价和建议。
同时，将挑选出优秀作品进行展示，以鼓励和激发学生的学习热情。
学生可根据教师的反馈，对作品进行修改和完善。
在下一课时的学习中，教师还将对学生在作业中遇到的问题进行讲解和指导，帮助学生更好地掌握网页制作技能。
此外，教师还将通过课堂讨论、小组交流等方式，加强学生之间的互动和学习，共同进步。
通过本次作业实践，学生将更深入地了解信息技术在实践中的应用，为今后的学习和生活打下坚实的基础。
《第十九课综合实践——制作班级网站》作业设计方案-初中信息技术浙教版13八年级上册自编模拟
《综合实践——制作班级网站》作业设计方案（第一课时）一、作业目标本课程旨在通过实践操作，让学生掌握基本的网页制作技能，增强信息技术的实践能力，提升团队协作与沟通能力。
第一课时的作业设计主要目标是让学生熟悉网站制作的基本流程，掌握网页的基本构成元素及编辑技巧。
二、作业内容作业内容分为以下几个部分：1. 理论学习：学生需预习网站制作的基本概念，包括网页的构成、HTML基础、网站布局等。
2. 需求分析：小组讨论并确定班级网站的定位、主题及功能需求。
每组成员需明确网站要传达的信息、目标用户群体及网站应具备的交互功能。
3. 规划网站结构：根据需求分析结果，绘制网站结构图，包括主页、各栏目页及内容页的布局规划。
4. 创建网站文件夹：在计算机上建立网站文件夹，并按照规划的结构创建相应的子文件夹，用于存放网页文件。
5. 设计首页草图：运用设计软件（如Photoshop、Illustrator 等）设计首页的草图，包括版面布局、色彩搭配及图片素材的选取。
三、作业要求1. 理论学习要求：学生需认真阅读教材相关内容，并做好笔记，理解网站制作的基本原理。
2. 需求分析与规划要求：小组内成员需充分沟通，确保每个成员都明确网站制作的目标和要求，并在规定时间内完成需求分析和结构规划。
3. 文件夹创建要求：文件夹命名要规范，文件组织要清晰，便于后续网页的制作和维护。
4. 设计首页草图要求：设计要符合网站主题，色彩搭配合理，版面布局美观大方，图片素材要符合网站风格。
四、作业评价1. 教师评价：教师根据学生提交的作业内容，评价学生在理论学习、需求分析、规划网站结构、文件夹创建及首页设计等方面的表现。
2. 小组互评：小组之间互相评价作业，从内容完整性、创意性、实用性等方面进行评价，提出改进意见。
五、作业反馈1. 教师反馈：教师针对学生的作业情况，给出具体的评价和建议，帮助学生改进不足之处。
2. 小组内反馈：小组内成员根据互评结果，讨论并总结网站制作的优点和不足，共同商讨改进措施。
网站制作流程
网站制作流程网站制作流程是指将一个网站从设计到上线的整个过程。
下面将以一个普通网站的制作为例，介绍一下网站制作的具体流程。
一、需求分析阶段在网站制作之前，首先需要和客户进行需求沟通。
了解客户对于网站的要求和期望，包括网站的功能、页面设计、内容等方面。
同时，要分析客户目标受众和竞争对手的网站，确定网站的定位和风格。
二、网站策划阶段在需求分析的基础上，制定网站的整体策划方案。
包括确定网站的结构、功能模块，绘制网站的流程图和页面结构图，并撰写网站的策划报告。
三、界面设计阶段基于网站策划的方案，进行具体的界面设计。
设计师根据网站的定位和风格要求，制作出页面的设计草图、色彩搭配和排版。
利用设计软件进行页面的设计，并与客户进行沟通和修改，最终确定最终的界面设计。
四、前端开发阶段前端开发人员根据界面设计图，进行网站的前端开发。
使用HTML、CSS、JavaScript等技术，实现网站的静态页面。
同时，也要添加网站的交互效果和动画效果，提升用户体验。
五、后端开发阶段后端开发人员负责实现网站的后端功能和数据库连接。
使用服务器端开发语言（如PHP、Python等）和数据库（如MySQL）进行开发，实现网站的各种功能，例如用户注册、登录、购物等。
六、测试阶段在完成网站的开发后，需要进行全面的测试。
包括功能测试、性能测试、兼容性测试和安全性测试等。
通过不同的测试手段，检测网站是否符合预期的要求。
尤其要关注网站的兼容性，确保在不同的浏览器和设备上都能正常显示和运行。
七、上线阶段当网站测试通过后，可以进行上线准备工作。
包括备案、购买域名和服务器，将网站的文件上传到服务器上等。
同时要检查网站的各项配置，确保网站在上线后正常运行。
八、优化和维护阶段网站上线后，并不意味着工作结束。
还需要继续进行网站的优化和维护工作。
包括改进网站的性能和用户体验，进行搜索引擎优化，定期备份网站数据，及时修复漏洞和错误等。
总结：网站制作是一个复杂的过程，需要通过需求分析、策划、设计、开发、测试等多个环节来完成。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
任务1-5 设置网页主体内容
【子任务1-5-2】添加网页主体文字 （1）在层内单击鼠标，出现插入点后，即可输入文字内容“我 们的班级，计算机多媒体××班，40颗年轻的心。我们来自五湖 四海，操着不同的口音，怀着青春的梦想！共同撑起同一片蓝天， 一起遨游知识的海洋。让我们扬帆出海，胜利起航。我们是快乐 的一家人，我们是自信的一家人！！！。” （2）编辑文字，选中文本，在CSS属性面板的目标规则中选择 新建规则，在新建CSS样式规则对话框中，选择器名称设为line1， 单击确定后出现“line1的CSS规则定义”对话框，设置字体为宋体、 字号为24、行距为200%。（见操作演示）。 （3）单击“确定”按钮后，文本内容将按line1定义呈现。（见 设置网页主体内容之后效果图）。
任务1-3 制作并添加网页标题栏
【子任务1-3-3】添加水平分割线 为了将标题区与正文内容分隔开，通常在标题 下面插入一条水平分隔线。 操作步骤如下： （1）将光标移到需要插入分隔线的地方（如标 题图像下方）。 （2）执行“插入”菜单“HTML”下“水平线” 命令。 （3）标题图像的下面出现一条水平分隔线，并 处于选中状态，在属性面板中设置其属性，如宽度、 高度、对齐方式、阴影等。这里设置宽度为980，阴 影。（见操作演示）
任务1-3 制作并添加网页标题栏
图4-14 添加网页标题图片及水平线后效果图
任务1-4 设置导航栏
导航栏的作用是与其他网页链接，从而轻松地进入下一个页面，导 航既可以使用文字，也可以使用图像。这里我们使用文字制作导航，并 且使用表格布局导航栏。 【子任务1-4-1】插入导航表格 操作步骤如下： （1）在水平分隔线下单击鼠标，出现光标插入点。 （2）执行“插入”菜单中“表格”命令，或在插入面板上单击“常 用”工具栏中的【表格】按钮，弹出表格对话框，设置“行数”为7， “列数”为1，“宽度”为25，单位为“百分比”，（见操作演示） （3）单击【确定】按钮，表格插入。此时表格处于选中状态，拖动 控制点（黑点）可以调整表格的大小（见操作演示） （4）在属性面板中设置表格的背景颜色为#CCFFCC。
任务1-2 创建班级风采网站站点
建立站点子文件夹结果
任务1-2 创建班级风采网站站点
【子任务1-2-4】在“班级”站点中建立网页文件 建立网页文件的方法为：先选中要放置网页文件的文件夹，单击鼠 标右键，在弹出的快捷菜单中选择“新建文件”命令。或执行“文 件”→“新建文件”菜单命令，在弹出的“新建文档”对话框中选择 “基本页”或“HTML”，单击【创建】按钮。编辑完成网页内容后，以 适当的文件名称保存到相应站点文件夹下（如保存到E:\class\html下面）。 在操作时要注意以下问题： （1）主页文件必须放在本地站点根目录下，例如，本例应将首页文 件放在“E:\class”文件夹下。 （2）网页文件名、文件夹名和网站内的其他文件名最好全部使用英 文小写形式，因为Dreameaver不识别中文文件名，而且有些网站服务器 要区分字母大小写。
任务1-2 创建班级风采网站站点
【子任务1-2-4】在“班级”站点中建立网页文件 操作步骤如下： ① 打开站点窗口，在文件面板上单击“展开”按钮即可打开“站点” 窗口。 ② 选中“站点-班级（E:\class）”文件夹，单击鼠标右键，在弹出的 快捷菜单中选择“新建文件”命令。 ③ 单击新文件名的名称部分，将untitled.htm改名为index.htm(作为网站 的首页文件)； ④ 选中“html”文件夹，单击鼠标右键，在弹出的快捷菜单中选择 “新建文件”命令，建立网页dangan.htm(班级档案)； ⑤参照步骤，分别建立网页xuexi.htm（学习园地）、wenti.htm（文体 天地）、jigou.htm（组织机构）、zhibu.htm（支部生活）、tupian.htm （风彩图片）、rongyu.htm（荣誉殿堂）。 （见操作演示）。（结果如 “建立网站新文件结果 ”图所示）
任务1-5 设置网页主体内容
设置网页主体内容之后的效果
任务1-6 制作版权区
本网站虽然不大，但也应体现完整性，所以也应设置版权 区。 【子任务1-6-1】制作版权区 操作步骤如下： （1）将光标置于末行起始点，执行“插入”菜单 “HTML”下“水平线”命令。出现一条水平分隔线，并处于 选中状态，在属性面板中设置其属性，如宽度、高度、对齐 方式、阴影等。这里设置宽度为980，阴影。（操作演示） （2）在下一行输入“Copyright@2012-2016 班级风采工作” （3）选中输入的版权内容文本，设置对齐方式为居中对 齐（首次使用对齐方式应用新建CSS规则，如选择器名称为 center1。操作步骤与前述新建CSS规则类似），字号为16。设 置效果如图“版权区的设置”所示。（操作演示）
任务1-3 制作并添加网页标题栏
【子任务1-3-2】添加主页标题图像“班级风采” 操作步骤如下： （1）在Dreamweaver应用程序窗口中执行“站点”→“管理站点”菜 单命令，在弹出的对话框中选中需要打开的站点名称。例如：班级。单 击【完成】按钮，“班级”站点显示在文件面板中。 （2）双击打开需要制作的网页文件。例如，双击打开主页文件 index.htm。首页文件打开，此时是空白页。 （3）执行“插入”菜单中的“图像”命令，或单击“常用”工具栏 中的【图像】按钮，弹出“选择图像源文件”对话框（见操作演示）。 如果“常用”工具栏未打开，可按快捷键【Ctrl】+【F2】打开。 （4）在指定文件夹中找到标题图像文件，选择标题图像文件后，对 话框右侧将显示该图像的预览图，单击【确定】按钮，插入结束。
任务1-2 创建班级风采网站站点
【子任务1-2-3】在“班级”站点中建立站点子文件夹 在已建好的网站中，一般还需要建立一些子文件夹，用 于归类存入网站中的图像、网页、动画、模板等文件。 操作步骤如下 ： （1）在文件面板中选择“站点-班级（E:\class）”文件 夹，单击鼠标右键，在快捷菜单中选择“新建文件夹”选项。 （见操作演示） （2）单击untitled文件夹的名称部分，输入image，将文 件夹改名为image，此文件夹用于存放图像文件； （3）参照步骤（1）和（2），依次建立文件夹 “html”(用于存放非首页的其他网页)、“music”（用于存放音 乐文件），“swf”（存放Flash动画）。（操作演示）（结果 如图“建立站点子文件夹结果 ”所示）
任务1-4 设置导航栏
【子任务1-4-2】添加导航文本 （1）在表格的第一个单元格里单击鼠标，出现光标插入点，通过键盘输入文字 “班级档案”。 （2）选中文字“班级档案”，在属性面板中单击CSS按钮，出现CSS属性面板。 （见操作演示） （3）单击字体大小中的下拉按钮，第一次使用字体设置会出现“新建样式规则” 对话框，“输入选择器名称”为font1，“选择器类型”为“复合选择器（基 于选择内容）”，“选择定义规则的位置”为“仅限该文档”，（见操作演 示） （4）单击“确定”按钮，在属性面板中设置其字体为默认、大小为18、对齐方 式 为居中对齐。（见操作演示）。 （5）参照步骤（2）～（4），输入并设置其他导航栏：“组织机构”、“荣誉 殿堂”、“风彩图片”、“文体天地”、“学习园地”、“支部生活”。 如 图所示。
任务1-4 设置导航栏
设置导航栏效果图
任务1-5 设置网页主体内容
为使网页内容设置更灵活，可以借助“层”来定位文字区 域。 【子任务1-5-1】设置网页主体文字区域并添加文字 操作步骤如下： （1）在“插入”面板的“布局”工具栏上，单击【绘制 AP Div】按钮。 （2）在页面需要放文字的地方，按住鼠标左键拖动出一个 矩形区域（见操作演示）。 （3）此时层处于选中状态，通过拖动控制点可以调整层的 大小。将鼠标放在层的边缘线上，鼠标呈“十字”箭头时， 拖动鼠标可以移动层的位置。 （4）应用层属性面板可设置层属性，如背景颜色为 #CCFFCC等（见操作演示） 。
1.1 班级风采网站制作过程
1.1 班级风采网站制作过程
班级风采主页效果如图所示，下面详述其制作过程
任务1-1 设计规划班级风采网站
网页制作之前要进行规划，内容包括：设置主题栏目，设计网页结构，确定 网站风格等等。
设置主题栏目：本班级风采网站的主题栏目包括：班级档案、组织机构、荣 誉殿堂、风采图片、文体天地、学习园地、支部生活。
任务1-2 创建班级风采网站站点
建立网站新文件结果
任务1-3 制作并添加网页标题栏
标题图像制作效果图如下：
【子任务1-3-1】制作网页标题图像 一个网页通常有标题部分，来访者可以通过标题了解网站的名称及网站类型。标题部分可以是文本， 也可以是图像。如果使用图像标题，我们可以用Fireworks CS5自己制作。 操作步骤如下： （1）启动Fireworks CS5，选择画布宽度为980，高度为80，画布颜色自定义为黑色。单击【确定】 按钮，进入到Firework主界面。（见操作演示） （2）在画面中间用“文本”工具输入“班级风采”，在属性面板中设置：字体大小为80，颜色为 淡兰色（#00FFFF），字体为隶书。（见操作演示）。 （3）在画布左边用“文本”工具输入“计算机多媒体”，在属性面板中设置：字体大小为22，颜 色为白色，字体为黑体。 （4）在画布右边用“文本”工具输入“Computer Multimedia” ，在属性面板中设置：字体大小为22， 颜色为白色，字体为黑体。 （5）单击保存按钮，给出保存位置（如E:\class\image）及文件名（扩展名为.png），以便以后修改。 （6）执行“文件”菜单中的“图像预览”命令，设置文件格式为GIF，单击“导出”按钮。（见操 作演示） （7）在“导出”对话框中选择保存在：e:\class\image，文件名为：bjbt，单击“保存”按钮。（见 操作演示）
设计网页结构：网站主页规划的结构下页图所示。网站的主页可采用简单明 了的板块结构：采用上中下结构。上边为标题区，用于存放网站标题等内容。中 间为主页主体区，主体区又分为左右两部分，左边窄，用坚式结构放置导航栏。 右边宽，存放班级简介等内容。下边为版权区。用于存放版权声明信息。 设计网站风格：由于是班级网站，可选简明清新型。