网页设计与布局教案.docx
网页设计教案
网页设计教案标题：网页设计教案【教案目标】本教案的目标是帮助学生掌握网页设计的基本原理和技巧，培养学生在创作网页时的审美能力和技术能力，并了解网站的结构和设计流程。
【教学内容】一、引言（Introduction）1. 网页设计的定义和重要性2. 网页设计的发展历程3. 网页设计师的工作职责和技能要求二、基础知识（Fundamental Knowledge）1. 网页设计的基本原理1.1 色彩理论1.2 排版与布局1.3 图像处理2. 网页设计常用工具的介绍2.1 Adobe Photoshop的使用2.2 Adobe Illustrator的使用2.3 Adobe Dreamweaver的使用三、用户体验设计（User Experience Design）1. 用户体验设计的概念和重要性2. 网页导航与布局设计3. 网页可用性设计4. 响应式网页设计四、网站结构与导航设计（Website Structure and Navigation Design）1. 网站结构的分类和层级2. 导航设计的原则和技巧3. 面包屑导航和搜索功能的添加五、网页素材与动效设计（Web Graphics and Animation Design）1. 图像的选择和优化2. Icon与Logo的设计3. Web动画的制作与添加六、网页设计项目实践（Web Design Project Practice）1. 学生根据所学知识制作网页设计项目2. 学生进行设计讨论和批评，互相提供反馈和改进建议【教学方法】一、讲授法教师通过演示、讲解、示范等方式传授网页设计的基本原理和技巧。
二、案例分析法教师使用实际网页案例进行分析和讨论，引导学生了解优秀网页设计的特点和思路。
三、实践操作法学生根据所学知识进行网页设计项目的实践操作，通过实际操作提高自己的设计能力。
四、讨论交流法学生在设计过程中进行讨论和交流，互相提供反馈和改进建议，促进学生之间的合作和学习。
《网页设计与制作》教案-第11讲 布局技术-层AP Div
第11讲布局技术-层AP Div1.1教学目标：◆知识目标1.理解层的作用2.掌握层的各种基本操作◆技能目标能运用层进行布局，能设置层的重叠与嵌套，能合理操作层◆品质目标培养学生认真细致、踏实进取的精神1.2教学重点：1.掌握层的各种基本操作1.3 教学难点理解层的作用和操作。
1.4教学方法：讲练结合，任务驱动、分子任务操练1.5课时安排：2课时1.6教学对象分析：这个班学生具有基本专业技能，不仅仅是要教会他们方法，最重要的是教会他们的规范的动手能力与各种事件多方法的灵活处理能力，在保证全班同学教学进度一致的情况上，培养学生较好的专业基础与创新创作意识。
1.7教学过程：一、激趣导入，揭示课题层是一种HTML页面元素，可以将其定位在页面上的任意位置。
层可以包含文本、图像或其他任何可在HTML文档正文中放入的内容。
通过Dreamweaver MX 2004，可以使用层来设置页面的布局。
可以将层前后放置，隐藏某些层而显示其他层，以及在屏幕上移动层。
还可以在一个层中放置背景图像，然后在该层的前面放置第二个层，利用层不仅可以非常灵活地放置内容，还可以根据不同的设置，实现相应的动态效果。
二、层的操作层可以理解为浮动在网页上的一个页面，它可以准确地定位在页面上的任意位置，并可以规定它的大小。
通过层可以对网页进行精确定位。
不仅如此，通过对层与行为的综合使用，还可以创作出赏心悦目的动作效果。
层可以包含文本、图像或其它任何可在网页中放置的内容。
层可以重叠，并且可以改变重叠次序，因此可以在网页上实现内容的重叠效果；可以动态地设定层的显示或隐藏，实现层内容的动态交替显示等特殊的显示效果；层可以嵌套，子层会遗传父层的特征，例如可见性，位置移动等。
0.1新建层用Dreamweaver可以方便地在页面上创建层并精确地将层定位。
建立新层的步骤：●在编辑窗口的“插入”栏的“布局”选项卡中，选取“描绘层”按钮，如图2-95所示。
或者执行“插入/布局对象/层”命令。
HTMLCSS网页设计与布局教案
HTMLCSS网页设计与布局教案第一章：HTML基础1.1 教学目标了解HTML的基本概念和作用掌握HTML的基本语法和结构学会使用HTML标签编写简单的页面1.2 教学内容HTML简介HTML基本语法常用的HTML标签页面布局与结构1.3 教学方法讲授与示范相结合学生跟随老师一起编写简单的HTML页面1.4 教学步骤1. 介绍HTML的基本概念和作用2. 讲解HTML的基本语法和结构3. 示范使用常用的HTML标签编写简单的页面4. 学生跟随老师一起编写简单的HTML页面第二章：CSS基础2.1 教学目标了解CSS的基本概念和作用掌握CSS的基本语法和使用方法学会使用CSS样式美化网页2.2 教学内容CSS简介CSS基本语法选择器和属性常用的CSS样式2.3 教学方法讲授与示范相结合学生跟随老师一起编写简单的CSS样式2.4 教学步骤1. 介绍CSS的基本概念和作用2. 讲解CSS的基本语法和使用方法3. 示范使用选择器和属性编写简单的CSS样式4. 学生跟随老师一起编写简单的CSS样式第三章：网页布局与设计3.1 教学目标了解网页布局的基本概念和作用掌握常用的网页布局方法学会使用CSS实现网页布局和设计3.2 教学内容网页布局概述盒模型和浮动定位和层叠响应式布局3.3 教学方法讲授与示范相结合学生跟随老师一起实现网页布局和设计3.4 教学步骤1. 介绍网页布局的基本概念和作用2. 讲解盒模型和浮动布局方法3. 示范使用定位和层叠实现网页布局4. 介绍响应式布局的概念和方法5. 学生跟随老师一起实现网页布局和设计第四章：HTML和CSS进阶4.1 教学目标掌握HTML和CSS的高级用法学会使用HTML5和CSS3的新特性了解前端框架和库的使用4.2 教学内容HTML5和CSS3新特性前端框架和库的使用HTML和CSS的优化和调试4.3 教学方法讲授与示范相结合学生跟随老师一起探索和实践4.4 教学步骤1. 讲解HTML5和CSS3的新特性2. 介绍前端框架和库的使用方法3. 探讨HTML和CSS的优化和调试技巧4. 学生跟随老师一起探索和实践第五章：项目实践5.1 教学目标学会独立完成一个简单的网页设计与布局项目巩固和运用所学的HTML、CSS知识和技能培养实际操作能力和团队协作能力5.2 教学内容项目需求分析和设计HTML和CSS代码编写项目调试和优化5.3 教学方法学生分组合作完成项目老师指导和解惑5.4 教学步骤1. 进行项目需求分析和设计2. 学生分组编写HTML和CSS代码3. 项目调试和优化4. 学生展示和讲解项目成果5. 老师点评和总结第六章：响应式网页设计6.1 教学目标理解响应式网页设计的重要性学习媒体查询的使用掌握弹性布局和网格系统实现不同设备上的适配和优化6.2 教学内容响应式设计原则媒体查询语法和用法弹性布局与固定布局网格系统的设计与应用6.3 教学方法讲授与示范相结合学生跟随老师一起完成一个响应式网页案例6.4 教学步骤1. 介绍响应式网页设计的基本原则和概念2. 讲解媒体查询的语法和使用方法3. 示范如何使用弹性布局和固定布局创建响应式设计4. 介绍网格系统的设计与应用5. 学生跟随老师一起完成一个响应式网页案例第七章：前端框架与库7.1 教学目标了解常见的前端框架与库学会使用Bootstrap、Foundation等框架掌握jQuery、React、Vue等库的基本使用7.2 教学内容前端框架与库的介绍Bootstrap和Foundation的使用方法jQuery、React和Vue的基本概念和用法7.3 教学方法讲授与示范相结合学生跟随老师一起完成一个框架或库的使用案例7.4 教学步骤1. 介绍常见的前端框架与库及其特点2. 讲解Bootstrap和Foundation的使用方法3. 示范如何使用jQuery、React和Vue实现网页特效和交互4. 学生跟随老师一起完成一个框架或库的使用案例第八章：网页性能优化8.1 教学目标理解网页性能优化的意义学习前端性能优化的方法和技巧掌握后端性能优化的基本原则8.2 教学内容网页性能优化的重要性前端性能优化的方法和技巧后端性能优化的基本原则和策略8.3 教学方法讲授与示范相结合学生跟随老师一起分析并优化网页性能8.4 教学步骤1. 介绍网页性能优化的重要性和目标2. 讲解前端性能优化的方法和技巧3. 示范如何进行后端性能优化4. 学生跟随老师一起分析并优化网页性能第九章：网页安全性9.1 教学目标了解网页安全性的重要性和挑战学习基本的网络安全知识掌握防范常见网络攻击的方法9.2 教学内容网页安全性的概念和挑战网络安全知识XSS、CSRF等常见网络攻击的防范9.3 教学方法讲授与示范相结合学生跟随老师一起了解和防范网络攻击9.4 教学步骤1. 介绍网页安全性的概念和挑战2. 讲解网络安全知识3. 示范如何防范XSS、CSRF等常见网络攻击4. 学生跟随老师一起了解和防范网络攻击第十章：项目评估与展示10.1 教学目标培养学生项目评估的能力学会如何展示和解释项目成果增强学生的表达和沟通能力10.2 教学内容项目评估的原则和方法项目展示的技巧和要点反馈和改进的机制10.3 教学方法学生自主评估和展示老师点评和指导10.4 教学步骤1. 介绍项目评估的原则和方法2. 学生准备项目展示并展示成果3. 老师点评并提供改进意见4. 学生根据反馈进行项目的最终优化和调整重点和难点解析重点环节1：HTML基本语法和结构需要重点关注的内容：HTML标签的使用、属性、嵌套和语义化。
中职网页设计与制作(中国工信出版集团)教案：Flex布局
中等专业学校2022-2023-2教案教学内容基本概念：采用Flex 布局的元素，称为Flex 容器（flex container），简称"容器"。
它的所有子元素自动成为容器成员，称为 Flex 项目，简称"项目"。
容器的常用属性：（1）flex-direction属性：决定主轴的方向（即项目的排列方向）。
.box {flex-direction: column-reverse | column | row |row-reverse；}图3-1 flex-direction效果·column-reverse：主轴为垂直方向，起点在下沿。
·column：主轴为垂直方向，起点在上沿。
·row（默认值）：主轴为水平方向，起点在左端。
·row-reverse：主轴为水平方向，起点在右端。
（2）flex-wrap属性:默认情况下，项目都排在一条线（又称"轴线"）上,flex-wrap属性定义，如果一条轴线排不下，如何换行。
.box{ flex-wrap: nowrap | wrap | wrap-reverse;} nowrap（默认）：不换行。
wrap：换行，第一行在上方。
·wrap-reverse：换行，第一行在下方。
（3）justify-content属性：定义项目在主轴上的对教学内容齐方式。
.box {justify-content: flex-start| flex-end | center | space-between | space-around；}具体对齐方式与轴的方向有关,下面假设主轴为从左到右。
flex-start（默认值）：左对齐。
·flex-end：右对齐。
·center：居中。
·space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。
《网页设计与制作》教案-第10讲 布局技术之二—Div+CSS(二)
第10讲布局技术之二—Div+CSS（二）1.1教学目标：◆知识目标1.理解CSS盒子模式。
2.掌握CSS规则设置方法。
◆技能目标能够理解Div+CSS所体现的表现和内容相分离特性。
◆品质目标培养学生认真细致、踏实进取的精神1.2教学重点：1.掌握CSS规则设置方法1.3 教学难点理解CSS规则的作用。
1.4教学方法：讲练结合，任务驱动、分子任务操练1.5课时安排：2课时1.6教学对象分析：这个班学生具有基本专业技能，不仅仅是要教会他们方法，最重要的是教会他们的规范的动手能力与各种事件多方法的灵活处理能力，在保证全班同学教学进度一致的情况上，培养学生较好的专业基础与创新创作意识。
1.7教学过程：一、CSS样式基本操作1．样式表的操作途径我们可以通过三种途径来创建、编辑CSS样式。
从主菜单选择“窗口/CSS样式”即可打开样式面板，如图3-35所示。
图3-35 CSS样式面板在CSS样式面板的右下角有四个功能按钮，分别为：●附加样式表：用于打开“链接外部样式表”对话框，选择要链接到或导入到当前文档中的外部样式表。
●新建CSS样式：打开“新建CSS 样式”对话框，创建新样式。
●编辑样式表：打开“CSS 样式定义”对话框。
编辑当前文档或外部样式表中的任何样式。
删除CSS样式：删除“CSS 样式”面板中的所选样式，并从应用该样式的所有元素中删除格式。
单击CSS样式面板右上角的菜单按钮，可以显示如图3-36所示的面板菜单。
通过该菜单，可以完成对CSS样式面板的大部分控制。
在CSS样式面板的列表区域中单击鼠标右键，也可以打开同样的菜单。
图3-36 面板菜单从主菜单选择“文本/CSS样式”命令，选择“新建”也可启动“新建样式表”对话框，如图3-37所示。
在页面空白处单击鼠标右键，在弹出的菜单中一样可以启动“新建样式表”对话框，如图3-38所示。
不管如何启动上述几个样式菜单或面板，他们都包含相同的几个命令：新建样式表、编辑样式表、链接样式表和导出样式表。
网页页面设计教案
《网页页面设计》教案教学对象：教学总学时：主讲教师：主讲教师单位：时间：年月日概要本门课程的教学目标和要求：通过教学训练，使学生的设计能力、软件应用能力及实际操作能力得到深入的提高。
通过理论讲解与实例分析，学生可熟悉网页页面设计与制作的相关知识；通过应用训练，学生可掌握相关软件，并逐步培养学生的创造能力；通过综合训练，学生可以将理论知识应用于实践，并逐步提高学生的设计能力。
学生在完成本课程学习后，应达到如下要求：（1）正确理解网页页面的含义。
（2）掌握网页页面设计的基本知识和基本规律。
（3）熟悉网页页面设计的方法。
（4）能够将理论与实践相结合，独立完成网页页面设计与制作。
教学要点：不同类型的网页页面设计。
教学重点及难点：综合运用平面制图软件进行网页页面的设计与制作。
教学方法：先课堂讲授,掌握一定基础知识，然后进行实例教学，启发创作，在课堂形成教学互动；最后创作练习，培养学以致用，实战能力。
教学总时数：56学时教学参考书：《网页页面设计与制作》目录课题一网页概述课题二网页设计视听元素课题三交互式视觉元素课题四网页版面设计课题五网页配色课题六 PS网页切图教案首页课题一网页概述具体授课内容：网站设计是一个系统的软件应用工程，工作内容千头万绪，涉及到项目管理、页面设计，程序设计，网站测试，资料收集、文档编辑等方面工作，它需要不同的人员分工合作才能完成。
只有建立和实施规范的网站设计流程，有效整合各方面的工作内容，才能高效有序地开展网站设计工作，最终顺利地实现网站开发的目标。
通过本堂课的学习，使学生了解什么是网页页面设计，网页页面的规格、网页页面版面以及相关设计软件等。
概念分解：一、网站与网页1、网站：为了更好的推广企业、机构、活动等整体形象，利用互联网技术（数字技术）实现的超链接网络信息查询的多个页面。
2、网页：网站中，用来提供相关信息的单一页面。
3、网站与网页的区别：浏览器窗口中显示的单一页面，是网页。
《HTML CSS网页设计与布局》教案
《HTML CSS网页设计与布局》教案章节一：HTML基础1.1 教学目标了解HTML的基本概念和作用掌握HTML的基本语法和结构能够编写简单的HTML页面1.2 教学内容HTML简介HTML基本语法HTML基本结构文本标签图片标签标签1.3 教学方法讲解HTML的基本概念和作用示例演示HTML的基本语法和结构学生动手练习编写简单的HTML页面章节二：CSS基础2.1 教学目标了解CSS的基本概念和作用掌握CSS的基本语法和选择器能够给HTML页面添加样式CSS简介CSS基本语法CSS选择器字体样式颜色和背景布局控制2.3 教学方法讲解CSS的基本概念和作用示例演示CSS的基本语法和选择器学生动手练习给HTML页面添加样式章节三：网页布局基础3.1 教学目标了解网页布局的基本概念和原则掌握使用CSS进行网页布局的方法能够设计并实现一个基本的网页布局3.2 教学内容网页布局概述盒子模型浮动布局定位布局响应式布局讲解网页布局的基本概念和原则示例演示使用CSS进行网页布局的方法学生动手练习设计并实现一个基本的网页布局章节四：响应式网页设计4.1 教学目标了解响应式网页设计的基本概念和原则掌握使用CSS媒体查询进行响应式布局的方法能够设计并实现一个响应式的网页布局4.2 教学内容响应式网页设计概述媒体查询弹性布局移动端优化4.3 教学方法讲解响应式网页设计的基本概念和原则示例演示使用CSS媒体查询进行响应式布局的方法学生动手练习设计并实现一个响应式的网页布局章节五：HTML5和CSS3新特性5.1 教学目标了解HTML5和CSS3的基本概念和作用掌握HTML5和CSS3的新特性能够使用HTML5和CSS3编写现代网页5.2 教学内容HTML5简介HTML5新特性CSS3简介CSS3新特性5.3 教学方法讲解HTML5和CSS3的基本概念和作用示例演示HTML5和CSS3的新特性学生动手练习使用HTML5和CSS3编写现代网页章节六：使用HTML5与CSS3进行页面设计6.1 教学目标理解HTML5和CSS3在现代网页设计中的重要性掌握HTML5和CSS3的核心特性能够运用HTML5和CSS3实现复杂的页面设计6.2 教学内容HTML5新增元素HTML5多媒体支持CSS3高级选择器CSS3过渡和动画CSS3网格布局CSS3 Flexbox布局通过案例介绍HTML5和CSS3的应用场景演示如何使用HTML5和CSS3实现页面设计学生实践，通过编写代码来运用HTML5和CSS3特性章节七：JavaScript基础与交互设计7.1 教学目标理解JavaScript在网页中的作用掌握JavaScript基本语法和概念能够利用JavaScript实现基本的网页交互7.2 教学内容JavaScript简介JavaScript基本语法数据类型和变量控制结构函数DOM操作事件处理7.3 教学方法讲解JavaScript的基本概念和语法通过示例展示JavaScript在网页中的应用学生动手编写JavaScript代码，实现简单的交互效果章节八：前端框架与库了解前端框架和库的概念掌握至少一个前端框架的基本使用能够利用前端框架快速开发网页应用8.2 教学内容前端框架和库概述Bootstrap简介Foundation简介jQuery简介React简介Angular简介8.3 教学方法讲解前端框架和库的作用和优势演示如何使用Bootstrap、Foundation等框架学生尝试使用jQuery或React等库或框架来实现一个简单的页面章节九：网页性能优化9.1 教学目标理解网页性能对用户体验的重要性掌握网页性能优化的方法和策略能够对网页进行性能优化9.2 教学内容网页性能概述加载优化渲染优化网络优化资源压缩与缓存性能分析工具9.3 教学方法讲解网页性能对用户体验的影响演示网页性能优化的方法和策略学生通过实际案例练习网页性能优化技巧章节十：Web标准和跨浏览器兼容性10.1 教学目标理解Web标准的重要性掌握编写跨浏览器兼容代码的技巧能够开发出符合Web标准的网页10.2 教学内容Web标准简介HTML/CSS/JavaScript规范跨浏览器兼容性问题浏览器兼容性测试与调试兼容性解决方案10.3 教学方法讲解Web标准的意义和重要性分析常见的跨浏览器兼容性问题演示编写跨浏览器兼容代码的技巧学生通过实际操作练习编写兼容性代码重点和难点解析章节一：HTML基础重点和难点解析：理解HTML的基本概念和作用，掌握HTML的基本语法和结构。
网页设计与制作教案
网页设计与制作教案教案标题：网页设计与制作教学目标：1. 了解网页设计与制作的基本概念和原理。
2. 掌握常用的网页设计工具和制作技巧。
3. 能够设计和制作符合需求的基本网页。
教学内容：1. 网页设计与制作的基本概念介绍。
2. 网页设计工具的选择与使用。
3. 网页布局和排版设计。
4. 前端开发技术的基础知识。
5. 网页制作的常见问题和解决方法。
教学过程：第一课：网页设计与制作概述1. 介绍网页设计与制作的概念和发展历史。
2. 讲解网页设计的基本原则和流程。
3. 分析和评价一些经典网页设计案例。
第二课：网页设计工具的选择与使用1. 介绍常用的网页设计软件和工具，如Adobe Photoshop、Adobe Dreamweaver等。
2. 演示使用网页设计工具进行网页设计的基本操作。
3. 学生进行实践操作，设计一个简单的网页。
第三课：网页布局和排版设计1. 介绍网页布局和排版的基本原理和技巧。
2. 演示如何使用HTML和CSS进行网页布局和排版。
3. 学生进行实践操作，制作一个有合理布局和排版的网页。
第四课：前端开发技术的基础知识1. 介绍HTML、CSS和JavaScript等前端开发技术的基本概念和用法。
2. 演示使用HTML、CSS和JavaScript制作网页的基本操作。
3. 学生进行实践操作，制作一个包含基本交互功能的网页。
第五课：网页制作的常见问题和解决方法1. 分析网页制作中常见的问题和bug，并提供解决方法。
2. 学生进行实践操作，改进自己设计和制作的网页。
教学评估：1. 设计一个小组项目，要求学生团队合作设计并制作一个完整的网站。
2. 通过学生的作品和答辩评估学生对网页设计和制作的掌握程度。
教学资源：1. 电脑、投影仪等多媒体设备。
2. 网页设计和制作相关的书籍、教程、案例和网站。
教学总结：通过该教学过程，学生能够基本掌握网页设计与制作的基础知识和技巧，能够独立设计和制作简单的网页。
网页设计与制作DreamWeaver教案：第九讲 使用布局网页布局网页
授课日 期
班级名 称
授课地 点
教学课 题 第八讲使用布局表格布局网页 2 学时 课时
（1）掌握切换视图的操作方法。 （2）掌握绘制布局表格的操作方法 教学目 （3）掌握绘制布局单元格、移动布局单元格的操作方法 的 （4）掌握调整布局表格大小和布局单元格大小的操作方法 （5）掌握布局表格和布局单元格的属性设置方法
3）第二行用于间隔。
主站首 站长简 音乐古
|页
|介
|堡
| BEYOND |
星爷专
辑
|
默认
友情链
接
|
给我留 言
3、设计信息区 1） T3：1×3 表，宽 778，其它为 0，各单元格的宽度分别设为 181、411、156 2） 设置左右内容区 a) T31：2×1 表，宽 100%，表格边框为 1，白色，垂直对齐： 顶端。 b) 第 1 格高 15，第 2 格高 163，单元格边框为 1，绿色（细边 框色）。 c) 第 1 格：背景图像，输入栏目名“你的栏目”。 d) 第 2 格：输入栏目的具体内容 e) 复制 T31 表至右内容区即第 3 列。
课外 拓
展实 践
课后评 析
操作要求 （1）打开“课堂实践”网站文件夹“05 布局表格”中的网页文档
“05.html”。 （2）利用布局表格布局网页 05.html 的页面元素。 （3）绘制一个较大的布局表格 A，然后在布局表格 A 中再绘制两
课堂实 个布局表格 B、C，B 和 C 布局表格上下排列。 践 （4）在布局表格 B 中绘制 1 个布局单元格，在布局表格 C 中绘制 6 个布局单元格。 （5）分别在各个布局单元格中输入文字和插入图像。
5、设计版权区 1）T4：2×1 表，宽 778，边框为 0，边距为 0，间距为 0 a) 第一行：切换到“代码”视图，删除代码 ，插入水平线： 1 像素的细线。 b) 第二行：输入相关版本信息：版权所有： Copyright ? 2003-2005 All rights reserved
《网页设计与制作》教案-第12讲 布局技术-框架
第12讲布局技术-框架1.1教学目标：◆知识目标1.熟练掌握框架页面的创建过程。
2.掌握框架集和框架文件的区别。
3.掌握框架集属性和框架文件属性的设置。
4.掌握框架结构中文件的链接添加方法。
◆技能目标1.能灵活运用Dreamweaver CS6提供的框架结构定制不同的页面布局。
2.实现在框架结构指定区域引入外部文件。
◆品质目标培养学生认真细致、踏实进取的精神1.2教学重点：1.掌握框架集和框架文件的区别。
2.掌握框架集属性和框架文件属性的设置。
3.掌握框架结构中文件的链接添加方法。
1.3 教学难点掌握框架集属性和框架文件属性的设置。
掌握框架结构中文件的链接添加方法。
1.4教学方法：讲练结合，任务驱动、分子任务操练1.5课时安排：2课时1.6教学对象分析：这个班学生具有基本专业技能，不仅仅是要教会他们方法，最重要的是教会他们的规范的动手能力与各种事件多方法的灵活处理能力，在保证全班同学教学进度一致的情况上，培养学生较好的专业基础与创新创作意识。
1.7教学过程：一、激趣导入，揭示课题在网页设计中，框架是经常被用到的一种技术，用框架可以将浏览器[窗口分成几个部分，每个部分各自包含独立的页面文件，当替换或修改某个页面时将不会影响其他页面。
框架结构通常用于将网航区和内容区。
二、使用框架我们访问Internet时经常可以看到这样一些论坛网站，左边是每个讨论区的名称，点击任意一个讨论区就可以在右部区域中看见相应讨论区的内容，不过左右部分是独立显示的。
例如拖动左边的滚动条不会影响右侧的显示效果。
这是因为在页面中利用了框架技术，把浏览器的显示空间分割为几个部分，每个部分都独立地显示页面内容。
而且把几个框架结合在一起构成框架集，能够让页面具有更为丰富的效果。
0.1 框架的概念框架是浏览器窗口中的一个区域，它可以显示与浏览器窗口的其余部分中所显示内容无关的HTML文档。
框架集是HTML文件，它定义一组框架的布局和属性。
网页设计教案
网页设计教案
课程目标: 学生将学习如何设计网页，并了解如何合理安排页面布局和元素，以提高用户体验。
教学内容:
1. 网页设计概述
- 什么是网页设计?
- 网页设计的重要性和作用
- 常见的网页设计原则
2. 网页设计工具
- 介绍常见的网页设计工具，如Adobe Photoshop, Sketch, Figma等。
- 学生可以选择一款自己喜欢和适合自己的工具进行学习和实践。
3. 网页布局设计
- 网页布局的重要性和原则
- 如何合理规划页面的结构和内容
- 学习使用网格系统和栅格布局进行页面设计
4. 色彩和字体选择
- 网页设计中的色彩搭配原则和技巧
- 如何选择合适的字体来传达页面的风格和氛围
5. 图片和图标使用
- 学习如何选择和使用适合的图片和图标
- 学习使用图片编辑工具对图片进行修饰和优化
6. 用户体验 (UX) 设计
- 了解用户体验设计的重要性
- 学习如何设计易用和友好的用户界面
- 学习如何优化用户交互和导航
7. 响应式网页设计
- 学习如何设计适应不同屏幕尺寸的网页
- 了解响应式设计的原理和技术
教学活动:
1. 学生可以根据自己喜欢的主题选择一个网页进行设计，包括布局、色彩、字体等。
2. 学生可以与同学互评自己设计的网页，提供反馈和改进建议。
3. 学生可以尝试使用网页设计工具制作自己的设计原型，并展示给同学。
评估方式:
1. 学生的课堂参与和讨论活跃程度。
2. 学生设计的网页原型的完成度和质量。
3. 学生对于网页设计原则和技巧的掌握程度。
《网页设计与制作》教案-第9讲 布局技术之二—Div+CSS
第9讲布局技术之二—Div+CSS1.1教学目标：◆知识目标1.理解CSS盒子模式。
2.熟练掌握Div的创建与设置方法。
◆技能目标能够利用DreamweaverCS3预设的CSS布局创建页面。
◆品质目标培养学生认真细致、踏实进取的精神1.2教学重点：1.掌握Div的创建与设置方法1.3 教学难点理解CSS盒子模式。
1.4教学方法：讲练结合，任务驱动、分子任务操练1.5课时安排：2课时1.6教学对象分析：这个班学生具有基本专业技能，不仅仅是要教会他们方法，最重要的是教会他们的规范的动手能力与各种事件多方法的灵活处理能力，在保证全班同学教学进度一致的情况上，培养学生较好的专业基础与创新创作意识。
1.7教学过程：一、Div+CSS —构建任务1.工作流程⏹在站点中新建一个页面并保存。
⏹插入一个Div并设置相关CSS规则，使之成为外部容器。
⏹根据事先拟好的布局草图，定制四个Div标签并分别设置相关CSS规则。
⏹在各Div窗口中插入相应页面元素。
⏹检查整个布局效果并加以调整，保存并预览布局效果。
二、什么是Div标签Div标签一般用来定义网页上的一个特定区域，将文字、图片和表格等各种网页元素放在此区域里，再用CSS对该<Div>标签定义的区域进行定位和样式的设置。
CSS样式表不但是定义页面样式的良好工具，同时它所具有的精确定位对象的控制能力又使其成为不可多得的网页布局工具，为了提高设计效率，可以事先定义好布局所需的CSS样式规则，然后在“插入Div标签”中应用。
使用这种方式排版的网页代码简洁，更新方便，能兼容更多的浏览器。
三、CSS的盒子模式要利用CSS进行网页布局，需要借助HTML的一个标签元素Div，也就是目前比较流行的Div+CSS来布局网页结构。
需要接触到的知识点就是CSS的盒子模式，这也是Div排版的核心所在，传统的表格排版是通过大小不一的表格和表格嵌套来定位排版网页内容，而改用CSS排版后，通过CSS定义的大小不一的盒子和盒子嵌套来编排网页。
网页设计与制作教案(三栏式,比较规范,内容详实,图文并茂)
项目名称：制作“名车展示网”（一）授课时间：授课地点：授课班级：授课次数及课时：教学目标【知识目标】1、通过制作网页（而不是已往的浏览网页）了解网页、网站的概念。
2、了解链接的概念。
3、了解HTML代码中标签及属性的概念。
4、识记标签和属性的基本书写格式。
5、理解网页的本质及浏览器的功能。
【技能目标】1、掌握建立站点和网页的方法。
2、掌握向页面输入文字，插入图片的方法。
【情感目标】1、培养起对网站制作的兴趣。
2、培养与人协作的意识，锻炼与人协作的能力。
重点难点【重点】建立站点和网页的方法。
【难点】站点和文件夹的对应关系。
项目分析利用DW和提供的图片、文字素材制作“名车展示网”。
内含一个导航页面（首页）和三个分别介绍三种名车的页面。
此项目旨在让学生对网站的制作有一个感性的认识并培养他们对课程的兴趣，对页面的布局、美化不去涉及。
教学准备三款名车的图文和文字素材教学后记在课堂上可以再多分配一些时间给学生自己去探索，有些知识点学生自己经过尝试可以自己获得，这样他们对知识的印象会比老师告诉他们来得更深。
教学过程师生互动设计及设计意图教学方法一、展示将要完成的项目1.展示教师制作好了的网站——名车展示网2.进入网站的文件夹，引导学生观察网站的架构【教师活动】通过凌波展示网站（浏览），激发学生的学习热情和兴趣（汽车是学生比较喜欢的话题）【学生活动】观察【教师活动】进入网站文件夹，引导学生观察网站的架构，为下面的建立站点做铺垫。
提问：网页和图片分别怎样组织？【学生活动】讨论，回答【教师活动】点评，总结【教法】通过演示，启发引导学生思考，引导学生自己得出结论。
【教法】教师通过总结，对结论进行完善和强化。
二、演示建立站点的步骤，学生参照教师讲授自主建立网站1.通过引导学生观察网站文件夹，使学生了解网站和网页的概念，进而理解网站的组织方式，理解建网站时一些步骤的意义。
2.演示建立站点的步骤（1）建立好相关文件夹（2）进入“站点定义为”对话框，设置相关选项3.对操作中的难点和易错点进行再次强调【教师活动】先强调网站的架构方式，再演示用DW建立网站的步骤【学生活动】观察，理解，识记【教师活动】通过提问强化：1.站点名称和实际的文件夹名称需要相同吗？2. 站点名称和实际的文件夹名称可以用中文吗？【学生活动】操作，讨论→回答【教师活动】对以上的两个问题进行总结，以强化。
网页设计与布局的学习计划
网页设计与布局的学习计划一、学习目标1. 理解网页设计与布局的基本原理和概念2. 掌握常见的网页设计和布局工具3. 能够运用HTML、CSS等技术进行网页设计与布局4. 学习并掌握一些常见的网页设计与布局技巧5. 能够运用响应式设计进行网页设计与布局6. 了解一些流行的网页设计与布局趋势和风格二、学习内容1. 网页设计与布局的基本概念和原理- 了解网页设计与布局的发展历史- 理解网页设计与布局的基本原则- 掌握网页设计与布局的常见技术和工具2. 前端技术基础- 掌握HTML、CSS等前端技术的基本语法和用法- 学习如何使用HTML、CSS进行网页设计与布局- 了解一些常见的网页设计与布局框架和库3. 网页设计与布局工具- 掌握Photoshop、Illustrator等设计工具的基本用法- 学习如何使用Sketch、Figma等UI设计工具进行网页设计 - 掌握常见的网页设计与布局工具的使用技巧4. 响应式设计- 了解响应式设计的基本概念和原理- 学习如何使用媒体查询等技术进行响应式设计- 掌握响应式设计的常见技巧和方法5. 网页布局技巧- 学习网页布局的常见技巧和方法- 掌握如何使用栅格系统进行网页布局- 了解一些流行的网页布局设计风格和趋势三、学习方法1. 阅读相关书籍和教程- 阅读相关的网页设计与布局的书籍和教程，掌握基本概念和原理- 学习一些专业的网页设计和布局技术的书籍和教程，掌握具体的技术和方法 2. 参与实际项目- 参与一些实际的网页设计与布局项目，积累实践经验- 练习设计与布局各种类型的网页，提高自己的设计水平3. 学习交流与分享- 加入一些网页设计与布局的社区或论坛，与他人交流学习经验- 定期分享自己的设计与布局作品，接受他人的指导和建议4. 不断总结与反思- 定期总结自己的学习和实践经验，发现不足，不断改进- 反思自己的设计与布局作品，寻找提高的空间，不断进步四、学习计划1. 第一阶段：基础知识学习（1个月）- 了解网页设计与布局的基本概念和原理- 掌握HTML、CSS等前端技术的基本语法和用法- 学习如何使用Photoshop、Illustrator等设计工具进行网页设计- 阅读相关的书籍和教程，积累基础知识2. 第二阶段：技术应用实践（2个月）- 学习如何使用Sketch、Figma等UI设计工具进行网页设计- 掌握如何运用HTML、CSS等技术进行网页设计与布局- 参与一些实际的网页设计与布局项目，提高实践能力3. 第三阶段：进阶技巧学习（1个月）- 学习响应式设计的基本概念和原理- 掌握一些常见的网页设计与布局技巧和方法- 学习如何使用栅格系统进行网页布局4. 第四阶段：综合实践与总结（1个月）- 参与一些综合性的网页设计与布局项目，提高综合能力- 总结自己的学习与实践经验，发表相关文章或分享- 反思自己的设计与布局作品，不断改进提高自己的设计水平五、学习资源1. 书籍和教程- 《HTML与CSS设计与构建网站》- 《Web设计与布局技术》- 《响应式Web设计》- 《网页设计布局与排版》2. 网络资源- 网站开发与设计相关的博客、论坛等- 一些知名的设计与布局教程网站，如W3School、MDN Web Docs等 - 设计资源网站，如Dribbble、Behance等六、学习评估1. 项目实践成果评估- 定期参与一些实际的网页设计与布局项目，评估自己的设计水平- 观察实际项目的成果，发现不足之处，改进提高2. 学习交流评估- 定期与他人交流学习经验，听取他人的意见和建议- 定期分享自己的设计与布局作品，接受他人的指导和建议3. 总结与反思评估- 定期总结自己的学习和实践经验，发现不足，不断改进- 反思自己的设计与布局作品，寻找提高的空间，不断进步七、学习难点及解决方案1. 网页设计与布局的基本概念和原理- 通过深入阅读和理解相关书籍和教程，加强理论学习- 多参与实际项目实践，增强实际应用能力2. 技术应用实践- 参与相关的实际项目，积累实践经验- 多加练习，熟练掌握各种技术和工具的使用方法3. 进阶技巧学习- 多参加一些相关的技术交流活动，了解行业最新动态- 加强理论学习，多掌握一些新的技术和方法4. 综合实践与总结- 多参与一些综合性的网页设计与布局项目，提高综合能力- 多与他人交流学习经验，接受他人的指导和建议八、学习心得1. 基础知识学习阶段- 学习了网页设计与布局的基本概念和原理，掌握了HTML、CSS等前端技术的基本语法和用法- 了解了一些常见的网页设计与布局工具的使用方法，如Photoshop、Illustrator等2. 技术应用实践阶段- 参与了一些实际的网页设计与布局项目，加强了实践能力- 掌握了如何运用HTML、CSS等技术进行网页设计与布局，提高了制作网页的能力 3. 进阶技巧学习阶段- 学习了响应式设计的基本概念和原理，掌握了一些常见的网页设计与布局技巧- 了解了如何使用栅格系统进行网页布局，提高了网页布局的能力4. 综合实践与总结阶段- 参与了一些综合性的网页设计与布局项目，提高了综合能力- 总结了自己的学习与实践经验，发表了相关文章和分享，得到了他人的指导和建议九、学习建议1. 多加练习，熟练掌握各种技术和工具的使用方法2. 注意理论学习与实践结合，加强对网页设计与布局的实际应用能力3. 多参与行业交流活动，了解行业最新动态，不断提高自己的设计能力4. 多与他人交流学习经验，接受他人的指导和建议，不断改进提高5. 保持学习的热情和动力，坚持不懈，不断进步最后，网页设计与布局是一个需要不断学习和实践的过程，需要不断提升自己的设计和布局水平，在未来的学习和实践中，我会继续努力，不断学习，不断进步。
《HTML CSS网页设计与布局》教案
《HTML CSS网页设计与布局》教案一、教学目标1. 理解HTML和CSS的基本概念及其在网页设计与布局中的作用。
2. 掌握HTML的基本结构、标签及其属性。
3. 学会使用CSS选择器、属性和值来样式化HTML元素。
4. 能够运用CSS布局模型进行页面布局设计。
5. 能够根据设计稿实现网页的视觉呈现。
二、教学内容1. HTML简介HTML的定义与作用HTML文档的基本结构常用的HTML标签及其功能2. CSS简介CSS的定义与作用CSS的基本语法内联样式、内部样式表和外部样式表3. CSS选择器标签选择器类选择器与ID选择器属性选择器与伪类选择器组合选择器与后代选择器4. CSS基本样式字体样式与颜色盒子模型内外边距边框样式列表样式5. CSS布局块级元素与内联元素浮动布局定位布局弹性盒子模型（Flexbox）三、教学方法1. 讲授法：讲解HTML与CSS的基本概念、语法和用法。
2. 示范法：通过示例演示HTML与CSS的编写方法和布局技巧。
3. 练习法：学生动手实践，完成指定练习任务。
4. 讨论法：分组讨论，解决练习过程中遇到的问题。
四、教学准备1. 教学环境：多媒体教室，每台电脑安装有网页编辑软件（如Sublime Text、Visual Studio Code等）。
2. 教学素材：HTML与CSS的教学PPT，示例代码，练习题库。
3. 教学工具：投影仪，计算机。
五、教学进程1. 课时安排：每个章节安排2课时，共计10课时。
2. 教学步骤：第1步：讲解HTML与CSS的基本概念，展示HTML与CSS在网页设计与布局中的作用（第1课时）。
第2步：示范如何编写HTML与CSS代码，讲解代码的执行过程（第2课时）。
第3步：让学生动手实践，完成指定练习任务（第3-5课时）。
第4步：分组讨论，解决练习过程中遇到的问题（第6课时）。
第5步：讲解CSS选择器、基本样式和布局方法，展示如何根据设计稿实现网页的视觉呈现（第7-9课时）。
网页布局-教案
2.组织学生讨论和总结发言，并对学生没有提出的知识点进行补充，进一步巩固学生所学知识
1.演示讲解操作
2。分组讨论
3.总结新知识
4。听讲教师补充
12
课后反思与新学期改进一：
课后反思与新学期改进二：
强化练习
请同学们自己创建几个网页并建立相互的链接关系,制作自己的小型网站。
二、表格的使用
三、框架的使用
教学设想
通过情景导入引发学生的学习兴趣通过学生的自主学习，合作学习和教师的适当指导完成学习任务。
教学过程
教学内容
教师行为及设计意图
学生行为及设计意图
时间
情景导入：制作特色网页，布局是非常关键的.说到布局，现在有两种比较常用的方法，即表格和框架.其中表格应该是最流行的方式了，随便在网上找几个网页看看，很多都是通过表格来搭建王页的。大家想不想为我们制作的王页进行合理的布局呢？
1布置练习任务，指导学生进行操作练习。
2。巡视了解学生练习情况,对共性问题集体指导.
1。独立或合作完成练习任务。
2.听讲：教师对共性问题的讲解
5’
课后反思与新学期改进一:
课后反思与新学期改进二：
1。布置任务，明确课堂活动目标,统一学生课堂活动.
2。鼓励部学生探讨新知识
听讲、明确活动目的，产生自主学习和进行创作的兴趣。
5'
课后反思与新学期改进一：
课后反思与新学期改进二：
完成任务（自主探究、协作学习)
1。组织学生自主学习完成任务并根据需要给予及时提示、指导
2。教师演示讲解如何创建文字和图片。
1。巡视、指导自主学习及学生操作，并对发现的共性的问题进行课堂提示或指导。
网页布局教案
网页布局教案教案标题：网页布局教案教学目标：1. 理解网页布局的基本概念和原则。
2. 掌握常见的网页布局技术和方法。
3. 能够设计和创建符合规范的网页布局。
教学资源：1. 计算机和互联网连接设备。
2. 网页设计软件（如Adobe Dreamweaver）。
3. 网页布局示例和相关教学材料。
教学步骤：引入活动：1. 向学生介绍网页布局的重要性和应用领域，例如网页设计、应用程序界面等。
2. 展示一些具有不同布局风格的网页示例，引起学生的兴趣和好奇心。
知识讲解：3. 解释网页布局的基本概念，包括页面结构、网格系统、盒模型等。
4. 介绍常见的网页布局技术和方法，如流式布局、固定布局和自适应布局。
5. 分析每种布局技术的优缺点，讨论何时使用哪种布局方式。
示范与实践：6. 使用网页设计软件演示如何创建不同类型的网页布局。
7. 引导学生在计算机上跟随示范，实践创建自己的网页布局。
8. 鼓励学生进行实验和创新，尝试不同的布局风格和元素排列方式。
讨论与总结：9. 组织学生进行小组讨论，分享他们设计的网页布局，并讨论各自的设计理念和体验。
10. 引导学生总结网页布局的关键要点和注意事项，强调良好的用户体验和可访问性。
评估与反馈：11. 分发练习任务，要求学生根据所学知识设计一个网页布局。
12. 对学生的设计进行评估和反馈，包括布局结构、元素排列、可读性等方面。
拓展活动：13. 鼓励有兴趣的学生进一步学习和探索高级网页布局技术，如响应式布局和网格布局。
14. 提供相关资源和指导，帮助学生深入了解和应用这些技术。
教学延伸：15. 将网页布局的概念和技术与其他设计学科（如平面设计和用户界面设计）进行比较和联系，帮助学生拓宽视野。
通过以上教学步骤，学生将能够全面理解网页布局的基本概念和原则，并能够设计和创建符合规范的网页布局。
同时，他们也将培养创新思维和团队合作能力，为将来的网页设计和相关领域的学习打下坚实的基础。
计算机网络技术专业1《网页布局-教学设计2》
杨平教学团队
课程所属
专业
电子信息类专业
序号
9-4
微课名称
混合布局视频长度1源自分钟总学时64知识点
识点描述
布局中既有固定宽度布局，又有自适应宽度布局。
预备知识
计算机根底
教学类型
理实一体实训室
适用对象
电子信息类专业，web前端开发者，网页制作爱好人员。
设计思路
案例分析，操作演示。
教学过程
内容
时间
认识网页布局—微课教学设计
教师名称
杨平教学团队
课程所属
专业
电子信息类专业
序号
9-1
微课名称
认识网页布局
视频长度
7分钟
总学时
64
知识点
识点描述
对页面的文字、图像或表格进行格式化版式排列。
预备知识
计算机根底
教学类型
理实一体实训室
适用对象
电子信息类专业，web前端开发者，网页制作爱好人员。
设计思路
提出任务、分析任务、实现任务。
自适应宽度布局—微课教学设计
教师名称
杨平教学团队
课程所属
专业
电子信息类专业
序号
9-3
微课名称
自适应宽度布局
视频长度
10分钟
总学时
64
知识点
识点描述
网页根据浏览器窗口大小自适应变化。
预备知识
计算机根底
教学类型
理实一体实训室
适用对象
电子信息类专业，web前端开发者，网页制作爱好人员。
设计思路
案例分析、设计演示。
教学过程
内容
时间
课程导入
自适应布局的原因
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
《HTML+CSS 网页设计与布局》课程教案授课教师：授课班级：地点：周课时： 5 课时网页设计基础知识章节内容教学目标重点难点教学Dreamweaver软件介绍及其基础操作HTML 基础知识及常用标记1)使学生了解网页设计的相关基础知识；2)使学生熟悉 Dreamweaver 软件界面的基本操作方法。
1)了解网页设计相关概念和网页的类型；2)熟练掌握 Dreamweaver 软件创建和管理站点的方法。
课堂讲授、案例讲解与指导方法教学计算机机房环境时间教学过程及内容提要备注分配一、引入约 15 分钟教1 、相互认识，提出与本学科相关的知识，介绍本门课程情况、教学内学容及总学时数进度安排，宣讲本课程教学纪律，鼓励学生营造一种过学习氛围，尊重同学，互帮互学，真正达到学以致用；程2 、提出问题：上过网吧有谁自学过网页设计听说过HTML或者CSS设这两个概念吗计约 35 分钟学生理解3、二、告知学生课堂任务本次课所学习的主要内容是HTML相关基础知识和Dreamweaver软件基础操作；三、逐步演示讲解分析教学内容1、网站和网页的区别：2、（ 1 ）网页是Internet基本元素；3、（ 2 ）网站由网页组成；4、静态网页和动态网页：5、静态网页：纯粹HTML语言格式的网页通常被称为静态网页，静态网页的后缀名通常为.htm 、.html 、 .shtml 、 .xml 。
6、动态网页：许多人认为网页会动就是动态网页，这是个错误的观点，在静态的网页中也可以含有动态的图片，这仅仅是视觉上的动态罢了。
真正的动态网页是指实际上并不是独立存在于服务器上的网页文件，只有当用户请求时服务器才返回一个完整的网页。
也就是说，它是返回到了客户端上的网页。
例如网页文件是以ASP 、PHP 、JSP、ASPX 为结尾就是动态的网页了。
约 20 分钟学生熟记7、静态网页的特点：8、（ 1 ）内容相对稳定，容易被搜索引擎检索到；9、（ 2 ）没有数据库支持，在网站制作和维护方面工作量大；10 、（3）交互性差，在功能方面有很大的限制。
11 、动态网页的特点：12 、（1）以数据库技术为基础，可大大降低网站维护的工作量；13 、（2）可实现更多的功能，如用户注册、新闻发布、在线留言等；14 、（3）不利于使用搜索引擎进行网站推广。
15 、常见网页类型：形象页、主页、栏目页、内页、新闻详细页等；约30 分钟学生实践约20 分钟16 、网页设计原则：17 、（1）了解客户需求18 、（2）遵循Web标准约20 分钟学生实践约20 分钟19 、（3）运用形式美法则20 、网页设计流程：21 、（1）手绘效果图：确定网页主题内容和风格22 、（2）设计效果图：搜集、整合设计所需素材23 、（3）版面编辑：网页的制作与实现24 、（4）网页美化：动画设计，网页测试和发布25 、网页设计的主要软件：26 、（1）Photoshop27 、（2）Dweamveawer28 、（3）Flash29 、（4）Firworks 约30 分钟学生实践约20 分钟约30 分钟学生实践约20 分钟30 、HTML 基础知识：31 、（1）HTML概念：Hyper Text Markup Language超文本标识语言；32 、（2）HTML文档的编写方法：用记事本手工直接编写、使用约 20分钟约 40分钟学生实践可视化 HTML 编辑器 Dreamweaver、由Web服务器动态生成；33 、（3）网页文件命名：首页文件名默认为：或；34 、（4）HTML文件结构：总结35 、<HTML>36 、<HEAD>37 、<title></title>38 、</HEAD>39 、<BODY>40 、HTML文件的正文41 、</BODY>42 、</HTML>43 、（5）用编辑器手工编写第一张网页；44 、学生实训及辅导；45 、Dreamweaver软件界面介绍：46 、（1）软件面板组成及基本操作方法47 、（2）软件首选参数设置48 、Dreamweaver站点创建：49 、站点->新建站点->设置站点名称-> 设置站点默认图像文件夹。
50 、学生实训操作：Dreamweaver站点创建与设置；51 、Dreamweaver创建第一个网页：52 、（1)名称：53 、（2)设置标题、输入文本、输入特殊字符54 、（3）页面属性设置55 、（4 ）网56 、学生及；57 、HTML 常用：58 、（1 ）： <h#>主文字 </h#>59 、（2 ）段落： <p>里表示段落 </p>60 、（3 ）行与注： <br> 、 <!-- 里放注 -->61 、（4 ）粗体与斜体： <b> 粗体 </b>、 <i> 斜体 </i>62 、（5 ）除与下划：<s> 除 </s> 、<u>下划 </u>63 、（6 ）上与下： <sup> 上 </sup> <sub>下 </sub>64 、学生及；65 、字体：66 、（1 ）字体大小： <font size="1">字体大小 </font>67 、（2 ）字体色： <font color="">字体色 </font>68 、（3 ）置字体： <h#> 主文字 </h#>69 、（4 ）物理字体：70 、<B> ⋯</B>，将字符置成粗体。
71 、<I> ⋯</I> ，将字符置成斜体。
72 、<U> ⋯</U>，字符增加下划。
73 、<S> ⋯</S>，字符增加除。
74 、<TT> ⋯</TT> ，将字符置成打字机字体。
75 、<SUP> ⋯</SUP>，将字符置成上字体。
76 、<SUB> ⋯</SUB>，将字符置成下字体。
77 、（5）字体：78 、<EM> ⋯</EM>文字。
79 、<STRONG>⋯</STRONG>字体加重。
80 、<CODE> ⋯</CODE>示程代。
81 、<SAMP>⋯</SAMP>示示例文字。
82 、<KBD> ⋯</KBD>示按文字。
83 、<SMALL>⋯</SMALL>小文字。
84 、<BIG> ⋯</BIG>放大文字。
85 、字体例解；86 、学生及；四、课外作业五、第 3 章上机践。
六、七、课堂小结本次主要内容：1、网基知；2、 Dreamweaver基本使用方法；3、 HTML 基知及常用；后记《H TML+CSS 网页设计与布局》课程教案授课教师：授课班级：地点：周课时： 5 课时文字布局章节内容教学目标重点难点教学插入图像超级链接3)使学生熟练掌握 HTML 常用标记的基本使用方法；4)使学生掌握 HTML 常用标记各种属性的含义和设置方法。
3)掌握各种 HTML 常用标记的基本使用方法；4)熟记各种 HTML 常用标记的含义。
课堂讲授、案例讲解与指导方法教学计算机机房环境时间教学过程及内容提要备注八、引入教分配约 10 分钟4 、回顾上周所学内容：上周主要介绍了网页设计和HTML相关基础学知识及 Dreamweaver软件基础操作，重点介绍了HTML基础知过识及常用标记；程5 、提出问题：网页中文字如何布局如何在网页中插入图像如何运用超设级链接计约 30 分钟学生理解6、九、告知学生课堂任务本次所学的主要内容是HTML 文字布局和插入像、超接的用。
约30 分钟约40 分钟约20 分钟十、逐步演示讲解分析教学内容87 、行控制：文字一<p> 、文字二 <br />88 、不行控制： <nobr></nobr>89 、文字： align="#"、 <center>居中 </center>90 、置段落： <p>段落一 </p> 、 <p> 段落二 </p>91 、学生及；92 、上周外作点；93 、无序列表：94 、<ul>95 、<li> 表一 </li>96 、<li> 表⋯</li>97 、</ul>98 、有序列表：99 、<ol>100 、<li> 表一 </li>101 、<li> 表⋯</li>102 、</ol>103 、欲格式化文本： <pre>文字 </pre>、<xmp> 文本 </xmp> 104 、算机出格式：约20 分钟学生实践约30 分钟约30 分钟学生实践约20 分钟约30 分钟学生实践约30 分钟约 30 分钟学生实践105 、<code>代码样式小型固定宽度字体显示的文本</code>106 、<kbd>代码样式固定宽度字体渲染</kbd>总结107 、<tt> 代码样式固定宽度字体渲染文本</tt>108 、<var>代码样式斜体字渲染 </var>109 、学生实训及辅导；110 、在网页中插入图像：<img src="">111 、图像无法显示时的提示信息：<img src="" alt="风景 ">112 、控制图像的大小：113 、<img src=""alt="风景 "width="400px"height="300px">114 、设置边框：115 、<img src="" alt="风景" border="0px">116 、图像的链接：117 、<a href=""><img src=""></a>118 、学生实训及辅导；119 、图像映射图：<map></map>120 、文本与图像对齐：<img src="" align="middle">121 、学生实训及辅导；122 、最简单的文字超链：<a href=""> 文字链接 </a>123 、超链网页的打开方式：_blank 、 _parent 、 _self 、 _top124 、链接的注释：125 、<a href="" title="网易网站 " >163 网站 </a>126 、设置图片链接：<a href=""><img src=""></a>127 、设置锚点：<a name="锚点名">文章中的文字</a>128 、邮箱地址链接：129 、<a href="">作者的邮箱</a>130 、相对路径：131 、相对路径是指这个文件在所在的位置与其他文件或文件夹的关系；132 、绝对路径：133 、HTML 绝对路径（ absolute path）指带域名的文件的完整路径。