网页程序设计 百文网手机站

网页设计基础

时间:2022-10-17 13:35:06 网页程序设计 我要投稿

网页设计基础

  网页设计,是根据企业希望向浏览者传递的信息(包括产品、服务、理念、文化),进行网站功能策划,然后进行的页面设计美化工作下面是小编为大家整理的网页设计基础,仅供参考,欢迎大家阅读。

  网页设计基础

  第一章 ASP使用基础

  要求:配置ASP运行环境

  根据所用Windows版本,安装适当的Web服务器软件(PWS或IIS),然后创建一个名为ASP的虚拟目录,并在该目录中创建一个ASP动态网页,最后在IE浏览器中运行该页。

  (1)如果当前使用Windows 98操作系统,练习PWS 4.0的安装和卸载操作;如果当前使用Windows 2000,练习IIS 5.0的安装和卸载操作。

  提示:安装PWS通过其安装程序来实现;安装IIS通过控制面板来实现。

  (2)在“我的文档”文件夹中创建一个名为ASP的文件夹,将其设置为Web站点中的一个虚拟目录,其别名与实际文件夹名称相同。

  (3)在记事本程序中编写一个ASP动态网页,用于显示当前日期和时间,将文件保存在上述ASP文件夹中,文件名为ShowNow.asp。

  (4)在IE浏览器中运行ASP文件ShowNow.asp,并按F5键刷新页面,以查看动态内容。

  第二章 HTML语言

  要求:用HTML语言创建网页

  1. 在网页中使用BODY标记的有关属性设置网页的背景图片和文本颜色。

  提示:用BODY标记的BACKGROUD属性设置网页的背景图片;用该标记的TEXT属性设置文本颜色。

  2. 在网页中设置文本的字体、字号和颜色。

  提示:分别用FONT标记的FACE、SIZE和COLOR属性设置文本的字体、字号和颜色。

  3. 在网页中分别创建一个无序列表和无序列表。

  提示:有序列表用OL和标记LI来创建;无序列表用UL和LI标记来创建。

  4. 在网页中插入一幅图像,然后设置该图像的格式。

  提示:用IMG标记插入图像,用该标记的有关属性设置图像格式。

  5. 在网页中播放视频文件(.avi)。

  提示:用IMG标记在网页中播放多媒体文件,此时应设置IMG标记的CONTROLS、DYNSRC、START和LOOP属性,以控制播放过程。

  6. 编写一个网页,选择一首mp3文件作为其背景音乐,并在网页中插入一个字幕。

  提示:用BGSOUND标记在网页中添加背景音乐,并通过SRC属性指定一个mp3音乐文件的URL;用MARQUEE标记在页面中插入一个字幕。

  7. 在网页中创建一个表格并设置表格、行和单元格的属性,然后将表格中的某些单元格合并起来。

  提示:用TABLE、TR和TD(或TH)标记创建表格,并通过这些标记的属性来设置表格、行和单元格的属性;若要合并一些单元格,则应设置TD(或TH)标记的COLSPAN、ROWSPAN属性。

  8. 编写一个框架网页,在顶部创建一个用于显示网站标题的横幅框架,在左边创建一个用于显示网页连接的目录框架,并在右下方创建一个用于显示内容的主要框架。要求在目录框架中单击不同链接时,在主要框架中显示相应的网页。

  提示:在框架网页中,用FRAME标记的NAME属性指定各个框架的名称,例如将右下方的框架名称指定为main;在目录网页中,用A标记的TARGET属性指定在哪个框架中显示超链接指向的目标文档。

  9. 在网页中创建一个表单,并要求在该表单中包含文本框、密码框、滚动文本框、单选按钮、复选框、下拉菜单、提交按钮和重置按钮等控件。

  提示:为了便于安排表单控件的布局,可以将控件放置在表格的单元格内,并对单元格的属性进行设置。

  第三章 VBScript语言

  要求:使用VBScript语言编程

  1. 编写一个网页,在其HEAD部分编写一段脚本代码,当该页被加载时显示一个输入对话框,提示让访问者输入姓名,单击“确定”按钮后,在对话框中显示对该访问者的欢迎信息。

  提示:在网页的HEAD部分编写一个过程(如名称为Welcome),通过InputBox函数输入用户信息,通过MsgBox函数显示欢迎信息,并将BODY标记的onLoad属性设置为该过程名称,以便该页被加载时执行该过程。

  2. 编写一个网页,其显示效果如图3.18所示。在上面两个文本框中分别输入一个整数,要求两者大小不相等。当单击“显示结果”按钮时,在最下面的文本框中显示两者中的较小数;当单击“清除结果”按钮时,将三个文本框中的内容清空;如果未同时在上面两个文本框中输入内容而单击“显示结果”按钮,则显示一个对话框,提示用户在上面两个文本框中分别输入一个整数。

  提示:“显示结果”按钮为普通按钮,在其onClick事件过程中编写脚本,以实现所需操作;“清除结果”按钮为重置按钮。为了保证比较结果的正确性,应使用CInt或CLng函数转换文本框的值。

  3. 编写一个网页,用于求解一元二次方程ax2 + bx + c = 0,页面效果如图3.19所示。在文本框中分别输入二次项系数a、一次项系数b和常数项c的值,然后单击“求解”按钮,此时根据二次项系数a和判别式Δ= b2 - 4ac的取值情况分别进行不同的处理:如果a = 0,则在“求解情况”框中显示“二次项系数不能等于0。”;如果Δ> 0,则“求解情况”框中显示“方程有两个相异的实数根。”,并在“x1 =”和“x2 =”框中显示这两个根;如果Δ= 0,则在“求解情况”框中显示“方程有两个相等的实数根。”,并在“x1 =”和“x2 =”框中显示此根;如果Δ< 0,则在“求解情况”框中显示“方程没有实数根。”。如果单击“重置”按钮,则清除所有文本框的内容。

  提示:为了便于安排表单控件的布局,可以考虑将控件放置在表格中;“求解”按钮为一普通按钮,在其onClick事件过程中编写脚本来实现所需操作;“重置”按钮的TYPE属性应为submit。

  4. 编写一个网页,该页上部列出一些专业的编号和名称,下部有一个文本框和一个按钮,显示结果如图3.20所示。如果在文本框中输入一个专业编号(1-6)并单击“确定”按钮,则出现一个对话框,显示当前所选择的专业名称;如果输入的专业编号大于6,则显示所选择的是其他专业。

  提示:专业列表用一个有序列表来显示;“确定”按钮为一普通按钮,在其onClick事件过程中编写脚本,并使用Select Case语句来实现所需操作。

  5. 编写一个网页,用于计算和输出101~1 000之间所有奇数之和。

  提示:在网页中添加一个普通按钮,在其onClick事件过程中编写脚本,使用Do...Loop或For...Next语句实现求和操作,并通过MsgBox函数来显示计算结果。

  6. 编写一个网页,利用于下面的公式来计算自然数e的值,直到最后一项小于10-4为止。

  提示:在网页中添加一个普通按钮,在其onClick事件过程中编写脚本,使用While...Wend语句实现所需操作,并通过MsgBox函数来显示计算结果。

  7. 编写一个网页,其显示效果如图3.21所示。要求在单击“显示结果”按钮时,将所有表单控件的名称和当前值显示在滚动文本框中。

  提示:“显示结果”按钮是一个普通按钮,在其onClick事件过程中编写脚本,并通过For Each...Next语句来测试第一个表单控件的名称和当前值,代码如下:

  Sub btnShow-onClick

  ' Elements表示由表单上所有控件构成的集合

  For Each k In Document.Form1.Elements

  s = s & k.Name & "=" & k.Value & vbCrLf

  Next

  ' txtResult为滚动文本框的名称

  Form1.txtResult.Value = s

  End Sub

  8. 编写一个网页,用于计算两个整数的最大公约数,其显示效果如图3.22所示。在上面的两个文本框中分别输入一个整数,然后单击“显示结果”按钮,使这两个整数显示在下面的文本框中。

  提示:“显示结果”按钮为普通按钮,在其onClick事件过程中编写脚本,并调用一个自定义函数来实现计算最大公约数的功能。

  9. 编写一个网页,其显示效果如图3.23所示。如果单击“打开新网页”按钮,则在另一个窗口中打开指定的网页;如果单击“关闭当前窗口”按钮,则出现一个对话框,提示关闭当前窗口,单击“是”,即关闭当前窗口。

  提示:“打开新网页”和“关闭当前窗口”两个按钮均为普通按钮,在它们的onClick事件过程中编写脚本,并调用Window对象的有关方法来实现所需操作。

  10. 编写一个网页,利用Window对象的有关方法实现在状态栏显示滚动文本。

  提示:用Window.Status属性设置在状态栏显示的文本,用Window.SetTimeout方法设置两次过程调用之间的.时间间隔。

  第四章 使用ASP对象

  要求:使用ASP对象

  要求掌握5个ASP内置对象的使用方法,即Response对象、Request对象、Server对象、Session对象和Application对象。学习这一章时,关键掌握这些ASP内置对象的一个重要特征,即不用创建便可以在脚本中使用。

  1. 编写一个ASP页,以不同的字号显示“ASP动态网页设计”。

  提示:用For…Next语句实现所要求的功能,将要显示的内容放置在和标记之间,以循环变量的值作为FONT标记的SIZE属性值。

  2. 编写一个ASP页,使用Response.Write方法向客户端浏览器输出一个完整的HTML文件。

  提示:使用Response.Write方法向客户端浏览器输出数据时,如果参数值包含字符组合 %>,则使用转义序列 %> 来代替。Web服务器在处理脚本时,将转换这一转义序列。要输出一个完整的HTML文件,既可以用Response.Write方法逐行输出,也可以将所有内容放在一个字符串中,利用Split函数从字符串中返回数组并使用循环语句来输出所有数组元素。

  3. 编写两个ASP文件,功能都是将整数1~5 000输出到客户端浏览器上并计算所用时间,要求在一个文件中将Buffer属性为设置True,在另一个文件中将Buffer属性设置为False。

  提示:在.asp文件中,设置Buffer属性的语句应该放在命令后面的第一行。如果在HTML或脚本输出之后更改Buffer属性值,则会出现错误。

  4. 编写一个静态网页和一个ASP动态网页,在静态网页中包含着文本框、单选按钮、复选框、提交按钮和重置按钮等控件,并且通过POST方法提交来用户名、E-mail、性别以及个人爱好等数据,在动态网页中通过Form集合检索这些数据并显示出来。

  提示:在静态网页中,用户名和E-mail用文本框来输出,性别通过单选按钮来选择,个人爱好则通过复选框为选择。在动态网页中,用Request.Form("控件名称")形式来检索所提交的表单数据。

  5. 编写一个ASP动态网页,通过使用Cookie制作一个简单的网页计数器。

  提示:在动态网页中,用Request.Cookies集合检索用于保存访问次数的Cookie值,若该值为空,则通过Response.Cookies集合将它设置为1,否则将它加1。

  6. 编写一个ASP动态网页,用于显示当前网页的虚拟路径、发出请求的客户端的IP地址、服务器的名称、所用HTTP协议的版本号以及服务器软件版本号。

  提示:通过Request.ServerVariables ("服务器环境变量名")格式来读取所指定的各项信息。读取当前网页的虚拟路径时,服务器环境变量名为SCRIPT-NAME;读取客户端的IP地址时,服务器环境变量为REMOTE-ADDR;读取服务器的名称时,服务器环境变量名为SERVER-NAME;读取HTTP协议的版本号时,服务器环境变量名为SERVER-PROTOCOL;读取服务器软件的版本号时,服务器环境变量名为SERVER-SOFTWARE。

  7. 编写一个HTML静态网页和一个ASP动态网页,在静态网页中创建一个登录表单,用于提交用户名和密码,在动态网页中检查是否输入了用户名和密码,如果没有输入这些信息则重定向到静态网页中,如果已经输入了这些信息则显示欢迎信息。

  提示:在动态网页中通过Request.Form集合检索所提交的用户名和密码,如果相应的值均为空,则通过Response.Redirect或Server.Transfer方法转换到静态网页上。

  8. 编写一个ASP动态网页,用于显示每个用户的会话标识和页面被刷新的次数。

  提示:用户的会话标识通过Session对象的SessionID属性返回;页面的刷新次数保存在一个会话变量中,若该变量的值为空串,则将其设置为1,否则将其加1。

  9. 利用Internet信息服务管理单元创建一个基于ASP的应用程序。

  提示:选择“开始→程序→管理工具→Internet服务管理器”命令,然后在左侧的“树”窗格中右击“默认Web站点”并选择“新建→虚拟目录”命令,接着按照虚拟目录创建向导的提示操作即可。

  10. 在global.asa文件中编写应用程序事件和会话事件的脚本,然后编写一个ASP动态网页,用于显示目前在线人数。

  提示:用一个应用程序变量来保存目前在线人数,在Application-OnStart事件中初始化该变量,在Session-OnStart事件中将该变量加1,在Session-OnEnd事件中将该变量减1。

  第五章 使用ASP组件

  要求:使用ASP组件

  1. 使用内容轮显组件在ASP页面上自动轮换显示一首诗、一幅图像和一段视频。

  提示:在内容列表文件中包含3个HTML内容字符串条目,分别显示一首诗、一幅图像和一段视频;在ASP页中通过调用ContentRotator对象的ChooseContent方法从内容列表文件中检索一个HTML内容字符串并将其显示出来。

  2. 使用广告轮显组件在ASP页面上自动轮换显示3个广告,它们各占用30%、30%和40%的显示时间。

  提示:在轮显列表文件中包含3个广告,其相对权值分别为3、3和4,在ASP页面上通过调用广告轮显组件对象的GetAdvertisement方法从轮显列表文件中获取下一个广告。

  3. 使用内容链接组件在ASP页面上创建“上一页”和“下一页”链接。

  提示:首先创建内容链接列表文件,在该文件中包含要显示的Web页的列表;然后在ASP页面中通过调用Nextlink对象的GetPreviousURL方法获取链接列表文件中前一项的URL;通过调用GetPreviousDescription方法获取内容链接列表文件中前一项的描述文字;通过调用GetNextURL("Nextlink.txt")获取内容链接列表文件中下一项的URL;通过调用GetNextDescription方法内容链接列表文件中下一个项的描述文字。

  4. 使用页面计数器组件显示ASP页面被浏览的次数。

  提示:首先创建页面计数器对象实例,然后通过调用该对象的PageHit使当前ASP页面的访问数加1,再通过调用该对象的Hits方法获取当前页被打开或刷新的次数。

  5. 使用计数器组件创建一个投票系统。

  提示:在global.asa文件中,用OBJECT标记创建一个应用程序作用域的数器组件对象实例;在ASP页面中通过调用该对象的Increment方法使指定项目的选票数加1;通过该对象的Get方法获取指定项目的当前选票数。

  6. 使用浏览器功能组件检查客户端浏览器的名称和版本号。

  提示:首先使用Server.CreateObject方法创建浏览器功能组件的对象实例,然后通过该对象的Browser属性获取浏览器名称;通过该对象的Version属性获取浏览器的版本号。

  7. 使用文件存取组件创建一个HTML网页,并通过单击超链接打开该网页。

  提示:首先创建FileSystemObject对象实例fso,然后通过调用fso对象的CreateTextFile方法创建一个文本文件并返回TextStream对象,并通过调用该对象的WriteLine方法写入HTML代码行;接着用A标记创建一个指向该文件的超链接。

  第六章 使用ADO对象

  要求:使用ADO对象

  要求通过ADO对象(Connection、Recordset、Command)来访问数据库。通过这些ADO对象不仅可以连接到Access和SQL Server等格式的数据库,而且可以将数据库中的信息显示在网页上,还可以对数据库中的数据进行增删改等操作。

  1. 使用Connection对象通过OLE DB提供程序连接到Microsoft SQL Server示例数据库pubs。

  (1) 将连接信息保存在连接字符串中。

  (2) 将连接信息保存数据链接文件中。

  提示:对SQL Server数据库创建OLE DB连接时,可以将连接信息保存在连接字符串中,该字符串包含着以下5个参数:PROVIDER参数指定OLE DB提供程序的名称,对于SQL Server数据库,OLE DB提供程序名称为SQLOLEDB;DATA SOURCE参数指定SQL Server数据库服务器的名称;UID参数指定连接中使用的SQL Server登录标识;PWD参数指定SQL Server登录密码;DATABASE参数指定位于数据库服务器上的一个指定数据库(在本题中为pubs)。创建数据链接文件时,首先在记事本创建一个扩展名为.udl的文本文件,然后打开该文件并利用“数据链接属性”对话框对有关属性进行设置,最后在连接字符串中使用FILE NAME参数来引用该文件。

  2. 使用Connection对象通过ODCB驱动程序连接到Microsoft SQL Server示例数据库Northwind。

  (1) 创建系统DSN,将连接信息保存在Windows注册表中。

  (2) 创建文件DSN,将连接信息在文本文件中。

  (3) 将连接信息保存在字符串中,直接包含在ASP脚本代码中。

  提示:系统DSN和文件DSN均通过ODBC数据源管理器来创建,前者在连接字符串中用DSN参数来引用,后者在连接字符串中用FILEDSN参数来引用;如果将连接信息保存在字符串中,则应在连接字符串中包含以下4个参数:DRIVER参数指定所用的ODBC驱动程序(本题中为{SQL Server}),UID和PWD给出用户标识和密码,DATABASE参数指定要连接的数据库(本题中为Northwind)。

  3. 使用Connection对象通过OLE DB提供程序连接到Microsoft Access示例数据库Northwin.mdb。

  (1) 将连接信息保存在连接字符串中。

  (2) 将连接信息保存数据链接文件中。

  提示:通过OLE DB提供程序连接到Microsoft Access数据库时,连接字符串中应包含PROVIDER和DATA SOURCE两个参数:前者指定连接数据库所使用的OLE DB提供程序(在本题中为Microsoft.Jet.OLEDB.4.0),后者指定要连接的Access数据库的完整路径;数据链接文件在连接字符串中可以通过FILE NAME参数。

  4. 使用Connection对象通过ODCB驱动程序连接到Microsoft Access示例数据库Northwin.mdb。

  (1) 创建系统DSN,将连接信息保存在Windows注册表中。

  (2) 创建文件DSN,将连接信息在文本文件中。

  (3) 将连接信息保存在字符串中,直接包含在ASP脚本代码中。

  提示:连接Microsoft Access数据库时,系统DSN和文件DSN均通过ODBC数据源管理器来创建,前者在连接字符串中用DSN参数来引用,后者在连接字符串中用FILEDSN参数来引用;如果将连接信息保存在字符串中,则应在连接字符串中包含以下两个参数:DRIVER参数指定所使用的ODBC驱动程序(本题中为{Microsoft Access Driver }),使用DBQ参数指定要连接的Access数据库。

  5. 使用Connection对象完成下列操作:

  (1) 创建一个SQL Server数据库,名称为mydatabase。

  (2) 在数据库mydatabase中创建一个新表,名称为mytable,包含user-id、user-name和password三个列,user-id为表的标识列。

  (3) 向mytable表中添加若干条记录(用户名不得重复)。

  (4) 对mytable表中的指定记录进行修改。

  (5) 删除mytable表中的指定记录。

  (6) 以表格形式显示mytable表中的全部记录。

  提示:使用Connection对象的Execute方法还能够执行指定的SQL语句,从而完成创建数据库、创建表、添加记录、修改记录、删除记录以及检索记录等操作,相应的SQL语句分别为CREATE DATABASE语句、CREATE TABLE语句、INSERT语句、UPDATE语句、DELETE语句以及SELECT语句。

  6. 连接到Microsoft SQL Server示例数据库pubs,然后使用Recordset对象完成下列操作:

  (1) 以表格形式显示authors表中的记录。要求每页仅显示一个作者的资料,并建立“第一页”、“上一页”、“下一页”和“最后一页”链接,通过这些链接可以在不同记录之间移动。

  (2) 分页显示authors表中的记录,要求每页显示五个作者的资料,并在页面底部列出总页数、当前页号和所有页号(超链接),通过超链接可以在不同记录组之间移动。

  (3) 按照作者编号从authors表中搜索作者。如果找到,在表格中列出作者资料,否则显示“没有找到符合条件的记录!”。

  (4) 从authors表中提取来自加利福尼亚州(即state列值为“CA”)的作者记录,并将该记录集保存到文件中,随后从该文件中读取记录集,以表格形式显示出来。

  提示:利用Recordset对象的有关方法可以在不同记录之间移动,即:调用MoveFirst方法移动到记录集内的第一条记录上,调用Move -1相对于当前记录向前移动一行,调用Move 1相对于当前记录向后移动一行,调用MoveLast移动到记录内的最后一条记录上;分页显示数据库记录时,使用Recordset对象的PageSize属性指定一页中的记录数,使用PageCount属性返回总页数,使用AbsolutePage属性指定当前记录所在的页;使用Recordset对象的Find方法可以搜索记录集内满足指定条件的记录,如果条件符合,则记录集的位置设置在找到的记录上(EOF属性值为False),否则位置将设置在记录集的末尾(EOF属性值为True);使用Recordset对象的Save方法可以将记录集保存在文件中,随后可以使用Open方法来恢复记录集的内容。

  7. 连接到前面所创建的mydatabase数据库,然后使用Command对象和Parameters集合完成下列操作:

  (1) 创建一个注册页面,允许网站访问者提交用户名和密码,并将这些数据保存到mytable表中。

  (2) 创建一个修改密码的页面,允许用户更改其密码。

  提示:使用Command对象添加记录时,可以将SQL INSERT语句作为CommandText的值,并使用问号“?”来表示VALUES子句中的值,执行命令时所需参数并通过相应的Parameter对象来传递;使用Command对象添加记录时,可以将SQL UPDATE语句作为CommandText的值,并使用问号“?”来表示SET子句和WHERE子句中的值,执行命令时所需参数并通过相应的Parameter对象来传递。

  网站网页设计知识

  1.在进行网页设计的时候需要使用到一些软件,其中像是FrontPage就是经常要使用到的一种,这一种软件其实还是比较简单的,使用也是方便的,另外也是高度符合IE浏览器的支持设计,DreamWave也是可以使用的,这个软件的功能还是非常的强大的,设计成品了以后对于很多的浏览器都是支持的。

  2.在图片的处理上面就是常用的Photoshop 或Fireworks就可以了,动画制作方面当然使用的还是Flash MX。

  3.知识储备方面来说光宇网页的常识还有HTML的一些基本常识都是应该要知道的,其实这个方面的知识也是很简单的,在早期的时候只是用来制作网页,使用笔记本就能够进行编辑,而且在使用浏览器打开以后呈现的是网页上面的形式,另外哈有CSS只是,这个也是很简单的,是级联样式表,也叫做风格样式表,在进行网页的风格设计的时候都是需要使用到的,而且CSS还能够让使用者对网站的控制更加的方便,所以大多数现在都在使用这种方式。

  4.网页的设计之前,首先要考虑到的是关于网页的风格,使用什么样子的风格都是应该要提前考虑好的,但是要保持网站的简洁性,这样能够也让浏览者一目了然的知道网站的建设风格是什么样子的,而且总体的网站建设也是应该要有稳定性的,但是在设计的时候一定要显示出来自己网站的主题。

  网站的设计和制作其实并不困难,但是制作者在制作之前应该有一个目的和计划,知道自己要做出来的是什么样子的风格的网站,主要的内容是什么的,而且没有主题的网站让浏览者也是会失去兴趣的,所以网站的主题还是非常重要的。

  网页设计的优化知识

  一、用户体验

  1.速度优先

  何为速度优先?我的理解就是一切为了网页的加载速度让路。这个道理搞网页都知道,但是又几乎所有搞网页都曾经或仍在试图违反它。为什么会这样呢?通常是一个极具创意或功能强大的hack在疑惑着网页设计者,迫使其为了应用这个hack而牺牲一部分速度,但是hack的资源是无穷无尽的,就像毒 品一样,你用了第一个就想要用第二个,最终的后果是什么?就是你的网页的打开速度让人无法忍受,根本没有访客来浏览,这时候你的hack也就纯粹成为了摆设,没人用的 hack存在有何价值?

  因此我对于添加hack的原则是凡是会破坏速度与功能的平衡点的hack无论多么具有创意或功能多么强大都必须坚定不移地舍弃或通过舍弃其它hack/改变网页设计等方法来达到平衡。而我对于使用hack的原则则是对于用户有用的hack才使用,实用为先。估计很多人都会骂我太现实,没有一点艺术家的浪漫。但是我也必须很现实地告诉你,网页设计者不是艺术家,他们存在的价值是使更多用户访问你的网页,网页设计的根本目的也是为了增加用户浏览量。因此如果你觉得某个hack的效果十分华丽或功能十分有新意但用户却极少使用到那我会建议你将其舍弃,这纯粹是个妨碍你提高网页速度的障碍。

  为何我如此注重速度?因为无数的例子告诉我们速度是信息时代成功的最关键的因素,最典型的例子就是Google。如果你是一个Google的用户,相信你会注意到Google的所有服务都有一个共同点:载入速度极快。而Google的两大竞争对手Yahoo和 Microsoft的产品相较之下速度慢如蜗牛。这就是Google击败他们的一个关键因素。现代人的生活节奏很快,他们需要极高的工作效率,而如果你搜索是为了最快找到需要的信息而不是注意搜索引擎的版式多么华丽,打开邮箱是为了查看邮件而不是为了欣赏邮箱的设计风格多么前卫。因此这就是Google两大服务Google搜索和Gmail的成功原因。Windows Live Mail设计得再前卫,结果我1分钟都还没打开邮箱我怎么可能看得到。而Gmai虽然没有华丽的界面,但却可以十分快速地打开进行工作,这无疑是用户所需要的。

  因此一个快速打开的页面带给用户的感觉要比一个视觉效果华丽但却等了N久都无法打开而不能被用户注意到的网页要好多了,这将成为你的网站吸引用户的关键因素。

  2.简洁最美

  最好的例子同样是Google。Google的所有产品的界面都并不华丽,但都是十分简洁(这也是决定其高速的一个重要因素),用户可以一目了然地找到需要的功能,同时又有一种舒适的感觉。相关一个十分华丽的界面却很有可能会造成无法对用户正确导航的后果。而且简洁的界面比较容易进行hack的搭配,而华丽的界面由于色彩等因素,添加新的hack很有可能会破坏界面的平衡感。由于各人审美观的不同,也许有些用户不喜欢华丽的界面,但简洁高效的界面无疑是所有用户都会青睐的。

  因此大刀阔斧地对你的界面进行改造吧,把那些华而不实影响对用户的导航的元素去处,只留下真正有用的元素,这将对新用户起到至关重要的作用。

  3.个性化的设计

  网页设计最忌讳的就是同质化的设计。如果用户看了N个网站都是使用那令人审美疲劳的模版,而你的网站却特立标新,那绝对会带来一种极大的视觉冲击力。因此如果你看到一个模版十分喜爱,但却已经被大量网站所使用,一定要坚决放弃,否则你的网站只会被用户所忽略。

  尽管用户对一个网站的评价最主要是取决于网站的内容,但是如果没有恰当的网页设计,很可能会使用户忽略好的内容,网页设计是用户对网站的第一印象,因此避免同质化的网页设计是使用户关注内容的前提。

  二、搜索引擎优化

  可能许多网页设计者对此都相当不屑,他们的理由也十分正当,如果过于关注搜索引擎的优化就会破坏用户体验效果。但是我的看法是实际上一些恰当简单的搜索引擎优化技巧对于用户体验效果不仅不会造成破坏,而且能起到更好的推广作用,何乐而不为呢?

  1.网页结构优化

  使用div css的架构,这一架构的优势十分显著,修改方便,而且可以选择让搜索引擎bot先对正文部分进行爬行而避免因Head和Sidebar的信息多次重复而提前中止了对正文部分的爬行,使bot在最短时间内索引到网页的核心内容。

  2.标题、描述、关键字、排版的优化

  标题字数控制在35个汉字以内,将你的网页主要内容和要优化的关键字体现在标题上。而描述和关键字则要尽量全面地覆盖你需要优化的关键字。排版上要多运用加粗、添加下划线、使用斜体、使用H1、H2、H3等标签来突出要优化的关键字,并且尽量将关键字的密度保持在6%-10%之间。

  3.细节的优化

  主要就是注意多交换链接和保证交换链接的质量。一个页面内的外链数量最多不要超过3个,最好保持在1-2个,内链数量越多越好。对于图片添加链接以及添加 alt说明,让搜索引擎可以读懂你的图片并索引你的网页。搜索引擎对于页面相似度高的站点会采取一定的惩罚措施。

  4.制作和提交sitemap

  提交你的sitemap到Google Webmaster Tools和Yahoo! Site Explorer,以及提交你的网站到其它各大搜索引擎和DMOZ等网站目录。帮助搜索引擎更好地索引你的站点。

  基本上我认为对于网页设计这些是需要注意的,但由于我的实际经验太少,可能会有错漏,请各位提出意见。