Dreamweaver 8培训 第1-8章.ppt

1、课堂讲解 上机实战,第1课 初识Dreamweaver 8,课堂讲解,什么是网页和网站 网页的分类 网页中的常用术语 网页设计的相关知识 认识Dreamweaver 8 Dreamweaver 8的基本操作 Dreamweaver 8工作界面介绍,什么是网页和网站,什么是网页 什么是网站,什么是网页,网页是由HTML（超级文本标识语言）或者其他语言编写的，通过IE浏览器编译后供用户获取信息的页面，它又称为Web页，其中可包含文字、图像、表格、动画和超级链接等各种网页元素。,什么是网站,网站就是一个或多个网页的集合。从广义上讲，网站就是当网页发布到Internet上以后，能通过浏览器在Inter

2、net上访问的页面 。 门户网站 职能网站 专业网站 个人网站,网页的分类,按所处位置分类 按表现形式分类,按所处位置分类,按网页在网站中所处的位置可将网页分为主页和子页两类。,按表现形式分类,按网页的表现形式可将网页分为静态网页和动态网页。,网页中的常用术语,万维网（www） 浏览器 统一资源定位符（URL） 文件传输协议（FTP） IP地址 域名 超级链接 超级文本标记语言（HTML）,万维网（www）,万维网（www）是World Wide Web的中文简称，也称为3W网，它的本质是一种基于超级文本技术的交互式信息浏览检索工具，是Internet提供的应用最普及、功能最丰富、使用方法最简

3、便的信息服务，用户可通过它在Internet上浏览、编辑、传递超文本格式的文件（即.html格式文件）。,浏览器,浏览器是用于阅读网页中信息的一种软件工具，就像使用电脑必须有操作系统一样。 Internet Explorer（IE） Netscape Navigator（NE） 腾讯TT浏览器,统一资源定位符（URL）,URL（Uniform Resource Locator）主要是用来指定协议（如HTTP或FTP）以及对象、文档、万维网网页或其他目标在Internet的位置和存取方式。 通信协议 主机名 所要访问的网页路径及名称,文件传输协议（FTP）,FTP（File Transfer P

4、rotocol）是一种广泛使用的文件传输协议，是快速、高效和可靠的信息传输方法。 FTP是基于客户/服务器模型的TCP/IP的应用，所以只要在客户端和服务器之间建立了TCP/IP连接，无论两台电脑的位置远近、连接方式的异同以及使用的操作系统的异同，都能通过FTP协议进行文件的传输。,IP地址,IP地址用来标识连接到Internet上电脑的指定编号，每一个IP地址对应一台电脑，这与用电话号码标识电话网络中的电话相同。 电脑识别的IP地址由32位二进制数值组成，电脑上以十进制数值来显示，一组数值分为4部分，每一部分均不能大于255，中间用“.”分隔，如9。,域名,域名就是常说的

5、网址，它也具有惟一性，如百度的网址、网易的网址等就是一个域名，域名由汉语拼音或英文字符加上数字表示，在访问网络时，域名将通过域名服务器转换成IP地址，这种转换是在后台完成的。,超级链接,超级链接是网页中最常用的元素之一，网页就是通过无数的超级链接才能组成一个网站。 超级链接可以链接到网站内部页面、对象，也可以链接到其他网站，大大方便了用户在各个页面对象之间实现跳转。,超级文本标记语言（HTML）,HTML（Hyper Text Markup Language）是一种用户与电脑之间进行交流的文本技术，各种网页均是用HTML语言来描述的，用HTML语言编写的网页文件的扩展名一般为“*.htm”或“

6、*.html”。,网页设计的相关知识,设计网页的原则 网页设计的一般步骤 网页制作的常用工具,设计网页的原则,整体规划 鲜明的主题 善用图像 醒目的导航 及时更新 易记的网站名称 通用网页 动画适量,网页设计的一般步骤,规划网站 收集整理资源 配置站点 创建页面 测试站点 发布站点 维护、更新站点,网页制作的常用工具,网页设计软件 Dreamweaver是目前使用最多的网页设计软件。 图像处理软件 制作网页图像的软件种类繁多，大多数网页设计人员选择的是Fireworks或Photoshop。 动画制作软件 网页动画制作中最常用的软件非Flash莫属。,认识Dreamweaver 8,使用Dre

7、amweaver 8制作网页之前，需先将该软件安装到电脑中，其方法与安装其他软件相似，用户可根据提示操作。,Dreamweaver 8的基本操作,启动Dreamweaver 8 新建空白HTML网页 保存网页文档 预览网页效果 退出Dreamweaver 8,启动Dreamweaver 8,选择开始 所有程序 Macromedia Macromedia Dreamweaver 8菜单命令,新建空白HTML网页,选择文件 新建菜单命令，打开“新建文档”对话框，在“分类”栏中选择“基本页”选项，在“基本页”栏中选择“HTML”选项，单击“创建”按钮。,保存网页文档,选择文件保存菜单命令，打开的“另

8、存为”对话框，在“保存在”下拉列表框中选择文件的保存路径，在“文件名”文本框中输入保存的文件名，单击“保存”按钮。,预览网页效果,选择文件 在浏览器中预览 IExplore 6.0菜单 命令在IE浏览器中 预览网页文档的效 果。,退出Dreamweaver 8,单击Dreamweaver 8窗口右上角的“关闭”按钮。 单击Dreamweaver 8窗口左上角的图标，在弹出的下拉菜单中选择“关闭”命令。 在Dreamweaver 8窗口中选择文件退出菜单命令。 在当前窗口为Dreamweaver 8工作界面时，按【Alt+F4】键退出Dreamweaver 8。,Dreamweaver 8 工作

9、界面介绍,插入栏 文档工具栏 文档编辑区 网页标签 扩展按钮 浮动面板组 属性面板 标签选择器 水平标尺和垂直标尺,上机实战,本课上机实战将练习在Dreamweaver 8中新建一个只包含文本的简单网页，并使用IE浏览器预览其效果。其中主要练习Dreamweaver 8的启动、新建文档、保存网页、预览网页和退出Dreamweaver 8的操作。,课堂讲解 上机实战,第2课 站点的基本操作,课堂讲解,站点的规划 创建本地站点 创建远程站点 管理本地站点 管理站点地图 页面设置,站点的规划,Dreamweaver 8的站点类型 规划站点结构 绘制网站结构草图,Dreamweaver 8的站点类型,

10、本地站点 远程站点 测试站点,规划站点结构,规划站点结构是设计站点的必要前提，其操作是将不同的文件分类存放在文件夹中以便于设计者管理。合理地组织站点结构，可提高工作效率，加快对站点的设计。,绘制网站结构草图,站点规划好之后，就可以根据规划绘制出一个网站结构草图，以便于有一个清晰的思路。,创建本地站点,新建站点 新建文件夹 新建网页文件,新建站点,通过站点新建站点菜单命令或“文件”面板新建站点。,新建站点,新建文件夹,建立好站点后就可以在站点中新建文件夹，该文件夹主要用来存储这个网站中用到的网页元素，如图片、音乐等。,新建网页文件,新建网页文件的方法与新建文件夹的方法相同 。,创建远程站点,创建

11、远程站点的方法与创建本地站点的方法类似，只是无需在站点文件夹下再新建文件夹或网页文件。,管理本地站点,编辑本地站点 删除本地站点,编辑本地站点,选择本地站点 删除站点中的文 件和文件夹 更改站点信息,删除本地站点,如果不需要某个站点时，可以将其从站点列表中删除。,管理站点地图,定义主页 查看站点地图 在站点地图中管理页面文件,定义主页,在使用站点地图查看站点时必须保证这个站点已定义了一个主页，因为主页是一个站点的根节点，必须有根节点才有各个支节点，也就是各个子页。,查看站点地图,查看站点地图是在Dreamweaver 8的“文件”面板的“视图”下拉列表框中选择“地图视图”选项。,在站点地图中管

12、理页面文件,选择页面文件 打开页面文件 新建页面文件 更改页面标题,选择页面文件,在站点地图中的某个页面文件上单击鼠标即可选择该文件。 按住【Shift】键的同时单击需要选取的文件，可选择多个连续的页面文件。 按住【Ctrl】键的同时单击需要选取的文件，可选择多个不连续的页面文件。,打开页面文件,在页面文件上双击鼠标即可打开该文件。 在选择页面之后，选择文件打开菜单命令打开页面。 选择页面后单击鼠标右键，在弹出的快捷菜单中选择“打开”命令可打开页面。,新建页面文件,在建立好站点地图之后，如果还需要在其中添加新的网页文件，可以在站点地图中新建一个页面文件。,更改页面标题,在站点地图中可对页面标题

13、进行更改，以方便绝对站点的管理。,页面设置,当站点建立好之后，就可以进行具体的网页编辑操作了，但在编辑网页之前，还需要对页面进行一些简单的属性设置以方便以后的工作。,上机实战,本课上机实战将练习创建一个名为“国画欣赏”的站点，将其中的本地站点保存在“D:guohua”文件夹下，远程站点保存在“E:guohua”文件夹下。然后为“国画欣赏”网站建立一个存放图片的文件夹“pic”，并新建名为“index.html”、“ghzs.html”、“jrmh.html”、“ghds.html”、“flxs.html”、“ghlt.html”和“lxwm.html”的网页文件，最后设置“index.html

14、”的页面属性。,课堂讲解 上机实战,第1课 为网页添加文本,课堂讲解,插入文本 格式化文本 项目列表的应用 标尺和网格,插入文本,插入普通文本 插入特殊字符 在字符之间添加空格 插入其他文本,插入普通文本,将插入点定位在文档编辑区中，直接输入文本即可。 在Word等文本编辑软件中编辑好文本之后，将其复制到剪贴板上，然后在Dreamweaver 8中将插入点定位到文档编辑区中，粘贴剪贴板中的文本即可。,插入特殊字符,在Dreamweaver 8中编辑文本时，往往会遇到一些无法通过键盘直接输入的特殊字符，如版权符号、注册商标符号等，这时可通过Dreamweaver 8插入特殊字符的功能进行插入。,

15、在字符之间添加空格,Dreamweaver 8中的文档格式都是以HTML编码形式存在的，而HTML编码中只允许字符之间包含一个空格，所以在Dreamweaver 8中无论按多少次空格键都只会输入一个空格。,插入其他文本,插入水平线 添加水平线 修改水平线 插入日期,添加水平线,在文档编辑区将插入点定位到所需位置，选择插入HTML水平线菜单命令或单击“插入”栏中的“HTML”选项卡在其中单击 按钮即可添加水平线。,修改水平线,初始绘制的水平线的格式往往不能满足实际需要，此时可通过属性面板对其进行修改。,插入日期,在制作网页时，有时需要插入当前的日期，Dreamweaver 8提供了快速插入日期和

16、时间的功能。,格式化文本,设置字体外观 设置字体大小 设置颜色 设置字体样式 设置对齐方式 设置标题格式 设置样式,设置字体外观,用户也可对属性面板的“字体”下拉列表框中的字体列表重新编辑。,设置字体大小,在属性面板的“大小”下拉列表框中选择相应的选项，并选择其后的“单位”下拉列表框中相应的单位选项，即可设置所选文本的字体大小。 其中字体的度量单位有像素（px）、厘米（cm）等，可根据具体情况进行选择，但一般都以像素为单位。,设置颜色,单击属性面板中的 按钮，在弹出的颜色列表框中选择相应的选项可设置所选文本的字体颜色，在其后的文本框中直接输入颜色的英文名（如Red、Green等）或以“#”开头

17、的十六进制颜色代码（如#ff0000、00ff00）设置所选文本的颜色。,设置字体样式,粗体 根据在“首选参数”对话框的“常规”选项中设置的样式参数选择，将或标签应用于选定的文本，即对所选文本加粗。单击按钮即可设置“加粗”设置，再次单击按钮可取消“加粗”设置。 斜体 根据在“首选参数”对话框的“常规”选项中设置的样式参数选择，将或标签应用于选定的文本，即对所选文本进行倾斜设置。选中按钮即可将所选的文本应用“倾斜”。再次单击按钮可取消“倾斜”设置。,设置对齐方式,通过属性面板中的“左对齐”按钮、“居中对齐”按钮、“右对齐”按钮和“两端对齐”按钮可设置文本的对齐方式。,设置标题格式,在属性栏的“格

18、式”下拉列表框中可设置标题格式，其中“段落”是应用标签的默认格式，“标题 1”选项应用标签，设置该选项可以将所选的文本设置成各种标题。标题号越小，字体越大。,设置样式,属性面板中的“样式”下拉列表框可用于显示当前应用于所选文本的样式。,项目列表的应用,有序列表 无序列表 定义列表 为现有文本创建列表 创建嵌套列表 设置项目列表属性,有序列表,有序列表又称为编号列表，是有一定排列顺序的列表，一般前面有数字前导字符，其中前导字符可以是阿拉伯数字、英文字母或罗马数字等。,无序列表,无序列表又称为项目列表，是一系列无顺序级别关系的项目文本组成的列表，一般前面是用项目符号作为前导字符。,定义列表,定义列

19、表不使用项目符号或数字这样的前导字符，通常用在词汇表或说明书中。,为现有文本创建列表,除了先创建列表项再输入文本外，还可以先输入文本，然后再设置列表项。,创建嵌套列表,嵌套列表是包含在其他列表中的列表。,设置项目列表属性,使用“列表属性”对话框可以设置列表项的外观，包括编号样式、项目符号样式等。,标尺和网格,标尺 网格,标尺,标尺分为水平标尺和垂直标尺，分别显示在Dreamweaver 8文档编辑区的上方和左侧。标尺的单位包括像素、厘米和英寸，在默认状态下使用像素为单位。,网格,网格与标尺都是定位工具，但在网页布局中使用网格更方便。文档编辑区中显示了网格后，就可以对网页元素进行准确的定位了。,

20、上机实战,在本课的上机实战中，将在已有基本框架（相关知识将在后面几课详细讲解）的“风行天科技”网站的首页页面中添加文本、项目列表，并对它们进行设置，如缩进、加粗、倾斜、大小、颜色等。,课堂讲解 上机实战,第4课 为网页添加图像,课堂讲解,网页图像的格式及来源 插入图像 设置图像属性 图像高级设置,网页图像的格式及来源,GIF格式 JPEG格式 PNG格式 网页图像来源,GIF格式,GIF全称为“Graphics Interchange Format”，意为可交换图像格式，它是第一个支持网页的图像格式，在PC机和苹果机上都能被正确识别。它最多支持256种颜色，可以使图像变得容量相当小。GIF图像

21、可以在网页中以透明方式显示，还可以包含动态信息，即GIF动画。,JPEG格式,JPEG全称为“Joint Photographic Experts Group”，意为联合图像专家组，它可以高效地压缩图片，丢失人眼不易察觉的部分图像，使文件容量在变小的同时基本不失真，通常用来显示颜色丰富的精美图像。,PNG格式,PNG全称为“Portable Network Graphics”，意为便携网络图像，它是逐渐流行的网络图像格式。PNG格式既融合了GIF能透明显示的特点，又具有JPEG处理精美图像的优势，且可以包含图层等信息，常常用于制作网页效果图。,网页图像来源,网页图像的素材有很多来源，如可以使用

22、图形处理软件（如Photoshop、Fireworks和FreeHand等软件）制作；可以购买网页素材光盘；可以从网络上下载等。,插入图像,直接插入 占位符插入 图像的放大显示,直接插入,选择插入图像菜单命令。 单击插入栏的“常用”选项卡中的按钮。 按【Ctrl+Alt+I】键。,占位符插入,制作网页时还未选定需插入的图像，但确定了图像大小的时候，可以使用占位符来代替图像的方式插入到文档中。 将图像确定后双击占位符，在打开的对话框中设置后插入即可。,图像的放大显示,Dreamweaver 8新增的放大镜功能可以让用户更方便地进行对齐图像、选择较小的对象以及查看较小的文本、动画或网页元素等操作。

23、,设置图像属性,在网页中插入图像后可通过属性面板对其属性进行修改等设置。,图像命名 图像大小 编辑图片 源文件设置,文本说明 图像与文本的对齐 图像边距 图像边框,图像命名,为了在使用Dreamweaver行为（如交换图像）或脚本撰写语言（如JavaScript或VBScript）时可以引用该图像，可在属性面板的“图像”文本框中为图像命名。,图像大小,在Dreamweaver 8中插入图像后系统会自动将图像的原始大小显示在“宽”和“高”文本框（以像素为单位）中。,编辑图片,在网页中选择图像之后，单击属性面板中的按钮，打开图像处理软件，对图像进行处理。如果安装了Fireworks，那么Firew

24、orks将被默认为图像处理软件。如果没有安装，用户也可自己设置使用其他软件中处理图像。,源文件设置,在属性面板的“源文件”文本框中显示了图像的保存路径，如果要重新插入一幅新图像，可以在选取图像后的属性面板中的“源文件”文本框中重新输入要插入图像的地址，或单击右侧后的 按钮，在打开的“选择图像源文件”对话框中重新选择需要的图像。,文本说明,在选取图像后的属性面板的“替换”下拉列表框中可以输入图像的文本说明。,图像与文本的对齐,选取图像后，在属性面板的“对齐”下拉列表框中可设置处于同一行上的图像与文本的对齐方式。,图像边距,选取图像在属性面板的“垂直边距”和“水平边距”文本框中可以设置图像与页面上

25、方和左侧之间的距离，也可以设置图像与其他网页元素之间的距离。,图像边框,选取图像后，在属性面板的“边框”文本框中可以设置图像边框的宽度，单位为像素，“0”表示无边框。,图像高级设置,鼠标经过图像设置 插入Fireworks HTML对象,鼠标经过图像设置,鼠标经过图像是一种在浏览器中查看网页时，鼠标光标经过该图像时，图像发生变化的动态图像。,插入Fireworks HTML对象,Macromedia公司的图形处理软件Fireworks优化后的图像和HTML文件。使用Dreamweaver可直接插入保存到所需的Dreamweaver站点文件夹中。,上机实战,本课上机实战主要练习在网页中插入图像并

26、对其进行属性设置。在练习过程中，将用到课堂讲解中所学的插入图像的方法、图像属性设置的方法、热点链接的设置及鼠标经过图像的创建方法等知识。,课堂讲解 上机实战,第5课 创建超级链接,课堂讲解,超级链接概念 超级链接分类 创建文本超级链接 创建锚链接 创建空链接 创建电子邮件超级链接 创建图像超级链接 创建导航条,超级链接概念,超级链接是指页面对象之间的链接关系，它网页的灵魂，能合理、协调地把网站中的各个元素、页面通过超级链接构成了一个有机整体，使浏览者能快速地访问到想要访问的页面。,超级链接分类,绝对超级链接 文档相对路径 站点根目录相对路径,绝对超级链接,绝对超级链接就是形如“http:/ww

27、w.china/zh_cn”的超级链接地址，它给出了超级链接目标端点完整的URL地址，包括使用的协议“http:/”。一般用于创建站外具有固定地址的超级链接。,文档相对路径,使用文档相对路径不需要给出完整的URL地址，可省去URL地址的协议，只需保留不同的部分。如pic/logo.gif，这是本地站点超级链接中最常用的链接形式。由于相对超级链接的文件之间相互关系并没有发生变化，因此使用文档相对路径创建的超级链接在上传时可以不用更新各个超级链接。,站点根目录相对路径,站点根目录相对路径是形如“/help/help.html”的超级链接地址，它基于站点根目录，在同一个站点中网页的超级链接也可采用这

28、种方法。,创建文本超级链接,文本超级链接是最常见的超级链接，通过使用鼠标点击文本即可从一个网页跳转到另一个网页。,创建锚链接,创建命名锚记 链接命名锚记,创建命名锚记,在制作网页时，为了达到跳转到网页固定位置的目的，可以使用锚链接。通过对网页中指定位置的命名，利用超级链接打开目标网页时可直接跳转到相应的命名位置上。,链接命名锚记,创建好锚记之后，必须创建对应的超级链接源端点。,创建空链接,要想对文本设置行为，首先必须为文本建立空超级链接（空超级链接是一个未指派目标的超级链接），这样行为才会有效。 为文本建立空超级链接时，只要先在文档窗口中选中需要建立空超级链接的文本，然后在属性面板的“链接”文

29、本框中输入一个“#”符号即可。建立空超级链接的目的只是为了应用行为，其他情况下不必建立。,创建电子邮件超级链接,电子邮件在网络应用中十分广泛，在网页中建立电子邮件超级链接可方便网页浏览者与设计者之间的联系。,创建图像超级链接,为一般图像创建超级链接 创建图像热点超级链接,为一般图像创建超级链接,创建图像热点超级链接,要在一幅比较大的图片中添加许多超级链接时，应该将图片化整为零，分割成较小的图片，然后分别为这些小图像上建立超级链接来达到目的，但这时整幅图片就不能对齐，利用Dreamweaver 8的图像热点超级链接功能就能避免这个问题。,创建导航条,插入导航条 编辑导航条,插入导航条,导航条一般

30、由图像或图像组组成，这些图像的显示内容随用户的操作不同而进行相应的变化。导航条为访问者浏览不同网页提供了一条捷径。,编辑导航条,上机实战,本课上机实战制作过程可分为左侧导航图像超级链接的创建、主要内容区文本和图像超级链接的创建、公司Logo下方的图像热点超级链接的创建及底部版权信息区电子邮件超级链接的创建4部分进行。,课堂讲解 上机实战,第7课 在网页中应用框架,课堂讲解,认识框架和框架集 框架和框架集的创建 框架和框架集的选择和删除 框架和框架集的保存 框架和框架集的属性设置 处理不能显示框架的浏览器 框架的链接,认识框架和框架集,框架是将一个页面划分成不同的文档区，每个文档区显示独立的内容

31、，其效果是在浏览网页时，网页中一部分区域（如公司Logo、导航条）内容不改变，而其他区域内容在不断发生改变。 框架集是HTML文件，它定义一组框架的布局和属性，包括框架的数目、大小、位置以及在框架中初始显示页面的地址。框架集文件本身不包含要在浏览器中显示的网页内容（对不能显示框架的浏览器进行的处理除外，即部分），框架集文件只是向浏览器提供应如何显示一组框架以及在这些框架中应显示哪些网页的有关信息。,框架和框架集的创建,在“插入”栏插入预定义的框架集 创建预定义框架集 手动设计框架,在“插入”栏插入预定义的框架集,在Dreamweaver 8中预定义了一些框架集样式，需要使用时直接插入即可。,创

32、建预定义框架集,手动设计框架,框架和框架集的选择和删除,认识“框架”面板 选择框架与框架集 删除框架,认识“框架”面板,“框架”面板中显示所创建的框架结构，并在不同的框架区域中显示框架的名称。当在框架网页中新建、删除框架，或修改框架的尺寸、名称等时，“框架”面板中的示意图会跟随变化。,选择框架与框架集,在编辑窗口中选择 在“框架”面板中选择,在编辑窗口中选择,在编辑窗口中选择框架的方法很简单，按住【Alt】键，在要选择的框架内单击鼠标左键即可。被选取的框架边框呈虚线显示。 选择框架集时，单击框架边框即可，选取的所有框架边框呈虚线。,在“框架”面板中选择,在“框架”面板中单击框架区域中的任意位置

33、即可选择框架，选中的框架以粗黑框显示。 在“框架”面板中单击框架边框即可选择框架集，如果要选择整个框架集，只需单击框架最外面的边框即可。,删除框架,如果窗口中有不需要的框架，可将其删除，用鼠标将要删除框架的边框拖到父框架边框上或拖离页面即可。,框架和框架集的保存,保存框架与框架集之后才能在浏览器中浏览用框架布局的网页。每个框架包含一个网页，一个框架集则包含多个网页，在保存时应保存所有的框架与框架集。 保存框架 保存框架集 保存框架集中的所有网页,保存框架,将插入点定位到要保存的框架中。 选择文件保存框架菜单命令，在打开的“另存为”对话框中像保存其他网页一样指定保存路径和文件名，然后单击“保存”

34、按钮即可。,保存框架集,选中要保存的框架集。 选择文件保存框架页菜单命令，打开“另存为”对话框。 在“保存在”下拉列表框中选择框架集的保存路径，在“文件名”文本框中为框架集命名。 单击“保存”按钮即可保存框架集。,保存框架集中的所有网页,框架和框架集的属性设置,框架集的属性设置 框架集文档标题的设置 框架的属性设置,框架集的属性设置,使用框架集属性面板可以查看和设置大多数框架集属性。,框架集文档标题的设置,当访问者在浏览器中查看该框架集时，标题将显示在浏览器的标题栏中。,框架的属性设置,处理不能显示框架的浏览器,由于在低版本的浏览器中不能正确显示使用了框架的网页和框架中的内容，因此在Dream

35、weaver 8中允许指定在不支持框架的基于文本的浏览器和较旧的图形浏览器中显示内容。此类内容存储在框架集文件中，用标签括起来。当不支持框架的浏览器加载该框架集文件时，浏览器只显示用标签括起来的内容。,框架的链接,在使用了框架技术文档中的链接与一般文档中的链接不同，增加了与框架有关的链接目标，可以在一个框架内使用链接改变另一个框架的内容。,上机实战,本课上机实战主要练习个人网页的页面制作。在练习过程中，主要用到框架的创建、框架和框架集的属性设置、框架和框架集的保存、不能显示框架的处理等知识。本页面分为上中下3个框架来制作，在制作之前应先制作好各框架中要显示的网页。,课堂讲解 上机实战,第8课

36、在网页中应用层,课堂讲解,创建层 认识“层”面板 选择、移动和对齐层 层大小和属性设置 层的显示和隐藏 层名的变更 层的堆叠和删除 层与表格的相互转换,创建层,层的首选参数设置 层的建立 层的嵌套,层的首选参数设置,在新建层之前，通过“首选参数”对话框中的“层”选项来设置层的默认属性。,层的建立,将插入点放置在“文档”编辑窗口中，然后选择插入布局对象层菜单命令将自动在插入点插入一个层。 在“插入栏”的“布局”插入栏中单击“绘制层”按钮，拖动鼠标绘制一个层。 在“插入栏”的“布局”插入栏中单击“绘制层”按钮，在文档编辑窗口中单击鼠标可绘制一个层。 在“插入栏”的“布局”插入栏中单击“绘制层”按钮

37、，按住【Ctrl】键并拖动即可连续绘制多个层。,层的嵌套,层与表格相似，可进行嵌套。在某层内新创建的层称为嵌套层或子层，嵌套层外部的层称为父层。子层可浮动于文本编辑窗口的任何位置，子层的大小也可以大于父层，可根据实际需要嵌套多个层。,认识“层”面板,“层”面板是对层进行管理的场所，可以方便地查看层的结构。要显示或隐藏“层”面板，可选择窗口层菜单命令或按【F2】键。,选择、移动和对齐层,选择层 选择单个层 选择多个层 移动层 对齐层,选择单个层,在文档编辑区中单击层边框。 在层中单击鼠标左键，再单击该层的选择柄。 在“层”面板中单击要选择的层的名称。 按住【Ctrl+Shift】键并在层中单击即

38、可选择层。,选择多个层,按住【Shift】键，在需要选择的多个层中单击，同时“层”面板中选择的层以反白显示。 按住【Shift】键，在“层”面板中单击要选择的多个层的名称。,移动层,在网页制作中往往需要精确定位层的位置，这就需要对创建的层进行移动。,对齐层,在网页制作中常常需要将某些层按照一定的规定对齐。在进行层的对齐操作时，嵌套层中所有子层并不参与层的对齐操作，它们只随父层的移动而移动，并始终与父层保持相对的固定位置。,层大小和属性设置,层大小的设置 设置单个层的大小 设置多个层的大小 层属性的设置 设置单个层的属性 设置多个层的属性,设置单个层的大小,在文档编辑区选择一个层，在出现的调整柄上按住鼠标左键不放并拖动，当调整到适当的大小时释放鼠标即可。 在文档编辑区选择一个层，按住【Ctrl】键的同时再按键盘上的方向键即可按一次1个像素的步幅来调整层大小。 在文档编辑区选择一个层，按住【Shift+Ctrl】键的同时再按键盘上的方向键即可按一次10个像素的步幅来调整层大小。 在文档编辑区选择一个层，以像素为单位在属性面板中输入宽度和高度的值。,设