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