网站规划与设计教案
初中信息技术教案网页设计与制作
初中信息技术教案网页设计与制作初中信息技术教案——网页设计与制作一、引言在当前信息技术飞速发展的时代，网页设计与制作成为了一门必不可少的技能。
通过学习和掌握网页设计与制作的基础知识和技巧，学生能够更好地理解和运用现代科技，提高信息获取和处理的能力。
本教案针对初中信息技术课程，旨在帮助学生初步掌握网页设计与制作的基本概念、原理和方法。
二、知识背景1. 网页设计与制作的定义网页设计与制作是指使用计算机技术和工具构建和设计能在互联网上发布的网页的过程。
网页设计与制作包括了网页规划、页面设计、页面编码和网站维护等多个方面。
2. 网页设计与制作的重要性随着信息技术的快速发展，传统的纸质媒体已经不能满足人们获取信息的需求。
互联网的普及使得网页成为了一种重要的信息传播媒介。
通过学习网页设计与制作，学生能够了解和运用现代科技，提高信息获取和处理的能力。
同时，网页设计与制作也是培养学生创造力、合作精神和沟通能力的有效手段。
三、教学目标1. 理解网页设计与制作的基本概念和原理；2. 掌握网页设计与制作的基本方法和技巧；3. 能够使用HTML、CSS等工具完成简单的网页设计与制作；4. 培养学生的创造力、问题解决能力和团队合作精神。
四、教学内容1. 网页设计与制作的基本概念a. 了解网页设计与制作的定义和重要性；b. 了解网页的组成结构和常用技术。
2. 网页设计与制作的基本原理a. 掌握网页设计的基本原则，包括布局、色彩、字体、图片等；b. 了解用户体验和可访问性的基本要求。
3. 网页设计与制作的基本方法和技巧a. 学习HTML和CSS的基本语法和编码规则；b. 掌握网页设计与制作的基本步骤，包括页面规划、页面设计、文本编辑和图像处理等。
4. 网页设计与制作的实际操作a. 学生自主设计和制作简单的网页；b. 学生展示和分析自己设计的网页，相互评价和改进。
五、教学方法1. 案例教学法通过实际案例的引入，让学生了解和掌握网页设计与制作的基本原理和技巧。
网页设计DreamweaverCS3教案(华东师范大学)
第 7章建立框架网页教学目标：1．能够理解框架的作用2．能够合理使用框架划分窗口布局3．能够明白框架和框架集的关系4．能在框架中创建编辑网页5．能在框架中打开已有的网页进行编辑6．能够正确保存框架和框架集7．能够理解和编辑框架的属性教学重点：绘制布局表格、绘制布局单元格、设置布局表格和布局单元格的属性教学难点：绘制嵌套布局表格教学课时：理论：2课时实训：4课时教学方法：讲授法、任务驱动法。
教学过程:一、导入新课网页布局技术还有一种，叫做框架。
然而框架本质上是一种浏览器窗口的分割技术。
而前面我们学习的表格和层的布局方式则属于页面分割技术，只是对一个网页的页面做了的划分，在页面不同的位置放置不同的内容，但这些内容仍在同一个页面上。
利用框架，我们可以把浏览器窗口分成几个部分，每一部分都相当于浏览器窗口的一个子窗口，都可以用来显示一个完整的网页，从而可以实现多个页面在浏览器中的同时显示，所以说框架应该算作是一种“窗口”的布局技术。
按照布局要求，把浏览器窗口分成若干子窗口，并在各个子窗口中显示具有不同内容的网页，这些网页有机的结合在一起，达到一个完整的布局效果。
二、讲授新课（一）、框架和框架集的概念框架是一种窗口分割布局技术，利用框架我们可以把窗口分成规划好的若干子窗口，每一个框架都相当于一个子窗口，我们可以在框架中编辑和显示一个完整的网页。
不同框架中的网页是互不相干，根据我们的整体规划，可以把不同的信息放置在不同框架中页面上，从而实现我们想要的布局效果。
每一个框架都属于某个框架集，我们可以把框架集中的一个框架拆分，来实现更多子窗口的划分，就像我们项目中一样，这其实是通过在框架集中不断的嵌套子框架集来实现的。
（二）、创建框架在创建框架集或使用框架前，通过选择“查看/可视化助理/框架边框”命令，使框架边框在文档窗口的设计视图中可见。
1、使用预制框架集(1)、新建一个HTML文件，在快捷工具栏选择“布局”，单击“框架”按钮，在弹出的下拉菜单中选择“顶部和嵌套的左侧框架”。
《HTML+CSS网页设计与布局》教案
《HTML+CSS网页设计与布局》教案章节一：HTML基础1.1 教学目标了解HTML的基本概念和作用掌握HTML的基本语法和结构学会使用HTML编写简单的页面1.2 教学内容HTML简介HTML基本语法HTML基本结构常用的HTML标签1.3 教学方法讲授法：讲解HTML的基本概念和作用，演示基本语法和结构实践法：学生动手编写简单的HTML页面1.4 教学资源PowerPoint课件HTML编写工具（如Sublime Text、Visual Studio Code等）1.5 教学评估课堂练习：学生现场编写简单的HTML页面课后作业：学生完成课后练习，巩固所学知识章节二：CSS基础2.1 教学目标了解CSS的基本概念和作用掌握CSS的基本语法和选择器学会使用CSS样式化网页元素2.2 教学内容CSS简介CSS基本语法CSS选择器常用的CSS属性2.3 教学方法讲授法：讲解CSS的基本概念和作用，演示基本语法和选择器实践法：学生动手编写简单的CSS样式2.4 教学资源PowerPoint课件HTML编写工具（如Sublime Text、Visual Studio Code等）2.5 教学评估课堂练习：学生现场编写简单的CSS样式课后作业：学生完成课后练习，巩固所学知识章节三：网页布局基础3.1 教学目标了解网页布局的基本概念和原则掌握使用HTML和CSS进行网页布局的方法学会使用浮动布局和定位布局实现网页布局3.2 教学内容网页布局概述浮动布局定位布局布局实践3.3 教学方法讲授法：讲解网页布局的基本概念和原则，演示浮动布局和定位布局的方法实践法：学生动手实践，完成网页布局实例3.4 教学资源PowerPoint课件HTML编写工具（如Sublime Text、Visual Studio Code等）在线演示和案例3.5 教学评估课堂练习：学生现场完成网页布局实例课后作业：学生完成课后练习，巩固所学知识章节四：响应式网页设计4.1 教学目标了解响应式网页设计的基本概念和原则掌握使用CSS媒体查询实现响应式布局的方法学会根据不同设备进行网页布局的调整4.2 教学内容响应式网页设计概述CSS媒体查询响应式布局实践4.3 教学方法讲授法：讲解响应式网页设计的基本概念和原则，演示CSS媒体查询的使用方法实践法：学生动手实践，完成响应式网页布局实例4.4 教学资源PowerPoint课件HTML编写工具（如Sublime Text、Visual Studio Code等）在线演示和案例4.5 教学评估课堂练习：学生现场完成响应式网页布局实例课后作业：学生完成课后练习，巩固所学知识章节五：HTML5与CSS3新特性5.1 教学目标了解HTML5的基本概念和新增特性掌握CSS3的基本概念和新增特性学会使用HTML5和CSS3制作现代化的网页5.2 教学内容HTML5简介HTML5新增特性CSS3简介CSS3新增特性5.3 教学方法讲授法：讲解HTML5和CSS3的基本概念和新增特性实践法：学生动手实践，使用HTML5和CSS3制作现代化的网页5.4 教学资源PowerPoint课件HTML编写工具（如Sublime Text、Visual Studio Code等）在线演示和案例5.5 教学评估课堂练习：学生现场使用HTML5和CSS3制作现代化的网页课后作业：学生完成课后练习，巩固所学知识《HTML+CSS网页设计与布局》教案章节六：表格与表单6.1 教学目标了解HTML中表格的基本用法掌握使用CSS样式化表格学会创建表单以及使用表单元素6.2 教学内容表格的基本结构表格的样式化表单的创建表单元素的使用6.3 教学方法讲授法：讲解表格和表单的基本概念和用法实践法：学生动手实践，编写含有表格和表单的HTML页面6.4 教学资源PowerPoint课件HTML编写工具（如Sublime Text、Visual Studio Code等）6.5 教学评估课堂练习：学生现场编写含有表格和表单的HTML页面课后作业：学生完成课后练习，巩固所学知识章节七：多媒体与交互7.1 教学目标了解HTML中多媒体元素的使用掌握CSS动画和过渡效果的实现学会使用JavaScript添加网页交互7.2 教学内容多媒体元素（如img, audio, video）CSS动画和过渡效果JavaScript基础和交互实现7.3 教学方法讲授法：讲解多媒体元素的使用和CSS动画效果实践法：学生动手实践，编写包含多媒体和交互的HTML页面7.4 教学资源PowerPoint课件HTML编写工具（如Sublime Text、Visual Studio Code等）在线演示和案例7.5 教学评估课堂练习：学生现场编写包含多媒体和交互的HTML页面课后作业：学生完成课后练习，巩固所学知识章节八：浏览器兼容性与优化8.1 教学目标了解浏览器兼容性的概念掌握使用CSS hacks和兼容性解决方案学会网页性能优化技巧8.2 教学内容浏览器兼容性问题CSS hacks和兼容性解决方案网页性能优化8.3 教学方法讲授法：讲解浏览器兼容性和网页性能优化的概念实践法：学生动手实践，对网页进行兼容性和性能优化8.4 教学资源PowerPoint课件HTML编写工具（如Sublime Text、Visual Studio Code等）在线演示和案例8.5 教学评估课堂练习：学生现场对网页进行兼容性和性能优化课后作业：学生完成课后练习，巩固所学知识章节九：响应式图片与字体9.1 教学目标了解响应式网页设计中图片和字体的处理掌握CSS中的媒体查询和特性检测学会使用srcset和sizes属性9.2 教学内容响应式图片的处理响应式字体的处理CSS媒体查询和特性检测9.3 教学方法讲授法：讲解响应式图片和字体的处理方法实践法：学生动手实践，编写响应式图片和字体的HTML页面9.4 教学资源PowerPoint课件HTML编写工具（如Sublime Text、Visual Studio Code等）在线演示和案例9.5 教学评估课堂练习：学生现场编写响应式图片和字体的HTML页面课后作业：学生完成课后练习，巩固所学知识章节十：版本控制与协作开发10.1 教学目标了解版本控制的概念和重要性掌握Git的基本命令和操作学会在团队中进行协作开发10.2 教学内容版本控制基础知识Git的安装和配置Git的基本命令（如clone, mit, push, pull等）GitHub的基本使用10.3 教学方法讲授法：讲解版本控制的概念和Git的基本命令实践法：学生动手实践，使用Git进行版本控制10.4 教学资源PowerPoint课件Git安装和配置指导文档GitHub的使用文档10.5 教学评估课堂练习：学生现场使用Git进行版本控制课后作业：学生完成课后练习，巩固所学知识《HTML+CSS网页设计与布局》教案章节十一：移动端网页设计11.1 教学目标了解移动端网页设计的基本原则掌握使用CSS媒体查询进行移动端布局学会优化移动端用户体验11.2 教学内容移动端网页设计原则媒体查询的使用触摸事件和手势移动端优化技巧11.3 教学方法讲授法：讲解移动端网页设计原则和媒体查询的使用实践法：学生动手实践，完成移动端网页布局实例11.4 教学资源PowerPoint课件HTML编写工具（如Sublime Text、Visual Studio Code等）在线演示和案例11.5 教学评估课堂练习：学生现场完成移动端网页布局实例课后作业：学生完成课后练习，巩固所学知识章节十二：网页性能优化12.1 教学目标了解网页性能对用户体验的影响掌握网页性能优化的方法和技巧学会使用工具进行性能分析12.2 教学内容网页性能影响因素性能优化方法（如图片优化、代码压缩、缓存利用等）性能分析工具（如Chrome DevTools）12.3 教学方法讲授法：讲解网页性能影响因素和优化方法实践法：学生动手实践，对网页进行性能优化12.4 教学资源PowerPoint课件HTML编写工具（如Sublime Text、Visual Studio Code等）在线演示和案例12.5 教学评估课堂练习：学生现场对网页进行性能优化课后作业：学生完成课后练习，巩固所学知识章节十三：网络标准和前端框架13.1 教学目标了解Web标准的概念和重要性掌握HTML5和CSS3的新特性学会使用前端框架（如Bootstrap）13.2 教学内容Web标准概述HTML5和CSS3新特性前端框架介绍（如Bootstrap）13.3 教学方法讲授法：讲解Web标准和HTML5/CSS3新特性实践法：学生动手实践，使用前端框架进行网页设计13.4 教学资源PowerPoint课件HTML编写工具（如Sublime Text、Visual Studio Code等）前端框架文档和教程13.5 教学评估课堂练习：学生现场使用前端框架进行网页设计课后作业：学生完成课后练习，巩固所学知识章节十四：项目实践14.1 教学目标综合运用所学知识进行网页设计与布局学会项目规划和管理完成一个完整的个人或团队项目14.2 教学内容项目选题和规划网页设计与布局实践项目展示与评价14.3 教学方法讲授法：讲解项目选题和规划的方法实践法：学生动手实践，完成个人或团队项目14.4 教学资源PowerPoint课件HTML编写工具（如Sublime Text、Visual Studio Code等）项目管理和评价指南14.5 教学评估项目完成情况评估团队协作和沟通能力评估项目展示和评价章节十五：就业指导与职业规划15.1 教学目标了解Web前端开发的职业前景掌握求职技巧和面试准备学会进行职业规划和发展15.2 教学内容Web前端开发职业前景求职技巧和面试准备职业规划和发展建议15.3 教学方法讲授法：讲解Web前端开发的职业前景和求职技巧实践法：学生进行模拟面试和职业规划练习15.4 教学资源PowerPoint课件求职和职业规划指导文档模拟面试材料15.5 教学评估模拟面试表现评估职业规划文档评估学生反馈和总结重点和难点解析本文主要介绍了《HTML+CSS网页设计与布局》的教学教案，涵盖了HTML基础、CSS基础、网页布局基础、响应式网页设计、HTML5与CSS3新特性、表格与表单、多媒体与交互、浏览器兼容性与优化、响应式图片与字体、版本控制与协作开发、移动端网页设计、网页性能优化、网络标准和前端框架、项目实践以及就业指导与职业规划等十五个章节。
网页设计与制作说课
出包括课程主要知识点的综合性网站。期末考核成绩占总评成绩的 60%
四 教学资源
4.1 教材选用情况数字化教辅资源 4.2 实践教学条件 4.3 师资队伍
4.1 教材选用情况数字化教辅资源
六 课程特色
特色： 教学观念先进，突出应用能力培养。 本课程本着理论够用、实践加强的原则，突出应用能力的培养。适 时调整教学内容，保持与Web技术的发展同步。改革考核方式，注 重学生的学习过程。
创新点：
1、在学习当中，注意引导学生获得美的熏陶，提高审美能力。 2、强调技术与艺术的融合，将网页作品当作一份具有生命力的 艺术品。 3、 以真实网站作为教学案例，让学生在真实工作环境中训 技能，提高学生适应岗位需求的能力。 4、 虚拟项目设计考核模式。，给学生一些虚拟项目作为课程 设计，培养学生单独规范的做项目的能力及网站设计的综合能力， 也让学生找工作时可以向用人单位提供一个完整的网站设计的作品
其它网络资源
4.2 实践教学条件
学生实习实训机房具有一定规模，能够人手一机，满足教学大纲要求 的全部实训内容和选修实训内容。学生上机所需的软件齐备，如： PhotoShop、dreamweaver等。在多年的教学过程中，本课程 已具备了较完整的多媒体教学的条件，有整套的电子教案，案例、习 题等
4.3 师资队伍
3. 重视以真实的社会项目作为教学内容，倡导将教学结果作为项目内 容直接提交给用户，使得学另外生能够零距离地接触市场。扩大校 外实训基地建设，以满足本课程真实工作任务下的教学。
4. 在学习网页设计技术之前，引入美术课程的教学，使学生具备一定 的美术功底
网络工程规划与设计案例教程项目二_任务二_电子教案2
《高等职业教育网络技术专业教学资源库》网站
教学实施安排
教学环节
教学内容
教学方法
学生行动
教学参考资源
回顾点评
简单回顾欧宇公司办公网需求分析和网络拓扑结构设计。
讲述法
个别回答
任务描述
1.教师进行欧宇公司办公网的网络设备选型
2.教师进行欧宇公司办公网的IP地址规划
3.完成神舟公司办公网的网络设备选型以及IP地址规划
教学内容
1.办公网IP地址规划及设备命名
2.办公网网络设备选型的原则与方法
教学重点
1.办公网IP地址规划
2.无线网络设备
教学难点
1.办公网IP地址规划
2.无线网络设备
教学方法
讲述法、分组讨论法、案例教学法、任务驱动法、分组教学法
教学资源
电子课件，技能训练项目单，技能训练任务书，技能训练考核评价表、课堂教学讨论任务单、案例资源
讲述法
1.教师向学生介绍网络设备命名的规则，并对欧宇公司办公网进行网络设备命名
讲述法
深化子任务二
1.学生分组实施对神舟公司办公网进行IP地址规划和设备命名
分组教学法
学生分组讨论操作
1.项目二技能训练任务单4、
2.项目二技能训练任务书4、
3.项目二技能训练考核评价表4
归纳总结
1.通过本任务的分工协作，让学生了解办公网IP地址规划与设备命名、网络设备选型的方法和原则，同时增强学生的团队沟通能力、理解能力和操作能力
《网络工程规划与设计》——电子教案
项目
项目二欧宇办公网网络规划与设计
项目总课时
18
任务二
欧宇公司办公网网络设计
任务课时
8
网页页面设计教案
《网页页面设计》教案教学对象：教学总学时：主讲教师：主讲教师单位：时间：年月日概要本门课程的教学目标和要求：通过教学训练，使学生的设计能力、软件应用能力及实际操作能力得到深入的提高。
通过理论讲解与实例分析，学生可熟悉网页页面设计与制作的相关知识；通过应用训练，学生可掌握相关软件，并逐步培养学生的创造能力；通过综合训练，学生可以将理论知识应用于实践，并逐步提高学生的设计能力。
学生在完成本课程学习后，应达到如下要求：（1）正确理解网页页面的含义。
（2）掌握网页页面设计的基本知识和基本规律。
（3）熟悉网页页面设计的方法。
（4）能够将理论与实践相结合，独立完成网页页面设计与制作。
教学要点：不同类型的网页页面设计。
教学重点及难点：综合运用平面制图软件进行网页页面的设计与制作。
教学方法：先课堂讲授,掌握一定基础知识，然后进行实例教学，启发创作，在课堂形成教学互动；最后创作练习，培养学以致用，实战能力。
教学总时数：56学时教学参考书：《网页页面设计与制作》目录课题一网页概述课题二网页设计视听元素课题三交互式视觉元素课题四网页版面设计课题五网页配色课题六 PS网页切图教案首页课题一网页概述具体授课内容：网站设计是一个系统的软件应用工程，工作内容千头万绪，涉及到项目管理、页面设计，程序设计，网站测试，资料收集、文档编辑等方面工作，它需要不同的人员分工合作才能完成。
只有建立和实施规范的网站设计流程，有效整合各方面的工作内容，才能高效有序地开展网站设计工作，最终顺利地实现网站开发的目标。
通过本堂课的学习，使学生了解什么是网页页面设计，网页页面的规格、网页页面版面以及相关设计软件等。
概念分解：一、网站与网页1、网站：为了更好的推广企业、机构、活动等整体形象，利用互联网技术（数字技术）实现的超链接网络信息查询的多个页面。
2、网页：网站中，用来提供相关信息的单一页面。
3、网站与网页的区别：浏览器窗口中显示的单一页面，是网页。
教案 电子商务网站建设
教案电子商务网站建设第一章：电子商务网站建设概述1.1 电子商务网站的定义与分类1.2 电子商务网站建设的重要性1.3 电子商务网站建设的流程与步骤1.4 电子商务网站建设的技术基础第二章：需求分析与规划2.1 确定网站目标与功能2.2 分析目标用户与市场需求2.3 规划网站结构与内容2.4 制定网站建设计划与预算第三章：网站设计与布局3.1 网站整体设计原则与风格3.2 网站页面布局与导航设计3.3 网页视觉效果与视觉元素运用3.4 网站响应式设计与移动端优化第四章：网站前端开发4.1 HTML/CSS/JavaScript基础4.2 前端框架与库的使用4.3 网站交互效果与动画实现4.4 网站性能优化与兼容性测试第五章：网站后端开发5.1 选择适合的后端技术5.2 数据库设计与连接5.3 网站业务逻辑实现5.4 网站安全性与数据保护第六章：网站内容管理系统（CMS）6.1 CMS的概念与作用6.2 常用CMS系统的介绍与选择6.3 CMS的基本操作与管理6.4 利用CMS发布与管理网站内容第七章：电子商务功能实现7.1 在线购物车与订单管理7.2 会员系统与权限管理7.3 支付接口与交易处理7.4 物流与配送信息的集成第八章：网站营销与推广8.1 网络营销的基本策略8.2 SEO搜索引擎优化8.3 SEM搜索引擎营销8.4 社交媒体营销与口碑传播第九章：网站运营与维护9.1 网站运营的基本概念9.2 用户行为分析与用户体验优化9.3 网站数据监控与分析9.4 网站维护与更新策略第十章：电子商务网站的安全性与法律规范10.1 网站安全的重要性10.2 常见网络安全威胁与防范措施10.3 电子商务法律法规简介10.4 网站合规性检查与风险管理第十一章：电子商务网站的数据分析与决策11.1 数据分析在电子商务网站中的应用11.2 网站流量分析与用户行为解读11.3 销售数据分析与营销策略优化11.4 数据驱动的电子商务决策过程第十二章：电子商务网站的社交网络营销12.1 社交网络营销的基本原理12.2 社交媒体平台的选择与策略制定12.3 社交网络营销活动的实施与管理12.4 社交网络营销效果的评估与优化第十三章：移动电子商务网站开发13.1 移动电子商务的趋势与挑战13.2 移动端网站设计与开发原则13.3 移动应用（App）开发基础13.4 移动电子商务网站的测试与发布第十四章：电子商务网站的国际化与本地化14.1 电子商务网站国际化的意义14.2 目标市场的选择与分析14.3 网站内容的本地化策略14.4 跨文化电子商务网站的运营与管理第十五章：电子商务网站建设的案例分析15.1 电子商务网站成功案例解析15.2 电子商务网站失败案例分析15.3 案例研究的启示与借鉴15.4 实战项目：构建一个简单的电子商务网站原型重点和难点解析本文主要介绍了电子商务网站建设的过程和关键技术，重点包括电子商务网站的概述、需求分析与规划、网站设计与布局、前端和后端开发、内容管理、电子商务功能实现、网站营销与推广、网站运营与维护、安全性和法律规范、数据分析与决策、社交网络营销、移动电子商务网站开发、国际化与本地化以及案例分析。
《网页设计》课程标准
《网页设计》课程标准一、课程定位《网页设计》是虚拟现实应用技术专业的专业学习领域课。
该课程实现Web程序开发知识、方法及工具，着重介绍在Web开发过程用到的HTML5基础知识，用于美化Web页面的样式表知识。
是一门用途广泛、前景良好的计算机行业课程，是适应计算机虚拟现实应用技术专业课程的需要。
该课程的学习可为后续《JavaScript脚本语言》等课程奠定一定的职业能力基础。
二、课程目标通过《网页设计》课程的学习，使学生具备Web应用开发的基本知识，为学习和掌握专业知识和职业技能打下基础。
1．知识目标（1）理解网站的基本概念和HTML5网页编程语言基础；（2）掌握搭建开发环境、网站的搭建（3）掌握HTML5中文字和段落的设置和常用标签；（4）掌握列表标签的使用；（5）掌握超级链接标签的使用；（6）掌握表格标签的设计和使用；（7）掌握框架页面布局；（8）掌握表单的设计；（9）掌握网页中多媒体的应用；（10）掌握层叠样式表CSS3的基本知识；（11）掌握一到多款网页设计软件的运用。
2．能力目标（1）能运用HTML5标签设计网页；（2）能使用CSS3设计网页；（3）会网页设计工具设计网页。
3．素质目标（1）具有自我学习的能力；（2）具备规范化、标准化的代码编写习惯，一定速度的代码编写能力；（3）养成忠于职守、认真负责、精益求精的敬业精神；（4）具备良好的沟通能力；（5）具备良好的团队合作精神以及自我展示能力。
三、课程设计1、设计思想（1）教学内容框架课程按照以能力为本位，紧密围绕在使用HTML5标签，利用CSS3 +DIV布局制作网页过程中遇到的实际需要和应该掌握的技术，全面介绍HTML5标签设计网页的内容和技巧。
（2）总体设计思路以完整的网页制作工作过程为导向，重构教学内容。
根据行业企业发展需要和完成职业岗位实际工作任务所需要的知识、能力素质要求，按照网页设计与制作的过程和学生的学习认知规律，打破原有的功能化知识体系，对教学内容从简单到复杂，从入门到深化进行科学安排，循序渐进的实现教学目标，课程内容与项目开发内容一致，理论与实践一体化，实现学习和工作的深度融合。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
课题：网站规划网站的设计
一、教学目标
1、知识与技能
（1）了解网站规划的几个阶段和几个要点基本过程
（2）掌握网站规划和设计的过程和方法。
2、过程与方法
（1）通过浏览与欣赏几个教师提供的主题网站的内容、结构、风格、质量，并进行对比，了解网站设计的内容、特点以及根据不同内容选择不同设计风格等
（2）以个人或小组集体确立一个网站的主题，并围绕主题讨论即将设计的几个页面，规划每个页面大致需要反映的内容，从而了解规划的一般过程
3、情感态度与价值观
（1）通过网站主题的选择、讨论、规划，培养学生交流合作意识。
（2）通过学生动手上网收集与整理资料等实践活动，使学生养成分类管理的思想。
二、教学重、难点
网站规划和设计
三、教学方法
对比教学法，探究学习法，讨论交流
四、教学设计
教学过
教师活动学生活动设计意图程
新课引
入教师引导 : 现如今，网站已经广泛应用到社会的各师生交流：网站提漫谈网站的作行各业，渗透到各个领域。
供相关内容丰富的用
1. 那我们可以借助网站来做什么呢？信息，很漂亮，有的
还可以与访问者交
2. 先让我们一起来欣赏几个优秀网站互等
此部分内容仅一、教师安排学生阅读课本或教师讲解以下知识要求了解，故无点：需深入讲解
1、网站规划的基本过程认真阅读书本
网站设计是一项工程，我们需要一个具体规划，一（或认真听教师讲
般规划需要如下几个过程：解）
2、什么是网站的规划
(1)规划涉及的内容(2) 网站的要素二、
引导学生规划自己的网站
同样结合实例，展示教师的规划，并要求学生模仿，规划自己的网站，给出主题与相关页面内容等主题网站规划模仿教师网站内容，
规划自己即将要设结合实例的分计的网站（包括主析，给学生以更题、页面内容等）需直观的认识
填写相关表格，以指
导日后网站设计
新授
网页展示网页
网页名称备注
内容结构
Index.ht
m
主题：
三、网站的设计
网站设计的目的在于把需要表达的信息以恰
当的方式组织并呈现在网上，设法吸引人们的关
注，并为浏览者提供方便的访问。
网站设计一般包
括网站栏目结构设计、网页版面设计、网页的链接
设计（导航设计）等。
请同学们再看看本课开头提供的几个优秀网站，并
思考以下几个问题：
（ 1）这些网站是怎样围绕主题展现内容的？
认真阅读书本
（或认真听教师讲
解）
欣赏并回答
（2）这些网站提供了哪些栏目及功能？（3）网站的链接有哪些特色，是否便捷？
（4）网站主页的布局、色彩运用在哪些特点？
1、网站的结构设计
经验告诉我们，建立一个网站好比写一篇文章，首先要拟好提纲，文章才能主题明确，层次清晰；也好比造一座高楼，首先要设计好框架图纸，才能使学生通过前面对网站做的规划，设计网站结构，教师巡回指导。
楼房结构合理。
制作网站前要设计好网站的栏目，网站的栏目可
以有多层，但并不是层数越多越好，以能够恰当地
体现网站主题为好。
此外，每个栏目应有一个大致
的内容描述，以表达该栏目的设计思路。
2、网页的版面设计
(1)风格设计
风格是指网站的整体形象给浏览者的综合感受。
有
的严肃计策，有的清爽温馨，有的深沉厚重，有的
生动活泼，有的古朴典雅，有的豪迈奔放。
风格设
计与主题是密不可分的，是为突出主题服务的。
(2)版面布局设计
网页要呈现的内容很多，概括起来可分为标题信
息、栏目信息、内容信息、附加信息等，需要进行
合理的放置，让人看起来井井有条，主次分明。
3、网页的交互设计
网站它不是一个“被动”的媒体，和电视、电台
等媒体不一样的是网页是需要我们用鼠标去点击
的。
浏览者点击连接，网页显示出需要的内容然
后在传递给浏览者。
这就是网页的交互性。
四、任务布置
请每个同学（或同桌两个合作，合作成员不能超过
两个）设计制作一份网页作品。
学生分组完成任务
1、要求：
教师巡回个别指导（1）主题自定；
（2）总共要有 10 个页面或以上。
（3）网页中的内容要紧密结合作者的学习、生
活实际或社会实践。
教师对学生作品作（ 4）在水平分辨率为1024（或以上）像素的电脑
出评价
屏幕上浏览时，页面保持整齐，不允许出现横向的
滚动条。
总结本课
五、评价学生作业并总结本节课内容。