《网页设计与制作》课程标准

营销型网站建设实训

课程标准课程编号：适用专业：电子商务课程类别：专业基础课程修课方式：必修教学时数：64学时总学分数：4学分一、课程定位课程性质《网页设计与制作》是以计算机专业为主体，辐射计算机网络技术专业、计算机应用技术专业、电子商务专业、多媒体设计与制作专业等计算机类专业的理论实践一体化课程，是计算机专业的专业基础课程，也是电子商务的一门核心技能课程。围绕电子商务专业的培养目标，该课程的定位为：.懂专业：掌握Web国际标准基础知识；基于W3C网页设计标准，熟悉和掌握静态网页设计与制作及小型网站建设与维护的基本知识。.精技能：掌握综合运用网页编辑软件、图像处理软件(fireworks)设计和制作网页的技能，熟练掌握DIV+CSS网页布局设计方法，能熟练运用XHTML、CSS(及后续课程JavaScript)进行网站客户端开发，熟悉Web国际标准，掌握小型网站策划、分析、设计、布局、测试的职业能力；坚持手写代码，形成良好的代码规范编写习惯。.高素质：在课程学习中培养学习和工作的方法能力，培养与人协作和做人的社会能力。课程作用《网页设计与制作》是面向“网站美工、网站维护”职业岗位的领域课程，也是满足职业岗位任职要求的基本能力课程。通过该课程的学习，实现以下专业知识、职业能力、职业素质目标，为今后职业生涯发展打好基础。知识目标：•熟悉和掌握静态网页设计与制作的基本知识；•掌握Web国际标准基础知识；•了解和熟悉HTML语言；•掌握静态网页设计与制作的知识；•掌握网页中DIV+CSS网页布局方法；•掌握网页中图片设计和处理、动画导入的知识；•掌握网站检查与发布的知识；•坚持手写代码，形成良好的代码规范编写习惯。能力目标：•具备信息收集、处理、准备、加工的能力；•具备网页设计及网页中图形设计、动画导入的基本能力，能独立设计并制作一个内容完整、图文并茂、技术运用得当的小型静态网站；•具备初步的网站开发、维护和管理能力；具备独立撰写网站制作说明等技术文档的基本能力。素质目标：•按时守信的诚实作风；•乐观向上的敬业精神；•沟通协作的团队意识；•知识获取和应用的自主学习能力；•探索实践的创新能力；•手写HTML代码的能力；•正确使用手册的能力。前导后续课程衔接《网页设计与制作》课程作为电子商务专业的一门专业基础课，是面向“网站维护”职业岗位的学习领域课程，也是满足职业岗位任职要求的基本能力课程，侧重于学习基于W3C网页设计标准的静态网页的设计与制作、HTML语言、CSS样式等相关知识。本课程的前置课程是网络营销基础、办公技能与应用、Ph。toshop图像处理、网站策划，其后续课程是“网站优化类”课程。可以解决中对网站前台界面的设计和制作需求。二、课程设计课程设计理念（1）课程设计体现动手实践能力同类课程大都围绕网页设计与制作软件（如：Dreamweaver）的功能使用展开教学。为使学生毕业后能满足实际工作岗位的需求，课程教学必须要教会学生熟悉Web标准，掌握DIV+CSS网页布局方法，使用网站建设的流行技术，坚持手写代码，形成良好的代码规范编写习惯，制作符合Web标准的静态网站，为后续“Web系统开发技术类”课程的学习打下良好的基础。由此，形成了课程设计的雏形。本课程倡导“开放式学习、实践中学习、自主学习、按需学习”的学习观念，本课程的教学资源全部可在网上浏览和下载，任何学习者（Anyone）在任何时候（Anytime）、任何地方（Anywhere）都能获取知识、训练技能，保证学习者按需学习和自主学习。注重与企业合作，按照“职业岗位一岗位需求能力一确立教学项目”的项目导向式的运行机制来组织教学，以突出专业课程的职业性、实践性和开放性……⑵课程教学贯穿职业能力和素质培养在进行课程设计时，通过将理论知识和实践技能整合，将专业能力培养和职业素质培养整合，将工作过程与学生认知规律整合，使课程教学贯穿职业能力和素质培养。通过创设真实的情境获得职业内容和工作环境的感性认识；学以致用，通过融“教、学、做”一体的教学活动、通过实施以学生为中心的教学，通过提高教师的教学驾驭能力和发挥榜样作用，切实提高人才培养质量。（3）课程实施通过真实任务驱动在具体教学过程中，以真实项目导向，真实任务引领，并以任务驱动来完成整个教学过程。在任务中涵盖教学的基本要求和从事实际工作所需要的知识和技能，并留有自主学习和拓展提高的空间。让学生介入完成实际工作任务，让已有知识和技能作为完成下一步任务的基础，让完成任务的过程成为一个愉悦的过程，让学生在完成任务后取得明确的成果，让自主获取新的成果成为进一步激发学习热情的动力。课程设计思路围绕“将工作任务转化为真实项目导向、任务引领、并以任务驱动进行教学的课程”的思路进行课程设计。（1）工作任务分析“用户界面设计（UI）”职业岗位的核心工作任务是：网页设计与制作，即：网站前端设计。其具体的工作为：按照客户的要求进行网站规划和网页设计，综合运用网页编辑软件、图像处理软件（或Fireworks）设计和制作网页，应用DIV+CSS网页布局设计方法，完成基于Web国际标准的静态网站策划、分析、设计、布局、测试的工作，并解决'Web系统开发技术类”课程中对网站前台界面的设计和制作需求。坚持手写代码，形成良好的代码规范编写习惯，也为今后胜任小型动态网站建设、大型网站的规划与建设工作打好基础。（2）工作任务设计在网页设计与制作课程学习领域中贯穿两个平行的项目：一个是模仿项目：北京大学网站设计与制作；一个是拓展项目：绿色食品网站设计与制作；模仿型项目来源于北京大学网站，这是一个真实的项目，也是一个学生感兴趣的项目。以模仿型项目作为教学载体，教学的基本要求和完成实际工作所要求的基本知识、技能都融入在该项目中。根据网页设计和网站建设的实际工作流程，将该项目分成若干子任务，学生依据任务样本，在教师的示范引导下通过模仿而逐个完成子任务，最后完成项目，获取学习成果。与完成该模仿型项目相平行，以拓展项目作为提高。教师只给出原则性要求，网站内容依据学生个人爱好自由确定，技术的运用在满足原则要求的前提下由学生创意发挥，实现知识的拓展和能力的进一步提高。在主讲教师和企业兼职教师的共同指导下，组织学生参与实际项目开发，全面锻炼学生的综合素质和职业能力。创建的网站包括3个页面，分为两层，第一层为首页，第二层为1个列表页和1个详情页。教学内容完全根据真实任务来确定。网页只有链接成网站才有其存在的意义，所以网页设计与制作实际上就是网站设计与制作。（3）教学模式设计该课程采用“项目导向、任务驱动、理实一体”的教学模式。课程教学全部在多媒体网络机房进行，整个教学过程分为“项目的导入〉逐个完成由模仿项目切分而成的子任务，与此同步逐步完成拓展型项目>最后完成两个项目（获取学习成果）”的过程，辅以课余参与实际项目的开发，给学生提供进一步锻炼与提高的机会。（4）评价考核模式设计课程考核是检验课程教学效果、学生知识技能掌握程度的有效手段，本课程在设计考核方式时应遵循学生主动性原则、合作学习原则、体验成功原则、注重过程原则，对网页设计与制作课程的考核方式进行全方面、多角度的设计。本课程主要采取“平时考核+阶段考核+综合评价”综合性的考核方式。该课程实行“以完成模仿项目质量为基础，以完成拓展项目质量为重点，兼顾质量、学习态度、学习纪律、协作能力等，全方位、多角度”的考核评价模式。将课程考核分为：平时、阶段和综合三部分。平时考核依据完成模仿项目的质量。学生在教师引导下完成模仿项目情况能准确地反映出学生基本知识、技能掌握情况。每完成一个子任务，教师选用请学生自评、学生间互评、教师评价的方式给每一个学生恰如其分的评价，并记录为平时成绩。考核后，如学生对本人完成项目情况不满意，允许进一步完善，重新考核。平时考核与巡回指导同步进行，当场完成。阶段考核依据完成拓展项目质量，兼顾原有水平。完成和模仿项目同时进行的拓展项目的质量，较好地反映了学生自主学习、协作学习、知识综合运用、拓展创新的能力。将该项目分为若干阶段，学生完成每一阶段任务后都要撰写制作说明，然后提交阶段性作品和制作说明，由教师根据每阶段考核要求进行评价，同时兼顾原有水平。综合评价主要根据学生的完成模仿项目、拓展项目、出勤率、学习态度、学习纪律、协作能力等进行。具体考核内容与分数比值如表下所示：考核类型评价主体考核内容比例平时考核任课教师、学生完成模仿项目质量30%阶段考核任课教师、学生完成拓展项目质量，兼顾原有水平40%综合评价任课教师、学生出勤率、学习态度、学习纪律、协作能力、考证和实战等30%（5）职业能力培养模式设计根据职业能力和职业素质目标，确定职业能力培养和课程教学中相应学习情境、教学活动一一对应，贯穿于课程教学始终。职业能力培养和教学活动对应如下完成模仿型教学任务过程学会探索、学会学习、学会传承完成拓展型教学任务过程自主学习、开拓创新、团队协作能力、查阅资料的能力参与企业实际项目开发团队协作能力、完成实际工作的能力、学习能力作品展示口头表达、归纳总结能力撰写网站规划书和设计说明撰写简单科技文档的能力考勤制度、教学规范责任心、时间掌控能力教师在教学活动中榜样作用做一个真诚、有追求、有人责任心、知识丰富、技能娴熟的“人”三、课程内容与要求根据Web前台技术行业网页美工、网页设计与制作职业岗位的要求，应具备较好的网页布局与美化、网页设计与制作能力，本课程的教学以项目为载体。课程教学采用“理论实践一体化”教学模式，理论教学内容与实践教学内容融为一体根据网页美工、网页设计与制作岗位的能力要求，兼顾学生的认知规律，重构了课程结构将本课程的教学内容分解为10个单元，形成了以项目为载体的课程结构。教学单元设计如下表所示。序号单元名称学时1网页赏析、创建站点与浏览网页42网站项目开发环境搭建4

3图文混排网页的制作44表格与表格布局网页的制作45包含flash元素和超级链接的网页制作46表单网页的制作87CSS布局与网页美化88网站首页的设计与制作129网站列表页的设计与制作810网站详情页的设计与制作8合计64网页设计与制作课程的项目课程结构与学时分配如下表所示：编号单元名称教学内容主要教学知识点教学目标参考学时1网页赏析、创建站点与浏览网页站点的创建与管理认识网页、网站和浏览器窗口的基本组成认识网页的基本组成元素和网页的布局结构了解制作网页的常用软件了解网页的相关概念和术语站点的创建与管理网页的相关概念、术语与网页的主要构成元素Dreamweaver的界面布局与工作环境学会创建本地站点和管理本地站点熟悉Dreamweaver的工作界面熟悉浏览器窗口的基本组成和网页的基本组成元素了解网站与网页的相关概念5•认识网页的基本布局结构6.了解一些制作网页、处理图像、制作动画的工具7•能分析优秀网页的布局结构、颜色搭配、视觉效果等42网站项目开发环境搭建了解手册的使用编辑器(SublimeText)的工作界面熟悉HTML文档结构创建HTML骨架使用谷歌浏览器审查元素手册的使用编辑器的使用HTML的文档结构创建HTML骨架谷歌浏览器审查元素方法熟悉手册的基本界面，能灵活使用手册查询相关内容和自我学习熟悉编辑器(SublimeText)的工作界面熟悉Html的文档结构能定义Html的文件信息能熟练地使用创建好的HTML骨架了解网页文件头内容的设置方法掌握谷歌浏览器审查元素的方法43图文混排网页的制作1.站点的创建与管理2•在网页中进行页面控制制作文本网页制作图文混排的网页1•文件面板的使用站点的创建与管理创建项目列表和编号列表4•插入特殊字符、水平线、日期对象在页面中插入图像设置图像属性掌握对网页文档的基本操作掌握设置网页整体属性的操作方法3•掌握在网页中输入文字、编辑文本、设置文本属性、设置项目列表、输入空格、文本换行的操作方法4•掌握在网页中插入特殊字符、插入水平线和插入日期的操作方法4

5•掌握在网页中插入图像、鼠标经过图像的方法掌握设置页面背景图像和图像属性的方法能创建与管理站点能进行页面控制能进行文本操作能在网页中进行图文混排熟悉HTML的基本结构4表格与表格布局网页的制作在网页中插入表格设置表格和单元格属性在表格中插入网页元素插入表格设置表格属性插入嵌套表格单元格属性设置在表格中插入网页元素1•能正确地插入表格，合理地设置表格的属性能正确地在表格中插入嵌套表格，并合理地设置嵌套表格的属性掌握单元格的合并、拆分、插入和删除的操作方法能正确地设置表格中行和列的属性5•能正确设置表格、单元格的背景图像和背景颜色6.能正确地在表格中输入文字并定位45包含Flash元素和超级链接的网页制作在网页中插入Flash动画或图像在网页中创建多个超级链接1•创建外部链接2•创建内部链接创建电子邮件链接创建锚点链接5•创建图像热点链接创建文件下载链接创建空地址链接检查链接创建文字形式的导航栏实现滚动图片功能1.能创建网页的内部链接和外部链接2•能在图像中设置热点区域，并创建图像热点链接能创建命名锚记和到该命名锚记的链接能创建电子邮件链接5•能更改链接颜色、设置链接的打开方式、设置空链接能测试链接的有效性能正确地插入Flash动画8•进一步熟悉使用表格进行网页布局，灵活设置表格及单元格的属性9•掌握滚动图片的方法10.掌握绝对路径和相对路径以及链接的类型46表单网页的制作在网页中插入表单域设置表单域的属性在表单域中插入表单控件插入表单域插入表单控件设置表单域属性能在网页中正确插入表单域能在表单域中正确插入各项表单控件87CSS布局与网页美化创建美化页面元素的样式输入文字和插入各种页面元素应用美化页面元素样式美化网页1•创建美化页面元素的样式美化页面元素样式属性的设置在页面各个区块中输入文字或插入页面元素应用美化页面元素样式美化网页能创建美化页面元素的样式能在使用DIV+CSS布局的网页中输入文字和插入各种页面元素能应用美化页面元素样式美化网页88网站首1.画出网站的整体结构，1.网站开发基本流程1.能应用CSS样式设计网站首页的主体布局结12

页的设计与制作对每个网页进行规划2•使用DIV+CSS和表格联合布局网页设计与制作导航栏插入网页元素网站规划与组织网页设计基本原理与方法网页设计的规范网站各页面的布局结构设计CSS样式的创建与属性设置导航栏的设计与制作插入网页元素超级链接的设置构能应用CSS样式设计网站首页的局部布局结构能设计与制作导航栏会插入SWF动画会创建包含底部导航栏和版权信息的脚本文件6•会设计用户登录表单9网站列表页的设计与制作1.画出网站的整体结构，对每个网页进行规划2•使用DIV+CSS和表格联合布局网页设计与制作导航栏插入网页元素网站开发基本流程网站规划与组织网页设计基本原理与方法网页设计的规范网站各页面的布局结构设计CSS样式的创建与属性设置导航栏的设计与制作插入网页元素超级链接的设置能应用CSS样式设计网站列表页的主体布局结构能应用CSS样式设计网站列表页的局部布局结构能设计与制作导航栏会插入SWF动画会创建包含底部导航栏和版权信息的脚本文件6•会设计用户登录表单810网站详情页的设计与制作1•画出网站的整体结构，对每个网页进行规划2•使用DIV+CSS和表格联合布局网页3•设计与制作导航栏4•插入网页元素网站开发基本流程网站规划与组织网页设计基本原理与方法网页设计的规范网站各页面的布局结构设计CSS样式的创建与属性设置导航栏的设计与制作插入网页元素超级链接的设置能应用CSS样式设计网站详情页的主体布局结构能应用CSS样式设计网站详情页的局部布局结构能设计与制作导航栏会插入SWF动画会创建包含底部导航栏和版权信息的脚本文件6•会设计用户登录表单8合计64四、教学资源要求教材选取原则教材选取遵循“适用、实用、够用”的原则。（1）适用：教材要以网页制作技术为基础，符合网页设计与制作员的能力要求和本课程的培养目标。（2）实用：教材的教学内容要注意基础性、启发性、应用性和拓展性的结合，符合高职计算机多媒体技术专业学生特点；教材应按实际工作案例组织编写内容，注意网页制作技术与美学艺术的结合，重在培养学生的创新思维和专业技能；教材应以真实项目为主线，按网站实际创建过程组织编写内容，强调理论与实践的结合，便于实现“教、学、做”三位一体的“理论实践一体化课堂”的教学模式。（3）够用：教材的内容主要包括网页制作技术和网页制作的实际操作技能，不涉及太多、太深的理论知识。推荐教材参考的教学资料教学环境资源要求（1）教师要求执教教师应熟悉HTML、CSS、JavaScript等方面的理论知识，熟悉Dreamweaver网页制作工具，能够使用Dreamwea