网页设计与网站建设实验与特效.doc

网页设计与网站建设 实验指导书 《网页制作》实训安排 一、实训目的 网页设计是操作性很强的一门课程。本学期学生主要学习了三个软件——Photoshop、Flash、Dreamweaver，学好这三个软件，是制作网页的关键，而学好的关键是多练。尽管平时上机有联系，但将三个软件联系的整合度还不够。 通过对个人网站或班级网站的设计，使学生熟练应用Dreamveaver MX和FrontPage MX网页设计软件，使学生对《网页制作》所学的内容有一个系统的理解和掌握。 在制作过程中，主要掌握对网页的布局、色彩的搭配、框架的应用、层的运用、行为的实现、表单的使用、模板和库的应用等，独立完成自己的作品并上传至Internet网上。 本次实训给学生提供了深入学习的资料和信息，紧紧围绕网页制作的流程：规划、设计、开发、发布、维护来进行网站的开发，制作出具有较高水准的静态网页。以此作为学生学习这门课程的阶段性总结，使学生复习、巩固所学过的理论，并予以适当的深化，进一步训练学生的基本技能（如：搜集资料、整理数据、制表绘图、发现与分析问题、寻求解决问题的方案等），训练学生掌握计算机操作技术，运用计算机技术进行数据处理分析。 二、实训时间：１周（５天） 三、实训地点：实验楼机房 四、实训设施 1． 相关基础：学生应熟练掌握Dreamweaver MX、Flash MX、FireWorks MX等软件的应用。硬件环境：(1)主机上要求安装有Dreamweaver MX、Flash MX、FireWorks MX等软件。(2)主机能与互联网相连、以便学生能够浏览优秀网站，搜集相关材料等。(3)将主机配置成WEB服务器。实训组织形式及进行方式：制作班级网页具有一定的开放性和综合性。因此采取小组协作学习的方式是非常必要的。小组成员的知识程度、学习能力和思维方式都有差异，可以通过讨论、交流与合作，取长补短、拓展思路。每个学习小组由6-8人组成，希望同学们能够结合所学知识，尽量独立完成相关任务，对于较复杂的操作部分，相邻同学间也可以团结协作、共同完成。按照“时间与任务安排”及时完成当天的网页操作任务，并用U盘保存网页，网页体裁、形式、风格不限。“参考网页”只是起到范例作用，希望同学们看到参考网页上的效果，还能想起来那些效果是如何设计的。每组设立一个组长，负责组织分配该组成员的具体工作。教师负责整个网页制作过程的体裁和内容的审核、系统指导和监督工作。1. 确定目标 2. 选择目标用户 Web 站点是不可能的。人们的兴趣、爱好不同，使用不同的浏览器，以不同的速度连接，这些因素都会影响站点的使用。因此需要确定目标用户，根据用户的特点来设计站点风格。 3. 组织站点结构 设置站点的常规做法是在本地磁盘上创建一个包含站点所有文件的文件夹（称作本地站点），然后在该文件夹中创建和编辑文档。当准备好发布站点并允许公众查看时，再将这些文件拷贝到 Web 服务器上。 组织站点结构时，应注意以下三个问题： （1）将站点分类，把相关的页面放在同一文件夹中。 （2）将图像和声音文件等项目放在指定的文件夹中，以便于文件的查找定位。例如，将所有图像放在Images 文件夹中，当在页面中插入图像时，就可以方便的找到它。 （3）本地站点和远程 Web 站点应该具有完全相同的结构。如果使用 Dreamweaver MX创建本地站点，然后将全部内容上传到远程站点，则 Dreamweaver MX确保在远程站点中精确拷贝本地结构。 4. 设计外观 1所示，是一个站点首页的设计布局图。 5. 设计导航方案 6. 规划和收集资料 Logo Banner 简单功能 ? 导航栏 功能列表 或 局部导航 主要内容 版权声明 七、实训计划表 时间安排 内容安排 第一天 上午 明确网站主题，应力求简洁，要点明确，要以简单的画面和语言告诉浏览者，站点的主题。收集网页素材，确定栏目，决定网站结构，通过小组讨论，画出网页草图。 下午 确定内容安排，将每个页面的草图设计完成。 相关的文字工作录入完毕，定义好本地站点，将资料保存。 第二天 上午 用Photoshop将网页草图实现，决定网站的配色方案，可以借鉴其他网站。对各个网页可以分工实现。 下午 制作网页中所需要的Flash。将在PS中完成的图片切片，保存。 第三天 上午 主页的设计 主要是对版面进行合理布局，利用表格和层对版面进行合理定位。通过文字图形的空 间结合，表达出和谐与美。利用DW，设计网页的排版方式，把各个切片放入DW中的表格。 下午 将相应的内容，放入网页的对应位置。其它页面的制作，注意与主页的和谐统一，并对各页内容进行充实；适当搜集一些网页特效，做出适合自己站点的特效。 第四天