网页设计师试题

网页设计师试题（通用12篇）

网页设计师试题 篇1

《网页设计基础〉试题

一,单项选择题

1,目前在Internet上应用最为广泛的服务是()

A.FTP服务 B.由四个子域组成,其中()子域代表国别代码.A.center B.nbu C.edu D.cn

4,当阅读来自港澳台地区站点的页面文档时,应使用的正确文本编码格式是().A.GB码 B.Unicode码 C.BIG5码 D.HZ码

5,当标记的TYPE属性值为()时,代表一个可选多项的复选框.A.TEXT B.PASSWORD C.RADIO D.CHECKBOX

6,为了标识一个HTML文件应该使用的HTML标记是()

A.＜P＞＜/P＞B.＜body＞＜／body＞

C.＜html＞＜／hTmL＞D.＜table＞＜／table＞

7,在客户端网页脚本语言中最为通用的是()

A.javascript B.VB C.Perl D.ASP

8,在HTML中,标记的Size属性最大取值可以是()

A.5 B.6 C.7 D.8

9,使用嵌入式方法引用样式单应该使用的引用标记是().A.＜link＞B.＜object＞C.＜style＞D.＜head＞

10,在DHTML中把整个文档的各个元素作为对象处理的技术是()

A.HTML B.CSS C.DOM D.Script(脚本语言)

11,下面不属于CSS插入形式的是()

A.索引式 B.内联式 C.嵌入式 D.外部式

12,在网页中最为常用的两种图像格式是().A.JPEG和GIF B.JPEG和PSD C.GIF和BMP D.BMP和PSD

13,如果站点服务器支持安全套接层(SSL),那么连接到安全站点上的所有URL开头是()

A.HTTP B.HTTPS C.SHTTP D.SSL

14,在HTML中,要定义一个书签应该使用的语句是().A.text

B.text

C.text

D.text

15,对远程服务器上的文件进行维护时,通常采用的手段是()

A.POP3 B.FTP C.SMTP D.Gopher

16,下列Web服务器上的目录权限级别中,最安全的权限级别是()

A.读取 B.执行 C.脚本 D.写入

17,XML描述的是()

A.数据的格式 B.数据的规则 C.数据的本身 D.数据的显示方式

18,Internet上使用的最重要的两个协议是()

A.TCP和Telnet B.TCP和IP C.TCP和SMTP D.IP和Telnet

19,下列Web服务器上的目录权限级别中,最安全的权限级别是().A.读取 B.执行 C.脚本 D.写入

20,下面说法错误的是()

A.规划目录结构时,应该在每个主目录下都建立独立的images目录

B.在制作站点时应突出主题色

C.人们通常所说的颜色,其实指的就是色相

D.为了使站点目录明确,应该采用中文目录

21,在Dreamweaver中,最常用的表单处理脚本语言是().A.C B.Java C.ASP D.JavaScript

22,在Dreamweaver MX中,想要使用户在点击超链接时,弹出一个新的网页窗口,需要在超链接中定义目标的属性为()

A.parent B._bank C._top D._self

23,网页制作技术不可以实现由一个文件控制一大批网页()

A.CSS文件 B.库 C.模板 D.层

24,查看优秀网页的源代码无法学习().A.代码简练性 B.版面特色

C.网站目录结构特色 D.Script程序

25,在网页制作过程中,LOGO的标准尺寸为()Pixels.A.468~60 B.80~31 C.88~31 D.150~60

26,客户机可向服务器按MINE类型发送和接收信息,客户机使用()请求方式表示要求服务器发送文件头消息.A.SMTP B.GET C.HEAD D.POST

27,在色彩的RGB系统中,32位十六进制数000000表示的颜色是().A.黑色 B.红色 C.黄色 D.白色

28,SQL Server “连接”组中有两种连接认证方式,其中在()方式下,需要客户端应用程序连接时提供登录时需要的用户标识和密码.A,Windows身份验证 B,SQL Server 身份验证

C,以超级用户身份登录时 D,其他方式登录时

29.网页代码第一行 说明此页是:

A,HTM B,PHP C,ASP D,VBSCRIPT

30,不论是网络的安全保密技术,还是站点的安全技术,其核心问题是().A,系统的安全评价 B,保护数据安全

C,是否具有防火墙 D,硬件结构的稳定

二,简答题(每小题8分,共40分)

31,简述建设一个网站的一般过程.32,简述gif,jpg,swf,psd文件的特点和用途.33,Asp与JavaScript有什么区别

34,论述网页设计中所需要注意的通用规则.35,简述浏览器从 打开index.htm的工作过程.三,论述题

假设您现在是广丰信息港的策划人,将为广丰信息港规划5个核心栏目,您会设置哪五个栏目 请说明每个栏目的设置目的,原因和运作方式.答案

1.B 2.B 3.D 4.C 5.D

6.C 7.A 8.C 9.A 10.C

11.A 12.A 13.B 14.A 15.B

16.A 17.C 18.B 19.C 20.D

21.D 22.B 23.D 24.C 25.C

26.D 27.A 28.B 29.C 30.A

简答题要点:

31.(1)申请域名(2)购买空间(3)制作网页(4)上传管理

32.gif 动态格式 小图形 jpg 压缩比大 大图形 swf flash动画格式 动态页面 psd 可保留分层信息,便于修改 photoshop源文件

33.asp是服务器代码 javescript是客户端代码

34.首先,网站的设计目的决定设计方案.其次,浏览者的需求要放在第一位.另外还需要注意页面的有效性.页面的布局要保持统一.使表格和适当的帧结构来设计网页.要谨慎使用图片.要有平面设计意识.同时减少Java Applet和其他多媒体的使用.35.(1)浏览器向DNS获取的IP地址

(2)浏览器与IP地址建立TCP连接,端口为80;

(3)浏览器执行HTTP协议,发送GET index.htm 命令,请求读取该文件;

(4)服务器返回index.htm 文件代码到客户端;

(5)解释此页面,显示出页面内容.36.此题主要考察应聘者对网站未来发展方向的把握,便于选择与现有团队志同道合的同事.

网页设计师试题 篇2

1 下拉式菜单的制作

现以DW CS6中Spry菜单栏组件为例说明水平式下拉式菜单的制作过程。

1.1 插入 Spry 菜单栏组件

利用DW的插入菜单或插入面板将Spry菜单栏组件插入到某个Div元素或某表格单元格中,从而固定菜单位置。当Div元素元素宽度为500px时,在DW的网页设计视图中得到如图1所示菜单,默认情况下有4个菜单项。用鼠标选中Spry菜单栏组件,可在窗口下方属性面板修改菜单项,如“项目1”等的名称,通过“+”、“-”按钮增加、删除菜单项,并设置各菜单项对应的链接URL和目标窗口或框架。

1.2 调制菜单项的宽度

如图1所示,默认情况下各菜单项不一定在同一行,这是因为各菜单项宽度和超过Div元素宽度,因此,要调整菜单项宽度。

进入DW的网页代码视图,可找到DW生成的与菜单有关的一段Html代码:

(1)设置整个菜单栏组件的宽度

DW为Spry菜单栏组件生成了一系列CSS规则, 观察上述 代码 , 可发现该 组件所占 宽度可用MenuBarHorizontal选择器对应的CSS规则控制,双击CSS面板中的该选择器,可在CSS规则定义对话框中调整有关属性,如图2所示,可调整“方框”宽度属性为auto或为外部Div元素元素的宽度500px。

(2)设置菜单项的宽度

用鼠标点击菜单项“项目2”的边框线选中该菜单项,然后可在窗口下面的属性面板设置其宽度,单位可为百分比(%)或像素(px),如图3所示,此处设为25%。调整后4个菜单项正好横排占满Div元素。另外,对照DW为Spry菜单栏组件自动生成的CSS规则,可发现菜单项由ul.MenuBarHorizontal li选择器对应的CSS规则控制,同样可用CSS规则定义对话框调整宽度。

子菜单项“项目1.1”等的宽度也可用窗口下面的属性面板设置。另外,也可采用ul.MenuBarHorizontal ul和ul.MenuBarHorizontal ul li同时设置。

1.3 设置菜单项文字的属性

超链接建立在菜单项文字之上,因此,菜单项文字的属性 (字体、背景颜色、对齐方式等) 可用ul. MenuBarHorizontal a选择器对应的CSS规则控制,进行相应设置即可。

经过上述设置后,菜单一般能满足要求。

2 树形目录的制作

树形目录非常适合展示具有层次关系的数据和超链接。Visual Studio 2010[6]、ExtJS等软件含有树形目录组件,但DW CS5、6没有树形目录组件。可以从网络上搜到一些制作树形目录的代码。下文介绍利用bassistance.de网站[7]提供代码压宿包(jquery.treeview. zip)制作含静态树网页的过程。

(1)下载压宿包并解压到自制网站的某个目录下。

(2)在解压生成的演示文件夹demo中含有多个html文件,它们中含有各种形式的树形目录,选择一个最合适的html文件作为模板再修改便可,现假定选中large.html进行编辑。

(3)在网页设计(或代码)视图中将树以外不需要的内容、网页元素删除,得如图4所示原始树目录。

(4)现假设要制作一本书的目录,希望该树目录在浏览器中展开后效果如图5所示。

将图4中原树目录中的条款改成各章、节、款的名称即可,如将“Home”改成“第一章网页设计基础”。不需要的条款可用退格(BackSpace)删除。若要在某条款下增加一条款,则将光标移至该条款后按回车(Enter) 即可。若要调整某条款的逻辑层次,则可选中该条款, 再用属性面板的凸出或缩进按钮调节;但反复调整时,有可能使树形目录在浏览器中不能正常显示,此时可以将所有条款调整为同一层次,即垂直对齐,然后再从上到下重新调整各条款层次;也可进入网页代码视图修改,图4所示树目录正确代码如下:

由此可见,整个树用项目列表元素 <ul>…</ul> 表示,条款x用列表项元素表示,即 <li> 条款x </li>,当条款x后含有子条款时,则子条款构成的树又用项目列表元素表示,且嵌套于列表项元素中,即 <li> 条款x <ul> 子树 </ul> </li>。若标签不符合这种排列组合规律可以手工修改。

(5)利用treeview li选择器对应的CSS规则调整各条款的字体大小等属性。

(6)设置超链接属性。

对超链接有无下划线、颜色等进行控制,可在网页文件代码视图的头元素中添加如下CSS规则表:

在DW设计视图中编辑出如图6所示格式的目录,此目录在浏览器中效果即如前文图5所示。

(7)含树形目录的网页一般与框架网页配合使用, 故此后要设置相应的框架网页。

(8)修改条款上原有的默认超链接或在条款上添加超链接,即设置URL、目标窗口或框架等。

3 结束语

下拉式菜单和树形目录常被用作导航界面组件, 利用它们组织超链接可使网页简洁明了。但是一般的网页制作教材对它们介绍不详细或没有介绍。鉴于这两种导航方式的实用性,在教学中可以超越一般的教材而作出较详细的制作过程介绍,这能被不具备JavaScript、ExtJS、jQuery编程知识的人员所接受。

在介绍网页设计与制作课程时,要鼓励学生充分利用网络上的学习资料和代码资源,决不能拘泥于教材的学习。

摘要：下拉式菜单和树形目录常是两种常用的网页导航界面元素,但一般的网页制作教材介绍不详细或没有介绍。为了满足教学需要,文章介绍了利用DreamWeaver CS 6中的Spry菜单栏组件制作下拉式菜单的过程和利用jquery.treeview插件制作树形目录的过程,该方法不要编写程序,学生易于接受。

网页设计师试题 篇3

关键词：网页制作；教学设计

中图分类号：TP393.09

随着网络的日益发达，网页技术得到不断普及，在社会各个领域中都充分体现了网页制作技术的重要性，学校方面也开始不断重视这一方面人才的培养。但是，中、高等职业院校的毕业生所学知识往往与就业单位要求不相符，很大方面的一个原因是传统的网页制作课程教学难以满足现阶段的发展形势。因此，笔者将根据这一课程的教材特点和学生的特点，浅谈如何设计“网页制作”的教学。

1 教材分析与教学对象分析

1.1 分析教材。《Dreamweaver MX2004中文版网页制作基础》是我校选用的教材，其最大特点在于采用“任务驱动，案例教学”的形式，这就充分考虑到了实际运用和实际需要，用趣味十足的实际案例来讲解网页制作方面的知识技能和应用技巧，这样不仅使方便教师教学，而且使学生学起来很实用。在学习“网页制作”知识之前，学生已经初步掌握了网络相关知识、数据库设计与应用、Office办公软件的应用、计算机硬件组装与维护、FLASH二维动画设计等内容。因而，在学生已具备了收集、编辑文本、图像信息的能力的情况下，我们的教学重点应该放在网页信息表达方面，例如网页版面的美化、文字内容表达等。不仅要加强学生的信息意识，还要提高学生的信息处理能力；教材第四章的内容中以“我的个人主页”为案例设计，这给了学生充分的想象空间，满足学生喜欢展现自我的个性需求，又有效发挥他们的主动性和创造性。另外，对网页版面设计效果的评价促使学生更好的了解编排原则、布局种类、色彩搭配等，有助于提高他们的审美能力和艺术修养内容。

1.2 分析教学对象。本课程的教学对象是中等专业学生，根据学生的性格特点，他们对操作性较强课程的学习积极性明显高于纯理论的学习。而在现代社会，《网页制作》这门课程与每个人的生活都是息息相关的，加之其网页界面融合文本、图片、音乐、视频等为一体，极大的调动了学生的学习兴趣，继而激发学生了解网页实现原理和方法的欲望；教师在实际教学过程中要时刻注意引导学生利用已有知识更好的学习网页制作，与此同时也巩固了旧知识，一举两得；教师应当适时地监控学生的协作学习情况，鼓励分组合作交流，并实时总结心得、体会，引导学生“自主、合作、探究”学习。

2 《网页制作》课程教学设计的思路

从以往《网页制作》课程的教学情况来看，在学习这门课程之后，学生虽掌握了基本理论知识，但实际运用能力较差，很少能制作出优秀的作品，主要表现在两个方面：网页色彩的使用和网页内容的定位。因此，教师在设计教学时，需要借助一个载体——一个实际的项目，并将整个项目分解成若干小项目，再把每一个小项目分别作为一个学习任务，用这样的方法贯穿于整个教学过程。完成了一个小项目，也就相应的掌握了一个知识点。便这样完成学生运用三个软件进行网页制作的学习。

课程设计要有助于提高学生的技能水平。运用“项目导向”与“任务驱动”的教学模式，创新教学方法，继而帮助学生有效掌握网页版面设计技术。具体阐述如下：注重培养学生自学能力和专业技能。在掌握网页制作理论知识的同时，也要注重学生社会能力的培养。在学习网页制作的过程中，主要学习一些网站开发知识，可以让学生以自主学习或是合作学习的形式进行，若是结合实际来学习会达到更佳效果更好；将网页制作作为一项整体的教学任务，对于教学内容、教学方法和考核内容，做好任务分配工作，结合多样的教学方法建立与之相应的考核体系，这样必然达到最佳的学习效果；教学设计要结合社会需求，作为理论与操作相结合的学科，网页制作在设计课程时，可以模拟真实的项目，如此可以进一步提升学生的技能，任务驱动教学模式的实行，能更好的调动学生的学习积极性和求知热情。

3 教学目标的设定

3.1 知识目标。这一目标主要为：掌握Dreamweaver的工作环境，以及菜单、工具栏的使用方法；掌握新建网站的方法、网页的编辑技术和文档的保存方法；掌握操作表格、单元格、框架、层的辅助定位工具的方法；掌握插入和编辑网页超链接的技术；掌握插入和编辑文本、图片、动画、视频的方法和设置格式的方法；掌握利用Fireworks设计处理文字的方法；掌握利用Fireworks制作网页中所需的线条及边框；掌握用工具绘制图形的方法；掌握基本动画和引导动画的制作。

3.2 技能目标。这一目标主要为：能通过模仿网页来制作实际网页；能在网页中熟练地插入文字、图片、动画等；能通过使用简单的表格编排出结构清晰、内容整齐的网页内容；能恰当地选择适当的网页背景图案和背景音乐；能插入简单的表单，使网页具有初步的动态功能。

3.3 情感目标。这一目标主要为：培养学生的敬业精神、团队协作精神；培养学生的社会责任感和工作效率观念；培养学生的审美情趣和审美能力；通过课堂中出现的网页，渗透爱党爱校教育；在合作学习过程中培养乐于助人、团结协作的精神。

4 教学重点、难点的设定

教学重点是帮助学生掌握网页布局、表格的制作和编辑方法、表格的嵌套和属性的设置，以及熟悉网页的各种元素。教学难点在于培养学生分析网页布局和色彩搭配的能力。

5 设计教学过程

5.1 引例以导入新课。（1）推荐给学生优秀网站做范例。1）清华大学网页布局——“国字型”并分析其网页元素；2）万州一家企业网页布局——“三字型”并简析其网页元素；3）重庆市机关党建网页和环球厨卫网页布局———“T字型”并简析其网页元素。（2）组织学生讨论网页的内容和风格，分析网页框架和布局。

5.2 课程主要内容的学习。（1）以广播的方式展示范例网站的网页，逐步引导学生分析网页的布局并尽可能详尽（“国”字型），在分别分析网页元素——文本、图像、表格等。（2）分小组布置活动任务，并分别指定小组长，教师实时观察进程，并对学生制作过程中遇到的问题适时给予帮助。（3）组织小组之间进行网页制作互评；（4）设计网页版面设计评估表。

5.3 课堂小结。在这个教学过程中，利用现代多媒体中的实例网页，教师准备好备好教学素材和课件，围绕网页制作实例，来促使学生掌握网页的布局，表格的制作与编辑方法，并熟悉网页的各种元素。通过课堂上的实践操作环节，很好的培训了学生的技能，教会学生举一反三、融会贯通，大大提高了学生的综合运用能力。同时提高了学生的专业技能水平，让学生真正地学会学以致用，教师也顺利完成教学目标，取得良好的教学效果。

6 设计考核方式

网页制作作为一个整体项目，可以从以下几方面进行评价：页面结构设计、网页中动画的制作、网页中导航的制作、子页面的制作、网页中图像的制作、网页中的链接和整体效果。主网页和二级网页在整体布局上要风格统一，布局合理、美观，文件命名正确，文件夹组织标准有序，符合社会标准；按要求制作网页导航、编辑网页元素，导航要求清晰、有一定动画效果。考核评分时，教师不仅应当结合学生的平时操作情况，还应考虑作品展示时其他同学的评价，综合评价给出一个分数。

7 结束语

网络技术发展不断更新，作为实践性很强的科目，“网页制作”对学生的动手能力要求越来越高，同时还需要学校和教师积极主动地关注社会需求，及时掌握技术发展趋势和网页制作发展动向，鼓励学生在不断储备知识的同时，不断提高自己的实践操作能力，使更多的网页制作人才得以涌现。

参考文献：

[1]曾广雄.中文Dreamweaver网页制作实例教程[M].北京：研究出版社，2008：206.

[2]周奇.新编网页设计与制作教程[M].北京：研究出版社，2008：185.

[3]贾勤.网页设计三合一能力教程[M].北京：中国铁道出版社，2006：54.

网页设计师试题 篇4

技巧小结

随着公司影响力的壮大和产品的不断提升，相关的形象设计要逐步跟得上，需要逐渐提升，所以就招一个应届生网页设计师，算是一块成长。应届生有拼劲、肯学，但也好高骛远，起点都差不多，如何培养网页设计师就变得至关重要了。总结自己接触和学习设计的一点经验与大家分享，希望得到大家更多的建议。

一、配色

其实对色彩的感觉是设计师应具备的最基本素质，其作品不管是对网页界面、系统界面、还是产品包装等等都

有广泛应用。基本的一些理论，什么冷暖色、对比色/补色、色彩心理、搭配原则等等，满大街都是，有意者随便搜一两篇看看就行。色彩对于网页设计师设计师来说，更重要的是一种感觉，就像打篮球投篮的手感一样，多看，多练，这种感觉是可以后天练出来的。Mars刚接触设计时，连坐公交车时也会注意路边某公司、饭店的招牌是如何配色，处处留意生活中色彩搭配的美，关于色彩截图就更记不清有多少张了。

Mars觉得，设计师对颜色的运用一般有这么几个阶段：

初级阶段：用自己首映感觉最好的1~2种颜色，不考虑其他因素、他人感觉;

过度阶段：开始感觉一两种颜色单调，尽量多尝试不同色彩，该阶段极容易出现没目的的乱搭现象;

成熟阶段：该阶段了解了大众对色彩的审美，开始理性的用1~2种色系搭配，能体会到同种颜色不同色值的细微差别，大多设计师都在这个阶段;

终极阶段：把一种色彩用至极致，甚至只用黑白灰，完全沉浸某种颜色，甚至有点变态，但其创作效果让处于第三阶段的设计师一看就是大师所为。

其实这也是个不断练习积累的过程，这样色彩的感觉才会提升。

二、布局

网页设计师设计师除了对色彩要有好的感觉外，对布局也要有很好的把握，组合的好坏直接影响作品的效果。其实做好布局设计也不是很难，无非就以下几步：

布局准备：明确你表达内容的主体部分需要哪些必要的文字和图片。不要考虑太多细节。

布局版式：关于布局的版式多种多样，在将重点内容放在最显眼的前提下，可自由选择版式。对于网页来讲，根据大多数人从上到下、从左到右的浏览顺序来考虑，应该将最主要的内容、图片等放在页面的左边和上边。

精细布局：整体配色、字体、各模

块的间距、插图、增减内容等各个方面的推敲。这一步是细活。

Mars觉得最锻炼布局的方法是制作PPT。想把PPT制作美观、精简并不是件容易的事。对于软件行业的售前来说，如何制作漂亮的PPT应该是他们自我内修的一门必修课。PPT的布局做好了，其他网页、宣传册等平面布局应该都信手捏来。

三、细节

至理名言”细节决定成败”，在设计领域了这句话更显得重要。很多细节可能会被浏览者忽略，但对设计师来说绝不可放过，比如背景色、色彩渐变、各组件间间距、标题样式、高亮样式、字体/大小/颜色、行/段间距、插图位置/边缘处理、输入框宽高/边框色/背景色、按钮的位置等等太多了。还是之前的话，只有你看得多了，比较得多了，才能看得出这些细节。有人觉得这些细节没有什么大碍，但多个细节组合在一起就和让人觉得不舒服。

举例说一下，以下是某系统里一篇文章下面的添加批注表单。上半部分是没有经过美化、由程序员直接写的程序(上图)，下半部分是有设计师协助设计美化完成的表单界面(下图)。

一般正常审美的人肯定觉得下面的好看，但却不知好在哪?听Mars从各个角度详解一下：

配色：字体颜色像是直接从32色板上取的，没经过考究;表单边框色太重;表单背景与页面背景相同，没突出层次。

布局版式：此组件又没有多行操作，无需使用列表形式;上图保存按钮在该组件标题之上俨然不合理;组件的标题的位置大小不够醒目。

用户体验：明确这是一个系统里的界面组件，所以这个人既然都登进来了，还用填记录人吗?时间也肯定就是提交时间啊;提交人主要是提交自己的批注，所以给他提供大片的提交内容的输入框即可，简单明了;提交按钮，上图需要再填完批注内容后折回到左上角”保存”显

然不合理，下图的界面大大方方右手边一个按钮，看起来明显，操作起来舒服。

网页设计师简历 篇5

_

别：男

照片

出生日期：1900-00-00

民 族：汉族

身 高：175

体 重：80

目前所在：江苏

婚姻状况：

电子信箱：

电 话：138____

通讯地址：_省_市_街_X号

教育背景

最高学历：

本科

外语水平：

英语 良好

毕业院校：

苏州科技学院

专业类别：

计算机类

专业名称：

美术学

受教育/培训经历

06至06月 苏州科技大学 美术学文学学士

应聘方向

人才类型：

应届毕业生

求职类型：

全职

应聘职位：

网页设计，平面设计

求职地点：

江苏

薪资要求：

1000--1500

工作经历

能力与详细个人自荐

网页UI设计师 篇6

岗位职责：

1、负责网站的界面视觉设计工作；

2、构思并设计网站的整体视觉风格、用户体验设计和VI；

3、能够解读网站产品需求并提出创新想法，能够完成网页或应用的交互设计，并完成界面的流程设计、原型设计，不断优化用户体验；

4、平衡网站的易用性和美观性，实时把握web设计的流行趋势，结合用户研究和产品分析的成果，不断提出新的设计思路及创意策略。

岗位要求：

1、本科（含）以上学历，美术、设计、电子商务、计算机等相关专业；

2、三年以上相关工作经验，有电子商务、社交平台、通信运营商的网站界面设计经验优先；

3、具备网站设计创意，根据需求分析并给出最优的界面设计解决方案；

4、熟悉用户体验与交互设计,热爱UI行业、对专业有很强的兴趣和执行力，具有优秀的学习能力，能够把业界的新鲜设计理念和手法借鉴到工作中；

5、对互联网产品有着良好的感觉，有用户体验研究经验，对用户浏览及操作行为有深度的见解及知识；

6、精通Adobe Photoshop、Adobe Illustrator、Flash、Dreamrever等设计软件，熟悉HTML，DIV及CSS，了解Web标准；

7、具有良好的沟通能力、执行力，具有团队协作精神，对工作压力能够很好地调节；

网页艺术设计初探 篇7

关键词：网页艺术,网页元素,版式

随着Internet的不断发展, 网络已经成为现代社会必不可少的重要组成部分, 而网页作为信息发布的载体, 人们关注的不仅仅是它的内容, 网页的美观、生动、活泼、个性等艺术性方面逐渐成为了关注的焦点。人们对网页的视觉追求的永无止境, 也正是推动网页设计向前发展的主要因素。

从发展趋势来看, 网页设计会更加注重创意、个性和内容的高度统一。

一、网页艺术设计的原则

网页的艺术设计, 是技术与艺术的结合, 内容与形式的统一。网页作为传播信息的一种载体, 由于表现形式、运行方式和社会功能的不同, 网页设计有其自身的特殊规律, 它要求设计者必须掌握以下三个主要原则:

1、主题鲜明

视觉设计表达的是一定的意图和要求, 有明确的主题, 并按照视觉心理规律和形式将主题主动地传达给观赏者。根据认知心理学的理论, 较小而分立的信息要比较长而不分立的信息更为有效和容易浏览。这个规律蕴含在人们寻找信息和使用信息的实践活动中, 它要求视觉设计者的设计活动必须自觉地掌握和遵从。

2、形式与内容统一

一方面, 网页设计所追求的形式美, 必须适合主题的需要, 只讲花哨的表现形式以及过于强调“独特的设计风格”而脱离内容, 或者只求内容而缺乏艺术的表现, 网页设计都会变得空洞而无力。另一方面, 要确保网页上的每一个元素都有存在的必要性, 不要为了炫耀而使用冗余的技术。只有通过认真设计和充分的考虑来实现全面的功能并体现美感才能实现形式与内容的统一。

3、强调整体

在设计网页时, 强调页面各组成部分的共性因素或者使诸部分共同含有某种形式特征, 是求得整体的常用方法。这主要从版式、色彩、风格等方面入手。例如:在版式上, 将页面中各视觉要素作通盘考虑, 以周密的组织和精确的定位来获得页面的秩序感, 即使运用“散”的结构, 也是经过深思熟虑之后的决定;一个站点通常只使用两到三种标准色, 并注意色彩搭配的和谐;对于分屏的长页面, 不可设计完第一屏再考虑下一屏。同样, 整个网页内部的页面, 都应统一规划, 统一风格, 让浏览者体会到设计者完整的设计思想。

二、网页艺术设计的基础元素

组成网页信息的基础元素比较多, 总结包括主要如下:文本、背景、按钮、图标、图像、表格、颜色、LOGO、音乐、影像等。目前如何将这些元素应用到网页供人们使用已经成为了简单操作, 但是各种元素如何合理的搭配, 才能使网页最具感染力和表现力, 就成为了网页设计的重点和人们关注网页的首选, 对网页的艺术设计提出了更高的要求。

1、颜色的设置

色调对网页具有绝对性影响。灰色调配色产生素雅的印象;鲜艳的色调配色产生健康活泼的印象;鲜艳的红色给人以活力;柔和的色调让人平静;明色调则使人心情愉悦。无论色相如何改变, 这种基本印象是不会改变的。选择了与页面内容不相和谐的色调, 会传递错误的信息, 造成混乱。

2、图片的设置

最合适的主题图片具有强烈的信息性, 能在一瞬间让人了解访问的网页是否与印象相同的就是图片。而其中又以能直接表现标题或网页信息的插图和照片最有说服力, 它能够使访问者直接确认信息。例如龙、凤、鹤、龟等吉祥图片表现了喜庆的气氛, 让人联想起新年、丰收、长寿的形象;现代的花环、桃心等是众人皆知的符号, 便于传达欢迎的态度。在打开网页一瞬间, 图像几乎与标题文字同时映入眼帘, 观众对网页的印象也就被确定下来。

3、文字的设置

中文为了保证“方正”的造型, 通常仅使用双数字号, 比如最常用的12px和14px (少数字体的13px效果还行) , 因为这两种字号看起来最自然、协调。再往上16px, 18px, 20px也还行, 但13px, 17px类似的单数字号, 可以看到效果明显的锯齿和失重感。文字大小的对比也会左右印象。标题文字的大小与正文之比叫做跳动率。以正文作为1倍, 标题的大小用它的倍数来表示。第一面的大标题用大约7~8倍, 号外新闻级别的则超过了10倍。体育新闻的标题经常使用10倍以上来构成。像这个例子一样, 跳跃率的高低既表现了报道的重要等级, 也是表现了热门的程度。跳动率越大, 画面越活跃;反之, 越稳重。

将标题的文字变大, 粗细效果会加倍。例如, 大而粗的文字最有精神。另一方面, 将文字变小, 粗细效果会减弱。虽然细而小的文字有优美的感觉, 但如果使用细而大的文字, 效果会更加明显。总之, 文字越大, 越能强化粗细的印象。

三、网页艺术设计的版式设计

所谓网页的版式设计, 是在有限的屏幕空间上将视听多媒体元素进行有机的排列组合, 将理性思维个性化的表现出来, 是一种具有个人风格和艺术特色的视听传达方式。

网页版式的基本类型主要有骨骼型、满版型、分割型、中轴型、曲线型、倾斜型、对称型、焦点型、三角形、自由型十种。

1、骨骼型

网页版式的骨骼型是一种规范的、理性的分割方法, 类似于报刊的版式。常见的骨骼有竖向通栏、双栏、三栏、四栏和横向的通栏、双栏、三栏和四栏等。这种版式给人以和谐、理性的美。

2、满版型

页面以图像充满整版。主要以图像为诉求点, 也可将部分文字压置于图像之上。视觉传达效果直观而强烈。满版型给人以舒展、大方的感觉。

3、分割型

把整个页面分成上下或左右两部分, 分别安排图片和文案。两个部分形成对比:有图片的部分感性而具活力, 文案部分则理性而平静。倘若通过文字或图片将分割线虚化处理, 就会产生自然和谐的效果。

4、中轴型

沿浏览器窗口的中轴将图片或文字作水平或垂直方向的排列。水平排列的页面给人稳定、平静、含蓄的感觉。垂直排列的页面给人以舒畅的感觉。

5、曲线型

图片、文字在页面上作曲线的分割或编排构成, 产生韵律与节奏。

6、倾斜型

页面主题形象或多幅图片、文字作倾斜编排, 形成不稳定感或强烈的动感, 引人注目。

7、对称型

对称的页面给人稳定、严谨、庄重、理性的感受。对称分为绝对对称和相对对称。一般采用相对对称的手法, 以避免呆板。

8、焦点型

焦点型的网页版式通过对视线的诱导, 使页面具有强烈的视觉效果。焦点型分三种情况:

(1) 中心:以对比强烈的图片或文字置于页面的视觉中心。

(2) 向心:视觉元素引导浏览者视线向页面中心聚拢, 就形成了一个向心的版式。向心版式是集中的、稳定的, 是一种传统的手法。

(3) 离心:视觉元素引导浏览者视线向外辐射, 则形成一个离心的网页版式。离心版式是外向的、活泼的, 更具现代感, 运用时应注意避免凌乱。

9、三角形

网页各视觉元素呈三角形排列。正三角形 (金字塔形) 最具稳定性, 倒三角形则产生动感。侧三角形构成一种均衡版式, 既安定又有动感。

1 0、自由型

自由型的页面具有活泼、轻快的风格。

目前网页的布局设计越来越简单, “简单就是美”在一定程度上凸显, 人们的眼睛不用在页面上转来转去拼命寻找想要的东西, 同时在浏览过程中它也提供更加平和、稳定的浏览体验。内容在网页中心定位, 尽可能在“一屏”以内显示更多的信息似乎是一直以来的至理名言。更多的留白和行高也越来越多人应用。

四、优秀网页具备的条件

给人留下好印象, 让人赏心悦目的优秀网页一般具备6个条件。缺少任何一个都会使访问者对网页的印象一落千丈, 使得初次访问者不愿再次光临。

1、标题明确

对于初次访问网站的读者来说, 首要目的就是确认标题。那些晦涩难懂的标题会使难得光临的访问者感到不知所措。虽然我们以美观和与众不同为设计日标, 但如果吸引不了访问者, 这个网页的设计和建设也是没有意义的。过于个性化的表现, 会使网站内容的公开性受到质疑。

2、内容与主题统一

让访问者第一眼就明了表达的内容的网页才是最优秀的。如果访问者对信息的种类、是趣味性的网页还是商业性的, 以及行业类型等问题能够一目了然的话, 他才能安心地继续访问, 对网页的好感也会逐步增强。所以我们运用排版样式、图像、文字的造型以及配色类型等元素来准确传递信息。

3、导航清晰、准确

对于网页来说, 最重要的就是信息内容。信息的品质与数量决定了人们对这个网页的评价高低。但首先要做到的是, 怎样将读者顺利地引向信息内容。明确划分信息群, 不让读者产生迷惑, 使之迅速找到所需要的信息, 是目录设计最重要的任务。目录的整理决定了网页的可读性。

4、风格统一, 整体性好

目前很多页面做得很花哨, 但是非常不实用, 例如采用很深的带有花哨图案的图片作为背景, 严重干扰了浏览, 获取信息很困难。同时有些还采用了颜色各异, 风格不同的图片、文字、动画, 使页面五彩缤纷。没有整体感觉, 尽管有些页面内容不多, 但是浏览起来仍然特别困难。

5、创新性的视觉特色

网页设计中的误区就是千篇一律, 缺乏自己的特色, 当我们打开电脑, 上网一看, 好像哪个网站都是一样的。从标题的放置, 按钮的编排到动画的采用都是如此。应该根据网站的定位, 善于做创新性的视觉设计, 让你的设计在同类网站中脱颖而出, 让用户更喜欢。

6、色彩协调

色彩给人心的心里感觉很直接, 所以色彩使用要合理且大胆, 突显网站主题与品调。

时代在进步, 技术在更新, 人们的审美观念也在不断变化, 作为艺术与技术高度统一的网页设计将会对设计人员提出更高的要求与挑战, 网页艺术设计也将更加具有魅力与多彩。

参考文献

[1]刘肖冰.浅谈网页艺术设计.安阳师范学院学报.2005年05期

[2]傅晶.网站设计的艺术性与可用性[A].2004年工业设计国际会议论文集[C].2004年

如何改善网页设计 篇8

1. 确保你的网站导航对搜索引擎友好

如果你不清楚如何让Flash对象可访问和对网络爬虫友好，用Flash作网站导航将不是一个好的选择，因为搜索引擎很难抓取使用Flash的网站。而CSS和JavaScript却能在不牺牲搜索引擎排名的情况下，为你提供任何你需要的精心设计的效果。

2. 把脚本放在HTML文件之外

当你为网站写代码时，要确保你以外部引用的方式使用JavaScript和CSS。搜索引擎通过所有包含在HTML文件中的内容来查看站点。如果没有用外部引用的方式使用JavaScript和CSS，会在你的HTML文档中增加一些额外的代码行，减缓速度。而搜索引擎希望能尽可能快的获取到一个网站的内容。

3. 使用搜索引擎爬虫能阅读的内容

内容是一个网站的生命力所在，也是搜索引擎需要的。在设计一个网站时，确保你仔细考虑过内容的结构，比如标题、段落和链接。

4. 设计你的URL使其对搜索友好

对搜索友好的URL不是那些难以抓取的URL，例如查询字符串等。最好的URL包含帮助描述页面内容的关键字。

5. 限制你不希望搜索引擎索引的页面

可能会有一些你不希望搜索引擎索引到的页面，它们可能对你的内容毫无用处，或者对网站的搜索位置产生负面影响。避免这些页面被搜索引擎检索到的最好的方法是使用robots.txt文件。

6. 不要忽视图片的alt属性

确保所有图片的alt属性都是描述性的，并百分之百符合W3C标准。搜索引擎会读取alt属性，并有可能将其纳入页面与搜索关键词相关性的考量之中。

7. 用新内容更新页面

如果你的网站上有博客，可以考虑在网页上留出地方放一些最新内容的摘要。搜索引擎很希望看到网页内容不时地改变，这可以表明这个站点在正常运行。此外，不断更新的内容可以提高搜索引擎的抓取频率。

8. 使用唯一的元数据

每个页面都应该有自己的元数据，这有助于搜索引擎更好地把握网站的结构。

9. 恰当地使用标题标签

在网页内容中充分利用标题标签，因为它们会向搜索引擎提供HTML文档的结构信息，而且它们通常比网页上的其他文本具有更高的权值（除了链接）。

10. 遵从W3C标准

搜索引擎喜欢结构清晰的代码。清晰的代码可以让网站更容易被索引到，也是一个网站建得好坏的标志。遵从W3C标准也就是让你写语义化的标签，这对于SEO来说有百利而无一害。

推荐站

网站名称：威锋网

网站网址：http://www.weiphone.com/

一、网站特色

威锋网是一个颇具人气的中文iPhone社区，它为广大苹果iPhone爱好者提供了一个自由交流、探讨和学习的平台。在这里，你可以看到iPhone的最新应用、apple的最新资讯，以及多种适合国人使用的iphone应用软件。此外，你还可以在这里下载游戏、电影、音乐、软件、壁纸等资源。

二、网站介绍

威锋网创建于2007年1月10日，与iPhone同一天发布。经过不断的发展，目前，威锋网已有六大苹果产品讨论版块：iPhone、iPhone3G、iPod Touch、iPhone3Gs、iPad、iPhone4，论坛在线人数超过60000人，每天的独立访问用户超过800000，日均PV超过4500000，并且在稳步高速的成长当中。网站的目标是建立中文用户喜欢的iPhone、苹果产品以及高端移动设备门户。

资讯

电商停止搜索广告投放

自建渠道拉拢中小站长

自当当网CEO李国庆在微博上表态后，京东、敦煌、新蛋等多位电商CEO也均表示将停止在搜索引擎上的广告投放，中小网站与三线城市渠道将成为他们的新战场。

由于互联网整顿原因，中小流量渠道受到挤压，广告投放成本上升，当当网发布自4月1日起将全面停止搜索引擎广告与投放后，京东商城、敦煌网等电商企业CEO也表示了类似的态度，纷纷决定停止对搜索引擎的广告投放。

除了宣布停止投放的表象外，这些电商企业也纷纷表态，将原来的搜索投放预算放在物流配送环节上，或是加大CPS联盟的建设力度，拓展中小网站的合作渠道。截至目前，凡客、京东、当当、乐淘、好乐买等多个电商企业均已开始或在建广告联盟平台，拉拢中小站长，希望自己能成为下一个不受搜索引擎限制的“淘宝”。

“.香港”将推出

顶级域名仍以.COM为主

近日，香港特区政府资讯科技总监表示，特区政府将支持推出全中文互联网域名。即特区政府制定由非盈利的香港互联网注册公司管理“.hk”域名，“.香港”预计5月份开始接受登记，这将成为国内域名市场的一股热潮。

网页设计师应聘简历 篇9

目前所在： 年龄：22

户口所在： 国籍：中国

婚姻状况： 未婚 民 族：汉族

求职意向

应聘职位：网页设计/制作/美工：

工作年限： 2年

可到职日期： 随时

月薪要求：

希望工作地区： 广东省

工作经历

苏宁电器

起止年月：-5 ～

公司性质： 中外合资

所属行业：服务业

担任职位： 后台客服

工作描述： 后台协助物流部门工作让我加强了与客户的沟通协调能力，也提高了处理问题的能力，工作认真、勤奋，得到好评。

教育背景

毕业院校：广东商学院

最高学历： 大专

获得学位:

专 业 ： 电子商务与财务管理

语言能力

外语： 英语 一般 粤语水平： 良好

其它外语能力：

国语水平： 良好

工作能力及其他专长

本人主修课程：会计基础、财务会计、中级财务会计、工业会计、电子商务、经济学、管理学、中国税制、统计学、应用文写作等。熟悉的软件有：办公软件、会计电算化、网页制作、Fhotoshop、Dreawearn。

详细个人自传

本人性格开朗做事认真、负责，有耐心，心思敏捷，能吃苦耐劳。本人曾在学校参加学生会，并获得“优秀学生干部”，同时加入教务助理组，协助老师管理学校秩序和考勤记录工作。也曾在教务助理组协助主席举办辩论赛并担任主持人，并获得“优秀主持人”称号。年轻代表着热情有活力，希望能在往后学到更多的经验和知识

免责声明：本文仅代表作者个人观点,与本网无关。

[网页设计师应聘简历模板]

网页设计师试题 篇10

UCDChina 的设计是否土鳖?

只要屏幕大，总是会有长途奔袭问题， 怎么设计都难以避免。 我24寸的imac永远是最费鼠标的，就算我用固定宽度的居中。功能型网站适合用居中。导航内的内容型网站，最好用百分比的宽度。

关于《UCDChina 的设计是否土鳖?》——拿数据说话

从视觉布局特点上：UCD china是一个三栏网站，从信息数量和区域面积上(信息价值这个我就不好判定了)，左边和右边是份量相当的。和google 左重右轻的特点 没有可比性。所以UCDchina 这样的留白处理会在视觉上造成不适，而google不会。

网页用多宽才更合适?

希望用户认真阅读的网站，主要内容区域的宽度必须固定，不能过长，否则会伤害到阅读者的眼睛，而且不适合阅读的流畅性。固定宽度在650左右最合适。

宽屏不是用来阅读的

宽屏幕的意义主要在于让用户看宽幅电影时的体验更好，绝对不是阅读体验。用普通4:3屏幕看宽幅电影必然造成上下留有黑边，本身就是种浪费，与用宽屏浏览网页两边会有留白是同样道理。

让阅读更流畅

最适合的宽度是650px?google是那么认为，从reader可以看出来，width和line-height其实都是为英文的最佳阅读设计的，具体中文最佳阅读宽度是多少?这个根据字数可以推断：英文一行的单词比较中文字少，宽一点会流畅，

电脑资料

所以我给自己blog设置成600px。

文章正文的“看上去的感觉”

这次我的研究焦点是放在字体的大小、一行的字数以及行距上。我们都知道，一行的字数多了或者行距窄了，我们读起来容易窜行。如果字数少了或者行距窄了，显示的空间就浪费了。所以需要找到合理的数据。

到底要设计多宽的网页?

到底网页要不要搞得限定宽度，让人在宽屏时，阅读只看到左侧一半的宽度，扭着脖子看左侧信息，而忽略甚至费劲地再看右侧的信息?

宽屏幕下的 Web 设计

数据显示, 目前来说屏幕越大, 用户进行 “最大化” 浏览器窗口的操作越少, 这也说明用户觉得宽屏幕下网页显示效果不佳. 但如果越来越多的网站提升了宽屏幕下的体验, 说不定也会有越来越多的用户也会选择在宽屏下 “最大化” 窗口呢。

对网页宽度设计的问题应如何讨论?

人因工程上说人眼专注阅读的视角是 25 度(约为正常视角的 1/5)，距离显示器 45-50cm。通过计算可以得到物理宽度为 19.95cm-22.17cm。约等于一把尺子的长度。

宽屏显示下的网站网页宽度

网页版面布局设计的探讨 篇11

关键词：网页制作；版面；布局

中图分类号：TP393.092文献标识码：A文章编号：1007-9599 (2010) 16-0000-01

Discussion on the Design of Web Page Layout

Zeng Linghui

(Wuhan Vocational College of Software&Engineering,Wuhan430205,China)

Abstract:Web layout design is the most important part of the concept and web production process in this paper,via case analysis,the basic elements of page layout;general steps of the design;and should make some principles presented and discussed.

Keywords:Web production;Forum;Layout

一、网页版面布局的基本要素

网页版面布局设计是整个网站构思过程中最重要的一部分，一个精美的网站，其网页版面布局一定是优秀的。文字和图片是网页的最基本元素，我们可以把网站看作是一份报纸或杂志来进行版面布局设计。

版面指的是用浏览器看到的一个完整的页面，由于浏览者遍布世界各地、所用电脑显示器的分辨率不尽相同，所以同一个页面会出现不同的显示效果。网页的局限就在于我们无法突破显示器的范围，而且浏览器也将占去一定的空间，因此、网页的尺寸比显示器的分辩率要小的多（见表一）。

布局就是以最合适的浏览方式将图片和文字排放在页面的不同位置，目的在于以纯美的页面效果吸引更多的访问者（当然页面的信息必须有价值）。

网页的第一屏属“黄金”区域，在版面布局时，要把网页的重要内容尽可能的放在第一屏。向下拖动网页是给网页增加更多内容的唯一方法，但经验告诉我们，除非你能肯定站点的内容能吸引大家拖动，即便如此，对于中小型站点，笔者认为首页的长度最多不宜超过2屏。

二、常规版面布局样式分析

网页版面布局，根据个人爱好及网页内容的不同，其版面布局千变万化。这里对两种得到公众认可的分栏式版面布局（见图1、2）作一分析介绍：

无论网页采用什么版式，对于一个正规的站点而言，网页中的一些基本内容是必不可少的，这些内容在页面中的位置多数情况下也是固定不变的。如LOGO（标志）一般位于页面左上角；Banner（横幅）置于图1所示右上方位置，有时在Banner之后布置Time，用来显示日历和时间（图2）；主导航菜单一般位于版面第二行的显著位置；分栏网页内容位于第三行页面中，布局的变化多样主要表现于此；版权信息（包括次链接及联系方式等）一般置于网页的最底部。

三、网页版面布局的方法和步骤

版面布局是一个创意的问题。作为网页设计者，在制作网页的时候，应该不时地把自己当作访问者，站在他们的角度评价网页是否符合一般的浏览习惯，界面样式是否有新意、吸引人。版面布局要比站点的整体创意容易、有规律的多，其一般步骤如下：

（一）草案。最初展现在我们面前的网页就好像一张白纸，它可以让我们任意挥洒设计才思，充分发挥你的想象力，将你想到的"景象"用铅笔粗略地画在一张白纸上（也可以用各种绘图软件做草案）。这属于创造阶段，不讲究细腻工整，不必考虑细节功能，只以粗陋的线条勾画出创意的轮廓即可。尽你的可能多画几张，反复比较优化，最后选定一个满意的作为继续创作的脚本。

（二）粗略布局。在草案的基础上，用网页制作软件將你确定需要放置的各个模块安排到页面上。在安排各模块时，我们必须遵循突出重点、平衡协调的原则。

（三）定案。将粗略布局精细化，具体化。

四、版面布局设计应遵循的一般原则

在版面布局过程中，我们应该遵循如下一般性原则：

（一）正常平衡。亦称“匀称”。多指左右、上下对照形式，主要强调秩序，能达到安定诚实、信赖的效果。

（二）异常平衡。即非对照形式，但也要平衡和韵律，当然都是不均整的，此种布局能达到强调性、不安性、高注目性的效果。

（三）对比。所谓对比，不仅利用色彩、色调等技巧来作表现，在内容上也可涉及古与今、新与旧等对比。

（四）空白。空白有两种作用，一方面对其他网站表示突出卓越，另一方面也表示网页品位的优越感，这种表现方法对体现网页的格调十分有效。

以上的设计原则，虽然枯燥，但是我们如果能领会并活用到页面布局里，效果就大不一样了。比如：

1.网页的白色背景太虚，则可以加些色块；

2.版面零散，可以用线条和符号串联；

3.左面文字过多，右面则可以插一张图片保持平衡；

4.表格太规矩，可以改用导角试试。

经过不断的尝试和推敲，你的网页一定会亮丽起来。

要提高版面布局设计水平，第一要多看：WWW上的网页数以亿计，各种版面布局样式美不胜收，我们要多看人家的成功之作；第二是模仿：模仿是初学者提高水平的捷径，当你上网浏览时，把那些你认为不错的站点收集起来，再用网页制作软件打开来仔细推敲，会有许多意想不到的收获。经过不断的尝试和吸取众家之长，你的网页版面布局水平就会大幅度提高。

参考文献：

[1]宋琳,董鲁平.网页制作技术[M].清华大学出版社,2000

浅谈网页页面设计技巧 篇12

关键词：DIV+CSS,网页设计

随着互联网与WEB技术的发展, 利用DIV+CSS设计网站的设计方式正逐步成为制作网站的主力军之一, DIV+CSS技术作为制作网页的重要组成部分, 已经成为网页设计中必不可少的要素。本文将详细介绍如何使用DIV+CSS制作一个网页。

1 布局设计

网页中的布局是整个网页制作中最开始的步骤, 也是最为关键的一步。网页中的布局决定网页的整体效果, 合理的布局可以完美、清晰地组织网页中的文字、图形, 给人以紧凑、整洁、美观的感觉。

在本例中, 我们首先使用Photoshop设置网页页面的效果图, 接着再切图并使用DIV+CSS语言将其做成HTML形式。接下来我们详细说明使用DIV+CSS语言的布局方法。

(1) 网页页面的每个区域, 如页头区、主体区、法律和版权声明等, 我们都插入相应的DIV元素, 然后, 用CSS控制DIV使网页居中显示。在本例中, 我们将分为bn, main, cr三个DIV。

(2) 对于页面中所有的DIV元素, 利用CSS控制DIV的位置, 我们可以将页面中的DIV视为一个个块状元素。在此应用了“盒模型”的工作原理, “盒模型”是CSS的基础, “盒模型”理论认为:页面上的每个元素都被看做—个矩形, 这个矩形由内容、填充 (padding) 、边框 (border) 、和边距 (margin) 构成。对于每部分的间距, 以及文字、图片空隙的调整, 我们用“盒模型”的工作原理来调整。在网页默认的情况下, 元素由上到下依次叠放, 当这样的叠放顺序不能满足布局的需要时, 就要使用“float (浮动) ”属性来改变元素的叠放顺序。元素应用了“float (浮动) ”属性, 它周围的元素就会靠近、包围元素, 这样的影响在有的布局中是多余的, 这时, 可以用“clear (清除) ”属性来阻止这种浮动对后面元素的影响。再复杂的布局也是重复利用这样的技术, 大到网页每—部分的叠放, 小到文字、图片的排版。

(3) 在DIV中添加各种网页元素, 把文字、图片、动画安排到合适的位置, 再把每部分合理地叠放到网页中, 这样就完成了网页的布局。

2 主要设计部分

在VS.NET开发环境中, 新建index.htm, 并创建css文件, 命名为main.css, 将样式表写在一个独立的文件中。

在index.htm中写入用来声明将会把Internet Explorer 6及以后版本切换到标准兼容模式。

在

中加入

, 这表示index.htm可以链接到main.css文件中, 可以调用其中的内容。

在index.htm的

中插入如下代码:

对main.css文件的主要设计代码如下:

3 在main的DIV中的各个DIV中插入相应的内容

在导航的DIV中插入相应的内容

同时我们在main.css文件中加入如下代码:

在左边的DIV中插入相应的内容

省职业院校技能大赛

• 关于参加2012年度全国职业院校技能大赛
• 关于开展实训室检查通知
• 实训中心2011-2012下学期课表
• 关于做好2011-2012学年度第一学期实验...
• 关于做好2011-2012学年度第二学期实验...
• 关于做好2011-2012学年度第一学期实验...
• 关于开展实训室期末检查通知
• 关于开展实训室期中检查通知

在mian.css文件中加入如下代码:

在右边的DIV中加入代码:

在右边的main.css中加入代码:

图文混搭之后的效果图如下所示

在这里, 只给出“最新公告”和“实训实验室”这两块内容。还可以在左边的DIV中加入“管理制度”“实训基地”“技能鉴定”三个DIV, 在右边的DIV中加入“资料下载”“实训与实习”“高新技术考试”三个DIV。

4 上传测试

本文中的网页已通过测试运行并发布到WEB服务器上测试。上传后运行正常;并在不同分辨率下都能够正常显示。

5 结束语

本文运用了DIV+CSS技术设计的网页使用方便, 兼容性好。但是DIV+CSS布局的网页由于需要兼容各种浏览器, 也有其不足的地方, 主要表现在开发技术高, 开发时间长, 开发成本高。

参考文献

[1] (美) Kynn Bartle.CSS入门经典[M].北京:人民邮电出版社, 2007.

[2] (加) Zoe Mickley Gillenwate.灵活Web设计[专著][M].北京:机械工业出版社, 2009.

[3]郑宁宁.浅析DIV+CSS网页设计技术[J].山东省农业管理干部学院学报, 2008.