中职高教版《网页设计与制作》3.6 网页布局课件

网页布局 网页布局的方式 表格布局网页，框架布局网、CSS+DIV布局网页 2 利用表格布局网页 将整个页面划分为若干个表格，表格中可以设置单元格的高度、宽度以及相互之间的比例，再将构成网页的各种元素合理地放置在单元格中，可以达到页面布局显示效果的最佳状态。 在使用表格布局时，对于表现形式多样、内容丰富、布局相对复杂的网页，可以使用嵌套表格将页面划分布置，使页面内容显得更有层次，也便于页面元素的修饰。 使用表格布局网页时，由于浏览网页时一般看不到表格的边框，因此应该将表格的边框设置为“0”，表格的填充和间距都设置为“0”。 3 利用表格布局网页 利用表格布局网页，用户可以在网页中直接画出表格和单元格并自由拖动，给网页各部分的定位带来很大的便利。 在一个网页中，当一张表格的高度需要设置得很高时，可以考虑把一个表格折分成若干个表格，注意将拆分后的表格宽度设置为相等。这样，表格的排版效果没变，但显示时各小表格的内容逐渐显示出来，可以明显加快网页的打开速度。 4 框架是把一个浏览器窗口划分为多个区域，每个区域都可以显示不同的HTML文档的网页布局方式。 利用框架布局网页 HTML文档都是独立保存在站点中的 框架相当于是HTML文档的容器。 1 2 3 5 框架集是HTML文件，它定义一组框架的布局和属性，包括框架的数目、大小和位置等，以及在每个框架中初始显示页面的URL(统一资源定位地址)。 利用框架布局网页 框架集文件本身不包含要在浏览器中显示的HTML内容。 框架集文件只是向浏览器提供应如何显示一组框架以及在这些框架中应显示哪些文档的有关信息。 6 创建框架 新建一个HTML网页，选择菜单“插入”一“HTML”一“框架” 对齐上缘 7 创建框架 新建一个HTML网页，选择菜单“插入”一“HTML”一“框架” 下方及左侧嵌套 8 边框：设置是否显示当前框架的边框。 选择“是”表示显示框架边框。 选择“否”表示不显示该框架的边框。 边框颜色：设置当前框架的边框颜色。 边框宽度：设置当前框架的边框宽度，只允许输入数字。 行(或列)：设置当前框架的行(或列)的宽度。 行（列）选定范围：单击其右侧的框架缩略框可以快速地选择行（或列）。 框架集“属性”面板 9 编辑框架 Shift+F2打开“框架”面板 选择框架 10 框架“属性”面板 框架名称：可以设置当前框架的名称，建议使用英文字母命名。 源文件：设置包含的网页文件。可以单击其后的“浏览文件”按钮弹出“选择HTML文件”对话框，然后可以单击选择本地站点中的任意一个网页文件用于替换当前框架所引用包含的网页文件。 滚动：设置当前的框架是否显示滚动条。其选项有“是”“否”“自动”和“默认”。 边框：设置是否显示当前框架的边框。其选项有“是”“否”和“默认”. 边框颜色：设置当前框架的边框颜色。 边界宽度：设置当前框架的边界宽度，只允许输入数字。 边界高度：设置当前框架的边界高度，只允许输入数字。 11 方法一：单击“文件”菜单下的“保存框架集”命令。可将框架保存在当前站点文件夹内。 保存框架集 方法二：单击“文件”菜单中的“保存全部”命令，弹出“另存为”对话框，根据当前网页中的相关提示(网页中的框架会自动出现带有虚线的边框，表示是当前选择的要保存的框架）分别输入要保存的网页框架文件名称，并逐个单击“保存”按钮即可分别保存到本地站点。 12 保存框架集 对齐上缘 “保存全部”命令，最终保存有多少个文件 下方及左侧嵌套 “保存全部”命令，最终保存有多少个文件 13 利用CSS+DIV布局网页 DIV是网页的“块”，块类似于容器，网页中的元素均可以划分到不同的块中。以块为单位，块及块中所包含元素的属性通过CSS控制，从而实现整个页面的布局。 优点：与表格布局的网页相比，使用CSS+DIV布局的网页，代码简洁，结构清晰，面向搜索引擎更加友好；而且网站中包含多个网页，通过修改CSS就能完成批量页面的变化，修改起来十分方便，降低了网站维护成本。 14 插入DIV块 方法一：选择“插入”菜单“布局对象”选项中的“DIV标签”命令 方法二：选择“插入”面板“常用”选项卡中的“插入DIV标签”按钮。 15 插入DIV块 如何修饰块 16 定义块的样式 插入块后，单击“CSS浮动面板”中的“新建CSS规则”按钮。 17 定义块的样式 方框：设置各元素的高、宽、浮动、填充、边界等属性。 如何将垂直方向排列，改成水平方向对齐？ 18 1.大部分页面代码写在CSS中，使得页面容量变得更小。 2.加载速度快。相对于表格嵌套的方式，CSS+DIV将页面独立成更多的区域，在打开页面的时候，逐层加载，而不像表格嵌套那样将整个页面圈在一个大表格里，使得加载速度很慢。 3.修改时可以根据区域内容标记，到CSS里找到相应的ID