网页设计与制作实训指导书.doc

《网页设计与制作实训指导书.doc》由会员分享，可在线阅读，更多相关《网页设计与制作实训指导书.doc（26页珍藏版）》请在三一办公上搜索。

1、网页设计与制作实训指导书一、实训目的与要求网页设计与制作主要目的是让学生通过这门实践技能课程的学习了解和掌握网页设计的基本方法，通过不断上机实训练习达到解决实际的问题。因此，在本学期特设置此课程设计，集中一段时间使学生综合运用所学习的网页制作知识及以前所学习的计算机方面的知识，按照网站制作的流程，完成一个相对具体、综合的网站，全面巩固学生的知识，培养学生解决实际问题的能力，从而达到学以致用的目的。二、实训内容（一）实例实训以电子商务静态网站设计的实例指导学生如何独立完成电子商务静态站点的设计和制作。让学生在机房实际操作，按照给定的实例完成实例中站点的创建和设计制作。（二）自建站点实训让学生自行

2、选择站点的主题，从规划站点到上传文件一步一步完成整个站点的创建、调试和上传工作。（三）总结对学生的全部作品进行考核，并选择典型的案例对实训的结果进行考核。二、参考课时标题实训内容实训课时预备实训内容概述3实训一基本知识回顾3实训四实训作品的站点规划3实训五整体布局设计9实训六搜集和创建资源9实训七页面素材设计6实训八样式设计6实训九首页模板设计12实训十二级页面模板设计3实训十一各页面的细化、测试和上传作品3实训十二总结3总计60三、实训材料准备（一）软件准备Dreamweaver 8中文版 、PhotoShop7.0以上版本、Flash中文版（本实训对FLASH技术不做要求）。（二）硬件准备

3、网络条件：与因特网连接的局域网。教师用机：Windows 7及以上版本。学生用机：Windows 7 及以上版本。四、综合实训考核办法：系统文档 20分编写代码 30分程序调试 10分实训出勤 20分技术含量 10分美工设计 10分目 录实训一 基本知识回顾1实训二 实例一讲解3实训三 实例一操作5实训四 实训作品的站点规划7实训五 整体布局设计9实训六 搜集和创建资源11实训七 页面素材设计12实训八 样式设计13实训九 首页模板设计15实训十 二级页面模板设计16实训十一 各页面的细化、测试和上传作品17实训十二 总结19附录一 网站规划书书写格式20附录二 CUTEFTP使用说明21实训

4、一 基本知识回顾一、 实训目的和要求温习网页制作的课程重点难点，使学生对Dreamweaver 8各方面的操作知识系统的由“片”的认识转向“面”的认识。二、 实训内容Dreamweaver 8的基本操作：站点、表格、图像、链接、框架等。三、 实训准备Dreamweaver 8中文版。四、 实训步骤各实训指导教师按照所代学生的情况不同选择性地按下列步骤温习Dreamweaver 8的重点难点知识。(一) 站点创建和规划1. 本地站点的创建管理2. 站点视图的使用方法(二) 链接的处理方式1. 相对路径2. 链接到命名锚3. 管理链接(三) 图像的处理方法1. 插入图像的相关操作2. 使用导航条3

5、. 客户端图像映象(四) 布局视图、表格和层的应用1. 使用布局视图的相关操作2. 自动伸展类型的版面宽度3. 草稿图的使用4. 关于插入表格的相关操作5. 创建分层、使用分层时的操作6. 使用分层面板7. 利用分层排版时的注意事项(五) 框架1. 框架和框架集的一些标识性概念2. 创建框架3. 框架文件的存储4. 框架和框架集属性的设置5. 在框架中使用链接(六) CSS样式1. 创建三种类型的CSS样式2. 创建外部链接的CSS样式单。五、 实训方法使用投影进行讲解演示，并抽样进行检查。六、 考核办法此部分实训内容采用抽样考察的方法，考核以操作的熟练程度和正确性为评分标准，以A（优秀）、B

6、（良好）、C（及格）、D（不及格）为成绩标准。七、 思考和练习创建一个表格，预览效果为各边框格式是虚线、颜色是红色、各边框的宽度为1像素（px）。1.在制作站点时，会遇到CSS样式的处理，而CSS样式有两种处理方法：一是应用于单一文档的CSS样式；二是外部连接的CSS样式单。请问建立站点时如何选择为最优。2.怎样解决因为浏览分辨率的不同所造成的网页布局错位的现象。3.怎样利用层(Layer)来制作下拉式菜单。实训二 一、 实训目的和要求通过对一个具体的静态电子商务网站的解析，使学生了解制作电子商务静态站点的步骤，让同学们对静态电子商务网站的粗略和宏观认识得到细化，使其懂得如何独立面对静态电子商

7、务网站的设计。由实训指导教师自行选择站点作为实例。实例要求如下：1. 站点系电子商务相关站点。2. 站点模块功能清晰，虽然是静态站点，但也能反映各模块的基本功能。3. 为了便于教学，站点应该具有布局（表格/布局视图/层/框架）、图像、链接、CSS样式等网页设计制作中常用的知识点和操作。二、 实训内容讲解和演示整个站点的制作过程和设计方法。三、 实训准备Dreamweaver 8中文版。四、 实训步骤1. 由实训指导教师详细讲解静态电子商务站点（静态公司站点）的设计方法和组成模块。2. 由实训指导教师详细演示首页和一个以上的二级页面的整个制作过程（从站点创建开始）。3. 抽样检查学生的听课效果，

8、在时间允许的条件下，让学生上教师机独立完成页面制作。4. 对学生的抽样检查进行分析，重点讲解其失误或错误的地方。五、 实训方法使用投影讲解演示，并抽样进行检查。六、 考核办法此部分实训内容采用抽样考察的方法，考核以操作的熟练程度和正确性为评分标准，以A（优秀）、B（良好）、C（及格）、D（不及格）为成绩标准。七、 思考和练习1. 怎样优化公司站点创建规划阶段的公共资源和独有资源的存储方法？2. 静态电子商务站点的创建应该遵循那些基本要素？实训三 一、 实训目的和要求将实训二的内容在机房进行操作，让学生切实地对静态电子商务站点的设计进行操作。二、 实训内容对给定的实例站点进行分析，并进行制作，最

9、后由实训指导教师为每一位学生的制作成品进行考核。三、 实训准备Dreamweaver 8中文版、PhotoShop 7.0以上版本、制作站点时不能在机房完成的或以学生能力不能制作的素材。四、 实训步骤1. 准备工作：1) 站点的创建和规划。2) 设计素材和内容素材的准备。3) CSS样式的准备。2. 设计工作：1) 草稿图的制作。2) 映射草稿图，按照草稿图的设计利用布局视图进行版面布局。3) 布局完毕后，进行内容素材和设计素材等相关素材对象的插入工作。3. 细化工作：1) 对内容、表格、链接、图片等进行CSS样式的应用。2) 细化整个版面。4. 测试整个站点并交由实训指导教师进行考核。五、

10、实训方法在机房进行实训，由实训指导教师亲临指导。六、 考核办法此部分实训内容采用全体考察的方法，考核以操作的熟练程度和正确性为评分标准，以A（优秀）、B（良好）、C（及格）、D（不及格）为成绩标准。七、 思考和练习通过此部分实训，你是否熟练掌握建立静态电子商务站点所需要各知识点的操作技能？由那些需要进一步的由教师在今后的课堂中进行讲解和演示。实训四 实训作品的站点规划一、 实训目的和要求使学生在创建站点之前对站点有总体的规划，让学生对自己即将设计和制作的站点进行规划并完成站点规划书的撰写。实训作品的选题范围：1.班级网站2.个人网站3.电子商务消费网站（为一种消费品制作电子商务站点）4.电子商

11、务公司网站（为某个企业制作电子商务站点）因为是建立静态的电子商务站点，所以在讲解和分析站点规划书时应该着重于站点的设计，而不是其他方面，静态的电子商务站点没有交互式的访问模式和系统，所以只能是发布信息的工具，这点请实训指导教师在授课和指导时予以关切。正式站点规划书见附录。二、 实训内容让学生在因特网上申请免费的个人主页空间，向学生讲解站点规划的重要性以及站点规划书的撰写方法，并由学生自行思考并完成实训指导书的撰写。三、 实训准备Dreamweaver 8中文版7、WORD2000以上版本。四、 实训步骤1.进行实训作品的选题并申请个人主页空间。2.站点规划书的书写格式和方法的讲解。3.详细讲解

12、静态电子商务站点创建和制作的步骤，并分析制作站点规划书的重要性和必要性，使学生规范网站设计的流程。4.学生思考并撰写自行创建站点的站点规划书。五、 实训方法首先由实训指导教师在机房讲解站点规划书的书写方法和基本格式，其次由学生针对所选的主题进行站点规划。六、 考核办法此部分实训内容采用全体考察的方法，考核以站点规划书的完整性、实用性和创造性为评分标准，以A（优秀）、B（良好）、C（及格）、D（不及格）为成绩标准。七、 思考和练习作为电子商务专业，你觉得在撰写电子商务站点规划书应该着重突出哪几个方面，为什么？实训五 整体布局设计一、 实训目的和要求在站点规划完成的基础上，按照站点规划书进行网站整

13、体的布局设计。要求: 1.设计作品中的各种文件夹和文件名均使用英文名（小写）；2.设计作品首页文件名为index.htm、default.htm等；3.设计作品中中文字体设定为简体字；4.网页应有较好的浏览兼容性，同时应考虑显示分辨率（以800*600为显示标准），浏览器为IE 7.0以上；5.主题鲜明，具有实用性，清晰表达设计意图；6.结构清楚合理，便于浏览查找；7.色彩搭配协调，页面美观，具有艺术品位；8.注意下载速度、语言代码、导航效果、实用性、时效性；二、 实训内容1.站点的创建。2.绘制草稿图。3.利用草稿图对网站各页面进行布局设计。三、 实训准备Dreamweaver 8中文版/英

14、文版、PhotoShop7.0以上版本。四、 实训步骤1.指导学生完成站点的创建。要求如下：（1）站点文件夹以自己的班级和自己的学号的组合命名。（2）在站点文件夹中建立相关页面，以确保连接和图像处理操作中路径的正确性。（3）所有的资源都保存在assets资源文件夹中，assets文件夹可以细分为pic、animation、sound等子文件夹。如果需要CSS样式单文件，则CSS样式单文件单独放置于css文件夹中。2.指导学生完成草稿图的绘制，包括首页和二级页面。要求如下：1) 为了便于布局视图的绘制，草稿图的宽度统一为777像素，高度根据站点内容进行设置。2) 草稿图统一用photoshop进

15、行绘制。3) 草稿图上必须表明每板块的内容名称。2. 指导学生利用草稿图进行网页各个页面的布局设计（使用布局视图）。方法简述如下：1) 进入布局视图。2) 载入草稿图。3) 绘制一个布局表格覆盖整个草稿图，即绘制一个宽度为777的表格。保证在分辨率变化的情况下，网页不会出现异常现象。4) 分别对个板块绘制布局表格。5) 进行保存。五、 实训方法机房操作。六、 考核办法此部分实训内容采用全体考察的方法，以百分制为满分，具体评分标准如下：1. 站点创建的规范性和熟练程度（25分）2. 草稿图的绘制（20分）3. 草稿图的载入（5分）布局视图的相关操作（50分）七、 思考和练习布局视图和表格视图在版

16、面布局中各有优势和劣势？对怎样的版面布局应该用布局视图，又对怎样的版面布局应该用表格视图？实训六 搜集和创建资源一、 实训目的和要求1. 按照实训四所完成的站点规划书的要求完成站点设计和制作中资源的搜集和创建工作。要求如下：a) 为了维护机房秩序，与因特网互联期间，由老师监督，不可利用实训时间进行任何与实训无关的活动。b) 实训指导教师推荐资源站点供学生参考。c) 实训指导教师严格把关，保证资源创建和搜集的完整性。二、 实训内容在因特网上搜索资源或在本机上创建所需资源。三、 实训准备Dreamweaver 8中文版 、WORD2000以上版本、Photoshop7.0以上版本、 与因特网连接的

17、局域网。四、 实训步骤根据网站规划书的内容和网站建设的需要，在因特网上搜索素材，素材包括网页的信息内容和网页的主题设计内容。五、 实训方法机房上网并利用本机软件完成。六、 考核办法 此部分是学生在因特网和本机上进行资源的搜集和创建，故无需进行考核，但需要指导学生按照站点规划书的要求完成站点资源的搜集和创建工作。七、 思考与练习此部分是学生在因特网和本机上进行资源的搜集和创建，故无练习。实训七 页面素材设计一、 实训目的和要求按照实训四所完成的站点规划书的要求完成站点设计和制作中的页面素材的设计工作。要求如下：1. 严格按照站点规划书的内容进行页面素材设计。2. 实训指导教师给予页面主题的相关指

18、导。二、 实训内容在本机上进行页面素材设计。三、 实训准备Dreamweaver 8中文版 、WORD2000以上版本、Photoshop7.0以上版本 。与因特网连接的局域网。四、 实训步骤1. 公共页面素材的设计。2. 首页独有页面素材的设计。3. 各二级页面独有页面素材的设计。4. 将设计好的素材文件存放在资源文件夹中。五、 实训方法机房利用本机软件完成。六、 考核办法 此部分是学生在本机上进行页面素材的搜集和创建，故无需进行考核，但需要指导学生按照站点规划书的要求完成页面素材的创建工作。七、 思考与练习此部分是学生在本机上进行页面素材的创建，故无练习。实训八 样式设计一、 实训目的和要

19、求按照实训四所完成的站点规划书的要求完成站点设计和制作中的HTML样式和CSS样式的创建。二、 实训内容1. HTML样式的创建。1) 创建字符型的HTML样式。2) 创建段落型的HTML样式。2. CSS样式的创建。1) 创建自定义的CSS样式。2) 创建HTML标记的的CSS样式。3) 创建CSS选择器的CSS样式。（用于创建伪锚名）。三、 实训准备Dreamweaver 8中文版 。四、 实训步骤1. HTML样式的创建。 2. CSS样式的创建 1) 内部CSS样式创建。2) 外部链接CSS样式单文件的创建。五、 实训方法机房利用本机软件完成。六、 考核办法此部分实训内容采用全体考察的

20、方法，以百分制为满分，具体评分标准如下：1. HTML、CSS样式（内部、外部）创建的熟练程度（30分）2. HTML、CSS样式（内部、外部）创建的操作正确性（40分）HTML、CSS样式（内部、外部）创建的结果正确性（30分）七、 思考与练习1、 导入外部链接的CSS样式单文件和链接外部的CSS样式单文件有什么区别？2、 CSS样式中自定义的CSS样式、HTML标记的CSS样式和CSS选择器样式各有什么独特的作用 ？实训九 首页模板设计一、 实训目的和要求按照实训四所完成的站点规划书的要求以及实训五的整体布局设计中的首页布局设计完成首页模板的整体设计和填充。二、 实训内容首页模板的制作和内

21、容的填充。三、 实训准备Dreamweaver 8中文版 。四、 实训步骤1. 根据实训五 整体布局设计中的首页布局设计制作首页模板。2. 在模板中插入实训六、七、八所设计好的资源和素材进行模板内容的填充，形成站点的首页。五、 实训方法机房利用本机软件完成。六、 考核办法此部分实训内容采用全体考察的方法，以百分制为满分，具体评分标准如下：1. 关于模板操作的熟练程度（50分）2. 关于模板操作的正确性（50分）七、 思考与练习无实训十 二级页面模板设计一、 实训目的和要求按照实训四所完成的站点规划书的要求以及实训五的整体布局设计中的首页布局设计完成二级模板的整体设计和填充。二、 实训内容二级页

22、面模板的设计和填充。三、 实训准备Dreamweaver 8中文版 。四、 实训步骤1. 根据实训五 整体布局设计中的各二级页面布局设计制作二级页面模板。2. 在模板中插入实训六、七、八所设计好的资源和素材进行模板内容的填充，形成站点的各个二级页面。五、 实训方法机房利用本机软件完成。六、 考核办法此部分实训内容采用全体考察的方法，以百分制为满分，具体评分标准如下：1. 关于模板操作的熟练程度（50分）2. 关于模板操作的正确性（50分）七、 思考与练习无 实训十一 各页面的细化、测试和上传作品一、 实训目的和要求按照实训四所完成的站点规划书的要求细化页面，使其达到最优的效果并进行测试和上传作

23、品。二、 实训内容1. CSS样式的应用和调整。2. 页面布局的调整。3. 页面文本、图片以及媒体内容的进一步细化。4. 链接的测试。5. 作品的上传。三、 实训准备Dreamweaver 8中文版 、PhotoShop7.0以上中文版本 。连接因特网的局域网。四、 实训步骤1. 按照站点规划书的内容要求对各个页面进行CSS样式的应用。 2. 细化各个页面，对各个页面的图像、表格、链接进行适当的调整，使站点更加美观。3. 测试所有链接。4. 在本地站点中测试整个站点的运作情况，并进行相应的调整。5. 利用CuteFtp工具进行作品上传。五、 实训方法机房利用本机软件完成。六、 考核办法此部分实

24、训内容采用全体考察的方法，以百分制为满分，具体评分标准如下：1. CSS应用操作的熟练程度（20分）。2. 页面布局的微操作（表格、布局视图、层等）熟练程度（10分）。3. 图片、链接调整的为操作熟练程度（10分）。4. CuteFtp的使用熟练程度。（50分）。七、 思考与练习完成整个站点后，对自己的站点的建设进行总结。实训十二 总结一、 实训目的和要求将学生制作的作品进行综合的考核，并进行总结。二、 实训内容1. 对学生作品进行考核。2. 选择典型的（优秀的和劣质的）作品分别进行总结。三、 实训准备Dreamweaver 8中文版、PhotoShop7.0以上中文版本。连接因特网的局域网。

25、四、 实训步骤1. 对学生的作品依次进行综合考核。2. 抽取典型（优秀和劣质）的作品进行全面的解析。五、 实训方法机房利用本机软件完成。六、 考核办法此部分实训以考核为主，对学生组品进行整体的考核。采用全体考察的方法，以百分制为满分，具体评分标准如下：a) 系统文档 20分b) 编写代码 30分c) 程序调试 10分d) 实训出勤 20分e) 技术含量 10分f) 美工设计 10分七、 思考与练习无。附录一 网站规划书书写格式一、 建设网站前的市场分析1、相关行业的市场是怎样的,市场有什么样的特点，是否能够在互联网上开展公司业务。 2、市场主要竞争者分析，竞争对手上网情况及其网站规划、功能作用

26、。3、公司自身条件分析、公司概况、市场优势，可以利用网站提升哪些竞争力，建设网站的能力（费用、技术、人力等）。二、 网站内容规划1. 根据网站的目的和功能规划网站内容，一般企业网站应包括：公司简介、产品介绍、服务内容、价格信息、联系方式、网上定单等基本内容。2. 电子商务类网站要提供会员注册、详细的商品服务信息、信息搜索查询、定单确认、付款、个人信息保密措施、相关帮助等。3. 如果网站栏目比较多，则考虑采用网站编程专人负责相关内容。 注意：网站内容是网站吸引浏览者最重要的因素，无内容或不实用的信息不会吸引匆匆浏览的访客。可事先对人们希望阅读的信息进行调查，并在网站发布后调查人们对网站内容的满意

27、度，以及时调整网站内容。三、 网页设计1. 网站的主颜色代码。2. 网站首页的基本框架（附图）。3. 网站内容中的字体、样式、颜色等相关内容。（为建立CSS做准备）。4. 网站的整体浏览机制（建立站点地图）。四、 网站建设日程表各项规划任务的开始完成时间，负责人等。附录二 Flashfxp使用说明Flashfxp使用方法： 1.添加新站点2.填写站点资料:3.填写选项,取消被动模式前的勾：4.在上传文件区的目录中选中需上传文件,弹出右键,选择队列，将文件添加到已上传或正在上传文件区。在已上传或正在上传区的目录中选中文件，弹出右键，选择传送队列，文件将自动上传。上传成功后，在右侧服务器文件区会显示该文件。