第1章网页设计基础知识.ppt

1、网页制作综合技术教程网页制作综合技术教程第第1 1部分部分 HTMLHTML网页设计网页设计 网页的基础概念网页的基础概念1.11.1网页与网页与HTMLHTML1.21.2WebWeb标准标准1.31.3网页设计与开发过程网页设计与开发过程1.41.4 HTML HTML基础基础1.51.5简单的简单的HTMLHTML案例案例1.61.6 用用DreamweaverDreamweaver快速建立基本文档快速建立基本文档1.81.81.1 网页的基础概念图图1.1 使用浏览器软件显示网页使用浏览器软件显示网页 图图1.2 服务器与浏览器的关系示意图服务器与浏览器的关系示意图 1.2 1.2 网

2、页与网页与HTMLHTML图图1.3 网页的网页的HTML源文件源文件1.3 Web1.3 Web标准标准1.3.1 1.3.1 标准的重要性标准的重要性1.3.2 “Web1.3.2 “Web标准标准”概述概述 图图1.4 “结构结构”、“表现表现”和和“行为行为”的关系的关系 图图1.5 仅使用仅使用HTML定义定义“结构结构”的页面效果的页面效果 图图1.6 使用使用CSS设定样式之后的效果设定样式之后的效果 1.4 1.4 网页设计与开发过程网页设计与开发过程 简单来说，网站开发的全过程大致可为简单来说，网站开发的全过程大致可为策划与定义、设计、开发、测试和发布策划与定义、设计、开发、

3、测试和发布5 5个阶个阶段。段。 本节将对开发的流程进行介绍。本节将对开发的流程进行介绍。1.4.1 1.4.1 基本任务与角色基本任务与角色策划与定义策划与定义设设 计计开开 发发测测 试试发发 布布客户客户设计师设计师设计师设计师设计师设计师程序开发程序开发员员 客户客户设计设计 师师程程序序 开发开发员员设计师设计师程序开发程序开发员员表表1.1 网站建设与网页设计流程中的人员角色网站建设与网页设计流程中的人员角色 图图1.7 网站开发的工作流程网站开发的工作流程 1.4.2 1.4.2 明确网站定位明确网站定位1.4.3 1.4.3 收集信息和素材收集信息和素材1.4.4 1.4.4

4、策划栏目内容策划栏目内容1.4.5 1.4.5 设计页面方案设计页面方案 1.4.6 1.4.6 制作页面制作页面1.4.7 1.4.7 实现后台功能实现后台功能1.4.8 1.4.8 整合与测试网站整合与测试网站1.5 HTML1.5 HTML基础基础 HTML HTML（Hypertext Markup LanguageHypertext Markup Language，超，超文本标记语言）不是一种编程语言，而是一文本标记语言）不是一种编程语言，而是一种描述性的标记语言，用于描述超文本中内种描述性的标记语言，用于描述超文本中内容的显示方式。容的显示方式。 例如，如何在网页中定义一个标题、例

5、如，如何在网页中定义一个标题、一段文本或者一个表格等，这些都是利用一段文本或者一个表格等，这些都是利用一个个一个个HTMLHTML标记完成的。标记完成的。 其最基本的语法就是：其最基本的语法就是： 内容内容/ 。 标记通常都是成对使用的，有一个开头标记通常都是成对使用的，有一个开头标记就对应有一个结束标记。结束标记只是标记就对应有一个结束标记。结束标记只是在开头标记的前面加一个斜杠在开头标记的前面加一个斜杠“/”/”。 当浏览器从服务器接收到当浏览器从服务器接收到HTMLHTML文件后，文件后，就会解释里面的标记符，然后把标记符相对就会解释里面的标记符，然后把标记符相对应的功能表达出来。应的功

6、能表达出来。1.5.1 1.5.1 创建第一个创建第一个HTMLHTML文件文件 1.5.2 HTML1.5.2 HTML文件结构文件结构1 1标记标记2 2标记标记3 3标记标记4 4标记标记1.6 1.6 简单的简单的HTMLHTML案例案例 1.8 1.8 利用利用DreamweaverDreamweaver快速建立基本文档快速建立基本文档1.8.1 Dreamweaver1.8.1 Dreamweaver简介简介 图图1.21 Dreamweaver 8的操作界面的操作界面 1 1“文档文档”窗口窗口2 2“插入插入”面板面板 图图1.22 “插入插入”面板面板3 3“属性属性”面板面板图图1.23 “属性属性”面板面板4 4“文档文档”工具栏工具栏图图1.24 “文档文档”工具栏工具栏5 5其他面板其他面板1.8.2 1.8.2 创建新的空白文档创建新的空白文档图图1.25 创建新文档创建新文档1.8.3 1.8.3 案例案例创建新文档创建新文档