浅析网页设计原则与制作技巧

网站建设知识 phpacg 2年前 (2018-04-24) 103次浏览 0个评论

  1设计准绳

  1.1表格的定位功用

  网页制造中表格的运用很重要,它的作用除了表格自身具有的统计处置数据的功用之外,还可以对所制造的网页页面中的设计元素停止定位。网页中的文本位置、图像位置,可以经过表格来准确控制,而且还能消弭诸多网页元素之间的搅扰,这样设计出的网页愈加紧凑。

  (1)网页制造运用表格时,要防止这样的设计行为:运用一张表格,然后将一切网页设计都放在这个表格中。由于HTML在被阅读器解码时是依照一定的次第停止的,阅读器解释和显示的顺序都是自上而下的,但是假设有表格在网页中,阅读器是将表格中所嵌套的全部内容都读取出来之后,再显示结果页面。普通的网页能够感受不到阅读器的这种任务顺序,假设网页中信息量大,阅读网页的人阅读速度慢,阅读器这种任务顺序就能表现出来。遇到这种网页,阅读器在读取了表格中全部内容之后,才为阅读者提供解释结果,在这之前显示的是空白。

  (2)在停止网页设计时,应用表格定好需求的位置,在页面视图下都是正常的,但是用阅读器阅读该网页时就会出现局部设计对象位置混乱。这是由于表格宽度的设计出了效果,有两种设置该宽度的方法,一种是应用百分比的方法,另一种是应用像素的方法,比如,应用百分比的方法,会有多种分辨率多种页面设计结果出现,但是采用后者的方法,就不会出现这种效果。

  1.2文件的命名

  网页制造的进程中,有时会出现如下这些效果:在设计时拔出出来的图片,预览时显示不出来、曾经设计布置好的链接用不了等等状况。经过对效果的剖析,发现效果出在了文件的命名上(用中文停止命名)。设计制造者为了在设计之后可以便于自己查找调用,会在设计时对一些文件命以中文名,这就招致预览时无法显示图片,只需将中文名换成英文就可以正常运转。为了处置记忆和查找文件的效果,可以用英文单词或许汉语拼音有针对性的命名。

  1.3图像的无缝拼接

  网页中图像的运用是很有必要的,图像可以使网页愈加美观。图像的格式有许多,GIF、JPG、PNG这三种图像格式在网页设计和制造的时分比拟罕见。网页的下载速度受图像大小的影响很大,所以有必要在将图片拔出到网页之前处置图片,比如应用PhotoShop软件,只需可以保证图像在网页中显示效果不受应影响即可。假设在设计网页时,要用到大图片,设计制造的时分可以用无缝拼接技术,该技术在图像处置软件中可以完成,先将要用到的大图片处置成数个小图片,将这些小图片依照一定规则嵌套到网页中,组成大图片,拼出的大图在理想效果上与完整的原图基本上没有差异,拼接痕迹也不会被发觉。在拼接小图片的进程中,应用好表格,在表格的单元格中依次放置小图片,再将表格的间距设为零,去掉表格边框,设置好单元格的参数后,再手动微调,这样拼接好的图片就看不出拼接痕迹。这样的操作进程能够略显费事,但是却能保证大图显示效果的前提下又不影响网页下载速度。

  1.4团体站点中导航按钮的设计

  设计制造网页时,参与导航按钮,可以应用Photoshop或许Flash停止制造。设计者只要具有很好的图像、动画处置软件基础,才干掌握住这种创新性的方法,自己依据想到达的效果设计导航按钮,可以设计的创意。

  2制造技巧

  网站的页面中包括:作为网站门面的首页、支撑起网站结构的框架页面,网站的内容表达主体普通页面、网站中的用来显示广告、链接和推送音讯之类的弹出页。

  比如设计首页时,有两种方式的设计可以作为网站首页,一种是笼统展现型,这种方式的设计主要在规划和外型上,加了艺术化的处置,结合公司的笼统与公司的效劳理念,提供有相关性的图像与文字,这样设计出的画面才有生机和生机,在这样网页中,给阅读者提供最直观的公司笼统,吸引阅读者的留意力。还有一种首页设计方式是信息罗列型,这种方式主要用于大中型企业网站,有很多条目和分类。

  坚持分歧的网页设计作风。网站营销的诸多影响要素中,网页作风的分歧性是不可无视的重要方面。一致网站作风的方法有很多,网站结构就是其中一种,比如,网站规划、内容排版、图标大小、图片位置等等。在一致网页作风时,需求设计者特别关注的是网站中具有代表性的典型元素要坚持分歧,比如网站背景logo 、公司称号字体、网站中图片作风等等。

  颜色搭配。页面的颜色搭配是与网站的主题分不开的,在颜色搭配上,普通来说,页面的主体文字应尽量运用黑色与背景对比清楚,按钮、边框、背景等运用黑色。颜色的运用最好依据网站主题作风选定一种基调,再依据这个基调来搭配其它颜色。普通来讲,绿色配以金黄、淡白,可以发生优雅、温馨的气氛;蓝色与白色混合,能给人柔顺、淡雅、浪漫的觉得,白色和黄色、金色搭配能渲染喜庆的气氛而金色和咖啡色搭配则会给人带来暖意。整个页面在视觉上应是一个全体,以到达谐和、顺眼的最佳视觉效果。

喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址