第七章 动态网页课件第一单元.ppt

动态网页设计与制作实用教程（第二版） 计算机学院 21世纪高等院校计算机系列教材 罗云 Transitional Page 9到16周，共8次课 1.网页基础、html语言介绍 2.网页布局 3.Dreamweaver软件初级使用 4.各种网页元素的编辑、添加 5.Dreamweaver软件高级使用 6.ASP及数据库技术介绍 7.交互式网站的功能实现 考核：制作一个个人主页（16周最后一次课时提交） 考核：制作一个个人主页 第1章 网页设计概述 本章学习导读 本章主要讲解网页设计制作的基本方式、构成网页的基 本元素、编辑网页的常用工具、动态网页的支持技术和网页 编码的基本知识。通过本章学习，读者应该掌握以下内容： 网页设计的基本方式 网页包括的常见元素 网页元素的创作与编辑工具 HTML语言基础知识 动态网页的支持技术 第1章 网页设计概述 1.1 网页设计的基本方式 网页设计制作的基本方式包括：手工直接编码、利用可视化工具、 手工编码和可视化工具结合3种。 1.1.1 手工编码方式 网页是由HTML（Hyper Text Markup Language）超文本标记语 言编码的文档，设计制作网页的过程就是生成HTML代码的过程。手工 编码制作网页对网页设计人员的要求较高，编码效率低，调试过程复杂。 但学习一定的编码知识是网页制作的基础，而且手工编码可以灵活地制 作出丰富的网页效果。 1.1.2 可视化工具方式 随着网页制作技术的不断发展，出现了诸如FrontPage、Dreamweaver 等可视化的网页编辑工具。利用这些工具人们在可视环境下编辑制作网 页元素，“所见即所得”，再由编辑工具自动生成对应的网页代码，大大 提高的网页开发的效率。 第1章 网页设计概述 1.2 网页中的常见元素 文本 图像和动画 声音和视频 超级链接 表格 表单 导航栏 其他常见元素 第1章 网页设计概述 1.3 网页元素的创作与编辑工具 1.3.1 网页图像制作工具 ◆ Fireworks ◆ Photo Impact ◆ PhotoShop 1.3.2 动画制作工具 ◆ Flash ◆ Director 1.3.3 网页编辑工具 ◆ FrontPage 2000 ◆ Dreamweaver ◆ HotDog 第1章 网页设计概述 1.4 HTML基础知识 1.4.1 HTML基本概念 1．HTML概念 HTML是一种描述语言，对Web页面中显示内容的属性以标签的形 式进行描述。客户机上的浏览器（Browser）对这些描述进行解释将相 应页面内容正确显示在显示器上。一个Web页面就是一个HTML文档。 2．HTML文档的构成 HTML文档由三大元素构成：HTML元素、HEAD元素和BODY元素。 每个元素又包含各自相应的标记（属性）。HTML元素是最外层的元素， 里面包含HEAD元素和BODY元素。HEAD元素中包含对文档基本信息文 档标题、文档搜索关键字、文档生成器等）描述的标记。BODY元素是文 档的主体部分，包含有对网页元素（文本、表格、图片、动画、链接等） 描述的标记。HTML中标记一般成对，如：P和/P、HTML和 /HTML等，但也有一些不成对。 第1章 网页设计概述 3．HTML文档的编辑 HTML文档是普通文本（ASCII）文件，它可以用任意编缉器（如 Windows中的记事本、写字板，Macintosh中的BBEdit等）生成。你也 可以使用字处理软件，不过要注意保存时文件类型要选择 “带换行符的纯 文本”，并且类型扩展名为“.htm”或“.html”。早期网页制作的过程就是直 接书写HTML代码来定义页面元素的过程。 第1章 网页设计概述 1.4.2 HTML的基本语法结构 HTML的语法是通过标记来体现的，不同标记的符号及其属性构成了 该语言的语法特征。下面我们以HTML 4.0版为例，通过三大元素中的标 记来描述HTML的语法结构。 1．HTML元素 HTML标记是对整个文档属性的描述，即告诉浏览器HTML文档的开始与结 束，是网页中最外层的标记。由HTML和/HTML标记对标出。HTML元素只 有HTML一个标记。 2．HEAD元素 （1）HEAD标记。该标记用来表示HEAD元素的开始和结束，其格式为： HEAD /HEAD。 （2）BASE标记（不成对标记）。BASE标记用来确定当前初始的URL，当 前文件中的链接都以所定义的初始地址为