网页网页边框

基础篇静态网页的设计和制作使用Dreamweaver进行静态网页设计制作,包括站点的创建和管理、文本的使用、图像和媒体的插入、表格和框架的应用、链接的创建和使用、交互式表单、Div元素的应用、CSS样式表和资源管理、模板和库等内容.
第1章概论随着计算机和计算机网络的发展,网络已经与人们的生活密不可分.
利用网络,人们足不出户就可以完成购物、接受教育、远程医疗等活动,还可以在网络信息海洋中寻找想要的信息,这一切都主要依靠因特网中的Web页技术.
工欲善其事,必先利其器.
在制作网页前,不仅需要了解网络的相关概念,还要知道制作网页的工具以及在网页中使用的脚本语言等.
在本章,将介绍网页设计的基础知识、HTML标记语言和网站设计的流程等内容.
1.
1计算机网络的概念计算机网络就是利用通信设备和线路将地理位置分散、功能独立的多个计算机互联起来,以功能完善的网络软件(网络通信协议、信息交换方式和网络操作系统等)实现网络中资源共享和信息传递的系统.
计算机网络按范围来分,一般可以分为局域网(同一建筑、同一单位或方圆几公里地域内的专用网络)、城域网(一组相邻的公司或一个城市)、广域网(一个国家或地区).
图1.
1所示为总线型局域网结构图.
早期的计算机系统是高度集中的,20世纪50年代中后期,许多系统都将地理上分散的多个终端通过通信线路连接到一台中心计算机上,这样就出现了第一代计算机网络.
第一代计算机网络是以单个计算机为中心的远程联机系统.
第二代计算机网络兴起于20世纪60年代后期,它将多个主机通过通信线路互联起来,为用户提供服务,典型代表是美国国防部高级研究计划局协助开发的基于TCP/IP的ARPA网.
20世纪70年代至80年代中期,第二代网络得到迅猛发展.
第二代计算机网络以通信子网为中心.
这个时期,网络定义为"以能够相互共享资源为目的互联起来的具有独立功能的计算机之集合体",形成了现代计算机网络的基本概念.
第三代计算机网络是具有统一的网络体系结构并遵循国际标准的开放式和标准化的网络.
国际标准化组织(ISO)在1984年颁布了OSI开放系统互联参考模型,该模型分为七个计算机电缆图1.
1总线型局域网结构图网页设计与制作(第二版)2层次,也称为OSI七层模型,公认为新一代计算机网络体系结构的基础.
OSI参考模型的颁布为普及局域网奠定了基础.
第四代计算机网络从20世纪80年代末开始,局域网技术发展成熟,出现光纤及高速网络技术、多媒体、智能网络,整个网络就像一个对用户透明的大的计算机系统,发展为以因特网(Internet)为代表的互联网.
因特网是目前世界上影响最大的国际性计算机网络.
它以TCP/IP网络协议将各种不同类型、不同规模、位于不同地理位置的物理网络连接成一个整体.
图1.
2所示为因特网的结构.
图1.
2因特网的结构示意图一台计算机连接到因特网,就可以访问因特网上的资源.
在图1.
2所示的结构中,有的计算机通过局域网连接到因特网;有的计算机通过调制解调器,然后通过电话线连接到因特网上,还有的直接连接到因特网上.
因特网上提供各种信息资源的服务器就是这样连接到因特网上的.
将因特网的通信部分用一朵"云"来表示,意思是在通信部分,其结构非常的复杂,有的是公用电话网,有的是网络公司或行业部门建立的全国性的光纤主干网.
它们在地域上互相重叠,又互相连接,形成一个大的网络.
因特网的应用很多,如聊天、购物、接受教育、玩游戏、收发电子邮件等,其中的很多应用是基于Web来实现的.
例如,用户要登录到某个网站以获取一些信息,可按如下方式来操作:(1)启动一个网络浏览应用程序.
比如微软公司开发的网络浏览器IE(InternetExplorer),它已内置于Windows操作系统.
(2)在地址栏中输入准备查看的网站地址.
比如www.
sohu.
com,按Enter键之后(假定本机的网络设置和所访问的Web服务器都工作正常),就会在浏览器中显示相应的网页.
通过网页可以浏览新闻等信息.
从以上内容可以看到,计算机网络是一些自治的计算机通过通信线路组成的有机整体.
网络上提供的服务一般有电子邮件、文件传送、WWW服务等,这些服务大都是一些专门的服务器提供的.
我国的因特网建设从20世纪90年代起到现在,已经有了巨大的发展.
根据中国互联网信息中心的调查,截止到2012年12月31日,我国网民规模达到5.
64亿,互联网普及率为42.
1%,手机网民规模为4.
20亿,域名总数约为1341万个,其中CN域名为751万个,中国网站总数约为268万个,国际出口带宽为1899792Mbps.
第1章概论31.
2WWW和HTMLWWW的全称是WorldWideWeb,正式的译名是万维网.
WWW服务是因特网上应用最广泛的服务.
通过Web浏览器,用户可以很方便地在Internet上享受信息检索、游戏娱乐、教育学习和网络聊天等"冲浪"的乐趣.
WWW网站中包含有多个网页(Web页面),以提供包括文本、图片、声音、动画和影像等信息.
网页之间可以建立链接,通过链接,用户能在具有链接关系的页面之间进行切换.
Web页面一般是由HTML(HyperTextMarkupLanguage,超文本标记语言)语言编写的,通过HTTP(HyperTextTransferProtocol,超文本传输协议)协议在网络中传输.
HTML是一种跨平台的超文本标记语言,所创建HTML文件是带有格式标识符和超文本链接内嵌代码的ASCII文本文件.
HTML语言的特点是通过对一些项加上标记来描述网页上的元素(文本、图片、动画、表格等),比如在和之间的文字将会被浏览器解释为粗体字.
下面用记事本来制作一个用HTML语言编写的网页.
打开记事本,在其中输入以下文本:我的网页我的第一个网页!
保存该文件时,"保存类型"中选择"所有文件",输入文件名为example.
htm,如图1.
3所示,单击"保存"按钮保存文件.
这样就在保存的目录下有了一个example.
htm文件,打开后的效果如图1.
4所示.
图1.
3文本文件保存为HTML文件图1.
4example.
htm的浏览效果通过这样的方法,就制作了一个简单的网页,同时可以知道,网页文件可以通过文本编辑器来书写.
实际上,无论多复杂的网页,都可以按这种方式来书写,只是这样做工作量将非常得大,效率也很低.
网页设计与制作(第二版)41.
3WWW的工作流程在物理结构上,组成WWW的是Web客户机和Web服务器.
它们都连接在因特网上,通过因特网进行通信.
浏览者的计算机是客户机,提供信息的计算机是服务器(服务器一般由处理速度快、存储容量大的计算机承担,运行了WWW服务器程序的个人计算机也可以作为Web服务器).
在应用程序上,客户机上运行的是IE之类的浏览器程序.
浏览器程序的主要作用就是对HTML标记语言进行解释并且将它显示在浏览器窗口中.
在Web服务器上,运行的是WWW服务器程序,可以是Windows下的IIS,也可以是Linux下的Apache或其他的WWW服务器程序.
根据静态网页和动态网页的不同,WWW工作的流程有两种方式.
l如果是静态网页,在客户机上的浏览器地址栏中输入一个网页地址,按Enter键,客户机就用因特网上的HTTP协议发送一个请求到该地址所指定的服务器.
服务器收到请求后,将客户机请求的页面文件或系统的默认页面文件传送到客户机中.
浏览器将会解释这个HTML文件,并将结果显示在浏览器窗口中.
运行示意图如图1.
5所示.
l如果是动态网页,当服务器收到请求后,将根据请求的信息,在服务器上找到相应页面文件并对该文件进行处理,运行该文件包含的程序代码,然后将运行的结果以标准的HTML文件格式送回到客户机,由客户机的浏览器显示结果,运行示意图如图1.
6所示.
图1.
5静态网页的工作流程图1.
6动态网页的工作流程1.
4HTML语言基础1.
4.
1HTML语言简介1990年,HTML语言与WWW一起诞生于瑞士的GERN实验室.
TimBernersLee及其开发小组研究建立了一种以一定格式传输信息的方法,就是众所周知的超文本传输协议HTTP.
该协议使用了HTML语言.
HTML语言作为一种标识性的语言,由一些特定符号和语法组成,用来制作超文本文档.
在超文本中可以加入图片、声音、动画、视频等内容,并且可以从一个文件跳转到另一个文件.
用HTML编写的超文本文档称为HTML文档,一个HTML文件的扩展名是.
htm或是.
html,它在各种操作系统平台(如UNIX,Windows等)下都能使用.
经过十几年的发展,各个浏览器开发公司都在为HTML加入更多的特征,如框架、样式等.
到现在已经发展到了HTML5.
0版本,扩展了DHTML和XML等子集.
不过目前较为流第1章概论5行的仍然是1999年12月发布的HTML4.
01版本.
下面通过一个简单的例子来认识什么是HTML.
可以用记事本编辑器来编写HTML文件,打开记事本,输入以下代码:送杜少府之任蜀州送杜少府之任蜀州作者:王勃城阙辅三秦,风烟望五津.
与君离别意,同是宦游人.
海内存知己,天涯若比邻.
无为在岐路,儿女共沾巾.
然后将记事本中的代码保存为HTML文件,选择"文件"→"另存为"命令,将文件命名为songbieshi.
html,保存类型为"所有文件",找到并用IE打开刚才保存的文件,IE浏览器会自动显示刚才编辑的HTML文件,浏览结果如图1.
7所示.
图1.
7songbieshi.
html的浏览结果注意:所有文件夹、网页文件名以及网页中所用到的图片、动画、多媒体等网页元素,最好不要用中文和带空格的名称,防止上传到服务器上后不能识别而出错.
观察songbieshi.
html实例的HTML代码可以看到,这个网页文件的第一个符号为,类似的还有、、、、等,这些在HTML文件中用来描述功能的符号称为"标记".
标记是HTML中用来控制文字、图形等显示方式的符号.
标记在使用时必须用尖括号""括起来,标记分单独出现的标记和成对出现的标记两种.
大多数标记都是成对对称出现的,由首标记和尾标记组成.
其中,起始的叫做"首标记",结尾的就叫"尾标记".
每个标记可以有一个或几个控制属性.
网页设计与制作(第二版)61.
4.
2HTML文档的基本结构HTML文档的基本结构如下:网页文档标题网页文档的主体部分标记是文档标识符,它是成对出现的,首标记和尾标记分别位于文档的最前面和最后面,明确地表示文档是以超文本标识语言(HTML)编写的.
该标记不带有任何属性.
事实上,现在所用的浏览器都是自动识别HTML文档的,并不要求有标记的出现,也不对它进行任何处理.
但是,为了提高文档的适用性,还是应该养成用这个标记的习惯.
和之间的内容是文档头部分.
习惯上把HTML文档分为文档头和文档主体两个部分.
文档头用来规定该文档的标题(出现在浏览器窗口的标题栏中)和文档的一些属性,主体部分就是在浏览器窗口中看到的内容.
嵌套在标记中使用的子标记主要有,还可以出现其他子标记,如,等,这些子标记都不是必须的.
标记是成对的,用来规定HTML文档的标题.
在和之间的内容将显示在Web浏览器窗口的标题栏中.
标记用来定义文档主体部分,是网页的主要内容.
在和之间的内容将显示在浏览器窗口内.
在标记中可以规定整个文档的一些基本属性:lbgcolor:指定html文档的背景色.
ltext:指定html文档中文字的颜色.
lbackground:指定html文档的背景颜色或图片.
在指定颜色对象时,可以用该颜色的代码或者对应颜色的英文单词.
例如,指定文档的背景色为绿色,就可以表示为:.
文档主体部分可用颜色如表1.
1所示.
表1.
1颜色列表名称BlackRedLineMaroonGraySilverNavyOlive颜色黑色红色石灰色栗色灰色银白色海军蓝橄榄绿名称PurpleYellowAquaBlueGreenFuchsiaWhiteTeal颜色紫色黄色浅绿色蓝色绿色紫红色白色暗蓝绿1.
4.
3HTML语言的语法规则HTML文档扩展名为.
htm或.
html,由标记(标签)、代码和注释组成.
HTML语法的三种基本表达方式如下所示:对象对象第1章概论7例如,有如下代码:网页其中和分别为首标记和尾标记,用来定义"网页"两个字的属性,标记中有size和color两个属性,分别定义"网页"两个字的大小为"7"(36磅),颜色为"#0000ff"(十六进制RGB颜色代码),属性的值要加西文引号.
HTML语言代码不区分大小写,多数HTML标记可以嵌套,但不能交叉,HTML文件一行可以写多个标记,一个标记也可以分写多行,标记前后和标记属性之间可以添加多个空格、回车和制表符,不用任何续行符.
在HTML文档中可以加入注释,采用的格式为:,其中,注释内容可以换行,Web浏览器不显示注释内容.
1.
4.
4HTML语言的常用标记及其用法HTML是一种标记语言.
下面介绍HTML的几种主要标记.
1.
格式化标记在文字处理中把对文字的大小、外观的处理叫做格式化.
在HTML标记语言中,也有起到格式化作用的标记.
(1)字体和大小的设置.
字体和大小的设置是通过标记和来设置的.
例如,有如下代码:欢迎!
在标记中加入了face和size属性,用来指定字体的名称和大小.
一般来说,size的值可以从1~7,分别代表9、10、12、14、18、24、36磅的字.
该标记的作用是将内容为"欢迎!
"的字体设置为宋体,大小为24磅.
缺省该标记时表示为默认字体和大小.
(2)段落设置与换行.
段的设置标记是和,作用是设置段落.
有如下代码:第一段第二段显示效果如图1.
8所示.
如果将上面的代码改为:第一段第二段再显示,可以看到,代码修改以后,网页的显示与未修改前相比没有变化,这说明在HTML文档中回车是不起换行作用的.
换行的设置标记是或,例如,有以下代码:第一段第二段第一行第二行显示效果如图1.
9所示.
从图中可以看到标记产生的效果同标记产生的效果在间距上是不一样的.
(3)字的效果设置.
可以用HTML标记语言给字体设置一些特殊的效果.
比如下划线的开始和结束标记、粗体字的开始和结束标记、斜体字的开始和结束标记等.
网页设计与制作(第二版)8图1.
8段落设置图1.
9段落设置和换行以下HTML源代码在浏览器中的显示效果如图1.
10所示.
粗体斜体下划线也可以将标记进行嵌套使用,从而同时显示多种效果.
2.
设置链接链接标记的格式如下:跳转到exam2.
htm代码中和指明了该处是一个链接,用属性href表明链接的目标是exam2.
htm文件,链接的载体是"跳转到exam2.
htm".
显示的效果如图1.
11所示,单击"跳转到exam2.
htm"可以打开当前文件夹下的exam2.
htm文件(前提是exam2.
htm存在).
图1.
10字的效果设置图1.
11超级链接链接对象除了可以是HTML文档外,还可以是其他文件类型,例如:点此下载出现的效果是当单击"点此下载"这几个字时,浏览器会弹出下载对话框,让用户下载myfile.
zip文件.
3.
表格表格在网页中有着广泛的应用,它既可以显示数据,又可以用来实现定位显示等布局操作.
将下面的代码用记事本编辑并保存为一个HTML文件后,用浏览器显示,可以看到如图1.
12所示的效果.
table图1.
12表格第1章概论9111221223132标记和定义了一个表格,其中的参数如下:width="30%"height="150"border="4"cellspacing="2"cellpadding="12"设置了表格的宽度(用相对浏览器窗口的百分比来表示)、表格的高度(用像素表示)、边框的宽度、单元格的间距、单元格的边距.
如果调整浏览器窗口的宽度,就会发现表格宽度也会随着调整,这是由于表格的宽度是用百分比定义的.
和表示了表格中一行的开始和结束,而和则表示了一个列的开始和结束.
1112这段代码表示的是一行的两个单元格.
表格标记还可以加入一些常见的属性,如背景色和对齐方式等,标记背景色的语法是bgcolor="颜色代码",其中颜色代码用"#"加上红绿蓝三基色的十六进制代码表示,也可以用颜色的英文单词表示,比如和均表示表格的背景色为蓝色.
也可以单独设置某一行的颜色或某一个单元格的颜色,比如表示这一行为黄色,则表示这个单元格为淡绿色.
应用颜色的优先顺序为单元格、行、表格.
表格的对齐方式由align属性设置,其取值有left、center、right三种,分别表示居左、居中和居右.
例如,有如下代码:table居中的表格网页设计与制作(第二版)10居左的表格居右的表格显示效果如图1.
13所示.
图1.
13表格的对齐方式在很多标记中都可以使用align属性,在中表示段落文字的对齐,在和中表示表格中某一行或某个单元格中文字的对齐.
在网页中表格主要用在文字、图片等内容组织上,网页中的文字和图片等内容往往是放置在一个没有边框的表格内,以达到版面整齐划一的效果.
从上面的介绍中可以看到,如果完全用HTML代码编写网页是一件非常辛苦的事情.
首先是工作量大,每一个细小的地方都要编写,其次需要记忆大量的HTML标记符,另外,还不知道书写的代码在浏览器中显示出来到底是什么效果,必须在浏览器中才可以看到,因此往往需要反复修改、保存、浏览才能达到预想的效果,效率很低.
这样人们开发了很多的工具软件来设计网页.
它们的特点之一就是以所见即所得的方式来编写网页.
Macromedia公司的Dreamweaver是众多可视化网页编辑工具中的佼佼者,据统计,世界上70%的网站都是用它开发的.
1.
5网页、网站和主页进行网页设计和制作之前,首先要知道网页的相关知识,如什么是网页,什么是网站,网页与网站之间的关系等,了解了这些基本知识才能在今后的开发过程中得心应手.
本节将逐一简单介绍网页、网站和主页.
第1章概论111.
5.
1网页网页(WebPage)是WWW的基本文档,是用HTML或者其他语言(如JavaScript、JSP、ASP、PHP等)编写的,能够通过网络传输,并被浏览器翻译成可以显示出来的包含文本、图片、声音、动画等媒体形式的页面文件.
它是网站组成的基本单位,用户可以用浏览器来显示网页和网页之间的交互.
网页按其表现形式可分为静态网页和动态网页.
静态网页是指用HTML制作完成的网页,其扩展名是.
html、.
htm、.
shtml、.
xml等,不包含数据库,没有后台程序.
网页内容固定不变,不能与用户进行交互,但在其页面中也可出现各种动态效果,比如GIF动画、Flash动画、视频和滚动字幕等.
动态网页是指用网页脚本语言ASP.
NET、ASP、JSP、PHP等制作完成的网页,包含数据库,有后台程序.
网页内容随用户访问时间不同而发生变化,能与用户发生交互,比如用户在论坛留言、跟帖等.
1.
5.
2网站网站(WebSite)也称站点,包含多个独立的网页、脚本和数据库等,多个网页按照一定的结构组织在一起就构成一个网站.
从资源管理器的角度来说,网页是一个文件,而网站是一个目录,里面有多个HTML文件和图片、动画、声音等资源文件.
网站一般用于展示某类信息或提供相关的网络服务,比如学校利用网站发布教学信息,提供教学资源和社团活动;政府部门利用网站发布政策新闻;公司利用网站宣传产品或招聘等.
人们通过网页浏览器访问网站,获取需要的信息或者享受某种服务.
1.
5.
3主页主页是用户访问一个网站后看到的第一个页面,通常称为首页.
主页通常显示网站的主题和导航信息,网站中的其他网页用来显示某一方面的详细内容,主页与其他网页通过链接组织起来.
一般情况下,作为网站主页的文件名是index、default或main加上相应的扩展名,例如index.
html、default.
jsp等.
1.
6网页的基本元素构成网页的基本元素有文本、图片、动画、声音、链接、表单等.
1.
文本文本就是网页上的文字信息,文字是网页中最基本的元素,虽然图片及多媒体效果在网页中所占的比重越来越大,但由于文字所占的存储空间非常小,以文字为主体的页面下载速度快,节省网络带宽,所以在网站中,文字的主导地位是无可替代的.
2.
图片现在很难找到一个没有图片的网页,图片是组成网页的基本元素,图像传递的信息比文字更直观,另外,在网页中适当地添加图片可以使网页更美观.
计算机能够显示的图片格式很多,但并不是所有格式的图片都适合放在网页中,其中有些特有格式图片,需要使用专门的应用程序才能显示图片内容,有些格式的图片太大,不适合用于网上传输.
网页设计与制作(第二版)12在Web页面上使用的图片格式主要有GIF、JPG/JPEG、PNG、BMP等,其中使用最为广泛的是GIF、JPEG/JPG和PNG.
3.
动画和声音动画是网页上一个重要的表现形式,网页上适当地使用动画有利于表现内容,使网页更生动.
网页动画是由多幅图片连续放映,利用人类眼睛的视觉暂留特点来形成连续的动画.
由于网络传输带宽的限制,要求动画的体积小,所以网页上的大部分动画看起来略显粗糙.
网页上支持的动画主要有GIF动画和Flash动画,GIF动画是GIF图片格式的小型翻页型动画.
Flash动画的文件大小比GIF动画小,并且是以流的形式播放,可以一边下载一边播放,另一方面,Flash图形是矢量图形,因此用Flash制作的动画看起来比较清晰.
但是因为Flash动画的播放需要Flash插件,因此需要安装Flash插件才可以播放.
声音作为多媒体元素的一种,在网页中应用的相对较少,主要是用于网页背景音乐和音乐站点.
在HTML语言中,原本没有专门的针对声音的标记,在网页上播放声音大部分要靠插件来完成.
由于现在的主流浏览器均支持不同的插件,因此网页中支持的声音格式比较多,比如MP3、WMA、RM、MID、AIF等.
比较常用的声音格式有MID格式(常用作背景音乐)和MP3格式(常用作音乐站点).
4.
链接与其他媒体(报纸、杂志)相比,网页中最值得称道的地方就是可以设置链接.
链接是指建立在同一站点或不同站点中Web页之间的跳转关系,用于引导浏览者转向其感兴趣的页面.
它可以使站点内的网页成为有机的整体,还能使不同站点之间建立联系.
链接由链接载体和链接目标两部分组成.
许多页面元素可以作为链接载体,如文本、图像、图像热区、轮替图像、动画等,而链接目标可以是任意网络资源,如页面、图像、声音、程序、Email甚至是页面中的某个位置——锚点.
5.
表单网页不同于其他媒体的另一个特性是它与浏览者之间的交互功能,表单是网页完成交互功能的重要元素.
它的作用是接收用户在浏览器端输入的数据并传送到服务器端,完成浏览者和服务器之间的交互.
在网络上它一般应用于会员注册、网上调查等需要用户提供信息的地方.
表单是一个容器,表单内一般包含文本框、选择框和提交按钮等内容.
图1.
14所示是一个表单的例子.
图1.
14表单第1章概论13浏览者在表单中输入信息,然后单击"确定"按钮就可以将输入的信息传送到网站服务器中,然后由服务器进行处理,并根据处理结果向浏览器反馈信息.
1.
7网页制作和美化的工具由1.
2节和1.
4节可知,直接用记事本一类的文字编辑器也可以写出网页代码.
但是使用这种方法制作网页要求设计者必须具有较扎实的HTML语言基础,初学者不易掌握.
所以制作网页一般要选用专业的网页制作工具.
另外,在网页中往往还需要使用图片、动画等元素,这些元素也需要相关工具来制作.
下面对常见的工具作一简单介绍.
1.
7.
1网页制作类工具制作网页首先要选定一种网页制作软件.
选择一个好的网页编辑器会令你事半功倍.
下面介绍目前较常用的几种网页制作工具.
1.
DreamweaverDreamweaver是Macromedia公司(Macromedia公司2005年4月被Adobe公司收购)出品的网页制作工具,可以说是当前最流行的网页编辑器.
它支持所见即所得的方式编辑网页,有强大的站点管理功能,便于站点的维护和管理;支持最新的HTML语言的扩展功能;支持层技术,还提供了层动画;内置强大的交互式网页制作功能.
Dreamweaver可以使用户不用深入了解HTML就能制作出非常专业的网页.
2.
FrontPageFrontPage是微软公司开发的网页制作工具.
对Word熟悉的用户使用FrontPage进行网页设计会非常顺手.
它在主要功能上与Dreamweaver差不多,提供了非常丰富的模板,对新手来说是一个不错的选择.
用户可以在它的导航下轻松地完成一个网页的制作,它还提供了对网站的管理等功能.
3.
HotDogHotDog是较早基于代码的网页设计工具,其最具特色的是提供了许多向导工具,能帮助设计者制作页面中的复杂部分,对于那些希望在网页中加入CSS、Java、RealVideo等复杂技术的高级设计者来说是个很好的选择.
当然,要制作出理想的网页,还是要学习一些HTML语言和必要的脚本编程知识,才可以从更高的角度来理解网页的本质,更好地掌握各种网页编辑软件工具.
1.
7.
2图像制作类工具许多图像制作工具软件都能够方便地进行网页图像的制作和处理.
1.
PhotoshopPhotoshop是Adobe公司最著名的图像处理软件,是图像制作的首选工具.
它对图像的处理方式多样,特别是对图像的滤镜处理,可以制作出许多特殊的图像效果.
PhotoshopCS版提供的功能可以轻松对将图像进行切片等操作,使网页使用方便,支持将图像存储为网页支持的GIF、JPEG、PNG等格式.
2.
ImageReadyImageReady也是Adobe公司开发的工具软件.
它提供了网页图形的集成开发环境,是一网页设计与制作(第二版)14个非常优秀的网页图像制作工具.
它的界面和操作都类似于Photoshop,可以用层技术来编辑图像.
用户直接在该软件中就可以完成对图形的优化操作.
它支持将文件输出为JPG、GIF、PNG等图形格式,可以直接制作动画,还可以直接产生HTML代码.
3.
FireworksFireworks是Macromedia公司专门为制作网页图像设计开发的软件.
无论是专业人员还是初学者,都可以用它制作出效果不错的网页图像.
它也有一个集成的网页图像开发环境,具有同时按位图图形和矢量图形的模式进行编辑的特点.
Fireworks也可以制作简单的翻页型动画.
4.
Cool3DCool3D是Ulead(友立)公司出品的一个专门制作文字3D效果的软件,它可以方便地生成具有各种特殊效果的3D文字,并支持输出BMP、JPG、TAG、GIF格式.
Cool3D也可以制作网页上的3D文字动画,它可以把生成的动画保存为GIF和AVI文件格式.
5.
PainterPainter是MetaCreation公司开发的图像制作工具,它除了有常见的铅笔、水粉、蜡笔、油画笔之外,还可以用它的特殊画笔十分容易地画出火焰、霓虹灯、树叶等效果,且画出的图像十分逼真、自然.
1.
7.
3动画制作类工具除了1.
7.
2节中所介绍的ImageReady、Fireworks和Cool3D外,下面这些工具也常用来制作网页中的动画.
1.
FlashFlash是Macromedia公司专门为网页动画设计开发的软件.
用该软件制作的动画采用的"流"控制技术,可以一边下载动画,一边播放,并且设计者可自己决定流的大小,因此,制作的动画在网页中播放时基本看不出时间上的延迟,且下载时间较短.
在Flash中,大量的图形是矢量图形,因此,用Flash制作的图形在放大与缩小的操作中没有失真,而且用它制作的动画文件所占的体积较小,这些都是Flash特有的优点.
另外,Flash也提供了动作属性的功能,通过动作属性可以轻松地完成一些特殊的控制以及进行一些交互处理,不用编写一行代码也可以完成许多精彩的控制效果.
2.
GIFAnimatorGIFAnimator是一套专门的动画制作工具.
它可以同时合成处理几个动画,还可以将视频AVI文件转换成GIF文件,并提供了一些特效处理功能,如立方体特效、走马灯、颜色动画和翻页效果等.
3.
3DStudioMax3DStudioMax是一个功能十分强大的3D图像制作软件.
它也是用关键帧的原理来制作动画的,特别擅长制作各种特技效果,如风晴雨雪、云雾烟火等,其自身还带有非常丰富的材质库.
1.
8网站的设计流程设计一个网站就像设计一个程序一样,要经过整体规划、素材收集、页面设计、调试测试、发布与维护等步骤.
下面简单介绍网站的设计流程和要遵循的一般原则.
第1章概论151.
整体规划在网页设计前,首先要给网站一个准确的定位,是用来宣传自身,还是用来提供商务服务、资讯服务,从而确定主题与设计风格.
确定了主题以后,就要根据希望提供的功能来确定设计网站所使用的技术.
首先要确定Web服务器平台,是采用Windows的IIS,还是Linux的Apache;然后根据网站功能的复杂程度决定是采用静态网站还是动态网站.
对于动态网站,还要考虑使用何种数据库及采用什么技术来支持.
整体规划还包括网站结构的规划,即根据希望提供的信息和功能设计网站的结构,是层次结构、线型结构、还是网状结构.
建设一个规范的网站,从结构设计、页面设计到数据库的集成,每一个环节都非常重要.
2.
网页的设计与制作网站整体规划完成后,就需要利用收集和制作的素材,采用网页制作工具去设计并完成每一个网页的制作.
网页制作过程一般分为网页布局设计和有关内容的添加两个部分.
布局就是以最适合浏览的方式将文字和图片编排在网页的不同位置,使得浏览者的视觉效果与使用效果达到最佳状态.
网页作为一种版面,有文字和图片.
文字有标题与正文之分;图片也有主次之别.
如果将文字和图片简单地罗列到一个页面上,会显得零乱不堪.
因此必须根据内容需求,将文字和图片按照一定的次序合理地编排和布局,使它们组成一个有机整体,展示给浏览者.
布局完成后,就可以在相应位置添加所收集和制作的素材了.
有时还需要为网页添加一些动态效果或实现一些特殊功能的脚本程序等.
3.
测试网页在网页制作过程中和完成以后,需要对网页进行测试,查看所设计网页的实际浏览效果以及有没有错误.
测试网页要尽可能放置在服务器上或者与服务器相同的环境中,应尽量多地使用不同公司、不同版本的Web浏览器进行测试.
测试的项目包括:(1)链接测试.
主要看网页中是否有链接错误的情况.
(2)外观测试.
在不同的浏览器、不同分辨率、不同的系统字体设置情况下网页的外观有无改变,网页中的文字、图片能否正常显示.
(3)速度测试.
浏览者在不同的网速下浏览网页,显示的速度如何,是否可以容忍.
(4)脚本和程序测试.
测试页面中的JavaScript、CGI等程序是否能正常工作,是否存在安全漏洞.
4.
网页的上传、发布与维护网页制作完成后,就可以利用FTP等方式上传到服务器并发布到互联网上了.
网站空间的获取一般有自设服务器、租用网页空间或虚拟主机、申请免费网页空间三种方法.
同时,还可以通过"中国互联网络信息中心"(CNNIC)的域名注册系统申请诸如.
com、.
cn、.
net等域名,详细的申请方式可以到CNNIC网站(http://www.
cnnic.
cn)上查询.
利用域名可以使浏览者更容易记住你的网站.
网页上传以后,还必须保持内容的经常性更新,这样才能不断吸引访问者单击浏览.
同时,还要定期对网站进行维护和备份,以便网站遭到黑客入侵、病毒感染或硬件故障等问题后能及时恢复,保障网站的正常运行.
网页设计与制作(第二版)16本章小结网络是对人类生活影响最大的技术之一.
WWW将网络的应用深入到普通人的生活中.
本章首先简要介绍了计算机网络的基础知识、WWW的工作流程.
其次,介绍了设计网页所使用的语言——HTML.
深入掌握HTML知识有助于制作优秀的网页.
如果要了解更多更详细的HTML知识,可以参阅有关HTML的专门书籍.
再次介绍了与网站相关的基本知识,让学习者了解什么是网页,什么是网站,什么是主页,组成网页的各种元素,制作和美化网页的工具有哪些.
最后介绍了网站开发的整个流程,让学习者有的放矢地设计和制作网站,以满足用户的需求.
习题一一、填空题1.
计算机网络按范围来分,一般可以分为局域网、城域网和_2.
HTML是________语言.
3.
网页按其表现形式可分为________和________两类.
4.
静态网页的扩展名为_和.
xml.
二、选择题1.
WWW是().
A.
万维网B.
超文本标记语言C.
浏览器D.
网页2.
下列哪个不是图片格式().
A.
jpgB.
pngC.
swfD.
bmp3.
网页的基本元素不包括().
A.
文本B.
标记C.
声音D.
动画4.
下列所示标记哪个是换行标记().
A.
B.
C.
D.
5.
DreamweaverCS5软件是哪家公司的().
A.
AdobeB.
MacromediaC.
CorelD.
Autodesk三、简答题1.
网络对你的生活有哪些影响2.
举出你知道的网络的例子,并对其结构进行了解.
3.
设计一个网站,一般的工作步骤有哪些4.
简述因特网上访问一个网站时的工作流程.
5.
静态网页与动态网页的区别是什么6.
网页和网站有什么区别7.
WWW的工作原理是什么第1章概论178.
HTML是什么意思它是一种什么样的语言四、上机题1.
访问几个门户网站,了解一下该网站的结构和提供的内容.
2.
访问中国互联网(网址http://www.
cnnic.
cn),了解现在我国的网络发展情况.
3.
用记事本书写如图l.
15所示效果的一个网页.
要求三个字要居中,前面两个字是粗体,后一个字和惊叹号是斜体.
图1.
15上机题效果示意图4.
用记事本程序制作两个网页,其中一个链接到另一个网页.
5.
在计算机上安装Web服务器.