Dreamweaver CC第12章 流体网格布局.pptVIP

第12章 流体网格布局 12.1?? 案例：创建流体网格布局 【案例目的】利用流体网格设计导航栏，其手机效果为图12-1所示，拖动页面变化至平板电脑大小时如图12-2所示，继续拖动页面变化至桌面电脑大小时效果为12-3所示。 【核心知识】学习使用流体网格布局。 图12-1 手机查看效果 图12-2 平板电脑查看效果 图12-3 桌面电脑查看效果 12.1.1 创建流体网格布局 1. 选择“文件”→“新建”命名，在打开的“新建文档”对话框中选择“流体网格布局”。 2. 单击“创建”按钮，弹出“另存为”对话框，系统会要求指定一个CSS文件。此时可以执行三种操作之一：创建新 CSS 文件、打开现有CSS文件和指定作为流体网格CSS文件打开的CSS文件。 3. 在所选文件夹中命名一个CSS文件后，单击【保存】按钮，默认情况下显示适用于移动设备的“流体网格” 。同时还显示“流体网格”的“插入”面板，使用“插入”面板中的选项可创建所需要的布局。 4. 从“文件”下拉菜单中选择“保存”，保存此文件为HTML 文件，此时系统提示将依赖的相关文件（如boilerplate.css和respond.min.js）保存到计算机上的某个位置。 5. 单击【确定】按钮，流体网格布局创建成功。 12.1.2 插入流体网格元素 在新建流体网格布局中，默认信息右下方的分别为“隐藏DIV#div1”、“重置DIV#div1”和“删除DIV#div1的HTML和CSS”按钮。在“插入”面板中列出了可在流动网格布局中使用的元素，在插入元素时，必须选择作为流体元素插入，如图12-11所示。 图12-11选择作为流体元素插入 12.1.2 插入流体网格元素 选择类或为类命名，或者输入ID值。“类”菜单显示在创建页面时指定的CSS文件中的类。 当选择一个已插入流动网格布局中的元素时，页面上会显示用于隐藏、复制或删除Div的选项。对于相互重叠的Div，还将显示交换Div的选项。 选择元素边界，然后按住鼠标左键，可左右方向转动页面上的流体元素，如图12-13所示 。 图12-13调整流体元素的大小 案例分解：插入流动网格元素 （1）在流体网格布局页面中，单击删除按钮，删除DIV中的默认信息。在“插入”面板中选择“结构”类别，插入“页眉”，输入ID为“top”，选中“作为流体元素插入”复选框。 （2）在页眉处插入一个logo图像，打开CSS设计器，在“源”窗口添加“在页面中定义”即style样式，选择“全局”的“@媒体”，并添加新的选择器“#top img”，设置logo图像的属性。 （3） 将光标置于logo图像右侧，按回车键，插入“Navigation”，命名其ID为“mainMenu” 。 （4）在“Navigation”中插入“项目列表”，命名ID为“menuSystem”，并在“项目列表”内容处插入“列表项”，命名其Class为“menuItem”。 （5）在列表项中输入内容“关于”，并单击列表项上方的复制按钮，复制列表项，修改各列表项名称为“目录”、“资源”、“特色”和“联系” 。 （6）在CSS设计器中选择“全局”，为列表项添加选择器“.menuItem”，并设置其属性。 （7）在标题处输入文本“my menu” 。 （8）切换到【设计】视图，将光标放置于任意一列表项，出现上箭头和下箭头，单击此箭头可以将列表项向上或向下移动一行。将光标放置于“特色”一项，单击其右上方的隐藏按钮。可将这一项进行隐藏。 （9）单击页面右下角的平板电脑大小按钮，在平板电脑大小中查看，将光标置于第一行，该行右侧出现的一个小方块，用于调整列表项大小。 （10）将列表项调整为2列宽。 （11）单击上移箭头调整列表项为横向排列。 第一个列表项左侧出现对齐箭头，单击此箭头，将列表项左侧设置为零边距，四个列表项可以并排水平排列。 通过单击下斜箭头将列表项重新调整为纵向导航栏。 (12) 单击页面右下角的桌面电脑大小按钮，在桌面电脑大小视图中查看，在平板电脑视图中因此的“特色”一项显示出来。、 同样方法，拖动右侧出现的小方块调整列表项的宽度为2列宽。 单击第一个列表项左侧对齐箭头，将其左侧设置为零边距，五个列表项并排水平排列。 在文件的下拉菜单中单击“保存全部”，单击F12进行预览，在用不同大小的浏览器浏览时，页面显示内容随之而变，如图12-1、12-2和12-3所示。 12.2 上机实训 内容要求： 应用流体网格布局制作页面，在手机大小视图中如图12-30所示，在平板电脑大小视图中如图12-31所示，在桌面电脑大小视图中如图12-32所示。