37271-00-网页设计与制作任务驱动式教程(第2版)-陈承欢-案例结果-课程设计

1、37271-00-网页设计与制作任务 驱动式教程（第2版）-陈承欢-案 例结果-课程设计附录A 网页设计与制作类职业岗位需求分析从2009年开始，通过对前程无忧、智联招 聘、中华英才等专业招聘网站的网页制作、网 站设计、网页设计、网页版面设计、网站编辑、 网站美编等职业岗位的调查分析，对网页设计 与制作相关岗位的职位描述和任职资格有了深 入的了解，从而对网页设计与制作课程的知识、 技能、素质要求有了全面的认识，这些职业岗 位的工作职责和职位要求如下表所示。1 网页制作类职业岗位的工作职责和职位要求职位名称网页制作工作职责(1)参与网站策划与设计参与公司及客户网站的总体及各个栏目的内容策戈y、功

2、能需求分析制作公司及客户网站架构设计，树立统一的品牌形象(2) 网页设计与制作：负责确定公司及客户网站页面内容和风格按照行业及公司的规范完成网站原型设计和页面制作为网站Web程序开发团队提供脚本和网页模板(3) 网站维护负责定期分析竞争对手产品，并对自有产品提岀整改计划，定期策划网上活动根据审定的方案参与网站项目的上线升级实施工作，对方案实施的准确性负责 协助网站开发人员对网站程序功能进行测试(4) 与其他相关人员的协调与沟通与团队其他成员进行有效沟通，了解其他团队成员工作情况、工作进度，定期进行技术交流与共享 与客户进行有效沟通，了解客户有效需求，以便对网站进行更新职位要求(1) 知识与技能

3、 附录A熟悉网站制作与设计流程，能跟踪最新的网页设计与制作技术熟练运用HTML、CSS、JavaScript等Web开发技术，制作符合 Web标准的网页 熟悉常用图像制作软件和 Flash制作技术，能够使用 Dreamweaver等工具制作网页 能够将网页设计师的效果图快速转换为 Web标准原型(2) 素质要求沟通协调能力：正确理解别人的感受和想法，善于倾听，能够理解他人思想和行为背后的原因团队合作：愿意与他人合作，主动与其他成员进行沟通交流，分享信息、知识和资源，愿意帮助其他成 员解决所遇到的问题，无保留地将自己所掌握的技能传授给其他成员思维能力：头脑灵活、思路清晰，具备缜密的逻辑思维能力以

4、及耐心细致的观察能力，处理事务有清晰 的条理性，工作重点明确，具备较强的执行能力，学习能力强，有创新意识坚韧性：处于较大的工作压力下或产生可能会影响工作的消极情绪时，能够有效地控制自己的情绪，通 过建设性的工作化解工作压力或消极情绪2 网站设计类职业岗位的工作职责和职位要求职位名称网站设计工作职责(1) 负责网站设计的需求沟通，确定网页设计的视觉标准和风格标准等(2) 负责客户网站创意、设计与页面制作(3) 负责网站整体版式设计、通过良好的视觉传达与表现，增加品牌感染力，提高用户使用效率(4) 负责网站相关项目、活动、专题的设计与创意工作(5) 与团队配合，提升网站的视觉表现力及易用性，跟踪产

5、品效果，分享设计经验，提岀设计改善方案(6) 熟练运用各种不同类型的设计表现形式，准确传达信息(7) 完成网站日常的页面设计、制作及维护工作(8) 进行网站图片设计与制作(9) 完成网站日常的 Flash动画设计、制作及更新工作(10) 负责网站广告的设计与制作(11) 完成网站日常所需的平面设计及维护工作职位要求(1) 具有一定的美术功底及良好的创意构思能力，很好地把握视觉色彩与网站布局，思想敏锐活跃，具有一定的视觉创作经验和独到的审美修养；对商业需求有非常敏感的把握和表现能力(2) 熟练运用 Photoshop、Illustrator、Al、Flash， Dreamweaver等工具或同类

6、软件，擅长页面效果图 制作和文字的编排，具有较强效果图制作及网页设计能力(3) 熟悉网页制作，能与Web前端工程师紧密配合(4) 对色彩有深刻的把握力、独特的设计风格、独到的创意视点与创新意识(5) 熟悉HTML，Div，熟练运用Div + CSS布局与美化网页，能够手写HTML代码(6) 具有较强图片制作、处理能力。精通Photoshop、Fireworks Illustrator等图片处理相关软件(7) 熟悉 Flash Action3 网页设计类职业岗位的工作职责和职位要求职位名称网页设计工作职责（1） 负责公司网站整体视觉、UI、LOGO、宣传手册等设计与创意，负责网站设计的需求沟通，

7、确定网 页设计的视觉标准和风格标准等。（2）负责客户网站创意、设计、页面制作；负责频道、专题、网页的美工设计（3）负责公司网站的设计、改版与更新（4）负责网页、图片设计与制作（5）负责客户及系统内的广告和专题的设计（6）负责与开发人员配合完成所辖网站等前台页面设计和编辑（7）其他与美术设计相关的工作职位要求（1）具有扎实的美术功底、良好的艺术审美观、优秀的审美力、良好的创意思维和理解能力，能及时把 握客户需求，能独立完成整个网站页面设计与制作工作（2）具有良好的网站版式设计能力，色彩感和整体布局感较强（3）熟练使用常用图片设计和处理软件，对图片渲染和视觉效果有较好的认识（4）能熟练使用 Fla

8、sh、Dreamweaver、Firework、Photoshop、Illustrator 等软件，熟悉 HTML、Div、 CSS、JavaScript等，有手工编写和修改代码能力优先（5） 对Web设计及相关技术有很好的见解，能和Web程序员进行沟通和合作（6）工作积极主动、责任心强、思路开阔、有敬业精神，能在较大压力下完成工作（7）善于与人沟通，有高度的责任感和创新精神，保证工作质量（8）富于工作热情及团队合作精神，勇于接受挑战（9） 有网页设计及平面设计工作经验优先，有过Web和WAP等相关产品设计开发者优先，有手机UI、美术、设计经验者优先，具有大型网站美工经验者优先4 网页版面设计

9、类职业岗位的工作职责和 职位要求职位名称网站编辑工作职责（1）负责网站创意、网页设计、页面制作管理和维护，负责网站页面结构的设计和实施。（2）负责网站整体架构的设计和网站风格的把握（3）负责网站的设计、改版和更新（4）负责网站广告和专题的设计（5）独立制作flash广告，负责页面特效、网站图片、动画设计制作等（6）负责与开发人员配合完成网站前台页面设计和编辑（7）协调其他部门完成网站的开发职位要求（1）具有优秀的审美力、独特的创意、扎实的美术功底，对于艺术有着自己的追求和热爱（2）对于网站的美工开发有独到的见解和意见。对于色彩的搭配有着独到的见解和体会(3) 有创意及品味，有较强视觉创作能力，

10、扎实的色彩感和色彩把握能力，对色彩构图等元素敏感，对网页配色与排版有一定的经验(4) 对网站的结构、整体布局、色彩感觉良好；有丰富的想象力和创新力；思路开阔能较好的理解用户 界面的要求，能根据要求设计页面(5) 对网页美感有驾权和品评能力，能很好的把握网站整体风格设计，注重理解需求和用户体验(6) 有较强的网页设计和制作能力，能胜任栏目、网页的规划和制作，能够独立完成大型网站的静态美 工页面制作、排版及输岀(7) 精通创意设计和网页设计相关的软件工具 (例如Dreamweaver )，能熟练使用Photoshop、Fireworks、 Illustrator、Coredraw、Flash等相关

11、设计类软件， 熟悉页面设计、平面设计和 CI设计，熟悉ActionScript 者优先(8) 熟悉 HTML、DHTML、XHTML、XML、CSS、JavaScript 和 Div+CSS 网页布局技术、网页特效 设计技术，能手写 HTML代码和CSS样式(9) 熟悉Web标准和Div+CSS技术，能独立完成美工及 Div+CSS网页的静态页面布局，并至少能兼容IE和FireFox两款浏览器(10) 熟悉ASP.NET ( C#)或ASP，能与程序员合作完成网站开发项目(11) 熟悉网站建设、网页设计制作流程，能够配合程序员嵌套界面和程序。能跟踪最新的网页设计与 制作技术(12) 具有较强的

12、理解能力、领悟能力、沟通能力、工作协调能力和创新精神(13 )积极肯干，吃苦耐劳，具有高度的责任感(14)具有自我激励和良好的交流、沟通技巧，善于协作与沟通(15 )具备良好的职业素养及团队合作精神，有良好的职业道德观念和工作态度，并能承受工作压力5 网站编辑类职业岗位的工作职责和职位要求职位名称网站编辑工作职责(1) 负责公司网站的内容采编、整理、审核及发布，包括文字、图片、视频等资料，为网站提供符合用 户的有效信息(2) 负责公司网站内容的架构、栏目和专题的策划及更新维护；能够独立完成选题策划，稿件组织与编辑工作；针对网站目标受众提供有吸引力的网站内容；保证公司网站的正常运营以及网站推广活

13、动的实 施，以提升网站用户数、网站pv流量和用户粘着度(3) 负责策划与制作专题，参与专题和活动的策划、组织(4) 负责行业内活动的现场采访以及后续的稿件撰写、发布(5) 负责与技术等部门的沟通协作职位要求(1) 熟悉网络基本知识，能熟练使用Office等办公软件，熟练 Dreamweaver、Photoshop等网页制作编 辑工具和图像处理工具，可以独立制作、修改网页(2) 有较强的文字驾驭能力，有良好的文字、图片编辑能力，能够清晰而有逻辑的表达自己的想法，具 有创造性的思维；能独立撰写策划文案，有丰富的想象策划能力，能独立完成大型网站的策划方案(3) 熟悉网络语言，擅长用文字调动网络人群的

14、情绪，对网络文案的策划、 编辑有一定的实际操作经验， 熟悉网络编辑、销售型文案写作，有较强的文字编辑能力、编辑思维能力和策划能力，擅长信息的搜集 与整合，能独立完成各种文案的编辑和创作（4）踏实肯干，思维活跃，诚实守信，具有良好的团队合作精神（5）工作积极主动、勤奋好学、行为自律；为人诚实、正直，性格开朗、责任心强（6）具有迎接挑战的信心和对工作的激情6 网站美编类职业岗位的工作职责和职位要求职位名称网站美编工作职责（1）负责网站整体美化工作，负责网站的美观度和友好性的把握（2）负责公司网站的网页美工设计（3）负责公司网站相关新闻及专题的创意、页面风格设计及专题制作。（4）负责网站页面设计和常

15、规广告设计（5）负责专题和活动的美术设计工作职位要求（1）有较强的美术功底、良好的创意设计和视觉表现创造能力（2）熟练使用 Photoshop、CorelDraw、Flash等软件进行图片及动画创作（3） 熟悉网站建设流程及构架，熟练应用Div+CSS布局制作网页，能用 Div快速切图；熟悉 HTML语.言（4）具备独立策划能力，能快速在兼顾网站风格、用户体验、功能利用、视觉效果等多重角度的情况下设计作品（5）熟悉Web设计与开发的相关标准（6）具备客户服务意识，有独特的见解、独立思考能力和创新意识（7）具有敬业精神，良好的人际沟通能力和团队合作精神和协作能力，能承担工作压力附录B附录B课程教

16、学设计1 教学单元设计教学单元设计如下表所示单元序号单元名称建议课时建议考核分值单元1创建站点与浏览网页24单元2制作文本网页46单元3制作图文混排网页66单元4制作表格布局的网页610单元5制作包含超级链接和 AP Div的网页610单元6使用模板和库制作网页612单元7制作表单网页610单元8使用CSS布局与美化网页812单元9制作包含特效的网页812单元10设计与制作网站主页812单元11整合与发布网站46小计641002 教学流程设计教学流程设计如下所示教学环节序号教学环节名称说明1教学导航明确教学目标、重点和难点、熟悉教学方法、了解建议课时2操作准备在正式完成网页制作任务之前做好创建

17、所需的文件夹、拷贝所需的资 源、启动Dreamweaver CS6、创建本地站点等方面的准备工作3引导训练引导学习者一步一步完成网页设计与制作任务4引导训练 考核评价对单元引导训练任务的完成情况进行考核评价，包括考核项目、考核 内容、评分标准和评价方法等方面5同步训练参照引导训练的过程，学习者自主完成类似的网页设计与制作任务6同步训练考核评价对单元同步训练任务的完成情况进行考核评价7拓展训练自行确定网页主题、收集所需素材、设计网页结构、制作类似网页8拓展训练考核评价对拓展训练任务的完成情况进行考核评价9代码解读对HTML代码或CSS样式代码进行分析与说明10问题探究对网页设计与制作方面的关键问

18、题进行分析与阐述，熟悉相关理论知 识，对网页设计与制作提供方法指导和知识支持11单元小结对本单元所学习的知识和训练的技能进行简要归纳总结12单元习题通过习题测试理论知识的掌握情况和操作技能的熟练情况3 相关知识点与技能点选取与序化以及教学案例设计相关知识点与技能点选取与序化以及教学案例设计如下表所示单元序号相关知识点与技能点导航教学案例设计网页主题引导训练同步训练拓展训练单元1（1）认识网页和网站（2）认识浏览器窗口的基本组成（3）认识网页的基本组成元素（4）认识网页的基本布局结构（5）熟悉 Dreamweaver CS6 的工作界面（6）了解制作网页、处理图像、制作动画的工具（7）创建与管理

19、本地站点（8）浏览网页网站主页E游天下网快乐旅游网爱旅游网单元2（1）建立站点目录结构（2）创建与保存网页文档（3）设置页面的首选参数（4）设置页面的整体属性（5）在网页中输入文本和编辑文本（6）在网页中设置项目列表、输入空格和文本换行（7）网页文本的格式化（8）在网页中插入特殊字符、水平线和日期旅游景点概况旅游 景点 总览中国名河概况中国 名山 概况单元3（1）通过“管理站点”对话框创建站点（2）应用“文件”面板新建网页（3）设置页面的背景图像（4）从外部导入文本与设置文本格式（5）在网页中插入图像与设置其属性（6）插入鼠标经过图像与设置其属性（7）图文混排方法瀑泉游名瀑名泉名岛单元4（1）

20、使用表格布局网页（2）在网页中插入表格（3）在表格中插入嵌套表格、行和列（4）设置表格、行、列及单元格的属性（5）拆分与合并单元格江湖游千岛 湖长江三峡名湖（6）插入与删除行或列（7） 在表格中输入文字、插入图像与 SWF动画（8）实现滚动文字效果（9）设置网页头文件的内容单元5（1）绘制或插入 AP Div，设置AP Div的属性（2）创建外部链接（3）创建文本形式的内部链接（4）创建图片形式的内部链接（5）创建电子邮件链接（6）创建命名锚记和到该命名锚记的链接（7）在图像中设置热点区域，创建图像热点链接（8）创建文件下载链接（9）创建空地址链接（10）更改链接颜色、设置链接的打开方式（11

21、）测试链接的有效性（12）创建文字形式的导航栏（13）实现滚动图片功能（14）插入浮动框架并设置其属性（15）使用表格布局网页公园游炜界桂林名河单元6（1）创建与修改库项目（2）在网页中插入库项目（3）创建网页模板（4）定义与修改可编辑区域和可选区域（5）创建基于网页模板的网页（6）修改网页模板并更新网页（7）修改库项目并更新网页（8）插入图像占位符（9）使用表格布局网页名城游上海海口南京单元7（1）在网页中插入表单域（2）设置表单域的属性（3）在表单域中插入表单控件（4）预设文本域中文字字体和大小（5）使用Spry验证表单数据的有效性（6）应用行为实现表单网页所需的功能（7）调用JavaSc

22、ript脚本文件实现表单网页所需功 能（8）使用表格布局网页表单E游调查E游留 言薄E游注册单元8（1）使用Div + CSS布局网页（2）设计页面的布局结构（3）创建页面布局样式（4）创建美化页面元素的样式山岳游黄山泰山庐山(5) 插入Div标签对页面进行布局(6) 新建代码片断(7) 在页面区块中输入文字(8) 在页面区块中插入页面元素：SWF动画、代码 片断、表格、图像、项目列表、底部导航栏等单元9(1) 使用Div + CSS布局网页(2) 在网页中显示当前日期(3) 不同时间段显示不同问候语(4) 滚动网页标题栏中的文字(5) 动态改变网页中文本字体大小(6) 关闭网页时自动弹岀小窗

23、口(7) 鼠标指针指向不同的超级链接时，切换不同图 片(8) 转动鼠标滚轮缩放图片生态游云南九寨沟地质 公园 和森 林公园单元10(1) 使用“ Div + CSS”和表格联合布局网页(2) 应用CSS样式设计网站主页的主体布局结构(3) 应用CSS样式设计网站主页的局部布局结构(4) 设计与制作导航栏，使用浮动框架(5) 插入Flv视频、AP Div对象和SWF动画(6) 设计连续滚动图片的特效(7) 创建包含底部导航栏和版权信息的脚本文件， 在网页中插入外部脚本文件(8) 设计用户登录表单(9) 实现状态栏中文字移动功能旅游网主页E游天下 网主 页快乐 旅游 网主页爱旅游网主页单元11(1

24、) 优化网页(2) 将多个网页整合成一个网站(3) 创建超级链接(4) 测试网站(5) 申请网站域名和网页空间(6) 发布网站(7) 宣传与推广网站旅游E游天下网快乐 旅游 网爱旅游网4 网页设计与制作任务设计网页设计与制作任务设计如下表所示单元序号网页设计与制作任务单元1【任务1-1】创建“ E游天下”站点并浏览网页【任务1-1-1】创建本地站点“ E游天下”【任务1-1-2】认识Dreamweaver CS6的工作界面【任务1-1-3】打开与保存网页文档0101.html【任务1-1-4】在浏览器中浏览网页 0101.html【任务1-2】赏析“快乐旅游”网的主页【任务1-3】赏析“爱旅游

25、”网的主页单元2【任务2-1】制作总览旅游景点的文本网页【任务2-1-1】建立站点目录结构【任务2-1-2】创建与保存网页文档 0201.html【任务2-1-3】设置网页的首选参数【任务2-1-4】设置页面的整体属性【任务2-1-5】在网页中输入文字【任务2-1-6】输入与编辑网页中的文本【任务2-1-7】网页文本的格式化【任务2-1-8】插入与文本相关的元素并设置其属性【任务2-1-9】设置超链接与浏览网页效果【任务2-2】制作介绍中国名河的文本网页【任务2-3】制作介绍中国名山的文本网页单元3【任务3-1】制作介绍中国瀑布的图文混排网页【任务3-1-1】使用“管理站点”对话框创建站点“单

26、元3”【任务3-1-2】应用“文件”面板新建网页“0301.html”【任务3-1-3】设置页面的背景图像【任务3-1-4】从外部导入文本与设置文本格式【任务3-1-5】插入图像与设置图像属性【任务3-1-6】插入鼠标经过图像及设置其属性【任务3-2】制作介绍中国名泉的图文混排网页【任务3-3】制作介绍中国名岛的图文混排网单元4【任务4-1】制作以表格布局的展示千岛湖旅游景点的网页【任务4-1-1】插入表格1并设置其属性【任务4-1-2】在表格1中插入SWF动画并设置其属性【任务4-1-3】设置表格1单元格的背景图像【任务4-1-4】在表格1的单元格中输入文本【任务4-1-5】设置滚动文本效果

27、【任务4-1-6】插入表格2并设置其属性【任务4-1-7】设置表格2及设置行、列属性【任务4-1-8】在表格2第1列的单元格中插入图像并设置其属性【任务4-1-9】在表格2第2列两个单元格中输入文本并设置其属性【任务4-1-10】在表格2的第3列单元格中插入嵌套表格2-1【任务4-1-11】插入表格3并设置其属性【任务4-1-12】插入表格4并设置其属性【任务4-1-13】插入嵌套表格4-1并设置其属性【任务4-1-14】插入表格5并设置其属性【任务4-1-15】设置网页头文件的内容【任务4-2】制作以表格布局的展示三峡旅游景点的网页【任务4-3】制作以表格布局的介绍中国名湖的网页单元5【任务

28、5-1】制作包含超级链接的展示张家界景点的网页【任务5-1-1】创建网页文档 0501.html【任务5-1-2】在网页0501.html中绘制或插入AP Div【任务5-1-3】在网页0501.html中创建多种类型的超级链接【任务5-2】制作包含超级链接的展示桂林旅游景点的网页【任务5-3】制作包含超级链接的介绍中国名河的网页单元6【任务6-1】使用模板和库制作上海游的网页【任务6-1-1】创建库项目【任务6-1-2】在网页中插入库项目【任务6-1-3】创建网页模板【任务6-1-4】定义与修改可编辑区域和可选区域【任务6-1-5】创建基于网页模板的网页【任务6-1-6】修改网页模板并更新网

29、页【任务6-1-7】修改库项目并更新网页【任务6-2】使用模板和库制作海口游的网页【任务6-3】使用模板和库制作南京游的网页单元7【任务7-1】制作1个E游调查的表单网页【任务7-1-1】插入表单域及其属性设置【任务7-1-2】插入表单控件与设置其属性【任务7-1-3】预设文本域中输入文字的字体和大小【任务7-1-4】使用Spry验证表单数据的有效性【任务7-1-5】应用行为实现表单网页所需的功能【任务7-1-6】调用外部JavaScript脚本文件实现表单网页所需的功能【任务7-2】制作1个E游留言薄【任务7-3】制作1个注册网页单元8【任务8-1】使用CSS布局与美化“黄山游”网页【任务8-1-1】网页页面的布局设计【任务8-1-2】创建页面布局样式【任务8-1-3】创建美化页面元素的样式【任务8-1-4】插入Div标签