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

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