网页设计与制作绪论ppt课件

《网页设计与制作绪论ppt课件》由会员分享，可在线阅读，更多相关《网页设计与制作绪论ppt课件（37页珍藏版）》请在金锄头文库上搜索。

1、.,网页设计与制作 电子教案 教 师：谢亮 T E L :13880955623 E-mail:,.,考查方式： 本课程的总成绩由平时成绩、实验考核成绩和期末考试成绩综合评定。 平时成绩40%：出勤、测验、提问、实验报告等。 期末成绩60%：期末考试、机试、实验考核成绩等。,.,第0章 网页设计绪论,.,1.网页的概念,什么是网页 网页就是我们通过网络浏览器看到的网站网页文件，符合HTML （Hyper Text Markup Language 超文本标识语言）规范，网页是由 HTML编码的文本文档，设计网页的过程就是生成HTML代码的过程。 HTML是纯文本类型的语言，使用HTML编写的网页

2、文件也是标准的纯文本文件。我们可以用任何文本编辑器，例如Windows的“记事本”程序打开它，查看其中的HTML源代码，也可以在用浏览器打开网页时，通过相应的“查看/源程序”命令查看网页中的HTML代码。HTML语言可以直接由浏览器解释执行，而无需编译。当用浏览器打开网页时，浏览器读取网页中的HTML代码，分析其语法结构，然后根据解释的结果显示网页内容，正是因为如此，网页显示的速度同网页代码的质量有很大的关系，保持精简和高效的HTML源代码是十分重要的。 网页的发展历史,.,1.1 网页的发展历史,纯文本网页 支持图象的网页：、。 增强的多媒体网页：、。 动态网页： 代码在客户机端执行（脚本V

3、BScript，JavaScript）。 代码在服务器端执行（ASP、JSP、PHP等）。,.,2.网页的作用,对于公司：电子商务（当当网）、产品广告、推销产品、技术支持、联系客户。 对于政府机构：增加政府形象，提高政府办事透明度，增强社会对政府的监督政策、法规的分布说明。 对于教育部门：远程教育（新东方教育在线）、模拟考试、网上辅导、虚拟现实系统，提高整个国民素质水平。 对于个人：了解新闻、求学、购物、交友(社区)、工作、自我展示（博客）、谋生（百万网格）等。,.,3.怎样制作网页,我们在制作网页的时候一般要注意几点比较重要的问题。 第一，技术与艺术的结合； 第二，形式与内容的统一。,.,3

4、.1_技术与艺术的结合,第一，技术篇。 第二，艺术篇。,.,3.2_形式与内容的统一,制作网页力求达到形式与内容的统一，怎么做是形式，做什么则是内容。我们设计网页时要注意有所为，有所不为注意底线，有些内容不能说；注意上线，有些内容应该说。 第一，应该表达的内容。 第二，不应该表达的内容。,.,3.1.1_技术篇,第一，静态网页与动态网页所使用的技术。 第二，为什么要用动态网页？ 第三，几种典型的动态网页技术。,.,3.1.2_艺术篇,第一，美术基础知识。 第二，页面的艺术处理。,.,3.1.1.1_静态网页与动态网页使用的技术,第一，静态网页所使用的技术 第二，动态网页所使用的技术 第三，不同

5、类型的网页所使用的技术比较。,.,3.1.1.1.1_静态网页所使用的技术,在动态网页出现之前，传统的采用HTML编写的网页。目前大部分的网页仍然属于静态网页。 静态网页无需系统实时生成，网页风格灵活多样，但是静态网页在交互性能上比动态网页要差，日常维护繁琐。 文件后缀名一般为.html或者.htm。,.,3.1.1.1.2_动态网页所使用的技术,采用ASP，JSP，PHP，CGI等程序动态生成的页面，只有在接到用户的访问要求后才动态生成页面并传输到用户的浏览器中。 动态网页由计算机实时生成，具有日常维护简单，更改结构方便，交互性能强等特点，同时动态网页需要大量的系统资源合成网页。 文件后缀名

6、为.asp，.shtm，.php，.cgi等，它的后台是数据库，比如Access ， SQLSever数据库。,.,3.1.1.1.3_不同网页所使用的技术比较,.,3.1.1.2_为什么要使用动态网页？,需要获取多媒体信息； 需要更吸引人的页面； 需要更及时的信息； 需要更灵活及时的互动； 电子商务的需要。,.,3.1.1.3_几种典型的动态网页技术,第一，ASP技术。 第二，JSP技术。 第三，PHP技术。 第四，CGI技术。 第五，几种动态网页技术的比较。 第六，要求掌握的技术和基本技能。,.,3.1.1.3.1_ASP技术,ASP动态网页技术（微软开发） ASP（Active Serv

7、er Pages）是微软开发的服务器端脚本环境。 ASP内含于IIS3.0及其较新的版本中。 利用ASP，我们可以结合HTML网页、ASP指令和ActiveX元件建立动态，交互且高效的WEB服务器应用程序。 ASP代码在服务器端执行，包括所有嵌在普通HTML中的脚本程序。当程序执行完毕后，服务器将执行的结果返回给客户浏览器，从而减轻了客户端浏览器的负担，大大提高了交互的速度。 ASP应用程序可以手工编码制作，也可以通过Dreamweaver MX等可视化工具创作生成。,.,3.1.1.3.2_JSP技术,JSP（SUN公司开发） JSP与微软的ASP技术非常相似： 两者都提供在HTML代码中混

8、合某种程序代码，程序代码由语言引擎解释执行。 与ASP一样，JSP中的Java代码在服务器中执行。 JSP与ASP的不同： ASP的编程语言是VBScript，JavaScript之类的脚本语言，JSP使用的是Java。 两种语言引擎用完全不同的方式处理页面中嵌入的程序代码。 在ASP下，VBScript代码被ASP引擎解释执行。 在JSP下，代码被编译成servlet，然后由Java虚拟机执行。,.,3.1.1.3.3_PHP技术,PHP PHP（Hypertext Preprocessor，超文本预处理器）是一种易于学习和使用的服务器端脚本语言。 PHP是完全免费的，可以从PHP官方站点（

9、）自由下载。 PHP一般在UNIX平台，GUN / LINUX和微软的Windows平台上均可以运行。,.,3.1.1.3.4_CGI技术,CGI 公用网关接口（Common Gateway Interface ），简称CGI，仅仅是在WWW服务器上可执行的程序代码。 CGI的工作是根据从用户的需求需要产生并传回所需的文件。 运行速度快，兼容性好。任何一种高级语言，如C，C+，VB，Perl，都可以用来书写CGI程序。,.,3.1.1.3.5_几种动态网页技术比较,.,3.1.1.3.6_要求掌握的技术与基本技能,学完本课程后要求掌握的技术和基本技能有： HTML（HyperText Mark

10、up Language） 制作基本网页 脚本语言 VBScript、JavaScript 动态网页技术 ASP、JSP、PHP、CGI， 数据库技术 SQL Server（Standard Query Language）、Access、Oracle 网页集成开发环境 Dreamweaver，FrontPage，,.,3.1.2.1_美术基础知识,对于学习网页设计与制作的人来说，了解一些必要的美术基础知识是必不可少的。 第一，素描（铅笔，木炭，钢笔等） 第二，构图（均衡，和谐，黄金分割，九宫格构图等） 第三，透视（平面透视，成角透视，三点透视等） 第四，画种（水彩画，水粉画，漫画，油画，中国画等

11、） 第五，色彩（色调，亮度，饱和度等）,.,3.1.2.2_页面的艺术处理,第一，主页风格的定位。 第二，版面编排的设计。 第三，线条和形状。 第四，色彩的处理。 第五，网站构成的基本元素页面布局。 第六，什么样的布局是最好的？,.,3.1.2.2.1_主页风格的定位,主页的美化首先要考虑风格的定位。任何主页都要根据主题的内容决定其风格与形式，因为只有形式与内容的完美统一，才能达到理想的宣传效果。目前主页的应用范围日益扩大，几乎包括了所有的行业，林林总总，包罗万象，但归纳起来大体有这么几个大类：新闻机构、政府机关、科教文化、娱乐艺术、电子商务、网络中心等。对于不同性质的行业，应体现出不同的主页

12、风格，就像穿着打扮，应依不同的性别以及年龄层次而异一样。例如：政府部门的主页风格一般应比较庄重，而娱乐行业则可以活泼生动一些；文化教育部门的主页风格应该高雅大方，而商务主页则可以贴近民俗，使大众喜闻乐见。 主页风格的形成主要依赖于主页的版式设计，依赖于页面的色调处理，还有图片与文字的组合形式等。这些问题看似简单，但往往需要主页的设计和制作者具有一定的美术素质和修养。 还有，动画效果也不宜在主页设计中滥用，特别是一些内容比较严肃的主页。主页毕竟主要依靠文字和图片来传播信息，它不是动画片，更不是电视或电影。至于在主页中适当链接一些影视作品，那是另外一回事。,.,3.1.2.2.2_版面排版的设计,

13、主页的设计首先涉及到的是页面的版面编排问题。“版面编排”实际上就是中国古代画论中的“经营位置”。主页作为一种版面，既有文字，又有图片。文字有大有小，还有标题和正文之分；图片也有大小，而且有横有竖之别。图片和文字都需要同时展示给观众，总不能简单地罗列在一个页面上，这样往往会搞得杂乱无章。因此必须根据内容的需要，将这些图片和文字按照一定的次序进行合理的编排和布局，使它们组成一个有机的整体，展现给广大的观众。可以依据如下几条来做：1.主次分明，中心突出。在一个页面上，必然考虑视觉的中心，这个中心一般在屏幕的中央，或者在中间偏上的部位。因此，一些重要的文章和图片一般可以安排在这个部位，在视觉中心以外的

14、地方就可以安排那些稍微次要的内容，这样在页面上就突出了重点，做到了主次有别。2.大小搭配，相互呼应。较长的文章或标题，不要编排在一起，要有一定的距离，同样，较短的文章，也不能编排在一起。对待图片的安排也是这样，要互相错开，造成大小之间有一定的间隔，这样可以使页面错落有致，避免重心的偏离。3.图文并茂，相得益彰。文字和图片具有一种相互补充的视觉关系，页面上文字太多，就显得沉闷，缺乏生气。页面上图片太多，缺少文字，必然就会减少页面的信息容量。因此，最理想的效果是文字与图片的密切配合，互为衬托，既能活跃页面，又使主页有丰富的内容。,.,3.1.2.2.3_线条和形状,文字、标题、图片等的组合，会在页

15、面上形成各种各样的线条和形状。这些线条与形状的组合，构成了主页的总体艺术效果。必须注意艺术地搭配好这些线条和形状，才能增强页面的艺术魅力。1.直线（矩形）的应用。直线条的艺术效果是流畅、挺拔、规矩、整齐，所谓有轮有廓。直线和矩形在页面上的重复组合可以呈现井井有条、泾渭分明的视觉效果。一般应用于比较庄重、严肃的主页题材。2.曲线（弧形）的应用。曲线的效果是流动、活跃，具有动感。曲线和弧形在页面上的重复组合可以呈现流畅、轻快，富有活力的视觉效果。一般应用于青春、活泼的主页题材。3.曲、直线（矩形、弧形）的综合应用。把以上两种线条和形状结合起来运用，可以大大丰富主页的表现力，使页面呈现更加丰富多彩的

16、艺术效果。这种形式的主页，适应的范围更大，各种主题的主页都可以应用。但是，在页面的编排处理上，难度也会相应大一些，处理得不好会产生凌乱的效果。最简单的途径是，在一个页面上以一种线条（形状）为主，只在局部的范围内适当用一些其它线条（形状）。,.,3.1.2.2.4_色彩的处理,色彩是人的视觉最敏感的东西。主页的色彩处理得好，可以锦上添花，达到事半功倍的效果。色彩总的应用原则应该是“总体协调，局部对比”，也就是：主页的整体色彩效果应该是和谐的，只有局部的、小范围的地方可以有一些强烈色彩的对比。在色彩的运用上，可以根据主页内容的需要，分别采用不同的主色调。因为色彩具有象征性，例如：嫩绿色、翠绿色、金黄色、灰褐色就可以分别象征着春、夏、秋、冬。其次还有职业的标志色，例如：军警的橄榄绿，医疗卫生的白色等。色彩还具有明显的心理感觉，例如冷、暖的感觉，进、退的效果等。另外，色彩还有民族性，各个民族由于环境、文化、传统等因素的影响，对于色彩的喜好也存在着较大的差异。充分运用色