网页设计ppt下载

网页设计ppt免费下载是由PPT宝藏（）会员野马踏风来上传推荐的行业PPT模版, 更新时间为2018-06-13，素材编号291698。

这是网站设计ppt，包括了网页设计的几个基本概念，网站基础，网站设计，网页规划和方法，了解常用网站制作软件和网页编程语言，前几界学生作品的正反面实例分析等内容，欢迎点击下载。

第1章 网页设计基础

教学目的跟要求:

掌握Web站点的有关概念、术语以及基本工作原理，掌握网站的命名规则和文件、文件夹的命名规范、网站页面布局格式与完善及网页修饰与创意原则，了解网站建设的基本步骤和常见软件和编程语言，能够进行网站需求分析，了解网站的业务背景，能按照网站业务背景的不同确定网站功能，并无法按照网站内容进行页面规划和构架布局。

第1章 网页设计基础

主要内容:

网页设计的几个基本概念

网站基础

网站设计

网页规划和流程

了解常用网站制作软件和网页编程语言

前几界学生作品的正反面实例分析

1.1 网页设计的几个基本概念

1、什么是网页？

一个网页是存储在某与互联网相连计算机中的一个文件，通过网址（URL）来识别和存取。在浏览器中键入网页网址，通过浏览器解释网站文件，用户就可以浏览该网站。

2、网页的分类

通常网站文件以htm 、html、asp、aspx 、PHP、JSP等为扩展名。不同的扩展名分别代表不同类型的网站文件。

按表现形式可分为静态网页和动态网站。

静态网页与动态网页

静态网站：指网页显示后（或显示之后），浏览器与服务器不再发生信息的交互。无法做进行查询、留言、聊天、电子商务等操作，并不是不动的网页，如FLASH动画。

动态网站指浏览器端跟服务器端可以进行信息交流的网站，即服务器可以按照浏览者的请求作出相应动作跟回复。常见的动态网站类别有ASP、ASPX、PHP和CGI之类，其中以ASP动态网页技术较成熟且易学。

网站与网页

3、什么是网站

网站是互联网上一块固定的面向全世界发布消息的地方。它由域名（即网站地址）和网站空间构成。

可以将网站喻为一个摊位或地盘。如果一个企业上了互联网，表示处于了世界上最大的行业，此时也只不过是一个看客；而即使企业确立了自已的网站，它就在行业中拥有了一个“摊位”，可以宣传跟展示自已产品。

4、网站与网页的关系

网站是网页、图片等文件的集合体，是网站通过超级链接的方式组成的。

5、网站的逻辑结构

1．服务器部分——包括计算机软件、操作系统、

WWW程序、电子邮件程序等。

2．网络接入部分和网络安全平台——包括 路由

器、调制设备和网络安全平台 。

3．数据存储部分和中间件——数据存贮存系统要

有海量存储能力，高速搜索能力，有效的数据采

集、制作跟发布能力。中间件介于服务器系统和

数据存贮系统之间。

4．研发和维护部分 ——此部分贯穿于网站从构建

到消亡的全过程，需要专人负责。

1.2 网站基础

从网站功能考量，网站平台可以界定为下面方向：

1．辅助政府部门进行国家管控。

2．为新闻和宣传提供平台。

3．为商业活动提供交易系统。

4．为科研和学术交流服务。

5．没有任何商业目标的公益性网站跟个人爱好网站。

1.2 网站基础

网站的类型非常繁杂，从信息流转和提供服务的方法出发，可以分为以下几类：

1．门户类网站

2．信息公布类网站

3．电子商务类网站

4．资源服务类网站

5．娱乐游戏类网站

6．远程教育和医疗诊断类网站

等等

1.2 网站基础

准确的形象定位对于改善网站的点击率至关重要。网站形象是指它主要注重的内容跟功能。

人们感兴趣的网站内容一般有：

（1）新闻（包括时事新闻、体育新闻、财经新闻、娱乐新闻等）。（2）求职、招聘、交友、征婚信息。

（3）计算机工具和软件信息。（4）科教医疗信息。

（5）金融证券信息。（6）商贸信息和各种广告。

（7）休闲、旅行、娱乐信息。

（8）电子书籍和影视。

——定位网站的形象

人们感兴趣的网站功能一般有：

（1）搜索引擎和信息查询。

（2）电子邮件和免费电子信箱。

（3）免费个人主页空间。

（4）软件的上传与下载。

（5）网上聊天室、新闻组、BBS、发送邮件。

（6）实时股票信息和网上股票交易服务。

（7）网上游戏娱乐。

（8）网上商务活动、网上购物、网上结算。

等等

1.2 网站基础

网站费用包括建站费用和运作成本：

1．域名费用——域名分级别，不同级别收费不同。

2．服务器硬件设施成本——一个网站的硬件至少

包括计算机和网路接入设备，这笔费用要按照网

站规模而定，不必过于铺张。

3．系统工具费用和研发维护成本

4．网站的行业推销成本跟经营开支——要增加自

己的行业份额，应重视宣传并增加服务品质。

1.2 网站基础

1.2 网站设计基础——申请域名

域名是网页在因特网上的门牌号码，也能看作网站在因特网上的商标。域名的命名基于IP地址层次化的命名方法，可由26个英文字母、10个阿拉伯数字、减号和破折号组成，用色块分隔成几节，字母不区别大小写。域名应选用简短、有含义、容易记的词组。域名有惟一性。域名可以进行交易，买卖或过户。

域名分级别，从右向左依次为最高级（也称顶级）、次高级等，最前面为主机名。基本结构为：

计算机主机名.机构名.网络名.最高层域名

顶级域名有2类：机构域跟地理域。机构性域名由三个字母构成，地理性域名由两个字母组成。

1.2 网站基础

1．专线接入 —花费较大但优势显著，提供的服务内容多。

2．服务器托管——将Web服务器由其它网络公司托管，费用比第一种接入方法低得多，但必须远程维护，技术规定高。

3．虚拟主机 ——租用这些ISP的剩余磁盘空间，这些空间通常允许个人网站免费使用，节省了订购服务器的成本，但必须远程管理网页课件模板，受到的限制也非常多。

1.2 网站基础

选择服务器要综合考量各方面因素，如：价格、性能、安全性、可扩展性。

1．单从价格出发，应首先考量PC服务器，PC服务器又分工作组级、部门级和企业级三档，价格各不相同，可依照网站规模确定使用某种级别的PC服务器。

2．单从性能与安全出发，Unix服务器占有一定优势，是顶级平台的优选。

3．如果选择PC服务器，操作系统一般为：Windows NT或Windows 2000或Linux。如果选择小型机为服务器设备，一般使用Unix为平台。

大网络通常使用Unix，小网络使用Windows

1.3 网站设计——定位网站的主题

1.3 网站设计——定位网站的名称

网站标志（ Logo ）

1.3 网站设计——定位网站的CI形象

网页颜色搭配注意点

1、不要将所有颜色都用到，尽量控制在3种色彩以内。背景色不要太过复杂，以免降低网页开启的速度，建议主页的颜色采用要表现在站点标识、导航栏、按钮、边框，非正文文字上。

2、背景跟前文的对比要尽量大，绝对不要用圆形繁复的花纹作背景。

3 .色彩的配色考虑不是单纯的色调采用，还要考量很多原因， 如：社会背景、心理需求、访问者类别等等。

2、设定一个最近更新或网站指南栏目。为照顾常来的访客，设置“最近更新”栏目，更有人性化。若主页内容庞大（超过15MB），层次增多，又没设定站内的搜索引擎，则更有必要修改“本站指南”栏目。

3、设定一个可以双向交流的栏目，例如，论坛，留言本、邮件列表等，让浏览者留下他们的信息。调查证实，设置双向交流栏目的站点比简单地留一个“Email me“的站点最具有亲和力。

4、设立一个下载栏目或常见问题提问栏目。

5、对于辅助内容，例如，网站介绍、版权信息等不必放在主栏目里，以免冲淡主题。

1.3 网站设计——确定网站的栏目和版块

“T”型布局

1.3 网站设计——版面布局

“同”、“国”字型结构布局(Π型结构布局)

（5）拐角型布局

往往上面是标题及广告标语，接下来的右侧是一窄列链接等，右列是最宽的正文，下面也有一些网站的辅助信息。在这些类别中，一种很常用的种类是更前面是标题及广告，左侧是导航链接

（6）标题正文型布局

这种类型即更前面是标题或类似的一些东西，下面是正文，比如一些文章页面或登录页面等就是这种类。

（7）左右框架型布局

这是一种左右分别为两页的框架结构，一般左边是导航链接，有时最前面会有一个小的标题或标志，右面是正文。我们看到的大部分的大型论坛都是这种结构的，有一些企业网站也偏爱采用。这种种类结构十分清晰，一目了然。

（8）上下框架型布局

与后面类似，区别只是在于是一种上下分为两页的框架。

（9）综合框架型布局

上面两种构架的结合，相对复杂的一种框架结构，较为常见的是类似于“拐角型”结构的，只是运用了框架结构。

（10）封面型布局

这种类型基本上是发生在一些网站的首页，大部分为一些精致的平面设计结合一些小的动画，放上几个简单的链接以及仅是一个“进入”的链接并且直接在首页的照片上做链接而没有任何提示。这种类型大部分出现在企业网站跟个人主页，如果说处理的好，会帮人增添赏心悦目的觉得。

（10）Flash型

其实这与封面型结构是类似的，只是这些种类采用了现今比较游戏行的Flash，与封面型不同的是，由于Flash强大的功能，页面所表达的信息更丰富，其触觉效果及视觉效果即使处理得当，绝不差于传统的多媒体。

（11）变化型

即上面几种类型的结合与差异，比如在视觉上最接近拐角型的，但所推动的功能的实质是这种上、左、右结构的综合框架型。

网页设计的关键任务

就是围绕主题能否将已有的网页基本元素以网页的方式呈现出来。更通俗地说就是如何布局、安置素材，故其后期工作素材的打算尤其重要。

1.4 网页规划和方法——网页制作流程

网页制作通常分为如下步骤：

1．网站规划：将主题拆分为若干子主题，为每个子主题制作目录及必要的空网页文件。

2．主页规划：为主页划分区域，合理安排网站名称、网站标示、公共导航等必要内容，并在主页上为每个子主题创建带描述性文字的超链接。

3．设计主页、子主题网站。

1.4网页规划和方法——网页文件规划

网页文件规划必须多方位考虑设计者和浏览者的必须，使网站文件最大限度地推动设计者的目标并为浏览者提供便利快捷和更直观有效的信息服务。

网页文件规划应遵守三个基本原则：内容、速度跟页面简洁，其中内容更重要。

1.4 网页规划和流程——网页框架

网页框架指网站文件系统的组织结构，合理的框架可以使Web页面井井有条，在实际管控中提高不必要的错误。

一个页面一个主题，避免大主题。把大主题分成几个子主题，用主页把所有页面联起来，在主页中加入指向其它页面的链接，并附带简短描述性文字，将观众带入不同主题的领域。在每个页面加入超链接，方便读者按自己需求阅读。

1.4 网页规划和方法——网页文件规划

1．规划主（首）页

严格来说，主页（Home Page）和网站（Web page）是两个不同概念，主页是指登陆至网页后发现的第一个页面。

主机上默认首页名称是固定的，不能随便起，要依照远程服务器的规定，通常为index.htm、index.html、default.htm、default.html或default.aspx，也能为其它扩展名。

主页的一个重要功能是导航，一般没有实质性的详细内容，有，也并非什么？

利用超链接指引用户查询保存在网址或其它位置的信息，但超链接层数不能太多。

包括主页在内的所有页面都必须简单清晰，以最少的元素表达最多的信息。整体风格基本一致。

1.4 网页规划和方法——网页文件规划

2．设计网页的颜色

视觉冲击是网站给人的第一印象，好的色调搭配可表现网站形象，延伸网站内涵，还能直接影响访问者的心态。通常，网站的主要颜色不要超过3种网页课件模板，用于网页标志、标题、主菜单和主色调，显得整体统一。其他颜色能成为点缀和展现，不能喧宾夺主。

3．设计网站标志(logo)、准备网页素材

网站标志就仿佛商品的商标一样，是站点特色跟内涵的集中表现，好的标志可使人看到logo就联想到拥有该标志的网站。标志可以是汉字、英文字母、动物或人物的符号、图案等。

1.4 网页规划和方法——网页文件规划

4．设计网页的图形和背景

图形是WWW网站的传统之一，具有醒目、吸引人和传达信息形象的功用。适当利用图形可以为网页增色，应用不当也会带来反效果。

由于图形的传输远没有文字传输快，要充分考量图形文件的大小跟传输速度。背景也有极其，虽能使页面简洁，但仍耗费传输时间。

1.4 网页规划和方法——网页文件规划

5．网页文本

文本通常是网站的主要内容，也是网站一直更新的个别。网站成功与否，内容更关键。网页上文字的图标、颜色等属性要与页面整体色调匹配，并贯穿整个网站建设，尽量不用闪烁文字。