网站设计教学课件PPT.pptVIP

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