网页设计与制作基础

1、第1章 网页设计与制作基础 第1页本章概述 本章的学习目标主要内容本章概述随着互联网的发展和普及，电子商务和电子政务发展迅速，人们将互联网技术应用到生产、经营、娱乐等活动中，利用互联网开展各种信息服务，如个人网上购物、企业形象展示、政府服务大众等。网页设计和制作技术成为计算机专业一个相当重要的分支。本章介绍网页设计与制作的基础知识，包括网页基础概念、网页制作工具和技术介绍和网页设计基础等。第2页本章的学习目标 了解网页与网站的概念 了解静态网页和动态网页概念 了解HTML与XHTML概念 了解网页制作语言 了解网页设计工具 掌握网页构成第3页主要内容1.1网页基础概念1.2网页设计制作技术1.

2、3网页设计制作工具1.4网页设计基础1.5本章小结第4页1.1网页基础概念Internet即通常所说的互联网，是相互连接的网络集合。Internet是一个巨大的、覆盖全球的信息资源库，是由成千上万个网络、上亿台计算机通过特定的网络协议相互连接而成的全球计算机网络，其提供资源共享和网络通信。WWW是一个基于超文本(Hypertext)方式的信息检索服务工具，是Internet上近几年才发展起来的服务，也是发展最快和目前用得最广泛的服务。第5页网页和网站网页和网站网页与网站的关系构建WWW的基本单位是网页。网页中包含所谓的“超链接”，通过已经定义好的关键字和图形，只要用鼠标轻轻一点，就可以自动跳转

3、到相应的其他文件，获得相应的信息，从而实现网页之间的链接。通过超链接连接起来的一系列逻辑上可以视为一个整体的页面，则叫做“网站”。网站由域名（Domain Name）、网站空间、网页三部分组成。网页的基本元素文本：文本是网页中最主要的信息载体，浏览者主要通过文字了解各种信息。图片：图片可以使网页看上去更加美观，可以让浏览者更加快速地了解网页所要表达的内容。水平线、表格、表单、超链接、动态元素等第6页第7页静态网页静态网页和和动态网页动态网页l静态网页静态网页第8页静态网页静态网页和和动态网页动态网页l动态网页动态网页数据库数据库数据库（Database，DB）是存储在一起的相关数据的集合，是按

4、照数据结构来组织、存储和管理数据的仓库。数据库管理系统数据定义功能数据操纵功能数据库的运行管理数据库的建立和维护功能l数据库的作用在动态网站建设中，数据库发挥着不可替代的作用。它用于存储网站中的信息，可以包括静止的和经常需要更换的内容。第9页第10页主要内容1.1 网页基础概念网页基础概念1.2 网页设计制作技术网页设计制作技术1.3网页设计制作工具网页设计制作工具1.4网页设计基础网页设计基础1.5本章小结本章小结1.2 网页设计制作技术在Internet上浏览的一个个精美网页都是用超文本标记语言HTML制作而成。网页制作工具较多，大多数网页制作工作都是通过“所见即所得”的编辑工具完成的。在

5、网页制作过程中，除了页面的编辑外，还需要进行素材的创作和加工，即图形和动画制作工具。第11页HTML与与XHTMLWWW所使用的出版语言就是HTML(Hypertext Marked Language，即：超文本标记语言)语言。传统HTML语言HTML是一种用来制作超文本文档的简单标记语言，其是构成Web页面(Page)的主要工具，是用来表示网上信息的符号标志语言。HTML语言使用“标记”(也叫“标签”)来指示Web浏览器应该如何显示网页元素，HTML标记是HTML中用来鉴别网页元素的类型、格式和外观的文本字符串。功能的逐渐增多，使得HTML成为了一种混合结构性语句与描述性语句的复杂语言。XH

6、TML结构语言XHTML结构语言是一种基于HTML4.01与XML的新结构化语言。XHTML的标签、属性、属性值等内容的书写格式都有严格的规范，从而提高代码在各种平台下的解析效率。第12页网页脚本语言网页脚本语言脚本语言服务器端脚本语言主要应用于各种动态网页技术，用于编写实现动态网页的网络应用程序。服务器端脚本语言必须依赖服务器端的软件执行。常见的服务器端脚本语言包括应用于ASP技术的VBScript、Jscript、PHP、JSP、Perl、CFML等。浏览器脚本语言区别于服务器端脚本语言，是直接插入到网页中执行的脚本语言。目前应用最广泛的浏览器脚本语言包括JavaScript、JScrip

7、t以及VBScript等。标准化的ECMAScript包括应用于微软Internet Explorer浏览器的Jscript和用Flash脚本编写的ActionScript等。标准化的文档对象模型文档对象模型（Document Object Model，DOM）是根据W3C DOM规范而定义的一系列文档对象接口。第13页动态网页编程语言动态网页编程语言ASP技术第14页动态网页编程语言动态网页编程语言ASP.NET技术第15页动态网页编程语言动态网页编程语言JSP技术第16页动态网页编程语言动态网页编程语言PHP技术PHP（Personal Home Page，个人主页）也是一种跨平台的网页后

8、台技术，最早由丹麦人Rasmus Lerdorf开发，并由PHP Group和开放源代码社群维护，是一种免费的网页脚本语言。PHP是一种应用广泛的语言，其多在服务器端执行，通过PHP代码产生网页并提供对数据库的读取。第17页第18页主要内容1.1 网页基础概念网页基础概念1.2 网页设计制作技术网页设计制作技术1.3网页设计制作工具网页设计制作工具1.4网页设计基础网页设计基础1.5本章小结本章小结1.3 网页设计制作工具网页编辑工具图形和图像处理工具动画设计工具第19页网页编辑工具网页编辑工具网页编辑工具主要分为标记型和所见即所得型。标记型工具常用的是Notepad(记事本)、Ultraed

9、it等。Ultraedit是一套很好用的文本编辑器，附有HTML标签颜色显示、搜寻替换以及无限制的还原功能。所见即所得的编辑主流软件主要是Adobe公司的Dreamweaver。第20页Dreamweaver CCDreamweaver CC是Adobe公司推出的一套拥有可视化编辑界面，用于制作并编辑网站和移动应用程序的网页设计软件。其支持代码、拆分、设计、实时视图等多种方式来创作、编写和修改网页，具有强大的功能和简便的操作平台，是一款所见即所得的网页制作软件。该软件集网页制作、网站管理、程序开发于一身，可以帮助用户在同一个软件中完成所有网站建设的相关工作。第21页Dreamweaver CC

10、第22页第23页Dreamweaver CC图形和图像处理工具图形和图像处理工具目前常用的图形和图像处理工具主要是Adobe公司Photoshop。Photoshop的功能十分强大，是目前使用最为广泛的专业图形图像处理软件之一。它捆绑了Image Ready，能够实现各种专业化的图像处理及动画的制作等。第24页Photoshop CC第25页Photoshop CC第26页动画设计工具动画设计工具第27页lFlash是目前网页制作中最为出色的动画设是目前网页制作中最为出色的动画设计软件，它是美国的计软件，它是美国的Macromedia公司于公司于1999年年6月推出的交互式动画设计工具，月推出

11、的交互式动画设计工具，用它可以将音乐、声效、动画以及富有新用它可以将音乐、声效、动画以及富有新意的界面融合在一起，以制作出高品质的意的界面融合在一起，以制作出高品质的、富有创意的网页动态效果。、富有创意的网页动态效果。Flash CC第28页Flash CC第29页第30页主要内容1.1 网页基础概念网页基础概念1.2 网页设计制作技术网页设计制作技术1.3网页设计制作工具网页设计制作工具1.4网页设计基础网页设计基础1.5本章小结本章小结1.4 网页设计基础 网页构成分析网页设计原则网页版面设计网页色彩设计第31页网页构成分析网页构成分析Logo图标导航条Banner内容版块版尾和版权第32

12、页网页设计原则网页设计原则一个好的网站应该是内容丰富、页面干净、主题突出、栏目导航清晰明了，因此网页设计应注意以下几个原则：用户优先符合“8秒钟原则”考虑用户的软/硬件配置内容丰富着手规划、确定特色、锁定目标首页的重要性栏目的归类互动性图像应用技巧、背景底色HTML格式的注意事项、避免滥用技术。第33页网页版面设计网页版面设计T结构布局“口”形布局“三”形布局“框架”型布局POP布局第34页网页色彩设计网页色彩设计色彩的设计原则网站色彩总的设计原则应该是“总体协调，局部对比”。主页的整体色彩效果应该的和谐的，只有局部的、小范围的地方可以有一些强烈色彩的对比。在色彩的运用上可以根据主页内容的需要，分别采用不同的主色调。l色彩的概念色彩的冷暖色彩的轻重色彩的前进与后退色彩的艳丽与素雅l色彩选配方案红色色系、蓝色色系、其他色系第35页第36页主要内容1.1 网页基础概念网页基础概念1.2 网页设计制作技术网页设计制作技术1.3网页设计制作工具网页设计制作工具1.4网页设计基础网页设计基础1.5本章小结本章小结1.5 本章小结 本章