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

上传人：仙人****88

文档编号：7037179

上传时间：2024-12-25

格式：DOC

页数：94

大小：1.45MB

《网页制作教案-(选用教案《Dreamweaver8网页制作》-航空工业出版社).doc》由会员分享，可在线阅读，更多相关《网页制作教案-(选用教案《Dreamweaver8网页制作》-航空工业出版社).doc（94页珍藏版）》请在咨信网上搜索。

网页制作教案选用教材：《Dreamweaver8网页制作》李跃贞、常春英编著航空工业出版社授课日期：2008年9月1日星期1 节次：3~4 授课地点：1号楼314 教材章节：第1章网站设计概述教学方法：Powerpoint演示、计算机示范教学目的：理解WWW工作原理，了解网页的一般组成元素，理解超链接的概念，理解URL的概念，了解网站设计的主要工具，了解网站设计的流程。教学重点： WWW工作原理，认识网站设计的主要工具，了解网站设计的流程。教学难点: 网站设计工具的使用，认识网页元素。教学环节：组织教学：检查学生人数，强调课堂纪律和要求导入新课：先进行网站演示，介绍网页的各个组成部分，而我们的网络WWW是由无数的网页（Web Page）组合在一起的世界，这些网页依照超文本的格式写成。思考: (1) 网站的工作原理? (2) 制作这样的网站需要用到什么技术? (3) 制作网站时可以利用哪些制作工具? 授课过程： 1．1 基本概念 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 Flash 1.2 网页的组成部分一般包括:1. 文字2 .图片3. 动画4 .超链接5. 特殊组件 HTML文件的层次结构：一般HTML文件都是以<html>开头，又以</html>结束。其文件结构由以下两部分组成：（1）头部（Head） HTML文件的头部由<head>和</head>标记定义。通常情况下，文件的标题、搜索引擎所用的关键字以及语言字符集信息等都放在头部信息中。（2）正文主体（Body）由<body>和</body>标记定义。<body>标记具有一些常用的属性，格式为： <body bgcolor=#n text=#n>…</body> 其中，bgcolor为背景颜色；text为文本颜色。n为六位十六进制数。如果网页使用背景图像，格式为： <body background=”图片文件名”>…</body> 1.3 超链接的概念超链接------网页中的一段文字、一副图片等都可以进行超链接，当用户单击这些文字、图片时，浏览器就会转入到一个预先设定好的新的页面。 1.4 URL的概念 URL(Universal Resource Locator )全球资源定位器------每个站点及站点上的每个网页都有唯一的地址，这个地址称为统一资源定位符，我们俗称“网址”。向浏览器输入URL（网址），可以访问URL所指向的Web网页。 URL的基本结构: 通信协议://服务器名称:[通信端口编号]/商标名/单位性质/国家代码/文件夹/文件名授课过程： 1.5网站设计的编程语言 1．HTML 2. XML 3. VRML 即虚拟现实建模语言 4. CSS层叠样式表 5. 浏览器端Script脚本语言 VBScript JAVAScript 6 .服务器端Script脚本语言 ASP 7.DHTML CSS层叠样式表: 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 节次：3~4 授课地点：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></html> <title></title> <body> </body> <p></p> <i></i> <b></b> <font></font>. 浏览器只要看到HTML文件的标签和属性，就可以将它解释成相应网页。 2.1.2 HTML标签的结构形态 <标签>…… </标签> 也称为围堵标签。<body> </body> <标签属性名=“属性值” >…… </标签> <标签>也称为空标签。如<br> 授课过程： 2.1.3 HTML语言结构整体结构 <html> html文件开始 <head> 文件头开始 ……… </head> 文件头结束 <body> 文件体开始 …………………………….. </body> 文件体结束 </html> html文件结束 2.2 创建HTML文档 1. 用记事本编写网页 <html> <head> <title>用记事本编写的网页</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> </head> <body> 网页编写是很容易的事。 </body> </html> 网页属性例子 <html> <head> <title>Untitled Document</title> </head> <body> <h1 align="center"> <font color=red>我们举一个属性、值<BR>和换行的例子。</font> </h1> </body> </html> 2. 用Dreamweaver MX 编写演示编写刚才的网页。授课过程： 2.3 文件标签文件标签共有4种<html></html> <head></head> <title> </title> <body> </body> 举例： <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>无标题文档</title> </head> <body> </body> </html> 重点要学习<body>标签的属性 1.text属性----用于设置文字的颜色 <html> <head> <title>text属性示例</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> </head> <body text="red"> text属性可以设定文字的颜色，这里显示了在body属性中加入text属性前后的情况。 </body> </html> 2．bgcolor属性—设置背景色 <html> <head> <title>text属性示例</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> </head> <body text=“red“ bgcolor=黑色> text属性可以设定文字的颜色，这里显示了在body属性中加入text属性前后的情况。 </body> </html> 3．link alink vlink 属性 link属性：设定访问之前的超链接的颜色 alink属性：设定正在按下超链接的颜色 vlink属性：设定访问之后的超链接的颜色授课过程：例子： <html> <head> <title>link属性示例</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> </head> <body link="#000000" alink="#00ff00" vlink="#ff0000" > <a href="sample.htm">link属性设定访问之前的超级链接的颜色，alink属性用来设定正在按下的超级链接的颜色， vlink属性用来设定访问之后的超级链接的颜色。</a> </body> </html> 4．background 属性该属性用来设定背景图片 <html> <head> <title>background属性示例</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> </head> <body background="background.jpg" > <p>background属性是相当有用的一个属性,</p> <p>它的作用是用来设定背景图片,</p> <p>它使得古板单调的网页变得生动活泼，</p> <p>当前大多数网页的设计都采用了背景图片，</p> <p>在HTML中就是使用了background属性。</p> </body> </html> 5．Scroll 属性该属性可以用来隐藏浏览器的滚动条。在<body>之后加上 scroll=“no” 就可以隐藏了。 6 . <title>标签 7. <meta>标签指定HTML文件的相关信息，如作者版权关键字等 2.4 排版标签 <! --> 注释 <p> 分段 <br> 换行 <hr> 换行插入水平线 <pre> 预设格式 <div> 区段，一个区段的内容可以采用相同格式 <nobr> 强行不换行 <wbr> 建议折行授课日期：2008年9月8日星期1 节次：3~4 授课地点：1号楼314 教材章节：第二章网站设计基础语言HTML 教学方法：Powerpoint演示、计算机示范教学环节：组织教学：检查学生人数，强调课堂纪律和要求教学目的：继续学习HTML语法和标签授课过程： 2.4 排版标签排版标签例子： <p>标签和<br>标签的区别 <html> <head> <title>P标签与br标签的区别</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> </head> <body> 红藕香残玉簟秋。以p标签结束<p> 轻解罗裳，独上兰舟。以br标签结束<br> 云中谁寄锦书来？以br标签结束<br> 雁字回时，花自飘零水自流。以p标签结束<p> 一种相思，两处闲愁。多个p标签并没有产生多个空行的效果<p><p><p><p><p><p> 此情无计可消除，多个br标签可以产生多个空行的效果<br><br><br><br><br> 才下眉头，却上心头。<p> </body> </html> <hr>在上面的例子中插入一条水平线 <pre> 看看下面网页的显示效果 <html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> </head> <body> <pre> 登记表姓名性别年龄职业张三男 12 学生李四男 13 学生王五男 14 学生 </pre> </body> </html> 授课过程： 2.5 框架标签框架标签有3种：<frameset> 、 <frame> 、<noframes>。 <frameset>标签该标签主要是将一个网页分割成几块。它有几个重要属性： rows 属性 ----它可以将网页水平分割 Cols属性 ----它可以将网页垂直分割 Border属性 ----它可以设定边界的值 Bordercolor属性 ----它可以设定边界的颜色 <frame>标签该标签定义被<frameset>分割出来的具体的每个小窗口。这两个标签配套使用，必不可少。该标签主要有以下属性： 1. src 属性 ------该属性指定载入小窗口中的具体的网页。 2. Name属性------设定次小窗口的名字，以便别处引用时用。 noframes 标签 --- 对不支持框架的设备进行提示,或相关操作。框架实例： <html> <head> <title>框架范例</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <frameset rows="30%,*"> <frame src="Untitled-1.htm"> <frame src="Untitled-2.htm"> </frameset><noframes> <body>浏览器不支持框架!</body> </noframes> </head> <body></body> </html> 2.6 字体标签字体标签主要用于设定字体。最常用的有 <strong> <h1>至<h6> <b> <i> <u> <font> (例如<font>使用方法：<FONT SIZE=“尺寸”>文字內容</FONT>) 2.7 表格标签与清单标签 2.7.1 清单标签可用<ul><ol><li> 标签实现无序清单: <ul> <li>今天星期一</li> <li>今天星期二</li> <li>今天星期三</li> </ul> 有序清单: <ol> <li>今天星期一</li> <li>今天星期二</li> <li>今天星期三</li> </ol> 2.7.2 表格标签主要有<table></table> <tr></tr> <td></td> 三个 1．<table></table>标签用于声明表格的开始和结束,并定义表格相关的属性.主要属性有: border属性-----设置表格边线的宽度,为0则不显示边线 Width属性------设置表格的宽度 Height属性-----设置表格的高度 Align属性-------设置表格中文字的对齐方式,有left 、center、 right Bgcolor属性-----设置表格的背景色 Background属性----设置表格的背景图片 Bodercolor属性----设置界线颜色授课过程： 2. <tr> 标签-------用于表示表格中的行 3. <td> 标签------用于设定表格行中的列 2.8 超链接标签 <a></a> 通常的使用方法: <a href=目的URL>链接提示</a> 举例： <body bgcolor="#ffffff" text="#000000"> <h2>链接标签示例：</h2> <h3><a href="">链接到新浪新闻</a></h3> <h3>给<a href="wei@">我</a>来信</h3> <h3><a href="telnet://">进入水木清华BBS站</a></h3> </body 2.10 多媒体标签插入图片,用<img> 插入视频,用<embed>，插入背景音乐,用<bgsound> <embed> </embed>是围堵标签 <img> <bgsound>是空标签 <img> <embed> <bgsound> 均有的属性src 举例说明： <html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> </head> <body bgcolor="#ffffff" text="#000000"> <embed src="bg.mid"></embed> </body> </html> 备注巩固新课： 1. <p>标签和<br>标签的区别是什么？多个P标签能否产生多个空行？BR标签呢？ 2. 框架标签有3种： <frameset> 、 <frame> 、<noframes> 3. 超链接标签 <a>通常的使用方法是:<a href=目的URL>链接提示</a> 4. 表格标签是<table></table> 表示行的标签是：<tr></tr> 表示列的标签是：<td></td> ；Background属性是用来设置表格的背景图片备注小结：本章是HTML的基础知识，介绍了在Dreamweaver里是怎么使用的，主要为以后的学习做基础。备注思考问题及探讨课题： HTML在使用中有什么不足之处？它有哪些特点？发展趋势是什么？备注作业：练习用HTML编写第一个网页，在里面添加表格并设背景图片，超级连接字体等尝试。备注授课日期：2008年9月10日星期3 节次：3~4 授课地点：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中能够制作的超级链接主要包括文本和图像的超链接，E－Mail地址的超级链接，下载文件的超链接以及在一个网页内部的链接－锚记。备注巩固新课： 1.www的工作模式是客户机服务器模式。 2.URL是全球资源定位器的简称,CSS是层叠样式表的简称。备注小结：本节介绍了WWW工作原理介绍网页的一般组成元素超链接的概念URL的概念网站设计的主要工具和网站设计的流程备注思考问题及探讨课题：网页制作都使用那些软件,各自的作用是什么,各有什么特点。备注授课日期：2008年9月15日星期1 节次：3~4 授课地点：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 节次：3~4 授课地点：1号楼314 教材章节：第5章网页制作高级技术教学方法：Powerpoint演示、计算机示范教学目的：通过本章的学习，应了解网页制作高级技术主要包括通过表单与网站进行数据交互、使用框架进行网页导航、使用层控制网页版面、使用模板统一网站风格、使用行为丰富网页功能、通过插件扩展Dreamweaver功能。教学重点：本章重点讲解了各个方法的特点和功能，以及使用场合和效果。教学难点: 各个方法的特点和功能，以及使用场合和效果。教学环节：组织教学：检查学生人数，强调课堂纪律和要求导入新课：在了解Dreamweaver 网页制作软件的基本知识之后，本章将介绍网页制作高级技术。授课过程： 5.1 使用表单与网站进行数据交互几乎在每个网站中都会有让用户和网站进行数据交互的地方，比如收集用户对网站的反馈意见、进行各种网上调查、进行用户注册信息采集，采用表单可以很好地完成这个任务。可以在表单中插入的元素有：文本字段、文本区域、按钮、复选框、单选按钮组、列表/菜单、文件域、图像域、隐藏域、单选按钮组、跳转菜单、字段集、标签。表单可以把这些元素收集的用户数据信息一起传送到服务器上，由服务器的程序对信息进行处理。 5.2 使用框架进行网页导航在网页的设计中利用框架可以方便网页之间的导航，减少制作具有很多相同部分网页时的重复工作，而且也可以缩短用户打开新网页的时间。对框架的操作主要有选择框架、拆分框架、改变框架形状、保存框架、设置框架的各种属性、建立框架文件之间的链接。 5.3 使用层控制网页版面层可以重叠，所以也就给网页添加了许多重叠的效果。层可以游离在文档之上，所以可以利用层来精确定位网页元素，它可以包含文本、图像甚至其他层，凡是HTML文件可包含的元素均可以包含在层中。层可以显示或隐藏，运用这一功能，可使网页达到快速下载的效果，因为网页和网页元素的可见和不可见以及它们的变换可通过的显示和隐藏属性实现，不用临时从网站下载文件。 5.3.1 层的重要属性层的编号：用来区分网页中的每个层，必须唯一。

文档加载中……请稍候！
如果长时间未打开，您也可以点击刷新试试。

下载文档保存到电脑，查找使用更方便

10 金币

申诉本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请申请举报、认领或删除 立即下载

配套讲稿：: 如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
特殊限制：: 部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。
关键词：: Dreamweaver8网页制作网页制作教案选用 Dreamweaver8 航空工业出版社

咨信网温馨提示：
1、咨信平台为文档C2C交易模式，即用户上传的文档直接被用户下载，收益归上传人（含作者）所有；本站仅是提供信息存储空间和展示预览，仅对用户上传内容的表现方式做保护处理，对上载内容不做任何修改或编辑。所展示的作品文档包括内容和图片全部来源于网络用户和作者上传投稿，我们不确定上传用户享有完全著作权，根据《信息网络传播权保护条例》，如果侵犯了您的版权、权益或隐私，请联系我们，核实后会尽快下架及时删除，并可随时和客服了解处理情况，尊重保护知识产权我们共同努力。
2、文档的总页数、文档格式和文档大小以系统显示为准(内容中显示的页数不一定正确)，网站客服只以系统显示的页数、文件格式、文档大小作为仲裁依据，个别因单元格分列造成显示页码不一将协商解决，平台无法对文档的真实性、完整性、权威性、准确性、专业性及其观点立场做任何保证或承诺，下载前须认真查看，确认无误后再购买，务必慎重购买；若有违法违纪将进行移交司法处理，若涉侵权平台将进行基本处罚并下架。
3、本站所有内容均由用户上传，付费前请自行鉴别，如您付费，意味着您已接受本站规则且自行承担风险，本站不进行额外附加服务，虚拟产品一经售出概不退款（未进行购买下载可退充值款），文档一经付费（服务费）、不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
4、如你看到网页展示的文档有www.zixin.com.cn水印，是因预览和防盗链等技术需要对页面进行转换压缩成图而已，我们并不对上传的文档进行任何编辑或修改，文档下载后都不会有水印标识（原文档上传前个别存留的除外），下载后原文更清晰；试题试卷类文档，如果标题没有明确说明有答案则都视为没有答案，请知晓；PPT和DOC文档可被视为“模板”，允许上传人保留章节、目录结构的情况下删减部份的内容；PDF文档不管是原文档转换或图片扫描而得，本站不作要求视为允许，下载前自行私信或留言给上传者【仙人****88】。
5、本文档所展示的图片、画像、字体、音乐的版权可能需版权方额外授权，请谨慎使用；网站提供的党政主题相关内容(国旗、国徽、党徽－－等)目的在于配合国家政策宣传，仅限个人学习分享使用，禁止用于任何广告和商用目的。
6、文档遇到问题，请及时私信或留言给本站上传会员【仙人****88】，需本站解决可联系【微信客服】、【 QQ客服】，若有其他问题请点击或扫码反馈【服务填表】；文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“【版权申诉】”（推荐），意见反馈和侵权处理邮箱：1219186828@qq.com；也可以拔打客服电话：4008-655-100；投诉/维权电话：4009-655-100。

关于本文

本文标题：网页制作教案-(选用教案《Dreamweaver8网页制作》-航空工业出版社).doc
链接地址：https://www.zixin.com.cn/doc/7037179.html

仙人****88

内容提供者

实名认证

查看上传人更多文档

部分上传会员的收益排行 01、路***（￥15400+），
02、曲****（￥15300+），
03、wei****016（￥13200+）,
04、大***流（￥12600+），
05、Fis****915（￥4200+），
06、h****i（￥4100+），
07、Q**（￥3400+），
08、自******点（￥2400+），
09、h*****x（￥1400+），
10、c****e（￥1100+）,
11、be*****ha（￥800+），
12、13********8（￥800+）。

相似文档

自信AI助手