网页设计与布局教案.docx
- 格式:docx
- 大小:171.32 KB
- 文档页数:33
网页设计教案标题:网页设计教案【教案目标】本教案的目标是帮助学生掌握网页设计的基本原理和技巧,培养学生在创作网页时的审美能力和技术能力,并了解网站的结构和设计流程。
【教学内容】一、引言(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 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网页设计与布局教案第一章: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标签的使用、属性、嵌套和语义化。
中等专业学校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(二)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基础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. 网页设计和制作相关的书籍、教程、案例和网站。
教学总结:通过该教学过程,学生能够基本掌握网页设计与制作的基础知识和技巧,能够独立设计和制作简单的网页。
第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文件,它定义一组框架的布局和属性。
《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)指带域名的文件的完整路径。