网页设计与制作第三课
网页设计与制作说课稿
新邵职中
16
2．课程教学方法设计
本课程采用任务驱动的教学模式，实施项目化教学方法，
课堂与实训3地．点课一程体教化学。方从法以设下三计个方面展开。
（3）采用“四步曲”的教学流程， 融“教、学、做”于一体
第一步，教师展示示范项目，分析工作任务， 演示操作流程，讲解涉及的理论知识。 第二步，下达实训项目工作任务，提出完成任 务的具体要求和完成时间。 第三步，小组协作学习，完成实训项目。 第四步，项目验收，学生自我评价，教师综合 评价。
《网页设计与制作》 说课
一
课程构思
二
课程设计
三
课程实现
四
课程运作
新邵职中
2
1、课程定位
课程名称
网页设计 与制作
授课对象
计算机专业 学生
课程性质
计算基础机课专业
先学课
F计la算sh机动应画用等
新邵职中
理论
72
实践
108
3
2．课程目标
课程目标包括知识目标和能力目标。Байду номын сангаас
知识目标
☺ 了解WWW、HTTP、HTML、CSS的定 义、概念和作用； ☺ 理解服务器、客户端、浏览器的概念和作 用； ☺ 理解HTML语言中的常见标记及其作用； ☺ 熟练掌握Dreamweaver的基本操作方法； ☺ 理解表格、框架、层的作用，掌握设置其 属性的方法； ☺ 理解CSS样式表的作用和意义，掌握定 义CSS样式的方法； ☺ 理解表单的作用，掌握设置表单元素属性 的方法； ☺ 理解行为的作用，掌握设置行为的方法， ☺ 理解模板和库的作用；
4
3、课程特色
任务驱动
大案例贯穿
学生 主体
《网页设计与制作》课件
# 网页设计与制作
本课程旨在传授网页设计与制作的基础知识和技能。通过课程学习，您将掌 握网页设计的流程、布局原则、交互设计以及网站的维护与发布。
第一章：课程介绍
1 学习目标
明确课程学习目标，了解学习内容和要求。
2 课程安排
详细介绍每个章节的内容安排和学习进度。
3 教学方法
2 标准布局
讲解网页布局设计的基本原则和注意事项。
介绍常用的标准网页布局模式和技巧。
3 自适应布局
பைடு நூலகம்
4 响应式布局
学习如何设计适应不同设备和屏幕尺寸的 网页布局。
解析响应式设计的概念和实现方法。
第四章：网页交互设计
1 交互设计概述
揭示交互设计的重要性和基本原则。
3 交互设计流程
探讨交互设计的典型流程和步骤。
2 常用交互元素
介绍常见的网页交互元素和设计技巧。
4 JavaScript基础
入门级JavaScript语法和常用函数的使用。
第五章：网站维护与发布
1 网站测试与调试
学习进行网站测试、调 试和优化的方法。
2 网站备份与恢复
讲解网站备份和恢复的 重要性和实施步骤。
3 网站发布与维护
指导网站发布和日常维 护的关键要点。
介绍教学方法，包括理论讲解、实践演练和案例分析等。
第二章：网页设计基础
1 网页设计概述
2 HTML基础
介绍网页设计的定义、重要性和发展趋势。
学习HTML标签的使用和基本语法规范。
3 CSS基础
学习CSS样式的定义和常用属性。
4 网页设计流程
简要介绍网页设计的典型流程和步骤。
第三章：网页布局设计
Flash完整课件
第五节、绘图工具的使用
2、椭圆工具和矩形工具 • 用于绘制椭圆、圆形、矩形和正方形 • 修改器中，铅笔右侧的颜色选择按钮口用于
选择边线的颜色，而下面的按钮用于选择所 绘图形的填充色。点击后可以进入调色
第五节、绘图工具的使用
2、椭圆工具和矩形工具 • 用于绘制椭圆、圆形、矩形和正方形 • 修改器中，铅笔右侧的颜色选择按钮口用于
• 按住SHIFT键再选色，会将所选区域的属性应用每一 个相关的绘图工具。
第五节、绘图工具的使用
7、颜料桶工具
• 作用：使用单色、渐进色或位图填色对某一区域进行 填充，但应注意它能作用于线条
• Flash 中 ， 允 许 区 域 在 不 完 全 封 闭 的 状 态 下 进 行 填 充·菜单中所列的选项分别为：不封闭空隙、封闭空隙、 封闭中等空隙、封闭空隙。
第五节、绘图工具的使用
12、文字工具
• 利用文字工具可以： ① 设定字体大小、字样、类型、间距、颜色和排列； ② 字体变形，包括旋转、缩放、倾斜、翻转； ③ 还可以对字符进行编辑，例如可以打散字体制作变形动画 ④ 用Flash还可以实现用户信息的交互性
第五节、绘图工具的使用
12、文字工具
修改器： • 对齐方式调整按钮 • 段落属性调整，可以改变文本到左右边线之间的空白
3. 绘图工具栏：可供图形和文本编辑的各种工具，如选取、喷涂等 4. 标准工具栏：列出了最常用的文件操作、打印、剪贴板、撤销重做等 5. 图库窗口：存放可以重复使用的称为符号的元素。符号类型包括图片、按钮、
《网页设计与制作》课程标准
《网页设计与制作》课程标准适用专业：计算机系各专业学时：72 学分：4编写执笔人：**** 审定负责人：**** 课程编码：一、课程性质本课程是专业学习领域课程，主要培养学生从事网页设计与制作的基本技能，使学生掌握网页设计的概念和方法，能读懂HTML代码，能够运用专业的网页设计工具，使用“DIV+CSS”技术，进行网站规划、建立和维护，具备网页设计岗位的职业技术能力。
本课程前导课程：计算机应用基础、网络应用基础本课程后续课程：动态网站开发二、课程设计思路本课程的设计思路以就业为导向，按照基于工作过程的职业能力来进行课程开发，请计算机各专业有经验的教师对各自专业所涵盖的岗位群进行工作任务和职业能力分析，以此为依据确定本课程的工作任务和课程内容，并参照行业职业标准，以任务引领为课程框架，将课程按递进方式设计成项目，并以项目为单元组织教学，使学生由浅入深，以点到面的全面掌握网页设计的职业技能。
学生通过各项目的系列练习操作，熟练地掌握岗位所需知识和技能，并不断强化，项目体现操作能力和解决问题能力的培养，体现了职业教育“以就业为导向，以能力为本位”的职业教育理念。
同时对教学过程的教学条件、教学模块、教学案例都进行了详细的设计，完成本课程的整体教学内容和教学实施的整体设计，建立了基于网页设计的课程标准。
课程框架结构、学分和学时分配三、课程学习目标总目标：使学生掌握常用的网页设计工具，熟练运用多种网页设计技术，具备Web网页设计、制作及站点管理的基本知识和基本技能，学生能够独立制作中小型的静态网站。
具体目标：（一）教学目标：1.了解HTML代码中各种标记符的作用和应用，以及格式要求；2.了解图像的几种格式：GIF、JPEG、PNG格式，它们各自的特点和差别；3.掌握Dreamweaver操作界面的基本组成、界面组件的操作方法；4.熟练掌握网页元素的各种定位技术，深入理解它们的作用；5.了解轮换图片与影像地图的作用，掌握它们的设计方法6.掌握网页中动态按钮和时间轴动画的创建，以及各种动画元素的插入方法7.了解CSS样式表的作用和意义，熟练掌握其设计方法；8．了解DIV标签的作用，熟练掌握其使用方法；9.了解表单的作用，掌握其使用方法；10.熟练掌握各种链接的作用以及相关操作；11.了解模版和库在网页更新维护中的作用，熟练掌握它们对网站进行管理和更新的方法；12.了解站点的定义、作用，掌握创建定义站点结构的方法；（二）技能教学目标：1.会用HTML语言中的标记制作一个简单的网页；2.会用HTML语言中的标记设置颜色、文本格式和列表；3.熟练利用各种方法在网页中插入文本和图片、设置文本和图片之间的格式；4.会利用Dreamweaver制作轮换图象和影象地图；5.能熟练的在网页中设置各种超链接；6.熟练利用网页元素定位工具设计网页格局；7.熟练利用DIV+CSS设置页面外观；8.会在网页中插入多媒体对象，如：flash、flash按钮；9.会在网页中插入表单，利用表单让用户之间能更好的交流；10.会使用JavaScript脚本程序实现某些网页特效；11.熟练利用模板和库对网页进行更新和维护；12.熟练利用站点对网站进行上传；（三）素质教学目标：1. 提高审美能力，好的网页首先外观要求大方美观，较高的审美能力能帮助自己作出好的网页出来2. 合理的利用技术，在不影响美观或者是尽量不影响的条件下，找到一个接合点做出美观而又实用的网页3. 时时关注软件的新发展，学会应用新的功能，以提高工作效率4. 具有一定的文化素质，让自己的网页增添几分艺术特色，使自己网页设计达到一定的水准5. 作一个生活的有心人，使自己的作品富有生机6.提高学生的合作精神、协调工作能力和组织管理能力四、课程内容与要求项目一认识网页、网站（4学时）教学目标：了解网页设计的基本概念，掌握Dreamweaver工作界面设置，掌握站点的建立和管理，能够根据要求建立和管理站点；掌握进行网页制作的一般步骤。
(完整版)网页设计教学大纲
网页设计教学大纲一、课程性质与任务1、课程性质《网页设计与制作》是中计算机专业开设的一门专业必修课，是计算机类专业的一门实践环节课程，也可以作为其他相关专业的实践课程或选修课，它是一门操作性和实践性很强的职业技术课程。
本课程的主要内容为系统介绍网页编辑与制作软件Dreamweaver cs3，通过这种有代表性的网页制作软件的使用，掌握网站设计的全过程，并能熟练地制作出有专业水准的网站。
2 、课程任务本门课程在专业教学计划中起着十分重要的作用，通过这门课程，学生可以掌握以下技能和知识：* 掌握网站的开发流程，如建站规划、效果图制作、建立站点等相关知识。
* 掌握各种网页元素在Dreamweaver cs3中的使用。
例如表格、文本、图像、超级链接、层和表单等。
* 熟悉一些网页设计辅助软件的功能和使用方法。
例如Flash、Fireworks、Photoshop等。
* 掌握测试和发布网站的方法。
包括网站测试的内容和方法。
* 能够解决一些网页设计中的常见问题。
* 了解ASP开发平台的搭建，Dreamweaver cs3在动态网页制作方面的应用。
二、课程教学目标与要求1、本课程的基本目标（1）使学生通过本课程的学习，掌握Dreamweaver cs3的使用方法，学会使用Dreamweaver cs3制作Web网页的技术。
（2）本课程学习结束后，学生应能自行设计各种网页、开发一定规模的网站，使学生通过本课程的学习，熟练掌握其基本制作方法和技巧，并最终设计一个综合性的网站并且编制简单的脚本上传到互联网上。
2、课程在知识、素质方面的基本要求（1）知识要求深入了解Internet，理解WWW、HTTP、HTML等概念及作用；掌握网站设计和发布的流程。
理解网站维护管理的意义及重要性，理解服务器、客户端、浏览器的概念和作用；了解多种网页制作软件和图像处理软件相结合设计网站的好处。
了解Dreamweaver cs3在动态网站上的应用。
《网页设计与制作》课程标准
《网页设计与制作》课程标准学时数：48学时________________ 课程性质：专业必修课—适用专业：计算机应用专业—一、本课程的性质、地位、作用以及与其它相关课程内容的联系《网页设计与制作》是计算机应用专业的一门专业必修课，是计算机类专业的一门实践环节课程，也可以作为其他相关专业的实践课程或选修课，它是一门操作性和实践性很强的职业技术课程。
本课程的主要内容为系统介绍网页编辑与制作软件Dreamweaver,通过这种有代表性的网页制作软件的使用，掌握网站设计的全过程，并能熟练地制作出有专业水准的网站。
二、课程教学目标本门课程在专业教学计划中起着十分重要的作用，通过这门课程，学生可以掌握以下技能和知识：*掌握网站的开发流程，如建站规划、效果图制作、建立站点等相关知识。
*掌握各种网页元素在DreamWeaVer中的使用。
例如表格、文本、图像、超级链接、层和表单等。
*掌握测试和发布网站的方法。
包括网站测试的内容和方法。
*能够解决一些网页设计中的常见问题。
三、本课程学时安排四、课程教学内容和基本要求（按章节详细阐述）第一章：网页设计概述（一）教学重点和难点重点：Dreamweavercs5的参数设置、Dreamweaver的站点设置。
难点：DreamWeaVer的站点设置。
（二）教学内容和基本要求教学内容：基础知识，初识DreamWeaver,DreamWeaVerCS5的参数设置，设置站点。
基本要求：了解网页设计基本知识；掌握DreanlweaVerCS5的参数设置；熟练掌握Dreamweaver的站点设置。
第二章：表格布局（一）教学重点和难点重点：表格基本操作、表格布局。
难点：表格布局。
（二）教学内容和基本要求教学内容：表格基本操作，表格高级应用，表格布局，网页设计基础。
基本要求：了解表格基本操作、表格高级应用及网页设计基础；掌握表格基本操作；熟练掌握表格布局。
第三章：CSS样式表（一）教学重点和难点重点：CSS样式表应用。
06386网页设计与制作
湖北省高等教育自学考试课程考试大纲课程名称：网页设计与制作课程代码：06386第一部分课程性质与目标一、课程的性质与特点“网页设计与制作”是湖北省高等教育自学考试网络传播专业（专科段）开设的一门专业实践课程。
网页是网络中信息传播的重要载体，是当今网络传播应用的主要形式。
作为网络与新媒体专业的学生只有了解、掌握了网页设计与制作的基本原理、基本操作方法，才能更好进行网络传播的应用与实践。
本课程通过对网页的基本原理、CSS基础、网页页面的布局结构、文本图像与多媒体的使用、页面链接、列表与表格、表单与程序控制制作流程、以及对相关软件的操作掌握后，可以独立完成对网页的制作设计与编辑，从而将新闻等网络信息通过网页展现，更好将网络新闻的采编评与网络传播的网页展现形式结合，充分发挥网络传播的特点。
在网络与新媒体专业学生将来的实际工作中需要经常用到本课程内容中介绍的基本原理和方法。
因此，本课程是该专业学生必须掌握的一门课程。
本课程是本专业及相关专业相关课程进一步学习的基础课程。
二、课程目标和基本要求网页的设计与制作是一门与计算机结合十分紧密的课程。
既需要一定的理论知识，也需要一定的实际操作能力。
通过本课程自学、上机实习、作业等方式的学习，要求学生掌握网页的基本原理、网页制作与设计的基本方法、能操作相关应用软件，最终达到可以独立或者与他人分工合作完成简单和复杂网页的设计与制作。
具体地说，包括以下几个方面：（1）考生了解网页的基本概念、基本结构、制作流程和设计原则等相关基础知识，掌握网站的开发流程，能独立规划和设计网站。
（2）要求考生能熟练掌握多媒体素材在网页制作中的运用。
（3）使考生掌握网页描述语言HTML、CSS的用法，能熟练运用常见的网页标记。
掌握JavaScript 脚本语言程序设计的基础知识，能编写JavaScript脚本创建具有动态效果的网页。
本课程要求学生在自学过程中，特别要加强实践环节，培养动手能力，掌握相关软件的使用方法，要求应试者具备一定的上机能力和实际应用能力。
网页设计与制作课程设计
网页设计与制作课程设计随着科技的飞速发展，互联网已经深入人们的工作、生活中。
网站作为网络的基本单元，已经成为各个领域中不可或缺的一部分。
因此，学习网页设计和制作技能是非常有必要的。
本文档将介绍网页设计与制作课程设计。
课程名称网页设计与制作课程概述本课程主要介绍网页设计与制作的基本知识和技能。
学生将学会使用HTML、CSS和JavaScript等技术开发网站。
在课程中，学生将编写、调试并测试网站的代码，了解并掌握如何创造简洁、美观、易于使用的界面。
课程目标1.掌握网页设计的基本知识和技能，包括HTML、CSS和JavaScript等相关技术2.能够设计和制作简单的网站，包括静态页面和动态页面3.能够熟练使用常见的网页开发工具和调试工具4.能够分析和解决网站开发过程中的常见问题课程内容第一周：HTML基础•学习HTML的基本知识和语法规则•了解HTML标签的基本分类和用法•编写HTML文档，包括文本、图像等第二周：CSS基础•学习CSS的基本知识和语法规则•了解CSS样式的基本分类和用法•能够为网页添加样式第三周：JavaScript基础•学习JavaScript的基本知识和语法规则•了解JavaScript变量、函数和循环等基础概念•能够编写简单的JavaScript代码第四周：网页布局与设计•学习网页布局和设计的基本原则•了解网页设计的基本要素，包括颜色、字体、排版等•能够为网站添加简单的布局和设计第五周：响应式网页设计•学习响应式网页设计的基本概念和原理•了解响应式网页设计的常见技术和工具•能够为网站添加响应式布局第六周：实践项目•结合前面所学的知识，实现一个完整的项目•分析并解决在项目实践过程中出现的问题•熟悉网站开发的整个流程，掌握网站制作的基本方法和技巧授课方式本课程采用面授和实践相结合的教学方式。
面授环节将主要讲授相关的理论知识和技术实践，实践环节将针对每个章节的内容，为学生提供相应的练习项目，并在实践过程中进行指导和解答。
《网页设计与制作》课程说明书
计算机图像处理 专业核心课
学时 /学分 56 /3 授课范围
2010 级本科 1 班、2 班、3 班
授课时间 和地点
周三 1-2 节，11-A507 室（2 班、3 班） 周五 5-6 节，11-A507 室（1 班）
人数 限制 90
课 程 本课程全面讲授使用 HTML 和 CSS 进行网页设计和制作的方法和技巧，包括网页设计基础、网页 简 制作工具、XHTML 基础、CSS 基础、CSS 布局技术和 CSS 高级技术等内容。 介
实验、实习、作业、课外 阅读及参考文献等 内容及时间、地点
实验（一）网页基本元素 周三 3、4 节 计算机基础教学实验室 B-103
实验（二）XHTML 语言 周三 3、4 节 计算机基础教学实验室 B-103
实验（三）CSS 选择器 周三 3、4 节 计算机基础教学实验室 B-103
实验（四）CSS 盒模型 周三 3、4 节 计算机基础教学实验室 B-103
缺席 1/3 学时者，取消考试资格，重修；总成绩不及格者，补考；补考不及格者， 重修；补考或重修时，期末考试占 100%。
备注
1．开学一周内，班长或课代表将其姓名、联络电话、手机以 e-mail 传送给任课 老师。 2．若以 e-mail 与老师联络时，请于主题处注明您的班级、姓名及事由等。 3．修读本课程的同学均应准时到课，若无法准时前来，应有请假条。
第 14 章 表格布局（2 课时） 13.1 表格布局基础 13.2 表格布局实例
第 15 章 浏览器兼容问题（2 课时） 13.1 CSS 过滤器 13.2 IE 常见 bug 修复 网页制作综合训练（2 课时） 第 16 章 网页制作综合训练
实验（六）用 CSS 设置背景样 式 周三 3、4 节 计算机基础教学实验室 B-103
人教版高中信息技术必修三教案全套
人教版高中信息技术必修三教案全套第一节：计算机与信息技术基础教学目标：- 了解计算机硬件组成和工作原理- 掌握计算机的操作方法和常用软件的使用- 了解计算机网络的基本概念和常用网络应用教学内容：1. 计算机硬件组成- 主机和外部设备2. 计算机工作原理- 数据的表示和处理3. 计算机的操作方法- 操作系统的基本操作4. 常用软件的使用- 文字处理软件- 幻灯片制作软件- 电子表格软件5. 计算机网络的基本概念- 局域网和广域网6. 常用网络应用- 电子邮件- 网页浏览教学过程：1. 引入课题，介绍计算机的重要性和应用领域。
2. 分组活动，让学生观察和猜测计算机硬件组成部分。
3. 课堂讲解计算机硬件组成和工作原理。
4. 示范操作系统的基本操作，让学生跟随操作。
5. 分组活动，让学生尝试使用常用软件进行操作实践。
6. 课堂讲解计算机网络的基本概念和常用网络应用。
7. 示范使用电子邮件和浏览网页，让学生跟随实践。
8. 总结本节课的重点内容，布置相关作业。
教学资源：- 计算机硬件实物展示- 操作系统示范视频- 常用软件使用指南- 计算机网络图片和示意图- 电子邮件和网页访问演示视频第二节：数据库与信息管理教学目标：- 了解数据库的基本概念和原理- 掌握数据库操作与查询语言- 理解信息的组织和管理方法教学内容：1. 数据库的基本概念- 数据库和数据表2. 数据库的结构和关系- 主键和外键3. 数据库操作与查询语言- 增删改查操作4. 信息的组织和管理方法- 数据分类和索引教学过程：1. 引入课题，介绍数据库的应用场景和重要性。
2. 讲解数据库的基本概念和结构关系。
3. 示范数据库操作和查询语言的使用，让学生跟随操作。
4. 分组活动，让学生设计和创建一个简单的数据库。
5. 课堂讲解信息的组织和管理方法，例如数据分类和索引。
6. 示范数据分类和索引的实际应用，让学生跟随实践。
7. 总结本节课的重点内容，布置相关作业。
网页设计与制作说课(软件技术-)
七 改革思路
7.1 存在问题 7.2 改革思路
7.1 存在问题
1. ห้องสมุดไป่ตู้师知识结构欠完整，教授网页教师在图形图像处理及动画制作方 面不够熟练
2. 教学资源匮乏，缺少系统的教学及学习资源，教师与学生互动有限 3. 教学内容与市场需求结合不够紧密 4. 侧重技术的掌握，学生美工基础薄弱
7.2 改革思路
4.2 实践教学条件
学生实习实训机房具有一定规模，能够人手一机，满足教学大纲要求 的全部实训内容和选修实训内容。学生上机所需的软件齐备，如： PhotoShop、dreamweaver等。在多年的教学过程中，本课程 已具备了较完整的多媒体教学的条件，有整套的电子教案，案例、习 题等
4.3 师资队伍
知识目标 掌握网页编程基础html相关知识 熟练掌握网页制作软件Dreamweaver 的基本操作和使用技能 熟练掌握在网页中插入文字、图像、Flash动画、背景音乐等元
素并按要求设置属性的方法 掌握建立各种形式超级链接的方法 熟练掌握网页页面布局的各种方法 掌握规划网站的内容结构、目录结构、链接结构的方法 掌握表单网页制作方法 掌握网页特效的制作方法 掌握网站测试的方法
1.3 本课程的教学目标
通过学习《网页设计与制作》课程，学生能够设计制作出布局美观、 链接合理、包含文字、图形、图象、动画、声音、视频等多种媒体信 息并具有一定交互功能的网页；概括说来，该课程教学目标主要集中 在以下几个方面：
赏析各类经典网站、掌握网页制作方法 强化网页制作技能、积累网页制作经验 激发自身学习兴趣、形成持久学习动力 提升自主学习能力、满足职业岗位需求
二 课程设计
2.1 课程设计的理念与思路 2.2 教学内容的选取及依据 2.3 教学模块的分配 2.4 重点难点的确立及解决办法
网页设计与制作(Dreamweaver CS6)教案(第2版 杨杰版)
隆昌市城关职业中学教案隆昌市城关职业中学教案隆昌市城关职业中学教案隆昌市城关职业中学教案隆昌市城关职业中学教案教学过程一、Dreamweaver的工作界面1．工作区切换器设计器：可以弥补编程能力较差带来的缺陷，直观可视，设计和修改简单方便。
编码人员（高级）：用于那些主要用代码来制作网页的用户使用.经典：便于习惯使用之前版本布局模式的设计者使用.双重屏幕：适用于在计算机上有两个显示器的用户。
2．菜单栏提供了10个主菜单项，利用菜单栏基本上能够实现Dreamweaver的所有功能。
菜单项按照功能的不同进行划分，使用户使用方便。
例如，“文件”菜单中包含了对文档操作的命令；“插入”菜单中包含了向网页中插入各种页面元素和创建超链接的命令；“站点”菜单中包含了创建和管理站点的相关命令。
3．文档工具栏和文档窗口“文档”工具栏包含了“文档”窗口视图模式的切换按钮，以及一些与查看文档、在本地和远程站点间传输文档有关的常用命令和选项; “文档”窗口用来显示当前打开的文档，用户在这里进行网页的编辑制作。
4．状态栏5．“属性”面板“属性”面板用于查看和设置当前选定对象（如文本、图像等）的最常用属性。
该面板的内容会根据选择对象的不同而显示不同的属性。
6．面板组Dreamweaver中的面板通常被组织到面板组中，其中的面板以选项卡的形式显示。
单击面板组右上角的“展开面板”或“折叠为图标”按钮，可以展开或折叠面板组。
单击面板标签名称可以切换到该面板，双击标签名称，可以展开或折叠该面板。
拖动面板标签可以在面板组内改变该面板的排列位置，或将面板拖动到另一个面板组的标签处，当出现蓝色突出显示的区域时，释放鼠标可创建新的面板组。
向外拖动面板或面板组可使其变为浮动的状态。
浮动的面板或面板组可以停靠在一个固定的位置，拖动面板或面板组到要停靠位置的边缘，当出现蓝色线时释放鼠标即可。
7．“插入”面板面板包含将各种网页元素插入到文档的快捷按钮。
《网页设计与制作》课程简介
《网页设计与制作》课程简介课程名称：网页设计与制作课程代码：02038适用专业：初等教育（计算机与信息技术方向）课程性质：专业核心课程、必修课、专业技能课学分：3 学分计划学时：72学时（理论36学时，实训36学时）一、前言1. 课程性质本课程是初等教育计算机与信息技术专业的一门专业技能课程，培养学生网页设计与制作能力，适应初等教育对信息技术教师的人才基本要求，同时满足社会对计算机专业人才的需求，适合从事网站建设相关的岗位。
本课程的先修课程是《计算机应用基础》，后续课程是《程序设计》。
在完成《计算机应用基础》课程学习后，学生掌握了计算机基本知识和原理，学会了一些应用软件和工具软件的使用，进而学习《网页设计与制作》这门课程不会感到困难。
在以后学生还将学习《程序设计》课程，能设计和制作动态网页。
2. 课程基本理念初等教育计算机与信息技术专业培养的对象主要是小学信息技术教师，今后从事小学信息技术教学和学校信息化教育教学的管理者及维护者，建设网站和网页是信息技术教师应掌握的基本技能。
课程要理论与实践相结合，培养学生动手能力，能胜任今后小学信息技术教师的工作任务。
同时满足社会对计算机专业人才的需求，适合从事网站建设相关的岗位群。
3. 课程设计思路根据初等教育计算机与信息技术专业人才培养方案，《网页设计与制作》是重要的专业技能课程，是作为小学信息技术教师基本技能训练与考核的项目之一。
课程以工作任务来组织内容，以案例驱动贯穿教学过程。
由浅入深，最后完成主题网站的开发项目。
课程教学中以的使用为主线，要重视语言和样式的讲解和应用。
通过以3—4人为小组完成主题网站的建设，培养沟通能力、合作能力和团队协作能力，为今后的职业生涯打下良好的基础。
二、课程目标1. 总体目标本课程以学生能独立完成静态网站开发和维护的实际工作能力为学习目标，要求学生掌握语言的文档结构和基本标签使用。
能综合应用软件、和技术制作网页，掌握规划、开发、发布和管理静态网站的专业知识和技能。
《网页设计与制作》课程标准
《网页设计与制作》课程标准《网页设计与制作》课程标准前言：《网页设计与制作》是理实一体化课程，是计算机专业（软件与信息服务、数字媒体、计算机应用专业）的一门重要的专业必修课。
本课程定位于WEB技术开发工作岗位。
它是WEB前端技术开发的必备课程，在整个课程体系中具有重要的作用，一、课程的说明：通过本课程的学习，使学生了解网页设计技术的起源和发展、常用的网页制作软件及HTML语言，掌握运用Dreamweaver（以下简称DW）网页制作软件制作网页的方法，通过运用Photoshop图像处理软件和Flash动画制作软件，三个软件互相配合，完成网页设计与制作任务的方法。
为今后从事网页设计与制作、网站开发和管理奠定基础。
在网页设计的实践中重点培养团队协作、沟通交流能力，培养自主学习能力和探索创新能力。
二、课程内容与基本要求：该课程涉及的知识是网页设计人员必备的基本技能，职业活动与课程内容的对应关系如下：网页设计开发岗位职业能力教学内容（理实一体化课）基本开发工具的使用网页基本概念（第1章）DW CS6软件介绍（第2章）建立与管理站点（第3章）网页基本元素的处理制作主要内容为文本的网页（第4章）插入与编辑图像（第5章）插入多媒体元素（第6章）创建超级链接（第7章）HTML基础（第13章）网页布局表格处理与网页布局（第6章）AP Div的应用（第9章）使用CSS+DIV布局网页（第11章）网页美化CSS样式表（第10章）网页交互行为（第12章）动态网页基础（第15章）网页及元素的复用创建和使用模板（第9章）创建和使用库（第10章）网页与网站基本概念、网页基本组成元素、常用网页制作软件主要教学内容：1.1 网页制作基础知识1.2 网页的基本构成元素1.3 网页制作常用软件和技术第二章Dreamweaver CS6轻松入门（2学时）教学目标：DW CS6软件的安装、用DW建立网页的方法、打开和保存网页的方法主要教学内容：2.1 Dreamweaver CS6工作环境2.2 [插入]栏2.3 Dreamweaver CS6新功能第三章站点的搭建与管理（4学时）教学目标：本地站点与远程站点的概念、站点文件夹的管理主要教学内容：3.1 创建本地站点3.2 管理点站3.3 管理站点中的文件4.3 使用站点地图第四章网站建设规范和基本流程（2学时）教学目标：IIS信息服务器的搭建与管理、建立、发布主页、建立和管理站点主要教学内容：4.1 网站建设规范4.2 网站建设的基本流程第五章创建结构清晰的文本网页（6学时）教学目标：1. 在网页中添加文字和字符2. 使用背景、列表美化文本网页主要教学内容：5.1 设置文本属性5.2 插入其他元素5.3 创建项目列表和编号列表5.4 插入网页头部内容5.5 综合案例-创建基本文本网页第六章创建绚丽多彩的图像和多媒体网页（6学时）教学目标：1. 了解网页中常用的图像格式2. 网页中插入图像的方法3. 网页中插入多媒体的方法主要教学内容：6.1 网页中常用的图像格式6.2 编辑图像6.3 插入多媒体6.4 综合案例-创建图文混排网页第七章创建超级链接（6学时）教学目标：超级链接的概念、文字与网页间的链接、图片热点和锚记主要教学内容：7.1 超级链接的基本概念7.2 创建超级链接的方法7.3 创建各种类型的链接7.4 管理超链接7.5 综合实例第八章使用表格排版网页（6学时）教学目标：1. 表格的编辑处理2. 用表格制作网页元素主要教学内容：8.1 创建表格8.2 设置表格及其元素属性8.3 表格的基础操作8.4 表格的基本应用8.5 综合实例-利用表格排版网页第九章使用DIV和Spry灵活布局网页（4学时）教学目标：1. AP Div的创建2. 在AP Div中插入网页元素3. 设置AP Div的属性主要教学内容：9.1 插入AP Div9.2 设置AP Div属性9.3 使用Spry布局对象第十章使用CSS修饰美化网页（6学时）教学目标：1、CSS样式表的类型2、CSS样式表的创建3、不同样式表的样式应用主要教学内容：10.1 CSS简介10.2 使用CSS10.3 设置CSS样式10.4 CSS滤镜设计特效文字10.5 综合实例第11章CSS+DIV布局方法（6学时）教学目标：盒子模型概念、CSS布局理念、常见布局类型主要教学内容：11.1 初识DIV11.2 CSS定位11.3 CSS布局理念11.4 常见的布局类型第12章使用模板和库提高网页制作效率（6学）教学目标：了解模型的库的概念，会使用库创建项目主要教学内容：12.1 创建模板12.2 使用模板12.3 管理模板12.4 创建和应用库项目第13章使用行为和动作为网页添加活力（6学时）教学目标：重点区分行为、触发事件、动作、对象等概念和区别主要教学内容：13.1 行为的概念13.2 行为的动作和事件13.3 使用Dreamweaver内置行为第14章网站页面布局设计与色彩搭配（2学时）教学目标：网页色彩搭配知识、常见页面版式主要教学内容：14.1 网页版面布局设计14.2 常见版面布局形式14.3 网页色彩搭配知识第15章用表单创建交互式网页（6学时）教学目标：表单的基本概念、常用表单元素的插入方法主要教学内容：15.1 表单概述15.2 创建表单域15.3 插入文本域15.4 复选框和单选按钮15.5 列表和菜单15.6 跳转菜单的使用15.7 使用按钮激活表单15.8 使用隐藏域和文件域15.9 综合案例五、课程实施条件本课程需要一间高性能联网的计算机实训室，需满足每位学生一台电脑。
第三章 文字与段落
第三章文字与段落1 文字内容1.1 添加文字文字是网页的基础部分，可以通过一些HTML标记实现对文字的格式化。
在HTML文件中，添加文字内容的方式与在word、记事本等中添加文字的方式相同，在需要输入文字的地方输入即可，但是需要添加在<body>与</body>标记之间。
具体内容包括浏览器中要显示的文字、空格符、特殊符号以及注释语句。
一个网页中添加文字的实例1.html：<html><head><title>在网页中添加文字</title></head><body>网页设计与制作基础</body></html>网页效果如图3-1所示。
图3-1在网页中添加文字1.2标题字标题字，就是以几种固定的字号去显示文字。
在HTML中，定义了六级标题，从一级到六级，每级标题的字体大小依次递减。
格式：<h# align="left|center|right">标题文字</h#>✓标题标记本身具有换行的作用，标题总是从新的一行开始。
✓#用来指定标题文字的大小，#取1～6的整数值，取1时文字最大，取6时文字最小。
✓align设置标题字的对齐属性。
一个网页中添加标题字的实例2.html：<html><head><title>在网页中添加标题字</title></head><body><h1 align="center">一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4 align=left >四级标题</h4><h5 align=center>五级标题</h5><h6 align=right>六级标题</h6></body></html>网页效果如图3-2所示。
网页设计与制作教学大纲
《网页设计与制作》教学大纲第一部分大纲说明一、课程的性质和任务：《网页设计与制作》是一门操作性和实践性很强的课程,为网络专业和计算机相关专业的必修课。
本课程的主要内容包括了网页编辑与制作软件Dreamweaver MX建站的全过程。
教材体现网页制作技术的的特点，注重实用性和操作性,综合讲述了网页制作中的网页编辑、Web图像制作以及网页中动画设计的基本概念和基本操作技能。
书中文字叙述简单明了、通俗易懂。
按照Macromidia公司出品的网页制作系列软件的系统内容，由浅入深、循序渐进，符合学习者的认知规律。
书中列举了部分实例，各章都编排了适量的习题、思考题，以使学生更好地理解和掌握书中所讲述的内容。
二、培养目标：结业后能独立完成公司或个人主页的制作、维护、站点管理、设计制作精美的网页，能够更好地把企业通过互联网推向全球，并通过考试可获得网页设计师相关证书。
三、授课对象：高职高专类网络专业和计算机相关专业四、课程的特点和教学基本要求课程在重点介绍网页设计软件Dreamweaver MX的操作与应用的基础上，通过大量实例和光盘教学素材，详细地阐述了网页设计软件的应用技巧，使学生在学习过程中得以融会贯通，掌握网页设计软件的高级应用。
同时，授课过程中将始终遵循“用户界面感受第一”的基本原则，教导学生在策划、设计过程中设身处地为用户着想，让创意为用户服务，培养学生独立思考、独立创作的良好学习习惯，为学生成为一名优秀的网页设计师打下坚实的基础。
课程设置的根本思路是为使学生能够最大程度满足企业对于网页设计人员的需求，达到学以致用的目的，从而为企业培养优秀的网页设计实用人才。
五、课程教学要求的层次1、掌握：在网页文档中添加文本和文本的格式化方法、插入日期和时间、插入水平线、设置网页的属性等操作方法。
在Dreamweaver MX中使用的图像格式、在网页文档中插入图像、为页面背景添加图像、图像属性的设置、图像与文本的混合排版、设置图像的位置和边框、设置图像的缩略图的操作方法，会使用图像编辑器，会在网页中插入翻转图像和导航条的操作、表格的组成和基本操作方法及创建表格、表格操作、表格编辑的方法、表格和单元格的属性设置，会用表格组织网页的总体布局，掌握使用布局视图布局页面的总体布局。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
【操作演示】：
把名为“背景图片”的图片作为背景图片插入到一个网页中，并
设置“垂直 重复”的重复方式。
四 、插入图像
1.插入→图像 2.插入面板→常用→图像
3.直接将图像文件拖入编辑区
注意： 1.在插入图像前应先将网页文件已保存，从而使所插图像引用正确。
2.图像插入网页后，应确定图像文件已存入站点，否则在下次打开网
件夹下。
三 、为网页设置背景图像
为网页设置的背景图像不会影响网页的内容。
页面属性——分类——外观（css）——背景图像，点击浏览，选 择背景图像。 图像的尺寸如果比网页内容小，就需要选择“重复”的方式： no-repeat：不重复。图像不会重复。 repeat：重复。图像在水平和垂直方向上都重复。 repeat-x:重复x。图像只在水平方向上重复。 repeat-y：重复y。图像只在垂直方向上重复。
网页设计与制作
第三课：在网页中添加图片
一 、网页中常用的图片格式
使用图片的原则：
在保证画质的前提下尽可能使图片的数据量小一些，
这样有利用户快速的浏览我们的网页。
一 、网页中常用的图片格式
.GIF格式
特点：它的图片数据量小，可以带有动画信息，且可以透明背景显示，但最
高只支持256种颜色。 用途：大量用于网站的图标Logo、广告条Banner及网页背景图像。但由于受
“插入鼠标经过图像对话框”。 c设置完成，单击确定。
操作演示】：
制作如图的一个名为“网页导航条”的网页。
The end,thank you!
页时，会出现看不到图像的情况。
五、设置图像的属性
• • • • • •
图像→设置的名称
• 对齐→在一行中图形和文本的对齐方式 • 锐化 • 对比度/亮度
宽、高→可缩小和放大图片的显示尺寸。 • 裁切 源文件→图片的路径和名称。 替代→图像的说明文字 边框→图片是否要加边框 垂直边距和水平边距→图片四周突出的 尺寸
二 、如何获取网页图像
1.网上下载（我要素材网 ，图片）、2.自己拍摄获得、
3.购买素材光盘、
4.使用图像制作张为jpg图片，一张为gif动态图片），保存到个人站点下图片文
到颜色的显示，不适合用于照片级的网页图像。
.JPEG格式
特点：可以高效地压缩图片的数据量。使图片文件变小的同时基本不丢失颜
色画质。
用途：通常用于显示照片等颜色丰富的精美图像。
一 、网页中常用的图片格式
.PNG格式
特点：是一种逐步流行的网络图像格式。既融合了GIF能做成透明背景的特 点，又具有JPEG处理精美图像的优点。 用途：常用于制作网页效果图。
• 重新采样：当图片的宽、高缩小后，重
新生成更小的图片。 • 优化（为图片瘦身）
【操作演示】：
制作如图的一个名为“公司简介”的网页。
六、鼠标经过更换图片特效
概念：是指在页面中先显示一张图像，当鼠标移动到该图像上时，图像
切换成另一张图像。
步骤： a 将光标放到要插入图像的地方。
b单击菜单“插入记录”---->“图像对象”--“鼠标经过图像”，打开