第二章使用网页工具制作静态网页.ppt

一、在网页中插入层 body div id=apDiv2/div /body 我们可以在层内插入文字、图片、媒体、表格、表单等元素。 2. 插入层（DIV） 我们也可以使用 “插入”-“布局对象”-“DIV标签”菜单命令的方式来插入层, 二、表格和层的相互嵌套 在层中可嵌套层、表格、表单等，表格中也可以嵌 套层、表格，要把表格和层灵活地用到网页中去。对 于初学者来说，可以以表格为主，以层为辅。 由于层可以叠加在其它对象（如表格、层等）的上 面或下面，因此在制作菜单等需要重叠时可以使用层 。当ID标记符样式中没有定义层的位置的时候，层会 显示在放置div/div标记符的地方，如： 三、 使用菜单插入层 把光标放在要插入层的位置，使用菜单[插入]-[布局对象] -[层]，然后拖动新插入的层到合适的位置就可以了。 Dreamweaver自动在head部分插入CSS样式表，当然可以使用CSS 面板管理这些样式表。可以使用菜单[窗口] -[层]命令打开 “层面板”以更好地管理层，使用“属性”面板修改层的属性。 四、使用层布局页面 网页的布局，除了可以使用表格，我们还可以使用DIV层和CSS样式来布局网页：可以把层想象成一行一列、可以嵌套、可交叉层叠、用CSS控制样式、无边框的特殊表格。 执行“文件”-“新建”命令，新建文档对话框如图，在对话框中选择“空白页”、“页面类型”选择“HTML”、并选择一种布局（如： ）。 单击“创建”按钮则出现如图所示的网页布局，这是一种DIV+CSS的网页布局。 四、使用层布局页面 几种常见DIV+CSS网页布局 第2.8节 框架的使用 【本节内容】 一.什么是框架 二.创建框架集网页 三.框架应用示例 一.什么是框架 框架就是浏览器窗口中的一个区域，框架集是定义 一组框架的布局和属性的一个特殊网页。 框架集（frameset）中包含多个框架（frame），其中每个框架指定显示一张网页，这样就把多张网页组织到一张网页中来了。用户在访问框架集网页时，多张网页按照框架集制定的规则显示出来。框架集标签frameset/frameset既不放在头部head元素内，也不放在body元素内。而是放在head元素之后、body元素之前。 一.什么是框架 框架集和框架的基本格式是： frameset rows=n1,n2,… cols=m1,m2,… frameborder=yes|no border=x1 framespacing=x2 frame src=file1.html name=name1 id=idname title=title1 / frame src=file2.html name=name2 id=idname title=title1 / …… /frameset 二. 创建框架集网页 1、简单的框架集 例：?一个框架集把页面分成上下两个部分，上、下部分别显示网页up.html和down.html，框架集的代码见教材2-7frameset.html： 二.创建框架集网页 2、框架的嵌套 当网页需要更复杂的框架结构时，可以采用框架的嵌套。使用 frameset/frameset标记符替换frame/frame标记符， 实现框架的嵌套。例如，以下HTML代码创建了一个带有嵌套框 架的框架集：代码见教材2.8节。 二.创建框架集网页 3、使用Dreamweaver CS4创建框架页 使用菜单[文件]-[新建]，在弹出的对话框中选中“框架集”类别，再选中某种框架集，点击[创建]按钮即可创建框架页。可以使用菜单[文件] -[保存全部]来依次保存框架集和多个网页。 DreamweaverCS4提供了“框架”（Shift+F2打开）面板和“属性”面板来管理和修改框架。 三.框架的应用示例 例如，要设计一个介绍中国网页设计学院（有多个系部）情况的网页，已有学院简介xueyan.html、计算机系简介jisuanjixi.html、美术系简介meishuxi.html、动画系简介donghuaxi.html几个简单的网页。通过创建框架式结构可将这些网页组合起来。 执行“文件”-“新建”命令，在对话框中选定“示例中的页”-“框架页” 三.框架的应用示例 练习 1．在D盘中建立站点mySite，并建立图像文件夹和网 站主页。 2．使用表格布局页面，插入图片，使用CSS格式化文 字，制作如下图所示的网页。 3．使用插入栏插入不同的表单元素，制作用户注册 页。 4．把2.8.2节中再