项目七 布局网页（课件）- 高一《网页设计与制作》同步教学（机工版·2018）

项目七 布局网页 > = = 任务一 运用表格布局网页 = 网页布局 插入表格 表格属性 实例制作 = 本节提纲 = 网页布局 左右对称结构布局 “同”字型结构布局 “回”字型结构布局 “国”字型结构布局 “T”字型结构布局 自由式结构布局 标题正文型结构布局 = 4 插入表格 = 表格属性 。 = 活动一： 。 = 自主练习 用表格创建一个如图所示的各展馆汽车详情图。 = 表格嵌套 在定义表格宽度时，宽度单位是选择百分比还是像素，应视具体情况而定。一般情况下，如果是网页最外层表格，应选择像素为单位， 否则，表哥的宽度将随浏览器的大小而二变化，网页上显示的内容将出现混乱。而内嵌得表格，选择百分比和像素均可以，因为该表哥所在的单元格的宽度是固定的。 = 活动二： 。 = 自主练习 用给定的素材包利用表格布局制作如下网页 = 任务二 利用层布局网页 = 层 层是网页中用来放置文本、图像、动画、表单、插件等网页元素的载体。层在Dreamweaver 网页编辑区中可以自由移动，改变层在网页中的位置，便可实现层中网页元素位置的改变。实际上，层的应用技术也是一种网页元素的定位技术，利用层能够精确对页面元素定位。设计者可以控制多个层的叠放次序，显示或隐藏层。层与时间使用，可以很方便地设计出动态页面效果，层与行为配合使用，还可以很方便地制作出滚动字幕、下拉式菜单等页面效果。 = 层的创建 创建普通层 使用菜单命令创建层 将光标放在要创建层的位置 选择“插入”|“布局对象”|“层”命令，即可在插入点所在位置插入一个默认大小的层。 = “编辑”|“首选参数” = 创建嵌套层 将光标放在已建立层的内部，然后选择“插入”|“布局对象”|“层”菜单命令插入层，插入后该层即为嵌套层。 使用拖动的方法，在“布局”选项卡上按住“绘制层”按钮拖动到一个已经建立的层的内部，则新建立的层即嵌套层。 使用绘制层的方法创建嵌套层，单击“布局”选项卡中的“绘制层”按钮，然后在层的内部绘制层。是否需要按Alt键？ 嵌套层→嵌套层的子层可以在其父层中间，也可以在其父层外边，嵌套层永远在其父层上方。对于普通层而言，它的层标记将依次出现。 选中一个层 单击文档窗口中的层标记 单击层中的任意位置来激活层，然后单击层左上角的选择手柄 单击层边框，即可选中该层 在没有层被激活或被选中的情况下，按住Shift键，再单击层中任意位置，也可选中该层； 直接在层面板上单击层名称，在文档窗口中会选中相应的层。 层的选择 选中多个层 按住Shift键，再在每个要选中的层中单击鼠标，可选中多个层。 按住Shift键，再在层面板中单击两个或多个层的名称，可选中多个层。 图1 被激活的层 图2 被选中的层 设置层属性 层的默认属性 在菜单栏中选择“编辑”|“首选参数”命令，在弹出的“首选参数”对话框中选择左侧“分类”列表中的“层”，对话框右侧就会出现与层相关的参数。 Default(默认状态)， Inherit(继承父层的可见性)， Visible（设置层为可见）， Hidden（设置层为隐藏） 使用绘制层的方法创建嵌套层，单击“布局”选项卡中的“绘制层”按钮，然后在层的内部绘制层。是否需要按Alt键？ 确定当层的内容超出层范围时处理的方式。 Visible（增加层尺寸，显示超出部分的内容）， Hidden（保持层尺寸不变，隐藏超出部分的内容）， Scroll（增加滚动条）， Auto（当内容超出层尺寸时，自动增加滚动条） 层“属性”面板 用户可在“层”属性面板上分别对每个层或多个层进行设置。 Default(默认状态)， Inherit(继承父层的可见性)， Visible（设置层为可见）， Hidden（设置层为隐藏） 设置当前层的名称。层名称中不能带有符号和汉字，也不能以数字开头，只能是英文字母和数字。 在【Z轴】文本框中，可设置当前层在层重叠中的顺序，z值大的在上面。 设置当前层相对于页面或父层的左上角距离。 “层”面板 层的重叠顺序 跳整层的可见性 （默认为可见） 防止层重叠 调整层嵌套 在层面版中：按住Ctrl键+拖动层 方法有两种： 通过层的“属性”面板; 通过“层”面板. 设置层的顺序 层的显示和隐藏 层大小的调整 选中层后，在“层”属性面板上的“宽”和“高”文本框中可以直接设置层大小。 选中层，把鼠标放到边框上的控制点时，拖动层边框上的箭头，即可在相应方向上改变层大小。 如果希望将层的大小每次改变1像素的距离，则可以按住Ctrl+方向键，每按一次方向键，即可在相应方向上改变1像素的距离。 层的移动 通过选中层，在“层”属性面板中的“左”和“上”文