《Dreamweaver8和Flash8案例教程》第3章框架、表格、层与网页布局.ppt
《《Dreamweaver8和Flash8案例教程》第3章框架、表格、层与网页布局.ppt》由会员分享,可在线阅读,更多相关《《Dreamweaver8和Flash8案例教程》第3章框架、表格、层与网页布局.ppt(162页珍藏版)》请在三一文库上搜索。
1、第3章 框架、表格、层与网页布局,3.1 【案例7】“操作系统比较”网页,3.1.1 学习目标 “操作系统比较”网页的显示效果如图3-1-1所示。该网页被分割成两个部分,网页的左半部分显示出网页的标题和各个页面的链接,单击其中一个链接,即可在网页的右半部分显示出相应的内容,如图3-1-2所示。通过本实例,介绍创建框架与编辑框架,以及在框架内插入HTML文件内容的方法。,图3-1-1 “操作系统比较”网页的显示效果,图3-1-2 单击不同链接后网页的显示效果,框架就是把一个网页页面分成几个单独的区域(即窗口),每个区域就像一个独立的网页,可以是一个独立的HTML文件。,因此,框架可以实现在一个网
2、页内显示多个HTML文件的效果。 对于一个有n个区域的框架网页来说,每个区域有一个HTML文件,整个框架结构也是一个HTML文件,因此该框架网页是一个HTML文件集,它有n+1个HTML文件。 3.1.2 操作过程,1创建框架与编辑框架 (1)创建框架 方法1:单击“文件”“新建”菜单命令,打开“新建文档”对话框,如图3-1-4所示。 单击该对话框左边“类别”栏中的“框架集”选项,再选中该对话框右边“框架集”栏内的一种框架选项。然后单击“创建”按钮,即可创建有框架的网页。,3.1.3 相关知识,图3-1-4 在页面内创建上下两个框架,方法2:单击“插入”(布局)面板的“框架”快捷菜单中的一个按
3、钮,即可在页面内设置出相应的框架,如图3-1-5所示。,图3-1-5 “框架”快捷菜单,方法3:利用“修改”“框架页”“”菜单命令或利用“插入”“HTML”“框架”“”菜单命令,也可以创建框架。,建立了框架后,要增加框架的个数,可采用如下方法:将光标移到框架内,再单击“查看”“可视化助理”“框架边框”菜单选项,使该菜单选项左边有 。然后将鼠标指针移到框架的边缘处,当鼠标指针为“”或“”形状时,向鼠标指针箭头指示的方向拖曳鼠标,即可在水平或垂直方向增加一个框架。,(2)简单编辑框架 调整框架的大小:用鼠标拖曳框架线,即可调整框架的大小。 删除框架:用鼠标拖曳框架线,拖曳到另一条框架线或边框处,即
4、可删除该框架。,(3)设置框架集属性 单击框架的外边框后,可将“属性”栏变为框架集“属性”栏,如图3-1-6所示。改变总框架属性需要通过框架集“属性”栏来完成。,图3-1-6 框架集“属性”栏,“边框”下拉列表框:用来确定是否要边框。选择“是”选项是保留边框;选择“否”选项是不保留边框;选择“默认”选项,表示采用默认状态。通常是要保留边框。 “边框颜色”栏:用来确定边框的颜色。单击该按钮,可弹出颜色板,利用它可确定边框的颜色。也可在文本框中直接输入颜色数据。,“边框宽度”文本框:用来输入边框的宽度数值,其单位是像素。如果在该文本框内输入0,则没有边框。如果“查看”“可视化助理”“框架边框”菜单
5、命令被选中,则网页文档窗口内会显示辅助的边框线(不会在浏览器中显示)。,“值”文本框:用来确定网页左边分栏的宽度或上边分栏的高度。 “单位”下拉列表框:用来选择“值”文本框内数据的单位,单位有像素等。,(4)设置分栏框架属性 按住Alt键,单击分栏框架的内部后,可使“属性”栏变为分栏框架“属性”栏,如图3-1-7所示。分栏框架的框架“属性”栏中各选项的作用如下。,图3-1-7 分栏框架“属性”栏,“框架名称”文本框:用来输入分栏框架的名字。 “源文件”文本框:用来显示该分栏内HTML文件的路径和文件的名字。,“滚动”下拉列表框:用来选择分栏是否要滚动条。选择“是”选项,表示要滚动条;选择“否”
6、选项,表示不要滚动条;选择“自动”选项,表示根据分栏内是否能够完全显示出其中的内容来自动选择是否要滚动条;选择“默认”选项,表示采用默认状态。,“不能调整大小”复选框:如果选中该复选框,则不能用鼠标拖曳框架的边框线,调整分栏大小;如果没有选中该复选框,则可以用鼠标拖曳框架的边框线,调整分栏大小。 “边框”下拉列表框:用来确定是否要边框。当此处的设置与总框架“属性”栏的设置矛盾时,以此处设置为准。,(1)单击网页框架的某一个区域内部,使光标移到该框架内。 (2)然后可以像在没有框架的网页页面内输入文字和导入对象那样,在选中的框架区域内输入文字和导入对象。也可以单击“文件”“在框架中打开”菜单命令
7、,弹出“选择HTML文件”对话框。利用它可将外部的HTML文件加载到选定的框架区域内。,2在框架内插入HTML文件内容,3.2.1 学习目标 “主流电脑配置单”网页的显示效果如图3-2-1所示。由于电脑的配置单有很强的条理性,所以在该网页中使用表格对网页中的数据进行排版。,3.2 【案例8】“主流电脑配置单”网页,图3-2-1 “主流电脑配置单”网页的显示效果,表格比较适合显示结构性比较强的内容,如值班表、课程表和考试安排表等。表格也是网页中经常使用的一个元件。 3.2.2 操作过程,1表格的基本操作 将光标移到需要插入表格的位置,单击“插入”(常用)面板内的“表格”按钮 ,弹出“表格”对话框
8、,如图3-2-2所示。,3.2.3 相关知识,(1)“表格”对话框内各选项的作用 “行数”和“列数”文本框:输入表格的行数和列数。 “表格宽度”文本框:输入表格的宽度值,其单位为像素或百分数。如果选择“百分比”,则表示表格占页面或它的母体容量宽度的百分比。,“边框粗细”文本框:输入表格边框的宽度数值,其单位为像素。当它的值为0时,表示没有表格线。 “单元格边距”文本框:输入的数值表示单元格之间两个相邻边框线(左与右、上和下边框线)间的距离。,“单元格间距”文本框:输入单元格内的内容与单元格边框间的空白数值,其单位为像素。这种空白存在于单元格内容的四周。 “页眉”栏:用来设置表格的页眉单元格。被
9、设置为页眉的单元格,其中的字体将被设置成居中和黑体格式。,“辅助功能”栏:“辅助功能”栏中各选项的作用如下。 “标题”文本框:设置表格的标题。 “对齐标题”列表框:设置标题与表格的位置关系,默认为表格的顶部。,“摘要”文本框:设置表格的摘要。 通过上述设置后,单击“确定”按钮,即可插入符合要求的表格,如图3-2-3所示。,图3-2-3 网页中的表格,(2)调整表格大小 调整整个表格的大小:单击表格的边框,选中该表格,此时表格右边、下边和右下角会出现3个方形的黑色控制柄。再用鼠标拖曳控制柄,即可调整整个表格的大小。,调整表格中行或列的大小:将鼠标指针移到表格线处,当鼠标指针变为双箭头横线或双箭头
10、竖线时拖曳鼠标,即可调整表格线的位置,从而调整表格行或列的大小。,(3)表格和单元格标签 表格标签:选中表格后,在表格的下面用绿色显示出了表格的宽度,如图3-2-3所示。单击下边的三角按钮,可以弹出“表格”快捷菜单。利用“表格”快捷菜单可以进行选择表格、清除表格列的宽度、左侧插入列和右侧插入列等操作。,单元格标签:选中表格后,在表格标签的下面显示出了每一列单元格的标签,如图3-2-3所示。单击任意一个下三角按钮,可以弹出“单元格”快捷菜单,操作方法和“表格”快捷菜单基本相同。,(4)选择表格 选择整个表格:单击表格的外边框,可选中整个表格,此时表格右边、下边和右下角会出现3个方形黑色控制柄。
11、选择多个表格单元格:按住Ctrl键,同时依次单击所有要选择的表格单元格。,选择表格的一行或一列单元格:将鼠标移到一行的最左边或移到一列的最上边,当鼠标指针呈黑色箭头时单击,即可选中一行或一列。,选择表格的多行或多列单元格:按住Ctrl键,将鼠标依次移到要选择的各行或各列,当鼠标指针呈黑色箭头时单击,即可选中多行或多列。还可以将鼠标移到要选择的多行或多列的起始处,当鼠标指针呈黑色箭头时,拖曳鼠标也可选择多行或多列单元格。,单击表格的外边框,选中整个表格,此时表格的“属性”栏如图3-2-4所示。表格“属性”栏内各选项的作用如下。,2设置整个表格的属性,图3-2-4 表格的“属性”栏,“表格Id”下
12、拉列表框:用来输入表格的名字。 “行”和“列”文本框:用来输入表格的行数与列数。 “宽”和“高”文本框:用来输入表格的宽度与高度值。它们的单位可利用其右边的下拉列表框来选择,其中的选项有“%”(百分数)和“像素”两种。,“填充”文本框:输入单元格内的内容与单元格边框间的空白数,单位为像素。 “间距”文本框:输入单元格之间两个相邻边框线间的距离。 “对齐”下拉列表框:该下拉列表框内有“默认”、“左对齐”、“居中对齐”和“右对齐”四个选项。,“边框”文本框:输入表格边框宽度,单位为像素点。 “背景颜色”按钮与文本框:用来设置表格的背景色。 “背景图像”文本框与文件夹按钮:单击文件夹按钮,可以弹出“
13、选择图像源文件”对话框,利用它可以给表格添加背景图像。,“边框颜色”矩形按钮与文本框:用来设置表格的边框线颜色。 6个按钮: 按钮用来清除行高,按钮用来清除列宽, 按钮用来将表格宽度的单位转换为像素, 按钮用来将表格宽度的单位改为百分比, 按钮用来将表格高度的单位转换为像素, 按钮用来将表格宽度的单位改为百分比。,“类”下拉列表框:用来设置表格的样式。 3设置表格单元格的属性 按住Ctrl键,单击表格中的单元格,选中几个单元格。此时“属性”栏变为表格单元格“属性”栏,如图3-2-5所示。,图3-2-5 表格单元格“属性”栏,在表格单元格“属性”栏中,上半部分用来设置单元格内文本的属性,它与文本
14、“属性”栏的选项基本一样。下半部分用来设置单元格的属性,各选项的作用如下。,“合并所选单元格”按钮 :选中要合并的单元格,再单击 按钮,即可将选中的单元格合并(将图3-2-3所示表格左上角的2行3列单元格合并),其效果如图3-2-6所示。,图3-2-6 合并单元格后的效果,“拆分单元格”按钮 :选中一个单元格,再单击 按钮,弹出“拆分单元格”对话框,如图3-2-7所示。选中“行”单选项,表示要拆分为几行;单击选中“列”单选项,表示要拆分为几列。在“列数”数字框内选择行或列的个数。再单击“确定”按钮即可。将图3-2-6所示的表格中左上角的单元格拆分为2列,其效果如图3-2-8所示。,图3-2-7
15、 “拆分单元格”对话框,图3-2-8 拆分单元格,“水平”和“垂直”下拉列表框:用来选择水平对齐方式和垂直对齐方式。 “宽”和“高”文本框:用来设置单元格的宽度与高度。 “不换行”复选框:如果选中该复选框,则当单元格内的文字超过单元格的宽度时,不换行,自动将单元格的宽度加大到刚好可以放下文字;没选中该复选框,则当单元格内的文字超过单元格的宽度时,自动换行。,“标题”复选框:如果选中该复选框,则单元格中的文字以标题的格式显示(粗体、居中);如果没选中该复选框,则单元格中的文字以正文的形式显示。,“背景”按钮与文本框:单击上边的“背景”文件夹图标,可以弹出“选择图像源文件”对话框,利用该对话框可以
16、给表格单元格添加背景图像。下边的“背景颜色”矩形按钮与文本框用来设置表格单元格的背景色。当该文本框为空时,其设置与页面表格的“背景”设置一样。,“边框”按钮与文本框:用来设置表格单元格的双线条边框线的颜色。当该文本框为空的时候,其设置与表格的“边框”颜色一样。,3.3.1 学习目标 “CPU进化史”网页的显示效果如图3-3-1所示。该网页是使用层对网页中的内容进行布局的。层是一种可以插入各种网页对象,可以自由定位、精确定位和容易控制的容器,它实际上就是一个网页子页面。,3.3 【案例9】“CPU进化史”网页,在层中,可以嵌套其他的层,层可以重叠,可以控制对象的位置和内容,从而实现网页对象的重叠
17、和立体化等特效,还可以实现网页的动画和交互。,图3-3-1 “CPU进化史”网页的显示效果,目前,WWW网页已经采用了动态超文本标记语言DHTML技术,它可以实现网页的多层化、立体化和动态化等特效,使网页更加生动活泼。Internet Explorer 4.0及以上的版本使用层的实现方法是CSS(层叠样式表)的层,它使用标记和来创建层和定位层,这是由万维网联盟指定的。,Netscape Navigator 4.0及以上的版本使用层的实现方法是Netscape的层,它使用标记和来创建层和定位层,这是由Netscape公司指定的。 3.3.2 操作过程,1设置层的默认属性和创建层 (1)设置层的默
18、认属性 单击“编辑”“首选参数”菜单命令,弹出“首选参数”对话框,再选中该对话框内“分类”列表框中的“层”列表项,这时“首选参数”对话框如图3-3-2所示。“首选参数”对话框内各个选项的作用如下。,3.3.3 相关知识,图3-3-2 “首选参数”对话框,“显示”下拉列表框:用来设置默认状态下层的可视度。可以选择“default”(浏览器的默认状态)、“inherit”(继承母体的可视度)、“visible”(可视)和“hidden”(隐藏)。,“宽”和“高”文本框:用来设置默认状态下插入层的宽度和高度,单位为像素。 “背景颜色”按钮与文本框:用来设置默认状态下插入层的背景颜色,默认值为透明。单
19、击 按钮可以弹出颜色板,利用它来选定颜色,也可以在文本框内输入颜色的代码。,“背景图像”文本框与“浏览”按钮:用来设置默认状态下插入层的背景图像。单击“浏览”按钮,可以弹出“选择图像源文件”对话框,利用它可以设定层的背景图像。 “嵌套”复选框:选择它后,可以在将层拖曳到其他层时实现嵌套。,“Netscape 4兼容性”复选框:选择它后,Dreamweaver会向HTML文件的标记中加入JavaScript函数,用来解决在Netscape 4.0浏览器中添加嵌入CSS层时可自动调整层的尺寸,避免异常问题的产生。,(2)在页面中创建层 单击“插入”(布局)面板中的“描绘层”按钮 ,将鼠标指针移到文
20、档窗口之中,这时鼠标指针变为十字线状态。再在页面内拖曳鼠标来创建层,如图3-3-3所示。用鼠标将“描绘层”按钮 拖曳到网页页面中,也可在页面光标处插入一个默认属性的层。,图3-3-3 在页面内创建一个层,将光标移到要插入层的位置,单击“插入”“布局对象”“层”,(1)选定层 在改变层的属性前应选定层,选中的层会在层矩形的左上角产生一个双矩形形状控制柄图标 ,同时在层矩形的四周产生8个方形控制柄。选定一个层的情况如图3-3-4所示。选定层的方法可以有多种,操作方法如下。,2层的基本操作,图3-3-4 选定一个层,单击层的边框线,即可选定该层。 单击层的内部,会在层矩形的左上角产生一个双矩形形状控
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Dreamweaver8和Flash8案例教程 Dreamweaver8 Flash8 案例 教程 框架 表格 网页 布局
链接地址:https://www.31doc.com/p-2895359.html