学习网页制作应该注意的网站设计的四点矛盾

  因为工作需要,昨晚将另一位网页设计师的设计作品生成了页面,折腾了一通宵,我脑细胞成几何倍数减少,完成了工作,不免有些牢骚要发。

  我认为网站是为人民服务的,网站的优劣,内容是关键,而设计能排在第二就不错了。一个网站的设计不仅需要的是美观,更需要的是配合内容的编排以及其它更多方面,例如浏览速度及浏览方便性。如果您同意以上观点,请继续看下文。

  因为网站的设计不仅需要美观,所以产生了不少矛盾,挑几个主要的矛盾来分析:

  一、 background背景图像的矛盾

  由于千篇一律的单色背景早已产生了视觉疲劳,因此出现了花纹背景,例如用点、线、面组成的背景,通常这种背景都是做成10*10px (或其它)的方形大小。再受韩潮影响,目前应用广泛的是渐变背景,由于分辨率的关系,通常采用上下渐变,左右渐变不可取。问题来了,上下渐变在Photoshop(做网页设计的常用软件)中只需要简单的使用渐变工具拉动一下即可,但是作为网页设计师的你有没有想过在页面中这种背景应该如何去做?分成上下2个背景,或者做一个超级长估计要在3000px以上的背景?(可以参看我的博客首页背景http://blog.sina.com.cn/m/baopin)因此在做这种背景的时候,需要仔细考虑页面该如何去生成。

  二、 适应分辨率的矛盾

  为适应分辨率,最佳方法应该是整个页面采用100%自适应表格,这种网站让800*600及以上分辨率的彩显都能整屏幕最佳效果浏览,这样的制作方法在为数不多的几个网站上出现过。但是这种方法必然需要最少的图片及最多的216安全色及最精简的表格。目前这样的网站不怎么能满足客户的设计要求。

  在国内,网站通常都在750-780px的宽度之间,这样做的目的是为了适应800*600及以上分辨率的彩显浏览网站。OK,矛盾出现了,中间是780px的宽度,但是通常设计师会加上描边或者投影的效果,做为设计师的你,有没有把这个尺寸算进去?更有甚者,中间的内容是780px 两边采用长达30px的投影,再加上前面第一点提到的渐变背景,好了,你想让生成页面的工作人员自杀吗?请你在做这样的设计时候为后面的生成页面工作考虑一下。

  三、 网页216安全色的矛盾

  所谓网页安全色是指在不同硬件环境、不同操作系统、不同浏览器中都能够正常显示的颜色,也就是说这些颜色在任何用户显示设备上的显示效果都是相同的。所以使用216网页安全色进行网页设计可以最大限度避免颜色失真的问题。

  但是通常216个色彩不怎么能满足网页设计师的设计,随便一个渐变已经超出了这个范围,矛盾又出现了。请尽量将非网页完全色做在图片上,也就是说将非网页安全色做成图片,而将安全色做为代码,这样尽可能使网站拥有美观及快速。如果碰到一个网页设计师的设计作品,从上到下、从内到外、从文字到图片都没有1个安全色,你会怎么做?我昨天就遇到了。难道让我把所有的文字都做成图片?那这个网站还需要更新吗?程序员又该如何做?如果你是这样设计网站的,请改改这种毛病。

  四、 象素与羽化的矛盾

  象素和羽化应用都非常广泛,但是某些地方却产生了矛盾。举个例子,在一个带有图片背景的表格上,有一个翻转图片的按钮(鼠标经过变换图片),而这个按钮并不需要一定做成方形,为了整体效果,你也许会做成圆角,这个圆角如果做成象素,那么按钮可以做成方形透明背景的GIF,这样不会有任何问题,但作为设计师的你,也许会做成羽化的圆角,问题出现了,这个按钮是一定要用JPG或者非透明背景的GIF了,那么一旦需要更改此表格的背景色,这个按钮的两张图片也需要更改。所以在设计到圆角这种效果的时候,用象素还是用羽化,你要考虑清楚了。

  “实践检验真理”,你想成为一个优秀的网页设计师,那么请多去把你的设计作品做成页面,这样你会发现很多设计中的问题。单纯的做一个美观的网页设计并不难,难在如何将美观与实际页面相结合。时间仓促,胡乱写下上面的文字。

时间: 2024-12-28 11:19:37

学习网页制作应该注意的网站设计的四点矛盾的相关文章

网页制作教程:活动页面的网站设计案例

文章描述:巧妙制作活动网站设计 对于许多组织来说,留下各种不同的活动或展览,包括节日或会议,来的时候,简单的传单,论坛和传统的横幅广告停止有效工作.无论事件变得广为流行,它提供更多的信息,不仅仅是一个简单的简要说明,还是组织者要使其更加现代化,利用当代各种手段,例如允许使用网上登记或销售数字门票. 最终会出现扩大的必要性.在这种情况下,创始人往往诉诸创建活动的网站,因为它很长一段时间一直是伟大的和成熟的仪器.精心组织和精心设计的网站快速,轻松地告知一个大的目标受众即将举行的活动,让在旅途中的门票

学习网页制作基础入门教程(8)框架标签

教程|入门教程|网页 相关文章: 学习网页制作基础入门教程(1)网页编写 学习网页制作基础入门教程(2)排版标签 学习网页制作基础入门教程(3)字体标签 学习网页制作基础入门教程(4)图象标签 学习网页制作基础入门教程(5)图象标签 学习网页制作基础入门教程(6)连接标签 学习网页制作基础入门教程(7)表格标签 框架概念 1. 首先,各位先看看右边这张图片,将利用这张图来做解释,这样子,讲起来可能会清楚一些. 我们可以看见,右边的这个图片,一共分为 1 . 2 . 3 三个框架,每一个框架,各有

学习网页制作基础入门教程(6)连接标签

教程|入门教程|网页 相关文章: 学习网页制作基础入门教程(1)网页编写 学习网页制作基础入门教程(2)排版标签 学习网页制作基础入门教程(3)字体标签 学习网页制作基础入门教程(4)图象标签 学习网页制作基础入门教程(5)图象标签 网页内部的连接 1. 使用方法: 先在欲连接处作记号:<A NAME="here"> 这里是你想连接的点 </A> 设定连接:<A HREF="#here"> 连接 </A> 2. 标签解

学习网页制作基础入门教程(3)字体标签

教程|入门教程|网页 相关文章: 学习网页制作基础入门教程(1)网页编写 学习网页制作基础入门教程(2)排版标签 标题标签 1. 使用方法:<H1>标题內容</H1> 2. 标签解释:标题的大小一共有六种,两个标签一组,也就是从 <H1> 到 <H6> , <H1> 最大,<H6>最小.使用标题标签时,该标签会将字体变为粗体字,并会自成一行. 3. 使用范例: 原始碼 呈現結果 <H1>标题1</H1> 标题1

学习网页制作基础入门教程

教程|入门教程|网页 学习网页制作基础入门教程(1)网页编写 学习网页制作基础入门教程(2)排版标签 学习网页制作基础入门教程(3)字体标签 学习网页制作基础入门教程(4)图象标签 学习网页制作基础入门教程(5)背景标签 学习网页制作基础入门教程(6)连接标签 学习网页制作基础入门教程(7)表格标签 学习网页制作基础入门教程(8)框架标签 学习网页制作基础入门教程(9)序列标签 学习网页制作基础入门教程(10)表单标签 学习网页制作基础入门教程(11)注意的问题

学习网页制作基础入门教程(9)序列标签

教程|入门教程|网页 相关文章: 学习网页制作基础入门教程(1)网页编写 学习网页制作基础入门教程(2)排版标签 学习网页制作基础入门教程(3)字体标签 学习网页制作基础入门教程(4)图象标签 学习网页制作基础入门教程(5)图象标签 学习网页制作基础入门教程(6)连接标签 学习网页制作基础入门教程(7)表格标签 学习网页制作基础入门教程(8)框架标签 无序标签 1. 序列标签基本上可分为两种,一种是"无序条列",一种是"有序条列".所谓"无序条列"

学习网页制作基础入门教程(7)表格标签

教程|入门教程|网页 相关文章: 学习网页制作基础入门教程(1)网页编写 学习网页制作基础入门教程(2)排版标签 学习网页制作基础入门教程(3)字体标签 学习网页制作基础入门教程(4)图象标签 学习网页制作基础入门教程(5)图象标签 学习网页制作基础入门教程(6)连接标签 表格单元格对齐位置设定 1. 首先我们来看一个最简单的表格: 原始代码 显示结果 <TABLE BORDER=1><TR><TD>1</TD></TR></TABLE&g

学习网页制作基础入门教程(5)背景标签

教程|入门教程|网页 相关文章: 学习网页制作基础入门教程(1)网页编写 学习网页制作基础入门教程(2)排版标签 学习网页制作基础入门教程(3)字体标签 学习网页制作基础入门教程(4)图象标签 背景标签 1. 使用方法:<BODY BGCOLOR="#ffffff" BACKGROUND="bg.jpg"> 2. 标签解释:这个标签其实应该老早就要讲了,毕竟它是制作网页不可或缺的基本要素之一,我们背景颜色或图片的设定以及连接字体的颜色,统统都放在 <

学习网页制作基础入门教程(4)图象标签

教程|入门教程|网页 相关文章: 学习网页制作基础入门教程(1)网页编写 学习网页制作基础入门教程(2)排版标签 学习网页制作基础入门教程(3)字体标签 图象标签 1. 使用方法:<IMG SRC="/UploadPic/2007-7/200777152731585.gif" ALT="本站特约模特儿" ALIGN=RIGHT BORDER=0 HSPACE=2 VSPACE=2 HEIGHT=56 WIDTH=32> 2. 标签解释:目前常见的网页图形