导航:首页 > 万维百科 > 网页设计的布局与用色技巧

网页设计的布局与用色技巧

发布时间:2020-12-05 15:49:29

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

布局就是以最合适浏览的方式将图片和文字排放在页面的不同位置。不同的制作者会有不同的布局设计。网页布局有以下几种常见结构:
1.“同”字型结构布局
所谓同字型就够就是指页面顶部为“网站标志+广告条+主菜单”或主菜单,下方左侧为二级栏目条,右侧为链接栏目条,屏幕中间显示具体内容的布局。
这种布局的优点是充分利用版面,页面结构清晰,左右堆成,主次分明,信息量大;缺点是页面拥挤,太规矩呆板,如果细节色彩上缺少变化调剂,很容易让人感到单调缺乏。
2.“国”字型布局
“国”字型布局是在“同”字型布局基础上演化而来的,在保留“同”字型的同时,在页面的下方增加一横条状的菜单或广告,是一些大型网站所喜欢的类型。一般最上面是网站标题及横幅广告条,接下来就是网站的主要内容,左右分列一些两小条内容,中间是主要部分,与左右一起罗列到底,最下面是网站的一些基本信息、联系方式、版权声明等。这种结构是在网上见到的最多的一种结构类型。
这种布局的优点是充分利用版面,信息量大,与其他页面的链接切换方便,缺点是页面拥挤,四面封闭,令人感到憋气。
3.T型布局
这是一个形象的说法,是指页面的顶部是“网站标志+广告条”,左面是主菜单,右面是主要内容。这种布局的优点是页面结构清晰、主次分明,是初学者最容易上手的布局方法;缺点是页面呆板,如果不注意细节上的色彩,很容易让人“看之无味”。
4.“三”字型布局
这种布局多用于国外站点,国内用得不多。特点是在页面上有横向两条色块,将页面整体分割为但部分,色块中大多放广告条、更新和版权提示。
5.对比布局
顾名思义,这种布局采用左右或者上下对比的方式:一半深色,一半浅色。一般用于设计型站点。优点是视觉冲击力强;缺点是将两部分有机地结合比较困难。
6.POP布局
POP引自广告术语,是指页面布局像一张宣传海报,一一张精美的图片作为页面的设计中心。这种类型基本上是出现在一些网站的首页,大部分为一些精美的平面设计结合一些小的动画,放上几个简单的链接或者仅是一个“进入”的链接,甚至直接在首页的图片上做链接而没有任何提示。这种布局大部分出现在企业网站和个人主页,如果处理得好的话,会给人带来赏心悦目的感觉。
7.Flash布局
这种布局是指整个或大部分幅面的网页本身就是一个Flash动画,它本身就是动态的,画面一般不叫绚丽、有趣,是一种比较新潮的布局方式。其实这与封面型结构是类似的,只是这种类型才采用了目前非常流行的Flash,与封面型不同的是,由于Flash强大的功能,页面所表达的信息更丰富,其视觉效果及听觉效果如果处理得当,绝不差于传统的多媒体。

2、网页设计的布局该怎么学 有没有什么书可以看

网页设计界面的学习,按照我的方法下面为你介绍:
1、首先是熟练操作PS
2、了解网页构造,包括布局和版块设计
3、加强色彩运用,人性化设计
4、多练习,从仿站开始做起,慢慢的加入自己的设计
看书的话我觉得作用就不是很大咯,看视频教学结合会比较有效果,我以前是看绘学霸视频教学边练习,然后结合书上的会好些。以上这是我接触网页设计这么久的感触,希望对你有帮助。

3、浅析关于photoshop与网页布局设计的关系

一、Photoshop在网页布局设计中的作用
1、 Photoshop在网页布局计划中的作用
①布局灵活:Photoshop的灵魂是图层,每层可以放置不同的元素,图层之间可以相互链接,也可单独存放,每个图层上的图像位置可以随意挪动而不影响其它图层的图像位置,每个图层上的图像大小、色阶、亮度、饱和度透明度等可单独设置而不影响其它图层上的图像。如此灵活的功能,完全可以让设计者随心所欲设计而不受任何约束,而Dreamweaver等软件给设计者提供出自由度降低很多,其效果也会大打折扣。
②修改方便:网站建设前期首先要与客户签定合同,签定合同时客户最关心的是自己的网站是什么样子,这时设计者不可能拿出建好的网站给客户演示,这样一是成本太高,合同能否签定还不一定;二是保护知识产权,有的客户拿走设计方案交给别的公司去做,自己岂不成了给别人做嫁衣裳。最好的办法是拿出在Photoshop中做出的效果图给客户看。一般情况下,客户一次满意率非常低,总会提出修改意见,而且还会不断地提出修改方案。这时我们就可以利用Photoshop的强大功能按客户的要求方便地进行修改和优化,直到客户满意为止。如果在Dreamweaver下,每做一次大的修改,几乎跟重新设计一样费时费力,而且还不一定能达到客户要求。
③加快浏览进度。一个设计不美观不规范的网站是没有生命力,同样一个打开、下载速度慢的网站也是没有存在的价值。心理学研究表明,选择性越多,人的忍耐性越差;可选择性越大,人的忍耐性越低。在互联网高度发展的今天,同类网站多如牛毛,人们没必要在一个网站前停驻静侯你一点一点地下载、打开、测试、显示。一般情况下,下载速度一旦超过10秒,人们会自动转向其它网站。决定下载速度的因素很多,如服务器配置标准、网络传输介质、客户机的配置以及同时点击人数的多少等。但是在这些条件相同时,网页大小及网页元素的优化和配置就是唯一的因素。使用Photoshop设计的网页经过裁切后体积相对要小得多,相同的元素因为其格式变化也会大大提高下载速度,因此Photoshop就成了提高速度,提高点击率的制胜法宝。
二、用Photoshop设计网页布局应注意的几个问题
1、 网页文档尺寸与分辨率。网页文档一般为1007*600和708*800像素,分辨率为72像素,这是屏幕分辨率,太高的分辨率并不能增强效果,反而会降低下载速度。一般情况下,大型网站不要超过3屏。
2、 颜色:网站背景颜色与文件颜色要统一协调,一般不要超过两种,一些网站被批评为脏、乱、差,其要害是颜色搭配不合理,或者太多,给人一种不舒服的感觉。
3、 字体,标题。导航字体一般用黑体,正文一般用宋体,其它字体浏览器不兼容,可能造成调试时出错,给工作带来麻烦。如果为增强页面效果用到其它字体,则最好在用Dreamweaver前在Photoshop切分及图片,字体的颜色设置要考虑到整个页面效果。
4、 布局格式:虽然效果图是用Photoshop设计的,但一定要兼顾到Dreamweaver对页面布局的要求,Dreamweaver下网页布局是使用‘国’字形,还是其他模式,是否使用框架,使用框架的类型是哪一种,都是在设计前要考虑到的。否则会造成效果图与最后的网站布局出现出入,给客户和自身带来麻烦和损失。
5、 图文搭配:一个好的网站是图片多好还是文字多好,这要视网站的功能、行业、目的而定,但有个原则就是图文合理配置,而图片则要按一定的空间分布进行和谐分布。另外,图片大小要合乎美学原则,不能太大,一般用缩略图较好,如果要显示更多的图片细节,不妨给缩略图链接一个大的图片。
6、科学使用参考线。参考线是设计页面布局的有效辅助工具,我们可以先用横参考线将网页布局分成几大版块,然后用竖参考线将每个板块按我们的思路分为几个小板块,最后再整体观察一下。要精确定位网页元素,可用对齐参考线的方法来实现:“视图”—“对齐到”—“参考线”,而参考线的精确定位可以借助标尺和网格来实现,这里要注意的是网站的Logo和Banner或者导航条等都是事先设计好的,有固定大小,在做这些区域时尺寸一定要按照这些元素尺寸设计,不能有丝毫差错,否则进入DreamWeaver整合时,则可能出现空边或撑开表格的现象。
三、“切片”工具是Photoshop通向DreamWeaver的桥梁。
利用Photoshop效果图最终与客户签合同后,还不是Photoshop设计网页布局的终结,而还有关键的一步,就是“切片”,只有正确地切片后,DreamWeaver才能对效果图进行有效的整合,Photoshop在网页布局中的积极作用才发挥到了极致。要完成“切片”这关键的一步,应遵循以下原则:
1、必须依靠参考线。设计时用到参考线,切图时更要用好参考线。参考线能保证我们切出图在同一表格中的尺寸统一协调,有效避免“留白”和“爆边”。
2、 Logo和Banner必切。如果效果图中存在Logo和Banner,我们必须切片这部分,主要是为预先设计的Logo和Banner留下空间,在DreamWeaver整合时最好不用Logo和Banner的切片,而是直接用Logo和Banner原文档,这是提高Logo和Banner效果的需要。
3、虚线和转角形状必切。虚线和转角形状在DreamWeaver 不能实现,只能使用Photoshop切片。
4、渐变必切。这也是Dream Weaver实现不了的。
5、大图必切。大的图像必须切分成均匀图,这样可以提高网页下载速度。
6、特殊文字效果必切。除黑体和宋体外,其他字体必须切片。DreamWeaver下最有效的字体只有宋体和黑体,其它字体浏览器也要能不兼容。
7、导航条必切。一般情况下导航条都是特别设计的,其效果在Dream Weaver下不能实现,因此必须形成切片供后期使用。
8、有效存储切片。存储切片的文件夹必须位于站点的根目录下,文件夹名必须是英文名字。存储切片时用“文件—存储为web所用格式”命令。切片存储格式要求一般存为Gif格式。Gif占用体积小。要求较高的图像存储为JPEG格式,JPG格式显示更多的图片细节。
当然,网页布局的设计软件的使用依设计者习惯、爱好、风格不同而不一样。笔者在此只是谈一下一般的规律,以供广大网页设计初学者参考。

4、网页制作的步骤-?

1、明确网页主题

2、搜集设计网页所需资料

3、设计网页结构,给网页划分网格

4、完成首页制作

5、制作超链接

6、修改完善自己的网页

1、初步学习PHOTOSHOP,简要学习一下JPEG及GIF的区别、图片的简单处理及如何将图片做成网页适用的格式。这种书到处都有。
2、初步学习DreamWaver,学会网页的基本元素、网页的布局、网格的使用、链接的创建等,做一个简单的自己的网页增加自己的兴趣。
3、ASP或PHP编程任挑一样,要制作动态网页就必须学,主要是和数据库的挂接,如SQL Server。
4、想为网页增色,只好学学FLASH制作,先做些简单的,图片、文字变形什么的,试试做个自己的LOGO。
差不多了,接下来就是在使用中更深入地去学习。总之一句话——兴趣是最好的老师。

5、网页设计是什么?

网页设计是按照公司企业希望向访问网站的用户传播的信息,比如品牌介绍、公司产品、公司动态等,进行网站功能策划,然后进行的页面设计美化工作。
网页设计师的主要工作是进行企业网页设计、活动运营类的网页设计、以用户体验为调性的网页设计。

与网页设计的布局与用色技巧相关的知识