>웹 프론트엔드 >CSS 튜토리얼 >웹사이트 제작을 위한 웹페이지 스킬_VML 관련

웹사이트 제작을 위한 웹페이지 스킬_VML 관련

WBOY
WBOY원래의
2016-05-16 12:09:021354검색

相信众位网友在网上尽情冲浪时,一定会看到不少设计独特、创意新颖、页面诱人的个人网页,遇到这些网页你也一定会驻足停留、仔细欣赏一番,同时脑海中大概也会有一丝想要制作一个属于自己的个人主页的念头。如果你确实有这个想法,那就请你继续看完下面的内容,下面提供的网页设计技巧一定会使你大饱眼福,并让你在以后设计自己的主页过程中游刃有余。好了,说了这么多,还是让我们直接切入正题,和大家一起看看笔者今天带来了哪些网页制作技巧吧:

1、设计前要有筹划

设计主页也许并不是很困难。但这一工作与编制传统的宣传品一样,都需要我们谨慎处理和筹划。换言之,我们必须首先确定自己需要传达的主要信息,然后细意斟酌、把所有意念合情合理地组织起来;之后是设计一个页面式样,试用于有代表性的用户,接着重复修订,务求尽善尽美。

2、选择内容要有新鲜感

万维网上不断有新事物出现、每天都有新花样。如果你的主页从不改变,用户很快会厌倦。因此网页内容的选择要不落俗套,要重点突出一个“新”字,这个原则要求我们在设计网站内容时不能照抄别人的内容,要结合自身的实际情况创作出一个独一无二的网站。放眼望去,网上的许多个人主页简直就是"杂货店",内容包罗万象,题材千篇一律,人人都是"软件下载",个个都有"网络导航",从头到尾找不出一丝“鲜”意。所以,我们在设计网页时,要把功夫下在选材上。选材要尽量做到“少”而“精”,又必须突出“新”,如能坚持天天更新的话,我相信这样的网页一定会受到大家的欢迎。

3、内容相对实用性大

一个网页尽管设计得趣味盎然,引人入胜,但这不是吸引用户最好的理由。要想最大限度地留住用户首要的是要让它有用处。这样做的一个很简单的办法是提供相互参与--让读者做一些事情,如报名获取定期发送的通讯,并用某种方式报答他们的参与,如每周抽奖或给予下载一些东西的机会。

4、网页命名要简洁

由于一个网站不可能就是由一个网页组成,它有许多子页面,为了能使这些页面有效地被连接起来,用户最后能给这些页面起一些有代表性的而且简洁易记的网页名称。这样既会有助于你以后方便管理网页,在向搜索引擎提交你的网页时更容易被别人索引到。在给网页命名时,最好使用自己常用的或符合页面内容的小写英文字母,这直接关系到页面上的连接。

5、确保页面的导览性好

主页的其中一个很重要的功能就是作为导航工具,指引用户查阅你存储在网址或其他地点的信息。因此在设计主页时,应尽量使导览过程变得很轻松。基于清晰明确和速度的考虑,主页上的超级联接内容应只限于几个高级的类别,例如公司、产品、服务等等。一般一个A4页面大小的网页用六至八个超级联接比较合适。此外,你还要保证超级联接的层数不能太多,超过4层以上的联接信息将会使人感到厌烦。因此,你必须在广度和深度之间求取平衡。如果你的网址上有太多信息,你可能要制作较长的页面或使用更多联接层数,甚至可能要建立多个主页、使每个主页载有不同的信息。如果能够让用户在主页上以关键字或词语查找所需的信息,肯定受用户欢迎。

6、善用表格来布局

不要把一个网站的内容象作报告似的一二三四地罗列出来,要注意多用表格把网站内容的层次性和空间性突出显示出来,使人一眼就能看出你的网站重点突出,结构分明。

7、合理设计视觉效果

不必在以页面上填满图像来增加视觉趣味。尽量使用彩色圆点--它们较小并能为列表项增加色彩活力(并能用于彩色列表)。彩色分隔条也能在不扰乱带宽的情况下增强图形感。另外网页设计好后,一定要在不同类型的浏览器和不同分辨率的情况下测试主页,例如许多浏览器使用640×480的分辨率,尽管在800×600高分辨率下一些Web页面看上去很具吸引力,但在640×480的模式下可能会黯然失色。作一点小小的努力,设计一个在不同分辨率和不同类型的浏览器下都能正常显示的网页。

8、排版时要注意细节

别轻易让文字居中和使用粗体或斜体字符。除了视感混乱之外,很多流览器不能很好地显示斜体字,也不能补偿由于字母倾斜引起的空白变化。利用短的段落,加点列示,适当的整块引用文字,用水平线分节,用影象地图指引主要连接,使你的页面能吸引人和容易阅读。另外笔者提醒大家注意的是,不要把重要的内容排版放到网页的结尾,因为读者的视线可能停留在主页上面较多一点,或者有些读者没有耐心往下看那么远。

9、善用GIF和JPG格式的图象

用户在网上四处遨游,你必须设法吸引和维护他们对你的主页的注意力。万维网的其中一个最重大资源是其多媒体能力,所以我们无论如何要善加利用。主页上最好有醒目的图像、新颖的画面、美观的字款,使其别具特色,令人过目不忘。图像的内容应有一定的实际作用,切忌虚饰浮夸。目前因特网上大多数使用GIF和Jpeg交互格式的图象,因为交互格式的图像是分级显示出来的--首先以很低的分辨率显示,然后逐步提高分辨率,直至最后达到正常显示--这种方式有时候会使较大的图像看起来好象装载得快一些,实际上并非如此,但这是一种有益的错觉。这样也便于读者在图像装载的过程中看到它的模样,如果他们不喜欢或不想看的话就有机会中断传输或转向别的地方。

10、为图片添加文字说明

给每幅图形加上文字的说明,在出现之前就可以看到相关内容,尤其是导航按钮和大图片更应如此。这样一来,当网络速度很慢不能把图象下载下来时或者用户在使用文本类型的浏览器时,照样能阅读网页的内容,以后用户在访问你的站点时总有一种亲切感觉,认为你心细,比较善解人意,时时刻刻为他人着想,相信你的好心会有好报的。

11、多使用图象缩微图

比如说有一张800×600像素的1600万色扫描图,所占空间约为50K。使用PhotoShop这一类的图象编辑工具对原图进行重新取样,比如说高度为100像素(为确保浏览器能即时以合适的大小显示图像,高度和宽度很重要。也许为了达到你自己的要求你得进行调整才能找到最合适的大小,但可以从高度除以4~6开始),PhotoShop会自动计算新图象的宽度。保存新图象,它的大小现在应为8K或更小。然后在源文件中添加这样一段HTML代码: ,那么浏览器在解释执行Lowsrc命令时,将要求浏览器在真正的画面载入以前先装载低分辨率的图像,这样就会让访问者清楚将会出现什么样的图片。

12、不宜使用太多的动画

大家都喜欢用GIF动画来装饰网页,它的确很吸引人,但我们在选择时,是否能确定必须用GIF动画,如果答否,那么就选择静止的图片,因为它的容量要小得多。同样的尺寸的LOGO,GIF动画的容量有5K,而静止LOGO的只有3K。虽然只有2K之差,但多起来,就会影响下载的速度,所以,如果有些不是必须的,就选择最小的。

13、闪烁文字不要多用

有的设计者想通过闪烁的文字来引起访问者的注意是可以被人理解的,但一个页面中最多不能有三处闪烁文字,太多了给用户一种眼花缭乱的感觉,反而会影响用户去访问该网站的其他内容,正所谓“物极必反”也。

14、页面长度要适中

当一个页面很长时就应该要注意了,因为它的传输时间明显要比较短的页面的传输时间长,太长的页面传输会使访问者在等待中失去耐心。而且为了阅读这些长文本,访问者不得不使用卷滚条,从而也浪费了用户在网上冲浪的时间。如果你有大量的基于文本的文档,应当以AdobeAcrobat格式的文件形式来放置,以便你的访问者能离线阅读,从而节省宝贵的时间。

15、Java程序少用为宜

不要使用大幅面的Java程序,能够用javascript替代效果的则尽量不要使用java.因为目前来讲java的运行速度实在慢的让人无法忍受,往往使浏览者没有耐心等页面全部显示出来,这样你的精心设计便毫无效果啦。

16、整个页面风格要一致

你网页上所有的图像、文字,包括像背景颜色、区分线、字体、标题、注脚什么的,要统一风格,贯穿全站。这样子读者看起来舒服、顺畅,会对你的网站留下一个“很专业”的印象。

17、记数器能不用最好不用

카운터도 프로그램에 의해 설계되기 때문에 카운터를 표시하는 과정은 실제로는 프로그램을 실행하는 과정이며 이는 사용자의 귀중한 온라인 시간을 차지합니다. 또한 대부분의 시청자는 카운터가 무의미하다고 생각합니다. 쉽게 만들어진 가짜, 시청자도 광고를 보고 싶어하지 않습니다. 따라서 저자는 웹 사이트에 눈길을 끄는 클릭 카운터를 배치하는 것을 가볍게 고려하지 말 것을 권장합니다. 중요하다고 생각하는 것을 판매하는 것이 아니라 방문자에게 서비스를 제공하도록 웹사이트를 디자인합니다. 귀하의 사이트가 얼마나 인기가 있는지 보여주는 경우 액세스 로그를 표시하는 링크를 제공하는 것이 좋습니다.

18. 각 페이지에는 탐색 표시가 있어야 합니다

모든 페이지, 특히 '홈페이지로 돌아가기' 링크에서 처음부터 끝까지 탐색 기호를 사용하세요. 모든 페이지에서 이 작업을 수행할 수 있습니다. 예를 들어, 각 페이지의 상단(또는 하단)에는 일련의 작은 아이콘이 있습니다. 첫 번째 아이콘은 홈 페이지로 돌아가고, 두 번째 아이콘은 장으로 돌아가고, 세 번째 아이콘은 섹션으로 돌아갑니다. 이미지 내비게이션 버튼이라면 사람들이 이해할 수 있도록 명확한 라벨이 있어야 합니다. 생생한 시각적 효과에만 초점을 맞추고 텍스트의 링크 색상을 혼동하게 만들지 마세요. 탐색은 방문하지 않음, 파란색, 보라색 또는 적갈색과 같은 기존 방식을 사용하는 것이 가장 좋습니다. 즉, 텍스트 링크는 독자에게 명확한 방향을 제공하기 위해 페이지의 다른 텍스트와 구별되어야 합니다.

19. 상대 슈퍼 연결을 사용해 보세요

이미지 또는 텍스트 하이퍼링크를 만들 때 가능한 한 상대 하이퍼링크를 사용하십시오. 이는 웹 페이지의 이식성이 더 높기 때문입니다. 예를 들어 소스 파일 세트를 다른 위치로 이동할 때 상대 경로 이름은 여전히 ​​유효합니다. 연결의 대상 주소를 다시 수정하지 않고도 상대 슈퍼 연결을 사용할 때 입력량이 적습니다. 물론 동일한 페이지의 연결 항목은 절대 주소를 사용한 후 상대 주소를 사용해야 합니다. 페이지를 새로고침할 때마다 연결을 선택해야 합니다. 직접적인 관련이 없는 파일에 연결하는 경우에는 나중에 원본 파일을 다른 디렉터리로 이동할 경우 연결을 변경할 필요가 없도록 절대 경로를 사용하는 것이 좋습니다.

20. 슈퍼 연결이 직관적이고 효과적인지 확인하세요

페이지의 하이퍼링크를 통해 사용자는 원하는 내용을 빠르게 찾을 수 있어야 합니다. 대부분의 좋은 웹사이트에는 각 페이지의 동일한 위치에 동일한 탐색 모음이 있으므로 시청자는 각 페이지에서 웹사이트의 모든 부분에 직관적으로 액세스할 수 있습니다.

또한, 특히 "여기를 클릭하세요"는 피해야 합니다. "여기를 클릭하세요"를 원하는 사람은 그것이 정확히 "여기"인지, 연결이 올바른지 신중하게 고려해야 합니다. 연결 이름을 연결 URL과 다르게 만들지 마십시오. 이는 독자의 시간을 낭비하게 됩니다.

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.