（中职）网页设计与制作项目七布局网页电子课件

1、正版可修改PPT课件（中职）网页设计与制作项目七布局网页电子课件项目七 布局网页任务一 运用表格布局网页网页布局 插入表格表格属性实例制作=本节提纲网页布局左右对称结构布局“同”字型结构布局“回”字型结构布局“国”字型结构布局“T”字型结构布局自由式结构布局标题正文型结构布局插入表格表格属性。活动一：。自主练习用表格创建一个如图所示的各展馆汽车详情图。表格嵌套在定义表格宽度时，宽度单位是选择百分比还是像素，应视具体情况而定。一般情况下，如果是网页最外层表格，应选择像素为单位， 否则，表哥的宽度将随浏览器的大小而二变化，网页上显示的内容将出现混乱。而内嵌得表格，选择百分比和像素均可以，因为该表哥

2、所在的单元格的宽度是固定的。活动二：。自主练习用给定的素材包利用表格布局制作如下网页任务二 利用层布局网页层 层是网页中用来放置文本、图像、动画、表单、插件等网页元素的载体。层在Dreamweaver 网页编辑区中可以自由移动，改变层在网页中的位置，便可实现层中网页元素位置的改变。实际上，层的应用技术也是一种网页元素的定位技术，利用层能够精确对页面元素定位。设计者可以控制多个层的叠放次序，显示或隐藏层。层与时间使用，可以很方便地设计出动态页面效果，层与行为配合使用，还可以很方便地制作出滚动字幕、下拉式菜单等页面效果。层的创建创建普通层 使用菜单命令创建层将光标放在要创建层的位置选择“插入”|“

3、布局对象”|“层”命令，即可在插入点所在位置插入一个默认大小的层。“编辑”|“首选参数” 创建嵌套层 将光标放在已建立层的内部，然后选择“插入”|“布局对象”|“层”菜单命令插入层，插入后该层即为嵌套层。 使用拖动的方法，在“布局”选项卡上按住“绘制层”按钮拖动到一个已经建立的层的内部，则新建立的层即嵌套层。 使用绘制层的方法创建嵌套层，单击“布局”选项卡中的“绘制层”按钮，然后在层的内部绘制层。是否需要按Alt键？ 嵌套层嵌套层的子层可以在其父层中间，也可以在其父层外边，嵌套层永远在其父层上方。对于普通层而言，它的层标记将依次出现。 选中一个层 单击文档窗口中的层标记 单击层中的任意位置来激

4、活层，然后单击层左上角的选择手柄 单击层边框，即可选中该层 在没有层被激活或被选中的情况下，按住Shift键，再单击层中任意位置，也可选中该层； 直接在层面板上单击层名称，在文档窗口中会选中相应的层。层的选择 选中多个层按住Shift键，再在每个要选中的层中单击鼠标，可选中多个层。按住Shift键，再在层面板中单击两个或多个层的名称，可选中多个层。图1 被激活的层 图2 被选中的层 设置层属性 层的默认属性 在菜单栏中选择“编辑”|“首选参数”命令，在弹出的“首选参数”对话框中选择左侧“分类”列表中的“层”，对话框右侧就会出现与层相关的参数。Default(默认状态)，Inherit(继承父层

5、的可见性)，Visible（设置层为可见），Hidden（设置层为隐藏）使用绘制层的方法创建嵌套层，单击“布局”选项卡中的“绘制层”按钮，然后在层的内部绘制层。是否需要按Alt键？确定当层的内容超出层范围时处理的方式。Visible（增加层尺寸，显示超出部分的内容），Hidden（保持层尺寸不变，隐藏超出部分的内容），Scroll（增加滚动条），Auto（当内容超出层尺寸时，自动增加滚动条）层“属性”面板用户可在“层”属性面板上分别对每个层或多个层进行设置。Default(默认状态)，Inherit(继承父层的可见性)，Visible（设置层为可见），Hidden（设置层为隐藏）设置当前层的名

6、称。层名称中不能带有符号和汉字，也不能以数字开头，只能是英文字母和数字。在【Z轴】文本框中，可设置当前层在层重叠中的顺序，z值大的在上面。设置当前层相对于页面或父层的左上角距离。“层”面板 层的重叠顺序跳整层的可见性（默认为可见）防止层重叠调整层嵌套在层面版中：按住Ctrl键+拖动层 方法有两种：通过层的“属性”面板;通过“层”面板.设置层的顺序 层的显示和隐藏 层大小的调整选中层后，在“层”属性面板上的“宽”和“高”文本框中可以直接设置层大小。选中层，把鼠标放到边框上的控制点时，拖动层边框上的箭头，即可在相应方向上改变层大小。如果希望将层的大小每次改变1像素的距离，则可以按住Ctrl+方向键

7、，每按一次方向键，即可在相应方向上改变1像素的距离。层的移动 通过选中层，在“层”属性面板中的“左”和“上”文本框中输入相应的数值，即可改变它在页面中的位置。选择一个层（或按住Shift键，用鼠标选择多个层），拖动并移动到需要的位置。选择一个层，用方向键以1像素为单位移动层。层的对齐 层与表格的相互转换将层转换为表格 选择“修改”|“转换”|“层到表格”命令将表格转换为层 选中表格，然后选择命令“修改”|“转化”|“表格到层”。层的对齐方式，包括左对齐、右对齐、对齐上缘和对齐下缘等。 设置层的对齐方法是:选中层，选择“修改”|“排列顺序”命令，打开相应的子菜单，然后选择对齐方式即可。活动实例：

8、自主练习用层创建一个如图所示的页面图。任务三 制作框架和框架集框架及框架集框架框架是把一个浏览器窗口划分为多个区域、每个区域都可以显示不同的HTML文档的网页布局方式，并且这些HTML文档都是独立里保存在站点中的，框架好比是提供了显示这些文档的容器。因此在使用框架结构时，框架中个网页可以独立拖动滚动条来显示更多的内容而不会影响tirade框架的内容。框架集框架集是HTML文件他定义一组框架的布局和属性，包括框架的数目、大小和位置等。以及在每个框架中处世显示页面的URL。框架集文件本身不包含要在留言其中显示的HTML内容，知识相浏览器提供如何显示一组框架以及在这些框架中应显示啊写文档的有关信息。创建框架和创建普通网页有所区别，其具体的创建顺序如下：创建框架结构：首先需要创建一个新网页，该网页将作为控制框架结构的页面，然后在Dreamweaver中将对该网页进行拆分，从而获得自己需要的框架