网页设计教案1Word文件下载.docx

1、网页制作概述、Web基本介绍授课时间2课时教学目的1. 对网站及网页有一定的认识，激发学生学习网页设计的兴趣2. 了解网页中包含的基本元素3. 了解Web的一些基本术语教学重难点认识网页与网站，了解其中的基本术语教学过程1. 网页实例展示2. 分析网页设计的基本流程和网页元素3. Web的特点和结构介绍授课内容1. 网页中常包含的元素：文本、图像、动画、声音、视频2. 什么是WWW？World Wide Web，简称为Web（万维网）。WWW是一个全球性的信息系统，使计算机能够在Internet上相互传送基于超媒体的数据信息。WWW也可以用来建立Intranet（企业内部网）的信息系统。3.

2、WWW的特点分布式的信息资源；统一的用户界面；支持各种信息资源和各种媒体的演播；广泛的用途。4. WWW的结构Web是成千上万个网站连结而成的页面式网络信息系统。是采用“客户机/服务器”（C/S）结构。5. 静态网页和动态网页静态网页是从放置到服务器以后，直到发送给浏览器不会发生更改的网页，通常用HTML语言编写其代码，保存为.htm或.html文件。动态网页是在发送到浏览器之前由应用程序服务器修改的网页。动态网页的源文件可用HTML语言和VBScript或JavaScript等脚本语言编写，保存为.asp文件，也称为Web应用程序。1.4 HTML基础4课时1. 了解HTML文档的基本结构2

3、. 掌握各种标记的结构、作用及书写方法重点：各种标记的应用难点：表格标记1. 概念讲解2. 实例操作一、什么是HTML？超文本标记语言（HTML，HyperText Markup Language）是用于设计网页源文件（网页文档）的语言。每一个页面的代码保存为一个网页源文件（.htm或.html文件）。HTML包括一些定义页面内容和格式的符号，称为标记。它能够将文本、图像、声音和动画结合在一个网页文档中。这些文档可以通过Web浏览器显示，还可以通过超链接以访问其它的信息资源。二、什么是标记？标记是网页文档中的一些有特定意义的符号。这些符号指明如何显示文档中的内容。标记总是放在三角括号中，大多数

4、标记都成对出现（有开始标记和结束标记）。结束标记和开始标记所用的字符相同，只是前面加一个斜杠。1. HTML文档的结构标记 【例1】2. 格式标记（1）（段落标记） 用来创建一个段落，在此标记之间的文本将按照段落的格式显示。（2）（换行标记）（3）/blockquote（两边缩进标记） 在此标记之间的文本将按照两边缩进的方式显示。（4）dt/dtdd/dd（列表标记）【例2】（5）/olul/ulli/li（有数字或圆点的列表标记）【例3】（6）/div（分段标记）3. 文本标记h1/h1/h6（六级标题标记） 是最大的标题，/bi/iu/u（字体标记）em/emstrong/strong（强

5、调加重标记）font/font （字体的大小颜色标记）【例4】可以指定输出文本的字体大小、颜色，它主要两个属性size和color。4. 链接标记【例5】a href=地址/a（超链接标记） 链接对象为文本时（例：XX） 链接对象为图像时，需使用img src=标记指定图像。（例：d:pic1.gif href的值也可以是mailto:形式，即发送E-Mail形式。 语法为：mailto: E-Mail地址 具有target属性，用来指明显示的目标窗口。（2） 【例6】（2）多媒体标记【例7】 直接将音乐或影像嵌入网页，使用标记embed src=”名称” width=”宽度” height=

6、”高度” autostart=”true” loop=”次数” / 播放网页背景音乐,使用bgsound src=”音乐文件名” loop=”次数” /6. 表格标记 （用于制作表格或网页结构）【例8】table/table（创建一个表格）tr/tr和/td（创建表格中的每一行和每一格）th/th（创建表格头） 7. 表单标记（用于制作对话框）【例9】8. 其他常用标记【例10】（1）空格标记 （2）自动切换标记可使网页显示几秒种后，自动切换到另一网页。meta http-equiv=”refresh” content=”秒数;URL=文件名称或网址”（3）水平线标记（4）滚动的文本标

7、签 marquee direction=”方向” behavior=”方式” loop=”次数” scrollamount=”速度” scrolldelay=”延时” Width=n% onMouseOver=this.stop（） onMouseOut=this.start（） /marquee第4章 Dreamweaver CS3入门本章包括7节内容，其中4.3插入表格和4.4插入多媒体对象是本章的重点内容。本章理论授课有6个课时。4.1 文本及排版1课时1. 熟悉Dreamweaver的界面2. 掌握在Dreamweaver中文本的插入方法3. 能够熟练使用属性面板设置文本格式文本的插入

8、和格式设置1. 站点的建立与管理2. 属性面板的应用1. 安装Dreamweaver，软件介绍2. 软件界面讲解3. 创建与管理站点4. 实例分析5. 结合HTML标记知识，介绍文本的插入与格式设置方法6. 文本格式化的实例讲解一、Dreamweaver界面介绍、站点管理Dreamweaver主要由菜单栏、工具栏、制作窗口、属性面板以及右侧的一些面板组成。要使用此软件制作网页，第一步、也是最关键的一步就是创建站点。【演示站点的创建与管理过程】二、插入文本1. 插入文本的方法直接输入法；复制粘贴法；导入已有Word文档2. 插入特殊符号三、格式化文本 【例1】1. 设置字符格式使用属性面板，选择

9、字体、设置文字的大小及颜色2. 使用段落和标题属性面板中的“格式”下拉列表框段落标签的默认格式标题、标签3. 对齐文本“属性面板”“对齐方式”（右对齐、居中、左对齐、两端对齐）4. 缩进与扩展使得内容在“文件头内容”1. 设置网页的编码UTF-8 是一种被广泛应用的编码，致力将全球语言纳入统一的编码； GB2312是简体中文编码。2. 设定文档标题等同于在/title之间添加标题3. 设置网页的刷新4. 添加关键字协助网络索引擎寻找网页5. 插入meta对象（记录有关当前页面的信息）设置刷新代码：meta http-equiv=Refresh content= 5;URL=1font.html

10、 /设置网页编码：Content-Type content=text/html; charset=utf-84.3 插入表格1. 掌握表格的制作与编辑方法2. 能够熟练应用表格布局页面表格的制作与编辑使用表格进行页面布局1. 制作与编辑表格的操作演示2. 综合实例讲解一、制作表格【例1】1. 插入表格 设置表格的行数和列数 设置表格的宽度，单位有像素、百分比两种 设置表格边框，边框若为0则不显示边框，在设计页面中以虚线表示 单元格边距：单元格边框与内容之间的距离 单元格间距：单元格与单元格间的距离值 带有页眉的单元格为“媒体”“图像查看器”三、插入音视频对象1. 插入FlashVideo（只能

11、插入格式为.flv的视频）2. 插入Shockwave影片（插入格式为.dcr/.dir/.dxr的视频）3. 插入ActiveX4. 插入插件等同于添加embed标签四、插入Java AppletJava Applet嵌入在WWW页面，作为页面的组成部分被下载，并能运行在实现Java虚机器的web浏览器中。【例】插入多媒体对象4.6-4.7 创建超链接、Dreamweaver新增功能1. 掌握超链接的创建方法2. 了解spry框架的应用方法超链接的创建1. 知识讲解2. 操作演示一、地址和链接要创建从exercise目录下的images.html到站点根目录下的index.html的链接，链

12、接地址应是“./index.html”。要创建到exercise目录下的images.html的链接，任何文件中的链接地址都可以写成“/exercise/images.html”。 绝对地址：适用与创建外部链接。如1. 文件地址 文件相对地址相对地址 根目录相对地址 内部链接：超级链接的是站点目录外的文件2. 超级链接 外部链接：超级链接的是站点目录内的文件二、添加链接1. 添加外部链接（文字/图像）2. 添加内部链接方法一：选择文件方式方法二：拖放定位图标方式3. 添加E-mail链接“电子邮件链接”在链接地址中输入mailto:*三、书签链接和热点链接1. 书签链接2. 热点链接【例】创建

13、超级链接四、Spry框架【例】“插入”工具栏中Spry栏，可插入Spry菜单栏、Spry选项卡式面板、Spry折叠式、Spry可折叠面板第5章 网页布局和框架网页主要采用表格、框架来布局，另外在网站制作过程中，网页模板的运用是非常普遍的。因此，在本章中介绍表格的布局模式、框架和网页模板这几部分的内容，共授课6课时。5.1-5.5 表格布局模式的应用1. 了解网页布局的几种方法2. 了解运用布局模式进行页面布局3. 学会使用标尺与网格在布局模式中绘制布局表格和布局单元格1. 嵌套布局表格的应用方法2. 布局表格与布局单元格的属性设置1. 知识引入2. 操作讲解5.1 布局模式切换到“布局”模式“

14、查看” “表格模式”“布局模式”按Alt+F6 5.2 绘制布局表格和布局单元格一、绘制布局表格二、绘制布局单元格（布局单元格只能出现在布局表格内部）三、绘制嵌套布局表格5.3 使用标尺与网格一、使用标尺（菜单“查看”“标尺”“显示”）二、使用网络（菜单“查看” “网格设置”）5.4 调整布局表格及布局单元格一、选择布局表格和布局单元格二、调整布局表格和布局单元格的大小 三、移动嵌套布局表格和布局单元格四、设置布局表格和布局单元格属性五、设置列宽1. 使用间隔图像2. 列设置为自动伸展3. 列设置为固定宽度5.5 设置布局模式的首选参数“编辑” “首选参数” “分类” “布局模式”5.6 框架

15、的使用3课时1. 掌握框架的使用方法2. 能够运用框架进行页面布局，在框架中实现几个页面的切换3. 能够灵活应用嵌入式框架1. 框架的创建、选择、保存与属性设置2. 嵌入式框架的应用1. 框架的修改与保存2. 运用属性面板设置框架与框架集的属性3. 嵌入式框架的属性设置1. 复习上次课内容2. 创设情境、提供框架实例3. 知识讲解4. 操作演示一、框架与框架集 框架:是浏览器窗口中的一个区域，它可以显示与浏览器窗口其余部分所显示内容无关的HTML文档。框架集:定义了一组框架的布局和属性，包括框架的数目、大小和位置，以及在每个框架中的初始页面的URL。【框架集文件本身不包含要在浏览器中显示的HT

16、ML内容，它只是向浏览器提供应如何显示一组框架以及在这些框架中应显示哪些文档的有关信息。】二、创建框架和框架集 1. 创建框架（工具栏“插入” “布局” “框架”）2. 设计框架集（1）创建框架集：“修改”“框架集” “选择拆分项”（2）拆分框架：可将框架边框从边缘拖入视图中间。要将不在设计视图边缘的框架边框（内部的框架边框）拆分成一个框架，可在按住Alt键的同时拖动框架边框。要将一个框架拆分成四个框架，可将框架边框从设计视图的一角拖入框架的中间。单独拆分一个框架。选择“窗口” “框架”，在框架面板上单击待拆分的框架，用光标拖动相应框架的边框。（3）删除框架：将框架边框拖离页面或拖到父框架的边

17、框上三、选择框架和框架集 1. 在文档窗口中选择框架和框架集（1）选择框架：在设计视图中，按住Alt键的同时单击框架内部，这时在框架周围会显示一个选择轮廓。（2）选择框架集：单击框架集的某一内部框架边框，则在框架集周围显示一个选择轮廓。（3）选择不同的框架或框架集2. 在“框架”面板中选择框架和框架集选择菜单“窗口”“框架”，调出框架面板四、保存框架和框架集文件（Ctrl+S）五、设置框架和框架集属性 六、为框架设置链接 在设置链接地址后，注意选择链接目标，即指定页面显示的target七、处理不能显示框架的浏览器 “框架集”“编辑无框架内容”【例1】框架应用实例 八、嵌入式框架的应用 （使用/

18、iframe标签）【例2】嵌入式框架应用实例 5.7模板和库1. 掌握模板的创建和使用方法2. 了解库的作用3. 能够使用模板与库制作一个较为完整的网站模板的创建与应用1. 模板的创建 2. 可编辑区域的创建与使用1. 提供实例，进行实例分析2. 新知识讲解3. 实例操作演示一、基本概念模板：用来控制大的设计区域，以及重复使用完整的布局的文件。可以基于模板创建文档，从而使创建的文档继承模板的页面布局。库：是一种用来存储在整个Web站点上经常重复使用的页面元素（如图像、文本和其他对象等）的文件。二、应用模板与库的基本操作1. 创建模板 创建模板的2种方法： （1）修改现有文档创建模板 （2）在“

19、资源”面板中创建空白模板2. 创建模板的可编辑区域 创建可编辑区域的3种方法： （1）用菜单设置 选择菜单“插入”“模板对象”“可编辑区域”命令 （2）用快捷菜单 右击选择的文本或对象，在弹出的快捷菜单中选择“模板”“新建可编辑区域”命令。 （3）用工具栏3. 创建库项目库是一种用来存储希望在整个网站上经常重复使用或更新的网页元素（如图像、文本和其他对象）的文件，这些网页元素被称为库项目。使用库，可以一次更新该网站中的多个网页。创建库项目的具体步骤：（1）选择文档的一部分并另存为库项目；（2）在“资源”面板中单击库图标查看库资源；（3）将需要创建的库项目拖到“资源”面板的“库”类别中，为新创建的库项目命名。4. 在文档中插入库项目将库项目拖到文档中需要插入库项目的地方；或者将光标放在文档中需要插入库项目的地方，在库项目列表中选择一个库项目并单击“插入”按钮。【例】模板和库的应用第6章 CSS层叠样式表本章主要介绍运用CSS层叠样式表来进行样式定义，在网页设计中占据重要地位，共授课4课时。6.1 CSS的基本概念1. 了解CSS定义的格式2. 掌握CSS定义的基本规则3. 能够熟练地应用CSS进行页面样式设定重点