新网页设计与制作项目实训教程 教学课件 严加琼 曾金发 项目15.pptVIP

15.3 实践向导 任务15-4 流体网格布局 1.新建流体网格 　　图15-22设备中央的小框中填写的是格数，即把页面划分成几个等分。下方的格中填写的是页面内容宽度占整个浏览界面的百分比，可以根据实际需要的情况填写。本例中将设置为：移动设备中15列宽百分比，桌面电脑用12格网格。单击“创建”按钮后，首先会询问保存CSS文件的位置和命名，这里命名为main.css。先保存HTML文件本身，然后保存CSS文件，保存时系统会自动将流体网格所需要的boilerplate.css和respond.min.js一起复制到目标文件夹。 图15-22 三种预设 15.3 实践向导 任务15-4 流体网格布局 2.使用流体网格布局 　　 为了方便操作，可以将界面调整为“经典”模式，然后通过工具菜单新建网格。注意：默认页面上会有一些文字和一个DIV元素，可以删除它，但是不能把div class=gridContainer clearfix/div这部分DIV标记删除，否则流体网格将失去作用。单击按钮“插入流体网格布局标签”后，会询问是否新建一行（即是否作为块级元素），作为网页头部，一般都独占一行。将其命名为“top”后单击“确定“按钮。CS6会自动生成一个DIV标记的代码，并在其中用文字注明：这是布局 Div 标签“top”的内容。如图15-24所示。 图15-24 “插入流体网格布局Div标签”对话框 15.3 实践向导 任务15-4 流体网格布局 2.使用流体网格布局 　　用同样的方法再添加一个DIV，命名为“content”同样独占一行。而接下来的“interview”版块因为是多个分栏的情况，所以不能勾选“新建行”。建立之后会发现效果如图15-25所示，它表示这个Div并非当作传统块级元素处理： 注意：可以通过“可视化助理”来选择是否显示浅绿色的流体网格布局参考线，如图15-26所示 图15-25 流体网格非独占行 图15-26 可视化助理 15.3 实践向导 任务15-4 流体网格布局 2.使用流体网格布局 　　同样再增加一个并列的非独占DIV“pictures”，最后增加一个底部用的版块“bottom”，一共5个主要版块。接下来将要用的内容填入HTM文档对应的版块位置，成为一个无CSS的标准流文件。最终效果如图15-27所示。 图15-27 标准流HTML 15.3 实践向导 任务15-4 流体网格布局 2.使用流体网格布局 　　可以使用鼠标操作来控制布局，拖动#content的右侧边缘，向左移动，缩小它的范围到四格，软件会自动吸附临近的网格，不用担心鼠标拖放不够精确。效果如图15-28所示。 　　若从左侧缩放Div，并不会有从右侧缩放相同的效果，而是产生相应的外边距宽度。以同样的方式，将#picture和#interview缩小到四格宽度。这里的页面并不理想，因此需要为页面编写基本的排版样式，样式保存在文件type.css中，可以直接导入使用，样式的美化方法在前一任务中已有叙述。单击“附加样式表”按钮，添加type.css样式表。添加后的效果如图15-29所示。 图15-28 拖放改变网格宽度 图15-29 网页布局效果 15.3 实践向导 任务15-4 流体网格布局 3．布局适应性调整 　　在做完普通的流体网格调整后，还有两种视图下的页面需要调整，即平板电脑和手机设备两种版面，单击右下方屏幕切换到平板视图，为适应屏幕，将#content缩小到四格，#interview将自动上浮到其右侧。如图15-30所示。 　　作为浮动Div的下方#picture已经独占一行，可以选中它，并单击左上角的向左箭头，让它恢复成为块级元素。 　　对于屏幕最窄的移动设备，Dreamweaver已经能够适应大部分情况，只需要让被设置成浮动Div的版块恢复成为独占行元素，即选中这些Div然后单击左上角小箭头。注意：设置完成后一定要在文件菜单中执行“保存全部”。 　　最终完成了一个可以使用多种宽度情况的流体页面，文字和图片在不同分辨率的屏幕下会自动适应大小（若需要图片大小不变可以在HTML中直接写入高度和宽度属性），本页面在不同设备的表现如图15-31,15-32所示。配套光盘“素材\项目15\实践向导\15-6.html”为对应的案例文件。 15.4 能力拓展 1. 使用手工编写代码的方式完成本项目“实践向导”中的任务15-4的流体网格布局。 2. 使用流体网格布局方式完成本项目“实践向导”中的任务15-3的网页布局。 返 回 15.5 项目小结 　　本项目介绍了CSS主要布局方式及其原理，设置了四个难度不同的实战项目，包含最新的，能够适应移动设备浏览的流体网