第1章网页设计与网站开发基础.ppt

第1章网页设计与网站开发基础.ppt

《第1章网页设计与网站开发基础.ppt》由会员分享，可在线阅读，更多相关《第1章网页设计与网站开发基础.ppt（41页珍藏版）》请在冰点文库上搜索。

第1章网页设计与网站开发基础,网页制作基础,本章目录,1.1Internet基础知识1.2网页组成元素1.3网页布局1.4网页配色1.5网站开发流程1.6常用网站开发与网页设计软件及其特性,1.1Internet基础知识,Internet是多个不同的网络通过网络设备互连而成的国际间的大型网络，中文名称为“因特网”。

Internet提供的基本服务主要包括六个方面：

获取信息和发布信息、电子邮件、电子商务、网上交际、网络电话和Internet上的其它应用。

1.1Internet基础知识,Internet起源于1969年，美国国防部研究计划管理局建立的一个名为ARPANET的网络。

1985年，美国国家科学基金会利用ARPANET的技术和协议，开始建立NSFNET，用于支持科研和教育，并以此为基础，实现同其它网络的连接。

20世纪90年代初，商业网络和商业公司开始进入Internet，使Internet迅速普及和发展起来，同时也使Internet能够为用户提供更多的服务。

现在的Internet已不仅仅单纯是为科研或军事服务，而是逐步进入日常生活的各个领域。

1.1.1Internet历史,1.1Internet基础知识,在Internet上连接的所有计算机，为了实现相互间的通信，每台计算机必须有一个唯一的网络地址，在传输数据时才不至于出现混乱。

这个能够唯一标识计算机的网络地址，称为IP地址。

IP地址由32个二进制数表示，共分为四组，用点分开，每组八个二进制位。

通常以用点分开的四个十进制数表示，例如202.115.222.14。

IP地址能够唯一地标识出计算机所在的网络和网络中位置的编号，而对网络以及其中的计算机，则要根据IP地址的分类来确定。

1.1.2IP地址和域名,1.1Internet基础知识,按照网络规模的大小，一般将其分为三类。

A类：

0.0.0.0127.255.255.255B类：

128.0.0.0191.255.255.255C类：

192.0.0.0223.255.255.255IP地址全部由数字组成，为了方便记忆，Internet引入了域名系统。

简单说，域名就是Internet上计算机的名字，实际和IP地址是一样的。

例如IP地址211.82.168.8用域名可以表示为。

域名采用层次结构，按地理域或机构域进行分层，书写中用点号将各个层次隔开，自左至右分别为：

计算机名.网络名.机构名.最高域名。

按照Internet的组织模式，域名有两种分类方法：

一种是按机构进行分类，见表1-1所示。

另一种是按国家和地区进行分类，例如cn（中国）、us（美国）、jp（日本）、hk（中国香港）等。

1.1.2IP地址和域名,1.1Internet基础知识,1.1.2IP地址和域名,表1-1机构域名表,1.1Internet基础知识,统一资源定位地址是一种通用的地址格式，用于对Internet上的众多资源进行标识，当用户查询信息资源时，只要给出URL地址，便可以找到网络资源的位置。

URL地址的格式为：

通信协议：

/Web服务器地址/文件在服务器中的路径/文件名。

例如：

http:

/www.ncsa.uiuc.edu/SDG/Software/Homepage.html其中http是WWW服务器与客户之间遵循的通信协议；www.ncsa.uiuc.edu是Web服务器地址，即域名；/SDG/Software/是文件在服务器上的路径；Homepage.html是文件名。

1.1.3统一资源定位地址（URL）,1.1Internet基础知识,万维网也叫WWW，是WorldWideWeb的缩写，是Internet上提供的一种信息查询服务。

浏览WWW必须通过浏览器来完成。

浏览器是用来访问Internet的基于超文本技术，是使用最广泛的网络软件，它可以提供包括WWW的浏览、搜索、网络资讯的打印和收发E-mail的功能。

在浏览器中，比较有代表性的是InternetExplorer、Navigator和MSNExplorer浏览器。

1.1.4万维网和浏览器,1.1Internet基础知识,WWW采用的是服务器/客户机交互方式。

服务器主要对各种信息按超媒体方式进行组织，并以文件方式存储于服务器中。

当客户提出访问请求时，服务器负责向用户发送文件，客户机接收到该文件后进行解释，并将内容显示在用户的计算机上。

1.1.5服务器与客户端,1.2网页组成元素,按照网页元素的作用划分，网页中一般包括网页标题、网站LOGO、页眉、导航栏、内容版块和页脚等元素。

网站LOGO,页眉,导航栏,页脚,内容版块,1.2网页组成元素,每个网页都有一个标题，用于标识网页，指示网页的主要内容。

网页标题显示在浏览器窗口的标题栏中。

在设计网页时，网页制作软件一般自动为网页文件指定“未命名”作为网页的默认标题。

在设计网页时，应养成给网页指定标题的习惯，使浏览者看到标题就能了解网页的大体内容。

1.网页标题,1.2网页组成元素,LOGO是一个网站的标志，一看到它就使人联想到企业。

所以企业的标志或者注册商标通常被用来当作网站LOGO。

一个好的LOGO可以给浏览者留下深刻的印象，有助于网站的宣传和推广。

LOGO通常采用带有企业特色和思想的图案，或是与企业相关的字符、符号及其变形。

2.网站LOGO,1.2网页组成元素,页眉指的是页面上端的部分，通常位于水平导航栏上面。

有的页面划分比较明显，有的页面没有明确的区分或者没有页眉。

页眉的注意力值较高，大多数网站制作者在此设置网站宗旨、宣传口号、广告语等，有的则把它设计成广告位出租。

页眉的设计风格应与页面的整体风格协调一致。

3.页眉,1.2网页组成元素,导航栏是网页的重要组成部分,是网站内多个页面的超链接组合。

它的作用是引导浏览者快速的找到网站中的各个页面，使浏览者尽情浏览页面不致迷失方向。

一般来说，导航栏的形式多种多样，可以是文字、图片或者下拉菜单。

4.导航栏,1.2网页组成元素,内容版块是页面设计的主体元素。

它一般是二级连接内容的标题，或者内容摘要。

表现手法采用文字、图象或动画相结合。

布局通常按内容的分类进行分栏安排。

页面的注意力值一般是按照从上到下、从左到右的顺序排列，所以重要的内容一般安排在页面的左上方，次要的内容安排在右下方。

页面内容是否丰富是吸引浏览者的重要指标，而内容版块安排是否合理，是否能够体现网站丰富的内容则直接决定网站的点击率。

5.内容版块,1.2网页组成元素,页脚是页面的底端部分，通常用来放置版权信息、联系方式等基本信息。

个别网站也会把导航栏、友情链接放在页脚位置。

6.页脚,1.3网页布局,网页布局大致可分为国字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、Flash型、变化型等类型。

1.国字型,由同字型演化而来，多适用于大型网站。

其布局为，网站标题及横幅广告条位于最上方，其次是网站主要内容，共分3列，中间是主要部分，左右分列两栏内容，最下方是网站的一些基本信息如联系方式、版权声明等。

这种结构是网上最常见的一种结构类型。

1.3网页布局,1.3网页布局,与国字型非常相近，形式上略有区别，最上方是网站标题及广告横幅，其次是网站主要内容，共分2列，左列是一窄列链接，通常为导航栏，右列是正文，最下方也是网站的一些基本信息。

2.拐角型,1.3网页布局,1.3网页布局,最上方是标题或其它内容，下面是正文，常见的文章页面和注册页面就采用这种类型。

3.标题正文型,1.3网页布局,1.3网页布局,这是一种左右分别两页的框架结构，一般左面是导航链接，有时最上面会有一个小标题或标志，右面是正文。

我们见到的大部分的大型论坛都是这种结构。

此类型结构清晰、一目了然。

4.左右框架型,1.3网页布局,1.3网页布局,与左右框架型类似，区别仅在于它是一种上下分为两页的框架结构。

5.上下框架型,是左右框架和上下框架两种结构的结合，此类型结构相对复杂，较为常见的类似于“拐角型”结构，只是采用了框架结构。

6.综合框架型,这种类型通常出现在网站首页，一般表现为精美的平面设计加小动画，再放上几个简单的链接。

7.封面型,1.3网页布局,1.3网页布局,与封面型结构类似，只是这种类型采用Flash做封面，与其相比，Flash型页面所表达的信息更丰富，视觉效果及听觉效果不亚于传统多媒体。

8.Flash型,即上面几种类型的结合与变化，比如页面在视觉上接近拐角型，但所实现的功能体现了上、左、右结构的综合框架型。

9.变化型,1.4网页配色,色彩在网页制作中占有极其重要的地位，成功的配色可以使人加深对网站的记忆。

下面仅介绍一些色彩所表示的性格特征。

红色：

代表热情、热闹、活泼、激烈、温暖、幸福、吉祥。

橙色：

代表温馨、活泼、热闹、丰收、朴实。

黄色：

代表高傲、敏感、希望、威严。

绿色：

代表和平、安逸、希望、环保、清新、洁净。

青色：

代表青春、希望、坚强、庄重。

蓝色：

代表高贵、自由、静谧、理智、清冷。

紫色：

代表高贵、忧郁、神秘、深沉、成熟、浪漫。

黑色：

代表崇高、神秘、静寂、严肃、稳定。

灰色：

代表忧郁、消极、平凡、沉默、中庸。

白色：

代表高雅、清纯、纯洁、神圣、朴素、明快。

1.5网站开发流程,一般而言，网站开发流程分为八个步骤。

1.5网站开发流程,网站设计中，主题是否明确、内容是否全面、规划是否合理，都将直接影响网站访问量。

因此在创建网站时，首先考虑网站要表现什么内容，会提供哪些服务，在此基础上确立网站受众。

例如建立电子商务网站，它所表现的内容是各类商品信息，主要提供商品交易服务，受众是广大消费者；而设计一个个人主页，主题就是自己最感兴趣的内容，并做深、做透，能体现自身特色，与其他兴趣相投者产生共鸣。

1.5.1确定网站主题,1.5网站开发流程,网站规划就是将网站内容按照一定的结构层次和链接关系划分成若干栏目，方便观众浏览。

这一步的工作通常是先画出网站结构图。

再根据该图在本地硬盘创建网站文件夹。

在网站文件夹中创建栏目文件夹，栏目文件夹中创建二级文件夹这样逐级创建、逐级细分，当网站规模扩大时，管理难度却没有增加。

同时，网站规划还包含栏目设置、风格设计、颜色搭配、版面布局、文字图片的运用等。

1.5.2网站规划,1.5网站开发流程,1.5网站开发流程,一旦确定了网站内容，就可以为创建网站搜集所需材料了。

这些材料包括文本、图片、音频、视频、动画等，可以通过图书、报刊、网络、自己制作等途径获取，并注意其真实性、有效性、合法性。

广泛搜集后，应将所有材料认真筛选，去粗取精，去伪存真，分门别类放到网站文件夹中，方便使用。

1.5.3搜集材料,1.5网站开发流程,尽管选择什么样的工具并不会影响你网页设计的好坏，但是一款功能强大、使用简单的软件往往可以起到事半功倍的效果。

网页制作涉及的工具较多，就网页制作工具而言，目前大多数网民选用的都是所见即所得的编辑工具，这其中的优秀者当然是Dreamweaver和Frontpage了。

除此之外，还有图片编辑工具，如Photoshop、Firworks等；动画制作工具，如Flash、Cool3d、GifAnimator等；网页特效工具，如有声有色等。

网上有许多这方面的软件，你可以根据需要灵活运用。

1.5.4选择制作工具,1.5网站开发流程,制作网页就是按照网站结构图，利用Dreamweaver等网页设计软件将搜集到的材料进行整合的过程。

1.5.5制作网页,1.5网站开发流程,网站测试包括基本测试，如网页色彩的搭配，链接的正确性，CSS应用的统一性等；技术测试，如网站的安全性、稳定性，系统可能存在的漏洞，数据库测试等。

测试方式可以采用自己测试即将本地机做成服务器，看是否可以正常运行，找第三方进行测试以及使用专门的测试软件进行测试相结合的方式。

通过测试，便可以发布网站即将网站上传到服务器。

此过程可以分为两种方式：

web方式，向提供空间的服务商进行申请，成功后登陆其主页，进入web上传页，然后按照提示进行操作；FTP方式，利用专门的FTP软件或Dreamweaver等工具，输入申请获得的FTP主机地址、域名和密码，然后进行上传。

1.5.6测试和发布网站,1.5网站开发流程,网站开通后，要想扩大知名度，提高点击率，就要对网站进行推广宣传。

大致可以分为以下几种方式：

1、电子邮件推广2、注册到搜索引擎3、借助同类网站发布留言4、加入友情链接联盟5、传统媒体推广,1.5.7网站推广,1.5网站开发流程,没有哪一个网站一经做好就不再变动了，随着网站运行所出现的问题，内容的更新，我们必须要经常维护更新网站，保持内容的新鲜，只有这样，才能弥补网站存在的缺陷，吸引住浏览者的目光。

1.5.8网站维护和更新,1.6常用网站开发与网页设计软件及其特性,目前常见的网站开发与网页设计软件主要包括Office组件中的Frontpage以及Macromedia公司推出的网页三剑客。

Frontpage是微软公司开发的专门用来进行网站开发与网页设计的软件。

使用Frontpage制作网页，操作简单且功能强大，非常适合初学者使用。

Frontpage的页面制作由Editor即可完成，其工作窗口包括编辑页、HTML代码编辑页、预览页3个标签。

Frontpage带有图形和GIF动画编辑器，支持CGI和CSS。

除此之外，FrontPage具有优越的站点管理功能。

在更新服务器上的站点时，不需要创建更改文件的目录，FrontPage会自动跟踪文件并拷贝新版本文件。

美中不足的是，FrontPage具有制作出的网页兼容性不好，垃圾代码较多，不支持flash等缺点。

FrontPage,1.6常用网站开发与网页设计软件及其特性,网页三剑客由Macromedia公司推出，包括DreamWeaver、Flash、Firworks。

其中，Dreamweaver主要用来制作网页文件，它提供了可视化编辑、HTML代码编辑两种界面，并支持ActiveX、javascript、Java、Flash和ShockWave。

不仅如此，Dreamweaver还允许将站点管理和网页设计结合起来，高效快捷地构建网站，并能保持本地站点和服务器站点之间文件版本的同步。

Flash主要进行动画制作，用来为网页提供广告、片头动画、动画短片等，具有制作简单、交互性强等特点。

Fireworks主要进行图形编辑，利用它可以为网页提供GIF动画、动态按钮、动态翻转图、导航栏等元素。

这三个软件相辅相承，是目前制作网页的最佳选择。

网页三剑客,