《网页设计与制作》课程实训指导书

网页设计与制作课程设计实践指南一、培训目的网页制作课程设计是电子商务专业的重要专业必修课，也是该专业的重点建设课程。随着电子商务的快速发展，网站建设变得越来越重要。目前，许多企业上网冲浪，开展网上营销活动，设计制作自己的商务网站是企业实现网络管理的重要手段。因此，作为电子商务专业的学生，学习网页的设计和制作是非常必要的。通过课程设计的训练，每个学生可以在掌握理论知识的基础上，通过个人实践，掌握网页设计和制作的相关技术以及网页制作的操作技能，独立设计一个小型网站。二、培训任务通过网站的设计，学生可以熟练应用网站设计软件，全面系统地掌握网站建设。在制作过程中，主要完成网页布局、配色、框架应用、层次应用、行为实现、表单使用、模板和库应用等。完成项目工作。具体要求是：(一)网站的网页数量不少于10页(2)至少有一页使用表格布局(3)至少有一个页面使用CSS DIV布局(4)至少一个页面使用框架布局，并且至少一个页面使用页内框架(5)为网站设计问卷(6)正确使用图片，并将所有图片放在一个文件夹下。(7)可以使用Dreamweaver工具三、培训计划序列号工作内容上课时间1网站规划项目任务分析，绘制网站结构草图1确认列1做布局设计1收集材料12制作网页建立一个网站1设计和制作主页2设计其他页面2在几个页面之间建立链接13试验基地检查网页的操作14作品的提交和评分根据分摊比额表15培训报告的编写见附录(课后完成)0总数12四、培训考核及评分根据培训期间的学科评估、对培训的态度、网站的目录结构、每个页面的布局结构和颜色匹配、文字、图像和动画的合理匹配、页面之间的链接是否顺畅、网页制作技术的应用、网站的整体浏览效果等方面，进行综合评分。评分参考标准如下表所示。网站开发培训参考评分标准序列号评估项目评级尺度1网站效应(1)内容：主题清晰，内容健康具体，每一页的文字、图片和动画都能清晰表达主题。70%(2)布局结构：布局结构合理。每个页面都有返回到下一级的文本或按钮，或者链接到其他页面。(3)视觉感受：色彩搭配和谐美观，页面设计规范，没有乱码、空链接和错链接。(4)网站风格：网站有自己的特色，有创新的主题、人物、图片和动画。2学科评估培训期间组织纪律性强，无迟到早退现象。10%3创新制作的网页新颖、巧妙、创新。5%4成员协作所有成员都在规定的时间内完成了培训任务，没有重复或剽窃。5%5训练报告培训报告写得认真、完整、易读、工整，培训效果很好。10%总数100%工作完成情况在现场检查验收，培训报告在14周内提交。附件1:培训报告内容涉及目录网站的全称和标志；建立网站的目的和意义；网页设计和制作中最突出的创意(如Amgo的“让我们走”和标志设计有自己的特点)；网站的栏目设计；配色及其含义(如绿色、金黄色和淡白色，体现优雅舒适的感觉；)网站的结构图和页面构成；网站设计中具体实现的几个关键功能及相关技术描述(如布局方法：应用层、应用表单、应用模板、应用闪存或其他脚本技术)；抓取每个网页的图片，并给出一个简短的解释。经验(1)制作教学资源网站。(2)制作个人网站。(3)制作班级网站。(4)制作学习网站。(5)制作学校网站。(6)制作旅游网站。(7)制作公司网站。附录3:网站设计和制作案例3.1规划网站1.规划网站主题在第一手设计网站之前，为了确定网站的主题，每个网站都应该有一个明确的主题。本章创建的网站是一个学习网站。主要介绍网页制作的基础知识、网站建设的基础知识、网页制作的技巧、网页特效制作的方法、网络编程语言、动画制作、图像处理等。同时，它为读者提供了大量的网页制作材料、网页设计和编程的视频教程，解决了学习网页设计和制作过程中遇到的问题。因此，网站的主题是“提供制作材料，解决学习问题，指导网页制作”2.确定网站风格在确定了网站的主题后，应该根据主题选择网站的风格。由于本章建立的网站是一个学习型网站，它要求结构清晰，结合现代教学理念，将学习与网络合理整合，实现教学对象广泛，使用方便，空闲时间少。该网站的主要特点如下：(1)设计风格应该流行。为了提高浏览速度，尽可能减少图片的使用，多利用表格来达到效果。(2)背景颜色以灰色和白色为主，黄色为辅，文本颜色以黑色为主，蓝色和红色为辅。(3)文本内容丰富，知识丰富，标题简洁明了。字体一般为宋体，大小为12像素。(4)首页的格式结构采用典型的“国家”字型结构，二级栏目网页采用“顶部嵌套左框架”结构和简单的“左右”结构。本章介绍的网站名称为“网页设计与制作教学网”，简称“网页教学网”，英文名称为“zzwebjx”。3.设想网站的栏目结构首先在纸上画出网站栏目结构的草图，经过反复推敲，最终确定完整的栏目和内容层次。本章“网络教学网络”的栏目结构见表17-1。图17-1“网页设计与制作教学网”的主页浏览效果表17-1“网络教学网络”的栏目结构一流的专栏第二列第3级列和内容页面主页index.html网页制作基础：wyjch.htmlwyjch_xx_xx.html网页制作技巧：wyjq.htmlwyjq_xx_xx.html网页特效：wytx.htmlwytx_xx_xx.html网络资料下载：wysc.htmlwysc_xx_xx.html网络编程技术：wybch.htmlwybch_xx_xx.html网络图书浏览：wybook.htmlwybook_xx_xx.html浏览在线课程：wykch.htmlwykch_xx_xx.html教学交流与回答：wyjl.htmlwyjl_xx_xx.html网站建设指南：wzjsh.htmlwzjsh_xx_xx.html图像动画：txdh.htmltxdh_xx_xx.html锻炼测试银行：examtk.htmlexamtk_xx_xx.html教学论坛()为了简化网站的浏览过程，大多数网页可以通过二级栏目浏览内容页面。主页的主菜单包括11个菜单项：制作基础、制作技巧、网页特效、网页素材、网络编程、网络书籍、网络课程、教学交流、网站建设指南、图像动画、考试题库。每个主菜单中包含的弹出子菜单如表17-2所示。三级列和内容页使用数字来标识它们的子类别。例如，JavaScript脚本用于创建网页的第一个内容页面。它的文件名是wytx_02_01.html，“02”表示它所属的子类别，该级别的网页对应于主页中的子菜单，“01”表示第一个内容页面的序列号。主页中的表17-2菜单主页中主菜单的名称弹出子菜单名称生产基础Dreamweaver、Frontpage、HTML、XML、CSS、JavaScript、VBScript。生产技能网页文本、网页图像、网页链接、网页导航、表格布局、图层布局、框架网页、模板和库、媒体应用、网页美化、表单网页、颜色匹配。网页特效标记效果、脚本效果、行为效果、插件效果。网页材料网页模板、徽标图片、主页背景、精美按钮、网页广告、网页欣赏、动画图片、扩展、导航菜单。网络编程ASP、PHP、JSP、NET、Java、数据库。网络书籍网页制作、特效、网络编程、图形图像、动画制作、网站建设、艺术设计。网络课程学习介绍、操作指导、教学指南。芬顿有问答、经验交流、方法讨论和生产经验。车站建筑指南规划设计、创意设计、网站结构、域名申请、应用空间、网站测试、网站发布。图像动画烟花、Photoshop、Flash。试题库理论题库、操作题库、实训题库、成套题库和模拟实训。视频教程Dreamweaver视频教程，Fireworks视频教程，Flash视频教程，Photoshop视频教程，通用软件。4.规划网站目录结构和链接结构根据网站规划确定的栏目结构，应创建网站目录。网站的目录结构要求层次清晰有序，明确区分首页、栏目页和内容页，有利于今后的修订。“网络教学网络”的目录结构和每个文件夹中存储的文件类型见表17-3。注意。文件夹和文件的名称不建议使用中文名称，因为中文名称很容易在HTML文档中产生乱码，导致链接错误。表17-3网站目录结构和存储文件类型文件夹名称存储的文件类型钢性铸铁CSS样式文件。闪光动画文件，视频文件。图像图像文件，照片。js外部脚本文件。图书馆图书馆文件。音乐音乐，音频文件。模板模板文件。文本文本材料。网页_1一级页面文件，有多个子文件夹，如网页_1_01。网页_2一个辅助页面文件，它有多个子文件夹，如网页_2_01。其他的其他类型的文件。web待机备用页面，备用材料index.html主页网站的链接结构不同于目录结构。网站的目录结构是指网站的文件存储结构，通常只有设计者才能看到。网站的链接结构是指通过网页之间的链接表达的网站结构，访问者在浏览网站时可以观察到这种结构。本网站的链接结构采用“网”链接结构，结构图如图17-2所示。图17-2“网络教学网络”中的链接结构5.主页布局设计使用表格设计主页和其他几个主要导航页面的布局结构草图。主页的布局结构示意图如图17-3所示。两种形式导航页面的布局结构示意图如图17-4和图17-5所示。由于该网站中的许多页面采用了图17-5所示的布局结构，因此该网页可以制作成模板。图17-3主页布局结构示意图图17-4由“框架”构成的导航页面图17-5由“表格、图层、浮动框架”组成的导航页面3.2材料的制备根据网站的栏目、内容设计、链接结构设计、主页布局结构、几个主要导航页面的布局结构，准备所需的材料1.准备课文准备大量网页所需的文本材料。您可以从各种网站和书籍中收集文本材料，然后将其制作成word文档或文本文件。注意对各种文本材料的文件名进行科学合理的命名，避免将来遗漏所需的文本内容。2.准备徽标使用Fireworks或Photoshop自定义此网站的徽标。徽标应该与本网站的主题一致，并且应该是创新的。3.准备图片和按钮根据互联网或资料光盘的需要收集所需的图片和按钮，有些图片、按钮需要使用自己的图像处理软件。请注意，图片文件应该尽可能小。4.准备动画网站中的动画最好是突出主题，并做好收尾工作。动画通常由flash软件制作。本网站主页和导航页面的标题动画由flash软件定制。5.建立一个图书馆项目网页中经常使用的项目，例如版权区域，可以预先定义为库项目，以便在网页制作中重用，从而提高工作效率。3.3创建网站1.创建本地网站在开始设计网页之前，您必须首先定义网站。因为网页只是网站的一部分，所以所有设计的网页和相关文档都应该放在网站中。定义站点的优势在于定义站点后的所有操作都是在站点的统一监控下进行的。如果使用外部文件，Dreamweaver将自动检测、提示并询问是否将外部文件复制到站点中，以保持站点的完整性。如果文件夹或文件被重命名，系统将自动更新所有链接，以确保原始链接关系的正确性。在创建站点之前，创建站点时需要建立一个文件夹来指定站点的存储位置。在视窗操作系统中，打开“资源管理器”并创建一个名为“网络教学网络”的文件夹。网站的创建在第3章中有详细描述，这里只给出一个简单的解释，这与第3章中的步骤不同。这里假设已经预先申请了主页空间，申请的网址是，用户名和密码已经知道。定义站点的步骤如下：(1)在Dreamweaver 8主窗口中，点击菜单【站点】-【新建站点】，弹出如图17-6所示的站点定义对话框。在这个对话框中，首先输入站点的名称，然后输入网址，如图17-6所示。然后单击下一步按钮继续下一步操作。(2)选择“否，我不想使用服务器技术”单选按钮，然后单击下一步按钮继续下一步操作。(3)选择单选按钮“编辑我的计算机上的本地副本并将其上传到服务器(推荐)”，然后在下面的文本框中输入本地计算机上站点文件的存储位置，或者选择存储位置，然后单击下一步按钮继续下一步操作。(4)选择“文件传输协议”作为连接远程服务器的方式，然后输入网络服务器的主机名、文件在服务器上的存储位置、文件传输协议用户名、文件传输协议密码等参数，如图17-7所示。然后单击下一