网页制作课程整体设计
网页设计教程课程设计
网页设计教程课程设计一、课程设计背景随着互联网的不断发展，网页设计也日渐成为一项热门的技能。
越来越多的人开始关注网页设计，并且希望通过学习来提升自己的能力。
因此，开设一门网页设计教程，不仅可以为学生提供知识和技能，还能满足市场的需求。
二、课程设置1.课程名称网页设计教程2.课程时间本课程共计12周，每周2节课，每节课2小时，共计96个学时。
3.课程目标通过本课程的学习，学生应该能够：•掌握网页设计的基础知识和技巧•能够熟练使用网页设计软件和工具•能够根据需求创建功能强大的网页设计方案•能够有效地进行网页设计的审美研究和评估4.课程内容本课程的主要内容包括：第一周•网页设计的概述和基本概念•网页设计的基本流程和方法论第二周•网页设计软件的介绍和使用•熟练掌握网页设计软件的各项功能第三周•网页设计元素的介绍和应用•完成网站首页的设计案例第四周•网页设计布局的技巧和方法•完成网站二级页面的设计案例第五周•图片和视频的应用技巧•完成网站资讯页面的设计案例第六周•颜色和字体的应用技巧•完成网站服务页面的设计案例第七周•动画和交互的实现方法•完成网站产品页面的设计案例第八周•网页设计试验和评估的方法•完成网站联系页面的设计案例第九周•网页响应式设计的基本原理•完成响应式网站的设计案例第十周•SEO优化的基本知识和技巧•熟练掌握SEO优化工具的使用方法第十一周•数据分析和用户研究的基本方法•掌握数据分析和用户研究工具的使用方法第十二周•课程总结和作品展示•展示个人设计作品并进行评估和交流5.教学方式本课程采用理论与实践相结合的教学方式，具体包括：•讲授与演示：由教师进行课堂讲解和操作演示，使学生了解网页设计的基本理论和实践方法。
•实践与案例：在教师指导下，学生通过完成实际网页设计案例，深入理解和掌握相关知识和技能。
•课堂讨论和互动：教师引导学生进行互动式的讨论，促进学生之间的知识交流和思维碰撞。
6.评估方式学生的成绩由综合表现和设计作品评估结果综合决定。
web前端课程设计
web前端课程设计一、课程目标知识目标：1. 让学生掌握Web前端开发的基本概念，理解HTML、CSS和JavaScript在网页中的作用和关系。
2. 学会使用HTML构建网页结构，掌握常见标签的使用方法。
3. 掌握CSS基本语法，能实现网页的布局和样式设计。
4. 掌握JavaScript基本语法，实现简单的交互效果。
技能目标：1. 培养学生独立完成静态网页设计与开发的能力。
2. 提高学生利用Web前端技术解决实际问题的能力。
3. 培养学生的团队协作和沟通能力，能与他人共同完成项目。
情感态度价值观目标：1. 培养学生热爱互联网技术，对Web前端开发产生浓厚的兴趣。
2. 培养学生具备良好的编程习惯，注重代码的可读性和可维护性。
3. 培养学生的创新意识和批判性思维，善于发现和解决问题。
课程性质：本课程为实践性较强的课程，注重培养学生的动手能力和实际操作技能。
学生特点：学生具备一定的计算机基础，对Web前端技术有一定了解，但实践经验不足。
教学要求：结合课程性质和学生特点，教学过程中应以案例为主线，引导学生动手实践，注重培养学生的实际操作能力和解决问题的能力。
将课程目标分解为具体的学习成果，以便于教学设计和评估。
二、教学内容1. 网页基础知识- 网页的基本概念- 网页的组成元素2. HTML基础- HTML基本结构- 常见HTML标签及其使用方法- 表格、表单、列表等HTML元素的运用3. CSS样式- CSS基本语法- 选择器、属性和值- 盒子模型与布局- 响应式设计4. JavaScript基础- JavaScript语法基础- 数据类型、变量、运算符- 控制语句、函数- 事件处理、DOM操作5. 综合实战- 静态网页设计与开发- 响应式网页设计- 简单的动态效果实现教学内容安排与进度：第一周：网页基础知识，HTML基础第二周：CSS样式，盒子模型与布局第三周：JavaScript基础，事件处理第四周：综合实战，项目开发与优化教材章节关联：1. 网页基础知识——《Web前端开发基础》第1章2. HTML基础——《Web前端开发基础》第2-3章3. CSS样式——《Web前端开发基础》第4-5章4. JavaScript基础——《Web前端开发基础》第6-7章5. 综合实战——结合整本教材内容进行项目实践教学内容确保科学性和系统性，以教材为基础，结合实际案例，引导学生掌握Web前端技术的基本知识与技能。
web前端开发课程设计
web前端开发课程设计一、教学目标本课程旨在通过学习web前端开发，使学生掌握HTML、CSS和JavaScript的基本知识，能够独立完成静态网页的编写和设计。
具体目标如下：知识目标：理解并掌握HTML标签、属性及语义，能够编写结构合理的网页；熟练使用CSS选择器、盒模型、布局和样式优先级，能够实现美观的页面样式；掌握JavaScript基本语法、流程控制、函数和事件处理，能够实现网页的交互功能。
技能目标：能够使用至少一种前端构建工具（如Webpack）进行项目构建；熟悉版本控制系统（如Git）的使用，能够进行代码的版本管理和团队协作；能够运用响应式设计原理，实现适配不同设备的网页。
情感态度价值观目标：培养学生对前端开发的兴趣，激发其创新精神和团队合作意识，使其认识到web前端技术在现代社会中的重要作用，提高其信息素养。
二、教学内容本课程的教学内容主要包括HTML、CSS和JavaScript三个部分，具体安排如下：第1-2周：HTML基础知识，学习标签、属性及语义，掌握基本的页面结构编写。
第3-4周：CSS样式编写，学习选择器、盒模型、布局和样式优先级，能够实现页面样式的设计与优化。
第5-6周：JavaScript基础，学习基本语法、数据类型、流程控制、函数和事件处理，能够实现基本的网页交互功能。
第7-8周：前端构建工具和版本控制，学习Webpack的使用和Git的配置，掌握项目构建和团队协作的方法。
第9-10周：响应式设计，学习媒体查询和移动端布局，实现适配不同设备的网页。
三、教学方法为了提高学生的学习兴趣和主动性，本课程将采用多种教学方法，如讲授法、讨论法、案例分析法和实验法等。
讲授法：用于传授基本知识和概念，引导学生掌握核心要点。
讨论法：鼓励学生针对案例进行分析讨论，培养其解决问题的能力。
案例分析法：通过分析实际项目案例，使学生了解web前端技术在实际应用中的作用。
实验法：让学生动手编写代码，培养其实际操作能力和创新精神。
网页设计与制作课时说课稿
<div id=“main”>
先堆到一起再说！
<div id=“main_left></div>
<div id=“main_right>
<div id=“right_top>
<div id=“right_top_kcjs”></div>
<div id=“right_top_jcjs”></div>
</div>
课程 目标
网站设计与制作能力、团队协作能力、 沟通能力、分析解决问题能力、项目实施能力
内容 选取 组织
以教学仿真项目和企业实际项目为载体 重构和序化教学内容
项目五 佳佳商城用户及留言管理系统
课
项目一 书法家庄辉个人网站
程
教
学
项目二 电子信息工程系迎评网站
内
容
选
项目三 精品课程网站
取
与
安
项目四 武威旅游网
展 示 与 评 价
自信感、成就感、责任心
以工作任务为主线，以学生为主体，以教师为主导，融“教、学、做、评”为一体。
六
课后拓展练习
主页效果图 二级页面效果图
巩固本节课的内容 培养动脑、动手、创 新
大部分学生对盒子模型有 了更深刻的认识，会用 “DIV+CSS”布局技术 及制作出精品课程网站的 主页，能够熟练应用css 语法规则。
任 务
论）
目
标
通过插入多个DIV ,通过控制盒子外观的CSS样式表
教师为主导 学生为主体
三
学 生 自
1.学生分析精品课程网站主页的布局。
主 探
网站建设与管理整体设计PPT课件
网页制作基础 图形图像处理
网站建设与管理
WEB前端技术 FLASH动画制作
网络数据库系统开发 MIS系统开发
C#编程基础 SQLServer 数据库基础
程序设计 PHP程序设计
4
课程简介—网站建设项目开发流程
5
课程简介—适用岗位
网站策划 网站美工 网 页 制 作 、 编 辑 、 web 初 级 程 序员 网站管理、软件实施顾问
中职、高职、普通高校开设同类课程的异同点
共同点：都是围绕网站建设学习的知识，并在各 种软件工具的帮助下完成操作。
中职
主要面向网页制作\编辑,侧重相关软件 的操作。
高职
主要面向网站管理，侧重网站建设各 流程管理能力与技能能力培养,对于 工具完成从使用工具到运用工具的 转变。
普通高校
开设相关的课程会侧重网站编程网站 架构的学习,网站管理等。
1. 根据WEB技术的发展，网站建设课程的内容在不断变化； 2. 课程的学习，由流程的单一环节学习到按照规范流程，完成网站建设，
符合实际工作流程； 3. 完成单纯对工具的操作，到运用工具完成网站建设的转变。
8
整体设计1—总体思路
阶段一 岗位任
务分析
阶段二 知识技
能素养
阶段三 设计训
练项目
9
整体设计2—课程定位
整体设计3—训练项目与课程进度表1
周 次
1周（8节）
项 目
子 项 网站策划与分析 目
1-1确定目标、策划
任 务
网站，签订合同 12完成需求分析，收 集资料，进度安排
①能够进行客户沟 通，需求分析，网 站可行性评估；
②能够制定网站建 设方案；
③收集整理网站资 料；
dreamweaver网页设计教学计划(2024)
2024/1/29
4
网页设计基本概念
2024/1/29
01
网页设计是指使用各种网页制作工具和技术，将网页元素（ 如文字、图片、视频等）进行排版、美化和优化，以呈现出 良好的视觉效果和用户体验。
02
网页设计需要遵循一定的设计原则和规范，如页面布局、色 彩搭配、字体选择等，以保证网页的整体美感和易用性。
12
表格布局方法
2024/1/29
插入表格
在Dreamweaver中，可以通过插入表格的方式来布局页 面。选择合适的行数和列数，并设置表格的宽度、高度、 边框等属性。
嵌套表格
通过嵌套表格的方式，可以进一步细化页面的布局。在表 格中插入另一个表格，并设置其属性，可以实现更复杂的 布局效果。
表格属性设置
页面结构规划
确定页面主题和风格
在开始设计之前，需要明确页面的主题和风 格，以便后续的布局和排版工作能够围绕主 题展开。
2024/1/29
划分页面区域
根据页面主题和风格，将页面划分为不同的区域， 如页头、导航、主体内容、页脚等。
设计页面草图
在划分好页面区域后，可以设计页面草图， 用简单的图形和线条勾勒出页面的大致布局 和排版。
30
THANKS
感谢观看
2024/1/29
31
21
表单元素添加及验证方法
设置表单元素属性
根据需要设置表单元素的属性， 如名称、值、类型等。
添加验证规则
选择需要验证的表单元素，在行
为面板中添加验证规则，如检查 是否为空、检查格式是否正确等
。
自定义验证提示信息
根据需要自定义验证提示信息， 以便用户更好地理解验证结果。
添加表单元素
web前端网站课程设计
web前端网站课程设计一、课程目标知识目标：1. 学生能理解Web前端的基本概念，掌握HTML、CSS和JavaScript的基础知识；2. 学生能运用HTML构建网页结构，使用CSS进行页面布局和美化，运用JavaScript实现简单交互功能；3. 学生了解Web前端开发规范和浏览器兼容性问题，能对网站进行基本的优化。
技能目标：1. 学生能运用所学知识独立完成一个简单静态网站的开发，包括首页、列表页和详情页；2. 学生掌握使用Web前端开发工具，如Visual Studio Code、Sublime Text 等，熟练进行代码编写和调试；3. 学生能够运用版本控制工具（如Git）进行代码管理和团队协作。
情感态度价值观目标：1. 学生培养对Web前端开发的兴趣，激发学习热情，树立编程自信心；2. 学生通过团队协作，学会沟通与交流，培养合作精神和解决问题的能力；3. 学生了解Web前端技术的发展趋势，关注行业动态，培养不断学习和探索的精神。
课程性质：本课程为实践性较强的课程，结合理论教学和实际操作，使学生掌握Web前端开发的基本技能。
学生特点：学生具备一定的计算机操作能力，对网页制作有一定了解，但对Web前端开发技术尚不熟悉。
教学要求：注重理论与实践相结合，通过案例教学、项目实战等方式，使学生熟练掌握Web前端开发技术，培养实际操作能力。
同时，关注学生的情感态度价值观培养，提高学生的综合素质。
二、教学内容1. 网页基础知识- 网页的概念、组成及分类- 网页开发工具的选择与使用2. HTML基础- HTML文档结构及常用标签- 表格、列表、表单的使用- HTML5新特性3. CSS样式- CSS选择器、属性和值- 盒模型、浮动和定位- 响应式布局与媒体查询4. JavaScript基础- JavaScript语法和基本数据类型- 函数、事件处理和DOM操作- JSON和Ajax5. 网站制作实战- 网站规划与设计- 页面布局与美化- 交互功能实现6. 网站优化与发布- 网站性能优化技巧- 浏览器兼容性测试- 网站发布与维护教学内容安排与进度：第一周：网页基础知识，HTML基础第二周：CSS样式，JavaScript基础第三周：网站制作实战（上）第四周：网站制作实战（下）第五周：网站优化与发布，课程总结与评价教学内容与教材关联性：本教学内容与教材紧密关联，涵盖《Web前端开发技术》教材中的第一章至第五章的主要内容，按照教学大纲的安排，逐步引导学生掌握Web前端开发的基本技能。
网页设计与制作课程教学大纲
《网页设计与制作》课程教学大纲1000字一、课程名称：网页设计与制作二、课程性质：专业选修三、先修课程：计算机基础、HTML语言基础、CSS样式基础、JavaScript基础四、课程目的：本课程旨在培养学生熟练掌握网页设计和制作所需的技能和知识，包括从网站设计和规划到页面布局和导航、从图像和多媒体素材的处理到网页代码开发的全过程。
五、教学内容：1.网站设计和规划（1）需求分析与目标设定（2）信息架构设计（3）网站页面设计2.页面布局与导航（1）CSS样式技术（2）网页布局设计（3）导航设计3.视觉设计（1）颜色与图像设计（2）多媒体素材处理（3）响应式设计技术4.网页代码开发（1）HTML语言与标签（2）CSS样式（3）JavaScript脚本5.网页制作（1）网页编辑器使用（2）网页调试与测试（3）网页发布和维护六、教学方法：课堂讲授、案例分析、实践操作、课程论文七、成绩评定方式：平时成绩占30%，包括参与度、作业完成度等；考试成绩占70%。
八、教材：1.《Web页面设计基础》2.《HTML5与CSS3基础教程》3.《JavaScript权威指南》九、参考资料：1.《Web标准设计》2.《响应式Web设计》3.《图解CSS3》4.《实战Bootstrap》十、实验操作：实践操作是课程的重要组成部分。
通过实验操作，学生将掌握网页设计和制作的实际技能和经验。
实验操作包括：1.网站规划和设计2.网页布局与导航3.视觉设计和处理4.网页代码开发和调试5.网页发布和维护十一、教学进度安排：第一周：课程介绍和网站设计和规划第二周：网页布局与导航第三周：视觉设计和处理第四周：HTML语言与标签第五周：CSS样式第六周：JavaScript脚本第七周：网页编辑器使用第八周：网页调试与测试第九周：网页发布和维护第十周：课程总结和复习，期末考试。
网页设计与制作课程课程大纲
xxx学校课程大纲科目名称：《网页设计与制作》专业：计算机说明随着互联网的高速发展和广泛传播，对从事网页设计与制作的人员需求量也愈来愈多。
教材在教学过程中起着至关重要的作用，而缺乏优秀实用的网页设计与制作方面的教材是目前中职学校普遍存在的问题。
本书编者旨在为中职学校相关专业，以及对网页设计与制作有兴趣的人员提供一本实用教程。
本书是依据网页设计行业的业内制作标准和相关案例执行为范围编写的。
在编写过程中针对读者的特点，项目选择合理、针对性强、理论和实践有机融合；以实践为主，特别注重实用性，并注重融入先进的教学理念与方法，注重提高读者的学习能力。
全书从实用的网页设计制作项目入手，以任务驱动的方式系统地介绍了以下内容：网站的制作流程、使用HTML制作简单网页、认识Dreamweaver CS3、搭建与管理本地站点、网页元素的编辑、使用CSS控制页面元素、使用表格布局制作页面、使用框架布局制作网页、使用CSS+DIV布局页面、使用模板和库提高制作效率、使用JAVAScript制作网页特效、策划与制作个人艺术网站。
同时结合作者多年来积累的教学工作经验，以实践为主，理论融合其中，是帮助教师联想三大软件、提高学生实践力的有力助手。
通过课程学习，学生将具备网页设计与制作的基本技能，并帮助学生在从业道路上积累经验。
本教材还具备一下特点：1.任务明确；2.结构新颖；3.图文并茂，简洁易懂；4.与国家职业资格证接轨。
《网页设计与制作》课程教学大纲课程名称：《网页设计与制作》课程总学时：72一、教学目的和任务（一）目的《网页设计与制作》是计算机相关专业的一门应用性较强的选修课程。
通过对网页设计与制作的初步学习，使学生对网页设计与制作的各个环节有感性的认识并理性理解各个网页中各布局的功能和特点，学习网页设计与制作制作方法，为今后在网页设计与制作行业工作提供必要的基础知识，以便能够得心应手地使用好Dreamweaver软件，更好地使设计网页发挥作用。
《网页设计与制作》课程教案
《网页设计与制作》课程教案第一章：网页设计与制作概述1.1 课程介绍网页设计与制作的基本概念网页设计与制作的目的与意义网页设计与制作的应用领域1.2 网页设计原则网页设计的基本原则用户体验设计原则响应式网页设计原则1.3 网页制作工具与技术网页设计软件的选择与使用HTML与CSS的基本语法与使用方法JavaScript的基础知识与应用第二章：网页布局与排版2.1 网页布局的基本概念网页布局的定义与作用常见的网页布局方式布局元素的分类与使用2.2 排版的原则与方法排版的基本原则文本的格式化与排版图片与多媒体元素的排版2.3 响应式网页布局与排版响应式网页布局的概念与意义媒体查询的使用方法布局与排版在不同设备上的应用第三章：网页色彩与字体3.1 色彩的基本概念与应用色彩的视觉效应与心理作用色彩的搭配原则与技巧色彩在网页设计中的应用案例3.2 字体的选择与使用字体的分类与特点字体的搭配原则与技巧字体在网页设计中的应用案例3.3 网页色彩与字体的综合应用色彩与字体的协调与平衡字体大小与行距的设置与调整色彩与字体的个性化应用与创新第四章：网页图片与多媒体元素4.1 网页图片的选择与处理图片的格式与特点图片的选择标准与技巧图片的处理与优化方法4.2 多媒体元素的应用音频与视频元素的应用动画与GIF图片的应用交互式多媒体元素的应用4.3 网页图片与多媒体元素的优化图片与多媒体元素的加载优化图片与多媒体元素的响应式应用图片与多媒体元素的视觉效果与用户体验第五章：网页交互与动画5.1 网页交互的基本概念与原理交互的定义与作用交互的实现方式与技术交互的设计原则与技巧5.2 JavaScript基础与应用JavaScript的基本语法与功能事件处理与DOM操作JavaScript库与框架的选择与使用5.3 网页动画的实现与优化CSS动画的制作方法与技巧JavaScript动画的制作方法与技巧动画的加载优化与性能考虑第六章：HTML与CSS高级应用6.1 表单设计与验证表单的基本结构与属性表单元素的使用与布局表单验证的实现方法6.2 网页组件设计与实现导航栏与面包屑的制作折叠面板与标签页的制作轮播图与幻灯片的设计与实现6.3 网页动画与过渡效果CSS过渡与动画的实现JavaScript动画的实现方法动画的性能优化与调试第七章：前端框架与库7.1 前端框架的基本概念前端框架的作用与优势常见的前端框架介绍框架的选择与使用7.2 Bootstrap框架的应用Bootstrap的基本结构与组件栅格系统与布局设计Bootstrap表单与样式定制7.3 React与Vue框架的选择与应用React框架的基本概念与使用方法Vue框架的基本概念与使用方法框架项目结构与组件化开发第八章：网页兼容性与优化8.1 网页兼容性基本概念浏览器兼容性的原因与挑战兼容性测试的方法与工具兼容性解决方案与最佳实践8.2 网页性能优化网页加载速度的影响因素图片与多媒体元素的优化代码压缩与合并技巧8.3 搜索引擎优化（SEO）SEO的基本概念与原则关键词研究与内容优化代码优化与站点结构调整第九章：网页安全与维护9.1 网页安全基本概念网页安全的威胁与挑战跨站脚本攻击（XSS）的预防跨站请求伪造（CSRF）的预防9.2 数据备份与恢复数据备份的重要性与方法数据库备份与文件备份恢复策略与流程9.3 网站维护与更新网站维护的内容与流程网站更新的方法与技巧网站监控与性能调优第十章：项目实践与案例分析10.1 项目实践流程项目需求分析与规划设计阶段与实现阶段项目测试与上线流程10.2 项目案例分析案例一：个人博客网站设计与制作案例二：电子商务网站设计与制作案例三：响应式企业官网设计与制作项目过程中的问题与解决方法网页设计与制作的趋势与展望重点和难点解析1. 第一章：网页设计与制作概述难点解析：网页设计原则的理解与应用、网页制作工具与技术的熟练运用2. 第二章：网页布局与排版难点解析：响应式网页布局与排版的设计与实现3. 第三章：网页色彩与字体难点解析：色彩与字体的协调与平衡、字体大小与行距的设置与调整4. 第四章：网页图片与多媒体元素难点解析：网页图片与多媒体元素的优化方法、响应式应用5. 第五章：网页交互与动画难点解析：JavaScript事件的处理与DOM操作、动画的实现与优化6. 第六章：HTML与CSS高级应用难点解析：表单验证的实现方法、网页组件的布局与样式设计7. 第七章：前端框架与库难点解析：框架的选择与使用、React与Vue框架的选择与应用8. 第八章：网页兼容性与优化难点解析：兼容性解决方案与最佳实践、网页性能优化的实施方法9. 第九章：网页安全与维护难点解析：预防跨站脚本攻击（XSS）与跨站请求伪造（CSRF）的策略、网站维护与更新的方法10. 第十章：项目实践与案例分析难点解析：项目需求的分析与规划、项目测试与上线流程的控制本教案《网页设计与制作》涵盖了网页设计与制作的基本概念、技术应用、项目实践等各个方面。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
1 天津市第一商业学校课程教学设计模板 《网页制作》
(2014 ～2015 学年第二学期) 适用计算机应用专业、计算机网络专业
系部(专业) 信息学系 教 师 刘晓玥 2
一、管理信息 课程名称：网页制作 参与人：刘晓玥、苏懿琳 批准人：罗维 所在系部：信息学系 制定时间：2014年2月 二、课程性质 学时：68 授课对象：计算机应用专业 性质：技能训练项目 三、课程设计： 1. 课程目标设计： 知识目标 （1）掌握网页制作的基本知识及网页设计流程； （2）掌握基本的代码编写方法； （3）掌握网页界面的基本设计方法; （4）掌握网页排版布局的基本方法； （5）掌握网页制作中表单、CSS样式、链接、插入媒体文件的基本设置方法。 能力目标 （1）培养学生对网页页面的规划能力以及网页结构和功能的分析能力； （2）培养利用photoshop、Flash软件进行网页logos设计、网页界面设计、网页动画制作的的能力； （3）培养利用网页制作软件制作不同类型的网站，并能够利用所学技术为企业开发宣传型网站的能力； 3
（4）培养学生网页色彩搭配及欣赏能力以及独特的构思和创新能力； （5）在课程中培养学生的团队协作精神，并结合实际工作岗位，让学生掌握更多的从业技能和从业规范。 （6）通过课程学习让学生达到能够利用photoshop软件完成不同类型网站的界面设计、利用flash软件为网页设计动画效果，最后利用dreamweaver软件，实现网站的各项功能，并完成页面间的自由跳转，最后达到为小型企业设计宣传型网站的能力水平，实现学习和实际工作紧密对接。 情感目标 （1）能体会《网页制作》课程学习中的乐趣，乐于接触本课程相关读物； （2）在生活中浏览网站，能分析出实际生活中所使用网站的开发技术和相关方法； （3）掌握学习方法，引发学生学习兴趣； （4）模拟实际工作岗位情境和实际工作环境，为学生走向就业岗位打好基础，并在课堂中培养学生的职业素养。 （5）乐于接触并了解国内网页制作的发展及其趋势，乐于从事网页制作相关设计工作。 2. 学习情境设计 序号 项目名称 学时 1 规划布局网站 6 2 电影网站页面设计 12 3 电影网站建设 4 4 旅游网站建设 8 5 运动网站建设 4 6 发布网站 2 4
3. 能力训练任务设计 编号 能力训练任务名称 拟实现的能力目标 相关支持知识 训练方式手段及步骤 结果 （可展示）
1 规划布局网站 1.能根据不同类型的网站定位设计风格。 2. 能对不同类型的网站进行布局设计。 3.能掌握网页设计相关流程及简单了解几种网页设计软件。
网站的类型、风格。 网站的常用技术。 网站的结构； 网页的色彩搭配。 网页布局； 几种网页设计软件。 自主学习+学生练习+教师指导 1．让学生欣赏日常生活中常见的网站，引出本节课内容。 2．结合具体案例学生分析网站的风格、类型、结构等。 3.学生通过教材介绍掌握建设网站的常用技术。 4.学生规划、设计网站结构。 网站规划设计说明
2 电影网站页面设计 1.能利用ps对网站进行结构设计并设计网站logo。 2.能够使用ps添加网页界面中的图片及文字元素。 3.能使用Flash软件设计网站logo及特效动画的利用ps设计网站首页流程及设计方法。 Flash软件的基本操作。 Flash制作简单动态文字效果。 自主学习+学生实操+教师指导 1.学生举例出经常使用的网站都有哪些，并利用所学的ps技术，列举出网站的设计风格和颜色搭配。 2.教师指导学生使用ps设计网站首页。 3.实现由教师讲解制作到学生自电影网站页面设计作品
7 用户管理网站建设 8 8 电子商务网站建设 12 9 企业网站建设 12 总计 68 5 制作。 主创新的能力训练培养。 4.学生通过观察对比，分析网站中Flash应用的效果，并根据效果分析制作出动静结合的网站。
3 电影网站建设 （初级难度） 1.能完成站点的规划与建立。 2. 能对网页中文字、图片及表格的运用设计。 3. 能制作一个简单的图文混排页面。 4.能力用HTML语言编写简单代码页面。 在网页中插文字及图片的操作。 HTML语言代码结构及使用方法。 理论讲授+学生实操+教师指导 1.学生根据书中静态网站的建设方法，完成静态网站站点制作，教师给予学生企业规范化的指导。 2.学生参考教学平台设计步骤和方法独立完成图文混排页面设计。 3.教师讲解HTML代码的含义及使用方法，指导学生完成简单的图文混排页面。 电影网站整体设计作品
4 旅游网站建设 （中级难度） 1．能完成表单页面的界面设计。 2.能在表单中添加各种表单元素。 3．能在网页中增加多媒体效果设计。 4．能完成网站各页面间表单页面。 页面多媒体效果。 页面跳转效果。 新闻资讯调用。 产品分类调用。 理论讲授+学生实操+教师指导 1.利用实例指导学生列举出实际生活中表单页面的应用实例，明确表单设计的重要性。 2.教师演示表单页面创建的操作过程。 3.学生结合实例开发相关表单页
旅游网站设计作品 6
的跳转链接并能熟练使用其他几种链接方式。 面，并实现简单表单功能。 5 运动网站建设（高级难度） 1．能完成个性化的网页制作，并在设计中加入自己的创意效果。 2．能在页面中添加特殊效果，丰富页面。 3.能力用模板技术提高网页制作效率。
css样式的设置与制作。 利用层来制作特殊效果。 模板的设计及使用。 理论讲授+学生练习+教师指导 1.教师引用两个网站，指导学生比较两个网站设计的优缺点，学生自己总结出网站应该怎样设计，才算是美观的网站。 2.根据学生的分析，教师引入本节课学习的重点案例，调动学生学习积极性。 3.学生练习相关操作及具体实现方法。 运动网站设计作品
6 发布网站 1．能在网上完成域名的申请。 2．能将设计好的网页上传到本机在IE浏览器中浏览。 域名的申请方法及文件的上传方法。 小组讨论+学生实操+教师指导 1.小组讨论域名的分类及域名的申请方法。 2.师生共同总结域名的分类以及域名申请方法。 3.教师推荐几个常用的域名申请网站，丰富学生知识领域。 3.学生练习相关域名申请及文件上传访问的具体方法，在班级中同学间互相进行测试评价。 网站发布 7 用户管理网站1．能完成数据库和数据数据库设计。 布置情境引入讨论+学生实操+教能实现用 7
建设 （后台建设） 表的整体设计。 2．能掌握用户登录的设置方法，实现用户登录功能。 3．用户登录功能的实现方法。 用户注册。 用户登录。 师指导 1.教师引入讨论话题：我们在使用网站或者访问网站资源时，网站是否都会要求用户进行注册并登录网站；学生讨论相关内容，并总结实际应用操作。 2.根据讨论话题引入本节课知识点，明确设计方法及开发步骤，在教师指导下，学生分布进行实践操作练习。 3.学生完成用户注册、用户登录等网站界面制作及功能设置。 户登录注册的用户管理网站设计作品
8 电子商务网站建设 （技能大赛项目） 1.能掌握利用相机拍摄静态物品的方法。 2.能完成图片的处理及设计。 3.能切合主题，完成电子商务网站界面设计工作。 4.能制作出功能齐全的静态电子商务网站，并用于商品展示。 电子商务网站设计与制作。 模拟情境+学生实操+教师指导 1.模拟企业实际工作流程，明确各项任务。 2.学生分组，并按照实际工作岗位进行分工，根据教师提出的制作要求合理安排选出组长并针对学生的不同特点，分配具体的工作任务。 3．学生根据设计流程及开发要求，按照分工进行网站开发工作，并做到时时评价监管。 电子商务网站设计作品 8
9 企业网站建设 （引入企业实际开发项目）
1.评价学生沟通能力、敬业精神及职业素养。 2.评价学生网站的设计能力。 3.评价学生对网站开发知识的综合运用能力。 4.评价学生的创新能力以及审美意识。 企业网站设计与制作。 企业实践+学生实操+教师指导 1.学生进入企业了解企业文化、企业背景、以及职业网站制作要求。 2.学生到企业搜集相关的文字及图片素材。 3.学生根据企业要求制定网站开发计划。 4.完成网站设计及相关开发工作，在开噶过程中，将设计图与相关企业人员讨论并修改设计方案。 5.教师及企业人员对学生作品进行评价，评选出优秀作品。 企业网站设计作品
进度表设计（以2节课为单元） 周次 上课时间 学时
教学目标和主要内容
能力目标 能力训练任务编号 知识目标 其他内容
1 1 2 能够掌握网站的分类及设计方法，培养学分析问题的能力 1 1.网站的类型。 2.网站的设计方法。 3.网站开发步骤及开发流程。 基础知识学习 2 2 能够理解html代码的基本含义，培养学生的理解能力及细致1 1.HTML简介及语法格式。 2.编写简单网页 基础知识学习 9
认真的精神 2 1 2 能够网页制作软件的使用方法，培养学生观察及分析问题的能力 1 1.网站概述。 2.网页制作软件操作。 基础知识学习
2 2 能够掌握photoshop中各种设计元素及设计方法，培养学生养成良好的设计意识及勤于动脑的习惯 2 1.自由绘制图形工具的使用。 2.颜色填充、界面设计。 ps设计网站界面
3 1 2 能够利用photoshop设计网页页面的方法，培养学生养成良好的设计意识及勤于动脑的习惯 2 1.logo的绘制设计方法。 2.图片设计方法、创意。 ps设计网站界面 2 2 能够利用photoshop进行网页页面创新设计，培养学生的创新意识并养成勤于动脑的习惯 2 1.钢笔工具的使用。 2.渐变工具的使用。 3.椭圆选框工具的使用。 ps设计网站界面
4 1 2 能够利用photoshop进行网页页面创新设计，培养学生的创新意识并养成勤于动脑的习惯 2 1.利用Photoshop丰富页面效果，2.完成电影网站的界面设计 ps设计网站界面 2 2 能够利用Flash软件设计简单网页动画，培养学生养成良好的设计意识及勤于动脑的习惯 2 1.Flash软件基本操作方法 2.利用Flash设计网页文字动画。 Flash设计网站动画 5 1 2 能够利用Flash软件设计网页页面动画，丰富页面效果，培养学生分析、解决问题能力 2 1.在Flash中设计图片切换效果的方法。 2.为网页设计Flash展示动画。 Flash设计网站动画