网页制作技术 杨尚森 第4章

《网页制作技术 杨尚森 第4章》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第4章页面设计输入网页内容前，首先要对网页进行整体设计，包括页面属性设置、背景设置、布局设计等。本章首先介绍页面基本属性的设置，然后介绍页面风格的设计和布局的方法，包括表格布局和框架网页，其中特别介绍了层的使用。第4章页面设计4.1设置网页属性4.2页面布局4.3使用框架布局4.4层的使用4.5使用CSS4.6CSS属性4.1设置网页属性4.1.1网页标题网页标题在浏览网页时会显示在浏览器标题栏和Windows任务栏中，一般使用网站的名称或文章的标题。新建或打开一个网页文件，在编辑窗口上方的文档工具栏上的“标题”框中可直接输入网页的标题，如下图所

2、示。4.1设置网页属性4.1.2设置页面属性在页面属性中可设置默认的页面外观，如背景、文字、超链接的颜色、页边距等。4.1设置网页属性4.1.2设置页面属性1.外观外观设置中，可以设置页面默认文字的字体、风格、大小、颜色等属性，还可以设置页面的背景颜色和图像。背景图像可使用静态图像或GIF动画，当背景图像大小小于浏览器窗口大小时，会自动重复填满整个窗口。4.1设置网页属性2.链接链接属性设置默认的超链接文字的字体、大小、颜色等。超链接文字的字体设置分为4种情况，最好设为不同的颜色，便于了解超链接是否已访问、是否活动等状态。文字颜色、超链接文字的颜

3、色、页面背景的颜色或图像设置时要注意相互协调，要防止背景颜色和正文颜色太接近甚至相同，影响网页浏览效果。4.1设置网页属性3．标题标题用于设置正文中标题文字的字体、大小和颜色，如下图所示。4.1设置网页属性4．标题/编码这里也可以设置网页的标题，还可以设置网页的文字编码5．跟踪图像“跟踪图像”是Dreamweaver8一个非常有效的功能，它允许用户在网页中将原来的平面设计稿作为辅助的背景，可以非常方便地定位文字、图像、表格、层等网页元素在该页面中的位置。4.1设置网页属性4.1.3文件头设置文件头就是位于网页的HTML代码…

4、D>中的内容，文件头中的内容一般不在浏览器窗口中显示，但对网页的正常工作具有十分重要的作用。1．METAMETA设置自定义的一组网页属性的描述，如作者、版权、开发环境等信息。2．关键字关键字设置网页网站的一组关键字，许多搜索引擎和网站关联性统计是通过关键字搜索网页的。4.1设置网页属性4.1.3文件头设置3．描述设置对网页的一些描述，一般是网页内容的概述，供其他开发者参考。4．刷新刷新定义网页调入浏览器后延迟一段时间的动作。5．基础设置网页的基准地址。6．链接链接用于设置需要链接的CSS等外部文件的地址和类型。4.2页面布局页面布局是网页设计中最

5、基本也是最重要的工作，布局的好坏直接影响到整体的页面效果和页面质量。Dreamweaver8可采用使用表格、使用框架网页或通过使用浮动层等方式实现页面布局设计。4.2页面布局4.2.1网页的版面布局版面指的是浏览器看到的完整的一个页面。版面设计就是以最佳的方式，将组成网页的不同内容板块安排到合适的位置，这些内容包括网站标志、广告、网站导航、文字正文、图片正文、友情链接、版权区等。1．确定显示分辨率布局设计的第一步是确定最佳显示分辨率。4.2页面布局2．版面布局的模式版面布局和网站的内容、风格紧密相关，设计版面实际上是艺术创意设计的过程。常见的布局

6、模式如下。（1）T型结构布局。所谓T型结构，就是指页面顶部为横条网站标志或广告条，下方左面为主菜单，下方右面显示内容的布局，因为菜单条背景较深，整体效果类似英文字母T，所以称之为T型布局。这是网页设计中用的最广泛的一种布局方式。4.2页面布局2．版面布局的模式（2）口型布局。这是一个象形的说法，页面一般上下各有一个广告条，左面是主菜单，右面放友情链接等，中间是主要内容。图（a）、图（b）分别为T型结构布局和口型布局。（a)(b)4.2页面布局2．版面布局的模式（3）三型布局。特点是页面上横向两条色块，将页面整体分割为四部分，色块中大多放广告条。（

7、4）对称对比布局。采取左右或者上下对称的布局，一半深色，一半浅色，一般用于设计型站点。优点是视觉冲击力强，缺点是将两部分有机的结合比较困难。（5）POP布局。POP引自广告术语，就是指页面布局像一张宣传海报，以一张精美图片作为页面的设计中心，常用于时尚类站点。优点是漂亮吸引人，缺点是速度慢。4.2页面布局4.2.2表格布局使用表格是常用的布局方式。布局的表格可以嵌套，实现复杂的页面布局。【实例4.1】使用表格进行如图4.12所示的网页布局。4.2页面布局4.2.3使用扩展模式布局在工具栏上单击扩展表格模式按钮，既可切换到“扩展表格模式”，这时可以

8、清晰地看出布局结构，也可以进行布局操作，如图4.13所示。4.2页面布局4.2.4使用布局模式布局使用“布局模式”，则可以使网页中的元素