教 案（首页）
课程 网页设计与制作 名称 学 分 课程编号 050420117 2 总计：32 学时 讲课：16 学时 类别 必修课（ ）选修课（） 理论课（ ）实验课（ ） 实验：16 学时 任课 教师 授课 专业班级：2007级工业设计（本）班 共 1 个班 对象 基本 教材 基本教材：《Dreamweaver CS3+HTML超炫网页设计与制作》胡菘.中国青年出版社 和主 参考资料：《精通CSS+DIV网页样式与布局》前沿科技 曾顺 编著.人民邮电出版社 要参 考资 料 本课程是非计算机专业的专业选修课。通过该课程的学习，引导学生 教学 目的 要求 了解网页、网站、主页和WWW服务器的基本概念，熟悉建立网站以及发布网站的步骤和过程；掌握使用可视化网页制作工具Dreamweaver建立网站、制作网页的方法；能够收集制作网页的多媒体素材，熟悉基本的图像处理和动画制作技术；掌握使用HTML语言的基本知识等。 依据“项目导向、案例驱动、突出实践、关注过程”的教学理念，通过项目和案例，介绍Dreamweaver文本、图片、表格、层、超链接、表单、CSS以及行为和事件的使用方法，最终完成一个专题网站的设计与制作。 教学 了解网页制作和网站建设所需的基本知识，理解HTML语言和CSS样式个属 性以及网页设计工具软件Dreamweaver和Photoshop的使用及应用，掌握网页重点 制作和网站建设所需的基本技能。能够根据任务需求建立客户端的的静态网 页和网站。 难点 《网页制作实用教程》张淑清主编.人民邮电出版社． 《网页制作循序渐进教程》龙腾科技 编著．兵器工业出版社 职称 讲师 上机： 学时
1 / 28
2 / 28
网页设计与制作 课程教案
授课时间 第 6 周 星期 一 第 1-2 节 课次 1 2课时 授课方式 课时 理论课 讨论课□ 实验课□ 习题课□ 其他□ （请打√） 安排 授课题目（教学章、节或主题）： 第一章 网页设计概述 教学目的、要求（分掌握、熟悉、了解三个层次）： 重点讲授网站，网页涉及的概念；了解网页设计涉及的相关概念；了解网页设计的语言HTML；掌握学习网页设计的某一种工具；理解网站和网页的关系。 教学重点及难点： 重点：理解网站和网页的关系； 难点：HTML语言设计，网站和网页的关系。 教 学 基 本 内 容 方法及手段 第一章 网页设计概述 1. 网络的概念 1.1 Internet概述 Internet是相互连接的网络集合。网络协议是网络中的设备进行通信时共同遵循的一套规则，即以何种方法获得所需的信息。 1.2 WWW WWW(World Wide Web)简称为万维网，客户端只要通过“浏览器”（Browser）就可以非常方便地访问internet上的服务器端，迅速地获得所需的信息。 利用多媒体系统播放教学ppt； 1.3 域名与IP地址 在Internet上的每台网络设备都要有一个唯一的地址才能被访问到，这个地址就是IP地址。IP地址是由32位的二进制数值构成，分成4组，转化为十进制用点分隔，比如：202.100.4.11。域名系统是一个分层的树状结构组织。域名的书写格式为：叶节点名.二级域名.顶级域名 2．网站与网页的概念 构建WWW的基本单位是网页。网页中包含所谓的“超链接”，通过已经定义好的关键字和图形，只要用鼠标轻轻一点，就可以自动跳转到相应的其它文件，获得相应的信息，从而实现网页之间的链接，从而构成了WWW的纵横交织的网状结构。通过超链接连接起来的一系列逻辑上可以视为一个整体的页面，则叫做网站。 利用投影仪进行课堂操作演示。 3．相关知识 3.1 网页制作工具 3.1.1 网页编辑工具 网页编辑工具主要分为标记型和所见即所得型。所见即所得型的编辑软件主要有：微软的FrontPage和Macromedia公司推出的Dreamweaver。 3 / 28
网页设计与制作 课程教案（续）
教 学 基 本 内 容 3.1.2 图形和图像处理工具 方法及手段 目前常用的图形和图像处理工具主要是Adobe公司出品的著名的图形图像处理软件：Photoshop和Macromedia公司推出的Fireworks。 3.1.3 动画制作工具 利用多媒体系统播放教学ppt； 目前常用的是Macromedia公司推出的Flash。 3.2 HTML语言 3.2.1 HTML语法结构 HTML文件的所有控制语句称为标签，标签在一对尖括号之间，格式如下： <标签>HTML语言元素 3.2.2 常见的HTML标签 利用投影仪进行课堂操作演示。 见讲义内容 4. 网页设计师必备的专业素质 见讲义内容 小结： 通过对网站网页设计中涉及到的基本概念解释，帮助学生理解掌握网页设计的要求，区别网站与网页的关系，增强学生网页制作的素质培养。 作业和思考题： （1）网页与网站有何不同？请举例说明。 （2）网页构成的基本元素是什么？ （3）说出自己熟悉的3个网页，并试分析它的归类。 教学后记： 4 / 28
网页设计与制作 课程教案
授课时间 第 6 周 星期 一 第 3 节 课次 1 1 课时 授课方式 课时 理论课 讨论课□ 实验课□ 习题课□ 其他□ （请打√） 安排 授课题目（教学章、节或主题）： 第二章 网页赏析 教学目的、要求（分掌握、熟悉、了解三个层次）： 初步了解网页赏析要求；理解网页赏析的理论要求；掌握网页突破性设计的要素；分清各类网站的设计要求和框架；理解实例分析过程。 教学重点及难点： 重点：网页的布局结构；网页的色彩搭配。 难点：如何使学生对网页设计感兴趣。 教 学 基 本 内 容 方法及手段 教师讲授为主，学生讨论为辅。 第二章 网页赏析 1. 网页设计与网站主题 网页设计与网站主题之间的关系归纳起来有三点，第一，设计应满足主题的要求，应该为主题服务；第二，设计使艺术和技术交融，应该是艺术和技术的完美结合。就是说，在保证“美”的前提下，不丧失网站的“功能”；第三，无论是“美”，还是“功能”，都是为了更好地表达网站的主题思想。 利用多媒体系网页设计的优秀与否，取决于设计师对主题的理解与掌握程度，好的页面设计肯定是统播放教学ppt； 服从于网站主题，鲜明地突出网站的诉求主题。要使网页从形式上获得良好的诱导力，可以通过对网页的空间层次、主从关系、视觉秩序以及彼此之间的逻辑性来把握运用。 2. 各类网站的设计总体框架 （1）门户类网站（2）产品类网站 （3）娱乐类网站（4）游戏类网站 （5）时尚类网站（6）音乐类网站 （7）杂志类网站（8）传记类网站 （9）个人类网站 利用投影仪进行课堂操作演示。 5 / 28
网页设计与制作 课程教案（续）
教 学 基 本 内 容 3. 网页颜色的使用风格 色彩是自然美、生活美、艺术美的重要组成部分。它代表着情感（绿色代表生命，红色代表热情，白色代表纯洁，蓝色代表深邃），代表着生活。没有色彩的世界是死寂而平淡的。 在主题明确的前提下，网页可以用丰富的色彩来烘托主题，让浏览者耳目一新的感觉。给人清新，如坐春风，吃人生果，让人感觉身上三万六千个毛孔都渗透着激情。利用多媒体系统播但多变的色彩不要干扰了浏览者的易读，不可以浓妆艳抹，脱离主题。 方法及手段 放教学ppt； 4. 网页赏析 举例说明各个网站的特点。 （1）北京2008奥运会 （2）百度搜索 （3）HAO123网站 （4）Pixar动画工作室 （5）故宫博物院 （6）中国黑客联盟 （7）柯达相机 （8）百威啤酒 （9）Rabbit游戏 利用投影仪进行课堂操作演示。 小结： 在实际应用中网页应当在满足完成功能的前提下才能讲究艺术，如果一帧页面无法完成其基本的表现或操作功能，则这样的页面再“美”也是无用的，因为网页的艺术性、欣赏性是服务于功能的。了解了网页界面的设计技术和方法，并将其融入自己的思想，消化理解，构成自己认识世界、认识设计的较完整的思维理念，才能有根有据、有凭有证，由里及表、由表及里地评测、鉴赏和判断设计作品的优劣。 作业和思考题： 1.怎样保证网页界面设计主题的鲜明性？ 2.网页界面设计使用色彩的作用是什么？色彩主要用来完成哪些工作？ 3.打开互联网，选择一个网站，根据所学知识分析、评测之。 教学后记： 6 / 28
网页设计与制作 课程教案
授课时间 第 6 周 星期 一 第 4 节 课次 1 1 课时 授课方式 课时 理论课 讨论课□ 实验课□ 习题课□ 其他□ （请打√） 安排 授课题目（教学章、节或主题）： 第三章 网页规划与布局 教学目的、要求（分掌握、熟悉、了解三个层次）： 了解网页的组织结构，掌握网页内容上的组织方法；熟悉网页设计的流程和注意事项；熟悉网站设计，掌握网站与网页的区别。 教学重点及难点： 重点：网页规划原则，网站规划及其步骤； 难点：网页规划和合理布局。 教 学 基 本 内 容 方法及手段 教师讲授为主，学生讨论为辅。 第三章 网页规划与布局 3.1 网页的组织结构 网页的内容和组织取决于网站的主题和定位。确定了网站的定位和模式，就可以对网页的内容进行组织、规划和布局。 3.1.1首页的结构 首页一般包含主题、徽标、企业精神、经营理念、旗帜广告、首页链接、最新报道、联系方式、招贤纳士和栏目简介等。 利用多媒体系统播放教学3.1.2一般页面的结构 一般页面也称子页面，其结构往往是依据要表现的内容而定，形式比较单一。页面的ppt； 3.1.3网站页面的组织结构 一般来说，设计网站常常采用顺序结构、层次结构、网状结构或复合结构来组织页面。 主题突出，取向性强，主要用于描述同一类事情。 3.2 网页内容上的组织 利用投影仪进3.2.1 综述 行课堂操作演建设网站的第一步是收集资料，分门别类，将这些素材合理地分配到由超级连接组织示。 的不同的网页中，使得自己的网页能够吸引众多的浏览者，网页的内容的有效组织是必不可少的。 3.2.2 组织网页的方法 1.突出个性；2.具有可读性；3.完整性强；4.布局合理；5.重要信息放置在首页。 3.3 网页设计流程 3.3.1 综述 7 / 28
网页设计与制作 课程教案（续）
教师讲授为主，学网站包含着众多内容各异，错综复杂的网页，这些网页的内容组织，材料收集和生讨论为辅。 处理工作通常可以从两个方面入手。一是根据所需发布的信息确定主题，每个主题由专人负责收集相关资料和内容。二是组织、精选一些能突出本网页特色的内容，烘托和突出主题，使本页面与网站其他网页有明显的不同。 教 学 基 本 内 容 3.3.2 网页目标和风格 方法及手段 3.3.3 内容组织 网站内容丰富，信息含量大，应该运用一定的方式将其条理化，同时在一定程度上加以归纳后重复利用，使网页较为整齐，脉络清楚，读起来也有重点。 3.3.4 页面的组织原则 将页面含盖内容的整体布局的需要进行分组归纳，进行内在联系的组织排列，反复推敲标题图形与整体版面的关系，创造秩序使版面各元素成为丰富多彩而简洁统一整体。 利用多媒体系统播放教学ppt； 3.3.5 网页制作 见讲义内容 利用投影仪进行课当所有网站页面制作完成之后，我们需要对每一帧页面进行审查和测试，测试内堂操作演示。 容主要包括功能性测试和完整性测试两个方面。 3.3.6 测试 3.3.7 发布、推广 整个网站设计、测试完成以后，就可以去寻找ISP(Internet Service Provider，互联网服务提供商)，将网站的所有内容上载到互联网上。载后的网站往往希望大量的浏览者访问，提高自身的知名度，提升网站所有者的形象。我们可以尝试使用推广的方法。 3.3.8 反馈、评测 网页设计的优劣是通过浏览者的认可而得出的，我们可以使用计数器、计时器、留言板、调查表以及有奖问答等形式收集数据，分析网站或某个网页被访问的次数或浏览者停留的时间，评测网页的设计或内容的新颖程度。 小结： 设计出达到用户目的的网页，吸引尽可能多的人参观访问是一个值得研究的课题材。一定要注重信息的调整、更新和修改，使网页内容始终处于一个不断发展，日趋完善的动态环境中。能够吸引大量的浏览者访问网站只是成功的一半，若以新奇的版式、独特的内容和服务使浏览者再度来访，或向其他人介绍网址，宣传网站的内容，才可能是真正的成功。 作业和思考题： 1. 首页一般包含哪些内容？企业网站的首页主要应该突出哪些方面？ 2. 网站的页面之间通常采用什么样的组织结构？ 3. 网状结构有何优、缺点？用什么方法解决。 教学后记： 8 / 28
网页设计与制作 课程教案
授课时间 第 6 周 星期 三 第 1 节 课次 2 1 课时 授课方式 课时 理论课 讨论课□ 实验课□ 习题课□ 其他□ （请打√） 安排 授课题目（教学章、节或主题）： 第四章 网页设计创意 教学目的、要求（分掌握、熟悉、了解三个层次）： 1. 通过对创意思维及创意手法的讲解，辅以对优秀网页作品的分析，启发学生全面的创新思维，进而从多角度的思维中独树一帜，培养学生的个性化意识。 2. 让学生对优秀设计的创意进行解读和阐释，并分析其创新之处，鼓励学生敢于发掘新意，提出自己独到的见解。 教学重点及难点： 启发学生全面的创新思维，培养学生的个性化意识。 如何掌握不同性质网页的创意设计技巧。 教 学 基 本 内 容 方法及手段 教师讲授为主，学生讨论为辅。 第四章 网页设计创意 4.1 网页创意设计中的基本要素 4.1.1 网页中的文字 字体的设计方法： (1) 改变文字大小、比例 (2) 改变字体形态 (3) 文字的三维效果 (4) 色彩的改变 (5) 机理及质地 (6) 置换及同构 文字的组合方法与形式 (1) 字体的大小组合 (2) 汉字与拉丁字母的组合 (3) 汉字与具象形体的组合 (4) 文字编排的形式 利用多媒体系统播放教学ppt； 利用投影仪进行课堂操作演示。 4.1.2 网页中的图像 图像在网页中所占比例的大小直接影响整个页面的视觉效果和情感表达。面积大的图像在画面中占的份量重，表达情感直接。容易吸引浏览者的注意。面积小的图像通常在页面中作点缀和呼应，表达情感含蓄，给人精巧细致的感觉。 9 / 28
网页设计与制作 课程教案（续）
教 学 基 本 内 容 4.1.3 网页设计中色彩的属性及其应用 设计精良的网站总有其色调构成的总体倾向,以一种颜色或几种临近颜色为主导,使全呈现在某种和谐、统一的色彩倾向，如同人穿衣服。要想恰如其分的表现网页中的内容，在竞争对手脱颖而出的，信息空间的构造也需要恰如其分的包装和表达。 方法及手段 教师讲授为主，学生讨论为辅。 4.2 网页创意设计的程序 4.2.1 前期策划 (1) 明确设计任务 (2) 调查研究与分析 (3) 创意开发 (4) 修改及定案 利用多媒体系统播放教学ppt； 4.2.2后期更新及维护 网站中随着新信息的加入,老信息的删除,要不断的对网页进行更新并维护,使其能始终正常运行。 利用投影仪进行课堂操作演示。 小结： 通过对创意方法和创意步骤的了解，使学生掌握创意元素的搭配及创意的技巧。从而增强学生欣赏美和创造美的能力，创作出优秀的、具有吸引力的作品。 作业和思考题： 1.简述图形图象的创意技巧。 2简述色彩的性格对突出网页设计主题的作用。 3.什么是创新性思维？ 教学后记： 10 / 28
网页设计与制作 课程教案
授课时间 第 6 周 星期 三 第2-4节 课次 2 3 课时 授课方式 课时 理论课 讨论课□ 实验课□ 习题课□ 其他□ （请打√） 安排 授课题目（教学章、节或主题）： 第五章 网页编程语言 5.1 HTML 教学目的、要求（分掌握、熟悉、了解三个层次）： 理解HTML语言中的各种文本格式、字符格式、段落设置、列表标记的作用；会用HTML语言中的标记设置颜色、文本格式和列表；掌握HTML的语法结构，掌握HTML语言中标记的使用方法；理解表格、框架、表单的作用。 教学重点及难点： HTML语言的语法、HTML语言中7类常见的标记的作用与应用； 教 学 基 本 内 容 方法及手段 教师讲授为主，学生讨论为辅。 第五章 网页编程语言 5.1 HTML 5.1.1 HTML的基本结构 文本标记语言结构简单，语法较松散，易学易用。它是一种文字处理语言，而不是“程序”语言。超文本文档分文档头和文档体两部分，在文档头里，对利用多媒体系统播放教学（HTML的版本声明）是超文本标记语言的附加标记，放在HTML文档的第一行。 ppt； 这个文档进行了一些必要的定义，文档体中才是要显示的各种文档信息。序5.1.2 HTML语言的语法 HTML是标准通用标记语言(Standard Generalized Markup Language，SGML)的一个子集，是标记的集合。一般标记是由一个起始标记(Opening Tag)和一个结束标记(Ending Tag)所组成，其语法为：
网页设计与制作 课程教案（续）
教 学 基 本 内 容 标记之中还可以附加一些属性(Attribute)，用来完成某些特殊效果或功能。例如： 网页设计与制作 课程教案 授课时间 第 7 周 星期 一 第1-2节 课次 3 2 课时 授课方式 课时 理论课□ 讨论课□ 实验课 习题课□ 其他□ （请打√） 安排 授课题目（教学章、节或主题）： 实验项目一 用HTML制作简单网页 教学目的、要求（分掌握、熟悉、了解三个层次）： 掌握HTML文档的基本结构、标记和标记属性的概念及作用；学会使用文本编辑软件建立和编辑HTML文档的方法；能够使用标记在网页中插入和编辑基本的网页元素；能够利用表格标记建立和编辑表格，学会在表格中使用其他网页元素。 教学重点及难点： 重点：使用标记在网页中插入和编辑基本的网页元素； 难点：建立和编辑表格，学会在表格中使用其他网页元素。 教 学 基 本 内 容 方法及手段 实验项目一 用HTML制作简单网页 【学习目的】 重点讲解了文本的修饰、插入图像、超链接的建立这三部分，通过学习，学生应掌握如何向网页中添加文本、插入图像并建立超链接等内容。 一、案例导入：西部旅游网 该网站实例包含了若干个网页，在网页中添加文本、插入图像、建立超链接，涉及到的知识点有以下几点： 页面属性的设置及文本的修饰； 插入图像，插入图像对象实现特效； 多个网页之间建立超链接。 二、页面属性的设置 选择“修改”菜单｜“页面属性”命令，弹出“页面属性”对话框。设置相应的参数。 三、文本的修饰 １、输入文本 2、插入水平线 3、文本特殊格式：上标和下标 4、文本属性的设置 5、段落格式的设置 6、列表格式的设置 7、滚动文本 教师讲授，学生边学边练。 利用投影仪进行课堂操作演示。 13 / 28 网页设计与制作 课程教案（续） 教 学 基 本 内 容 四、设置超级链接 1、URL地址 2、超链接的分类 方法及手段 教师讲授为主，学生讨论为辅。 • • • • 页面链接 锚记链接 空链接 电子邮件链接 3、选择链接目标 五、使用图像 图像是网页中非常重要的元素，网页中添加精致、美观的图像，会使网页变得丰富多彩。在插入图像时，首先要考虑图像在页面中的整体效果，其次应综合考虑图像的质量和下载速度。目前网页中支持的图像格式有以下三种： Gif：索引颜色格式，最多支持256色，为无损压缩，有透明处理的功能，支持动画效果。 Jpg：联合图像专家组，有较高的压缩比，属有损压缩，要选择合适的压缩品质，支持真色彩。 Png：可移植网络图形，是专门针对Web开发的无损压缩图像，支持真色彩和透明处理。 1、插入图像 2、设置图像属性 3、制作图像映射 利用多媒体系统播放教学ppt； 利用投影仪进行课堂操作演示。 小结： 重点讲解了文本的修饰、插入图像、超链接的建立这三部分，通过学习，学生应掌握如何向网页中添加文本、插入图像并建立超链接等内容。 作业和思考题： 运用HTML语言制作一个简单的静态网页。 教学后记： 14 / 28 网页设计与制作 课程教案 授课时间 第 7 周 星期 一 第3-4节 课次 3 2 课时 授课方式 课时 理论课 讨论课□ 实验课□ 习题课□ 其他□ （请打√） 安排 授课题目（教学章、节或主题）： 第五章 网页编程语言 5.2 CSS层叠样式表 教学目的、要求（分掌握、熟悉、了解三个层次）： 了解CSS的定义、概念和作用；理解CSS样式表的作用和意义；掌握CSS样式表的结构；掌握在网页中添加CSS的方法。掌握三种添加样式信息的方法，会使用CSS设置网页格式和列表的格式。 教学重点及难点： CSS样式表的功能、CSS样式表中的样式规则与选择器。 教 学 基 本 内 容 方法及手段 教师讲授为主，学生讨论为辅。 第五章 网页编程语言 5.2 CSS层叠样式表 5.2.1 层叠样式表简介 CSS样式表是由一系列样式选择器和CSS属性组成，它支持字体属性、颜色和背景属性、文本属性、边框属性、列表属性以及精确定位网页元素属性等，增强了网页的格式化功能。 利用多媒体系网页元素进行格式修饰，当需要更改样式设置时，只要在这个样式表中修改，而不用对每统播放教学个页面逐个进行修改，简化了格式化网页的工作。 ppt； 利用CSS样式还可以代替表格进行网页布局，这是目前较为流行页面排版方式。 使用CSS样式表的另一个优点是可以利用同一个样式表对整个站点的具有相同性质的5.2.2 创建层叠样式表 选择器类型有以下三种： (1)类 (2)标签 (3)高级 定义的位置有以下三种情况： 选择“仅为该文档”，此时CSS样式的代码会嵌套在网页 网页设计与制作 课程教案（续） 教 学 基 本 内 容 H2{color:limegreen;} 方法及手段 教师讲授为主，学规则的第一部分称为选择器。每个选择器都有属性以及对应的属性值。上面的示生讨论为辅。 例中H2是规则选择器。大括号内的部分称为声明。声明由两部分组成：冒号前面的部分是属性，后面的部分是该属性的值。例如： H1 {color:blue;} 其中，H1为选择器，color:blue为声明。在该声明中，color是属性，blue是属性值。 5.2.4 层叠样式表应用 样式表可用于： (1) 覆盖浏览器的默认设置：每个浏览器都有其独特的网页显示方式。早先，开发人员无法控制浏览器中网页的显示方式。通过使用样式表，用户可以使用自己的设置覆盖浏览器的常规设置。 (2) 页面布局：使用样式表可以指定显示的字体、修改文本的颜色等，而无需更改网页结构。这意味着设计人员可以将网页的视觉设计从网页的逻辑设计中分离出来，对二者分别进行设计。 利用多媒体系统播放教学ppt； 利用投影仪进行课(3) 多个文档链接到一个样式表上：可以将样式表存成一个单独的文档，然后将堂操作演示。 其链接到多个网页中，这样会使这些网页具有相同的外观，而且，对样式表进行修改时，所有与该样式表链接的文档都会体现所做的修改。 小结： 这一部分包含很多CSS样式表定义规则的内容，依据各种应用范例来讲解效果更直观。CSS样式表是本课程十分重要的一个部分，必须让学生掌握。 作业和思考题： 1．试述三种创建CSS样式表的方法。 2．HTML在使用的样式表文件时，可以采用哪些方法？试举例说明。 3.在组成CSS样式表的规则中有哪些选择器？各有什么区别？ 教学后记： 16 / 28 网页设计与制作 课程教案 授课时间 第 7 周 星期 三 第1-2节 课次 4 2 课时 授课方式 课时 理论课□ 讨论课□ 实验课 习题课□ 其他□ （请打√） 安排 授课题目（教学章、节或主题）： 实验项目二 CSS样式表的应用 教学目的、要求（分掌握、熟悉、了解三个层次）： 进一步了解CSS样式的概念与作用；了解CSS样式的格式规则及样式类型；掌握CSS样式设置与管理方法；掌握在网页设计与维护中应用CSS样式的方法。 教学重点及难点： 重点：CSS样式的格式规则及样式类型； 难点：CSS样式设置与管理方法。 教 学 基 本 内 容 方法及手段 实验项目二 CSS样式表的应用 1. 背景知识 根据本章所学的CSS样式表的知识，再综合前面所学的创建站点及编辑网页的知识，制作精美的网页及应用CSS扩展功能。 2. 实验准备工作:素材、网页元素及网页样图，发送到学生的主机中。 3. 实训要求 (1) 利用CSS样式表制作精美的网页。 要求：根据给定的素材，首先设置页面属性 其次定义特定 Id的DIV标签的CSS样式，然后插入DIV标签，在DIV中插入内容，最后通过定义类，设置图像CSS样式。 (2) 在网页中添加CSS扩展效果：滤镜 要求：制作：投影字体、发光字体 、图像的透明效果、图像的波浪效果等。 4. 课时安排：2课时 5. 实训指导: 具体步骤见讲义 学生上机实操为主，教师辅导为辅。 小结： 这一部分包含很多CSS样式表定义规则的内容，依据各种应用范例来讲解效果更直观。CSS样式表是本课程十分重要的一个部分，必须让学生掌握。 作业和思考题： 课后完善实验项目二的网页制作。 教学后记： 17 / 28 网页设计与制作 课程教案 授课时间 第 7 周 星期 三 第 3节 课次 4 1 课时 授课方式 课时 理论课 讨论课□ 实验课□ 习题课□ 其他□ （请打√） 安排 授课题目（教学章、节或主题）： 第五章 网页编程语言 复习课 教学目的、要求（分掌握、熟悉、了解三个层次）： 回顾第五章的重要知识点；要求学生结合两次实验课讲述自己的体会。 教学重点及难点： 重点：第五章知识点； 难点：HTML、CSS样式表综合运用。 教 学 基 本 内 容 方法及手段 第五章 网页编程语言 复习课 内容： 1. 学生讲述学习本周的心得体会。 2. 教师讲评学生实验项目一、实验项目二作品中的主要问题。 3. 教师回顾本章的主要内容： (1) HTML的基本结构 (2) HTML语言的语法 (3) HTML语言的常用标记 (4) 创建层叠样式表 (5) 层叠样式表的结构 (6) 层叠样式表应用 4. 教师结合网页范例进行总结。 学生上机实操为主，教师辅导为辅。 小结： 本章内容丰富并且十分重要，有必要安排复习课帮助学生回顾、消化所学知识。 作业和思考题： 无 教学后记： 18 / 28 网页设计与制作 课程教案 授课时间 第 7 周 星期 三 第 4 节 课次 4 1 课时 授课方式 课时 理论课 讨论课□ 实验课□ 习题课□ 其他□ （请打√） 安排 授课题目（教学章、节或主题）： 第六章 网页制作工具 6.1.1 Dreamweaver介绍 6.1.2 网页属性和页面排版 教学目的、要求（分掌握、熟悉、了解三个层次）： 建议教师采用任务驱动方法，利用多媒体直接在工具软件中进行可视化操作。应先给出实例，并给学生演示运行后的结果，然后在工具软件中逐步实现。 教学重点及难点： 重点：Dreamweaver工作界面； 难点：网页属性和页面排版。 教 学 基 本 内 容 方法及手段 教师讲授为主，学生讨论为辅。 第六章 网页制作工具 6.1 Dreamweaver 6.1.1 Dreamweaver介绍 Dreamweaver是Macromedia公司开发的，是制作网页的工具,功能强大，内容复杂。 一、Dreamweaver CS3版本的工作界面 程序的主界面大致可分为下面几个区域： 1、菜单栏、2、“文档”工具栏、3、“插入”栏、4、“标准”栏、5、编辑区、6、状态栏和各个面板。 利用多媒体系菜单栏：提供了全部的Dreamweaver命令。 统播放教学插入栏：在插入栏中包含了多个选项卡，每个选项卡中都提供了可插入到文件中的ppt； 对象。 文档工具栏：代码视图、代码与设计视图、设计视图、动态数据库视图 标题：输入标题即可。 在浏览器中预览：在浏览器中预览页面。F12 标准栏：包含新建、打开、保存、全部保存等。 编辑区：在此区域内可对网页进行可视化编辑。 利用投影仪进“属性”检查器：根据选定的对象不同，属性检查器中将自动切换相应的选项，供行课堂操作演用户对其进行设置 示。 状态栏：1、显示窗口大小 2、显示此网页的下载时间。 二、站点的定义 由教师操作演示如何定义站点。 三、创建页面 由教师操作演示如何创建页面。 6.1.2 网页属性和页面排版 19 / 28 网页设计与制作 课程教案（续） 教 学 基 本 内 容 (1)创建网页后，首选需要设置页面的属性：“修改/页面属性”或“右击编辑区－页面属性”。 “标题”栏设置的是页面标题。 “背景图像”：为网页添加背景图片。 “背景”：背景颜色，默认为白色。 “文本”：非链接文字的颜色。 “链接”：链接文字的颜色。 “访问过的链接”：已经被单击过的链接文字的颜色。 “活动链接”：正在被单击的链接文字的颜色。 “左边界”和“右边界”：设置左部及顶部的页边距。 “边界宽度”：即内容与左右边框的距离。 “边界高度”：即内容与上下边框的距离。 “打开”和“保存”文件。在Dreamweaver中，可以同时对多个文档同时编辑。 （2）使用文本： 1、输入和修改文本：属性面板。 2、输入连续空格：Control+Shift+空格键 3、输入特殊字符：在插入栏中，选择字符。 4、查找替换文字：“编辑－查找和替换” 5、段落的对齐：缩进和反缩进 6、使用列表：有序列表和无序列表 方法及手段 教师讲授为主，学生讨论为辅。 利用多媒体系统播放教学ppt； 利用投影仪进行课堂操作演示。 小结： 本章包含了Dreamweaver软件的大部分操作指令，要求学生课后多复习多练习。 作业和思考题： 无 教学后记： 20 / 28 网页设计与制作 课程教案 授课时间 第 8 周 星期 一 第 1-2 节 课次 5 2 课时 授课方式 课时 理论课 讨论课□ 实验课□ 习题课□ 其他□ （请打√） 安排 授课题目（教学章、节或主题）： 第六章 网页制作工具 6.1.3 ~6.1.7 教学目的、要求（分掌握、熟悉、了解三个层次）： 建议教师采用任务驱动方法，利用多媒体直接在工具软件中进行可视化操作。应先给出实例，并给学生演示运行后的结果，然后在工具软件中逐步实现。 教学重点及难点： Dreamweaver CS3中的表格、层、表单和行为； 教 学 基 本 内 容 方法及手段 教师讲授为主，学生讨论为辅。 第六章 网页制作工具 6.1 Dreamweaver 6.1.3 Dreamweaver表格基础设置 表格包含以下三个基本元素：行、列、单元格 表格的格式控制能力使设计者可以使用表格来构造网页的框架。先使用较大的表格对网页的版面进行大致的控制，再使用嵌套的表格对细节进行刻画。 （1）插入表格的方法： “插入栏”－“表格” • 单元格填充：单元格的边框和其中内容之间的空白，它的默认值为“1”个像素。 • 单元格间距：单元格与单元格的距离，默认值为“2”个像素。 （2）选择表格元素： • 选择表格 • 选择行 • 选择列 • 选择单元格 （3）处理表格的行和列：略 （4）处理单元格：略 （5）设置边框和背景： 利用多媒体系统播放教学ppt； 利用投影仪进行课堂操作演示。 • • • • • 作一个立体表格： 制作只有1个像素的表格： 细线表格的制作： 制作圆角表格：用fireworks四张圆角图片。 格式化表格：“命令－格式化表格” （6）排序表格：“命令－排序表格” 21 / 28 网页设计与制作 课程教案（续） 教 学 基 本 内 容 6.1.4 Dreamweaver头元素的设置和表单的工作原理 一、用头元素设置网页信息： Dreamweaver定制网页过渡功能： 网页过渡是指当浏览者进入或离开网页时，页面呈现的不同的刷新效果，比如卷动、百叶窗等。这样你的网页看起来会更具有动感，不过也要注意适可而止，否则太花哨的变化也容易引起浏览者的反感。 插入关键字： 方法及手段 教师讲授为主，学生讨论为辅。 利用多媒体系统播为了使已经上传到服务器上的网站能够在搜索软件中搜索出来，以提高网站的知放教学ppt； 名度，如：本网站的标题输入一个关键字检索时，在搜索引擎上不仅可以查到很多网站，还可以查到很多网页，大部分搜索引擎在查询网页时都是根据头元素里的关键字来进行搜索的，显示的内容是在头元素中的说明。 二、使用表单： 可以用表单来收集一些必需的个人资料，在电子商场购物时，收集每个网上顾客的关键词然后提交到服务器上。 利用投影仪进行课从表单工作过程中可以看到，表单的开发可以分成两个部分，一是具体在网页上堂操作演示。 制作必需的表单项目，这一部分称为前端，主要是在Dreamwaver进行，另一部分是编制如何处理这些信息的程序，这一部分称为后端，主要是用具体的解释或编译程序制作(Perl,ASP,C,Jave) 6.1.5 Dreamweaver表单元素 一个表单可以分为两部分：一是Form标签，一是表单元素。基中Form标签主要表示提交的方式以提交给的程序，表单元素供浏览者填写各种表单内容。如果没有Form标签，在测试表单时显示都是正确的，但是绝对不可完成提交工作。 由教师演示讲解以下操作： • • • • • • • • • 插入一个空表单 删除表单 插入/设置文本域 插入/设置复选框 插入/设置单选按钮 插入/设置单选按钮组 插入/设置列表/菜单 插入/设置按钮 插入/设置图形按钮 6.1.6插入多媒体元件及怎样制作相册 在“插入栏”的“多媒体”中选择“插件”。 由教师演示讲解以下操作： • • • 在网页中加入音频 加入背景音乐\" 插入flash动画 22 / 28 网页设计与制作 课程教案（续） 教 学 基 本 内 容 • • • • • 插入flash文本 插入flash按钮 插入fireworks HTML 插入日期：插入－日期 创建网页相册 方法及手段 教师讲授为主，学生讨论为辅。 6.1.7 Dreamweaver中的CSS 窗口上方有“应用样式”和“编辑样式”两个选项，如果当前选中应用样式，当点击某个样式的时候，该样式将应用到当前页面选中的部分。如果当前选中“编辑样式”，当点击某个样式的时候就会编辑该样式模式。 介绍窗口下方4个按钮： 第一个按钮为附加样式表，加入一个外部样式表。 第二个按钮为新建样式表，一般通过这个按钮来创建新的CSS样式表。 第三个按钮为编辑样式表，点击后会弹出编辑样式表对话框，显示了所有已存在的内部和外部样式表，可以在这个对话框里新建、编辑 、删除样式。 第四个按钮：删除样式。 详细介绍CSS规则定义对话框的8张选项卡： 类型；背景；区块；方框；边框；列表；定位；扩展。 利用多媒体系统播放教学ppt； 利用投影仪进行课堂操作演示。 小结： 本章包含了Dreamweaver软件的大部分操作指令，要求学生课后多复习多练习。 作业和思考题： 无 教学后记： 23 / 28 网页设计与制作 课程教案 授课时间 第 8 周 星期 一 第 3-4 节 课次 5 2 课时 授课方式 课时 理论课 讨论课□ 实验课□ 习题课□ 其他□ （请打√） 安排 授课题目（教学章、节或主题）： 第六章 网页制作工具 6.1.8~ 6.2.3 教学目的、要求（分掌握、熟悉、了解三个层次）： 建议教师采用任务驱动方法，利用多媒体直接在工具软件中进行可视化操作。应先给出实例，并给学生演示运行后的结果，然后在工具软件中逐步实现。 教学重点及难点： Dreamweaver CS3中的表格、层、表单和行为； Fireworks CS3中图像优化、切片工具的使用和切片后的导出格式设定。 教 学 基 本 内 容 方法及手段 教师讲授为主，学生讨论为辅。 第六章 网页制作工具 6.1 Dreamweaver 6.1.8 层 由教师演示讲解以下操作： （1）建立层：默认情况下，插入层的标签是DIV，这个标签在IE与Navigator中都支持。 (2)建立一个嵌套的层：层的嵌套和表格的嵌套有些类似，就是在层里面再建立一个层。 利用多媒体系层的关系：它们可以有两种关系，重叠（并列）与嵌套。并列就是指两层是的，统播放教学任何一个层改变不会影响其它层。 ppt； 嵌套：父层改变属性会影响子层的属性。 （3）建立一个完全处于父层之外的子层：不能在直接在父层之外建立子层的方法来建立，只能在父层之内建立子层后，再将子层拖出父层。 （4）改变层的属性： • • 用鼠标直接拖运“层”的大小 在属性面板中输入宽和高 （5）用“Z轴”改变层的次序： （6）设置“溢出”选项： “溢出”选项是指当层中的元素超出层的边界时，如何处理。其中visible是不管层的边界，显示所有元素：hidden则是不显示超出边界的内容：scroll是层的右方和下方出现滚动条而不论元素是否溢出，auto则是当层中元素溢出时才出现滚动条。 （7）层的剪辑： 所谓剪辑就是保持一幅图画的完整性，而只显示其中的一部分。对层也可以进行剪辑处理，只要指定需要剪辑的最左、最右、最上、最下的坐标即可。 （8）层面板：强烈推荐大家在用层的时候将“层”面板打开并使用。 利用投影仪进行课堂操作演示。 24 / 28 网页设计与制作 课程教案（续） 教 学 基 本 内 容 6.1.9 行为 方法及手段 教师讲授为主，学行为是事件和动作的组合。事件是在特定的时间或是用户在某时所发出的指令后生讨论为辅。 紧接着发生的，例：网页下载完毕，按下键盘，单击鼠标等。而动作是在事件发生后所要作出的反应，例：打开的浏览器窗口、弹出菜单、播放音乐等。 由教师演示讲解以下操作： 1、播放声音： 2、打开浏览器窗口： 3、弹出信息： 4、改变属性: 5、改变时间轴: 6、拖动层：onmouseover(鼠标经过时拖动) 7、设置文本：状态栏中的显示内容！ 8、验证表单： 9、选择超联接文字，然后添加行为－显示弹出式菜单。 利用多媒体系统播放教学ppt； 6.1.10 模版与框架 一、使用模板： 由教师演示讲解以下操作： 1、创建模板： 2、编辑模板： 3、模板的使用与修改： （1）将模板应用到文件中： （2）与模板脱离 （3）用模板更新网页和网站： 二、框架 框架的作用就是把浏览器窗口划分为若干个区域，每个区域可以分别显示不同的网页。框架由两个主要部分组成－框架集和单个框架。框架集是在一个文档内定义一组框架结构的HTML网页，单个框架是指在网页上定义的一个区域。 <查看>－＜可视化助理＞－＜框架边框＞使框架边框在编辑窗口中可见。 按住Alt键拖曳任意一条框架边框，可以垂直或水平分割文档。 <文件>－＜保存全部＞首先保存框架集文件。依次要保存框架集中的其他页面。保存对应页面的时候，该部分都将以虚线框显示。保存的页数为X＋1个网页。 由教师演示讲解关于框架的操作。 利用投影仪进行课堂操作演示。 6.2 Fireworks 6.2.1 Fireworks简介 Fireworks是一个强大的网页图形设计工具，使用它创建和编辑位图、矢量图形，还可非常轻松的做出各种网页设计中常见的效果，比如动画、翻转图像、导航条、下拉菜单等，设计完成以后，如果在网页设计中使用，可将它输出为HTML文件，还能输出在Photoshop,Illustrator和Flash等软件中编辑的格式。 25 / 28 网页设计与制作 课程教案（续） 教 学 基 本 内 容 6.2.2 图形优化和导出图形 在图像插入到网页之前，一般需要将图像进行处理。在Fireworks中处理图像一般遵循以下流程：创建图形和图像→创建Web对象→优化图像→导出图像。 6.2.3 切片工具的使用 为了获取较高的下载速度，通常将网页中存在的较大图像切分成多个图片，即切片，在下载网页时对整幅图像的下载变为对多幅小图片的下载，虽然图像大小没有改变，但图像的下载速度会明显加快。同时切片还是建立交互响应的基础，利用切片可以制作动态交互图像。切片的形状有：矩形、多边形两种。 方法及手段 教师讲授为主，学生讨论为辅。 利用多媒体系统播放教学ppt； 利用投影仪进行课堂操作演示。 小结： 本章包含了Dreamweaver软件的大部分操作指令，要求学生课后多复习多练习。 作业和思考题： 请课后找几张不同的网页效果图，进行切片和图像优化的练习。 教学后记： 26 / 28 网页设计与制作 课程教案 授课时间 第 8 周 星期 三 第1-4节 课次 6 4 课时 授课方式 课时 理论课□ 讨论课□ 实验课 习题课□ 其他□ （请打√） 安排 授课题目（教学章、节或主题）： 实验项目三 博客主页布局设计 教学目的、要求（分掌握、熟悉、了解三个层次）： 要求学生使用表格、div层、框架进行个人博客网站主页的布局设计练习，熟悉掌握第六章的相关知识内容。 教学重点及难点： 重点：三种布局方法的相关操作； 难点：DIV+CSS 教 学 基 本 内 容 方法及手段 实验项目三 博客主页布局设计 1. 背景知识 根据本章所学的网页布局知识，再综合前面所学的创建站点及编辑网页的知识，进行网页不同排版方式的练习。 2. 实训准备工作： 素材和网页草图发送到学生的主机中，以供学生参考使用。 3. 实训要求： 根据网页草图，分别利用表格、层、框架方法布局网页。 4. 实训指导: 具体步骤见讲义 学生上机实操为主，教师辅导为辅。 小结： 表格布局、DIV布局、框架布局各有自身的优势，具体运用时应该先分析网站需求。 作业和思考题： 课后完善实验项目三的网页制作。 教学后记： 27 / 28 网页设计与制作 课程教案 授课时间 第 9 周 星期 一 第1-4节 星期 三 第1-4节 课次 7、8 8 课时 授课方式 课时 理论课□ 讨论课□ 实验课 习题课□ 其他□ （请打√） 安排 授课题目（教学章、节或主题）： 实验项目四 综合命题网站设计 教学目的、要求（分掌握、熟悉、了解三个层次）： 熟练使用所学Dreamweaver CS3、HTML、CSS样式表的知识完成一个网站设计与制作。 能将所做网站发布到因特网上。 教学重点及难点： 重点：网页布局方法和操作；网页样式的设置； 难点：网站的整体规划。 教 学 基 本 内 容 方法及手段 实验项目四 综合命题网站设计 5. 背景知识 综合本门课程所学知识，灵活运用与自己的站点中。 6. 实训准备工作： 素材和网页草图发送到学生的主机中，以供学生参考使用。 7. 实训要求： 由教师命题，学生综合所学知识设计网站结构、网站主页和子页（至少3个） 8. 实训指导: 学生上机实操为主，教师辅导为辅。 • • • • • 教师命题，学生依照主题设计网站结构和网站主页。 用Photoshop或Fireworks制作网页效果图，并切片导出素材图片。 用Dreamweaver、CSS样式表制作Html页面并测试、完善。 制作子页（至少3个）与主页相联。 申请域名和免费空间，将所做的网站发布到因特网上。 小结： 网页设计制作是一门内容不断更新的学科，课程结束后学生还应该时时关注网页技术的发展，积极自学。 作业和思考题： 课后完善实验项目四的网页制作。 教学后记： 28 / 28 标题的颜色都为暗绿色，还可以对选定的网页部分应用样式规则。例如，可以指定网页的某一特定段落显示为粗体。样式规则示例如下： 15 / 28
因篇幅问题不能全部显示，请点此查看更多更全内容
Copyright © 2019- baoaiwan.cn 版权所有 赣ICP备2024042794号-3
违法及侵权请联系：TEL:199 18 7713 E-MAIL:2724546146@qq.com
本站由北京市万商天勤律师事务所王兴未律师提供法律服务