《网页(二版)第2章》由会员分享，可在线阅读，更多相关《网页(二版)第2章（44页珍藏版）》请在金锄头文库上搜索。
1、网页制作及应用,第二章 Dreamweaver8 网页设计技术,本章学习目标,1.站点的建立与使用。 2.工具、菜单、面板组、属性面板组的使用。 3.文本的格式化与CSS样式。 4.超链接的使用。 5.用表格、框架和层布局网页。,2.1 Dreamweaver简介,Dreamweaver 由Micromedia公司出品，是当今最流行的专业网页设计应用软件，还用来进行网站的建设与管理、网页可视化编程和脚本编写。既可以用来制作静态网站和静态网页，也可以用来制作动态网站和动态网页。具有跨平台、跨浏览器的特点。,1. Dreamweaver8 的起始页,2. Dreamweaver8 的工作窗口,3.
2、 Dreamweaver8 的文档窗口,4.Dreamweaver8 的状态栏,5.Dreamweaver8 的属性面板 (不同对象属性面板也不同,以下是文本的属性面板),6. Dreamweaver8 的面板组,2.2 创建及管理站点,为了使本地站点上传到服务器后文件之间保持正常的链接关系，应该把所有网站资源放入本地站点中，如：网页、图片、歌曲等。所以，首先要在Dreamweaver中创建一个逻辑站点，并让逻辑站点指向位于本地硬盘的本地站点，这样就可以使制作的网页和网页之间的超链接在本地站点中完成。Dreamweaver中的站点只代表该逻辑站点与本地站点的关联，删除Dreamweaver中的
3、站点后本地站点仍然存在。,1.新建站点(举例说明),(1)在E盘创建文件夹“weblx”作为本地站点，用来放置所有站点资源。 (2)“站点”菜单“新建站点”在对话框中单击“高级”选项卡左边分类项目中选“本地信息”。 (3)在“本地信息”右窗口的“站点名称”框中为站点起名为“mysite”，这个名字是Dreamweaver中使用的站点名字,是站点的逻辑名。要注意站点名称是区分大小写的。 (4)在“本地根文件夹”中输入本地文件夹的地址。本例中输入e:weblx。 (5)勾选“自动刷新本地文件列表”，向本地站点中拷贝文件或从本地站点中删除文件时，会自动更新Dreamweaver中的逻辑站点。 (6)
4、勾选“启用缓存”，可以加快站点中链接更新的速度。 (7)在“链接相对于”框中选“文档”，让所有的链接使用相对地址，这样整体上传到服务器时链接关系不会出错。 (8)单击“确定”按钮,结束Dreamweaver中的站点设置。,2.关于站点操作的快捷菜单,3.站点文件的显示,单击站点面板最右边的按钮，可以直观地查看站点中文件之间的链接关系，再次单击该按钮取消查看。如右图所示。,2.3 页面设计,1.创建文档,方法1：在起始页“创建新项目”列表中单击“HTML”，建立一个空白页。 方法2：在工作窗口打开“文件”菜单选“新建”“类别”列表中选“基本页”“基本页”列表中选“HTML” 单击“创建”，建立一
5、个空白页。 方法3：在站点中右击站点名快捷菜单中选“新建文件”给文件起名（扩展名为.htm或.html）双击新建的网页文件在工作窗口可以看到打开的网页文件。,2.保存文档,“文件”菜单“保存”选择与逻辑站点相关联的本地站点（如：e:weblx）为文件起名单击“保存”在Dreavweaver站点面板中单击刷新按钮。可以看到新建的文件被显示在站点面板中。,3.页面属性,“修改”菜单“页面属性”，打开“页面属性”对话框，如图所示.,4.使用CSS样式格式化文本,CSS（Cascading Style Sheet）译为“层叠式样式表”，是一系列预制的格式规则，包括对文字和段落的修饰，用于控制网页的外观
6、，使整个站点中的网页格式保持统一。用CSS样式可以快速实现网页格式化。 CSS样式表文件是纯文本格式，对应的扩展名为.css，可以使用任何纯文本编辑器创建或打开样式表文件。建立样式表文件要依据CSS规则，它由两部分组成：选择器和声明。选择器为样式名称，声明用于定义样式元素。,新建和使用CSS样式(举例说明):,1.“文本”菜单“CSS样式”“新建” 。 2.在“名称”文本框中输入样式名a1。 3. “选择器类型”选“类”,使创建的样式应用于文本区域或文本块。 4. “定义在”选仅对该文档,使定义的样式仅能应用于当前文档。 5.单击“确定”按钮出现一个对话框，在对话框中定义样式的属性。 6.创建
7、样式后单击“确定”按钮。此时，在属性面板的样式框中会看到该样式的名称a1 。 7.选取一段文本,在属性面板的样式框中单击a1,文本被格式化为所定义的样式.,5.新建CSS样式文件,为了便于组织和管理样式，通常把样式放在一个样式文件中。也就是说，先建样式文件，然后再建样式。步骤如下： （1）打开“新建CSS规则”对话框； （2）“定义在”选择“新建样式表文件”选项； （3）为样式确定一个类型为样式起名为b1； （4）单击“确定”按钮在打开的对话框中为样式表文件起名为ysb.css将样式表文件保存在Dreamweaver站点对应的本地文件夹中。 （5）在样式面板中可以看到仅对文档的样式a1和保存在
8、样式表文件ysb.css中的样式b1。,6.插入图像,在网页中插入图像可以按以下操作步骤进行： (1)为插入的图像预留空间，通常把图像放在表格里，使图像排列整齐。 (2)用图像处理软件将图像处理成预定尺寸，能有效地减少文档尺寸。 (3)用下列3种方法之一将图像放入页面有指定位置。 “插入”菜单“图像”在对话框中选图像文件单击“确定”按钮。 单击“常用”选项卡中“图像”按钮在对话框中选图像文件“确定”。 直接从站点中将图像拖到指定位置。,7.插入Flash对象,“插入”菜单“媒体”“Flash”。 直接从站点中将Flash影片文件拖入设计窗口。 单击“常用”卡的媒体按钮在选项中选“Flash”。
9、如图所示:,2.4 创建超链接,1.什么是超链接 所谓超链接，是一个从起始端点到目标端点的跳转，由2个端点和1个方向组成。起始端点称为“源点”，通常是文字、图像或图像的热区。目标端点又称为“锚点”，可以是任意网络资源，如：网页、图像、音乐、影片、电子邮件等。定义了超链接的文本通常显示为带有下划线的蓝色文本，浏览网页时，当鼠标指向定义了超链接的文字或图像时，鼠标指针会变为手型，此时单击鼠标会跳转到该超链接的目标端点处。,2.文档位置和路径,超链接有3种类型：绝对路径、相对路径和基于站点的相对路径。 (1)如果超链接路径中包含所使用的协议，而且与链接源点所处位置无关，称这种链接路径为绝对路径，例如
10、，一个使用http协议的绝对路径可以写为：http:/ (2)如果超链接路径描述源点与锚点相对位置，也就是由当前文件所在位置引起的路径，称这种连接路径为相对路径。使用相对路径的站点结构和文档相对位置不变，整个本地站点上传到服务器时文档之间的链接关系不变。所以，提倡使用相对路径。 (3)从站点根目录开始的路径称为站点根目录相对路径，提供从站点文件夹到文档的路径，与起始端点的位置无关，用斜线“/”表示站点根目录。例如：/liran/index.htm。这种路径能够保持站点结构和文档相对位置不变，也被提倡使用。,3.超链接源点与超链接类型,超链接的源点通常采用文本和图像，图像作为超链接源点又可以用两
11、种方式：用整个图像作为源点或用图像热区作为源点。超链接的类型由锚点决定，主要有以下几种(1) 在本站点之间的超链接称为内部链接，源点在本站点中，锚点可以是本站点中的网页、图像、影片、声音文件等。 (2) 跳转到其他站点的超链接称为外部链接，锚点是其他站点的文档。(3) 跳转到文档某一位置的超链接称为局部链接，锚点是当前文档或本站点其他文档的某一位置，还可以是其他站点文档的某一位置。(4) 启动电子邮件程序的超链接称为Email链接，锚点是一个已经填好收件人地址的空白电子邮件。(5) 没有锚点的链接称为空链接，用来激活定义了空链接的对象和文本，以便为其添加动作。(6) 用来链接一个JavaScr
12、ipt脚本或函数的链接称为脚本链接，实现相应运算效果。,4.锚点的打开方式,属性面板“目标”框默认提供4个选项：_blank、_parent、_self和_top,作为锚点的打开方式.(1)_blank，使锚点在新窗口打开；(2)_self，使锚点在原窗口打开；(3)_parent，使锚点在上一级窗口打开；(4)_top，使锚点打开的窗口在所有窗口的最上层。如果定义了框架结构，“目标”框还会提供框架位置的名称。超链接设置完成后，链接源的文字默认颜色为蓝色并带有下划线。,2.5 用表格布局页面,表格是对文本和图像进行布局的常用工具，在表格中可以放置多种对象，如文本、图像、表单等。,1.创建表格的
13、方法 (1) 单击“常用”选项卡中表格按钮。 (2)“插入”菜单“表格”。,2.编辑表格 (1)添加行或列 单击一个单元格“修改”菜单“表格”“插入行”（或“插入列”） 。 (2) 删除行或列 选定完整的行或列“编辑”菜单“清除”（或按delete键） 。 (3) 合并单元格 选取连续的单元格“修改”菜单“表格”“合并单元格”，或单击属性面板中的“合并单元格”按钮。 (4) 拆分单元格 单击一个单元格“修改”菜单“表格”“拆分单元格”在对话框中定义拆分的行数或列数，或单击属性面板中的“拆分单元格”按钮。 (5) 使用剪切、复制、粘贴命令对所选单元格进行操作，能保留单元格的格式设置。,3. 设置
14、表格属性 选定表格后，在表格的属性面板中设置表格属性。如图所示。,4. 用布局模式布局页面布局表格用来完成稍微复杂一点的页面布局，还可以与标准表格相互转换。先用布局表格给页面划分大的区域，再用布局单元格对页面做细致的划分。 如图所示。,（1）绘制布局表格和嵌套的布局表格最外层的布局表格只能上下排列，嵌套的布局表格可以上下左右排列。如图所示。,（2）绘制布局单元格 用布局单元格在布局表格中进行详细设计，产生组成网格的行和列。布局单元格可以占据数行数列，但不能相互重叠。如果两个布局单元格离的太近，系统会自动将两个单元格靠齐以维持不重叠的结构。如图所示。,用布局表格设计页面举例，如图所示。,2.6
15、层的使用层可以放在网页任何位置，比表格更灵活，常用来作为表格的补充。层中不但可以插入文本、图像、表格等对象，还可以在层中嵌套层。,1在网页中插入层 （1）“插入”栏“布局”卡当前单击“绘制层”按钮在页面中拖动鼠标画层。 （2）“插入”菜单“布局对象”“层”。如图所示。,2. 层的属性面板 如图所示。,3. 层面板 在层面板中可以对层进行各种操作，如图所示。,（1）双击“名称”列中层的名称输入新的层名称， 可以改变层名称。层名称由字母和数字组成，以字 母开头，不能用汉字。 （2）勾选“防止重叠”复选框，则层与层不能重叠。 （3）在层的眼睛列下单击，改变该层的可见性。眼睛睁开表示该层可见，眼睛闭合
16、表示该层不可见。默认情况下没有眼睛图标，此时层为可见的。 （4）层的叠放次序是由Z列中的数字决定，数字小的层会被数字大的层覆盖，单击数字后改为其他数字，可以改变该层的显示等级。数字大小是相对的，只要分出大小来即可。,4. 层与表格相互转换表格与层是可以相互转换的，它们之间的转换用“修改”菜单的“转换”子菜单完成。菜单如图所示。,2.7 用框架布局页面框架是一种划分浏览器窗口的技术，将浏览器窗口划分成若干区域，在各区域中显示不同的HTML文档。,浏览器窗口的划分信息存放在框架集中，框架集是HTML文档，它定义了一组框架的布局和属性，包括框架数目、框架大小和位置，以及每个框架初始显示页面的URL。如果采用了框架技术，框架集的名称通常是主页名称，如index.html。创建框架集通常先用系统提供的预定义框架集样式，然后再对所生成的框架集样式进行修改。,1插入预定义框架集单击“布局”卡的“框架”按钮，弹出菜单显示所有系统提供的预定义框架集样式。菜单和“顶部和嵌套的左侧框架”如图所示。,
