高级网页设计师-高级网页设计师在设计中的手绘应用

一 : 高级网页设计师在设计中的手绘应用

  不论是平面设计领域还是网页设计领域,随着设计资源的日益增多和设计软件功能的日益强大,设计师们越来越依赖于现成的资源和技术。比如网页设计当中,大到页面设计的布局,小到一个icon的设计,都几乎是沿用前辈们的‘结晶’。虽然说很多时候这些既有的资源是免费共享的,而且对于手头需要快速完成的任务,很难花费时间再去精心设计。因此,设计师的个性被逐渐磨灭,剩下的只有日益被商业化的平庸作品。设计师们更加依赖于计算机软件技术所带来的视觉效果,从而整日沉溺在显示器和鼠标当中。结果导致因设计表达语言和表现手法的单一化,使得大多数设计作品显出僵化雷同的机械意味,缺乏人情味的亲切感。

  手绘风格的引入,对于互联网应用作品起到了一个积极的影响。表现和应用一定程度上保留了传统绘画之高雅艺术的样式,直接体现了设计师的审美情趣、艺术修养、内心情感。在手绘创作时,由于在其边缘处理上的随意性、涂色的不均匀性,使其表现形式具有原始性。加上设计师对生活感悟、内容理解、观察角度、文化背景不同,都给设计带来了多元化、人性化的特征。

  Banner手绘设计

  Google每一次节日活动的banner设计都别出心裁,这很大程度要归功于其应景且独特的手绘风格作品。banner图片采用手绘,不仅可以表现设计师独特的情感表现,而且笔画勾勒间,对于节日的美好祝福和情感表达卓然流露,让用户自然而然的产生亲近感。

  App应用手绘风格说明

  对于App应用的操作说明,如果采用枯燥的图文解说,不仅让用户感到乏味,减少了应用的热情,而且不够形象直观,用户不容易理解。如果采用下图这种手绘的设计风格,则可以大大增加操作的趣味性。

  

 

  iPad应用手绘风格

  iPad上的手绘应用,更能突出‘手’的优势。下图中手绘的设计,是不是令操作立即栩栩如生起来?

  

 

  软件界面手绘风格

  软件界面的介绍页面,同样可以通过手绘风格设计,让用户快速、形象的了解该软件的功能和特点。QQ电脑管家的无线安全助手,采用幽默的手绘风格,从用户的情感角度描绘了一幅使用者享受到的愉快场景,引起用户的情感共鸣和使用的兴趣。

  

  404页面设计手绘风格

  同样的,在深圳网站设计过程当中,如404页面、登录页面,会员中心页面等有交互功能体验的页面设计,也可以适当融入手绘的风格,体现设计师独具一格的视觉感官的同时,让网站的个性化得到淋漓尽致的体现。

  欣赏更多网站设计作品的朋友可以到http://www.maxhtml.com/ 非常不错的国内网站设计图欣赏网站。

二 : 网页设计师中级6

全国信息技术人才培养工程<网页设计师中级1>考试6

一、单项选择题(共32题)

1、(Flash)可以放置文档的所有可视资源,其中包括文本、图像、视频和影片的是: (1分) 答案:A

A、舞台

B、时间轴

C、菜单栏

D、工具面板

2、(Flash)ComboBox组件标签和数据值之间的不同点是: (1分) 答案:C

A、标签是与每个标签相关联的值,数据在组件中向用户显示

B、标签可以设置,数据不能设置

C、标签在组件中向用户显示,数据是与每个标签相关联的值

D、标签在组件中可以使用中文,数据是不可以用中文的

3、(Fireworks)在FirworksMX2004文档窗口中,选中多个对象的方法是( )。 (1分) 答案:A

A、按Shift键

B、按Ctrl键

C、按Alt键

D、按Ctrl+Alt键

4、(Dreamweaver)当鼠标移动到文字链接上时显示一个隐藏层,这个动作的触发事件应该是( )。 (1分) 答案:C

A、onClick

B、onDblClick

C、onMouseOver

D、onMouseOut

5、(Fireworks)在FireworksMX2004中,关于视图下列说法错误的是( )。 (1分) 答案:D

A、Fireworks中的视图分为全屏显示视图和矢量显示视图

B、全屏显示视图显示图片所有的细节

C、矢量显示视图只显示图片的矢量结构

D、全屏显示视图不显示图片的矢量结构

6、(Dreamweaver)Dreaweaver MX 2004工作区布局将“属性检查器”面板停靠在“文档”窗口的( )。 (1分) 答案:C

A、左侧

B、右侧

C、下侧

D、上侧

7、(Flash)一种动画要求用户绘制起始帧、结束帧以及中间各帧上的图形。这种动画是: (1分) 答案:C

A、行为补间动画

B、形状补间动画

C、逐帧动画

D、动作动画

8、(Flash)创建补间动画时,下列必须转化成元件才能实现的是: (1分) 答案:D

A、位置

B、大小

C、旋转

D、淡入

9、(Dreamweaver)如果要使图像在缩放时不失真,在图像显示原始大小时,按下( )键,拖动图像右下方的控制点,可以按比例调整图像大小。 (1分) 答案:B

A、Ctrl

B、Shift

C、Alt

D、Shift+Alt

10、(Dreamweaver)下面哪一种CSS的“高级”样式用于在用户选择链接时重定义链接的显示方式?( ) (1分) 答案:C

A、伪元素选择器

B、组合选择器

C、伪类选择器

D、ID选择器

11、(Fireworks)在Fireworks窗口中以合适的大小显示所选区域可以( )。 (1分) 答案:D

A、双击工具箱中的缩放工具

B、双击工具箱中的手形工具

C、最大化文档窗口

D、使用菜单视图|选区符合窗口大小命令

12、(Dreamweaver)创建最小的标题的文本标签是? ( ) (1分) 答案:C

A、<pre></pre>

B、<h1></h1>

C、<h6></h6>

D、<b></b>

13、(Flash)如果想从第一帧跳转到第五帧进行播放,可以使用的命令是: (1分) 答案:A

A、gotoAndPlay

B、gotoAndStop

C、Stop

D、Play

14、(Flash)Flash分解(打散)编辑对象的快捷操作是: (1分) 答案:A

A、Ctrl+B

B、Ctrl+Shift+P

C、Ctrl+Shift+B

D、Ctrl+Shift+I

15、(Flash)指定给对象的函数叫做什么? (1分) 答案:A

A、方法

B、实例名称

C、关键词

D、运算符

16、(Flash)所有文档资源对文档的大小都会产生影响,但下列哪种做法可以使影响更小一些? (1分) 答案:D

A、使用位图图像

B、嵌入字体

C、使用逐帧动画

D、慎重使用声音

17、(Flash)下列哪个面板可以访问 WSDL 文件的 URL 并查看该服务的架构? (1分) 答案:C

A、“组件”面板

B、“组件检查器”面板

C、“Web 服务”面板

D、“调试器”面板

18、(Fireworks)在FireworksMX2004中,关于历史面板功能的描述错误的是( )。 (1分) 答案:D

A、可以进行撤销和恢复操作

B、可以创建批处理命令

C、可以将操作应用于其他文档

D、在历史面板中只能选中连续的操作

19、(Flash)下列哪一个属于数据流声音具有的特点: (1分) 答案:A

A、与时间轴同步

B、必须全部下载才能播放

C、通常用于按钮声音效果和自动唱机

D、除非被明确停止,否则将播放至结束

20、(Flash)下列关于使用设备字体,说法正确的是: (1分) 答案:B

A、使用设备字体会使SWF文件增大

B、使用设备字体会使SWF文件减小

C、使用设备字体,会在 SWF 中嵌入字体轮廓

D、以上都不对

21、(Dreamweaver)在文本区域中若对输入的内容进行自动换行,则<textarea>标记的属性wrap值应设为( )。 (2分) 答案:B

A、off

B、soft

C、hard

D、默认

22、(Fireworks)Fireworks中导入 ASCII 文本的默认字体大小是? (2分) 答案:A

A、12 pixels

B、13 pixels

C、14 pixels

D、15 pixels

23、(Dreamweaver)若要求对文档中部分内容在浏览时几乎不做修改地输出,可以用( )标记通知浏览器。 (2分) 答案:A

A、<pre>

B、<bq>

C、<p>

D、<title>

24、(Dreamweaver)Dreamweaver MX 2004中,“首选参数”对话框的“层”分类中取默认值,则如果要创建嵌套层,需按下( )键才能完成。 (2分) 答案:B

A、Ctrl

B、Alt

C、Shift

D、Insert

25、(Dreamweaver)在命名可编辑区域时,以下( )字符可以用于设置可编辑区域的名字。 (2分) 答案:B

A、双引号

B、|

C、小括号

D、&

26、(Fireworks)FireworksMX2004中下面哪一项是对笔画面板的错误描述( )? (2分) 答案:C

A、笔画面板可以调整笔尖的宽度

B、笔画面板可以更改笔画的颜色

C、笔画面板不能设置笔画的纹理填充量

D、笔画面板可以选择笔画的类型

27、(Dreamweaver)网站已经加入了一些图像,但“资源”面板并没有显示这些图像。按一下“资源”面板中的“刷新站点列表”按钮,但它们仍然没有出现,接下来您该怎么做?( ) (3分) 答案:C

A、按一下“资源”面板中的“插入”按钮;

B、关闭“资源”面板,然后重新开启它;

C、选取“重建站点列表”命令;

D、确认包含影像的目录已经屏蔽。

28、(Dreamweaver)将层转换为表格的设置中,选中“使用透明GIFs”将会使生成的表格最后一行用透明的GIF文件填充,这样做的目的是( )。 (3分) 答案:C

A、可以通过拖动表列来编辑结果表格;

B、使结果表格在页面上居中;

C、确保该表格在所有浏览器中以相同的列宽度显示;

D、使生成的表格空行、空列最少。

29、(Dreamweaver)哪一项CSS 样式选项必须在浏览器中进行预览才能查看是否正确呈现?( ) (3分) 答案:B

A、a:link

B、a:hover

C、行高

D、字母间距

30、(Flash)下面导入声音文件的方法,正确的是: (3分) 答案:C

A、在资源管理器中选中声音文件,拖拽声音文件到舞台上。

B、打开文件菜单下的发布命令,在发布对话框中挑选要置入的声音文件。

C、打开文件菜单下的导入命令,在导入对话框中挑选要置入的声音文件。

D、打开插入菜单下的导入命令,在导入对话框中挑选要置入的声音文件。

31、(Dreamweaver)使用“插入”→“图像”命令,将图像从目前网站之外的文件夹插入页面中。下面( )选项会自动复制该图像到网站中的pic文件夹,而不会产生警告信息? (3分) 答案:B

A、在“文件”面板中选取图像,然后按一下“上传”。

B、在“网站定义”对话框中,设置默认图像文件夹。

C、使用“首选参数”对话框中的“常规”类别,并取消“插入对象时显示对话框”的选项;

D、在“文件”面板的图像上按一下鼠标右键,然后从上下文菜单中选择“以不显示对话框的方式插入图像”。

32、(Flash)关于用Flash编辑视频,下列说法正确的是: (3分) 答案:C

A、先导入到文档中,再编辑

B、先导入到“库”中,再编辑

C、导入之前,先编辑

D、以上说法都不对

二、多项选择题共15题(每题分,每题至少有2项正确的答案,少选答案对一题得分,多选不得分)

1、(Flash)flash mx 2004起始页包含:答案:ACD

A、打开最近项目

B、库

C、从模板创建

D、创建新项目

2、(Fireworks)关于Firworksmx2004文档属性颜色设置包含( )。答案:ABD

A、白色

B、透明

C、黑色

D、自定义

3、(Flash)在Flash MX Professional 2004中组件有哪几种类型?答案:ABC

A、用户界面

B、数据

C、媒体

D、特效

4、(Dreamweaver)在将模板应用于文档之后,下列说法中正确的是( )。答案:BD

A、模板将不能被修改

B、模板还可以被修改

C、文档将不能被修改

D、文档还可以被修改

5、(Dreamweaver)对于一个文字超链接,可以设置( )状态的颜色标记 。答案:BCD

A、text

B、link

C、alink

D、vlink

6、(Dreamweaver)浏览器向服务器端发送数据时可以采用的方法有( )。答案:AD

A、GET

B、SUBMIT

C、?RESET

D、POST

7、(Flash)flash可以导出的文档格式是:答案:ABD

A、swf

B、gif

C、cdr

D、avi

8、(Fireworks)在FireworksMX2004中,画布的属性设置包括( )。答案:ABCD

A、画布大小

B、画布颜色

C、画布旋转

D、画布修剪

9、(Fireworks)下面关于工具软件Fireworks的说法正确的是( )。 答案:ABCD

A、Fireworks可以绘制图像

B、Fireworks可以制做动画

C、Fireworks可以制做声音

D、Fireworks可以设置图像映像

10、(Dreamweaver)关于将层转换为表格的设置中,会影响到将来生成的表格行列数的设置有( )。 答案:AB

A、最多

B、最小

C、使用透明GIFs

D、防止层重叠

11、(Dreamweaver)关于使用“页面属性”中的“跟踪图像”,以下说法正确的有( ) 答案:AC

A、使用了“跟踪图像”的网页,在编辑状态下插入跟踪图像的位置不会出现背景图片;

B、使用浏览器浏览时跟踪图像也能显示出来;

C、使用浏览器浏览时只会出现背景图片,跟踪图像不能显示出来;

D、编辑页面时只出现背景图片。

12、(Dreamweaver)表格一般由( )标记组成。 答案:ABCD

A、<table>

B、<rt>

C、<th>

D、<td>

13、(Dreamweaver)( )功能使用网站能加快网站更新信息的存取速度? 答案:AD

A、显示站点地图

B、管理外部网站的链接

C、管理“存回/取出”系统

D、管理网站内文件的链接

14、(Dreamweaver)关于使用嵌套层的好处,以下说法正确的有()。 答案:AB

A、可以使子层的可见性永远和父层保持一致;

B、保持子层和父层的位置不变;

C、保持子层和父层的重叠顺序不变;

D、使得子层的大小不能超过父层。

15、(Dreamweaver)在Dreamweaver中,关于“网站相册”的功能,下面描述正确的有( ) 答案:ACD

A、所谓的“网站相册”,就是单击主页面上的小图片时在新页面打开相应的大图片;

B、图像文件可以是任意类型;

C、创建“网站相册”,电脑中必须要安装Fireworks 4或更高版本;

D、源文件夹名、目标文件夹名及指向文件夹的路径中不能含有中文。

三、判断题(共18题)

1、(Flash)不可以将 Flash 文档,发布成为独立的应用程序运行。 (1分) 答案:n

正确

不正确

2、(Dreamweaver)超级链接的载体不同,但它们链接的内容却可以完全相同。 (1分) 答案:y

正确

不正确

3、(Fireworks)在FireworksMX2004中,辅助线是精确对齐对象的工具,它是可被导出的( )。 (1分) 答案:n

正确

不正确

4、(Flash)元件可以多次重复使用,但会使文件变得很大,不建议使用。 (1分) 答案:n

正确

不正确

5、(Flash)如果想查找、选择和修改字体、资源及元件可以使用影片浏览器。 (1分) 答案:y

正确

不正确

6、(Flash)声音资源需要单独占用一个图层,不能和其他图层混用。 (1分) 答案:n

正确

不正确

7、(Dreamweaver)模板文件保存在 Templates 文件夹中,并存储在本地站点根文件夹中。 (1分) 答案:y

正确

不正确

8、(Dreamweaver)某个库项目的实例变为可编辑后,当库项目改变后,它将不会自动更新。 (1分) 答案:y

正确

不正确

9、(Flash)由于Flash致力于网络动画,所以其不支持逐帧动画。 (1分) 答案:n

正确

不正确

10、(Dreamweaver)删除站点就是删除了本地站点的实际内容,即它所包括的文件夹和文档等。 (1分) 答案:n

正确

不正确

11、(Flash)可以像其他图像文件一样,将音频文件导入到工作区中。 (1分) 答案:y

正确

不正确

12、(Dreamweaver)Dreamweaver MX 2004的一个最大特点就是全面采用CSS样式控制文本、图像、表格等网页元素的样式。 (1分) 答案:y

正确

不正确

13、(Flash)默认情况下,时间轴上的播放头从第 1 帧开始向前移动,直至文档的最后一帧。 (1分) 答案:y

正确

不正确

14、(Flash)通过动作脚本更改影片剪辑实例属性,在创作时也可以同时看见更改效果。 (2分) 答案:n

正确

不正确

15、(Dreamweaver)在浏览框架集文档时,每个框架文档的标题并不显示在浏览器的标题栏上。 (2分) 答案:y

正确

不正确

16、(Flash)Flash MX 2004可以导出视频,导出视频格式是FLV文件。 (2分) 答案:y

正确

不正确

17、(Flash)颜料桶工具可以用颜色填充区域,但有时候可能不能填充,原因可能是该图形太小。(3分) 答案:n

正确

不正确

18、(Flash)将资源直接添加给影片剪辑实例的缺点是:必须等待整个 SWF 加载完成才能播放。(3分) 答案:y

正确

不正确

三 : 高级网站设计师系列一:初步接触Dreamweaver & 网站

    dreamweaver是macromedia公司出品的一款"所见即所得"的网页编辑工具。
    与 frontpage不同,deamweaver采用的是mac机浮动面板的设计风格,当你习惯了其操作方式后,就会发现dreamweaver的直观性与高效性是frontpage所无法比拟的。
    dreamweaver对于dhtml(动态网页)的支持特别好,可以轻而易举地做出很多眩目的互动页面特效,插件式的程序设计使得其功能可以无限的扩展。
    dreamweaver与flash、fireworks 并称为 macromedia的网页制作三剑客,由于是同一公司的产品,因而在功能上有着一个非常紧密的结合。
    因此,说dreamweaver是高级网页制作的首选并不为过。 

    和所有windows(窗口)系列软件一样,软件从上到下:①标题栏,②菜单栏,③插入栏,④文档栏,⑤标准栏,⑥工作区域,以及其它各类面板。其中“标题栏”和“菜单栏”是永远不会消失的,“插入栏”可以通过菜单“窗口”—“插入”(ctrl+f2)打开,“文档栏”和“标准栏”用菜单命令“查看”—“工具”进行选择,“工作区域”也就是一个网页的内容,其它各类面板均可通过菜单“窗口”打开。对于整个软件的进一步设定,可以通过菜单“编辑”—“参数选择”(ctrl+u)查看其中的每项。

    dreamweaver是用来做网页的,更确切来说是用来做网站的,所以在使用dreamweaver之前我们将熟悉一下网站的架构思想。一定要考虑好以下几方面:

一,定位你的网站主题和名称
    设计一个站点,首先遇到的问题就是定位网站主题。所谓主题也就是你的网站的题材。网络上的网站题材千奇百怪,琳琅满目。只要你想的到,就可以把它制作出来。下面是美国《个人电脑》杂志(pc magazine)评出的2002年度排名前100位的全美知名网站的十类题材,对我们有一些参考价值。
  第1类:网上求职
  第2类:网上聊天/ 即时信息/ icq
  第3类:网上社区/ 讨论 / 邮件列表
  第4类:计算机技术
  第5类:网页/ 网站开发 
  第6类:娱乐网站 
  第7类:旅行 
  第8类:参考 / 资讯
  第9类:家庭/ 教育 
  第10类:生活/ 时尚 
  每个大类都可以继续细分,比如娱乐类再分为体育 /电影/ 音乐大类,音乐又可以按格式分为mp3,vqf,ra,按表现形式分古典,现代,摇滚等。以上都只是最常见的题材,还有许多专业的,另类的,独特的题材可以选择,比如中医,热带鱼,天气预报等等。同时,各个题材相联系和交叉结合可以产生新得题材,例如旅游论坛(旅游+讨论),经典入球播放(足球+影视)按这样分下去,题材可以有成千上万个,你不会再为题材重复,难以选择而烦恼。
  对于题材的选择,建议如下:
    1.主题要小而精。定位要小,内容要精。如果你想制作一个包罗万象的站点,把所有您认为精彩的东西都放在上面,那么往往会事与愿违,给人的感觉是没有主题,没有特色,样样有却样样都很肤浅,因为您不可能有那么多的精力去维护它。网络的最大特点就是新和快,目前最热门的个人主页都是天天更新甚至几小时更新一次。最新的调查结果也显示,网络上的“主题站”比“万全站”更受人们喜爱,就好比专卖店和百货商店,如果我需要买某方面的东西,肯定会选择专买店。再举个例子,一位网友希望制作文学方面的题材,但是文学也包括许多许多内容,有小说,诗歌,散文;有科幻,武侠,推理;经仔细了解他的擅长和想要提供的主要内容,最后将题材定位在网络文学上,删除了原有的一些无关的文学作品,集中扩大和整理网络文学作品。网站推出后,很快受到大家的喜爱。
    2.题材最好是你自己擅长或者喜爱的内容。比如:您对擅长编程,就可以建立一个编程爱好者网站;对足球感兴趣,可以报道最新的战况,球星动态等。这样在制作时,才不会觉得无聊或者力不从心。兴趣是制作网站的动力,没有热情,很难设计制作出杰出的作品。
    3.题材不要太滥或者目标太高。“太滥”是指到处可见,人人都有的题材;比如软件下载,免费信息。“目标太高”是指在这一题材上已经有非常优秀,知名度很高的站点,你要超过它是很困难的。除非你下决心和有实力竞争并超过它,记住,在互联网上只有第一,人们往往只记得最好的网站,第二、第三名的印象则会浅得多。
  ok,如果你已经有一个绝妙的主意了,那我们开始为网站起名字。您可能认为起名字与网站设计无关。其实网站名称也是网站设计的一部分,而且是很关键的一个要素。你来看,“电脑学习室”和“电脑之家”显然是后者简练;“迷笛乐园”和“midi乐园”显然是后者明晰;“儿童天地”和“中国幼儿园”显然是后者大气。我们都知道piiicup的中文名称“奔腾”,如果改为“奔跑”,可能就没有今天这么“火”了。和现实生活中一样,网站名称是否正气,响亮,易记,对网站的形象和宣传推广也有很大影响。一般的建议是:
    1. 名称要正。这个“正”其实就是要合法,和理,和情。不能用反动的,色情的,迷信的,危害社会安全的名词语句。
    2. 名称要易记。根据中文网站浏览者的特点,除非特定需要,网站名称最好用中文名称,不要使用英文或者中英文混合型名称。例如:beyond studio和超越工作室,后者更亲切好记。另外,网站名称的字数应该控制在六个字(最好四个字)以内,比如“xx阁”“xx设计室”,四个字的可以用成语,如“一网打进”。字数少还有个好处,一般友情链接的小logo尺寸是88x31,而六个字的宽度是78左右,适合于其他站点的链接排版。
    3. 名称要有特色。名称平实就可以接受,如果能体现一定的内涵,给浏览者更多的视觉冲击和空间想象力,则为上品。这里举几个阿捷认为很好的名称:音乐前卫,网页陶吧,天籁绝音。在体现出网站主题的同时,能点出特色之处。
  总之,定位题材和名称是设计一个网站的第一步,也是很重要的一部分。如果能找到一个满意的名称,花一天时间翻字典也是值得的。

初学者最容易犯的错误就是:确定题材后立刻开始制作。当你一页一页制作完毕后才发现:网站结构不清晰,目录庞杂,内容东一块西一块。结果不但浏览者看得糊涂,自己扩充和维护网站也相当困难,您的网站或许就此半途而废,更糟糕的是:你因此失去了制作主页的信心和兴趣!

二,确定栏目和版块
    栏目的实质是一个网站的大纲索引,索引应该将网站的主体明确显示出来。在制定栏目的时候,要仔细考虑,合理安排。一般的网站栏目安排要注意以下几方面:
    1.一定记住要紧扣你的主题!一般的做法是:将你的主题按一定的方法分类并将它们作为网站的主栏目。例如一个动画类站点,可以将栏目分为动物动画,标志动画,三维动画,卡通动画等,在首页上标明最近更新的动画。记住:主题栏目个数在总栏目中要占绝对优势,这样的网站才显得专业,主题突出,容易给人留下深刻印象。
    2.设一个最近更新或网站指南栏目!如果你的首页没有安排版面放置最近更新内容信息,就有必要设立一个“最近更新”的栏目。这样做是为了照顾常来的访客,让你的主页更有人性化。如果你的主页内容庞大(超过15mb),层次较多,而又没有站内的搜索引擎,建议您设置“本站指南”栏目。可以帮助初访者快速找到他们想要的内容。
    3.设定一个可以双向交流的栏目!不需要很多,但一定要有。比如论坛,留言本,邮件列表等,可以让浏览者留下他们的信息。有调查表明,提供双向交流的站点比简单的留一个"email me"的站点更具有亲和力。
    4.设一个下载或常见问题回答栏目!网络的特点是信息共享。如果你看到一个站点有大量的优秀的有价值的资料,你肯定希望能一次性下载,而不是一页一页浏览存盘。“将心比心”在你自己的主页上设置一个资料下载栏目,会得到大家的喜欢。有些站点为了广告显示量,一篇文章还要分几页显示,我觉得迟早会因访问量下降而淘汰。另外,如果您的站点经常收到网友关于某方面的问题来信,你最好设立一个常见问题回答的栏目,既方便了网友,也可以节约自己更多时间用以学习。
至于其他的辅助内容,如关于本站,版权信息等可以不放在主栏目里,以免冲淡主题。总结以上几点,我们得出划分栏目需要注意的是:
●    尽可能删除与主题无关的栏目
●    尽可能将网站最有价值的内容列在栏目上
●    尽可能方便访问者的浏览和查询
上面说的是栏目,我们再看看版块设置。版块比栏目的概念要大一些,每个版块都有自己的栏目。举个例子:网易的站点分新闻,体育,财经,娱乐,教育等版块,每个版块下面有各有自己的主栏目。一般的个人站点内容少,只有主栏目(主菜单)就够了,不需要设置版块。如果你觉得的确有必要设置版块的,应该注意:1.各版块要有相对独立性。2.各版块要有相互关联。3.版块的内容要围绕站点主题。关于版块方面,主要是门户站点等较大icp需要考虑的问题,在此不再作展开讨论。

    以上两点都是空谈~!纸上谈兵,掌握了原理就应该实践应用。就应用而言还是有其规范的。

三,网站开发规范
    1.    网站目录设置规范
目录建立的原则:以最少的层次提供最清晰简便的访问结构。 
a.根目录:指dns域名服务器指向的索引文件的存放目录。服务器的ftp上传目录默认为html
b.根目录文件:根目录只允许存放index.html和main.html文件,以及其他必须的系统文件。
c.每个语言版本存放于独立的目录。已有版本语言设置为:
简体中文 gb
繁体中文 big5
英 语 en
日 语 jp 
d.每个主要功能(主菜单)建立一个相应的独立目录。
根目录下的images为存放公用图片目录,每个目录下私有图片存放于各自独立images目录.例如:menu1images
menu2images
e.所有的js文件存放在根目录下统一目录script ;所有的css文件存放在根目录下的style目录;所有的bbs程序存放在根目录并列目录bbs目录.
    2,网站文件命名规范
文件命名的原则:以最少的字母达到最容易理解的意义。
索引文件统一使用index.html文件名(小写)
index.html文件可统一作为"桥页",不制作具体内容,仅仅作为跳转页和meta标签页。主内容页为main.html
按菜单名的英语翻译取单一单词为名称。例如:
关于我们 aboutus
信息反馈 feedback 
产 品 product
所有单英文单词文件名都必须为小写,所有组合英文单词文件名第二个起第一个字母大写;
所有文件名字母间连线都为下划线
图片命名原则以图片英语字母为名。大小原则写同上。
例如:网站标志的图片为logo.gif
鼠标感应效果图片命名规范为"图片名+_+on/off"。
例如:menu1_on.gif/menu1_off.gif
其它文件命名规范:
js的命名原则以功能的英语单词为名。例如:广告条的js文件名为:ad.js
所有的asp文件后缀为asp,所有asp程序的配置文件为config.asp
    3,网站建设尺寸规范
页面标准按800*600分辨率制作,实际尺寸为778*434px
页面长度原则上不超过3屏,宽度不超过1屏 
每个标准页面为a4幅面大小,即8.5x11英寸 
全尺寸banner为468*60px,半尺寸banner为234*60px,小banner为88*31px
另外120*90,120*60也是小图标的标准尺寸 
每个非首页静态页面含图片字节不超过60k,全尺寸banner不超过14k

那有了上面很正规的一套思想以后,是不是有建立一个个人站点的欲望呢

四 : 七招帮你提高网页设计水平

导读:本文的作者为一名资深的网页设计师,作者论述了改进网页设计的7个要点,并配以成功的案例,图文并茂。

1. 学好HTML和CSS编程

这条之所以成为第一条是因为它是网页设计中最重要的部分。明白网页是如何在浏览器中渲染的可以防止你做出不合理的设计,比如那些无法用网页实现的设计。要保持与时俱进,弄清楚现什么效果可以用现在的CSS技术实现,什么效果不可以。

使用CSS3最新技术设计的经典案例

Atebits(http://www.atebits.com/)在网页文本中使用了文本阴影,这样就不需要使用图片了。它还使用了-webkit-transform和-webkit-transition来向这三个图标加入了一些动画,不过这些效果只有在支持webkit的浏览器中才能看到,比如Chorme和Safari。

Elliot Jay Stocks(http://elliotjaystocks.com/)使用了一种叫做@font-face的CSS3方法来让浏览器下载特定的字体,这就免去了使用图片的麻烦。

2. 注重细节

好的设计和伟大设计之间的距离在于是否做好细节。

优秀设计细节的例子

Metalab(http://metalabdesign.com/)很好的混合了着色(Shading)、渐变和阴影,为网页增加了额外的细节。

We Follow(http://wefollow.com/)巧妙的使用了渐变和阴影,为其用户界面添加了很好的细节。

3. 善于使用留白

世界上最痛苦的事情莫过于当你想阅读一些东西却发现页面上各种元素的旁边充满了文字,页面设计者这么做的目的仅仅是想要在页面狭小的控件里放下更多的信息,但这只能给别人带来一种痛苦的体验。合理的使用留白可以给页面中的元素以呼吸的空间,减少阅读者眼镜的压力,从而让用户有一种愉快的浏览体验。

合理使用留白的例子

Soccernet(http://soccernet.espn.go.com/news/story?id=657760sec=transferscc=5739)在他们的文章页面中很好的使用了留白,你可以看出文字都离其它元素有一定的距离,从而提高了可读性。

Usability Post(http://www.usabilitypost.com/)使用留白的方法和Soccernet差不多。

4. 图片很重要

如果你有一个天才的设计,但却没有高质量的图片,那将是非常悲哀的。图片应当辅助你的设计来推销产品或传达一定的信息,或者仅仅来吸引眼球。

精彩图片的例子

Palm(http://www.palm.com/us/products/phones/pre/)在其Palm Pre产品页面上使用了一幅精美的图片来作为抬头。通过一种清新而动人的方式展示了其产品。

Tom Pojeta(http://www.pojeta.cz/)在其页面上使用了绘画图片,为其站点带来了生气。

5. 充分发挥色彩的威力

色彩在网页设计中的重要性经常被忽视。在网页设计中应当对色彩的使用给予更多的注意,因为它可以按照你的意愿来对用户进行一定的引导。例如,页面中的链接应当与页面正文文字的颜色有所区别,以便用户能够认出它们是链接。如果链接的颜色和正文的颜色差不多,那么用户如何能注意到它们并点击它们呢?

充分发挥色彩威力的例子

Sam Brown(http://sam.brown.tc/)在暗色背景上使用了许多种的颜色,当鼠标移动到链接上时其背景会变成彩色,以便链接能清晰的显示。

MIX Online(http://visitmix.com/)采用了彩色的导航条,当点击一个彩色导航条以后,页面的背景色便会变成相应的颜色。

6. 不要忘了页脚

页脚设计经常被忽视,因为设计人员没有认识到它们的重要性。它们有时比你想象的要有用的多,因为它们可以包含页面任何地方都无法承载的额外信息。它们也可以作为引导用户到站点其它部分的向导。

页脚设计的例子

Jason Santa Maria(http://jasonsantamaria.com/)在其超大的页脚中放置了许多额外信息。

Web Designer Wall(http://www.webdesignerwall.com/)在页脚放置了最新的发帖和最新的评论,在用户滚动到页面底部时,这些内容也会吸引住读者。这是一种在博客网站上使用的典型设计。

7. 清晰的导航

导航栏是页面中最重要的部分,因为它是用户使用网站最主要的途径。通过使用简单清晰的导航栏,可以提升网站的易用性,还可以减少用户在寻找自己需要的内容时遇到的麻烦。

清晰的导航的例子

Disambiguity(http://www.disambiguity.com/)使用了标签页的方式来给用户以清晰的指示。

Dabs(http://www.dabs.com/)同样使用了标签页,但同时还在页面左侧使用了侧边栏,将网站内容的子分类予以显示,而且对不同的大类还用不同的颜色加以区分。

作者:Tom Kenny Inspect Element的作者,现在供职于TUI Travel公司,进行网页设计。其Twitter地址为;http://twitter.com/tkenny(译/曹巳甲)

下页更精彩: 1 2 3 4 5 下一页
上一篇: 江苏省书法家协会-江苏书法家经典书法作品 下一篇: 户外运动-户外运动节省体能方法

优秀文章