动态网页设计与制作实用教程第二版第1章ppt课件.ppt

第二版 TransitionalPage 第1章网页设计概述 本章学习导读本章主要讲解网页设计制作的基本方式 构成网页的基本元素 编辑网页的常用工具 动态网页的支持技术和网页编码的基本知识 通过本章学习 读者应该掌握以下内容 网页设计的基本方式网页包括的常见元素网页元素的创作与编辑工具HTML语言基础知识动态网页的支持技术 第1章网页设计概述 1 1网页设计的基本方式网页设计制作的基本方式包括 手工直接编码 利用可视化工具 手工编码和可视化工具结合3种 1 1 1手工编码方式网页是由HTML HyperTextMarkupLanguage 超文本标记语言编码的文档 设计制作网页的过程就是生成HTML代码的过程 手工编码制作网页对网页设计人员的要求较高 编码效率低 调试过程复杂 但学习一定的编码知识是网页制作的基础 而且手工编码可以灵活地制作出丰富的网页效果 1 1 2可视化工具方式随着网页制作技术的不断发展 出现了诸如FrontPage Dreamweaver等可视化的网页编辑工具 利用这些工具人们在可视环境下编辑制作网页元素 所见即所得 再由编辑工具自动生成对应的网页代码 大大提高的网页开发的效率 第1章网页设计概述 1 2网页中的常见元素文本图像和动画声音和视频超级链接表格表单导航栏其他常见元素 第1章网页设计概述 1 3网页元素的创作与编辑工具1 3 1网页图像制作工具 Fireworks PhotoImpact PhotoShop1 3 2动画制作工具 Flash Director1 3 3网页编辑工具 FrontPage2000 Dreamweaver HotDog 第1章网页设计概述 1 4HTML基础知识1 4 1HTML基本概念1 HTML概念HTML是一种描述语言 对Web页面中显示内容的属性以标签的形式进行描述 客户机上的浏览器 Browser 对这些描述进行解释将相应页面内容正确显示在显示器上 一个Web页面就是一个HTML文档 2 HTML文档的构成HTML文档由三大元素构成 HTML元素 HEAD元素和BODY元素 每个元素又包含各自相应的标记 属性 HTML元素是最外层的元素 里面包含HEAD元素和BODY元素 HEAD元素中包含对文档基本信息文档标题 文档搜索关键字 文档生成器等 描述的标记 BODY元素是文档的主体部分 包含有对网页元素 文本 表格 图片 动画 链接等 描述的标记 HTML中标记一般成对 如 和 和等 但也有一些不成对 第1章网页设计概述 3 HTML文档的编辑HTML文档是普通文本 ASCII 文件 它可以用任意编缉器 如Windows中的记事本 写字板 Macintosh中的BBEdit等 生成 你也可以使用字处理软件 不过要注意保存时文件类型要选择 带换行符的纯文本 并且类型扩展名为 htm 或 html 早期网页制作的过程就是直接书写HTML代码来定义页面元素的过程 第1章网页设计概述 1 4 2HTML的基本语法结构HTML的语法是通过标记来体现的 不同标记的符号及其属性构成了该语言的语法特征 下面我们以HTML4 0版为例 通过三大元素中的标记来描述HTML的语法结构 1 HTML元素HTML标记是对整个文档属性的描述 即告诉浏览器HTML文档的开始与结束 是网页中最外层的标记 由和标记对标出 HTML元素只有HTML一个标记 2 HEAD元素 1 HEAD标记 该标记用来表示HEAD元素的开始和结束 其格式为 2 BASE标记 不成对标记 BASE标记用来确定当前初始的URL 当前文件中的链接都以所定义的初始地址为基础 它有一个HREF属性 其值为所定义的基准URL地址 格式为 第1章网页设计概述 3 BODY元素 可见对象的描述 1 BODY标记 该标记是BODY元素开始和结束的标志 格式为 元素标记 2 DIV层标记 层是各种元素的集合 是一个活动板 便于元素定位 3 文本标记 该标记用来标识文本属性 其属性参数比较复杂 具体格式如下 定义文本的字体 宋体 楷体 隶书 等 定义文本的字号 1 7 的值 定义文本的颜色 ffcc00 等十六进制值 粗体显示 斜体显示 下划线显示 下标显示 上标显示 第1章网页设计概述 4 段落标记 该标记用来标识段落和列表 创建一个新的段落 两段落之间有行间空隙 定义段落对齐方式 right left center 段内插入回车换行符 行间没有空隙 创建无序列表 创建有序列表 5 表格标记 该标记用来定义网页上的表格 格式如下 定义表格的起始 结束位置 定义表格的边框宽度 像素值 定义表格的宽度 像素值 或百分比 定义表格的对齐方式 right left center 定义表格单元格之间的距离 像素值 定义表格行的起始和结束位置 定义单元格水平对齐方式 right left center 定义表格列的起始和结束位置 定义单元格跨占的列数 1 2 第1章网页设计概述 6 图像标记 号的含义参照 表格标记 的说明 不再重复 该标记用来定义显示图像的地址 大小等属性 格式如下 添加图片的URL地址和文件名 图像的对齐方式 设置围绕图像边框的大小 设置图像下载时的说明文字 加入一条水平线 设置水平线的高度 设置水平线的长度 去掉水平线的阴影 7 下拉表单标记 该标记用来在网页上建立一个下拉表单 格式如下 创建下拉表单 1 下拉显示 否则滚动显示 设置表单项目和选中时的参数值 第1章网页设计概述 8 链接 Linking 标记 该标记用来定义网页中超链接的热点和目标 格式如下 热点文字 图像等 URL name为被链接的文件名 9 多媒体标记 第1章网页设计概述 1 5动态网页的支持技术动态网页此处是指浏览器和服务器数据库可以进行实时数据交流的动态交互网页 而不是指加上动画等效果的动感网页 随着Web技术的发展 动态网页已成为网页制作的流行趋势 制作动态网页仅用上面的工具是不够的 还要结合下面几种常见的支持技术 来开发服务器端的脚本应用程序 1 5 1CGI技术CGI CommonGatewayInterface 是用于连接主页和应用程序的接口 CGI是在服务器端运行的一个可执行程序 由网页的一个热链接激活进行调用 并对该程序的返回结果进行处理 显示在网页上 简而言之 CGI就是为了扩展网页的功能而设立的 第1章网页设计概述 1 5 2ASP技术ASP MicrosoftActiveServerPages 是一套微软开发的服务器端脚本环境 ASP内含于IIS3 0 4 0和5 0之中 通过ASP我们可以结合HTML网页 ASP指令和ActiveX元件建立动态 交互且高效的Web服务器应用程序 1 5 3PHP技术PHP HypertextPreprocesso 超文本预处理器 是一种易于学习和使用的服务器端脚本语PHP除了能够操作页面 还能发送HTTP的标题 它不需要特殊的开发环境和IDE 它不仅支持多种数据库 还支持多种通信协议 另外 PHP还具有极强的兼容性 PHP是完全免费的 可以从PHP官方站点 http 自由下载 1 5 4JSP技术JS