计算机网络课件第六章 网站构建及应用

1、2021年4月30日1 第六章 网站构建及应用 教学目标 教学重点 教学过程 2021年4月30日2 教学目标 了解网站构建的基本流程 掌握网页设计的方法 了解服务器端动态网页设计 2021年4月30日3 教学重点 掌握Dreamweaver 8的基本使用 理解HTML网页编码语言 2021年4月30日4 教学过程 网站建设概述 使用Dreamweaver 8设计网页 HTML语言 服务器端动态网页 2021年4月30日5 6.1 网站的建立 网站建设概述 网站开发工具 2021年4月30日6 6.1.1网站建设概述 1. 网站策划准备阶段 2. 内容设计与实现阶段： 3. 网站的发布与推广、

2、维护阶段 2021年4月30日7 6.1.2 网站开发工具网站开发工具 （1/5） 静态网页静态网页 静态网页就是标准的静态网页就是标准的HTML文件，其扩展名文件，其扩展名 为为.htm或或.html，它可以包含，它可以包含HTML标记、标记、 文本、声音、图像、动画、文本、声音、图像、动画、Java程序以及程序以及 客户端客户端ActiveX控件，这种网页不包含任何控件，这种网页不包含任何 脚本代码，在程序员开发好后不会自行改脚本代码，在程序员开发好后不会自行改 动。动。 2021年4月30日8 6.1.2 网站开发工具网站开发工具 （2/5） 客户端动态网页客户端动态网页 客户端动态网页

3、包含一些可在客户端浏览客户端动态网页包含一些可在客户端浏览 器中执行的脚本程序，这些程序可以在浏器中执行的脚本程序，这些程序可以在浏 览器中被解释执行，这些脚本可以根据用览器中被解释执行，这些脚本可以根据用 户的操作做出响应，实现这种动态效果的户的操作做出响应，实现这种动态效果的 语言主要有语言主要有JavaScript和和VBScript。 2021年4月30日9 6.1.2 网站开发工具网站开发工具 （3/5） 这种动态网页有很大的局限性。首先，客这种动态网页有很大的局限性。首先，客 户端动态网页中的脚本程序是程序员在设户端动态网页中的脚本程序是程序员在设 计网页的时候事先写好的，响应的内

4、容和计网页的时候事先写好的，响应的内容和 方法有限；其次，这些脚本程序在客户端方法有限；其次，这些脚本程序在客户端 是可见的，减低了网站的安全性。为了改是可见的，减低了网站的安全性。为了改 进客户端动态网页的问题，人们提出了服进客户端动态网页的问题，人们提出了服 务器端动态网页。务器端动态网页。 2021年4月30日10 6.1.2 网站开发工具网站开发工具 （4/5） 服务器端动态网页服务器端动态网页 服务器端动态网页中也包含脚本程序，但是当网页被访问时，这些脚本程序服务器端动态网页中也包含脚本程序，但是当网页被访问时，这些脚本程序 首先在服务器端运被解释执行，然后把执行的结果以一个新的纯首

5、先在服务器端运被解释执行，然后把执行的结果以一个新的纯HTML网页网页 返回客户端。在交互的过程中，客户端可以得到服务器处理的结果，但是源返回客户端。在交互的过程中，客户端可以得到服务器处理的结果，但是源 程序并不能在客户端看到，所以大大提高了网站的安全性。动态网页的文件程序并不能在客户端看到，所以大大提高了网站的安全性。动态网页的文件 扩展名不再是扩展名不再是.htm或或.html，而是与所使用的服务器端动态网页开发技术有关，而是与所使用的服务器端动态网页开发技术有关， 例如，使用例如，使用ASP。NET技术开发时，网页文件的扩展名是技术开发时，网页文件的扩展名是.aspx。 2021年4月

6、30日11 6.1.2 网站开发工具网站开发工具 （5/5） 静态网页 设计类 框架结构 类 FrontPage微软公司的Office套装软件之一，简单易学，适合初学者使用 Dreamweav er 由Macromedia公司开发的集网页制作和管理网站于一身的所见即 所得网页编辑器，它是第一套针对专业网页设计师特别发展的视 觉化网页开发工具 图形处理 类 Fireworks由Macromedia公司发布的一款专为网络图形设计的图形编辑软件 Photoshop 由Adobe公司出品的最流行的图像编辑软件，所设计的图像也可用 于网页图像 Flash由Macromedia公司发布的一款优秀网页动画设

7、计软件 动态网页 开发类 代码类 ASP.NET微软公司开发的用来在服务器端构建功能强大的web应用程序 JSP JSP(Java Server Pages)是由Sun Microsystems公司倡导、许多公司参 与一起建立的一种动态网页技术标准。 JSP技术是用JAVA语言作 为脚本语言的，JSP网页为整个服务器端的JAVA库单元提供了一个 接口来服务于HTTP的应用程序 PHP 一种超级文本预处理语言（PHP:Hypertext Preprocessor），在服务 器端执行的嵌入HTML文档的脚本语言，语言的风格有类似于C语 言，现在被很多的网站编程人员广泛运用 开发环境 类 Editp

8、lus 一个功能很全面的文本、HTML、程序源代码编辑器，方便输入和 编辑代码 Visual S Visual Studio .NET 是一套完整的开发工具，用于生成 ASP Web 应 用程序、XML Web services、桌面应用程序和移动应用程序 Webmatrix一款小巧的ASP.NET开发环境，方便安装，简单易用 2021年4月30日12 6.2 使用Dreamweaver 8设计网页 Dreamweaver最初由Macromedia公司推出， 是一款“所见即所得”的网页编辑工具， 与Flash、Fireworks 并称为 Macromedia的 “网页制作三剑客”， 2005年

9、4月，著名 图形软件开发商Adobe公司收购了 Macromedia，同年9月，Adobe公司正式推 出了Dreamweaver 8的版本，比之前的版 本具有更强的功能和灵活性。 2021年4月30日13 6.2.1 运行Dreamweaver 8 图6-1 “设计器”工作界面 2021年4月30日14 6.2.2 熟悉工作界面 （1/7） 1、编辑窗口： 打开Dreamweaver 8并建立空白页面后看到的白色区域就 是编辑窗口。 图6-2 编辑窗口 2021年4月30日15 6.2.2 熟悉工作界面 （2/7） 2、“插入”工具栏： 网页的内容多种多样，都可以被称为对象，简单的对象如文字、

10、图像、 表格等，复杂的对象包括导航条、程序等。大部分对象都可以通过 “插入”工具栏插入 图6-3 “插入”工具栏 2021年4月30日16 6.2.2 熟悉工作界面 （3/7） 单击“常用”旁边的向下箭头，可以打开 其他的插入对象 图6-4 其他插入对象 2021年4月30日17 6.2.2 熟悉工作界面 （4/7） 3、“属性”面板： 网页设计中的对象都有各自的属性，比如文字有字体、字号、对齐方 式等属性，图像有大小、链接等属性。所以要有“属性”面板，可以 对这些对象进行属性的修改。 图6-5 “属性”面板 2021年4月30日18 6.2.2 熟悉工作界面 （5/7） 4、“浮动”面板：

11、Dreamweaver中有很多的浮动面板，方便设计者使用，其实浮动面板 上的操作功能在菜单当中也有相应的命令。Dreamweaver的浮动面板 有“属性”面板、“设计”面板、“代码”面板、“应用程序”面板、 “文件”面板、“答案”面板等等。“浮动”面板可以通过面板左上 角的三角图标打开或折叠起“浮动”面板 图6-6 “浮动”面板 2021年4月30日19 6.2.2 熟悉工作界面 （6/7） 当需要更大的编辑窗口时，可以按F4快捷 键，这样所有的面板都会隐藏。再按下F4 键，隐藏的面板又会在原来的位置上出现。 对应的菜单命令是“窗口”|“显示面板（隐 藏面板）”。 2021年4月30日20 6

12、.2.2 熟悉工作界面 （7/7） 5、网页编辑视图： 在编辑窗口上方有一个“文档”工具栏， 如图6.7所示，左侧前三个按钮对应三种视 图，分别是代码、拆分和设计。 6-7 “文档”工具栏 2021年4月30日21 6.2.3 站点管理 （1/2） 1）创建新站点 图6-8 “站点定义”对话框 2021年4月30日22 6.2.3 站点管理 （2/2） 2）删除站点 图6-9 “编辑站点”对话框 2021年4月30日23 6.2.4设计主页 新建一个网页文件 图6-10在“文件”面板中管理网页文件 2021年4月30日24 6.2.5 CSS样式的使用 （1/4） CSS是Cascading

13、Style Sheets（层叠样式 表），如果在网页制作时采用CSS技术， 可以轻松而又有效地对页面的整体布局、 字体、颜色、链接、背景和其它效果实现 更加精确的控制。当CCS样式更改时，应 用该样式的所有网页文档会自动更新。 2021年4月30日25 6.2.5 CSS样式的使用 （2/4） 图6-11“新建CSS样式”对话框 2021年4月30日26 6.2.5 CSS样式的使用 （3/4） 创建自定义样式：用户可以对任何文本块 或文本区域应用自定义CSS样式。 重定义HTML标签：该样式是对现有HTML 标记的一种重定义，当用户创建或改变一 个CSS样式时，所有使用该标记的文本格 式也将

14、自动被更新。 使用CSS选择器：该样式用于重新定义一 些特定的标记组合或包含了特定ID属性的 标记。 2021年4月30日27 6.2.5 CSS样式的使用 （4/4） “CSS样式定义”对话框 图6-12 CSS样式的定义 2021年4月30日28 6.2.6 层的使用 （1/2） 在Dreamweaver 8中层的使用可以更方便 地对页面元素进行布局 图6-14层的应用 2021年4月30日29 6.2.6 层的使用 （2/2） “显示层面板” 图6-14层的应用 2021年4月30日30 6.2.7 行为的使用 通过行为可以在网页上制作出一些简单的 交互效果，根据用户操作来触发相应的动

15、作。打开“行为”面板，利用行为面板来 添加所选中对象的行为、删除行为等 图6-16行为面板 2021年4月30日31 6.2.8 时间轴的使用 时间轴最简单的应用就是利用层和时间轴 的结合来制作出动画网页 图6-22记录层的路径 2021年4月30日32 6.3 Web语言HTML HTML语言基础知识 HTML语言常用标记及属性 2021年4月30日33 6.3.1 HTML语言基础知识 （1/4） HTML：Hyper Text Markup Language，即超文 本标记语言，是一种用来编写超文本文档的简单 标记语言。用HTML编写的超文本文档称为HTML 文档，它能独立于各种操作系统

16、平台（如UNIX， WINDOWS等）。自1990年以来HTML就一直被 用作WWW 的信息表示语言，用于描述网页的格 式设计以及它与WWW上其它网页的连接信息。 使用HTML语言描述的文件，需要通过WWW浏览 器显示网页效果。 所谓超文本，就是因为它可以加入图片、声音、 动画、影视等内容，并且可以从一个文件跳转到 另一个文件，与世界各地主机的文件连接。 2021年4月30日34 6.3.1 HTML语言基础知识 （2/4） 1. HTML的基本结构 一个简单的HTML示例 欢迎光临我的主页 文档头 文档体 2021年4月30日35 6.3.1 HTML语言基础知识 （3/4） 图6-23 一

17、个简单的HTML示例 2021年4月30日36 6.3.1 HTML语言基础知识 （4/4） 2. 标签 单标签这类标记的语法是： 双标签由“始标签”和“尾标签”两部分构成， 必须成对使用： 内容 单标签和双标签的始标记内可以包含一些属性， 其语法是： 2021年4月30日37 6.3.2 HTML语言常用标记及属性（1/19） 1. 页面格式标记 1）段落标记 用来创建一个段落，中间可以加入文本， 按段落文本显示在浏览器中。可使用align 属性，说明段落的对齐方式，语法为： 文本内容 align可以是 left/center/right 2021年4月30日38 6.3.2 HTML语言常

18、用标记及属性（2/19） 2）换行标记 如果加在的外边，将产生一个大的 回车换行，在的里面，产生一个小 的回车换行。 2021年4月30日39 6.3.2 HTML语言常用标记及属性（3/19） 3）列表标记 （1）、 创建普通列表 （2）、 用来创建标有数字的列表， 用来创建一个标有圆点的列表。 2021年4月30日40 4）标题格式标记：共有6个标题标记对， ，是最 大的标题，是最小的标题。 6.3.2 HTML语言常用标记及属性 （4/19） 2021年4月30日41 6.3.2 HTML语言常用标记及属性 （5/19） 2. 文本标记 文本以黑体字形式输出 用来使文本以斜体字的形式输出

19、 用来使文本以下划线的形式输出 输出打字机风格的文字 输出引用方式的文字（通常是斜体） 输出需要强调的文本（通常是斜体加黑体） 输出加重文本（通常是斜体加黑体） 设置文本的字体大小、颜色，比如： 红色 表6-2文本标记 2021年4月30日42 6.3.2 HTML语言常用标记及属性 （6/19） 3. 图像标记 1）图像属性赋值标记：在HTML文档中不是真正加 入图像，而是加入图像的路径，路径可以是相对路径，也 可以是绝对路径。 的属性根据路径的不同有不同的书写形式，如果使 用相对路径，有下列几种情况： （1）如果HTML文件与图像文件（比如为logo.gif）在同 一个文件夹下，则代码应为

20、： （2）如果图像文件放在当前的HTML文档所在的文件夹 的子文件夹中（比如images），则代码应为： 2021年4月30日43 6.3.2 HTML语言常用标记及属性 （7/19） （3）如果图像文件放在当前的HTML文档所在的文件夹 的上一层文件夹中（比如为files），则代码应为： 如果files是该网站下的home文件夹里的一个子文件夹， 则代码应为 另外还有alt/border/width/height属性，alt是浏览时 鼠标移动到图像上时显示的文本。 如果使用绝对路径，比如图像存放在E盘根目录下，代码 应为： 2）水平线标记： noshade表示无阴影 2021年4月30日44

21、 6.3.2 HTML语言常用标记及属性 （8/19） 4. 表格标记 1）创建表格标记 bgcolor表示背景色的 属性 2）行、单元格和表格头标记 2021年4月30日45 6.3.2 HTML语言常用标记及属性 （9/19） tr的属性值有align： td的属性值可以有width、colspan（单元格所跨行数）、rowspan （单元格所跨列数）： 标 志含 义 最外层，创建一个表格 创建一行 创建一个单元格 行末尾 最外层 表6-3 行、单元格和表格头标记 2021年4月30日46 6.3.2 HTML语言常用标记及属性 （10/19） 5. 链接标记 1）创建链接页面标记 指向I

22、nternet上的网页文件链接：搜狐 指向本地网页文件的链接： 兴趣 指向电子邮件的链接：与我联系 target属性： _blank代表链接的网页以新窗口形式打开 _self代表在本窗口打开 _parent代表在父窗口打开 _top代表在整个浏览器窗口打开 2021年4月30日47 6.3.2 HTML语言常用标记及属性 （11/19） 2）创建链接标签标记 1 建立标签 1 建立指向标签的链 接 2021年4月30日48 6.3.2 HTML语言常用标记及属性 （12/19） 6. 帧标记frame 用来向浏览器窗口中装载多个HTML文件， 即每一个HTML文件占据一个帧，多个帧可 以显示在

23、同一个浏览器窗口中，帧也可以 称为框架。 1）帧属性标记 在 外边，可以嵌套使用 2021年4月30日49 6.3.2 HTML语言常用标记及属性 （13/19） 示 例说 明 总共有三个按列排列的帧，每个帧占整个浏览器窗口的1/3 总共有三个按行排列的帧，第一个帧占整个浏览器窗口的 40%，剩下的空间平均分配给另外两个帧 总共有六个帧，先是在第一行中从左到右排列三个帧，然后 在第二行中从左到右再排列三个帧，即两行三列，所占 空间依据rows和cols属性的值，其中200的单位是像素 表6-4 常见的帧标记 2021年4月30日50 6.3.2 HTML语言常用标记及属性 （14/19） 2）

24、帧内容标记 （1）放在中间，用来定义某一个具 体的帧，具有src、name、scrolling、noresize属性，src 和name必须赋值，src是帧的源HTML文件名（包括相对 路径或网址），name是帧的名字。 例如： strolling指定是否显示滚动轴，取值可以是“yes”、“no” 或“auto” noresize直接加入，不需赋值，用来禁止用户在浏览器中 调整一个帧的大小。 （2） 放在中，用来在那些不支持帧的 浏览器中显示文本或图像信息。 2021年4月30日51 6.3.2 HTML语言常用标记及属性 （15/19） 7.表单标记 1）创建表单标记 属性：action、m

25、ethod和target action的值是处理程序的程序名，如 method用来定义处理程序从表单中获取信息的方 式，可取get或post。 2）定义输入区标记 例如创建一个单行文本输入框： 2021年4月30日52 6.3.2 HTML语言常用标记及属性 （16/19） 3）创建列表框标记 （1）定义下拉菜单或者 是列表菜单 （2）指定列表框中的一个选项 4）创建文本框标记 创建一个多行的文本框，属性有name、cols和 rows。 2021年4月30日53 6.3.2 HTML语言常用标记及属性 （17/19） 8. 多媒体标记 1）插入背景音乐 2）插入各种多媒体标记 用于插入各种多

26、媒体，格式可以是MIDI、 WAV、AIFF、AU等。 2021年4月30日54 6.3.2 HTML语言常用标记及属性 （18/19） 9. 其他标记 1） 走动的文字 例如： 滚动的文字 behavior属性：scroll/slide/alternate direction属性：left/right/up/down移动的方向 scrolldelay属性：移动的延时 scrollamount属性：移动的速度 2021年4月30日55 6.3.2 HTML语言常用标记及属性 （19/19） 2）放在之间的标记 设定HTML文件以及其编码语系中文网页使用gb2312编码。 表示该网页由什么编辑器

27、生成 2021年4月30日56 6.4 服务器端动态网页技术 6.4.1 服务器端动态网页技术概述 所谓服务器端动态网页技术，简单来说就是在服 务器端根据客户端的请求，动态地将结果返回给 客户端。 最早的服务器端动态网页技术就是CGI （Common Gateway Interface，公用网关接口）， 它可以称之为一种机制，开发者可以使用不同的 程序编写适合的CGI程序，如Visual Basic、 Delphi或C/C+等，然后将已经写好的程序放在 Web服务器上运行，再将其运行结果通过Web服 务器传输到客户端的浏览器上。 2021年4月30日57 6.4.1 服务器端动态网页技术概述

28、为了解决CGI技术的安全问题和性能问题， 诞生了ASP、ASP.NET、JSP和PHP等技 术。 2021年4月30日58 6.4.2 ASP.NET （1/9） 1. ASP.NET简介 ASP.NET是建立在微软新一代.NET平台架 构上，利用CLR（Common Language Runtime）在服务器后端为用户提供建立强 大的企业级Web应用服务的编程框架。 2021年4月30日59 6.4.2 ASP.NET （2/9） 2. ASP.NET平台要求 在Windows 2000（Professional、Server 和 Advanced Server）、Windows XP Pr

29、ofessional 以及 Windows Server 2003 系列产品上，客户端和服务器应用程序都支 持 ASP.NET。此外，要开发 ASP.NET 服务器应用程序， 还必须具备以下软件： 1）具有 Service Pack 2 的 Windows 2000 Server 或 Advanced Server、Windows XP Professional 或 64 位版 本，或 Windows Server 2003 系列产品之一。 2）MDAC 2.7 for Data 3）Internet 信息服务 2021年4月30日60 6.4.2 ASP.NET （3/9） 3. 配置ASP

30、.NET运行环境 下面介绍如何使用“配置您的服务器向 导”，在运行 Windows Server 2003 的服 务器上安装 ASP.NET。 2021年4月30日61 6.4.2 ASP.NET （4/9） 1）在任务栏上，单击“开始”按钮，然后 单击“管理您的服务器”， 图6-27 “管理您的服务器”对话框 2021年4月30日62 6.4.2 ASP.NET （5/9） 2）在“管理您的服务器”窗口中单击“添 加或移除角色”，打开“配置您的服务器 向导”对话框 图6-28 “配置您的服务器向导”对话框预备步骤 2021年4月30日63 6.4.2 ASP.NET （6/9） 3）在“配置

31、您的服务器向导”中，单击 “下一步”，在“服务器角色”对话框中 选择“应用程序服务器（IIS, ASP.NET）” 图6-29 “配置您的服务器向导”对话框设定服务器角色 2021年4月30日64 6.4.2 ASP.NET （7/9） 4）在出现的“应用程序服务器选项”对话 框中，选中“FrontPage Server Extension” 选项和“启用ASP.NET”选项 图6-30 “配置您的服务器向导”对话框应用程序服务器选项 2021年4月30日65 6.4.2 ASP.NET （8/9） 5）启用ASP.NET：在运行 Windows Server 2003 的服务器中，从“开始”

32、菜单中，单击“运 行”。在“运行”对话框中的“打开”框中，键 入 inetmgr，然后单击“确定”。 在 IIS 管理器中，打开本地计算机，然后单击 “Web 服务扩展”。 在右侧窗格中，右键单击“ASP.NET”，然后单击 “允许”，ASP.NET 的状态变为“允许”，这时 候就已经启用了ASP.NET 2021年4月30日66 6.4.2 ASP.NET （9/9） 图6-31 “IIS管理器”启用ASP.NET 2021年4月30日67 6.4.3 ASP.NET的开发环境 （1/10） 对于ASP.NET应用程序的编写，可以在Visual Studio.NET（或简称VS.NET）的集

33、成环境下进 行，此工具集成了微软的大多数开发工具语 言，.NET系列有：VB.NET，C#.NET， JAVA.NET，ADO.NET等，这些都给开发者提供 了非常方便易用的设计、编码和调试环境，适合 与开发者来使用学习。但是，该环境安装复杂， 占用空间大，对计算机要求比较高。 2021年4月30日68 6.4.3 ASP.NET的开发环境 （2/10） 考虑到VS.NET占用空间大，对计算机要求比较高等缺点， 微软另外推出了一款免费的、简单易用的开发工具 ASP.NET Web Matrix。尽管ASP.NET Web Matrix很小巧， 但它依然是开发ASP.NET的最好工具之一，它包括

34、了 Visual Studio.Net的一些特点，同时也加入了一些新的东 西，这样，使用ASP.NET Web Matrix开发ASP.NET应用 就变得简单多了。比如，和Visual Studio.Net一样， ASP.NET Web Matrix带有“所见即所得”的开发界面， 开发者可以直接通过拖放Web控件来设计页面，在这个界 面中，和使用Visual Studio.Net一样，可以直接设置Web 的属性。在设计的时候，开发者可以选择“所见即所得” 的开发界面，也可以选择HTML代码界面。 2021年4月30日69 6.4.3 ASP.NET的开发环境 （3/10） ASP.NET Web Matrix还有一个自带的Web服务 器：Matrix Web Server，可以运行在 Windows2000、Windows XP或Windows2003环 境中，由于只能本地访问，所以不必要担心这个 服