网页设计综合实训实训指导方案

1《网页设计综合实训》实训指导方案一、实训目的与要求《网页设计综合实训》主要目的是让学生通过这门实践课程的学习了解和掌握网页设计的基本方法，通过不断上机实习训练达到解决实际的问题。因此，在本学期特设置此课程设计，集中一段时间使学生综合运用所学习的网页制作知识及以前所学习的计算机方面的知识，按照网站制作的流程，完成一个相对具体、综合的网站，全面巩固学生的知识，培养学生解决实际问题的能力，从而达到学以致用的目的。二、实训内容1.实例实训以一个电子商务静态网站设计的实例指导学生如何独立完成电子商务静态站点的设计和制作。让学生在机房实际操作，按照给定的实例完成实例中站点的创建和设计制作。2.自建站点实训让学生自行选择站点的主题，从规划站点到上传文件一步一步完成整个站点的创建、调试和上传工作。3.总结对学生的全部作品进行考核，并选择典型的案例对实训的结果进行考核。2三、参考课时标题实训内容实训课时预备实训动员1实训一基本知识回顾1实训四实训作品的站点规划2实训五整体布局设计3实训六搜集和创建资源3实训七页面素材设计3实训八样式设计3实训九首页模板设计2实训十二级页面模板设计2实训十一各页面的细化、测试和上传作品4实训十二总结1总计24四、实训材料准备1.软件准备Dreamweaver8中文版、PhotoShop7.0以上版本、Flash中文版（本实训对FLASH技术不做要求）。2.硬件准备网络条件：与因特网连接的局域网。教师用机：Windows2000Server及以上版本。学生用机：Windows2000Professional及以上版本。3五、综合实训考核办法：1)系统文档20分2)编写代码30分3)程序调试10分4)实训出勤20分5)技术含量10分6)美工设计10分4目录实训一基本知识回顾··························································1实训二实例一讲解·····························································4实训三实例一操作·····························································6实训四实训作品的站点规划·················································8实训五整体布局设计························································10实训六搜集和创建资源·····················································13实训七页面素材设计························································15实训八样式设计······························································17实训九首页模板设计························································19实训十二级页面模板设计················································20实训十一各页面的细化、测试和上传作品···························21实训十二总结·······························································23附录一网站规划书书写格式···············································25附录二CUTEFTP使用说明················································271实训一基本知识回顾一、实训目的和要求温习网页制作的课程重点难点，使学生对Dreamweaver8各方面的操作知识系统的由“片”的认识转向“面”的认识。二、实训内容Dreamweaver8的基本操作：站点、表格、图像、链接、框架等。三、实训准备Dreamweaver8中文版。四、实训步骤各实训指导教师按照所代学生的情况不同选择性地按下列步骤温习Dreamweaver8的重点难点知识。(一)站点创建和规划1.本地站点的创建管理2.站点视图的使用方法(二)链接的处理方式1.相对路径2.链接到命名锚3.管理链接(三)图像的处理方法1.插入图像的相关操作2.使用导航条3.客户端图像映象2(四)布局视图、表格和层的应用1.使用布局视图的相关操作2.自动伸展类型的版面宽度3.草稿图的使用4.关于插入表格的相关操作5.创建分层、使用分层时的操作6.使用分层面板7.利用分层排版时的注意事项(五)框架1.框架和框架集的一些标识性概念2.创建框架3.框架文件的存储4.框架和框架集属性的设置5.在框架中使用链接(六)CSS样式1.创建三种类型的CSS样式2.创建外部链接的CSS样式单。五、实训方法使用投影进行讲解演示，并抽样进行检查。六、考核办法此部分实训内容采用抽样考察的方法，考核以操作的熟练程度和正确性为评分标准，以A（优秀）、B（良好）、C（及格）、D（不及3格）为成绩标准。七、思考和练习1.创建一个表格，预览效果为各边框格式是虚线、颜色是红色、各边框的宽度为1像素（px）。2.在制作站点时，会遇到CSS样式的处理，而CSS样式有两种处理方法：一是应用于单一文档的CSS样式；二是外部连接的CSS样式单。请问建立站点时如何选择为最优。3.怎样解决因为浏览分辨率的不同所造成的网页布局错位的现象。4.怎样利用层(Layer)来制作下拉式菜单。4实训二实例一讲解一、实训目的和要求通过对一个具体的静态电子商务网站的解析，使学生了解制作电子商务静态站点的步骤，让同学们对静态电子商务网站的粗略和宏观认识得到细化，使其懂得如何独立面对静态电子商务网站的设计。由实训指导教师自行选择站点作为实例。实例要求如下：1.站点系电子商务相关站点。2.站点模块功能清晰，虽然是静态站点，但也能反映各模块的基本功能。3.为了便于教学，站点应该具有布局（表格/布局视图/层/框架）、图像、链接、CSS样式等网页设计制作中常用的知识点和操作。二、实训内容讲解和演示整个站点的制作过程和设计方法。三、实训准备Dreamweaver8中文版。四、实训步骤1.由实训指导教师详细讲解静态电子商务站点（静态公司站点）的设计方法和组成模块。2.由实训指导教师详细演示首页和一个以上的二级页面的整个制作过程（从站点创建开始）。3.抽样检查学生的听课效果，在时间允许的条件下，让学生上教师机独立完成页面制作。54.对学生的抽样检查进行分析，重点讲解其失误或错误的地方。五、实训方法使用投影讲解演示，并抽样进行检查。六、考核办法此部分实训内容采用抽样考察的方法，考核以操作的熟练程度和正确性为评分标准，以A（优秀）、B（良好）、C（及格）、D（不及格）为成绩标准。七、思考和练习1.怎样优化公司站点创建规划阶段的公共资源和独有资源的存储方法？2.静态电子商务站点的创建应该遵循那些基本要素？6实训三实例一操作一、实训目的和要求将实训二的内容在机房进行操作，让学生切实地对静态电子商务站点的设计进行操作。二、实训内容对给定的实例站点进行分析，并进行制作，最后由实训指导教师为每一位学生的制作成品进行考核。三、实训准备Dreamweaver8中文版、PhotoShop7.0以上版本、制作站点时不能在机房完成的或以学生能力不能制作的素材。四、实训步骤1.准备工作：1)站点的创建和规划。2)设计素材和内容素材的准备。3)CSS样式的准备。2.设计工作：1)草稿图的制作。2)映射草稿图，按照草稿图的设计利用布局视图进行版面布局。3)布局完毕后，进行内容素材和设计素材等相关素材对象的插入工作。3.细化工作：71)对内容、表格、链接、图片等进行CSS样式的应用。2)细化整个版面。4.测试整个站点并交由实训指导教师进行考核。五、实训方法在机房进行实训，由实训指导教师亲临指导。六、考核办法此部分实训内容采用全体考察的方法，考核以操作的熟练程度和正确性为评分标准，以A（优秀）、B（良好）、C（及格）、D（不及格）为成绩标准。七、思考和练习通过此部分实训，你是否熟练掌握建立静态电子商务站点所需要各知识点的操作技能？由那些需要进一步的由教师在今后的课堂中进行讲解和演示。8实训四实训作品的站点规划一、实训目的和要求使学生在创建站点之前对站点有总体的规划，让学生对自己即将设计和制作的站点进行规划并完成站点规划书的撰写。实训作品的选题范围：1、班级网站2、个人网站3、电子商务消费网站（为一种消费品制作电子商务站点）4、电子商务公司网站（为某个企业制作电子商务站点）因为是建立静态的电子商务站点，所以在讲解和分析站点规划书时应该着重于站点的设计，而不是其他方面，静态的电子商务站点没有交互式的访问模式和系统，所以只能是发布信息的工具，这点请实训指导教师在授课和指导时予以关切。正式站点规划书见附录。二、实训内容让学生在因特网上申请免费的个人主页空间，向学生讲解站点规划的重要性以及站点规划书的撰写方法，并由学生自行思考并完成实训指导书的撰写。三、实训准备Dreamweaver8中文版7、WORD2000以上版本。四、实训步骤1.进行实训作品的选题并申请个人主页空间。92.站点规划书的书写格式和方法的讲解。3.详细讲解静态电子商务站点创建和制作的步骤，并分析制作站点规划书的重要性和必要性，使学生规范网站设计的流程。4.学生思考并撰写自行创建站点的站点规划书。五、实训方法首先由实训指导教师在机房讲解站点规划书的书写方法和基本格式，其次由学生针对所选的主题进行站点规划。六、考核办法此部分实训内容采用全体考察的方法，考核以站点规划书的完整性、实用性和创造性为评分标准，以A（优秀）、B（良好）、C（及格）、D（不及格）为成绩标准。七、思考和练习作为电子商务专业，你觉得在撰写电子商务站点规划书应该着重突出哪几个方面，为什么？10实训五整体布局设计一、实训目的和要求在站点规划完成的基础上，按照站点规划书进行网站整体的布局设计。要求:1.设计作品中的各种文件夹和文件名均使用英文名（小写）；2.设计作品首页文件名为index.htm、default.htm等；3.设计作品中中文字体设定为简体字；4.网页应有较好的浏览兼容性，同时应考虑显示分辨率（以800*600为显示标准），浏览器为IE7.0以上；5.主题鲜明，具有实用性，清晰表达设计意图；6.结构清楚合理，便于浏览查找；7.色彩搭配协调，页面美观，具有艺术品位；8.注意下载速度、语言代码、导航效果、实用性、时效性；二、实训内容1.站点的创建。2.绘制草稿图。3.利用草稿图对网站各页面进行布局设计。三、实训准备Dreamweaver8中文版/英文版、PhotoShop7.0以上版本。四、实训步骤1.指导学生完成站点的创建。要求如下：111)站点文件夹以自己的班级和自己的学号的组合命名。2)在站点文件夹中建立相关页面，以确保连接和图像处理操作中路径的正确性。3)所有的资源都保存在assets资源文件夹中，assets文件夹可以细分为pic、animation、sound等子文件夹。4)如果需要CSS样式单文件，则CSS样式单文件单独放置于css文件夹中。2.指导学生完成草稿图的绘制，包括首页和二级页面。要求如下：1)为了便于布局视图的绘制，草稿图的宽度统一为777像素，高度根据站点内容进行设置。2)草稿图统一用photoshop进行绘制。3)草稿图上必须表明每板块的内容名称。3.指导学生利用草稿图进行网页各个页面的布局设计（使用布局视图）。方法简述如下：1)进入布局视图。2)载入草稿图。3)绘制一个布局表格覆盖整个草稿图，即绘制一个宽度为777的表格。保证在