网页设计实用教程 第5章 页面设计

《网页设计实用教程 第5章 页面设计》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、第5章页面设计制作人：王飞重点和难点页面设计表格布局框架布局框架属性设置5.1页面设计概述5.1.1设置网页属性网页属性设置主要包括网页标题设置、页面属性设置、文件头设置等内容。1.网页标题设置网页标题通常是网站名称或网页文章的标题。浏览网页时，网页标题会显示在浏览器标题栏和Windows任务栏中。设置网页标题的步骤是：（1）新建或打开一个网页文档。（2）在编辑窗口上方的文档工具栏上的“标题”栏中直接输入网页的标题，如图5-1所示。5.1页面设计概述5.1.1设置网页属性2.页面属性设置页面属性设置主要是对网页默认的页面外观，

2、如背景、文字、超级链接的颜色、页边距等内容进行设置。在“属性面板”的右下部单击“页面属性”按钮或在网页空白处单击鼠标右键，在弹出的菜单中单击“页面属性”菜单项可以打开如图5-2所示的“页面属性”对话框。演示讲解5.1页面设计概述5.1.1设置网页属性3.文件头设置文件头是指网页HTML代码…之间的内容，文件头中的内在大多数的浏览器中无法看到直接的效果，但对网页的正常工作具有十分重要的作用。在“插入”面板中切换到“常用”选项卡，单击文件头下拉式菜单，有六个按钮可以设置文件头，如图5-3所示。图5-3“文

3、件头内容”下拉菜单图5-3“文件头内容”下拉菜单演示讲解5.1页面设计概述5.1.2页面布局基础知识1.页面布局页面布局是网页设计中最基本、最重要的工作之一，布局的好坏直接影响到整体的页面效果和页面质量。DreamweaverCS4可以使用表格、使用浮动层或使用框架网页等方式轻松实现页面布局设计。2.版面设计网页布局最重要的是版面设计，版面指的是在浏览器中看到的完整的一个页面。版面设计就是以适合的方式，将组成网页的不同内容板块安排到合适的位置，这些内容包括网站标志、广告、网站导航、文字正文、图像正文、友情链接、版权等。5.1页

4、面设计概述5.1.2页面布局基础知识3.框架框架是网页中经常使用的页面设计方式之一，框架可以把浏览器窗口分割成几个不同的区域，每个区域可以显示不同的网页。使用框架可以非常方便的完成导航工作，让网站的结构更加清晰，而且各个框架之间决不存在干扰问题。框架主要包含两个部分：框架（Frame）是浏览器窗口中的一个显示区域，它显示的内容可以与浏览器窗口的其余部分所显示内容无关。框架集（Frameset）也是一个网页文件，它描述框架的结构信息，框架集定义了框架数，框架的尺寸、载入到框架的网页等内容。5.2使用框架布局网页本节将通过建立一个

5、信息导航网页的实例来讲解超链接的使用。本节操作任务：在“Mystuhome”下建立文件夹“页面设计”，在“页面设计”文件夹下建立文件夹“image”。在“页面设计”文件夹下创建框架集文件“05.html”和三个网页文档“top.html”、“left.html”和“main.html”。设置框架集和框架的属性，调整各框架区域的大小。在“页面设计”文件夹下创建“zyjs.html”和“xbjs.html”用于设置超级链接。5.2使用框架布局网页5.2.1框架及框架集的创建、选定和保存1.新建网页（1）在“Mystuhome”下建

6、立文件夹“页面设计”，在“页面设计”文件夹下建立文件夹“image”。（2）在“页面设计”文件夹下创建网页文件“05.html”。（3）创建三个网页文档“top.html”、“left.html”、“main.html”2.创建框架在创建框架集或使用框架前，为使框架在文档窗口可见，需要设置显示框架边框，设置方法是：在DreamweaverCS4主窗口中，单击菜单“查看”→“可视化助理”→“框架边框”，若“框架边框”前有小勾说明已显示，反之是取消显示。演示讲解5.2使用框架布局网页5.2.1框架及框架集的创建、选定和保存创建框架

7、的步骤如下：（1）打开网页文档“05.html”。（2）显示框架的边框线。（3）在“插入”面板的“布局”选项卡中单击“框架”按钮，弹出如图所示的下拉菜单，在弹出的下拉菜单中选择“顶部和嵌套的左侧框架”。（4）保存网页文档“05.html”。演示讲解5.2使用框架布局网页5.2.1框架及框架集的创建、选定和保存3.选择框架集和框架1）选择框架集选择框架集通常有两种方法：在DreamweaverCS4主窗口中，单击菜单“窗口”→“框架”或按组合键“Shift+F2”，打开如图所示的“框架”面板。在面板中单击框架的外层边框即可选中框

8、架集。演示讲解5.2使用框架布局网页5.2.1框架及框架集的创建、选定和保存在包含框架的网页文档中，将鼠标指向框架最外的边框线，当鼠标变成双向箭头形状时，单击鼠标左键即可选中框架集。2）选中框架选择框架通常有两种方法：按住“Alt”键，在框架内部单击某个框架，即可选中框架。在