网页页眉设计 网页页眉设计怎么做

网页设计已成为企业、个人展示形象、传递信息的重要手段。网页页眉作为网页的“门面”，其设计的重要性不言而喻。本文将从网页页眉的视觉和功能两个方面，探讨如何设计出既美观又实用的页眉，以提升网页的整体效果。

一、网页页眉的视觉设计

1. 色彩搭配

色彩搭配是网页页眉设计的关键。合理的色彩搭配可以使网页更加美观，提升用户浏览体验。以下是一些色彩搭配的原则：

（1）色彩与品牌形象相符：页眉色彩应与企业的品牌形象保持一致，如蓝色代表科技、绿色代表环保等。

（2）色彩与内容相协调：根据网页内容选择合适的色彩，如新闻网站页眉可选用稳重、大气的蓝色；娱乐网站页眉可选用活力、明快的黄色。

（3）色彩对比度适中：色彩对比度过大会使页面过于刺眼，影响阅读；色彩对比度过小则难以突出重点。

2. 字体设计

字体是网页页眉的“灵魂”。合适的字体可以使页面更具特色，提高用户体验。以下是一些字体设计原则：

（1）字体与品牌形象相符：根据企业品牌形象选择合适的字体，如现代、简约的设计风格可选用微软雅黑等无衬线字体。

（2）字体大小适中：字体过大或过小都会影响阅读体验。一般来说，页眉字体大小应在18px至24px之间。

（3）字体类型合理：根据内容需求选择合适的字体类型，如标题可选用粗体、正文可选用常规字体。

3. 图片和图标

图片和图标是网页页眉的视觉元素之一，可以增强页面的视觉效果。以下是一些使用原则：

（1）图片和图标与内容相关：图片和图标应与页面内容紧密相关，避免使用无关的图片和图标。

（2）图片和图标质量高：使用高质量的图片和图标，避免使用模糊、像素化的图片。

（3）图片和图标尺寸适中：图片和图标尺寸过大或过小都会影响页面美观。

二、网页页眉的功能设计

1. 导航功能

页眉的导航功能是网页页眉设计的重要目标。以下是一些导航设计原则：

（1）清晰的结构：页眉导航应具备清晰的结构，方便用户快速找到所需内容。

（2）简洁明了：导航文字应简洁明了，避免使用过于复杂的词汇。

（3）突出重点：在导航中突出重点内容，如热门、推荐等。

2. 品牌展示

页眉是展示企业品牌形象的重要位置。以下是一些品牌展示原则：

（1）品牌标志：页眉应放置企业品牌标志，提升品牌知名度。

（2）品牌口号：在页眉中展示企业品牌口号，传达品牌理念。

（3）品牌颜色：页眉色彩应与品牌形象保持一致。

3. 网站搜索

网站搜索是方便用户快速找到所需内容的功能。以下是一些搜索设计原则：

（1）搜索框位置合理：搜索框应放置在页眉的显眼位置，方便用户查找。

（2）搜索功能强大：搜索功能应具备智能搜索、关键词推荐等功能。

网页页眉设计是网页设计中不可或缺的一环。通过合理的视觉和功能设计，可以使网页页眉既美观又实用，提升用户体验。在设计网页页眉时，应遵循色彩搭配、字体设计、图片和图标使用等原则，同时注重导航、品牌展示、网站搜索等功能设计。只有这样，才能打造出具有高颜值和实用性的网页页眉。

网页怎么自定义页眉页脚的字号

一、设置页眉边距

1. 点击页面布局选项卡。

2. 在页面布局选项卡的右下角，点击设置页面的按钮。

3. 弹出页面设置对话框，选择“版式”选项卡。

4. 在“页边距”区域，输入“2厘米”到相应的边距输入框中，完成页眉边距的设置。

二、设置页码字号

1. 双击页脚区域，进入页脚编辑状态。

2. 选中页码。

3. 在开始选项卡的字号列表中选择合适的字号。

4. 选择后，页码的字号即会更新，完成设置。

网页制作的结构布局有哪些

布局就是以最合适浏览的方式将图片和文字排放在页面的不同位置。不同的制作者会有不同的布局设计。网页布局有以下几种常见结构：

1.“同”字型结构布局

所谓同字型就够就是指页面顶部为“网站标志+广告条+主菜单”或主菜单，下方左侧为二级栏目条，右侧为链接栏目条，屏幕中间显示具体内容的布局。

这种布局的优点是充分利用版面，页面结构清晰，左右堆成，主次分明，信息量大；缺点是页面拥挤，太规矩呆板，如果细节色彩上缺少变化调剂，很容易让人感到单调缺乏。

2.“国”字型布局

“国”字型布局是在“同”字型布局基础上演化而来的，在保留“同”字型的同时，在页面的下方增加一横条状的菜单或广告，是一些大型网站所喜欢的类型。一般最上面是网站标题及横幅广告条，接下来就是网站的主要内容，左右分列一些两小条内容，中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等。这种结构是在网上见到的最多的一种结构类型。

这种布局的优点是充分利用版面，信息量大，与其他页面的链接切换方便，缺点是页面拥挤，四面封闭，令人感到憋气。

3.T型布局

这是一个形象的说法，是指页面的顶部是“网站标志+广告条”，左面是主菜单，右面是主要内容。这种布局的优点是页面结构清晰、主次分明，是初学者最容易上手的布局方法；缺点是页面呆板，如果不注意细节上的色彩，很容易让人“看之无味”。

4.“三”字型布局

这种布局多用于国外站点，国内用得不多。特点是在页面上有横向两条色块，将页面整体分割为但部分，色块中大多放广告条、更新和版权提示。

5.对比布局

顾名思义，这种布局采用左右或者上下对比的方式：一半深色，一半浅色。一般用于设计型站点。优点是视觉冲击力强；缺点是将两部分有机地结合比较困难。

6.POP布局

POP引自广告术语，是指页面布局像一张宣传海报，一一张精美的图片作为页面的设计中心。这种类型基本上是出现在一些网站的首页，大部分为一些精美的平面设计结合一些小的动画，放上几个简单的链接或者仅是一个“进入”的链接，甚至直接在首页的图片上做链接而没有任何提示。这种布局大部分出现在企业网站和个人主页，如果处理得好的话，会给人带来赏心悦目的感觉。

7.Flash布局

这种布局是指整个或大部分幅面的网页本身就是一个Flas***，它本身就是动态的，画面一般不叫绚丽、有趣，是一种比较新潮的布局方式。其实这与封面型结构是类似的，只是这种类型才采用了目前非常流行的Flash，与封面型不同的是，由于Flash强大的功能，页面所表达的信息更丰富，其视觉效果及听觉效果如果处理得当，绝不差于传统的多媒体。不同性质的网站，其页面内容安排是不同的。一般网页的基本内容包括标题、网站标识图案（LOGO）、页眉、页脚、主体内容、广告栏等。下面简单说明：A、页面标题在站点的没一个页面中都有一个标题，用来提示页面的主要内容，着一信息将出现在浏览器的标题栏中，而不是在页面的布局中。它的重要作用就是引导访问者清楚地浏览网站的各项内容，不至于迷失方向。标题的加入在HTML语言中比较简单标题名称B、网站标识（LOGO）网站作为一个对外交流的重要窗口，创建者都会用来进行自身形象的宣传。如果该企业（社团）已经导入了CIS（CorporateIdentitySystem）形象识别系统，那么在网站建设过程中应依据该系统为指导进行网页设计，其中标志性图案就是网站的LOGO。一个成功的网站和创建者实体一样，有着独特的形象识别，在网站推广过程中将起到事半功倍的效果。如果还没有导入CIS，在网站建设之前应该根据网站的总体定位，设计制作一个网站的LOGO，这如同一个产品的商标，集中体现了该网站的特色、内容及其内在的文化内涵和理念。LOGO一般设置在主页面的显要位置，二级页面的页眉位置。C、页眉页眉指的是页面上端的部分，有的页面划分比较明显，有的页面没有明确的区分或者没有页眉。页眉的注意力值较高，大多数网站制作者在此设置网站宗旨、宣传口号、广告语等，有的则把它设计成广告位出租。D、页脚页脚是页面底端部分，通常用来显示站点所属公司（社团）的名称、地址、版权信息、电子信箱的超连接等。E、导航导航是网页设计中的重要部分,也是整个WEB站点设计中的一个独立部分。一般来说，一个网站年的导航位置在每个页面中出现的位置是固定的。导行的位置对于站点的结构与整体布局有着举足轻重的作用。导航的位置一般有四种标准的显示位置：左侧、右侧、顶部和底部。有的站点运用了多种导航，是为了增加页面的可访问性。F、主体内容主体内容是页面设计的主体元素。它一般是二级连接内容的标题，或者是内容提要，或者是内容的部分摘录。表现手法一般是文字和图象相结合。它的布局通常按内容的分类进行分栏安排。页面的注意力值一般是按照从上到下、从左到右的顺序排列，所以重要的内容一般安排在页面的做上位置，次要的内容安排在右下方。原发布者:menwai2018

电子商务网站的主页内容布局授课：花小琴常见的网页布局结构国字型布局——国字型布局由同字型布局进化而来，因布局结构与汉字国相似而得名。其页面的最上部分一般放置网站的标志和导航栏或Banner广告，页面中间主要放置网站的主要内容，最下部分一般放置网站的版权信息和联系方式等。常见的网页布局结构T型布局——T型布局结构因与英文大写字母T相似而得名。其页面的顶部一般放置横网站的标志或Banner广告，下方左侧是导航栏菜单，下方右侧则用于放置网页正文等主要内容。常见的网页布局结构标题正文型——标题正文型布局的布局结构一般用于显示文章页面、新闻页面和一些注册页面等。常见的网页布局结构左右框架型布局——左右框架型布局结构是一些大型论坛和企业经常使用的一种布局结构。其布局结构主要分为左右两侧的页面。左侧一般主要为导航栏链接，右侧则放置网站的主要内容常见的网页布局结构上下框架型——上下框架型布局与前面的左右框架型布局类似。其区别仅在于是一种上下分为两页的框架。常见的网页布局结构综合框架型——综合框架型布局是结合左右框架型布局和上下框架型布局的页面布局技术常见的网页布局结构POP布局——POP布局是一种颇具艺术感和时尚感的网页布局方式。页面设计通常以一张精美的海报画面为布局的主体。常见的网页布局结构FLASH布局——FLASH布局是指网页页面以一个或多个Flash作为页面主体的学习前端第一步：划分网页结构，网页的结构的划分应该遵循哪些原则，如何去划分网页的结构呢？

对于一个前端初学者，第一步就是要学会如何划分一个网页的结构。当设计师给到你一张设计图，你需要根据这张图做出一个符合标准的页面，这里所说的标准，即w3c标准，参考w3school在线教程。那么做出一个完整的符合标准的网页第一步就是要划分网页的结构。一般来讲，网页结构的划分需要遵循几个原则：

一、自上而下原则

因为浏览器在渲染一个网页的顺序是自上而下的。这里提到了渲染这一个词，所谓的渲染就是浏览器将代码转换为页面显示内容的过程。浏览器会自上而下读取你写的代码并自上而下的显示。

二、从左至右原则

在自上而下的同时，同一行的内容是从左至右渲染，所以在划分结构的时候有从左至右的顺序。

三、一像素原则

这个原则对于初学者来说必须坚持，但也并不是说无论什么时候都得死认这个道理。前期我们在划分网页的时候一定要划分准确，尤其是横向。试想，如果外面的盒子宽度是1200像素，里面两个盒子一个600像素另一个601像素，加起来超过了父级的宽度那么必然第二个盒子会换到下一行进行显示。

在说完上述三个原则过后有些人就会一味地追求遵循这些原则，比如在划分结构的时候一定要分为上下部分，但是比如下面我截取这个网页的一部分，图片和文字其实是属于一个整体，文字是对图片的说明，所以就不应该分为上下，而应该水平方向划分，每一个图文作为一部分内容，水平分为四部分：

我们说一般网页有header（头部区）、banner（广告横幅区）、main（主体内容区）、footer（底部区），单页并非所有网页都是这样，有些网页没有banner但是初学者容易将header下面那一部分硬划分为banner，有些网页除了这几部分还会有比如icon等区域由喜欢将他们划分到main中去。

说到main区，这个结构划分就多种多样了。有些网页是有一个从左到右通栏的背景色甚至背景图片，这样我们结构的划分也应该有外层一个通栏的盒子，将背景色或者背景图给他，里面再嵌套一个inner盒，给可视区域的固定宽度并居中。如果没有通栏的背景那么这个时候是不需要给通栏的盒子，直接main区给固定宽度居中就好了。

那么在结构划分的时候有些盒子区域之间的空隙怎么去划分这也是初学者最容易犯难的问题。其实严格意义来讲这些空白在结构划分的时候并不会造成影响，因为空白区域在都可以用代码来实现。不过一些文字区域你不能贴着文字的上下来划分，因为文字都是自带行高的。

另外，有些地方可能会有一部分小图片或者一部分内容覆盖在外面大盒子上，这部分在划分结构的时候可以不用管，因为后期在代码实现的时候我们可以利用定位技术实现。

网页设计的页面尺寸标准

对于固定宽度的网站布局，设计师常用的分辨率有：760px、780px、920px、950px等，如今大尺寸、宽屏幕的显示器越来越多，越来越普及，有些设计师也开始采用1000px、1003px这样的分辨率。

页面最大化、满屏化的网站看着的确是舒服，但过高的分辨率在设计师显示器上合适，并不代表在浏览者的显示器上也合适。现在用的最多的分辨率还是1024*768，在这种分辨率下，含滚动条的页面最大宽度应不超过994px，所以一般页面宽度定位在990px以内比较适宜。

这一讲主要来说说网页设计的标准尺寸

一、在800*600分辨率下，页面宽度应在778px以内，这样不会出现横向滚动条，高度可以依据版面和内容而定。

二、在1024*768分辨率下，页面宽度应在1003px以内，如果仅一屏显示的'页面，高度在612px～615px之间，这样横向和纵向滚动条都不会出现。

三、在photoshop中做800*600分辨率下仅一屏的网页时，尺寸可以设为740*560左右。

页面标准按800*600分辨率制作，尺寸为778px*434px

页面长度一般不要超过三屏，宽度不宜出现横向滚动条为宜

每个标准页面为A4幅面大小，即8.5*11英寸

全尺寸banner为468px*60px，半尺寸banner为234px*60px，小banner为88px*31px

小图标的标准尺寸还有120px*90px、120px*60px等

每个非首页静态页面含图片字节不超过60K，全尺寸banner不宜超过14k

标准网页广告尺寸规格

1、120*120，这种广告规格适用于产品或新闻照片展示。

2、120*60，这种广告规格主要用于做LOGO使用。

3、120*90，主要应用于产品演示或大型LOGO。

4、125*125，这种规格适于表现照片效果的图像广告。

5、234*60，这种规格适用于框架或左右形式主页的广告链接。

6、392*72，主要用于有较多图片展示的广告条，用于页眉或页脚。

7、468*60，应用最为广泛的广告条尺寸，用于页眉或页脚。

8、88*31，主要用于网页链接，或网站小型LOGO。

BUTTON 120*60(必须用gif) 7K

215*50(必须用gif) 7K

通栏 760*100 25K 静态图片或减少运动效果

430*50 15K

超级通栏 760*100 to 760*200 共40K 静态图片或减少运动效果

巨幅广告 336*280 35K

585*120

竖边广告 130*300 25K

全屏广告 800*600 40K 必须为静态图片，FLASH格式

图文混排 各频道不同 15K

弹出窗口 400*300(尽量用gif) 40K

BANNER 468*60(尽量用gif) 18K

悬停按钮 80*80(必须用gif) 7K

流媒体 300*200

(可做不规则形状但尺寸不能超过300*200) 30K 播放时间小于5秒60帧(1秒/12帧)

网页中的广告尺寸

1.首页右上，尺寸120*60

2.首页顶部通栏，尺寸468*60

3.首页顶部通栏，尺寸760*60

4.首页中部通栏，尺寸580*60

5.内页顶部通栏，尺寸468*60

6.内页顶部通栏，尺寸760*60

7.内页左上，尺寸150*60或300*300

8.下载地址页面，尺寸560*60或468*60

9.内页底部通栏，尺寸760*60

10.左漂浮，尺寸80*80或100*100

11.右漂浮，尺寸80*80或100*100

以上几种说法可能有点小的出入，大家可以探讨一下。

IAB和EIAA发布新的网络广告尺寸标准

在这6种格式中，除了去年iab发布的4种“通用广告包”中的格式：160×600, 300×250, 180×150及728×90，还包括新公布的468×60 和120×600(擎天柱)2种。