《网页设计及制作》课程实训指导书.docVIP

《网页设计与制作》课程实训指导书 实训目的 本次实训给学生提供了深入学习的资料和信息，紧紧围绕网站设计流程：规划、设计、开发、发布、维护来进行网站的开发，模仿并设计制作出相关的网站。以此作为学生学习这门课程的阶段性总结，使学生复习、巩固所学过的理论，并予以适当的深化，进一步训练学生的基本技能（如：搜集资料、整理数据、制表绘图、发现与分析问题、寻求解决问题的方案等），训练学生掌握计算机操作技术，运用计算机技术进行数据处理分析。 实训任务 通过对网站的设计，使学生熟练应用网站设计软件，使学生网站建设有一个综合系统的掌握。 在制作过程中，主要完成对网页的布局、色彩的搭配、框架的应用、层的运用、行为的实现、表单的使用、模板和库的应用等，完成项目作品。 1．网站策划 1）画出网站结构草图。 2）确定栏目。 3）进行版面设计。 分为首页设计和二级页面的设计，清楚在页面上分别要放置哪些内容 4）搜集素材。如相关文字录入，图片素材，班级相片等等。 2．制作网页。 1）建立站点。 例如：命名为webfile,网站的结构如下： 2）进行主页的设计。 要求主页中包含一个自己完成的Flash。 3）进行其他页面的设计。 4）建立几个页面间的链接关系。 3．测试网站 4．作品提交与评分 实训计划 序号 任务 内容 课时 1 实训任务讲解 项目任务分析 1 2 网站策划 画出网站结构草图 1 确定栏目 1 进行版面设计 1 搜集素材 3 3 制作网页 建立站点 1 进行主页的设计与制作 8 进行其他页面的设计 2 建立几个页面间的链接关系 2 4 测试网站 检查网页的运行情况 1 5 作品提交与评分 依照评分表进行考核 1 6 实训报告的编写 参见附录 2 合计 24 实训环境 计算机上要求安装有Dreamweaver、Flash、photoshop等软件。 计算机与互联网相连，以便学生能够浏览优秀网站，搜集相关素材等。 实训过程（含步骤） 1. 确定目标 通过网络就某个专题搜索资料， 题材不限，要求有个人特色、新颖和有吸引力，并对网站作简单的介绍如主题是什么？分那几个栏目，每个栏目的特色和主要内容是什么？ 参考专题：对计算机基础教育的看法，互动式教学的方式，网上论坛，QQ聊天论述等。也可以是其它的有兴趣的专题如：文学、历史、科技、体育、旅游、生活、时尚等。 参考选题：班级主页，动漫，个人主页，求职简历，电子商务网站，花卉网站，学习网站…… 2. 选择目标用户 确定了站点实现的目标之后，需要确定站点的浏览客户。创建世界上每个人都能使用的 Web 站点是不可能的。人们的兴趣、爱好不同，使用不同的浏览器，以不同的速度连接，这些因素都会影响站点的使用。因此需要确定目标用户，根据用户的特点来设计站点风格。 3. 组织站点结构 如果没有考虑文档在文件夹层次结构中的位置就开始创建文档，最终可能会导致一个充满了文件的臃肿混乱的文件夹，或导致相关的文件散布在许多名称类似的文件夹中。 设置站点的常规做法是在本地磁盘上创建一个包含站点所有文件的文件夹（称作本地站点），然后在该文件夹中创建和编辑文档。当准备好发布站点并允许公众查看时，再将这些文件拷贝到 Web 服务器上。 组织站点结构时，应注意以下三个问题： 1)????? 将站点分类，把相关的页面放在同一文件夹中。 2)????? 将图像和声音文件等项目放在指定的文件夹中，以便于文件的查找定位。例如，将所有图像放在Images 文件夹中，当在页面中插入图像时，就可以方便的找到它。 3)????? 本地站点和远程 Web 站点应该具有完全相同的结构。如果使用 Dreamweaver创建本地站点，然后将全部内容上传到远程站点，则 Dreamweaver确保在远程站点中精确拷贝本地结构。 ?4. 设计外观 页面布局和设计保持一致非常重要。如果不考虑板块设计，浏览者会觉得你的网站内容杂乱、无条理，先要考虑好自己设计的板块与链接结构；根据所需的站点布局外观，在实训报告本上画一个站点草图，以便以后建立站点时可以按照它来操作。如图1所示，是一个站点首页的设计布局图。 5. 设计导航方案 设计站点时，应考虑如何使访问者能够方便的从一个区域移动到另一个区域。具体考虑以下几点：明确“当前位置”；导航方便；提供与网站管理员的联系方法。 6. 规划和收集资料 完成了设计和布局后，就可以创建和收集需要的资源了。资源可以是图像、文本或媒体等项目。在开始开发站点前，请确保收集了所有这些项目并做好了准备。否则，可能为找不到一幅图像而中断设计、开发过程。 Logo Banner 简单功能 导航栏 功能列表 或 局部导航 主要内容 版权声明 实训要求 1．动手制作网页之