通过Dreamweaver_CS3学习HTML+DIV+CSS_第13章__页面头部设计.ppt

第13章页面头部设计,书有页眉和页脚，网页同样有页眉和页脚。但网页中的页眉规范的叫法是页面头部。所谓页面头部是指能统领整个网站的结构，对网站的每个网页进行风格定位的部分。网页头部一般出现在整个页面的最上面，如果是左右框架布局的页面，那么其头部一般是导航条所在的部分。如图13.1所示为网页的页面头部。,13.1页面头部风格确定,因为页面头部是整个页面风格的重要组成部分，所以页面头部风格的确定一直是网页设计者需要重点关心的问题。下面就一起来了解网页头部的构成部分和网页头部的一些常见形式，以便大家掌握如何对页面头部的风格的确定。,13.1.1页面头部的构成,由于要对一个网站进行风格和内容的统一，所以页面头部一般包括以下几种元素。1网站Logo,网站Logo就是网站的标志。,13.1.1页面头部的构成,2导航条导航条是组织整个网站内容的页面元素，同时也是页面风格的重要组成部分。,13.1.1页面头部的构成,3地址导航有些网站的服务器放在不同的国家或地区。为了方便用户浏览离自己最近的服务器上的网站，设置地址导航。用户可以直接通过地址导航，选择最近的服务器进行访问。,13.1.1页面头部的构成,4搜索表单搜索表单是为了方便浏览者在网页上进行网站内容的搜索而设置的表单。,13.1.1页面头部的构成,5用户登录表单某些社区或娱乐类网站为了使用户方便登录系统，而将登录表单放置在页面头部。,13.1.1页面头部的构成,6网站横幅广告网站横幅广告也称Banner广告条，它是网络广告的主要形式，一般使用GIF格式的图像文件，可用静态图形，也可用多帧图像拼接为Flash动画图像。,13.1.1页面头部的构成,7语言导航很多国际性的公司会为不同的国家设置不同的语言风格。放在页面头部的语言导航可以对浏览者进行引导。,13.1.2页面头部的几种设计形式,网站头部的设计其实就是各组成元素的布局。所以对于一个页面头部来说，最重要的就是页面头部各要素的组合与布局。下面是网站制作中比较常见的几种头部设计形式。,13.1.2页面头部的几种设计形式,页面头部只是由网站Logo和导航条构成：这类页面头部是最简单的导航之一。,13.1.2页面头部的几种设计形式,由Logo、横幅广告、登录表单、搜索表单及其他元素构成的页面头部：此类页面头部所覆盖的功能齐全，一般适用于大型门户网站和大型电子商务网站，,13.2添加页面头部元素,页面头部以及Logo、导航条和Banner组成的页面头部的制作，了解页面头部元素的添加方法。Logo、导航条和Banner组成的头部是网页设计中经常涉及到的一种头部组合。,13.2添加页面头部元素,下面一起来了解这种头部的制作过程，具体步骤如下：,13.2添加页面头部元素,从效果图中可看出页面并不美观，页面头部区域离浏览器上边框距离太大，字体不理想，网页背景部分内容不和谐等。这是因为还没有对页面头部进行样式设置。下一节将重点介绍样式的设置。,13.3样式调整与修改,上一节制作了页面头部的整体架构与风格，在这一节中将根据上一节所做的页面头部进行样式设置，使其变得更加美观。在完成页面头部的设计后，进行调整和修改是必要的。具体步骤如下：,13.3样式调整与修改,单击【文件】|【新建】命令，弹出【新建文档】对话框,13.3样式调整与修改,以看出使用CSS控制后的页面头部，美观了许多，,13.4专家总结,本章主要介绍了制作页面头部的基础理论和实践知识。第1节主要介绍页面头部的风格，第2节和第3节以一个具体的实例介绍了