一。网页布局的基本概念
最开始,网页呈现在你面前的时侯,它就好像一张白纸,它需要你任意挥洒你的设计才思。在开始的时侯,你需要明白,虽然你能控制一切你所能控制的东西,但假如你知道什么是一种约定俗成的标准或者说大多数访问者的浏览习惯,那么你可以在此基础上加上自己的东西。你当然也可以创造出自己的设计方案,但如果你是初学者,那么最好明白网页布局的基本概念。
1.页面尺寸:
由于页面尺寸和显示器大小及分辨率有关系,网页的局限性就在于你无法突破显示器的范围,而且因为浏览器也将占去不少空间,留下给你的页面范围变得越来越小。一般分辨率在800x600的情况下,页面的显示尺寸为:780x428个象素;分辨率在640x480的情况下,页面的显示尺寸为:620X311个象素;分辨率在1024X768的情况下,页面的显示尺寸为:1007x600.从以上数据可以看出,分辨率越高页面尺寸越大。
浏览器的工具栏也是影响页面尺寸的原因。一般目前的浏览器的工具栏都可以取消或者增加,那么当你显示全部的工具栏时,和关闭全部工具栏时,页面的尺寸是不一样的。
在网页设计过程中,向下拖动页面是惟一给网页增加更多内容(尺寸)的方法。但我想提醒大家除非你能肯定站点的内容能吸引大家拖动,否则不要让访问者拖动页面超过三屏。如果需要在同一页面显示超过三屏的内容,那么你最好能在上面做上页面内部连接,方便访问者浏览。
2.整体造型:
什么是造型,造型就是创造出来的物体形象。这里是指页面的整体形象,这种形象应该是一个整体,图形与文本的接合应该是层叠有序。虽然,显示器和浏览器都是矩形,但对于页面的造型,你可以充分运用自然界中的其它形状以及它们的组合:矩形,圆形,三角形,菱形等。
对于不同的形状,它们所代表的意义是不同的。比如矩形代表着正式,规则,你注意到很多ICP和政府网页都是以矩形为整体造型;圆形带表着柔和,团结,温暖,安全等,许多时尚站点喜欢以圆形为页面整体造型;三角形代表着力量,权威,牢固,侵略等,许多大型的商业站点为显示它的权威性常以三角形为页面整体造型;菱形代表着平衡,协调,公平,一些交友站点常运用菱形作为页面整体造型。虽然不同形状带表着不同意义,但目前的网页制作多数是接合多个图形加以设计,在这其中某种图形的构图比例可能占的多一些。
3.页头:
页头又可称之为页眉,页眉的作用是定义页面的主题。比如一个站点的名字多数都显示在页眉里。这样,访问者能很快知道这个站点是什么内容。页头是整个页面设计的关键,它将牵涉到下面的更多设计和整个页面的协调性。页头常放置站点名字的图片和公司标志以及旗帜广告。
4.文本:
文本在页面中出现都数以行或者块(段落)出现,它们的摆放位置决定者整个页面布局的可视性。在过去因为页面制作技术的局限,文本放置的位置的灵活性非常小,而随着DHTML的兴起,文本已经可以按照自己的要求放置到页面的任何位置。
5.页脚:
页脚和页头相呼应。页头是放置站点主题的地方,而页脚是放置制作者或者公司信息的地方。你能看到,许多制作信息都是放置在页脚的。
6.图片
图片和文本是网页的两大构成元素,却一不可。如何处理好图片和文本的位置成了整个页面布局的关键。而你的布局思维也将体现在这里。
7.多媒体
除了文本和图片,还有声音,动画,视频等等其它媒体。虽然它们不是经常能被利用到,但随着动态网页的兴起,它们在网页布局上也将变得更重要。
二。网页布局的方法
网页布局的方法有两种,第一种为纸上布局;第二种为软件布局。下面分别加以介绍:
1.纸上布局法
许多网页制作者不喜欢先画出页面布局的草图,而是直接在网页设计器里边设计布局边加内容。这种不打草稿的方法不能让你设计出优秀的网页来。所以在开始制作网页时,要先在纸上画出你页面的布局草图来。
*尺寸选择:
目前一般800X600的分辨率为约定俗成的浏览模式。所以为了照顾大多数访问者,你页面的尺寸以800X600的分辨率为准。
*造型的选择:
先在白纸上画出象征浏览器窗口的矩形,这个矩形就是你布局的范围了。选择一个形状作为整个页面的主题造型,我们选择圆形,因为它代表者柔和,和时尚流行比较相称,然后在矩形框架里随意画出来,你可以试者在增加一些圆形或者其它形状。这样画下来,你会发现很乱。其实,如果你一开始就想设计出一个完美的布局来是比较困难的,而你要在这看似很乱的图形中找出隐藏在其中的特别的造型出来。还要注意一点,你不要担心你设计的布局是否能够实现。事实上,只要你能想到的布局都能靠现今的HTML技术实现。
考虑到左边向左凹的弧线,为了取得平衡我们在页面右边增加了一个矩形(也可以是一条线段)。
*增加页头:
jpg是我们从。jpg和2.jpg得到的布局造型,那么我们该增加页头了。一般页头都是位于页面顶部,所以我们为。jpg增加了一个页头,为了和左边的弧线和右边的矩形取得平衡,我们增加了一个矩形页头并让页头相交与左边的弧线。
*增加文本:
页面的空白部分加别加入文本和图形。因为在页面右边有矩形作为陪衬,所以文本放置在空白部分不会因为左边的弧线而显得不协调。
*增加图片:
图片是美化页面和说明内容必须的媒体。在这里把图片加入到适当的地方。
经过以上的几个步骤,一个时尚页面的大概布局就出现了。当然,它不是最后的结果,而是你以后制作时的重要参考依据。
2.软件布局法
如果你不喜欢用纸来画出你的布局意图,那么你还可以利用软件来完成这些工作。这个软件就是Photoshop.Photoshop所具有的对图像的编辑功能用到设计网页布局上更显得心应手。不像用纸来设计布局,利用Photoshop可以方便的使用颜色,使用图形,并且可以利用层的功能设计出用纸张无法实现的布局意念。
三。网页布局的技术
层叠样式表的应用
在新的HTML4.0标准中,CSS(层叠样式表)被提出来,它能完全精确的定位文本和图片。CSS对于初学者来说显得有点复杂,但它的确是一个好的布局方法。你曾经无法实现的想法利用CSS都能实现。目前在许多站点上,层叠样式表的运用是一个站点优秀的体现。你可以在网上找到许多关于CSS的介绍和使用方法。
2.表格布局
表格布局好像已经成为一个标准,随便浏览一个站点,它们一定是用表格布局的。表格布局的优势在于它能对不同对象加以处理,而又不用担心不同对象之间的影响。而且表格在定位图片和文本上比起用CSS更加方便。表格布局唯一的缺点是,当你用了过多表格时,页面下载速度受到影响。对于表格布局,你可以随便找一个站点的首页,然后保存为HTML文件,利用网页编辑工具打开它(要所见即所得的软件),你会看到这个页面是如何利用表格的。
3.框架布局
不知道什么原故,框架结构的页面开始被许多人不喜欢,可能是因为它的兼容性。但从布局上考虑,框架结构不失为一个好的布局方法。它如同表格布局一样,把不同对象放置到不同页面加以处理,因为框架可以取消边框,所以一般来说不影响整体美观。
分享到:
相关推荐
本文档对CSS网页布局进行了详细的剖析和经验总结,涵盖了DOCTYPE、HTML、CSS的基本概念和应用,CSS选择器、布局设计、盒子模型、背景图像等多个方面。 一、DOCTYPE和HTML DOCTYPE是文档类型,分为transitional...
本书系统地讲解了CSS层迭样式表的基础理论和实际运用技术,通过大量实例对CSS进行深入浅出的分析,主要包括CSS的基本语法和概念,设置文字、图片、背景、表格、表单和菜单等网页元素的方法,以及CSS滤镜的使用。...
本PPT学习教案主要讲解了使用框架布局网页的概念、框架和框架集的关系、框架网页的优点和缺点、创建框架集、框架和框架集的基本操作、设置框架和框架集的属性、保存框架和框架集等内容。 一、框架和框架集的概念 ...
15.3 Ajax实例:能够自由拖动布局区域的网页 第4部分 综合案例篇 第16章 我的博客 16.1 分析构架 16.2 模块拆分 16.3 整体调整 第17章 小型工作室网站 17.1 分析构架 17.2 ...
知识点1:CSS网页布局的基本概念 * CSS网页布局是指使用CSS来控制网页的布局和样式。 * CSS网页布局的主要目的是使网页的布局和样式更加灵活和美观。 * CSS网页布局需要具备一定的HTML和CSS知识基础。 知识点2:一...
一、CSS盒模型的基本概念 CSS盒模型是网页布局的基础,盒模型的概念是指网页元素和它周围空间所形成的矩形区域,包括内容区域、内边距、边框和外边距四个部分。 二、盒模型的相关属性 盒模型的相关属性包括宽度、...
PS需要学会 常用选择工具及填充色彩工具的使用 路径工具及渲染工具的使用 图层及图层混合模式的使用 ... Photoshop在网页制作中如何布局及网页制作中应用 Photoshop在效果图后期处里中的应用
15.3 Ajax实例:能够自由拖动布局区域的网页 第4部分 综合案例篇 第16章 我的博客 16.1 分析构架 16.2 模块拆分 16.3 整体调整 第17章 小型工作室网站 17.1 分析构架 ...
- 网页设计的基本概念:网页结构、网页布局、网页元素 - 网页设计的基本原则:简洁性、可读性、可用性 - 网页设计的基本元素:文字、图片、表单、超链接 4. HTML 基础: - HTML 的基本概念:HTML 文档、HTML ...
精通CSS+DIV网页样式与布局 视频教材主要内容 迅雷下载地址: 目录 第1部分 CSS基础知识篇 第1章 CSS的初步体验 1.1 CSS的概念 1.1.1 标记的概念 1.1.2 传统HTML的缺点 1.1.3 CSS的引入 1.1.4...
HTML小结是指总结HTML语言的基本概念和应用。HTML语言由标签、标签属性和属性值组成。标签是HTML语言的基本结构单元,标签属性是用来表示该标签的具体功能或者某一具体的性质,属性值是用来表示属性的程度。 在编写...
本书系统地讲解了CSS层迭样式表的基础理论和实际运用技术,通过大量实例对CSS进行深入浅出的分析,主要包括CSS的基本语法和概念,设置文字、图片、背景、表格、表单和菜单等网页元素的方法,以及CSS滤镜的使用。...
(2)了解网站、网页和HTML的基本概念。 (3)了解静态网页和动态网页的区别和联系。 (4)了解HTTP、FTP、IP地址、域名和URL等基本概念。 (5)能够安装并使用浏览器查看网页。 (6)了解从媒体内容和布局元素两个...
本实验报告涵盖了网页设计的基本概念、HTML 编程、CSS 样式设计与应用、JavaScript 脚本编程、网站综合设计等方面。实验目的旨在掌握网站的整体规划设计思路,熟悉 Dreamweaver 软件的界面布局和工作环境,掌握 ...
15.3 Ajax实例:能够自由拖动布局区域的网页 第4部分 综合案例篇 第16章 我的博客 16.1 分析构架 16.2 模块拆分 16.3 整体调整 第17章 小型工作室网站 17.1 分析构架 17.2 ...
1.2.3 链接式 1.2.4 导入样式 1.2.5 各种方式的优先级问题 1.3 体验CSS 1.3.1 从零开始 1.3.2 加入CSS控制 1.3.3 控制图片 1.3.4 CSS的注释 第2章 CSS的基本语法 2.1 CSS选择器 2.1.1 标记选择...
其主要内容包括练习网页设计的基本概念和文档结构,完成相关工具的安装。练习网页元素在实际应用中的使用,包含文字与段落涉及的图文混排方式、列表涉及的导航制作、框架涉及的后台管理页面制作、表格布局局部页面等...
15.3 Ajax实例:能够自由拖动布局区域的网页 第4部分 综合案例篇 第16章 我的博客 16.1 分析构架 16.2 模块拆分 16.3 整体调整 第17章 小型工作室网站 17.1 分析构架 17.2 ...