网页设计教案
《网页设计与制作》教案
《网页设计与制作》教案第一章：网页设计基础1.1 教学目标让学生了解网页设计的基本概念和原则让学生掌握网页设计的流程和方法1.2 教学内容网页设计的概念和定义网页设计的原则和要素网页设计的流程和方法1.3 教学方法讲授法：讲解网页设计的概念和原则实践法：学生动手实践设计简单的网页1.4 教学评价学生能回答出网页设计的概念和定义学生能理解并运用网页设计的原则和要素学生能独立完成简单的网页设计第二章：HTML与CSS基础2.1 教学目标让学生了解HTML和CSS的基本概念和作用让学生掌握HTML和CSS的基本语法和用法2.2 教学内容HTML的基本概念和语法CSS的基本概念和语法HTML和CSS的综合应用2.3 教学方法讲授法：讲解HTML和CSS的基本概念和语法实践法：学生动手实践编写HTML和CSS代码2.4 教学评价学生能回答出HTML和CSS的基本概念和作用学生能理解并运用HTML和CSS的基本语法和用法学生能独立完成简单的HTML和CSS代码编写第三章：网页布局与排版3.1 教学目标让学生了解网页布局和排版的基本原则和方法让学生掌握使用HTML和CSS进行网页布局和排版的技术3.2 教学内容网页布局的基本原则和方法网页排版的基本原则和方法使用HTML和CSS进行网页布局和排版的技术3.3 教学方法讲授法：讲解网页布局和排版的基本原则和方法实践法：学生动手实践进行网页布局和排版3.4 教学评价学生能回答出网页布局和排版的基本原则和方法学生能理解并运用HTML和CSS进行网页布局和排版的技术学生能独立完成具有良好布局和排版的网页设计第四章：网页动画与交互4.1 教学目标让学生了解网页动画和交互的基本概念和原理让学生掌握使用HTML和CSS实现网页动画和交互的技术4.2 教学内容网页动画的基本概念和原理网页交互的基本概念和原理使用HTML和CSS实现网页动画和交互的技术4.3 教学方法讲授法：讲解网页动画和交互的基本概念和原理实践法：学生动手实践实现网页动画和交互4.4 教学评价学生能回答出网页动画和交互的基本概念和原理学生能理解并运用HTML和CSS实现网页动画和交互的技术学生能独立完成具有动画和交互功能的网页设计第五章：网页优化与推广5.1 教学目标让学生了解网页优化和推广的基本概念和方法让学生掌握使用SEO和网络营销技术进行网页优化和推广的技巧5.2 教学内容网页优化的基本概念和方法网页推广的基本概念和方法使用SEO和网络营销技术进行网页优化和推广的技巧5.3 教学方法讲授法：讲解网页优化和推广的基本概念和方法实践法：学生动手实践进行网页优化和推广5.4 教学评价学生能回答出网页优化和推广的基本概念和方法学生能理解并运用SEO和网络营销技术进行网页优化和推广的技巧学生能独立完成具有优化和推广功能的网页设计第六章：网页图像处理与多媒体应用6.1 教学目标让学生了解网页图像处理的基本概念和工具让学生掌握网页图像处理和多媒体应用的技术6.2 教学内容网页图像处理的基本概念和工具（如Photoshop、Fireworks等）多媒体元素在网页中的应用（如音频、视频等）图像和多媒体的HTML和CSS标记6.3 教学方法讲授法：讲解网页图像处理的基本概念和工具实践法：学生动手实践进行网页图像处理和多媒体应用6.4 教学评价学生能回答出网页图像处理的基本概念和工具学生能理解并运用网页图像处理和多媒体应用的技术学生能独立完成具有图像和多媒体应用的网页设计第七章：网页编程技术7.1 教学目标让学生了解网页编程的基本概念和语言让学生掌握常用的网页编程技术和框架7.2 教学内容网页编程的基本概念和语言（如JavaScript、jQuery等）常用的网页编程技术和框架（如Bootstrap、React等）编程实践和项目案例7.3 教学方法讲授法：讲解网页编程的基本概念和语言实践法：学生动手实践进行网页编程和技术应用7.4 教学评价学生能回答出网页编程的基本概念和语言学生能理解并运用常用的网页编程技术和框架学生能独立完成编程实践和项目案例第八章：移动网页设计与制作8.1 教学目标让学生了解移动网页设计的基本概念和原则让学生掌握移动网页设计与制作的技术和工具8.2 教学内容移动网页设计的基本概念和原则移动网页设计与制作的技术和工具（如Responsive Design、Adobe Edge Mobile等）移动网页设计的实践和案例分析8.3 教学方法讲授法：讲解移动网页设计的基本概念和原则实践法：学生动手实践进行移动网页设计与制作8.4 教学评价学生能回答出移动网页设计的基本概念和原则学生能理解并运用移动网页设计与制作的技术和工具学生能独立完成移动网页设计与制作的项目案例第九章：网页项目实战与团队协作9.1 教学目标让学生了解网页项目实战的基本流程和方法让学生掌握团队协作的基本技巧和工具9.2 教学内容网页项目实战的基本流程和方法团队协作的基本技巧和工具（如Git、Project Management Software等）项目案例分析和实战演练9.3 教学方法讲授法：讲解网页项目实战的基本流程和方法实践法：学生分组进行项目实战和团队协作9.4 教学评价学生能回答出网页项目实战的基本流程和方法学生能理解并运用团队协作的基本技巧和工具学生能独立完成项目实战和团队协作的任务第十章：网页设计与制作的未来趋势10.1 教学目标让学生了解网页设计与制作的未来趋势和发展方向让学生掌握前沿技术和创新思维的方法10.2 教学内容网页设计与制作的未来趋势和发展方向（如VR/AR、等）前沿技术和创新思维的方法（如Blockchn、Design Thinking等）创新项目和案例分析10.3 教学方法讲授法：讲解网页设计与制作的未来趋势和发展方向实践法：学生进行创新项目和思维训练10.4 教学评价学生能回答出网页设计与制作的未来趋势和发展方向学生能理解并运用前沿技术和创新思维的方法学生能独立完成创新项目和案例分析重点和难点解析重点环节一：网页设计的概念和原则重点关注学生对网页设计的基本理解，以及如何运用设计原则进行网页创作。
网页的美化教案
网页的美化教案简介:在现代社会中，网页已经成为了人们获取信息和交流的重要工具。
然而，大多数网页都缺乏吸引力和个性化，这使得用户对其产生疲劳感。
为了提高用户体验和吸引用户眼球，我们需要对网页进行美化。
本文将提供一份网页的美化教案，帮助您打造一个独特、吸引人的网页。
一、颜色搭配1. 选择主题颜色：首先，确定一个适合您网页主题的颜色。
可以通过色彩搭配工具或者网上搜索获取灵感。
例如，对于时尚类网页，可以选择明亮、鲜艳的颜色；对于企业类网页，可以选择稳重、专业的颜色。
2. 搭配配色方案：选择一组配色方案，包括主色调和辅助色调。
一般建议主色与辅助色相互补充，创造出富有层次感的页面效果。
3. 使用色彩的注意事项：- 避免过多鲜艳的颜色，以免给用户眼睛带来不适；- 注意色彩的对比度，确保文字和背景之间的视觉清晰度；- 添添加容易与主要内容混淆的颜色，以保持页面整洁。
二、排版设计1. 字体选择：选择适合您网页主题的字体，例如对于时尚类网页，可选择一种流行、有个性的字体；对于企业类网页，可选择一种专业、易读的字体。
2. 提升阅读体验：- 适当调整行距，以提高文字的可读性；- 使用段落和标题的区分，让用户更容易找到所需信息；- 设置合理的段落长度和行宽，避免用户阅读时出现不适。
三、视觉效果1. 背景图片或颜色：根据网页主题和风格，选择适合的背景图片或配色方案。
注意图片不要过大，以免影响页面加载速度。
2. 图标和按钮设计：- 使用合适的图标，增加页面的可视化效果；- 设计独特的按钮样式，增加用户互动性；- 保持图标和按钮的一致性，提高用户的操作便捷性。
四、布局设计1. 确定网页布局：根据页面内容和功能，决定合适的布局方式，如常见的单列、双列或多列布局。
2. 确保页面整洁：- 留白的使用：合理利用留白，使页面看起来清爽、整洁；- 图片和文本的平衡：确保图片与文本之间的平衡，使页面视觉效果更佳；- 模块的排列：根据内容的重要性和相关性，合理安排模块的位置。
网页设计教案
网页设计教案标题：网页设计教案【教案目标】本教案的目标是帮助学生掌握网页设计的基本原理和技巧，培养学生在创作网页时的审美能力和技术能力，并了解网站的结构和设计流程。
【教学内容】一、引言（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. 学生进行设计讨论和批评，互相提供反馈和改进建议【教学方法】一、讲授法教师通过演示、讲解、示范等方式传授网页设计的基本原理和技巧。
二、案例分析法教师使用实际网页案例进行分析和讨论，引导学生了解优秀网页设计的特点和思路。
三、实践操作法学生根据所学知识进行网页设计项目的实践操作，通过实际操作提高自己的设计能力。
四、讨论交流法学生在设计过程中进行讨论和交流，互相提供反馈和改进建议，促进学生之间的合作和学习。
《网页美工设计》教案
《网页美工设计》教案一、教学目标1. 让学生了解网页美工设计的基本概念和流程。
2. 培养学生掌握网页美工设计的基本技能，如色彩搭配、布局、图片处理等。
3. 使学生能够独立完成网页美工设计，提高学生的创新能力和审美水平。
二、教学内容1. 网页美工设计的基本概念和流程。
2. 色彩搭配的原则和方法。
3. 网页布局的设计技巧。
4. 图片处理的工具和技巧。
5. 设计案例分析和实践。
三、教学方法1. 讲授法：讲解网页美工设计的基本概念、色彩搭配原则、布局设计技巧等。
2. 演示法：展示图片处理工具的使用方法和设计案例。
3. 实践法：学生动手实践，完成网页美工设计作品。
4. 讨论法：分组讨论，分享设计心得和经验。
四、教学准备1. 教室环境：多媒体教学设备。
2. 教学材料：教材、图片、设计工具软件等。
3. 学生设备：电脑、设计软件安装。
五、教学过程1. 导入：通过展示优秀的网页美工设计作品，引发学生兴趣，导入新课。
2. 讲解：讲解网页美工设计的基本概念和流程，重点讲解色彩搭配原则和网页布局设计技巧。
3. 演示：展示图片处理工具的使用方法和设计案例，让学生了解并学会运用这些工具。
4. 实践：学生动手实践，运用所学知识和技能完成网页美工设计作品。
5. 讨论：分组讨论，分享设计心得和经验，互相学习和交流。
7. 作业布置：布置课后作业，要求学生在下节课前提交网页美工设计作品。
六、教学评估1. 课堂参与度：观察学生在课堂上的积极参与程度，提问和回答问题的积极性。
2. 设计作品：评估学生在实践环节提交的网页美工设计作品的质量，包括色彩搭配、布局、图片处理等方面。
3. 小组讨论：评估学生在小组讨论中的表现，包括分享设计心得、交流经验和合作态度。
七、教学拓展1. 邀请专业网页美工设计师进行讲座，分享实战经验和行业动态。
2. 组织学生参观网页设计公司，了解企业文化和工作流程。
3. 开展网页美工设计比赛，鼓励学生积极参与，提高设计水平。
8.电脑个人网页设计(选修)-人美版九年级美术下册教案
8.电脑个人网页设计（选修）-人美版九年级美术下册教案一、课程内容1.1 课程目标本课程旨在培养学生基本的网页设计技能，包括网页排版与布局、颜色搭配、文字排版等基础知识，以及HTML、CSS等网页设计语言。
通过学习本课程，学生将能够独立设计并制作自己的个人网页，展示个人的兴趣爱好、成就等信息。
1.2 课程大纲1.了解网页设计的基本概念和流程2.学会使用网页设计工具，如Dreamweaver等3.掌握网页排版与布局的基本技巧4.熟悉HTML、CSS等网页设计语言5.设计并制作个人网页，展示个人兴趣爱好、成就等信息二、教学方法本课程采用讲解理论、观摩案例、实践操作等多种教学方法，并通过团队合作、学生自主学习等方式促进学生的学习与交流。
三、教学过程3.1 理论讲解1.介绍网页设计的基本概念和流程，包括网页构成要素、网页设计流程等；2.分析和讲解优秀网页设计案例，引导学生了解优秀网页设计的要素和技巧。
3.2 观摩案例1.教师选取多个优秀网页设计案例，进行展示和讲解；2.学生自选网页设计案例，进行分析和介绍。
3.3 实践操作1.学生在教师的指导下学习网页设计工具，如Dreamweaver等；2.学生根据自己的兴趣爱好和设计理念，开始设计并制作个人网页。
3.4 团队合作1.学生分为小组，相互交流学习和设计idea；2.小组内的学生相互帮助，共同完成设计制作。
四、教学评估4.1 考核方式1.考察学生对网页设计概念和技术的理解；2.考察学生个人网页设计的质量和创意。
4.2 评估方法1.个人网页评选：学生设计制作的个人网页将进行公开展示和评选，教师和同学评选出优秀作品；2.课堂作业：针对每个环节，教师将布置相应的作业，以检验学生的掌握情况。
五、教学资源1.优秀网页设计案例；2.网页设计工具：Dreamweaver等；3.网页设计语言教程：HTML、CSS等。
六、总结通过本课程的学习，学生将能够掌握基本的网页设计技能和语言，并能够设计制作出个人网页。
《网页的制作》教案【优秀3篇】
一、教学目标1、知道站点、主页的概念，能在指定位置建立只有一个网页的站点；2、认识FRONT的界面；3、掌握在主页中插入文字、图片、水平线；4、掌握页面文件与图片的保存。
二、教学重点1、能在指定位置建立只有一个网页的站点（难点）2、能在页面中插入文字、图片、水平线3、掌握页面文件与图片的保存（难点）三、学情分析四、教学方法在教学中，一方面采用比较教学的方法，促进学生知识的迁移；另一方面，提供学生一个导学课件，让学生根据这个网络环境下的课件自己探索学习，以满足不同层次学生的需求。
五、教学过程设计教师活动：1、引入课题：（激发兴趣，活跃气氛）同学们喜不喜欢上网？经常上新浪、西祠胡同等，有没有同学知道新浪、西祠胡同称做什么？（网站）浏览新浪网站，浏览的第一个页面称为什么？（主页）我们还可以浏览其它的页面，点击超链接浏览，当鼠标变成手指的形状时有超链接。
问题1：网站是不是就是网页？用自己的语言描述一下网站的概念（网站包含多个网页，通过超链接把不同的页面链接起来）问题2：网页是不是就是主页？（第一个页面称为主页，网站设计者可以确定哪一个是主页，主页的文件名一般为：index.htm,主页也是网页）设计网站一般必须经过两个步骤，首先是在计算机里做好，然后发布在internet上，让所有的人访问浏览。
今天我们学习用Frontpage建立站点，制作一个主页。
先来研究一下没有发布的网站，打开教师做的网站问：同学们看到了什么？（文件夹）总结：可以这样理解网站：在资源管理器里，网站表现为一个文件夹，里面存放的是所有与网站相关的文件。
打开主页，浏览页面，这是老师做的一个导学课件，将帮助大家完成学习任务。
请学生浏览教师课件，了解学习任务2、新建站点FP的启动问：与word比较，有什么不同？总结：预览窗口：浏览器中出现的效果，与PowerPoint中的“放映幻灯片”类似。
Html窗口：编写HTML（超文本标记语言，它是描述网页内容和外观的标准。
职业院校教师能力大赛：网站页面设计教案
职业院校教师能力大赛：网站页面设计教案一、教学目标1. 知识与技能：了解网站页面设计的基本原则与技巧。
掌握HTML、CSS和JavaScript的基础知识，能够独立完成简单的网页设计。
2. 过程与方法：培养学生的创新思维和审美能力。
学会使用网页设计软件（如Dreamweaver、Photoshop等）进行页面设计。
3. 情感态度与价值观：激发学生对网站页面设计的兴趣，提高职业素养。
培养团队合作精神和沟通技巧。
二、教学内容1. 网站页面设计基本原则页面布局与结构色彩搭配与视觉感受字体与排版2. HTML基础知识基本标签及其作用表格、表单和框架的使用3. CSS样式表选择器与基本语法布局样式与字体样式响应式设计4. JavaScript基础基本语法与数据类型函数与事件处理动态效果实现5. 网页设计软件使用Dreamweaver：页面布局与代码编写Photoshop：图片处理与切图三、教学过程1. 导入：通过展示优秀网站页面案例，引发学生兴趣，引入本节课主题。
2. 讲解与示范：讲解网站页面设计基本原则，展示实际操作过程。
讲解HTML、CSS和JavaScript基础知识，并进行示范。
3. 实践操作：学生分组进行实践，运用所学的知识设计网页。
教师巡回指导，解答学生疑问。
4. 作品展示与评价：学生展示自己的作品，进行互评和教师评价。
针对作品中的优点和不足进行总结和改进。
四、教学资源1. 教材：网站页面设计相关教材或电子资源。
2. 软件：Dreamweaver、Photoshop等网页设计软件。
3. 网络资源：优秀网站页面案例、在线教程等。
五、教学评价1. 学生作品质量：页面布局、色彩搭配、字体排版等方面。
2. 学生参与度：课堂提问、小组讨论、实践操作等方面。
3. 学生创新能力：在作品中体现出的创新思维和独特设计。
4. 团队合作与沟通：小组合作过程中的沟通协作、作品展示与评价等方面的表现。
六、教学策略1. 案例教学：通过分析经典案例，使学生了解和掌握网站页面设计的方法和技巧。
网页教案(div布局)
网页教案(div布局)第一章：HTML基础1.1 学习目标：了解HTML的基本结构掌握如何使用标签来创建网页的基本元素1.2 教学内容：HTML简介：HTML的作用和重要性HTML基本结构：`<!DOCTYPE >`、`<>`、`<head>`、`<body>`标签网页元素：、段落、、图片等标签的使用1.3 教学活动：演示HTML的基本结构及其功能示例：创建一个简单的网页，包含、段落和图片学生练习：创建一个网页，使用HTML的基本元素1.4 作业：完成一个简单的HTML练习，创建一个包含、段落和图片的网页第二章：CSS基础2.1 学习目标：了解CSS的作用和重要性掌握如何使用CSS来样式化网页元素2.2 教学内容：CSS简介：CSS的作用和重要性内联样式：使用`style`属性来添加样式内部样式表：使用`<style>`标签来添加样式外部样式表：使用`.css`文件来添加样式2.3 教学活动：演示CSS的作用和重要性示例：使用内联样式、内部样式表和外部样式表来样式化网页元素学生练习：创建一个简单的网页，使用CSS来样式化、段落和图片2.4 作业：完成一个简单的CSS练习，创建一个包含、段落和图片的网页，并使用CSS来样式化它们第三章：DIV标签3.1 学习目标：了解DIV标签的作用和重要性掌握如何使用DIV标签来创建布局3.2 教学内容：DIV标签简介：DIV的作用和重要性使用`<div>`标签来创建块级元素使用CSS来样式化DIV元素3.3 教学活动：演示DIV标签的作用和重要性示例：使用DIV标签来创建一个简单的布局学生练习：创建一个简单的网页布局，使用DIV标签来创建不同的区域3.4 作业：完成一个简单的DIV标签练习，创建一个包含、段落和图片的网页布局第四章：定位和布局4.1 学习目标：了解定位的作用和重要性掌握如何使用CSS定位技术来对元素进行精确布局4.2 教学内容：定位概述：静态定位、相对定位、绝对定位和固定定位使用`position`属性来设置元素的定位方式使用`top`、`right`、`bottom`和`left`属性来控制元素的位置了解`z-index`属性的作用4.3 教学活动：演示不同定位方式的原理和效果示例：使用定位技术创建一个导航栏布局学生练习：创建一个网页布局，使用定位技术来实现一个水平导航栏4.4 作业：完成一个定位练习，创建一个包含导航栏的网页布局。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
授课时间
第四周2个课时共90分钟
授课题目
使用HTML语言制作框架页面
教学目的与要求：
1、掌握框架的基本结构
2、掌握框架的各种属性
3、掌握框架结构之间的链接
教学基本内容：
1、演示并讲解用框架制作的网页
2、框架的基本结构
3、框架的各种属性
4、框架结构之间的链接
教学重点和难点：
【教学重点】
1、框架的各种属性
1、建站流程
2、网站的定位
3、熟练掌握在网页中添加文字等元素
【教学难点】
1、网站的定位
2、网站风格的设计
教学过程：
向学生演示多个项目：成品站点，分阶段演示和分析此网页的设计流程和过程，在每个阶段演示完毕后，让学生对此阶段进行巩固。讲解完毕后学生完成课后作业，教师实施指导。
第一步：讲解建站的流程。
第二步：讲解市场调查与分析。
2、掌握输入标志教学基本内容：1、源自示并讲解注册网页2、表单标志
3、输入标志
教学重点和难点：
【教学重点】
1、掌握输入标志
2、掌握表单的应用
【教学难点】
1、掌握表单元素的各项属性
2、能独立制作完成常见的各种表单页面
教学过程：
向学生演示多个项目：成品站点，分阶段演示和分析此网页的设计流程和过程，在每个阶段演示完毕后，让学生对此阶段进行巩固。讲解完毕后学生完成课后作业，教师实施指导。
教学重点和难点：
【教学重点】
1、表格的插入
2、单元格的相关操作
【教学难点】
1、表格的插入
2、单元格的相关操作
3、用表格布局制作一个网页
教学过程：
向学生演示多个项目：成品站点，分阶段演示和分析此网页的设计流程和过程，在每个阶段演示完毕后，让学生对此阶段进行巩固。讲解完毕后学生完成课后作业，教师实施指导。
2、练习构思一个网站域名和标志
3、设计一个网站的框架结构
教学后记：
授课时间
第二周 2个学时共90分钟
授课题目
建立一个网站
教学目的与要求：
1、熟练掌握建站流程
2、掌握网站的定位
3、掌握网站风格的设计
4、熟练掌握在网页中添加各元素
教学基本内容：
1、建站流程
2、在网页中添加文字等元素
教学重点和难点：
【教学重点】
参考资料（含参考书、文献等）同上
教学后记：
授课时间
第三周2个课时共90分钟
授课题目
HTML表格与单元格标记的使用
教学目的与要求：
1、掌握表格的插入
2、掌握单元格的相关操作
3、用表格布局制作一个网页
4、表格嵌套与叠加
教学基本内容：
1、演示并讲解用表格布局制作的网页
2、插入表格
3、单元格的相关操作
4、表格嵌套与叠加
第一步：讲解网页设计的基本流程。
第二步：讲解规划网站栏目。
第三步：讲解和演示版面设计。
第四步：讲解和演示网页的色彩搭配。
第五步：讲解和演示网页中的图像，字体和网页中的动画与广告。
第六步：学生分析网页版面局面的方法，教师实施指导。
第七步：课程小结。
第八步：学生完成课程作业。
思考题、讨论题、作业：
1、了解一个网站的基本元素
授课时间
第六周 2个课时
授课题目
CSS样式标记
教学目的与要求：
1、掌握CSS的基本概念
2、掌握CSS样式定义
3、掌握CSS常用属性与值
教学基本内容：
1、演示并讲解CSS的应用
2、CSS的基本概念
3、CSS的特点
4、CSS样式定义
5、CSS常用属性与值
教学重点和难点：
【教学重点】
1、掌握CSS样式定义
2、掌握CSS常用属性与值
【教学难点】
1、掌握CSS样式定义
2、CSS常用属性与值
3、能独立完成CSS样式的应用
教学过程：
向学生演示多个项目：成品站点，分阶段演示和分析此网页的设计流程和过程，在每个阶段演示完毕后，让学生对此阶段进行巩固。讲解完毕后学生完成课后作业，教师实施指导。
第一步：演示并讲解用CSS样式制作的网页。
第一步：演示并讲解注册网页。
第二步：分步演示并讲解、制作表单元素。
第三步：分析并制作网页。
第四步：课程小结。
第五步：学生完成课程作业。
思考题、讨论题、作业：
第一步：演示并分析网页中的相关效果。
第二步：分步讲解并完成网页中效果的实现。
第三步：分组讨论并修改网页。
参考资料（含参考书、文献等）同上
教学后记：
第一步：演示并讲解用表格布局制作的网页。
第二步：分步演示并讲解、制作网页。
第三步：学生分析并制作网页，教师实施指导。
第四步：课程小结。
第五步：学生完成课程作业。
思考题、讨论题、作业：
第一步：演示并分析网页中的相关效果。
第二步：分步讲解并完成网页中效果的实现。
第三步：分组讨论并修改网页。
参考资料（含参考书、文献等）同上
网页设计与制作课程教案
教师姓名
所在系
授课专业
课程代码
总 学 时学分
教材名称
授课时间
第一周 2个学时共90分钟
授课题目
网页设计概述
教学目的与要求：1、对网站及网页有一定的认识，激发学生学习网页设计的兴趣
2、掌握网页的规划栏目
3、掌握网页版面设计和色彩搭配
教学基本内容：
1、网页设计的基本流程
2、网站的规划
教学重点和难点：【教学重点】
1、网页设计的基本流程
2、网页的版面设计
3、网页的色彩搭配
【教学难点】
1、网页的版面设计
2、网页的色彩搭配
教学过程：向学生演示多个项目：成品站点，分阶段演示和分析此网页的设计流程和过程，在每个阶段演示完毕后，让学生对此阶段进行巩固。讲解完毕后学生完成课后作业，教师实施指导。
2、框架结构之间的链接
【教学难点】
1、框架的各种属性
2、框架结构之间的链接
教学过程：
向学生演示多个项目：成品站点，分阶段演示和分析此网页的设计流程和过程，在每个阶段演示完毕后，让学生对此阶段进行巩固。讲解完毕后学生完成课后作业，教师实施指导。
第一步：演示并讲解用框架制作的网页。
第二步：分步演示并讲解、制作网页。
第三步：学生分析并制作网页，教师实施指导。
第四步：课程小结。
第五步：学生完成课程作业。
思考题、讨论题、作业：
1、掌握框架的基本结构
2、掌握框架的各种属性
3、熟练掌握框架结构之间的链接
参考资料（含参考书、文献等）同上
教学后记：
授课时间
第五周2个课时
授课题目
在HTML中表单的设计与制作
教学目的与要求：
1、掌握表单标志
第三步：讲解建站内容。
第四步：讲解功能框架。
第五步：讲解界面设计。
第六步：演示站点框图。
第七步：演示网站截图。
第八步：讲解并演示在网页中添加元素。
第九步：学生完成课程作业。
思考题、讨论题、作业：
1.观摩公司的一个真实网站规划过程
2.理解开发团队的脚色组成
3.理解规划过程规范化的重要性
4.初步理解团队协作