网页设计-1(2012-5-14).ppt

网页设计与网站建设入门,本章要点,常见的网站类型网络、WEB、网页的基本知识网站建设的一般流程,1.1常见的网站类型,1.1.1个人网站,视觉QQ空间,个人博客,个人书画艺术展示网站,1.1.2企业类网站,1.1.3机构类网站,1.1.4娱乐休闲网站,电影网,音乐网,游戏网,视频网,交友网,1.1.5行业信息类网站,1.1.6购物类网站,1.1.7门户类网站,1Internet的概念Internet即互联网，也叫因特网，是一个由各种不同类型和规模、独立运行和管理的计算机网络组成的全球性的大网络，通过TCP/IP协议，可以让不同厂商、不同操作系统、不同型号的计算机交换信息，以实现全球Internet上各种计算机间共享资源。,1.2网络、WEB、网页的基本知识,2TCP/IP协议世界上有各种不同类型的计算机，也有不同的操作系统，要想让这些装有不同操作系统的不同类型的计算机互相通信，就必须有统一的约定，这个约定就是“协议”。TCP/IP就是目前互联网广泛采用的协议。,TCP/IP（TransportationControlPrototcol/InternetPrototcol，传输控制协议/网际协议）是为广域网设计的通信协议。TCP/IP协议采用将信息打包的方法来实现不同类型计算机之间的通信传输，从而提供高速的通信连接。,1.2网络、WEB、网页的基本知识,3IP地址和域名Internet上的每台计算机在通信之前必须指定一个地址，通过这个地址，才能确保数据的传输。这个地址就是IP地址。任何一台链接在Internet上的计算机都有一个如同我们身份证号一样唯一的号码地址，根据这个地址可以辨别各个不同的计算机。,1.2网络、WEB、网页的基本知识,IP地址难记又不易理解，所以网络设计者们采用一组简单的英文表示连入网络的计算机，即域名（Domain），用以替代复杂的IP地址。这样，人们就能比较容易地记住Internet上的各台计算机地址了。,1.2网络、WEB、网页的基本知识,IP地址难记不易理解，网络设计者采用一组简单的英文表示连入网络的计算机，即域名（Domain），用以替代复杂的IP地址。这样就能比较容易地记住Internet上的各台计算机地址了。域名一般格式为：主机名.机构名.地区名（网络名）.最高层域名例如：新浪网的域名为。,1.2网络、WEB、网页的基本知识,4URL及http协议URL（UniformResourceLocator），称作统一资源定位器，用来指出某项信息的所在位置以及存取方式。用户只要在浏览器地址栏中输入URL的格式内容，便可以得到它指定的主机的相关文件。简单地说，URL就是WWW服务器主机的地址，也叫做网址。,1.2网络、WEB、网页的基本知识,1.1.2Web浏览器1WEBWeb（WordWideWeb，简称Web或WWW、万维网），是建立在Internet上的多媒体集合信息系统，是由文档和文档之间的超级链接构成的庞大的信息网。使用浏览器（如InternetExplorer）就可以利用超级链接欣赏到网络上的相关文字、声音或图片等。,WWW的信息组织形式:超文本和超媒体超文本（Hypertext）:通过链接关系，形成复杂的网状方式来组织信息形式，就称为超文本。超媒体（Hypermedia）:多种媒体类型的信息媒体,如文本、图像、动画、声音或影像等,称为超媒体。,网页,超文本文件,超媒体,首页,1.2网络、WEB、网页的基本知识,2Web浏览器浏览器指的就是安装在客户端，用来查看万维网中的超文本的一种工具。通过它可以方便地使用Internet上提供的电子邮件、文件传输（FTP）、网络新闻组（NetNews）、电子公告栏（BBS）等服务资源。,IE,世界之窗,火狐,遨游,谷歌,safar,TT,1.2网络、WEB、网页的基本知识,3Web服务器上网时浏览的网页，是某一个网站内容的一部分，而该网站保存在某一台Web服务器上。所以，Web服务器实际上就是一台存放有网页文档的计算机，它上面运行着一个WWWServer的服务程序，这个程序是专门处理网页资料和接受客户请求用的。,1.2网络、WEB、网页的基本知识,常见的服务器软件如下：支持ASP（ASP.NET）的服务器（在Windows平台下运行），如IIS（InternetInformationServer）、PWS（PersonalWebServer）；支持PHP的服务器（在UNIX及Windows平台下运行），如Apache；支持JSP的服务器（可在多种平台下运行），如JSWDK（JavaServerWebDevelopmentKit）等。,网页(WebPage)是通过WWW发布的包含有文本、图片、声音和动画等多媒体信息的页面。它是一个文本文件，其扩展名通常为.htm或html。,1.2.3了解网页的基本知识,网页一般可分为以下两种：静态网页：该网页文件中不含程序代码，只有HTML标记，一经生成，内容就不会再变化。常利用网页制作软件:如FrontPage、Dreamweaver等方便地生成。,1.1.3了解网页的基本知识,frontpage,Dreamweaver,静态网页,动态网页：该网页文件不仅含有HTML标记，而且含有程序代码。动态网页能够根据不同的时间、不同的来访者而显示不同的内容。常通过ASP、PHP、JSP、ASP.NET等语言进行编程实现。,1.2.3了解网页的基本知识,动态网页,动态网页,具体来说，网页的主要组成元素包括以下几种：文本：文本是网页中最基本的元素之一。图片：图片中含有大量的图片会增强网页的可欣赏性，但同时也会影响网页的传输速度。,文本,图片,超文本：超文本（Hypertext）从表现形式上基本与一般的文字没有差别，并都可用文本编辑器来生成和修改，但它可以实现不同页面以及不同内容之间的跳转。,超级链接：超链接是一种允许同其他网页或站点之间进行连接的元素。表格：网页中表格不仅可以显示分门别类的数据，而且更多用在网页布局的控制上。合理地利用表格可以实现整齐协调的布局效果。,2网页分类(1)网页根据页面内容可以分为首页、主页、内容网页等。首页：在访问一个网站时首先看到的网页，一般称为该网站的首页。有的网站的首页只具有欢迎访问者的作用，单击页面上的超链接文字、图片等元素，或经过一定时间，便会自动进入网站主页。,首页,超链接文字,作者,1.2网络、WEB、网页的基本知识,主页：一个网站最重要的部分就是主页。主页与首页的区别是，主页设有网站的导航栏，是所有站点网页的链接中心。大多数网站的首页与主页通常合并为一个页面，即省略首页直接显示主页。主页一般命名位index.html，index.htm，index.asp，default.html，default.htm等的文件名。,导航栏,主页：网页的链接中心,内容网页：是对网站所传达信息的具体体现，位于网站链接结构的终端。,内容网页,1.3网站设计与规划,1.3.1网站的基本概念网页设计单个网页为基本单元进行编写的。单个的网页总是按一定的规则被组合起来，形成一个有机的组合体，即站点。站点首先在本地计算机的磁盘上创建，称为本地站点。本地站点创建完成以后，可以借助于工具软件，将本地站点上传到Internet上的服务器中，创建远程的站点，即网站。,1.2网站设计与规划,网页,站点,本地站点,网站,1.3网站设计与规划,1.3.2网站的目标定位目标定位，定位准确、目标鲜明定位要小，内容要精，从而突出个性和特色。题材应该是自己擅长或者喜爱的内容，不要选择到处可见、人人都有的题材，也不要选择已经存在非常优秀、知名度很高的站点的题材，因为如果是这样，那你想要超越它是很困难的。,1.2.3网站的风格网站的风格是指网站的整体形象给浏览者的综合感受。网站的“整体形象”包括站点的专业特性、版面布局、交互性、文字和信息价值等诸多因素。由于风格是多种因素的交互作用，因此也就形成了创作风格上的千差万别。,新闻网,CG教学网,购物网,精品课程网,1.2网站设计与规划,网站的风格其实也体现网页设计者的艺术素养和气质，网页设计者多方面的艺术素养，包括艺术鉴赏力和艺术地感受生活、捕捉形象和细节的能力以及艺术表现的能力等因素，都会从各自的角度影响风格的形成。一个有风格的网站在保证内容的质量和价值性的前提下，应找出网站中最有特点、最能体现网站风格的信息，以它作为网站的特色加以重点强化、宣传。例如：网站名称、域名和栏目是否符合这种个性特点，是否好记，网站的基准色彩是否能突出网站风格等。,1.3网站设计与规划,1.3.4网站的创意创意(idea)是网站生存的关键之一。一个好的网站创意，可以得到浏览者对网站的肯定和认可，目的是更好的宣传推广网站。所以，创意既要新颖又要符合实际。那么，创意到底是什么，如何产生创意呢？,1.3网站设计与规划,1创意是传达信息的一种特别方式比如新浪网将其中的字母“i”变化成一只睁大的眼睛，这其实就是一种创意！创意并不是天才者的灵感，而是思考的结果。根据美国广告学教授詹姆斯的研究，创意思考的过程分五阶段：,1.3网站设计与规划,准备期-研究搜集的资料，根据旧经验，启发新创意；孵化期-将资料咀嚼消化，使意识自由发展，任意结合；启示期-意识发展并结合，产生创意；验证期-将产生的创意讨论修正；形成期-设计制作网页，将创意具体化。,1.3网站设计与规划,2创意是将现有的要素重新组合创意是一种组合，是新元素的组合，也可以是旧元素组合成新的元素；元素是有限的，但创意是无限的。比如，网络与电话结合，产生IP电话；网络与现实结合，产生网上书店、网上银行等。创意无处不在，留意身边的每一幅图片，每一个细节，不断地积累素材，素材越丰富越容易产生创意。就好比万花筒，筒内的玻璃片越多，所呈现的图案越多。3创意思考的途径最常用的是联想创意是运动的，灵活的，不拘泥于传统的，所以我们可以在现实物质基础上展开丰富的联想，产生我们想要的创意。,1.3网站设计与规划,1.3.5网站设计的基本原则网页设计应从用户的角度考虑问题，遵循一定的通用原则，按计划实施：1目的性和用户需求原则2网页设计中合理运用色彩的原则3页面的版式设计应体现和谐与美的原则,1.3网站设计与规划,1.3.6网站目录结构的规划网站的目录结构规划是将网站上所有的文件组织成合理的文件目录结构，所以规划网站的目录结构时，通常遵循一定的规则：1按栏目内容分别建立子文件夹。2资源按类存放在不同的文件夹中。3文件夹的层次不要太深，以免系统维护时查找麻烦。4避免用中文命名文件或文件夹，并且不要使用过长的文件名。5命名应尽量有明显的意义。,1.3网站设计与规划,1.3.7网站的设计流程建设Web网站的流程大致可以分成3个阶段。1前期规划阶段建设网站的前期规划阶段包括确定网站的主题、网站创意及策划、搜集整理资料和规划网站结构。（1）确定网站的主题。（2）接下来根据需要搜集整理内容信息。（3）规划网站结构。,1.3网站设计与规划,2实