web网页制作ppt课件.ppt

1 第一章Web网站架构与HTML基础 2 内容提要 Web的特点和结构Web服务器的配置创建虚拟目录HTML基础 3 Web的特点和结构 本章介绍WWW的概念 Web服务器配置 创建虚拟目录和浏览器IE6 0配置 一 WWW的概念1 什么是WWW WWW是WorldWideWeb的缩写 简称为Web 万维网 WWW起源于1989年3月 是由欧洲粒子物理实验室CERN theEuropeanLaboratoryforParticlePhysics 开发的主从结构分布式 客户机 服务器 模式 超文本系统 1992年1月 Web的第一个版本在瑞士日内瓦问世 4 Web的特点和结构 WWW是一个全球性的信息系统 使计算机能够在Internet上相互传送基于超媒体的数据信息 WWW也可以用来建立Intranet 企业内部网 的信息系统 WWW具有三个统一 1 统一的资源命名方式 URL 统一资源定位符 即网址 2 统一的资源访问方式 HTTP 超文本传输协议 3 统一的信息组织方式 HTML 超文本标记语言 5 Web的特点和结构 2 WWW的特点分布式的信息资源 统一的用户界面 支持各种信息资源和各种媒体的演播 广泛的用途 6 Web的特点和结构 3 WWW的结构WWW是成千上万个网站连結而成的页面式网络信息系统 WWW采用 客户机 服务器 结构 7 Web的特点和结构 网页存放在被称为Web服务器 WebServer 的计算机上 等待用户访问 8 Web的特点和结构 4 Web技术经历了3个发展阶段第一代 提供对静态网页的管理和访问 第二代 提供对动态网页的访问和显示 第三代 除动态网页生成和访问之外 还提供基于Web的联机事务处理能力 静态网页是从放置到服务器以后 直到发送给浏览器不会发生更改的网页 通常用HTML语言编写其代码 保存为 htm文件 动态网页是在发送到浏览器之前由应用程序服务器修改的网页 动态网页的源文件可用HTML语言和VBScript或JavaScript等脚本语言编写 保存为 asp文件 也称为Web应用程序 9 Web的特点和结构 Web应用程序是用HTML语言和VBScript或JavaScript等脚本语言编写的动态网页源文件 也称为服务器端脚本 当从服务器请求这样一个页时 Web服务器先将该页传递给应用程序服务器进行处理 然后再将该页发送给浏览器 应用程序服务器是一种软件 它帮助Web服务器处理Web应用程序 以便生成动态网页 ASP ActiveServerPage动态服务器网页 是Windows系统所包含的应用程序服务器软件 10 Web服务器配置 二 Web服务器的配置1 什么是Web服务器 Web服务器也称为HTTP服务器 它是响应来自浏览器的请求 并且发送出网页的软件 当访问者在浏览器的地址文本框中输入一个URL 或者单击在浏览器中打开的网页上的某个链接时 便生成一个网页请求 常见的Web服务器有 MicrosoftInternetInformationServer IIS MicrosoftPersonalWebServer PWS ApacheHTTPServerNetscapeEnterpriseServerSunONEWebServer 11 Web服务器配置 2 五种常见的Web应用程序服务器Dreamweaver可以使用以下五种服务器技术的任何一种设计Web应用程序 ColdFusion 可用于Windows和Solaris操作系统平台的动态服务器网页技术 ASP ActiveServerPage 动态服务器网页技术 ASP NET NET平台的动态服务器网页技术 JSP JavaServerPage Java服务器网页技术 PHP PersonalHomePage 个人主页技术 每种技术都与Dreamweaver中的一种文档类型相对应 12 Web服务器配置 ASP JSP PHP的比较 13 Web服务器配置 选择哪一种Web应用程序技术取决于多个因素 其中包括对各种脚本语言的熟悉程度以及要使用的应用程序服务器 如果采用ColdFusionMX服务器 则可以选择ColdFusion 如果采用IIS服务器 则可以选择ASP或ASP NET 如果采用PHP服务器 则可以选择PHP 如果采用JSP服务器 则可以选择JSP 本课程选择了Windows的ASP动态网页技术 14 Web服务器配置 3 两种Web系统配置方案 一种配置是将IIS或PWS安装在本地Windows计算机硬盘中 另一种是将IIS或PWS安装在远程Windows计算机硬盘中 15 Web服务器配置 4 如何用Windows操作系统建立Web服务器 可以安装下列系统之一 1 Windows2000 2003Server和IIS5 0 2 WindowsXP和IIS5 1 3 Windows98 2000Professional和PWS 其中IIS InternetInformationService Internet信息服务器 PWS PersonalWebService 个人Web服务 16 Web服务器配置 Windows2000 2003Server和IIS5 0安装在Windows2000Server软件里带有IIS5 0 插入Windows2000Server光盘 自动启动 按照提示进行安装 同时自动安装IIS5 0 Windows2003Server不自动安装IIS 若要安装IIS 可以单击 开始 程序 管理工具 配置服务器 选择 高级 选项 打开显示可供安装的组件的对话框 也可以在控制面板中使用 添加 删除程序 17 Web服务器配置 注意 由于ASP处理程序会随着IIS自动安装 所以 运行ASP的应用程序服务器会随着Web服务器的建立而自动地建立 18 Web服务器配置 如何在WindowsXP中安装IIS 1 单击 开始 控制面板 双击 添加或删除程序 2 单击 添加 删除Windows组件 3 出现 Windows组件向导 单击 下一步 4 在 Windows组件 列表中 选中 Internet信息服务 IIS 5 单击 下一步 然后根据提示操作 在安装后 可以启动浏览器 输入地址 localhost 若显示其网页 则表示IIS正常安装 演示 19 Web服务器配置 5 服务器上的根文件夹Inetpub wwwroot 假定读者在计算机的D 盘中安装了WindowsXP操作系统 那末 该系统会自动创建根文件夹D Inetpub wwwroot 默认情况下 Web服务器从D Inetpub wwwroot文件夹提供网页 Web服务器将根据来自Web浏览器的HTTP请求 提供此文件夹中的任何页或其子文件夹中的任何页 在D Inetpub wwwroot文件夹中可以创建子文件夹 例如 MyPage 用以存放一组网页源文件 演示 20 Web服务器配置 6 如何设置默认网站主目录 根文件夹 1 单击 开始 控制面板 性能和维护 管理工具 Internet信息服务 展开 本地计算机 列表 展开 Web站点 文件夹 然后展开 默认Web站点 文件夹 右击 默认网站 单击 属性 2 输入默认网站IP地址 若本机作Web服务器 则用127 0 0 1 3 输入默认网站的主目录 以及为该文件夹设置脚本权限 现在已完成了Web服务器的配置 它将根据浏览器的请求 提供根文件夹中的网页 假如建立网页文件test htm 将它存放到本机默认网站的主目录d inetpub wwwroot下 那末 其浏览地址为 127 0 0 1 test htm 演示 21 创建虚拟目录 三 如何创建虚拟目录1 存放网页源文件的两种做法将网页文件保存到默认网站的主目录里 如上节所述 默认网站的主目录直接采用Windows系统已经建立的d Inetpub wwwroot根文件夹 将网页文件保存到默认网站的主目录之外 这就需要建立一个虚拟目录 在建立虚拟目录的过程中指定虚拟目录及其实际目录 从而建立虚拟目录和实际目录的联系 22 创建虚拟目录 2 什麽是虚拟目录虚拟目录是实际目录的别名 它代表存放网页的实际目录 以便用在网址中代替实际目录 虚拟目录的名称可以与实际目录的名称相同 也可以不同 虚拟目录在磁盘目录中并不存在 实际目录是存放网页内容的目录 例如 存放网页文件test htm的实际目录为d x1 若为该目录设置一个别名 即虚拟目录zhang 则虚拟目录Zhang就可以用在网址127 0 0 1 zhang test htm中代表存放网页的实际目录d x1 23 创建虚拟目录 3 设置默认网站的虚拟目录单击 开始 控制面板 性能和维护 管理工具 Internet信息服务 展开 右击 默认网站 单击 新建 虚拟目录 详细创建过程参见教材图1 7 图1 12 演示 24 IE6 0的配置 四 网页浏览器IE6 0的配置浏览器IE6 0的配置可以使用浏览器的 工具 和 Internet选项 菜单命令进行设置 也可以通过修改操作系统的注册表进行设置 本节介绍如何使用 工具 和 Internet选项 进行下列设置 1 设置Internet连接 1 启动InternetExplorer 2 单击 工具 Internet选项 出现Internet选项对话框 3 单击 连接 选项卡 单击 建立连接 4 按照屏幕上的提示操作 演示 25 IE6 0的配置 2 设置起始页面 1 单击IE菜单栏中的 工具 Internet选项 出现Internet选项对话框 2 输入 主页 的 地址 例如 单击 确定 3 设置IE缓存在 Internet选项 对话框中 单击 设置 出现 设置 对话框 可以设置IE缓存 使用的磁盘空间 等 演示 26 IE6 0的配置 4 IE安全设置在 Internet选项 对话框中 单击 安全 出现 安全设置 对话框 其中主要包括ActiveX控件和插件 Java权限 JavaApplet和脚本 Cookies 文件下载或用户验证设置 可选择 禁用 或 启用 等 5 调整自动完成功能的设置在IE的 工具 菜单上 单击 Internet选项 单击 内容 标签 在 个人信息 区域 单击 自动完成 选中要应用 自动完成 功能的选项前面的复选框 演示 27 IE6 0的配置 6 清除已访问过的网页为了加快浏览速度 IE会自动把浏览过的网页保存在系统盘的 TemporaryInternetFiles文件夹内 当用户不再需要这些网页时 在该文件夹下全选且删除即可 或者 在 常规 标签下单击 Internet临时文件 项目的 删除文件 按钮 选中 删除所有脱机内容 单击 确定 按钮即可 这种方法不太彻底 还会留少许Cookies在文件夹内 在 常规 标签下 删除文件 按钮旁边还有一个 删除Cookies 按钮 通过它可以很方便地删除遗留的Cookies Cookies 小甜饼 是客户端逐块保存用户信息的小文本文件 演示 28 HTML基础 一 HTML的概念1 什么是HTML 超文本标记语言 HTML HyperTextMarkupLanguage 是用于设计网页源文件 网页文档 的语言 每一个页面的代码保存为一个网页源文件 htm文件 八十年代初 HTML由万维网联盟 W3C WorldWideWebConsortium 制订 HTML包括一些定义页面内容和格式的符号 称为标记 它能够将文本 图像 声音和动画结合在一个网页文档中 这些文档可以通过Web浏览器显示 还可以通过超链接以访问其它的信息资源 后来 进一步推出了XML 扩展标记语言 该语言可以由程序员自己定义标记 29 HTML基础 2 什么是标记 标记是网页文档中的一些有特定意义的符号 这些符号指明如何显示文档中的内容 标记总是放在三角括号中 大多数标记都成对出现 有开始标记和结束标记 结束标记和开始标记所用的字符相同 只是前面加一个斜杠 例如 用于标记一个自然段 标记可以具有相应属性即各种参数 如size color text width和noshade等 例如 30 HTML基础 标记通常可以分成两种 第一种用来指定网页上的元素或元素的样式 例如 指定一个自然段及其字体和颜色 自然段内容 第二种用来指向其它的资源 例如 指定一个链接地址 武汉大学指定一个图片文件 31 HTML基础 3 什么是超文本 超媒体和超链接 超文本是网页上具有链接功能的文字 例如 娱乐新闻电影 超媒体是网页上具有链接功能的多媒体 超链接是网页上连接其它网页或网页上指定位置的超文本和超媒体 超链接分为文字和图像 包括动画 两种 网页中的一段文字 一副图像或图像的某一个部分等都可以定义为超链接 32 HTML基础 二 如何编写和浏览HTML网页文档启动IE 然后使用 查看 菜单中的 源文件 菜单项 进入记事本 就可以输入网页源文件了 在输入完之后 另存为 htm文件 或者直接进入记事本 输入网页源文件 在输入完之后 另存为 htm文件 选择保存类型为 所有文件 在浏览器中输入该文件名 就能浏览HTML源文件的网页效果 33 HTML基础 例如 学生选课系统网页制作练习 演示 34 HTML基础 三 HTML的常用标记1 HTML文档的结构标记用来指明一个HTML文档的基本结构 1 文件标记 整个HTML文档内容均在 标记之中 2 头部标记 整个HTML文档分头部和主体部分 头部使用 标记标识 凡是在此标记之内的内容 例如标题等 均属于头部信息 头部信息不显示在Web页中 35 HTML基础 3 头部标题标记 在此标记之间的内容将作为标题显示在浏览器的标题栏 注意 标记只能放在 标记之间 4 主体标记 主体是Web页的主要部分 用 标记定义的信息将显示在Web页中 例如 见下页 36 HTML基础 结构标记示例斜体字文本 演示 37 HTML基础 2 格式标记 1 段落标记 标记用来创建一个段落 在此标记之间的文本将按照段落的格式显示 2 换行标记 是一个很简单的标记 它没有结束标记 用来创建一个换行 3 两边缩进标记 在 标记之间的文本将按照两边缩进的方式显示 下面一一介绍在 标记之间常用的各种标记 38 HTML基础 4 列表标记 用来创建一个列表 用来创建列表中的上层项目 用来创建列表中最下层项目 和都必须放在标记之间 例2 2 创建一个普通列表 39 HTML基础 一个普通列表中国城市北京上海广州美国城市华盛顿芝加哥纽约 演示 40 HTML基础 5 标有数字或圆点的列表标记 标记用来创建一个标有数字的列表 标记用来创建一个标有圆点的列表 标记只能在或标记之间使用 此标记对用来创建一个列表项 若放在之间 则每个列表项加上一个数字 若在之间 则每个列表项加上一个圆点 41 HTML基础 例2 3 标有数字的列表与标有圆点的列表 42 HTML基础 标有数字与圆点的列表中国城市北京上海广州美国城市华盛顿芝加哥纽约 演示 43 HTML基础 6 分段标记 标记对用来排版大块HTML段落 也用于格式化表 此标记的用法与标记非常相似 同样有align对齐方式属性 align属性 它用来说明对齐方式 语法是 align可以是Left 左对齐 Center 居中 和Right 右对齐 三个值中的任何一个 例如 表示标记中的文本居中显示 44 HTML基础 3 文本标记 1 预处理标记 表示标记之间的文本原有格式如word格式仍有效 2 六级标题标记 是最大的标题 则是最小的标题 如果要在HTML文档中输出标题 那麽可以使用六对标题标记的任何一对 45 HTML基础 3 字体标记 之间的文本以黑体字的形式输出 之间的文本以斜体字的形式输出 之间的文本以下加一划线的形式输出 4 强调加重标记 用来输出需要强调的文本 通常是斜体加黑体 则用来输出加重文本 通常也是斜体加黑体 46 HTML基础 5 字体的大小颜色标记 可以指定输出文本的字体大小 颜色 它主要两个属性size和color size属性用来指定字体的大小 可以取值 1 1和 1 color属性用来指定文本的颜色 颜色的取值是十六进制RGB颜色码或HTML语言给定的颜色名称 例如 ff0000 引号内的rrggbb是用六位十六进制数字表示的RGB 即红 绿 蓝三色的组合 颜色 ff0000对应的是红色 47 HTML基础 Html语言所给定的颜色名称有 Black White Green Maroon Olive Navy Purple Gray Yellow Lime Agua Fuchsia Silver Red Blue和Teal 例如 size取值 1 color取值 red 时的文本表示标记之间的文本按大小为 1 颜色为红色显示 48 HTML基础 例 文本标记的综合示例 49 HTML基础 文本标记的综合示例最大的标题使用h3的标题最大的标题黑体字文本斜体字文本下加一划线文本强调的文本加重的文本size取值 1 color取值 red 时的文本 演示 50 HTML基础 4 链接标记 1 超链接标记 在标记对之间可指定作为超链接的文本或图像 使用标记指定图像 例如 指定超链接及其文本 武汉大学网站 武汉大学网站或者 指定超链接及其图像 d pic1 gif 在上例中 href的值是武汉大学的网址 href 缩写 httpreference含义为http引用 51 HTML基础 href的值也可以是mailto 形式 即发送E Mail形式 语法为 这就创建了一个自动发送电子邮件的链接 mailto 后边紧跟想要自动发送的电子邮件的地址 即E Mail地址 例如 链接到我的电子信箱abc 这是我的电子信箱 E Mail信箱 52 HTML基础 还具有target属性 此属性用来指明显示的目标窗口 如果不使用target属性 当浏览者点击了链接之后将在原来的浏览器窗口中显示HTML文档 若target的值等于 blank 点击链接后将会打开一个新的浏览器窗口显示HTML文档 例如 进入 并且在新窗口中显示网页 在新窗口中显示 53 HTML基础 2 标签标记 标签标记需要结合标记使用 name属性不可缺少 标记用来在同一网页中创建一个标签 即做一个记号 即在同一网页中创建链接 以便转到同一网页中有标签的地方并显示 例如 在页顶创建一个标签此处创建了一个标签 要找到标签所在地 就必须使用标记 例如 点击此处将转到标签 Top 的地方显示 注意 href属性的值若是标签名 必须在标签名前头加一个 号 54 HTML基础 例 链接标记的综合示例链接标记的综合示例创建标签处欢迎想要学习网页制作的同学访问网站武汉大学网站 55 HTML基础 本网站的主要内容在新窗口中显示欢迎给我来信 我的E Mail是 abc 点击此处回到标签处 可以建立HTML源文件和作为超链的图像文件d Inetpub wwwroot web gif 在浏览器中显示执行结果 56 5 图像标记和多媒体标记 1 图像标记 将图形文件嵌入到网页文档中的当前位置 例如 网页文档与图形文件logo gif在同一个目录下 则可以将代码写成 假如图形文件放在网页文档所在目录的一个子目录 images 下 则代码应为 此外 标记还有alt 文字代替 align 对齐 border 边框 width 宽度 和height 高度 属性 HTML基础 演示 57 假如图形文件放在网页文档所在目录的上层目录 如home 下 则相对路径就必须是准网址 即用 表示网站 后边紧跟文件在网站中的路径 例如 home是网站下的一个目录 则代码应为 例如 home是网站下的目录king下边的一个子目录 则代码应为 HTML基础 58 例 图像标记举例图像标记示例 HTML基础 演示 若事先在网站根目录中存放一幅图像logo468 60 gif 则可以在网页中显示它 alt 网页制作 属性表示在网页中可以用文字 网页制作 代替该图像先行显示出来 59 2 多媒体标记A 设置音乐播放的链接在Windows中 可播放的音乐文件格式常有au mid及wav三种 若要提供音乐文件让浏览者播放 则可建立指向音乐文件的超链接 例如 甜美音乐B 设置影像播放的链接常见的影像文件有mov mpg和avi 可建立超链接到影像文件 当浏览者单击超链接时 将会调用WindowsMediaPlayer 进行影像文件播放 例如 本市交通 HTML基础 60 C 直接将音乐或影像嵌入网页可以用标记 即 若 播放次数 设为TRUE 则无限次播放 直到单击关闭或停止 若设为NO 默认值 则只播放一次 D 播放网页背景音乐可运用标记 即 若 次数 设为Infinite 音乐将循环播放 直到网页关闭为止 HTML基础 61 6 表格标记 用于制作表格或网页结构 1 创建一个表格 2 和 创建表格中的每一行和每一格 3 创建表格头 例2 7 用表格标记创建下列表格 HTML基础 62 表格标记示例意大利英格兰西班牙 HTML基础 cellpadding设置格子边框与其内容之间的大小 valign是垂直对齐方式 colspan设置一个格子跨占的列数 rowspan设置一个格子跨占的行数 63 AC米兰佛罗伦萨曼联纽卡斯尔巴塞罗那皇家社会 HTML基础 64 尤文图斯桑普多利亚利物浦阿申纳皇家马德里 HTML基础 65 拉齐奥国际米兰切尔西米德尔斯堡马德里竞技 HTML基础 演示 66 7 表单标记 用于制作对话框 1 表单开始和结束标记 2 输入区标记 3 列表框标记 4 多行文本框标记 分别介绍如下 1 标记用来创建一个表单 也即定义表单的开始和结束位置 在标记对之间的一切都属于表单的内容 HTML基础 67 标记具有action method和target属性 action的值是处理程序的程序名 例如 当用