海之韵BLOG | 耿真的个人网站 | 鲁ICP备15001313号 | 本站永久网址:https://www.gengzhen.cn
耿真SEO人生右座铭

网页布局问题及解决方案(1)

发布:耿真(GengZhen) 2021-7-1 16:10 归属栏目: 网络营销

一、网页布局的基本概念。一开始,当一个网页呈现在你面前时,它就像一张白纸,需要你随意抛出设计思路。一开始,你需要明白,虽然你能控制你能控制的一切,但是如果你知道什么是既定的标准,或者大多数访问者的浏览习惯,你就可以在上面添加自己的东西。当然,你也可以创建自己的设计方案,但如果你是初学者,更好先了解网页布局的基本概念。  

1.页面尺寸:因为页面大小与显示器的大小和分辨率有关,网页的局限性在于你无法突破显示器的范围,而且因为浏览器会占用大量空间,留给你的页面范围会越来越小。一般分辨率为800x600,页面显示大小为780x428像素;当分辨率为640x480时,页面的显示大小为:620X311像素。当分辨率为1024X768时,页面的显示大小为1007x600。从以上数据可以看出,分辨率越高,页面尺寸越大。浏览器的工具栏也会影响页面大小。一般当前浏览器的工具栏是可以取消或者添加的,所以当你显示所有工具栏的时候,页面大小和你关闭所有工具栏的时候是不一样的。在网页设计过程中,向下拖动页面是向网页添加更多内容(大小)的唯一方法。但我想提醒大家,除非你确定网站的内容可以吸引大家拖动,否则不要让访问者拖动页面超过三屏。如果你需要在同一个页面上显示三个以上屏幕的内容,你更好在上面建立一个内部连接,供访问者浏览。  

2.整体造型:?建模中的建模是创建的对象图像。这里指的是页面的整体形象,应该是一个整体,图文之间的联系应该是有序的。虽然显示器和浏览器都是矩形的,但是可以充分利用自然界的其他形状及其组合:矩形、圆形、三角形、菱形等。对于不同的形状,它们代表不同的含义。比如长方形代表形式和规则,你注意到很多ICP和政府网站整体都是长方形塑造的;圆带柔软、统一、温暖、安全,很多时尚网站喜欢以圆作为页面的整体造型;三角形代表力量、权威、坚定、侵略等。很多大型商业网站经常使用三角形作为页面的整体形状,以显示其权威性;钻石代表平衡、协调和公平。一些约会网站经常使用菱形作为页面的整体形状。虽然不同的形状有不同的含义,但目前大多数网页都是通过组合多个图形来设计的,其中某些图形的构成比例可能会占更多。  

3.页头:页眉也可以称为页眉,用于定义页面的主题。例如,网站的名称大多显示在标题中。这样,访问者可以很快知道这个网站是什么。页眉是整个页面设计的关键,会涉及到下面更多的设计和整个页面的协调。页眉通常包含网站名称、公司标志和横幅广告的图片。  

4.文本:文本以行或块(段落)的形式出现在页面上,它们的位置决定了整个页面布局的可见性。以前由于页面制作技术的限制,文字放置的灵活性很小。随着DHTML的兴起,文本可以根据自己的要求放在页面的任何地方。  

5.页脚:页脚和页眉对应。页眉是放置网站主题的地方,而页脚是放置制作人或公司信息的地方。如您所见,许多生产信息都放在页脚。  

6.图片图片和文字是网页的两大要素,但它们都是不可或缺的。如何处理图文的位置成为整个页面布局的关键。而你的布局思路也会在这里体现出来。  

7.多媒体除了文本和图片,还有声音,动画,视频等等其它媒体。虽然它们不是经常能被利用到,但随着动态网页的兴起,它们在网页布局上也将变得更重要。

  二.网页布局的方法
  网页布局的方法有两种,第一种为纸上布局;第二种为软件布局。下面分别加以介绍:
  1.纸上布局法
  许多网页制作者不喜欢先画出页面布局的草图,而是直接在网页设计器里边设计布局边加内容。这种不打草稿的方法不能让你设计出优秀的网页来。所以在开始制作网页时,要先在纸上画出你页面的布局草图来。
  准备一若干张白纸和一只铅笔,你要设计一个时尚站点。
  2.尺寸选择:
  目前一般800X600的分辨率为约定俗成的浏览模式。所以为了照顾大多数访问者,你页面的尺寸以800X600的分辨率为准。
  3.造型的选择:
  先在白纸上画出象征浏览器窗口的矩形,这个矩形就是你布局的范围了。选择一个形状作为整个页面的主题造型,我们选择圆形,因为它代表者柔和,和时尚流行比较相称,然后在矩形框架里随意画出来,你可以试者在增加一些圆形或者其它形状。这样画下来,你会发现很乱。其实,如果你一开始就想设计出一个完美的布局来是比较困难的,而你要在这看似很乱的图形中找出隐藏在其中的特别的造型出来。还要注意一点,你不要担心你设计的布局是否能够实现。事实上,只要你能想到的布局都能靠现今的HTML技术实现。
  考虑到左边向左凹的弧线,为了取得平衡我们在页面右边增加了一个矩形(也可以是一条线段)。
  4.增加页头:
  jpg是我们从.jpg和2.jpg得到的布局造型,那么我们该增加页头了。一般页头都是位于页面顶部,所以我们为.jpg增加了一个页头,为了和左边的弧线和右边的矩形取得平衡,我们增加了一个矩形页头并让页头相交与左边的弧线。
  5.增加文本:
  页面的空白部分加别加入文本和图形。因为在页面右边有矩形作为陪衬,所以文本放置在空白部分不会因为左边的弧线而显得不协调。
  6.增加图片:
  图片是美化页面和说明内容必须的媒体。在这里把图片加入到适当的地方。
  经过以上的几个步骤,一个时尚页面的大概布局就出现了。当然,它不是最后的结果,而是你以后制作时的重要参考依据。
  7.软件布局法
  如果你不喜欢用纸来画出你的布局意图,那么你还可以利用软件来完成这些工作。这个软件就是PhotoshopPhotoshop所具有的对图像的编辑功能用到设计网页布局上更显得心应手。不像用纸来设计布局,利用Photoshop可以方便的使用颜色,使用图形,并且可以利用层的功能设计出用纸张无法实现的布局意念。TAG标签耗时:0.0034518241882324 秒




您阅读这篇文章共花了: 
温馨提示本站内所有原创内容禁止转载,谢谢合作!

本页已获评论0/刷新79 次

关注耿真SEO微信公众号

< /br>< /br>