网页设计基础教程与上机指导网页设计基础

会计学1网页设计基础教程与上机指导网页设计基础教学提示和教学目标 教学提示:要设计出令人满意的网页，不仅要熟练掌握网页设计软件的基本操作，还要掌握网页的一些基本知识和网站建设的基本流程。本章首先介绍网页中的一些基本概念，如什么是网页、什么是网站、什么是域名和空间。本章还介绍网页设计的常用工具，如网页排版软件Dreamweaver8、网页图像设计软件PhotoshopCS2和Fireworks8、网页动画制作软件Flash8，最后简单讲述了网站建设的基本流程。教学目标:熟悉网页设计中的基本概念熟悉网页的基本构成元素了解网页设计的常用工具熟悉网站建设的基本流程第1页/共27页1.1

网页中的基本概念 随着计算机互联网技术的发展,Internet在人们的生活、学习和工作中的位置越来越重要。越来越多的人开始学习网页设计软件,在学习网页设计软件前应当首先了解一些基本概念。1.1.1什么是网页1.1.2什么是网站1.1.3什么是域名和空间第2页/共27页1.1.1

什么是网页息, 网页是Internet的基本信单位,一般网页上都会有文本和图片等信息,而复杂一些的网页上还会有声音、视频、动画等多媒体内容。进入网站看到的是网站的主页主页集成了指向二级页面以及其他网站的链接,浏览者进入主页后可以浏览最近更新的消息,找到感兴趣的主题,通过单击超链接跳转到其他网页或其他网站,如图1.1所示。第3页/共27页1.1.2

什么是网站 网站是有独立域名、独立存放空间的内容集合,这些内容可能是网页,也可能是程序或其他文件,不一定要有很多网页,主要有独立域名和空间,哪怕只有一个页面也可以称为网站。 网站是由域名和网站空间构成。衡量一个网站的性能通常从网站空间大小、网站位置、网站速度、网站软件配置和网站提供的服务等几个方面第考4页/共虑27页。1.1.3

什么是域名和空间从技术角度来看,域名是在Internet上用于解决IP地址对应的一种方法。一个完整的域名由二个或二个以上部分组成,各部分之间用英文的句号“.”来分隔,最后一个“.”的右边部分称为顶级域名,最后一个“.”的左边部分称为二级域名,二级域名的左边部分称为三级域名,以此类推,每一级的域名控制它下一级域名的分配。从商业角度来看,域名是“企业的网上商标”。企业都非常重视自己的商标,而作为网上商标的域名,其重要性和其价值也已被全世界的企业所认识。从树立企业形象的角度看,域名和商标有着潜移默化的联系。所以,域名与商标有一定的共同特点。许多企业在选择域名时,往往希望用和自己企业商标一致的域名。 从域名价值角度来看,域名是互联网上最基础的东西,也是一个稀有的全球资源,无论是做ICP和电子商务,还是在网上开展其他活动,都要从域名开始。 空间就是放置网站文件的计算机的硬盘空间,不是在本地计算机上面,而是在网络服务供应商提供的服务器上,浏览者可以在网络上访问这台计算机上放置的网页文件。第5页/共27页1.2

网页的基本构成元素 网页是构成网站的基本元素。不同性质的网站,其页面元素是不同的。一般网页的基本元素包括LOGO、Banner(网幅图像广告)、导航栏目、文本、图像、Flash动画和多媒体。■1.2.1网站LOGO■1.2.2网站banner■1.2.3导航栏■1.2.4文本■1.2.5图像■1.2.6Flash动画■1.2.7多媒体第6页/共27页1.2.1

网站LOGO 网站LOGO,也叫网站标志,它是一个站点的象征,也是一个站点是否正规的标志之一。一个好的标志可以很好地树立公司形象。网站标志一般放在网站的左上角,访问者一眼就能看到它。成功的网站标志有着独特的形象标识,在网站的推广和宣传中起到事半功倍的效果。网站标志应体现该网站的特色、内容以及其内在的文化内涵和理念。如图1.2所示是新浪网站的标志。第7页/共27页1.2.2

网站banner Banner是一种网络广告形式,是一种以GIF、JPG等格式建立的图像文件,定位在网页中,大多用来表现网络广告内容。Banner广告一般是放在网页的顶部位置,在用户浏览网页信息时,吸引用户关注广告信息。 Banner广告有多种规格,其中最常用的是486×60像素的标准广告。Banner广告有多种不同的形式,如横幅广告、全幅广告、条幅广告、旗帜广告等,通常是以GIF、JPG等格式建立的图像文件或Flash文件,如图1.3所示为某网站Banner。第8页/共27页1.2.3

导航栏 导航栏既是网页设计中的重要部分，又是整个网站设计中的一个较独立的部分。一般来说网站中的导航位置在各个页面中出现的位置是比较固定的，而且风格也较为一致。导航栏的位置对网站的结构与各个页面的整体布局起到举足轻重的作用。 导航栏的位置一般有4种常见的显示位置:在页面的左侧、右侧、顶部和底部。有的在同一个页面中运用了多种导航，如有的在顶部设置了主菜单，而在页面的左侧有设置了折叠式菜单，同时又在页面的底部设置了多种超链接，这样便增强了网站的可访问性。当然并不是导航在页面中出现的次数越多越好，而是要合理地运用页面达到总体的协调一致。图1.4所示为某网页的顶部导航栏。第9页/共27页1.2.4

文本 文字一直是人类最重要的信息载体与交流工具,网页中的文字(除网页图像中的文字)也称为文本,网页中的信息也以文本为主。与图像相比,文字虽然不如图像那样易于吸引浏览者的注意,但却能准确地表达信息的内容和含义。 为了克服文字固有的缺点,人们赋予了网页中文本更多的属性,如字体、字号和颜色等,通过不同格式的区别,突出显示重要的内容。如图1.5所示是一张使用文本的网页。第10页/共27页1.2.5

图像 图像在网页中具有提供信息、展示形象、美化网页、表达个人情趣和风格的作用。可以在网页中使用GIF、JPEG和PNG等多种图像格式,其中使用最广泛的是GIF和JPEG两种格式,如图1.6所示。第11页/共27页1.2.6

Flash动画 随着Internet技术的发展,网页上出现了越来越多的Flash动画。Flash动画已经成为当今网站不可缺少的部分,美观的动画能够为网页增色需要具有,从而吸引更多的浏览者。Flash动画不仅需要对动画制作软件非常熟悉,更重要的是设计者独特的创意。如图1.7所示为网页中的Flash动画。第12页/共27页1.2.7

多媒体 多媒体网页元素中,除了文本、图像和Flash动画外,还有声音、视频等其他媒体。 声音是多媒体网页中的一个重要组成部分,可以将某些声音添加到网页中。在添加声音前,需要考虑的因素包括其用途、格式、文件大小、声音品质及浏览器差别等。不同浏览器对声音文件的处理方法有所不同,彼此之间可能不兼容。用于网络的声音文件格式非常多,常见的有MIDI、WAV、MP3和AIF等。在使用不同格式文件时,需要加以区别。很多浏览器不用插件也可以支持MIDI、WAV和AIF格式的文件,而MP3和RM格式的声音文件则需要用专门的浏览器插件播放。 视频文件的采用使网页变得精彩而富有动感。视频文件的格式也非常多,常见的有RM、MPEG和AVI等。第13页/共27页1.3

网页设计的常用工具 设计网页时,首先要选择网页设计软件。虽然用记事本手工编写源代码也能做出网页,但这需要对编程语言相当了解,并不适合广大的网页设计爱好者。由于目前所见即所得类型的网页设计工具越来越多,使用也越来越方便,所以设计网页已经变成了一件轻松的工作。Flash、Dreamweaver、Photoshop、Fireworks这4个软件相辅相成,是设计网页的首选工具,其中Dreamweaver用来排版并布局网页,Flash用来设计精美的网页动画,Photoshop和Fireworks用来处理网页中的图形图像。1.3.1网页编辑排版软件Dreamweaver1.3.2网页动画制作软件Flash1.3.3网页图像制作软件Photoshop1.3.4网页图像制作软件Fireworks第14页/共27页1.3.1

网页编辑排版软件Dreamweaver Dreamweaver是一种所见即所得的网页编辑工具,能够使网页和数据库关联起来,支持最新的HTML编程语言和CSS技术,用于对Web站点、Web页和Web应用程序进行设计、编码和开发。Dreamweaver8包含一个简洁、高效的界面,且性能也得到了改进。不仅是专业人员制作网页的首选工具,而且普及到广大网页制作爱好者中。第15页/共27页1.3.2

网页动画制作软件Flash Flash是一款功能非常强大的交互式矢量多媒体网页制作工具,能够轻松输出各种各样的动画网页,它不需要特别繁杂的操作,而且它的动画效果、多媒体效果十分出色。如图1.9所示是利用Flash8设计的动画。第16页/共27页1.3.3

网页图像制作软件Photoshop Photoshop是Adobe公司推出的图像处理软件。目前已被广泛应用于平面设计、网页设计和照片处理等领域。随着计算机技术的发展,Photoshop已历经数次版本更新,功能越来越强大。如图1.10所示是利用PhotoshopCS2设计的网页图像。第17页/共27页1.3.4

网页图像制作软件Fireworks多便,8 Fireworks能快速地创建网页图像,随着版本的不断升级,功能的不断加强,Fireworks受到越来越网页图像设计者的欢迎。Fireworks8中文版更是以它方快捷的操作模式,以及在位图编辑、矢量图形处理与GIF动画制作功能上的优秀整合,赢得诸多好评。 使用Fireworks8设计网页图像除了对相应的页面插入图像进行调整处理外,还可以使用图像进行页面的总体布局,然后使用切片导出。也可以使用Fireworks创建图像按钮,以便达到更加精彩的效果,如图1.11所示是使用Fireworks设计的网页按钮。第18页/共27页1.4

网站建设的基本流程 网站建设是一个系统工程,有一定的基本流程,只有遵循该设计步骤,才能设计出满意的网站。因此在建设网站前,先要了解网站建设的基本流程,这样才能制作出更好、更合理的网站。■1.4.1网站整体规划■1.4.2收集资料与素材■1.4.3设计网页图像■1.4.4网页排版布局■1.4.5测试与发布上传■1.4.6后期更新与维护■1.4.7网站的推广第19页/共27页1.4.1

网站整体规划 在网络世界里,充斥着大量的垃圾站点,这些站点缺乏灵魂、主旨松散混乱,原因就在于缺乏网站的整体规划。因此要使网站脱颖而出,就必须对整个站点作好统筹和规划。网站规划主要包括以下方面。1.市场调查阶段2.确定网站规模3.确定网站的类别和特色4.确定网站的目标对象5.确定整个网站的整体风格6.准备投入多少资金、如何经营网站7.根据目标框架整理出站点的内容框架以及逻辑结构图第20页/共27页1.4.2

收集资料与素材 首先新建一个新的总目录（文件夹），如e:\网站素材，来放置建立网站的所有文件，然后再在这个目录下建立两个子目录:“文字资料”和“图片资料”。1.文本内容素材的收集2.艺术内容素材的收集从Internet上获取。从CD-ROM中获取。利用现成图片或自己拍摄。自己动手制作一些特殊效果的图片，特别是动态图像。第21页/共27页1.4.3

设计网页图像 首先需要使用Fireworks或Photoshop设计好网页的整体效果图,再制作精美图像、处理网页中的图像和背景图处理,以及设计好网页中的图标和按钮等。设计网页图像应注意以下原则。 网页设计美术设计要求。网页美术设计一般要与企业整体形象一致,要符合CI规范。要注意网页色彩、图片的应用及版面规划,保持网页的整体一致性。 在新技术的采用上要考虑主要目标访问群体的分布地域、年龄阶层、网络速度、阅读习惯等。制定网页改版计划。如半年到一年时间进行较大规模的改版等。第22页/共27页1.4.4

网页排版布局 网页是通过浏览器所看到的页面,在Dreamweaver中,用户可以方便地、可视化地输入文本和插入其他网页元素,如图像、声音、动画以及媒体对象,以便使网页内容更加充实。 在制作网页前,可以先布局出网页的草图。网页布局的方法有两种。1.纸上布局法2.软件布局法第23页/共27页1.4.5

测试与发布上传网页制作完毕,最后要发布到Web服务器上,才能够让全世界的人浏览,现在上传网页的工具有很多,可以采用Dreamweaver自带的站点管理器上传文件,也可以采用专门的FT