网页制作基础.ppt

56 1 第1章网页设计基础知识 本章主要内容网络基础知识Dreamweaver8基础 重点 HTML语言 重点 难点 本章理论授课6学时 上机操作0学时 56 2 1 1网络基础知识1 1 1Internet基础知识1 什么是Internet Inter 意即交互 net 意即网络 Internet称为国际互联网络 2 Internet的功能信息的获取与发布 WWW 电子邮件 E mail 网上交际 BBS 新闻组 即时通讯 网络电话等 电子商务与网上事务处理Internet的其它应用 远程教育 远程医疗 远程登录 文件传输 游戏娱乐等 56 3 3 Internet的发展Internet的雏形阶段1969年 美国国防部高级研究计划管理局 ARPA AdvancedResearchProjectsAgency 资助建立一个名为ARPANET的网络 当时建立这个网络的目的只是为了将美国的几个军事及研究用电脑主机连接起来 普遍认为这就是Internet的雏形 随着网络互连技术的发展 将大大小小同构和异构网络连接起来 形成一个网络的网络 这就是我们现在所看到的Internet 国际互联网络 56 4 4 Internet在我国的发展1987年至1993年 我国与Internet的连接仅仅是电子函件的转发连接 并只在少数高校和科研机构提供电子邮件服务 1987年9月 北京计算机应用技术研究所与德国卡尔斯鲁厄大学 KarlruheUniversity 合作 建成CANET中国科技网 ChinaAcademicNetwork 它是我国第一个Internet电子邮件服务结点 并于1990年10月正式向Internet信息中心InterNIC注册了我国的顶级域名cn 1994年3月 Internet管理委员会正式批准中国进入Internet 中国政府也批准Internet与中国连通 1994年 我国第一条Internet专线在中国科学院高能物理研究所正式接通 该所的IHEPNET网络 InstituteofHighEnergyPhysicsNetwork 迈出了与世界数以百万计的计算机共享信息的第一步 同年8月 在北京召开的高能物理大会第一次通过Internet向全世界发布信息 56 5 5 Internet的工作原理互联网连接了世界上不同国家与地区无数不同硬件 不同操作系统与不同软件的计算机 为了保证这些计算机之间能够畅通无阻地交换信息 必须拥有统一的通信协议 在互联网上使用TCP IP作为标准的通信协议 TCP IP协议所采用的通信方式是分组交换方式 即数据在传输时分成若干段 每个数据段称为一个数据包 TCP IP协议的基本传输单位是数据包 TCP IP协议簇包括两个主要的协议 即TCP 传输控制协议 和IP 网际协议 它们在数据传输过程中主要完成以下功能 56 6 首先由TCP协议把数据分成若干数据包 给每个数据包写上序号 以便接收端把数据还原成原来的格式 IP协议给每个数据包写上发送主机源地址和接收主机目的地址 数据包就可以在网上传送了 这些数据包可以通过不同的传输途径 路由 进行传输 由于路径不同 加上其它的原因 可能出现顺序颠倒 数据丢失 数据失真甚至重复的现象 这些问题都由TCP协议来处理 它具有检查和处理错误的功能 必要时还可以请求发送端重发 换句话说 IP协议负责数据的传输寻址 而TCP协议保障数据的可靠传输 56 7 6 Intranet 内联网 Intranet也叫企业内部网 是指在一个单位或企业内通过TCP IP协议建立的网络 近年来 随着Internet的普及和公司 企业商务应用的需求 Intranet内联网也随之产生与发展 并更受网络界关注 Intranet是基于Internet技术 TCP IP和HTTP等通信协议以及WWW等信息服务的一种区域化的信息系统 它通过开放的Internet标准协议 把多种服务平台提供给区域网络上的计算机 它既给一个公司或企业提供了将其自身组织成一个完整信息系统的网络环境 也可以根据需要通过防火墙技术提供访问Internet的平台 56 8 7 几个与Internet有关的概念术语IP地址IP地址能唯一地标识出主机在Internet中所处的网络位置 IP地址提供统一的地址格式 即由32个二进制位 bit 组成 由于二进制使用起来不方便 常用 点分十进制 方式来表示 即将IP地址分为4个字节 每个字节以十进制数来表示 各个数之间以句点来分隔 例如 中国人民大学网站的IP地址是202 112 112 224 56 9 域名与IP地址相比 人们更喜欢使用具有一定含义的字符串来标识Internet上的计算机 用户可以用各种各样的方式来命名自己的计算机 这样就可能在Internet上出现重名 为了避免重名 Internet管理机构采取了在主机名后加上后缀名的方法 这个后缀名称为域名 domain 用来标识主机的区域位置 例如 中www为主机名 由服务器管理员命名 为域名 由服务器所属单位向域名管理机构申请使用 域名系统需要通过域名服务器 DNS 的解析服务转换为实际的IP地址 才能实现最终的访问 56 10 URLURL UniformResourceLocator 统一资源定位器 是WWW页 资源对象 的地址 它的地址格式为 资源类型 域名 端口号 路径 资源类型 指出WWW客户程序用来操作的工具 如 http 表示WWW服务器 ftp 表示FTP服务器 new 表示新闻组 Newgroup 等 域名 指出WWW页所在的服务器域名 端口号 对某些资源的访问 有时需给出服务器提供的端口号 路径 指明服务器上某资源的位置 其格式与DOS系统中的格式一样 通常是目录 子目录 文件名这样的树型结构 例如 56 11 1 1 2WWW简介WWW是Internet多媒体信息查询工具 是Internet上近年才发展起来的服务 也是发展最快和目前使用最广泛的服务 正是因为有了WWW工具 才使得近年来Internet迅速发展 用户数飞速增长 1 什么是WWWWWW是WorldWideWeb 环球信息网 的缩写 也可以简称为Web 中文名字为 万维网 通过万维网 人们只要通过简单的方法 就可以迅速地获得世界范围丰富的信息资料 由于用户在通过Web浏览器访问信息资源的过程中 无需关心一些技术细节 且界面友好 因而Web服务在Internet上一推出就受到了热烈的欢迎 得到迅速发展 56 12 2 WWW的工作原理WWW中的信息资源主要由一篇篇的Web文档 Web页 为基本元素构成 这些Web页采用超文本 HyperText 的格式 即可以含有指向其它Web页或其本身内部特定位置的超级链接 可以将链接理解为指向其它Web页的 指针 链接使得Web页交织为网状 使Internet成为一个巨大的信息网 当用户从WWW服务器取到一个文件后 要能在自己的屏幕上正确无误地显示出来 由于将文件放入WWW服务器的人并不知道将来阅读这个文件的人到底会使用哪一种类型的计算机或终端 要保证每个人在屏幕上都能读到正确显示的文件 必须用某种各类型的计算机都能 看懂 的方式来描述文件 于是就产生了HTML超文本标记语言 56 13 3 WWW的核心 HTTP协议WWW服务器使用的主要协议是HTTP协议 即超文本传输协议 1 HTTP协议简介HTTP是一个属于应用层的面向对象的协议 适用于分布式超媒体信息系统 它于1990年提出 经过几年的使用与发展 得到不断地完善和扩展 2 HTTP协议的运作方式 56 14 1 1 3什么是ASP和ASP NETASP ActiveServerPage 是由微软提出的一种动态网页构架 具体来看它是一种包含了使用VBScript或JavaScript脚本程序代码的网页 当浏览器浏览ASP网页时 Web服务器就会根据请求生成相应的HTML代码然后再返回给浏览器 这样浏览器端看到的就是动态生成的网页 ASP可以比较简单地与数据库和其它程序进行交互 在了解了VBScript或JavaScript的基本语法后 只需要清楚各个组件的用途 属性 方法 就可以轻松编写出自己的ASP系统 ASP的网页文件的扩展名是 ASP 56 15 ASP Net和ASP的区别不仅在于功能的增强 更在于编程思维的转换 ASP使用VBScript及JavaScript这样的脚本语言混合html来编程 这些脚本语言属于面向结构的编程语言 而非面向对象 会产生以下问题 1 代码逻辑混乱 难于管理 ASP是脚本语言混合html编程 所以很难看清代码的逻辑关系 且随着程序的复杂性增加 使得代码的管理十分困难 从而造成出错或这样那样的问题 2 代码的可重用性差 由于是面向结构的编程方式 并且混合html 所以可能页面原型修改一点 整个程序都需要修改 无法实现代码重用 56 16 而ASP Net则摆脱了ASP使用脚本语言来编程的缺点 理论上可以使用任何编程语言包括C VB JavaScript等等 ASP Net支持面向对象的一切特性 比如封装性 继承性 多态性等等 这就解决了刚才谈到的ASP的弱点 封装性使得代码逻辑清晰 易于管理 并且应用到ASP Net上就可以使业务逻辑和Html页面分离 这样无论页面原型如何改变 业务逻辑代码都不做任何改动 继承性和多态性使得代码的可重用性大大提高 可以通过继承已有的对象最大限度保护以前的投资 56 17 1 2Dreamweaver8入门 1学时 1 2 1Dreamweaver8简介Dreamweaver8是一款专业的网页编辑器 主要特点如下 能对Web站点 Web页和Web应用程序进行集成的设计开发能快速创建页面而无需编写代码 可视化能力强 能查看和管理站点元素或资源能与Fireworks或Flash交换信息并优化工作流程可导入HTML文档而不需重新设置代码格式 可使用服务器技术 如ASP NET ASP JSP和PHP等 生成由动态数据库支持的Web应用程序 可以创建自己的对象和命令 修改快捷键 编写JavaScript代码来扩展自身的功能 56 18 1 2 2了解Dreamweaver8工作区要方便使用Dreamweaver8就应该对它的工作环境有全面认识 应了解Dreamweaver工作区的基本概念 了解如何选择选项 如何使用检查器和面板以及如何设置适合您工作风格的参数等 Dreamweaver工作区使您可以查看文档和对象属性 工作区还将许多常用操作放置于工具栏中 使您可以快速更改文档 1 工作区布局Windows下 Dreamweaver提供了一个将全部元素置于一个窗口中的集成布局 在集成的工作区中 全部窗口和面板都被集成到一个更大的应用程序窗口中 56 19 Dreamweaver8工作区布局 视图选择 56 20 1 2 3创建一个简单网页下面介绍创建一个简单网页的步骤 1 启动Dreamweaver 选择 文件 菜单 新建 弹出 新建文档 对话框 如下图示 2 在 类别 列表中 选择 基本页 在 基本页 列表框内选择 HTML 再点按钮 如下图所示 然后在文档窗口中对新页面进行编辑 56 21 1 3HTML语言1 3 1HTML概述1 简介HTML即超文本标记语言 所谓标记语言 MarkupLanguage 是用标记来表示文本或其他媒体对象 如图像 声音等 从而制作成超文本文件 网页 标记是描述HTML文件结构的标识符 它规定了HTML文件的逻辑结构 并且控制网页的显示方式 HTML的标记不区分大小写 例如和等价 1 标记的功能HTML标记的功能是 标记文件结构 设定文字 图像 表格 表单等在浏览器上的显示风格和位置 嵌入脚本 实现动态网页及多媒体等 2 标记的构成标记是由符号 和括在其中的命令字符串组成 标记有双标记和单标记两种 双标记有开始标记和结束标记 且须成对出现 例如 是文件的开始标记和结束标记 是网页内容的开始和结束标记 单标记只有开始标记而没有结束标记 例如 标尺线标记等 另外 有的标记例如 分段标记 可以写为双标记 也可以写为单标记 56 22 3 标记的表示方法HTML的标记有3种表示方法 a 文本b 文本c 第3种表示方法 单标记 仅用于一些特殊的标记 例如 表示强制换行 它没有与之对应的 4 标记的属性属性用来进一步说明标记 放在开始标记内 例如颜色 对齐方式 高度和宽度等 各属性间以空格分隔 标记的常用属性如下 a 对齐属性alignalign left左对齐 默认 align center居中对齐align right右对齐align justify两端对齐 56 23 b 外观属性width 像素值或百分比对象宽度height 像素值或百分比对象高度c 色彩属性color RRGGBB前景色bgcolor RRGGBB背景色其中 颜色值可用英文颜色名或十六进制 红绿蓝 的颜色值 如下表所示 56 24 2 HTML文件结构HTML文件是以版本声明开始 主要由头部 HEAD 和主体 BODY 两部分组成 头部用于文件命名及文件的相关说明 主体 BODY 定义浏览器上页面的显示内容 HTML文件的构成骨架如下表所示 56 25 1 文件头部在文件标记之后 用和定义头部 头部中又可以包括 等标记 用来定义网页的标题 在浏览器最上方的标题栏中显示 网页的标题应尽量使用直接 概括性的文字 标题一般用来作为搜索引擎搜寻网页的线索 如果无标题 浏览器用文件名或Untitled 无标题 等字样代替 基点标记指定了HTML文档的基地址 用来定义其后所有链接的起点 对文档中引用的其他文件的表示形式就可以从这个基点开始 说明一些与文档有关的信息 如文档的作者 关键内容 所用语言等 它会被搜索引擎等程序使用 用来连接外部文件 56 26 2 文件主体文件主体位于头部之后 以开始 以结束 它用来定义网页上显示的内容和显示格式 是整个网页的核心 在和之间 可以包含 等标记 标记中还可以有以下常用属性 background 设置网页背景图案 bgcolor 设置网页背景色 默认为白色 text 设置文本颜色 默认为黑色 link 设置尚未被访问过的超文本链接的颜色 默认为蓝色 vlink 设置已被访问过的超文本链接的颜色 默认为紫色 例如 将背景图像设为photo6 gif 背景色设为绿色 3 注释HTML使用 表示注释部分 注释可以有多行 注释的内容不会被执行 56 27 1 3 2网页中的文本使用网页中文本的文字风格和布局设计在网页设计中非常重要 例如 标题字的大小 是否居中及各级标题的设置 文字字体及颜色的设定 文章分段及段落的风格 页面的整体布局等 都是在网页设计中必须考虑的问题 1 标题标题是一篇文章或一段文本的题目 是以某种方式被加强 被突出的词组或短语 在网页设计中 使用标记设定标题 格式为 标题是一个双标记 标记中的n值可取1 6的整数 取1时文字最大 取6时最小 默认为 这样 共有6级标题可供使用 56 28 例1 1 标记的应用 运行结果如下图所示 软件学院教授简介定义一条标尺线 线粗为4张光明教授张光明教授 男 1940年10月诞生于河北省石家庄市 张光明教授研究方向张光明教授研究成果注 nbsp为空格符 56 29 2 文字大小和颜色 1 使用标记文字大小和颜色使用标记的size属性可以设定一段文本的文字大小 格式为 文本size的取值范围为1 7 中n取值范围为1 6 字的大小两者差不多 但size取7时最大 而中n取1时最大 标记的color属性设定一段文本的文字颜色 格式为 文本例如 文字颜色为白色或文字颜色为红色 2 使用标记的text属性设置整个文档的文字颜色标记中的text属性可用来设定整个网页的文字颜色 格式为 例如 56 30 3 换行和分段 1 强制换行强制改行使用标记 位于行的末尾 无结束标记 2 段落段落标记用于分段 位于前段的末尾 并使前段与后段之间加一行空白 段落标记可以省略结束标记 3 标尺线标尺线标记在前 后两个段落之间插入一条标尺线 标记中的width属性用来控制标尺线的长度 例如 线长为50像素宽线长为屏幕宽度的50 标记的size属性控制标尺线的粗细 noshade属性将标尺线设置为黑色 align属性指定标尺线的位置 例如 右对齐左对齐居中 默认 的color属性控制标尺线的颜色 如 56 31 4 文本 或图像 的布局 1 居中对齐 或标记中使用align属性 或者使用标记 文本或图像或文本或图像 n 1 2 3 4 5 6 或文本或图像 2 右对齐 或标记中使用align属性 文本或图像或文本或图像 3 左对齐 或标记中使用align属性 文本或图像或文本或图像 4 使用标记要在许多段落中设置对齐方式时 常使用 层 标记 文本或图像居中文本或图像左对齐文本或图像右对齐 56 32 1 3 3网页中的图像使用1 网页中加入图像 使用标记 src属性指示图像文件 格式如下 其中 图像文件名 可以用绝对路径也可以用相对路径 文件可以是gif jpg或png类型 图像文本性说明 用在不能显示图像的浏览器 或浏览器显示图像时间太长时先显示此文字内容 xxx htm 指明关于图的详细说明以补充alt属性的简单说明 2 图像的尺寸设定 使用标记的width和height属性设定 格式为 其中 x和y可以是像素值 也可以取百分数 例如 56 33 3 图像和文本布局与文本布局一样 图文混排时 图文在垂直方向的对齐及相互间的左右位置关系也使用align属性 格式为 文本文本其中 位置参数可以是 top 顶对齐 middle 中央对齐 bottom 底边对齐 left 图像在文本左边 和right 图像在文本右边 例1 2 图像与文本混排 图像和文本混排文字与图像垂直方向中央对齐 文字与图像垂直方向底部对齐 文字与图像垂直方向顶部对齐 56 34 1 3 4网页中的列表使用在网页中使用列表 可以清楚地看到定义顺序 信息排序及信息的相对重要性 HTML提供了丰富的列表元素 用于在HTML文档中建立列表 列表中并列的信息 数据 称为项 项前可以添加符号或序号 也可以各项并列而不加任何记号 带序号的列表称为有序列表 带符号的列表称为无序列表 各项并列而不加任何记号的列表称为定义列表 1 无序列表建立无序列表可以使用标记和项目标记 格式为项目项目 项目标记是一个单标记 例1 3 设定无序列表 WWWBrowserHTMLHomePage注 无序列表可以嵌套 56 35 2 有序列表 1 创建有序列表在应用中 人们更多地使用带序号的列表 以便清楚地表达并列信息的顺序 使用标记 可以实现有序列表 格式为项目1项目2 例1 4 有序列表 WWWBrowserHTMLHomePage 56 36 2 有序列表序号的种类有序列表序号可以设定 在或标记内使用type属性可以设定5种序号 即阿拉伯数字 1 大小写英文字母 A 和 a 大小写罗马数字 I 和 i 格式为或说明 省略type属性时自动设定为阿拉伯数字 的作用范围为整个列表 的作用范围是当前项 行 3 设定起始序号有序列表的序号可以从任意数字开始 方法是 在标记内使用start属性或在标记内加入value属性 格式为或其中 x为任意整数 注意 的作用域为当前标记 的作用域为从当前项开始直到当前的标记为止的各项 56 37 例1 5 设定序号的种类 大字HTML入门WWWBrowserHTML网页HTML案例教程斜体WWW网页网页文本的布局在网页中插入图像列表表格 56 38 1 3 5超文本链接浏览Web页时 我们能快速从一个Web网页跳到另一个相关的Web网页 就是在这些文件之间建立了超文本链接 1 创建网页间的链接创建链接前 先准备好链接资源 即制作好目标文档 并存放在相应的位置 有确切的URL 链接资源包括HTML文件 图像文件 声音文件及视频文件等 在网页上建立的超文本链接也称为锚点 anchor 由标记定义 锚点用于定义HTML文档段落间或文件间的超级链接 同时也定义了包含超文本链接目标的命名位置 建立超文本链接语法格式为 文本或图像注意 必须使用结束标记 格式中 href意为超文本引用 URL是一个有效的链接资源的地址 文本或图像 是在浏览器上显示的热点区域 格式中Href属性定义一个URL 作为有效的链接资源的地址 56 39 注意 依链接资源存放位置不同 链接可分为全局链接和局部链接 如果资源文件存放在服务器自己的目录中 称为局部链接 与本服务器以外文件的链接称全局链接 在全局链接中 http写入的URL称为绝对路径 例如 热点文本文件之间的局部链接 站内链接 有下面 种情况 链接同一目录内的文件 链接下一级目录内的文件 链接上一级目录内的文件 链接平级目录内的文件 链接同一个目录内的文件时仅写目标文件名即可 不用带路径 热点文本创建文件间的链接的步骤如下 1 编写网页并在网页中设定热点区域 2 编写其他欲链接的网页文件 即建立好目标资源 3 在网页文件中 使用热点文本建立到目标网页的链接 4 在被链接的网页文件中 可以使用返回建立到源网页的链接 56 40 例1 6 链接同一目录内的文件 网页文件2 8 htm上一页Internet是当前世界上最大的计算机网络 Internet是冷战时代美国军方开发使用的网络 而后作为学术间使用 近年来Internet迅速拓展 成为拥有一亿多用户的世界性网络 返回 56 41 文件间的链接 56 42 注 标记用来控制文字的移动 例如 文字在移动标记的主要属性有 direction 控制移动方向 可取 left right up down 四个值 behavior 移动方式 可取 scroll 循环移动 slide 只走一圈 alternate 来回移动 loop 循环次数 不输入表示无限次循环 scrollamount 移动快慢 数值越大越快 scrolldelay 每移动一步之后的延时 单位是毫秒 height width 移动区域的高和宽 单位像素 bgcolor 移动区域的背景色实例 滚动文字 56 43 2 图像链接图像链接是将图像设定为热区 单击图像则转移到被链接的文本或其他文件 建立图像链接的格式为 例如 单击图像book1 gif转移到网页ddd1 htm 56 44 1 3 6表格将文本或图像按一定的行 列规则进行排列称为表格 在网页中使用表格 可以使一些数据信息更容易浏览 HTML有极强的表格能力 可以把文字 图像 声音甚至视频组织在表格中 也可以使用表格实现对文本 图像或其他对象的页面布局 1 创建表格网页中建立一个表格的基本格式为表项1表项2 表项n表项1表项2 表项n 1 标记使用标记和定义表格 表内容放在开始标记和结束标记之间 定义表格内容的标记有行定义标记和列定义标记 56 45 标记内常用以下属性定义表格的外观风格 border n 定义表格边框的粗细 n取整数 单位为像素 bordercolor 颜色值 定义表格边框的颜色 summary 简要说明 对表格的格式和内容简要说明 bgcolor 设定表格的背景色 background 设定表格的背景图像 width n n 设定表格的宽度 height n 设定表格的高度 align left right center 定义表格的水平对齐方式 cellpadding 调节表单元线和数据之间的距离 cellspacing 调节表单元与边框间的空白 rules 参数 设定有无表格线 align left right all 设定表格与文本的相互位置 56 46 2 标记表示表格的一行开始 可以是单标记 也可以是双标记 标记的属性主要如下 bgcolor 设定表格一行的背景色 align left right center 定义表格一行的表数据项的水平对齐方式 3 标记为列定义标记 表格的数据写在列和之间 标记的属性主要如下 bgcolor 设定背景色 align left right center 定义表数据项水平对齐方式 bodercolordark 颜色值 定义表格单元边框的颜色 width n n 设定表格单元的宽度 height n 设定表格单元的高度 56 47 例1 7 建立表格 序号ID姓名性别年龄业务专长技术职称评聘年月101李大力男55计算机网络教授1990 1102张芝兰女45计算机硬件系统教授1996 11 说明信息 56 48 2 表题表题是表格的内容声明 HTML使用标记给表格添加表题 并使用align属性定义表题的位置 格式为表题其属性值如下 top 表题放在表的上部bottom 表题放在表的下部left 表题放在表上部的左侧right 表题放在表上部的右侧 56 49 3 表头使用标记可以在表的第1行或第1列加表头 表头写在开始标记和结束标记之间 并用醒目的粗体字显示 在表的第1行加表头的格式为表头1表头2表头3表项1表项2表项3表项4表项5表项6在表的第1列加表头的格式为表头1表项1表项2表头2表项3表项4表头3表项5表项6 56 50 4 表格边框通过给表格加上有立体感的表边框 调节表元素边线和元素内的数据之间的空白间距 变化表格元素边线的宽度 可以把表格制作得更生动 更美观 在标记内附加frame r