《网站设计教学课件PPT.ppt》由会员分享，可在线阅读，更多相关《网站设计教学课件PPT.ppt（30页珍藏版）》请在三一办公上搜索。
1、网站设计,信息学院孙 俏,概述,客户端与服务器网站与网页页面元素网站设计软件网站设计语言,网络能够做什么,获取信息发布信息共享信息信息：有意义的数据、文字、图片、声音、视频网络未来？,客户端与服务器,客户端Client：享用服务的计算机服务器Server：提供服务的计算机,服务器,客户端,网络,网站和网页,网站和网页,1.网站(website)互联网上用于展示特定内容的相关网页的集合。网站在服务器端，表现为文件夹，各级文件夹中可以包含若干网页。2.网页(web page)网站中的一页，一个网站中的网页通过“超链接”的方式被组织在一起。,网站和网页,3.主页（homepage）进入网站看到的第一
2、个网页，主页的文件名通常是index.htm或者index.html。,选择“文件”“另存为”菜单,在浏览器中选择“文件”菜单中的“另存为”，可将网页保存到磁盘中。,网站和网页,大型网站,一个小型网站可能只包含几个网页，而一个大型网站则可能包含成千上万个网页。,小型网站,网站和网页,网站和网页,网页元素概述,网页元素,Logo 站标,表单,导航栏,文字超链接,图片banner广告横幅动画,站标,站标也叫LOGO，是网站的标志，其作用是使人看见它就能够联想到企业。因此，网站LOGO通常采用企业的LOGO。LOGO通常采用带有企业特色和思想的图案，或是与企业相关的字符或符号及其变形，当然也有很多是
3、图文组合。,导航栏实际上是网站内多个页面的超链接组合。导航栏也是网站中所有重要内容的概括，可以让浏览者在最短时间内了解网站的主要内容。,页面左侧,页面上方,导航栏,如果网站的栏目很多，可以将导航栏分为多排放置在主页LOGO的下方或右侧，为便于观看，可为各排设置不同的底色。,LOGO右侧,LOGO下方,导航栏,如果导航栏内容较多的话，尽量使用文字超链接而不用图片。不过，如果导航栏内容不多，或者网页内容比较活泼的话，多采用图片或Flash制作导航栏。,图片导航栏,Flash导航栏,导航栏,广告条又称Banner，其功能是宣传网站或替其他企业做广告，以赚取广告费。,广告条,注意：Banner可以是静
4、态的也可以是动态的。Banner的体积不宜过大尽量使用GIF格式的图片动画或Flash动画。Banner中的文字不要太多Banner中图片的颜色不要太多,这里的标题栏不是指整个网页的标题栏，而是网页内部各版块的标题栏，是各版块内容的概括。标题栏可以是文字加单元格背景，也可以是图片，一般的大型网站都采用前者，一些内容少的小网站采用后者。,标题栏,标题栏,标题栏,网页中的按钮被点击之后，网页会实现相应的操作，比如页面跳转，或数据的传输等。设计按钮时，要保证按钮与页面的协调，不能太抢眼，如果按钮上有字则尽量使用单色或渐变色背景，保证字迹清晰。当页面上有多个按钮的时候，应分清主次，根据网页的需要改变按
5、钮的颜色或者大小。,表单,按钮,按钮,根据提供服务的方式门户网站,网站分类 1,网站分类 1,办公事务管理网站,网站分类 1,电子商务类网站,根据网站使用的技术分类静态网站：呈现内容不变动态网站：内容可能改变,网站分类 2,网站分类 2,静态网页，动态网页主要根据网页制作的语言来区分：静态网页使用语言：HTML动态网页使用语言、技术：HTMLASP HTMLPHP HTMLJSP它们会随不同客户、不同时间，返回不同的网页,网站设计软件,Dreamweaver：网页制作软件三剑客之一，Macromedia公司Adobe公司可做静态、动态网页,网页设计辅助软件,Fireworks：主要用于制作网页
6、图像、标志、GIF动画、图像按钮与导航栏等。Flash：主要用于制作矢量动画，如广告、网站片头动画、动画短片、MTV等。Photoshop：Adobe公司出品的一个优秀而且强大的图形图像处理软件，起初它的应用领域主要是平面设计而不是网页设计，但是它所具有的强大功能完全涵盖了网页设计所涉及到的各种需求（除了多媒体）。,网站设计软件,网站设计语言,如果网站中包含动态网页，除了需要学习一些常用的网页设计软件外，还应掌握一些常用的网站程序设计语言。,JavaScript和VBScript脚本语言PHP,网站设计语言,paper&infoindexTIOBE开发语言排行榜每月更新一次，依据的指数是基于世界范围内的资深软件工程师和第三方供应商提供，其结果作为当前业内程序开发语言的流行使用程度的有效指标。,网站设计语言,网站设计,
