下载文档原格式
《网页设计与制作实训》课程标准课程代码：20413015课程类别：教学实践总课时数：15学分：0.5适用专业：计算机应用技术编写日期：2013-11-20选用教材：修订人（签名）：审核人（签名）：专业小组长（签名）：系部主任（签名）：1.课程性质和设计思路1.1课程定位与作用课程定位：本课程实训是以高职计算机应用技术专业学生就业为导向，以实际网站项目为引领，以企业网站建设与实施过程为课程主线，以企业网站制作与管理岗位所应具备的职业能力为依据，按高职学生的认知特点，采用递进与流程相结合的结构来展示教学内容，通过示范教学、仿真模拟、项目开发等活动项目来组织教学，倡导学生在项目活动中学会企业网站的设计，培养学生具备企业网站建设与运行管理的基本职业能力。
课程作用：通过本课程实训，巩固学生网页设计与制作及网站建设的基本知识，通过大量的实训任务提高实际操作能力，为今后从事网页设计、网站开发、网站维护和管理工作奠定基础，并在课程学习中培养学习和工作的方法能力，培养团队合作和创新能力。
与其他课程的关系：本课程的先修课程是《图像处理》和《动画设计与制作》。
这门课程分别从网页布局、ASP编程和Access数据库的角度为本课程的学习打下了相关操作、理念、方法的基础。
后续课程是《Net编程及应用》，《电子商务》，教学效果评价采取过程评价与结果评价相结合的方式，通过理论与实践相结合，重点评价学生的职业能力。
1.2课程设计基本理念和设计思路基本理念：本课程以培养学生计算机网页设计岗位能力为核心，根据专业人才培养目标、计算机网页设计职业岗位能力需求和前后续课程的衔接，参照计算机网页设计职业资格标准，以必需够用为度，统筹考虑和选取教学内容。
体现职业道德培养和职业素养养成的需要，以真实工作任务为载体设计教学过程，采用模块（项目）化方式构建课程的内容体系。
每一工作任务为一基本模块，每一模块与特定的职业能力培养相结合，整个实训过程以实训任务为载体将以上模块互相交融，以便学生踏入社会后能适应职业岗位（群）的需要，教、学、做相结合，强化学生能力培养。
第三届技能竞赛"网页设计与制作"现场操作试题要求及评分标准（完成时间：120分钟）一、参赛要求1、在系统目录：E:\下制作网页。
2、建站主题现场指定，要求主题突出，内容充实、健康向上，布局合理、结构清晰、规范。
3、色彩搭配合理、美观，设计新颖，有创意。
4、技术运用全面，技术含量高。
5、导航美观、醒目、转换方便、自然流畅（人机操作界面流畅）。
6、网页中有自制的动态效果。
7、网页中涉及的所有"路径"必须使用"相对路径"。
8、网页不少于6个，深度至少包括二级页面。
显示分辨率以800*600或1024*768状态为准。
作品总体积不超过10MB。
9、每位选手参赛时根据统一要求，在本地计算机的指定位置上建立个人文件夹，文件夹名为选手参赛编号。
此文件夹中只能包括主页文件(index.htm)和三个下级文件夹files、images、other。
文件夹files中存放除主页外的其他网页文件（扩展名为.htm），文件夹images中存放图片，文件夹other中存放除以上两种文件外的其他所有文件。
在文件夹files、images、other 中不得再自建子文件夹。
10、除以上规定的文件和文件夹外，其他的文件只能由阿拉伯数字组成，扩展名必须为小字英文字母（如1.htm、2.htm、1.gif、2.gif、1.jpg、2.jpg、1.swf、2.swf等等）。
11、页面中不得直接或间接显示参赛者的姓名、学校、地区或其它反映选手身份的信息。
二、无效作品界定有下列情况之一者，认定为无效作品，成绩计零分（特殊情况由评判委员会集体商定）1、不按参赛要求第9点要求建立文件夹2、不按参赛要求第10点要求命名文件名3、在作品中出现比较明显的反映选手身份的信息三、竞赛规则1、比赛期间参赛选手必须服从指挥。
2、选手不得带任何通讯工具带入赛场。
3、选手不得将软盘和移动硬盘、优盘、MP3、PDA等带入赛场。
武汉商贸职业学院信息工程学院《网页设计与制作综合实训》实训指导书软件教研室2013年9月目录实训目的............................................................................................................ 错误!未定义书签。
实训内容及要求................................................................................................ 错误!未定义书签。
实训性质、实训地点、实习时间安排，适用专业班级................................ 错误!未定义书签。
实训一站点的规划设计................................................................................... 错误!未定义书签。
实训二设计案例网站LOGO.......................................................................... 错误!未定义书签。
实训三设计案例网站BANNER.................................................................... 错误!未定义书签。
实训四设计案例网站导航条.......................................................................... 错误!未定义书签。
实训五设计案例网站网页内容和网页版权声明.......................................... 错误!未定义书签。
实训六对案例网站版面切图.......................................................................... 错误!未定义书签。
《网页设计与制作》综合实训指导书1.1 实训意义网页设计与制作综合实训是教学过程中重要的实践性教学环节。
它是根据专业教学计划的要求，在教师指导下对学生进行的网页制作专业技能的训练，培养学生综合运用理论知识分析和解决实际问题的能力，实现由理论知识向操作技能的转化，是对理论与实践教学效果的检验，也是对学生综合分析能力与独立工作能力的培养过程。
因此，加强实践教学环节，搞好实训教学，对实现本专业的培养目标，提高学生的综合素有着重要的作用。
1.2 实训目的1．通过综合实训进一步巩固、深化和扩展学生的理论知识与专业技能。
1)掌握规划网站的内容结构、目录结构、链接结构的方法。
2)熟练掌握网页制作软件Dreamweaver CS4的基本操作和使用技能。
3)掌握页面的整体控制和头部内容设置的方法。
4)熟练掌握网页页面布局的各种方法。
5)熟练掌握在网页中输入、设置标题和正文文字的方法。
6)熟练掌握用Photoshop制作和处理网页的图片素材，用Flash制作动画的方法。
7)熟练掌握在网页中插入图像、flash动画、背景音乐的方法。
8)掌握建立各种形式超级链接的方法。
9)掌握表单网页制作方法。
10)掌握网页特效的制作方法。
11)掌握网站测试的方法。
2．训练和培养学生获取信息和处理信息的能力，充分培养和提高学生的动手能力，学会通过网站、书籍、素材光盘等方式收集所需的文字资料、图像资料、网页特效等。
3．培养学生运用所学的理论知识和技能解决网站开发过程中所遇到的实际问题的能力及其基本工作素质。
4．培养学生理论联系实际的工作作风、严肃认真的科学态度以及独立工作的能力，树立自信心。
5．训练和培养团队协作精神和共同开发网站的综合能力。
1.3 实训要求1．动手制作网页之前：1)必须认真做好网站的需求分析，包括市场调查，定位网站目的，策划好网站的主题及功能定位，创意出网站的风格和亮点，确定网页色彩基调。
2)规划好网站的风格和结构，网站主要内容及板块，各板块的具体内容及功能。
《网页设计与制作》综合实训指导书前言为了加强学生能力的培养，提高学生的实践操作技能，以适应社会、经济和科技的发展对职业人才的需求，向社会提供大批能够直接从事网站开发和技术服务的应用型操作人才。
特编写本指导书《网页设计与制作》是一门实践性很强的课程，网页设计与制作实训是学好网站开发、掌握网页制作基础知识的极为重要的环节，是培养学生动手能力的重要途径。
因此，加强网页设计与制作实验课程的教学具有十分重要的意义。
本指导书是在多年的教学实践经验的基础上，广泛听取了有关任课教师的意见，并结合我校网络专业实训设备的现状编写而成的。
编写中，精选实验项目与内容，力求简明扼要、通俗易懂、目的明确、原理简洁、步骤清晰、结论正确。
针对学生知识面及个人特长的不同，本指导书设计有选做内容，此部份内容主要为数据库开发及动态模块设计与程序编写等内容，以此拓展学生知识面与技能的全面性，学生可根据自身特点及时间来选择是否完成网站的动态开发部分。
本指导书适用于计算机网络三年制（或四年制、五年制）专业教学使用。
由于编者时间仓促，水平有限，对指导书中存在的缺点和错误，望大家给予指正，在此深表感谢！编者二零一一年五月十日目录实训课程概述 (4)项目一：设计与制作“博爱”助学网站。
(7)项目二：设计与制作“华医”中医健康网站。
(12)项目三：设计与制作世博会志愿者网站 (17)项目四：设计与制作传统节日网站 (22)项目五：设计与制作环保网站 (27)项目六：设计与制作音乐网站 (33)项目七：设计与制作台湾旅游网站 (38)项目八：设计与制作图书网站 (43)项目九：设计与制作军事新闻网站 (48)项目十：设计与制作科技公司网站 (53)项目十一：设计与制作健身俱乐部网站 (58)项目十二：设计与制作婚礼策划公司网站 (63)项目十三：设计与制作奶茶网站 (69)项目十四：设计与制作植物园网站 (75)项目十五：设计与制作快餐连锁店网站 (81)项目十六：设计与制作青年旅舍网站 (86)项目十七：设计与制作鞋业有限公司网站 (91)项目十八：设计与制作摄影公司网站 (96)项目十九：设计与制作中国杏仁网站 (102)项目二十：设计与制作李小龙截拳道网站 (108)实训课程概述项目一：设计与制作“博爱”助学网站。
武汉商贸职业学院信息工程学院《网页设计与制作综合实训》实训指导书软件教研室2013 年9月《网页设计与制作综合实训》实训指导书目录实训目的 (1)实训内容及要求 (1)实训性质、实训地点、实习时间安排，适用专业班级 (2)实训一站点的规划设计 (3)实训二设计案例网站LOGO (4)实训三设计案例网站BANNER (5)实训四设计案例网站导航条 (6)实训五设计案例网站网页内容和网页版权声明 (7)实训六对案例网站版面切图 (8)实训七制作完成案例网站首页 (9)实训八案例网站模板的制作 (10)实训九案例网页超级链接的添加 (11)实训十案例网站加入动态元素 (12)第2 页实训目的在前一阶段，学生完成了《网页设计与制作》、《图形图像处理》、《CSS设计》、等专业课程的学习，为了让学生将前期的专业课程学以致用，融会贯通，特开设本系统化实训。
本次综合实训基于学生的兴趣，选取专业建设网站开发为主题，基于网页开发的流程，把实训周期当做是一个项目的开发周期，严格把握项目进度，最终要求学生完成网站的前台设计。
通过本次实训希望达到以下目的：1.熟悉和掌握Dreamweaver软件的使用方法；2.熟悉和掌握PS软件的使用方法；3.熟悉FLASH软件应用的方法；4.学会使用CSS+DIV做网页布局；5.熟练掌握站点的规划与设计实训内容及要求本实训的内容简述：1. 网站首页（1）专业概况（2）专业建设规划（3）展示最新动态文章标题（8条）（4）专业建设成效的文章标题（8项）（5）专业建设特色文章标题（8项）2. 专业概况点击项目概况，显示相关文本3. 专业建设规划点击项目申报书菜单，显示flashpaper格式的申报书内容4. 专业建设特色显示专业建设特色的文章标题列表，点击标题进入内容5. 专业建设动态显示专业建设动态的标题列表，点击标题进入成果详细展示6. 专业建设成效显示专业建设成效的标题列表，点击标题进入成果详细展示。
一、实训目的：通过实训,掌握网页制作系列软件Dreamweaver、Fireworks、Flash和Photoshop的使用方法.达到全面理解、运用网页制作的知识，并使之得以融会贯通，在掌握理论的基础上再加以实践，进一步提高、加强设计、制作网站的综合能力。
二、实训过程1.资料的搜集：收集的资料主要是汽车图片，以及运用做页面局部框架背景的图片。
2.熟悉制作软件软件：软件：Dreamweaver \ Firework \ Photoshop CS \ Flash硬件： PC机技术： HTML＼CSS \ javascript\特效代码项目设计及运行平台 :Windows XP3。
构建站点框架：网站结构图如下：4．设计制作页面：◆网页名称：关于我们◆网页的色彩：最主要是以白色背景为主导色，字体的主要色彩是黑色.链接字体颜色链接前设为蓝灰色，鼠标覆盖后为深红色.◆网页富有动感，通过GIF动画来展示,页面的色彩好与首页和栏目页统一主要采取白色。
◆页面的大小，在1024X768像素下显示效果最佳。
◆颜色调配设计，网页的色彩是树立网站形象的关键之一，各版块采用与网站首页同一色系的颜色，整个版块内部也尽量保持风格一致。
◆网页内容的安排相互链接关系如下概述最上面先放了一个724＊100px的logo。
右边放了一个1024＊100广告如下图：再下来的表格中里放了一个我们用GIF的轮换效果展示知名品牌汽车，效果如图：右侧是世界/中国地图及天气实况查询图.属特效代码。
当鼠标覆盖时显示链接提示,点击即可查询各地当日天气情况，帮助驾车人员快速掌握天气情况.效果如下:然后再表格里面分别放的是各种小版块.分别记载有：QQ联系方式，用户只要单击即可打开QQ聊天窗口与网站内部人员进行对话。
此外，页面载有客服热线，留言板.也是对用户提供的对话平台,方便用户咨询更多消息.5．实现网页间的链接:运用的链接方式有：超链接、明链图片链接, 锚点链接以及多媒体链接, 用以实现QQ聊天界面的打开,留言提交，以及天气实况的显示。
武汉商贸职业学院信息工程学院《网页设计与制作综合实训》实训指导书软件教研室2013年9月目录实训目的 (1)实训内容及要求 (1)实训性质、实训地点、实习时间安排，适用专业班级 (2)实训一站点的规划设计 (3)实训二设计案例网站LOGO (3)实训三设计案例网站BANNER (4)实训四设计案例网站导航条 (5)实训五设计案例网站网页内容和网页版权声明 (5)实训六对案例网站版面切图 (6)实训七制作完成案例网站首页 (7)实训八案例网站模板的制作 (8)实训九案例网页超级链接的添加 (9)实训十案例网站加入动态元素 (9)实训目的在前一阶段，学生完成了《网页设计与制作》、《图形图像处理》、《CSS设计》、等专业课程的学习，为了让学生将前期的专业课程学以致用，融会贯通，特开设本系统化实训。
本次综合实训基于学生的兴趣，选取专业建设网站开发为主题，基于网页开发的流程，把实训周期当做是一个项目的开发周期，严格把握项目进度，最终要求学生完成网站的前台设计。
通过本次实训希望达到以下目的：1.熟悉和掌握Dreamweaver软件的使用方法；2.熟悉和掌握PS软件的使用方法；3.熟悉FLASH软件应用的方法；4.学会使用CSS+DIV做网页布局；5.熟练掌握站点的规划与设计实训内容及要求本实训的内容简述：1.网站首页（1）专业概况（2）专业建设规划（3）展示最新动态文章标题（8条）（4）专业建设成效的文章标题（8项）（5）专业建设特色文章标题（8项）2.专业概况点击项目概况，显示相关文本3.专业建设规划点击项目申报书菜单，显示flashpaper格式的申报书内容4.专业建设特色显示专业建设特色的文章标题列表，点击标题进入内容5.专业建设动态显示专业建设动态的标题列表，点击标题进入成果详细展示6.专业建设成效显示专业建设成效的标题列表，点击标题进入成果详细展示。
本实训的要求：1.应用css和html（div+css）技术完成至少4个页面，其中必须包括网站主页面设计、栏目页设计、管理员管理登陆页面、管理员登录以后的页面。
《网页设计与制作》综合实训——--网站开发
一实训意义
网页设计与制作综合实训是教学过程中重要的实践性教学环节。
它是根据学生所学专业教学计划的要求，在教师指导下对学生进行的网页制作专业技能的训练，培养学生综合运用理论知识分析和解决实际问题的能力，实现由理论知识向操作技能的转化，是对理论与实践教学效果的检验，也是对学生综合分析能力与独立工作能力的培养过程。
因此，加强实践教学环节，搞好实训教学，对实现本专业的培养目标，提高学生的综合素有着重要的作用。
二实训目的
1．通过综合实训进一步巩固、深化和扩展学生的理论知识与专业技能。
（1）掌握规划网站的内容结构、目录结构、栏目结构的方法。
（2）熟练掌握网页制作软件Dreamweaver 的基本操作和使用技能。
（3）掌握页面的整体控制和头部内容设置的方法。
（4）熟练掌握网页页面布局的各种方法。
（5）熟练掌握在网页中输入、设置标题和正文文字的方法。
（6）熟练掌握在网页中插入图像、flash动画、背景音乐的方法。
（7）掌握建立各种形式超级链接的方法。
（8）掌握表单网页制作方法。
（9）掌握利用CSS样式实现网页特效的制作方法。
（10）掌握DIV＋CSS布局、修饰网页。
2．训练和培养学生获取信息和处理信息的能力，充分培养和提高学生的动手能力，学会通过网站、书籍、素材光盘等方式收集所需的文字资料、图像资料、flash动画、CSS样式和网页特效等。
3．培养学生运用所学的理论知识和技能解决网站开发过程中所遇到的实际问题的能力及其基本工作素质。
4．培养学生理论联系实际的工作作风、严肃认真的科学态度以及独立工作的能力，树立自信心。
5．训练和培养团队协作精神和共同开发网站的综合能力。
三 实训要求
1．动手制作网页之前，必须认真做好网站的需求分析，策划好网站的主题，规划好网站的风格和结构，创建完善的目录结构。
2．制作网页前，收集好所需的文字资料、图像资料、flash 动画、CSS 样式和网页特效。
3．所创建的网站至少包括8个页面，分为三层，第一层为首页，第二层为4个二级子页，第三层为3个内容页。
（1）首页可采用表格或DIV+CSS 进行页面布局，首页必须包含清晰的导航栏以及版权、作者信息等内容。
首页可参考以下布局结构； “国”字型：
拐角型：
（2）4个二级子页必须
采用DIV+CSS 样式进行网页布局；除上述两个布局结构以外还可以参考以下布局结构：
（3）3个内容页布局结构可参考以上布局结构，也可以是独立的网页，其中要求一个含有表单网页、一个含有CSS样式修饰的列表网页、另一个用“盒模型”实现布局的网页。
（4）各个页面根据需要插入合适的图像和Flash动画以及CSS样式修饰美化网页，首页要求插入背景音乐(用“bgsound”实现、音乐面板隐藏）、要有滚动的文字或图像，达到“动感”效果。
（5）所有页面要求内容充实、布局合理、颜色搭配协调、美观大方，在修饰字体、文本、背景、尺寸、边框、定位、表格、列表、滚动条等均采用CSS样式实现修饰美化效果。
（6）各个页面之间导航清晰、链接准确无误。
4．网页的版面尺寸应用符合网页设计的规范，网站中所有文件、文件夹的命名应规范，尽量做到字母数量少，见名知意、容易理解，所有文件名全部采用英文名称命名。
5．实训过程中既要虚心接受老师的指导，又要充分发挥主观能动性、独立思考、努力钻研、勤于实践、勇于创新。
6．在设计过程中，要严格要求自己，树立严密、严谨的科学态度，必须按时、保质、保量完成实训任务。
要求独立完成规定的实训内容，不得弄虚作假，不准抄袭或拷贝他人的网页或其他内容。
7．同学之间，要密切合作，培养良好的互助、协作精神。
8．实训期间，严格遵守学校的规章制度，不得迟到、早退、旷课。
缺课节数达三分之一以上者，实训成绩按不及格处理。
9．实训环境为Windows XP及以上版本的操作系统，网页制作软件为Dreamweaver CS4以上，根据需要可以运用Fireworks 8处理图像，运用Flash 8制作动画。
四实训步骤
4.1 规划网站
1．策划网站主题
在着手设计网站之前，要确定好网站的主题，每个网站都应该具有一个明确的主题。
综合实训所创建的网站是一个学习类网站，主要介绍网页制作的基础知识、网站建立的基础知识、网页制作的技巧、网页特效的制作方法、网络编程语言、动画制作方法、图像处理方法等内容，同时为读者提供大量的网页制作素材、学习网页设计和编程的视频教程，解决学习网页设计与制作过程中遇到的问题。
所以该网站的主题是“提供制作素材、解决学习问题、
指导网页制作”。
2．确定网站风格
确定好站点主题后，就要根据该主题选择站点的风格。
由于本章所建立的网站是一个学习类网站，要求结构清晰，结合现代教学理念，将学习与网络合理整合，实现教学对象广泛、使用方便、时间自由。
本网站的主要特点如下：
（1）设计风格要大众化，为了提高浏览速度，尽量减少图片的使用，减少表格的使用，尽可能用DIV+CSS实现效果。
（2）背景颜色以灰色和白色为主、黄色为辅，文字颜色以黑色为主、蓝色和红色为辅。
（3）文字内容丰富、知识性强，标题简洁明了，字体一般采用宋体，大小一般为12像素。
3．构思网站栏目结构
先在纸上绘制网站的栏目结构草图，经过反复思考和讨论，最后确定完整的栏目和内容的层次结构。
栏目结构如表2-1所示，请将每一级栏目的名称注明。
4．规划网站目录结构和链接结构
根据网站策划确定的栏目结构，创建站点目录，一个网站的目录结构要求层次清晰、井然有序，首页、栏目页、内容页区分明确，有利于日后的修改。
例如各文件夹的所存放文件类型如表2-1-3所示。
（注意：文件夹和文件的名称建议不要使用中文名，因为中文名在HTML文档中容易生成乱码，导致链接产生错误。
）
表2-1-3 网站的目录结构及其存放的文件类型
网站的链接结构与目录结构不同，网站的目录结构指站点的文件存放结构，一般只有设计人员可以直接看到，而网站的链接结构指网站通过页面之间的联系表现的结构，浏览者浏览网站能够观察到这种结构。
4.2 准备素材
根据网站的栏目、内容设计，链接结构设计，首页的布局结构，几个主要导航页面的布局结构，准备所需素材
1．准备文本
准备大量网页中所需的文字资料，可以从各类网站、各种书籍中搜集文字资料，然后制作成word文档或文本文件，注意各种文字资料的文件名命名要科学合理，避免日后找不到所需的文本内容。
2．准备Logo
利用Fireworks或Photoshop量身定做本网站的Logo标志，Logo标志要与本网站的主题相符，要有新意。
3．准备图片及按钮
根据需要到网上或素材光盘中搜集所需的图片和按钮、有些图片、按钮需要自己利用图像处理软件制作。
注意图片文件要尽可能小。
4．准备动画
网站中的动画最好能突出主题，起到画龙点睛之功效。
动画一般利用flash软件制作，本网站主页和导航页的标题动画就是利用flash软件量身定做。
五．评分标准
根据实训期间的纪律考核情况、对待实训的态度，站点的目录结构，各个页面的布局结构、颜色搭配，文字、图像、动画的合理搭配，网页之间的链接是否顺畅，网页制作技术的应用，网站的整体浏览效果等方面进行综合评分。
评分参考标准如表2-1-5所示。
表2-1-5 网站开发实训的参考评分标准。
