1.2 网页基本常识的介绍
在学习网页制作之前,应该先了解有关网页的基本常识,这样可以减少在制作网页时遇到的麻烦。
1.2.1 了解网页专业术语
网页是使用标识语言通过一系列设计、建模和执行的过程将电子格式的信息通过互联网传输,最终以图形用户界面的形式呈现在用户面前的页面。在浏览网页时,经常会碰到一些专业术语,下面将对其进行具体的介绍。
1.Banner(横幅广告)
Banner是互联网广告中最基本的广告形式。它是一个表现商家广告内容的图片,放置在广告商的页面上,尺寸是480像素×60像素或233像素×30像素,一般是GIF格式的图像文件,可以使用静态图形,也可用多帧图像拼接为动画图像,如图1-6所示。除了GIF格式外,新兴的RichMedia Banner(富媒体广告)能赋予Banner更强的表现力和交互内容,但需要用户使用的浏览器插件支持Plug-in。Banner一般翻译为网幅广告、旗帜广告以及横幅广告等。
图1-6
2.Browser(浏览器)
浏览器就是指在电脑上安装的,用来显示指定网站的程序。WWW的原理就是通过网络客户端(Client)的浏览器去读指定的文件,同时Internet上还提供了远程登录(Telnet)、电子邮件(E-mail)、传输文件(FTP)、电子公告板(BBS)以及网络论坛(Netnews)等多种交流方式。
3.Click(点击次数)
用户通过点击广告而访问广告主的网页,称点击一次。点击次数是评估广告效果的指标之一。
4.Cookie
Cookie是电脑中记录用户在网络中行为的文件,网站可以通过Cookie来识别用户是否曾经访问过该网站。当浏览某些Web站点时,这些站点会在用户的硬盘上用很小的文本文件存储一些信息,这些文件就称为Cookie,如图1-7所示。Cookie中包含的信息与用户的爱好有关。
图1-7
5.Database(数据库)
Database通常指是利用现代计算机技术,将各类信息进行有序的分类整理,便于查找和管理。在网络营销中,可利用互联网收集用户个人信息,例如姓名、性别、年龄、地址、电话、兴趣爱好以及消费行为等,然后建立数据库进行管理。
6.HTML(超文本标识语言)
HTML是一种基于文本格式的页面描述语言,是网页通用的编辑语言。
7.HTTP(超文本传输协议)
HTTP,即Hyper Text Transfer Protocol,是万维网上的一种传输协议,当浏览器的地址栏上显示HTTP时,就表明正在打开一个万维网页。
8.Key Word(关键字)
Key Word是用户在搜索引擎中提交的文字,用于快速查询用户所需要的内容。
9.URL
URL即某网页的链接地址,在浏览器的地址栏中输入URL,即可看到该网页的内容。
10.Web Site(站点)
Web Site即为互联网或者万维网上的一个网站。站点包含各种组成物,如某一个特定的域名、源程序等。
技巧与提示
IM(即时通信软件)是一种网络即时信息传呼软件,通过IM可以寻找到朋友,并在互联网上面聊天,发送消息、网址和文件,以及浏览新闻,甚至具有移动寻呼功能。常用的IM有MSN、QQ、雅虎通、网易泡泡以及ICQ等。
1.2.2 HTML的组成及语法
HTML(Hyper Text Markup Language)是用于描述网页文件的一种标记语言。HTML是一种规范和标准,它通过标记符号来标记要显示的网页中的各个部分。
网页本身是一种文本文件,通过在文本文件中添加标记符,可以通知浏览器如何显示其中的内容(如:文字如何处理、画面如何安排以及图片如何显示等)。
浏览器按顺序阅读网页文件,然后根据标记符解释和显示其标记的内容,对书写出错的标记将不指出其错误,且不停止其解释执行过程,编制者只能通过显示效果来分析出错原因和出错部位。
1.HTML的组成
一个网页对应于一个HTML文件,HTML文件以.htm或.html为扩展名。可以使用任何能够生成TXT类型源文件的文本编辑产生HTML文档。
技巧与提示
HTML之所以称为超文本标记语言,是因为文本中包含了“超链接”点。所谓超链接,就是一种URL指标,通过启动它,可使浏览器方便地获取新的网页,这也是HTML获得广泛应用的最重要的原因之一。由此可见,网页的本质就是HTML,通过结合使用其他的Web技术(如脚本语言、CGI以及组件等),可以创造出功能强大的网页。因此,HTML是Web编程的基础,也就是说万维网是建立在超文本基础之上的。
标准的HTML文档一般包括:开头与结尾标志,以及HTML的头部与实体两大部分。有3个双标记符用于页面整体结构的确认。图1-8所示为一般HTML的基本组成情况。
图1-8
● 这个文档的第一个Tag是<html>,这个Tag告诉浏览器这是HTML文档的头。文档的最后一个Tag是</html>,表示HTML文档到此结束。
● 在<head>和</head>之间的内容,是Head信息。Head信息是不显示出来的,在浏览器里看不到。但是这并不表示这些信息没有用处。如可以在Head信息里加上一些关键词,有助于搜索引擎能够搜索到这个网页。
● 在<title>和</title>之间的内容,是这个文档的标题。可以在浏览器最顶端的标题栏看到这个标题。
● 在<body>和</body>之间的信息,是文档的正文部分。在<b>和</b>之间的文字,用粗体表示。<b>就是bold的意思。
● HTML文档看上去和一般文本类似,但是它比一般文本多了Tag,如<html>、<b>等,通过这些Tag,可以告诉浏览器如何显示这个文件。
2.HTML的语法
HTML的语法非常简单,组成HTML语法的元素只有HTML卷标与HTML属性。如通过下面这个例子来说明HTML的语法:HTML文件或页面(国家) |HTML元素(家庭)|HTML卷标(重要成员,男人或女人)|HTML属性(其他成员,比如孩子)。
技巧与提示
需要注意的是,不同的浏览器对同一标记符可能会有不完全相同的解释,因而可能会有不同的显示效果。
1.2.3 网页设计的基本原则
作为一个网页设计初学者,在设计网页之前需要了解如何让网页的内容精确、合理、丰富以及吸引用户。网页设计的内容需要遵循下面7条基本原则。
1.用户优先
无论什么时候,不管是着手准备设计之前、正在设计之中或者已经设计完毕,有一个最高行动准则一定要牢记在心,那就是:用户优先。
如果没有用户去浏览,制作再好的网页都是没有意义的。因为很多用户所使用的还是通过电话线路拨号的缓慢上网方式,而且堵塞得很严重,所以在设计网页时就必须以这种普遍状况为设计参考,对于一些较大的Flash、图片要尽可能少放或从技术上使其分割。最后,完成之后,最好通过远程Modem拨号上网的方式来亲自测试一下。
另外,还必须考虑用户的计算机配置问题,因为网络用户遍及世界各地,他们使用的计算机的分辨率和浏览器的版本不同,浏览的效果是不一样的。如果想要让所有用户都可以毫无障碍地观看自己的网页,那么最好使用所有浏览器都可以阅读的格式,不要使用只有部分浏览器可以支持的HTML格式或程序技巧。
2.首页很重要
首页是最重要的东西,因为它是用户对这个网站的第一印象。如果是新创建的网站,最好在第一页就对这个网站的性质与所提供内容做个简要说明与导引,让用户判断要不要继续进入里面。最好第一页就有很清楚的类别选项,而且设计得尽量人性化,让用户可以很快找到需要的主题。在设计上,最好秉持干净简洁的原则。
首先,若无需要,尽量不要放置大型图片文件或加上不当的程序,因为它会增加下载时间,导致用户失去耐心。
其次,画面不要设置得太过杂乱无序,因为用户会找不到东西。
例如,下面这款网页游戏的首页就很好地体现其主题,并快速引导用户进入,如图1-9所示。
图1-9
3.内容有特色
内容可以是任何东西,包括文字、图片、影像以及声音等,但一定要跟这个网站所要提供给用户的信息有关系。
建设网站一定要进行规划,规划时必须确定自己网站的性质、提供内容以及目标观众,然后根据本身的软硬件条件来设置范围。
网络的特色是及时、新鲜、丰富、热闹,这是吸引用户上网的条件,如果本身条件强大,可以根据上述原则使网站成为一个全方位的信息提供者,如果条件不允许,就成为单方面的提供者。此外,还可以在特殊议题或主题上加以突出,进一步锁定目标观众。
4.将栏目归类
内容的分类很重要,可以按主题分类、按性质分类、按机关组织分类或按人类思考直觉式分类等,一般而言,按人类的思考直觉式分类会比较亲切。但无论是哪一种分类方法,都要让用户可以很容易找到目标。而且分类方法最好保持一致,若要混用多种分类方法也要把握住不让用户搞混的原则。此外,在每个分类选项的旁边或下一行,最好也加上这个选项内容的简要说明。图1-10所示为搜狗浏览器的主页。
图1-10
5.互动性
网页的另一个特色就是互动。好的网站必须与用户有良好的互动性,包括整个设计呈现、使用接口导引等,都应该掌握互动的原则,让用户感觉每一步都确实得到适当的响应,这部分需要一些设计上的技巧与软硬件支持。事实上,好的网页设计必须加上个人技巧、经验累积以及软硬件技术的配合运用等。为了增加与用户的互动,网页中最好也加上可供用户表达意见的评论栏,如图1-11所示。在HTML中一定要注意它的格式命令写法,许多用户在这个地方常常写错。另外要注意,在UNIX系统下有大小写区分。
图1-11
6.注意格式的正确性
很多设计者在撰写网页文档时,会简略化一些命令格式,但为了日后维护方便,撰写HTML时最好架构完整,而且初学者也可以借此对HTML语法有正确认识。另外,如果网站本身想让用户可以通过搜索引擎来找到,那么千万不要忘了在<title>指令中加上可供搜索的关键词串。
7.背景底色
不少人喜欢在网页中加上背景图案,认为如此可以增加美感,但却不知这样会耗费传输时间,而且容易影响阅读舒适度,反而给用户留下不好的印象。
因此,若没有绝对必要,最好避免使用背景图案,保持内容干净易读,如图1-12所示。但如果真的喜欢使用背景,那么最好使用单一色系,如图1-13所示,而且要跟前景的文字可以明显区别,最忌讳使用花俏多色的背景,因为这样不仅大量耗费传输与显示时间,而且会严重干扰用户的阅读。
图1-12
图1-13