网页制作教案-(选用教案《Dreamweaver8网页制作》-航空工业出版社).doc

网页制作教案选用教材：Dreamweaver8网页制作李跃贞、常春英 编著 航空工业出版社 授课日期：2008年9月1日星期1 节次：34授课地点：1号楼314教材章节：第1章 网站设计概述教学方法：Powerpoint演示、计算机示范 教学目的：理解WWW工作原理，了解网页的一般组成元素，理解超链接的概念，理解URL的概念，了解网站设计的主要工具，了解网站设计的流程。教学重点：WWW工作原理，认识网站设计的主要工具，了解网站设计的流程。教学难点: 网站设计工具的使用，认识网页元素。教学环节：组织教学： 检查学生人数，强调课堂纪律和要求导入新课： 先进行网站演示，介绍网页的各个组成部分，而我们的网络WWW是由无数的网页（Web Page）组合在一起的世界，这些网页依照超文本的格式写成。思考:(1) 网站的工作原理?(2) 制作这样的网站需要用到什么技术?(3) 制作网站时可以利用哪些制作工具?授课过程：11 基本概念1.1.1网站(WWW)的工作原理 客户机/服务器工作模式 Internet采用了客户机/服务器模式，Internet的用户利用客户软件与服务器进行交互，提出一个请求，并通过Internet将请求发送到服务器，然后等待应答 。1.1.2制作网站需要用到的技术HTML (Dreamweaver或Frontpage) 图片处理(Photoshop) 动画技术(Fireworks MX Flash MX)CSS技术 (Dreamweaver)JavaScript VBScript文件(Dreamweaver) ASP(Active Server Pages)和数据库技术授课过程：1.1.3制作网站时可以利用哪些制作工具网页编辑工具Macromedia Dreamweaver 或 Frontpage图片处理工具Macromedia PhotoShop动画制作工具Macromedia Fireworks或 Macromedia Flash1.2 网页的组成部分一般包括:1. 文字2 .图片3. 动画4 .超链接5. 特殊组件HTML文件的层次结构：一般HTML文件都是以开头，又以结束。其文件结构由以下两部分组成：（1）头部（Head） HTML文件的头部由和标记定义。通常情况下，文件的标题、搜索引擎所用的关键字以及语言字符集信息等都放在头部信息中。（2）正文主体（Body） 由和标记定义。标记具有一些常用的属性，格式为：其中，bgcolor为背景颜色；text为文本颜色。n为六位十六进制数。如果网页使用背景图像，格式为： 1.3 超链接的概念超链接-网页中的一段文字、一副图片等都可以进行超链接，当用户单击这些文字、图片时， 浏览器就会转入到一个预先设定好的新的页面。1.4 URL的概念URL(Universal Resource Locator )全球资源定位器-每个站点及站点上的每个网页都有唯一的地址，这个地址称为统一资源定位符，我们俗称“网址”。向浏览器输入URL（网址），可以访问URL所指向的Web网页。URL的基本结构:通信协议:/服务器名称:通信端口编号/商标名/单位性质/国家代码/文件夹/文件名授课过程：1.5网站设计的编程语言1HTML 2. XML 3. VRML 即虚拟现实建模语言 4. CSS层叠样式表 5. 浏览器端Script脚本语言 VBScript JAVAScript 6 .服务器端Script脚本语言 ASP 7.DHTMLCSS层叠样式表:CSS是Cascading Style Sheets(层叠样式表)的简称. CSS语言是一种标记语言,它不需要编译,可以直接由浏览器执行(属于浏览器解释型语言).在标准网页设计中CSS负责网页内容(XHTML)的表现. CSS文件也可以说是一个文本文件,它包含了一些CSS标记,CSS文件必须使用.css为文件名后缀. 可以通过简单的更改CSS文件,改变网页的整体表现形式,可以减少我们的工作量,所以她是每一个网页设计人员的必修课. CSS是由W3C的CSS工作组产生和维护的. 1.6 网站设计流程第一步 架构内容信息、搜集整理资料和规划网站结构第二步 实现设计思想,使用各种工具制作网站并修改第三步 发布网站备注巩固新课：1.www的工作模式是客户机服务器模式。2.URL是全球资源定位器的简称,CSS是层叠样式表的简称。备注小结：本节介绍了WWW工作原理介绍网页的一般组成元素超链接的概念URL的概念网站设计的主要工具和网站设计的流程备注思考问题及探讨课题：网页制作都使用那些软件,各自的作用是什么,各有什么特点。备注授课日期：2008年9月3日星期3 节次：34授课地点：1号楼314教材章节：第2章 网站设计基础语言 HTML教学方法：Powerpoint演示、计算机示范教学目的：让学生理解HTML原理和作用, HTML基本语法格式, 文件标签、排版标签的使用方法。教学重点：HTML语言的使用。教学难点: HTML语法格式和各种标签使用方法。教学环节：组织教学： 检查学生人数，强调课堂纪律和要求导入新课： HTML即超文本标记语言Hypertext Marked Language，它是一种用来制作超文本文档的语言，能够独立于各种操作平台供浏览器显示。之所以被称为超文档，就是因为这种文档不仅可以含有文字，还可以表示图片、声音和视频，并且能够为用户提供链接，实现从一个网页跳转到另一个网页，因此HTML在Web中被广泛应用。 授课过程：2.1 HTML语法2.1.1 HTML组成元素 HTML语法由大量标签（Tag）和属性（Attribute）组成。标签如 .浏览器只要看到HTML文件的标签和属性，就可以将它解释成相应网页。2.1.2 HTML标签的结构形态 也称为围堵标签。 也称为空标签。 如授课过程：2.1.3 HTML语言结构整体结构 html文件开始 文件头开始 文件头结束 文件体开始. 文件体结束 html文件结束2.2 创建HTML文档1. 用记事本编写网页用记事本编写的网页网页编写是很容易的事。网页属性例子Untitled Document 我们举一个属性、值和换行的 例子。2. 用Dreamweaver MX 编写演示编写刚才的网页。授课过程：2.3 文件标签文件标签共有4种 举例：无标题文档重点要学习标签的属性1.text属性-用于设置文字的颜色text属性示例text属性可以设定文字的颜色，这里显示了在body属性中加入text属性前后的情况。2bgcolor属性设置背景色text属性示例text属性可以设定文字的颜色，这里显示了在body属性中加入text属性前后的情况。3link alink vlink 属性link属性： 设定访问之前的超链接的颜色alink属性： 设定正在按下超链接的颜色vlink属性： 设定访问之后的超链接的颜色授课过程：例子：link属性示例link属性设定访问之前的超级链接的颜色，alink属性用来设定正在按下的超级链接的颜色， vlink属性用来设定访问之后的超级链接的颜色。 4background 属性该属性用来设定背景图片background属性示例background属性是相当有用的一个属性,它的作用是用来设定背景图片,它使得古板单调的网页变得生动活泼，当前大多数网页的设计都采用了背景图片，在HTML中就是使用了background属性。5Scroll 属性该属性可以用来隐藏浏览器的滚动条。在之后 加上 scroll=“no” 就可以隐藏了。6 . 标签 7. 标签 指定HTML文件的相关信息，如作者 版权 关键字等2.4 排版标签 注释 分段 换行 换行插入水平线 预设格式 区段，一个区段的内容可以采用相同格式 强行不换行 建议折行授课日期：2008年9月8日星期1 节次：34授课地点：1号楼314教材章节：第二章 网站设计基础语言HTML教学方法：Powerpoint演示、计算机示范教学环节：组织教学： 检查学生人数，强调课堂纪律和要求教学目的：继续学习HTML语法和标签授课过程：2.4 排版标签排版标签例子：标签和标签的区别 P标签与br标签的区别 红藕香残玉簟秋。以p标签结束轻解罗裳，独上兰舟。以br标签结束云中谁寄锦书来？以br标签结束雁字回时，花自飘零水自流。以p标签结束一种相思，两处闲愁。多个p标签并没有产生多个空行的效果此情无计可消除，多个br标签可以产生多个空行的效果才下眉头，却上心头。 在上面的例子中插入一条水平线 看看下面网页的显示效果 Untitled Document 登 记 表 姓名 性别 年龄 职业 张三 男 12 学生李四 男 13 学生王五 男 14 学生授课过程：2.5 框架标签框架标签有3种： 、 、。标签该标签主要是将一个网页分割成几块。它有几个重要属性：rows 属性 -它可以将网页水平分割Cols属性 -它可以将网页垂直分割Border属性 -它可以设定边界的值Bordercolor属性 -它可以设定边界的颜色标签该标签定义被分割出来的具体的每个小窗口。这两个标签配套使用，必不可少。该标签主要有以下属性：1. src 属性 -该属性指定载入小窗口中的具体的网页。2. Name属性-设定次小窗口的名字，以便别处引用时用。 noframes 标签 - 对不支持框架的设备进行提示,或相关操作。框架实例：框架范例 浏览器不支持框架! 2.6 字体标签字体标签主要用于设定字体。最常用的有 至 (例如使用方法：文字內容)2.7 表格标签与清单标签2.7.1 清单标签可用 标签实现无序清单:今天星期一今天星期二今天星期三有序清单:今天星期一今天星期二今天星期三2.7.2 表格标签主要有 三个1标签 用于声明表格的开始和结束,并定义表格相关的属性.主要属性有:border属性-设置表格边线的宽度,为0则不显示边线Width属性-设置表格的宽度Height属性-设置表格的高度Align属性-设置表格中文字的对齐方式,有left 、center、 rightBgcolor属性-设置表格的背景色Background属性-设置表格的背景图片Bodercolor属性-设置界线颜色授课过程：2. 标签-用于表示表格中的 行3. 标签-用于设定表格行中的 列2.8 超链接标签 通常的使用方法:链接提示举例：链接标签示例：链接到新浪新闻给我来信进入水木清华BBS站/body2.10 多媒体标签插入图片,用插入视频,用，插入背景音乐,用 是围堵标签 是空标签 均有的属性src 举例说明：Untitled Document备注巩固新课：1. 标签和标签的区别是什么？多个P标签能否产生多个空行？BR标签呢？2. 框架标签有3种： 、 、3. 超链接标签 通常的使用方法是:链接提示4. 表格标签是 表示行的标签是： 表示列的标签是： ；Background属性是用来设置表格的背景图片备注小结：本章是HTML的基础知识，介绍了在Dreamweaver里是怎么使用的，主要为以后的学习做基础。备注思考问题及探讨课题：HTML在使用中有什么不足之处？它有哪些特点？发展趋势是什么？备注作业：练习用HTML编写第一个网页，在里面添加表格并设背景图片，超级连接字体等尝试。备注授课日期：2008年9月10日星期3 节次：34授课地点：1号楼314教材章节：第3章Dreamweaver入门 教学方法：Powerpoint演示、计算机示范 教学目的：介绍Dreamweaver的界面，并通过实例演示基本菜单的使用方法，使同学们掌握这个软件的基本操作，并能用它来设计网页。教学重点：站点的建立，网页的编辑，建立超级连接都是需要熟练掌握的操作。教学难点: Dreamweaver插入表格或者多媒体元素和超级连接的操作。教学环节：组织教学： 检查学生人数，强调课堂纪律和要求导入新课： 我们前面两节课一直在用HTML代码来创建网页，在实际使用中，我们都是靠软件来帮助我们进行编辑，下面我们就开始学习Dreamweaver的使用方法。我们将在以后的讲课中逐步讲解。授课过程：3.1 Dreamweaver的工作界面Dreamweaver提供了将全部元素置于一个窗口中的集成工作区。在集成工作区中，全部窗口和面板集成在一个应用程序窗口中。您可以选择面向设计人员的布局或面向手工编码人员需求的布局。启动Dreamweaver 时，出现一个工作区设置对话框（如下图）：您可以从中选择一种工作区布局。如果您不熟悉编写代码，请您选择“设计者”。如果您以后想更改工作区，可以使用编辑菜单“首选参数”对话框切换到一种不同的工作区。3.2 创建第一个网站Web 站点是一组具有如相关主题、类似的设计、链接文档和资源。Dreamweaver是一个站点创建和管理工具，因此使用它不仅可以创建单独的文档，还可以创建完整的 Web 站点。创建 Web 站点的第一步是规划。为了达到最佳效果，在创建任何 Web 站点页面之前，应对站点的结构进行设计和规划。决定要创建多少页，每页上显示什么内容，页面布局的外观以及页是如何互相连接起来的。 3.2.1 建立新网站从“站点”菜单选择“管理站点”， 出现“管理站点”对话框。在“管理站点”对话框中，单击“新建”，然后从弹出式菜单中选择“站点”。 出现“站点定义”对话框。如果对话框显示的是“高级”选项卡，则单击“基本”。 出现“站点定义向导”。3.2.2 网站文件管理网站的框架搭起来后，可以通过Dreamweaver工作界面右侧的【文件】面板来管理网站内的文件，用鼠标右键能够执行的操作有：建立和删除文件、建立和删除文件夹。为了以后使用方便，要创建相应的文件夹来分类保存文件。3.2.3 网页的编辑与浏览通过手工输入或其它方法向新创建的文件中添加内容如文字、图片等。编辑好后，可以通过按下F12键进行预览。3.2.4建立文件之间的链接利用Dreamweaver可以在网站内部的文件之间以及网站文件和网络上的网页文件之间建立超级链接。3.3网页文本编辑虽然网页多媒体效果非常好，有图像，动画，声音，但是所有的网页或多或少都缺不了文本。简洁明了的文字叙述，可以给读者传递很多信息，是其他多媒体手段所无法取代的。Dreamweaver所提供的编辑环境与日常所用的办公软件很类似，在其中编辑文本是比较容易的。3.4 网页图像处理在网页中，文本是最基本的元素，但是如果只有文本，那么整个网页将会显得很单调，很难吸引浏览者的目光。在网页中插入各种图片将会极大地丰富网页的内容。Dreamweaver MX 2004为图片的插入和处理提供了很好的条件，在不需要调用外部图像处理软件的情况下就可以对图片进行处理，以达到网页浏览的要求。3.4.1 HTML语言支持的图像格式HTML语言主要支持三种图像格式：GIF，JPEG和PNG。GIF（Graphics Interchange Format，图形交换格式）是一种索引颜色格式，它是历史遗留产物，计算机的发展本应淘汰这种格式，只不过GIF格式图像非常适用于Internet发展初期网络带宽很低的环境。它的特点有两个：一是在颜色很少的情况下，产生的文件很小，另外一个就是它能够以动态的面目出现。GIF缺点也很明显，它最多只能支持256种颜色。JPEG（Joint Picture Experts Group，联合图像专家组）格式是一种有损压缩的格式，由于它具有很高的压缩比，使用专门的JPEG压缩工具可心使压缩程度达到180：1，而且图像质量受到损失不大（仅从浏览的角度计），极大方便了网上传输和用磁盘交换文件。从长远看，由于Internet带宽的发展和存储介质的发展，JPEG也应该是一种被淘汰的格式，因为它对图像会产生不可回复的损失。所以在备份重要图像时最好不要用JPEG格式，应采用TIF等无压缩的格式。PNG（Portable Network Graphic，可移植网络图形）是专门针对Web开发的一种无损压缩图像，它的压缩比要大大超过LZW等传统的图像无损压缩算法，同时还支持透明背景和动态效果，但是很多老版本的浏览器不支持PNG图像，而且许多软件也不支持这种格式。相信这种情况会随着Internet带宽的提高而得到改善。3.5 使用表格配置网页版面网页版面或者称为网页布局，指页面在浏览器中显示的方式。布局的好坏对于网页设计质量的高低影响很大，良好的布局可以使网页美观大方，易于修改、维护。Dreamweaver中提供了很多方式来控制网页布局，表格就是其中重要的一项。对表格的操作主要有插入表格、拆分表格的单元格、合并表格的单元格、表格的嵌套。授课过程：3.6 在网页之间进行跳转网站之所以能够给人们带来这么大的方便，很重要的一点就是它能够通过超级链接把多个网页联系起来，浏览者可以方便的在多个网页之间进行跳转。3.6.1 导航条的创建 为了便于浏览者访问网站，往往把到网站各部分的链接排列在一起。这种排列在一起的链接图标称作网站的导航系统，由于它们往往被排成一个横条或竖条，所以也经常被称作导航条3.6.2 超级链接的使用在Dreamweaver中能够制作的超级链接主要包括文本和图像的超链接，EMail地址的超级链接，下载文件的超链接以及在一个网页内部的链接锚记。备注巩固新课：1.www的工作模式是客户机服务器模式。2.URL是全球资源定位器的简称,CSS是层叠样式表的简称。备注小结：本节介绍了WWW工作原理介绍网页的一般组成元素超链接的概念URL的概念网站设计的主要工具和网站设计的流程备注思考问题及探讨课题：网页制作都使用那些软件,各自的作用是什么,各有什么特点。备注授课日期：2008年9月15日星期1 节次：34授课地点：1号楼314教材章节：第4章 规划站点和网页布局设计 教学方法：Powerpoint演示、计算机示范 教学目的：通过本章的学习，应了解设计和规划站点的基本步骤，并能够掌握创建和编辑站点的基本方法。教学重点：本章重点讲解了网站建设的基本流程以及如何规划和设计站点，创建Dreamweaver 站点和编辑站点的方法。课后应结合上机操作进行强化练习。教学难点: 使用 Dreamweaver编辑站点的方法。教学环节：组织教学： 检查学生人数，强调课堂纪律和要求导入新课： 在了解Dreamweaver 网页制作软件的基本知识之后，本章将介绍利用Dreamweaver创建站点的基本知识和操作方法。包括规划站点、创建站点和编辑站点三部分内容。授课过程：4.1.1 创建站点 在Dreamweaver 中选择“站点”|“新建站点”命令，打开“站点定义”对话框，然后在软件的提示下使用Dreamweaver 的站点定义向导可以方便地在本地计算机环境中创建用于网页开发的站点。如果要在本地计算机上创建一个新站点， 可以选择“站点”|“新建站点”命令，打开“站点定义”对话框进行设置。在完成本地站点的创建工作后,如果要设置本地站点的保存文件夹，可在打开的”站点定义”对话框中，选择“高级”选项卡，在对话框左侧的分类列表中选择“本地信息”选项后，在对话框右侧所显示的“本地信息”选项区域中进行设置。 要设置远程文件夹，可在打开的”站点定义”对话框中选择“高级”选项卡，然后在对话框左侧的”类别”列表框中选择“远程信息”选项，并单击“访问”下拉列表按钮,在弹出的列表框中选择连接远程服务器的方式即可。4.2.2 编辑站点 在站点的维护与更新过程中，用户可以对建立的站点进行增加、删除和修改等操作。利用Dreamweaver 不但能够编辑本地系统上的现有站点，而且能够编辑远程系统上的站点。 要编辑本地站点,可以选择“站点” |“管理站点”命令 ,然后在打开的“管理站点”对话框 中单击“编辑”按钮即可。要编辑一个现有的远程站点，可以先创建一个包含现有站点的本地文件夹，再为站点设置本地根目录，然后使用现有站点信息设置一个远程站点，并为远程站点选择正确的根目录。在“文件”面板中选择“文件”选项卡后，单击“连接到远程主机”按钮，连接到远程站点。从站点列表中删除站点实际上只是删除了Dreamweaver同本地站点之间的关联，但保存在磁盘上的站点内容(包括各种文件夹和文件)并不会被删除，在必要时还可以新建相同的站点。用户如果不再需要使用Dreamweaver 对某个本地站点进行操作，只需要在“管理站点”对话框中选择相应站点后,单击“删除”按钮，并在弹出的对话框中单击“是”按钮即可 4.3控制网页布局版面指的是浏览器看到的一个完整的页面。因为每台计算机显示器的分辨率不同，所以同一个页面的大小可能出现640*480像素,800*600像素,1024*768像素等不同尺寸。所谓布局，就是以最适合浏览的方式将图片和文字排放在页面的不同位置。 常用到的版面布局形式如下 ：“T”结构布局 “口”型布局 “三”型布局 对称对比布局 POP布局 4.4 使用CSS样式表格式化网页4.4.1 CSS样式表CSS是“Cascading Style Sheet”的缩写，常被译为“层叠样式表”或“级联样式表”，也可简称为样式表。它简化了HTML语言中各种繁琐标记，使得各个标记的属性更具有一般性和通用性，并且扩展了原先的标记功能，能够实现更多的效果。使用CSS样式可以非常灵活并更好地控制具体的网页外观，从精确的布局定位到特定的字体和样式。它把对象概念真正引入了HTML语言中，使得可以使用脚本程序调用和改变对象属性，使网页中的对象产生动态效果。 通过CSS样式表一般可以实现如下功能 ：更加灵活地控制网页中文字的字体、颜色、大小、间距、风格及位置。灵活地设置一个文本块的行高、缩进，并可以为其加入三维效果的边框。可以方便地为网页中任何元素设置不同的背景颜色和背景图片。可以精确地控制网页中各元素的位置。可以为网页中的元素设置各种滤镜，从而产生诸如阴影、辉光、模糊和透明等只有在一些图像处理软件中才能实现的效果。与脚本语言结合，可以使网页中的元素产生各种动态效果。它是采用直接格式的HTML代码书写，网页打开的速度非常快。4.4.2 应用CSS样式在Dreamweaver中通过样式面板来应用CSS样式，主要有新建样式、编辑已有样式、删除已有样式。是否保存新建样式取决于样式的应用范围。CSS样式的主要属性包括类型、背景、区块、方框、列表、定位、扩展等。在Dreamweaver中可以很方便地设置样式的各种属性。备注巩固新课：1. CSS是“Cascading Style Sheet”的缩写，常被译为“层叠样式表”2. 要编辑本地站点,可以选择“站点” |“管理站点”命令 ,然后在打开的“管理站点”对话框 中单击“编辑”按钮即可。备注小结：本节介绍了创建站点的基本方法，需要自己动手上机练习，另外介绍了CSS的功能和特点，以及基本的使用方法。备注思考问题及探讨课题：Dreamweaver如何在网络上传和下载站点。备注授课日期：2008年9月17日星期3 节次：34授课地点：1号楼314教材章节：第5章 网页制作高级技术 教学方法：Powerpoint演示、计算机示范 教学目的：通过本章的学习，应了解网页制作高级技术主要包括通过表单与网站进行数据交互、使用框架进行网页导航 、使用层控制网页版面 、使用模板统一网站风格 、使用行为丰富网页功能 、通过插件扩展Dreamweaver功能。 教学重点：本章重点讲解了各个方法的特点和功能，以及使用场合和效果。教学难点:各个方法的特点和功能，以及使用场合和效果。教学环节：组织教学： 检查学生人数，强调课堂纪律和要求导入新课： 在了解Dreamweaver 网页制作软件的基本知识之后，本章将介绍网页制作高级技术。授课过程：5.1 使用表单与网站进行数据交互几乎在每个网站中都会有让用户和网站进行数据交互的地方，比如收集用户对网站的反馈意见、进行各种网上调查、进行用户注册信息采集 ，采用表单可以很好地完成这个任务。可以在表单中插入的元素有：文本字段、文本区域、按钮、复选框、单选按钮组、列表/菜单、文件域、图像域、隐藏域、单选按钮组、跳转菜单、字段集、标签。表单可以把这些元素收集的用户数据信息一起传送到服务器上，由服务器的程序对信息进行处理。 5.2 使用框架进行网页导航在网页的设计中利用框架可以方便网页之间的导航，减少制作具有很多相同部分网页时的重复工作，而且也可以缩短用户打开新网页的时间。对框架的操作主要有选择框架、拆分框架、改变框架形状、保存框架、设置框架的各种属性、建立框架文件之间的链接。 5.3 使用层控制网页版面层可以重叠，所以也就给网页添加了许多重叠的效果。层可以游离在文档之上，所以可以利用层来精确定位网页元素，它可以包含文本、图像甚至其他层，凡是HTML文件可包含的元素均可以包含在层中。层可以显示或隐藏，运用这一功能，可使网页达到快速下载的效果，因为网页和网页元素的可见和不可见以及它们的变换可通过的显示和隐藏属性实现，不用临时从网站下载文件。 5.3.1 层的重要属性层的编号： 用来区分网页中的每个层，必须唯一。