网页设计与制作基础

1.1 网页基础概念


Internet即通常所说的互联网，是相互连接的网络 集合。Internet是一个巨大的、覆盖全球的信息资 源库，是由成千上万个网络、上亿台计算机通过 特定的网络协议相互连接而成的全球计算机网络， 其提供资源共享和网络通信。 WWW是一个基于超文本(Hypertext)方式的信息 检索服务工具，是Internet上近几年才发展起来的 服务，也是发展最快和目前用得最广泛的服务。
第11页
HTML与XHTML


WWW所使用的出版语言就是HTML(Hypertext Marked Language，即：超文本标记语言)语言。 传统HTML语言


HTML是一种用来制作超文本文档的简单标记语言，其是构成Web 页面(Page)的主要工具，是用来表示网上信息的符号标志语言。 HTML语言使用“标记”(也叫“标签”)来指示Web浏览器应该如 何显示网页元素，HTML标记是HTML中用来鉴别网页元素的类型、 格式和外观的文本字符串。 功能的逐渐增多，使得HTML成为了一种混合结构性语句与描述性 语句的复杂语言。 XHTML结构语言是一种基于HTML4.01与XML的新结构化语言。 XHTML的标签、属性、属性值等内容的书写格式都有严格的规范， 从而提高代码在各种平台下的解析效率。

Logo图标 导航条 Banner 内容版块 版尾和版权
第32页
网页设计原则

一个好的网站应该是内容丰富、页面干净、主题 突出、栏目导航清晰明了，因此网页设计应注意 以下几个原则：



用户优先 符合“8秒钟原则” 考虑用户的软/硬件配置 内容丰富 着手规划、确定特色、锁定目标 首页的重要性 栏目的归类 互动性 图像应用技巧、背景底色 HTML格式的注意事项、避免滥用技术。
第20页
Dreamweaver CC

Dreamweaver CC是Adobe公司推出的一套 拥有可视化编辑界面，用于制作并编辑网 站和移动应用程序的网页设计软件。其支 持代码、拆分、设计、实时视图等多种方 式来创作、编写和修改网页，具有强大的 功能和简便的操作平台，是一款所见即所 得的网页制作软件。该软件集网页制作、 网站管理、程序开发于一身，可以帮助用 户在同一个软件中完成所有网站建设的相 关工作。

数据库的作用

第9页
主要内容
1.1 网页基础概念 1.2 网页设计制作技术 1.3 网页设计制作工具 1.4 网页设计基础 1.5 本章小结
第10页
1.2 网页设计制作技术


在Internet上浏览的一个个精美网页都是用 超文本标记语言HTML制作而成。 网页制作工具较多，大多数网页制作工作 都是通过“所见即所得”的编辑工具完成 的。在网页制作过程中，除了页面的编辑 外，还需要进行素材的创作和加工，即图 形和动画制作工具。
第5页
网页和网站

网页与网站的关系

构建WWW的基本单位是网页。网页中包含所谓的“超链接”， 通过已经定义好的关键字和图形，只要用鼠标轻轻一点，就可以 自动跳转到相应的其他文件，获得相应的信息，从而实现网页之 间的链接。通过超链接连接起来的一系列逻辑上可以视为一个整 体的页面，则叫做“网站”。


第21页
Dreamweaver CC
第22页
Dreamweaver CC
菜单栏 工具面板 文档编辑区 面板组
属性面板
第23页
图形和图像处理工具


目前常用的图形和图像处理工具主要是 Adobe公司Photoshop。 Photoshop的功能十分强大，是目前使用最 为广泛的专业图形图像处理软件之一。它 捆绑了Image Ready，能够实现各种专业化 的图像处理及动画的制作等。
第33页
网页版面设计

T结构布局 “口”形布局 “三”形布局 “框架”型布局 POP布局
第34页
网页色彩设计

色彩的设计原则

网站色彩总的设计原则应该是“总体协调，局部对比”。主页的 整体色彩效果应该的和谐的，只有局部的、小范围的地方可以有 一些强烈色彩的对比。在色彩的运用上可以根据主页内容的需要， 分别采用不同的主色调。 色彩的冷暖 色彩的轻重 色彩的前进与后退 色彩的艳丽与素雅 红色色系、蓝色色系、其他色系
第1章 网页设计与制作基础
本章概述 本章的学习目标 主要内容
第1页
本章概述

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



了解网页与网站的概念 了解静态网页和动态网页概念 了解HTML与XHTML概念 了解网页制作语言 了解网页设计工具 掌握网页构成
第3页
主要内容
1.1 1.2 1.3 1.4 1.5 网页基础概念 网页设计制作技术 网页设计制作工具 网页设计基础 本章小结
第4页
第27页
Flash CC
第28页
Flash CC
第29页
主要内容
1.1 网页基础概念 1.2 网页设计制作技术 1.3 网页设计制作工具 1.4 网页设计基础 1.5 本章小结
第30页
1.4 网页设计基础

网页构成分析 网页设计原则 网页版面设计 网页色彩设计
第31页
网页构成分析
第37页
网站由域名（Domain Name）、网站空间、网页三部分组 成。 网页的基本元素


文本：文本是网页中最主要的信息载体，浏览者主要通过文字了 解各种信息。 图片：图片可以使网页看上去更加美观，可以让浏览者更加快速 地了解网页所要表达的内容。 水平线、表格、表单、超链接、动态元素等
第6页
静态网页和动态网页

PHP（Personal Home Page，个人主页）也是一种跨平台的网页 后台技术，最早由丹麦人Rasmus Lerdorf开发，并由PHP Group 和开放源代码社群维护，是一种免费的网页脚本语言。PHP是一 种应用广泛的语言，其多在服务器端执行，通过PHP代码产生网 页并提供对数据库的读取。

标准化的文档对象模型

文档对象模型（Document Object Model，DOM）是根 据W3C DOM规范而定义的一系列文档对象接口。
第13页
动态网页编程语言

ASP技术
第14页
动态网页编程语言

ASP.NET技术
第15页
动态网页编程语言

JSP技术
第16页
动态网页编程语言

PHP技术
第12页

XHTML结构语言

网页脚本语言

脚本语言



标准化的ECMAScript

服务器端脚本语言主要应用于各种动态网页技术，用于编写实现 动态网页的网络应用程序。服务器端脚本语言必须依赖服务器端 的软件执行。常见的服务器端脚本语言包括应用于ASP技术的 VBScript、Jscript、PHP、JSP、Perl、CFML等。 浏览器脚本语言区别于服务器端脚本语言，是直接插入到网页中 执行的脚本语言。目前应用最广泛的浏览器脚本语言包括 JavaScript、JScript以及VBScript等。 包括应用于微软Internet Explorer浏览器的Jscript和用Flash脚本编 写的ActionScript等。

色彩的概念


色彩选配方案

第35页
主要内容
1.1 网页基础概念 1.2 网页设计制作技术 1.3 网页设计制作工具 1.4 网页设计基础 1.5 本章小结
第36页
1.5 本章小结




本章讲述了网页设计与制作的基础知识。 首先，介绍了网页基础概念，包括Internet基础， 网页和网站的概念，静态网页与动态网页的区别， 数据库的概念及其在网站建设中的作用。 接下来，讲述了HTML与XHTML、网页脚本语言、 动态网页编程语言等网页制作技术。 之后，讲述了Dreamweaver CC、Photoshop CC、 Flash CC等网页制作的常用工具。 最后，对网页设计基础进行了详细讲述。
第24页
Photoshop CC
第25页
Photoshop CC
第26页
动画设计工具

Flash是目前网页制作中最为出色的动画设 计软件，它是美国的Macromedia公司于 1999年6月推出的交互式动画设计工具， 用它可以将音乐、声效、动画以及富有新 意的界面融合在一起，以制作出高品质的 、富有创意的网页动态效果。
第17页
主要内容
1.1 网页基础概念 1.2 网页设计制作技术 1.3 网页设计制作工具 1.4 网页设计基础 1.5 本章小结
第18页
1.3 网页设计制作工具

网页编辑工具 图形和图像处理工具 动画设计工具
第19页
网页编辑工具


网页编辑工具主要分为标记型和所见即所得型。 标记型工具常用的是Notepad(记事本)、Ultraedit 等。Ultraedit是一套很好用的文本编辑器，附有 HTML标签颜色显示、搜寻替换以及无限制的还原 功能。 所见即所得的编辑主流软件主要是Adobe公司的 Dreamweaver。

Fra Baidu bibliotek
静态网页
第7页
静态网页和动态网页

动态网页
第8页
数据库


数据库（Database，DB）是存储在一起的相关数 据的集合，是按照数据结构来组织、存储和管理 数据的仓库。 数据库管理系统

数据定义功能 数据操纵功能 数据库的运行管理 数据库的建立和维护功能 在动态网站建设中，数据库发挥着不可替代的作用。它用于存储 网站中的信息，可以包括静止的和经常需要更换的内容。