《计算机网络课件第六章网站构建及应用》由会员分享，可在线阅读，更多相关《计算机网络课件第六章网站构建及应用（81页珍藏版）》请在金锄头文库上搜索。
1、2024年9月18日1第六章网站构建及应用教学目标教学重点教学过程2024年9月18日2教学目标了解网站构建的基本流程掌握网页设计的方法了解服务器端动态网页设计2024年9月18日3教学重点掌握Dreamweaver8的基本使用理解HTML网页编码语言2024年9月18日4教学过程网站建设概述使用Dreamweaver8设计网页HTML语言服务器端动态网页2024年9月18日56.1网站的建立网站建设概述网站开发工具2024年9月18日6网站建设概述1.网站策划准备阶段2.内容设计与实现阶段：3.网站的发布与推广、维护阶段2024年9月18日76.1.2 网站开发工具网站开发工具 （1/5）静
2、态网页静态网页静态网页就是标准的静态网页就是标准的HTML文件，其扩展名文件，其扩展名为为.htm或或.html，它可以包含，它可以包含HTML标记、标记、文本、声音、图像、动画、文本、声音、图像、动画、Java程序以及程序以及客户端客户端ActiveX控件，这种网页不包含任何控件，这种网页不包含任何脚本代码，在程序员开发好后不会自行改脚本代码，在程序员开发好后不会自行改动。动。2024年9月18日86.1.2 网站开发工具网站开发工具 （2/5）客户端动态网页客户端动态网页客户端动态网页包含一些可在客户端浏览客户端动态网页包含一些可在客户端浏览器中执行的脚本程序，这些程序可以在浏器中执行的脚
3、本程序，这些程序可以在浏览器中被解释执行，这些脚本可以根据用览器中被解释执行，这些脚本可以根据用户的操作做出响应，实现这种动态效果的户的操作做出响应，实现这种动态效果的语言主要有语言主要有JavaScript和和VBScript。2024年9月18日96.1.2 网站开发工具网站开发工具 （3/5）这种动态网页有很大的局限性。首先，客这种动态网页有很大的局限性。首先，客户端动态网页中的脚本程序是程序员在设户端动态网页中的脚本程序是程序员在设计网页的时候事先写好的，响应的内容和计网页的时候事先写好的，响应的内容和方法有限；其次，这些脚本程序在客户端方法有限；其次，这些脚本程序在客户端是可见的，减
4、低了网站的安全性。为了改是可见的，减低了网站的安全性。为了改进客户端动态网页的问题，人们提出了服进客户端动态网页的问题，人们提出了服务器端动态网页。务器端动态网页。 2024年9月18日106.1.2 网站开发工具网站开发工具 （4/5）服务器端动态网页服务器端动态网页服务器端动态网页中也包含脚本程序，但是当网页被访问时，这些脚本程序服务器端动态网页中也包含脚本程序，但是当网页被访问时，这些脚本程序首先在服务器端运被解释执行，然后把执行的结果以一个新的纯首先在服务器端运被解释执行，然后把执行的结果以一个新的纯HTML网页网页返回客户端。在交互的过程中，客户端可以得到服务器处理的结果，但是源返回
5、客户端。在交互的过程中，客户端可以得到服务器处理的结果，但是源程序并不能在客户端看到，所以大大提高了网站的安全性。动态网页的文件程序并不能在客户端看到，所以大大提高了网站的安全性。动态网页的文件扩展名不再是扩展名不再是.htm或或.html，而是与所使用的服务器端动态网页开发技术有关，而是与所使用的服务器端动态网页开发技术有关，例如，使用例如，使用ASP。NET技术开发时，网页文件的扩展名是技术开发时，网页文件的扩展名是.aspx。2024年9月18日116.1.2 网站开发工具网站开发工具 （5/5）静态网页设计类框架结构类FrontPage微软公司的Office套装软件之一，简单易学，适合
6、初学者使用Dreamweaver由Macromedia公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具图形处理类Fireworks由Macromedia公司发布的一款专为网络图形设计的图形编辑软件Photoshop由Adobe公司出品的最流行的图像编辑软件，所设计的图像也可用于网页图像Flash由Macromedia公司发布的一款优秀网页动画设计软件动态网页开发类代码类ASP.NET微软公司开发的用来在服务器端构建功能强大的web应用程序JSPJSP(Java Server Pages)是由Sun Microsystems公司
7、倡导、许多公司参与一起建立的一种动态网页技术标准。 JSP技术是用JAVA语言作为脚本语言的，JSP网页为整个服务器端的JAVA库单元提供了一个接口来服务于HTTP的应用程序PHP一种超级文本预处理语言（PHP:Hypertext Preprocessor），在服务器端执行的嵌入HTML文档的脚本语言，语言的风格有类似于C语言，现在被很多的网站编程人员广泛运用开发环境类Editplus一个功能很全面的文本、HTML、程序源代码编辑器，方便输入和编辑代码Visual SVisual Studio .NET 是一套完整的开发工具，用于生成 ASP Web 应用程序、XML Web services
8、、桌面应用程序和移动应用程序Webmatrix一款小巧的ASP.NET开发环境，方便安装，简单易用2024年9月18日126.2使用Dreamweaver8设计网页Dreamweaver最初由Macromedia公司推出，是一款“所见即所得”的网页编辑工具，与Flash、Fireworks并称为Macromedia的“网页制作三剑客”，2005年4月，著名图形软件开发商Adobe公司收购了Macromedia，同年9月，Adobe公司正式推出了Dreamweaver8的版本，比之前的版本具有更强的功能和灵活性。2024年9月18日136.2.1运行Dreamweaver8图6-1 “设计器”工
9、作界面2024年9月18日146.2.2熟悉工作界面（1/7）1、编辑窗口：打开Dreamweaver8并建立空白页面后看到的白色区域就是编辑窗口。图6-2编辑窗口2024年9月18日156.2.2熟悉工作界面（2/7）2、“插入”工具栏：网页的内容多种多样，都可以被称为对象，简单的对象如文字、图像、表格等，复杂的对象包括导航条、程序等。大部分对象都可以通过“插入”工具栏插入图6-3“插入”工具栏2024年9月18日166.2.2熟悉工作界面（3/7）单击“常用”旁边的向下箭头，可以打开其他的插入对象图6-4其他插入对象2024年9月18日176.2.2熟悉工作界面（4/7）3、“属性”面板：
10、网页设计中的对象都有各自的属性，比如文字有字体、字号、对齐方式等属性，图像有大小、链接等属性。所以要有“属性”面板，可以对这些对象进行属性的修改。图6-5“属性”面板2024年9月18日186.2.2熟悉工作界面（5/7）4、“浮动”面板：Dreamweaver中有很多的浮动面板，方便设计者使用，其实浮动面板上的操作功能在菜单当中也有相应的命令。Dreamweaver的浮动面板有“属性”面板、“设计”面板、“代码”面板、“应用程序”面板、“文件”面板、“答案”面板等等。“浮动”面板可以通过面板左上角的三角图标打开或折叠起“浮动”面板图6-6“浮动”面板2024年9月18日196.2.2熟悉工作
11、界面（6/7）当需要更大的编辑窗口时，可以按F4快捷键，这样所有的面板都会隐藏。再按下F4键，隐藏的面板又会在原来的位置上出现。对应的菜单命令是“窗口”|“显示面板（隐藏面板）”。2024年9月18日206.2.2熟悉工作界面（7/7）5、网页编辑视图：在编辑窗口上方有一个“文档”工具栏，如图所示，左侧前三个按钮对应三种视图，分别是代码、拆分和设计。6-7“文档”工具栏2024年9月18日216.2.3站点管理（1/2）1）创建新站点图6-8“站点定义”对话框2024年9月18日226.2.3站点管理（2/2）2）删除站点图6-9“编辑站点”对话框2024年9月18日23设计主页新建一个网页文
12、件图6-10在“文件”面板中管理网页文件2024年9月18日246.2.5CSS样式的使用（1/4）CSS是CascadingStyleSheets（层叠样式表），如果在网页制作时采用CSS技术，可以轻松而又有效地对页面的整体布局、字体、颜色、链接、背景和其它效果实现更加精确的控制。当CCS样式更改时，应用该样式的所有网页文档会自动更新。2024年9月18日256.2.5CSS样式的使用（2/4）图6-11“新建CSS样式”对话框2024年9月18日266.2.5CSS样式的使用（3/4）创建自定义样式：用户可以对任何文本块或文本区域应用自定义CSS样式。重定义HTML标签：该样式是对现有HT
13、ML标记的一种重定义，当用户创建或改变一个CSS样式时，所有使用该标记的文本格式也将自动被更新。使用CSS选择器：该样式用于重新定义一些特定的标记组合或包含了特定ID属性的标记。2024年9月18日276.2.5CSS样式的使用（4/4）“CSS样式定义”对话框图6-12CSS样式的定义2024年9月18日286.2.6层的使用（1/2）在Dreamweaver8中层的使用可以更方便地对页面元素进行布局图6-14层的应用2024年9月18日296.2.6层的使用（2/2）“显示层面板”图6-14层的应用2024年9月18日306.2.7行为的使用通过行为可以在网页上制作出一些简单的交互效果，根
14、据用户操作来触发相应的动作。打开“行为”面板，利用行为面板来添加所选中对象的行为、删除行为等图6-16行为面板2024年9月18日316.2.8时间轴的使用时间轴最简单的应用就是利用层和时间轴的结合来制作出动画网页图6-22记录层的路径2024年9月18日326.3Web语言HTMLHTML语言基础知识HTML语言常用标记及属性2024年9月18日336.3.1HTML语言基础知识（1/4）HTML：HyperTextMarkupLanguage，即超文本标记语言，是一种用来编写超文本文档的简单标记语言。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台（如UNIX，WIN
15、DOWS等）。自1990年以来HTML就一直被用作WWW的信息表示语言，用于描述网页的格式设计以及它与WWW上其它网页的连接信息。使用HTML语言描述的文件，需要通过WWW浏览器显示网页效果。所谓超文本，就是因为它可以加入图片、声音、动画、影视等内容，并且可以从一个文件跳转到另一个文件，与世界各地主机的文件连接。2024年9月18日346.3.1HTML语言基础知识（2/4）1.HTML的基本结构一个简单的HTML示例欢迎光临我的主页文档头 文档体2024年9月18日356.3.1HTML语言基础知识（3/4）图6-23一个简单的HTML示例2024年9月18日366.3.1HTML语言基础知
16、识（4/4）2.标签单标签这类标记的语法是：双标签由“始标签”和“尾标签”两部分构成，必须成对使用：内容单标签和双标签的始标记内可以包含一些属性，其语法是：2024年9月18日376.3.2HTML语言常用标记及属性（1/19）1.页面格式标记1）段落标记用来创建一个段落，中间可以加入文本，按段落文本显示在浏览器中。可使用align属性，说明段落的对齐方式，语法为：文本内容align可以是left/center/right2024年9月18日386.3.2HTML语言常用标记及属性（2/19）2）换行标记如果加在的外边，将产生一个大的回车换行，在的里面，产生一个小的回车换行。2024年9月18
17、日396.3.2HTML语言常用标记及属性（3/19）3）列表标记（1）、创建普通列表（2）、用来创建标有数字的列表，用来创建一个标有圆点的列表。2024年9月18日404）标题格式标记：共有6个标题标记对，是最大的标题，是最小的标题。6.3.2HTML语言常用标记及属性（4/19）2024年9月18日416.3.2HTML语言常用标记及属性（5/19）2.文本标记文本以黑体字形式输出用来使文本以斜体字的形式输出用来使文本以下划线的形式输出输出打字机风格的文字输出引用方式的文字（通常是斜体）输出需要强调的文本（通常是斜体加黑体）输出加重文本（通常是斜体加黑体）设置文本的字体大小、颜色，比如：红
18、色表6-2文本标记2024年9月18日426.3.2HTML语言常用标记及属性（6/19）3.图像标记1）图像属性赋值标记：在HTML文档中不是真正加入图像，而是加入图像的路径，路径可以是相对路径，也可以是绝对路径。的属性根据路径的不同有不同的书写形式，如果使用相对路径，有下列几种情况：（1）如果HTML文件与图像文件（比如为）在同一个文件夹下，则代码应为：（2）如果图像文件放在当前的HTML文档所在的文件夹的子文件夹中（比如images），则代码应为：2024年9月18日436.3.2HTML语言常用标记及属性（7/19）（3）如果图像文件放在当前的HTML文档所在的文件夹的上一层文件夹中（
19、比如为files），则代码应为：如果files是该网站下的home文件夹里的一个子文件夹，则代码应为另外还有alt/border/width/height属性，alt是浏览时鼠标移动到图像上时显示的文本。如果使用绝对路径，比如图像存放在E盘根目录下，代码应为：2）水平线标记：noshade表示无阴影2024年9月18日446.3.2HTML语言常用标记及属性（8/19）4.表格标记1）创建表格标记bgcolor表示背景色的属性2）行、单元格和表格头标记2024年9月18日456.3.2HTML语言常用标记及属性（9/19）tr的属性值有align：td的属性值可以有width、colspan（
20、单元格所跨行数）、rowspan（单元格所跨列数）：标 志含 义最外层，创建一个表格创建一行创建一个单元格行末尾最外层表6-3行、单元格和表格头标记2024年9月18日466.3.2HTML语言常用标记及属性（10/19）5.链接标记1）创建链接页面标记指向Internet上的网页文件链接：搜狐指向本地网页文件的链接：兴趣指向电子邮件的链接：与我联系target属性：_blank代表链接的网页以新窗口形式打开_self代表在本窗口打开_parent代表在父窗口打开_top代表在整个浏览器窗口打开2024年9月18日476.3.2HTML语言常用标记及属性（11/19）2）创建链接标签标记1建立
21、标签1建立指向标签的链接2024年9月18日486.3.2HTML语言常用标记及属性（12/19）6.帧标记frame用来向浏览器窗口中装载多个HTML文件，即每一个HTML文件占据一个帧，多个帧可以显示在同一个浏览器窗口中，帧也可以称为框架。1）帧属性标记在外边，可以嵌套使用2024年9月18日496.3.2HTML语言常用标记及属性（13/19）示 例说 明总共有三个按列排列的帧，每个帧占整个浏览器窗口的1/3总共有三个按行排列的帧，第一个帧占整个浏览器窗口的40%，剩下的空间平均分配给另外两个帧总共有六个帧，先是在第一行中从左到右排列三个帧，然后在第二行中从左到右再排列三个帧，即两行三列
22、，所占空间依据rows和cols属性的值，其中200的单位是像素表6-4常见的帧标记2024年9月18日506.3.2HTML语言常用标记及属性（14/19）2）帧内容标记（1）放在中间，用来定义某一个具体的帧，具有src、name、scrolling、noresize属性，src和name必须赋值，src是帧的源HTML文件名（包括相对路径或网址），name是帧的名字。例如：strolling指定是否显示滚动轴，取值可以是“yes”、“no”或“auto”noresize直接加入，不需赋值，用来禁止用户在浏览器中调整一个帧的大小。（2）放在中，用来在那些不支持帧的浏览器中显示文本或图像信息。
23、2024年9月18日516.3.2HTML语言常用标记及属性（15/19）7.表单标记1）创建表单标记属性：action、method和targetaction的值是处理程序的程序名，如method用来定义处理程序从表单中获取信息的方式，可取get或post。2）定义输入区标记例如创建一个单行文本输入框：2024年9月18日526.3.2HTML语言常用标记及属性（16/19）3）创建列表框标记（1）定义下拉菜单或者是列表菜单（2）指定列表框中的一个选项4）创建文本框标记创建一个多行的文本框，属性有name、cols和rows。2024年9月18日536.3.2HTML语言常用标记及属性（17
24、/19）8.多媒体标记1）插入背景音乐2）插入各种多媒体标记用于插入各种多媒体，格式可以是MIDI、WAV、AIFF、AU等。2024年9月18日546.3.2HTML语言常用标记及属性（18/19）9.其他标记1）走动的文字例如：滚动的文字behavior属性：scroll/slide/alternatedirection属性：left/right/up/down移动的方向scrolldelay属性：移动的延时scrollamount属性：移动的速度2024年9月18日556.3.2HTML语言常用标记及属性（19/19）2）放在之间的标记设定HTML文件以及其编码语系中文网页使用gb231
25、2编码。表示该网页由什么编辑器生成2024年9月18日566.4服务器端动态网页技术6.4.1服务器端动态网页技术概述所谓服务器端动态网页技术，简单来说就是在服务器端根据客户端的请求，动态地将结果返回给客户端。最早的服务器端动态网页技术就是CGI（CommonGatewayInterface，公用网关接口），它可以称之为一种机制，开发者可以使用不同的程序编写适合的CGI程序，如VisualBasic、Delphi或C/C+等，然后将已经写好的程序放在Web服务器上运行，再将其运行结果通过Web服务器传输到客户端的浏览器上。2024年9月18日576.4.1服务器端动态网页技术概述为了解决CGI
26、技术的安全问题和性能问题，诞生了ASP、JSP和PHP等技术。2024年9月18日586.4.2ASP.NET（1/9）简介是建立在微软新一代.NET平台架构上，利用CLR（CommonLanguageRuntime）在服务器后端为用户提供建立强大的企业级Web应用服务的编程框架。2024年9月18日596.4.2ASP.NET（2/9）平台要求在Windows2000（Professional、Server和AdvancedServer）、WindowsXPProfessional以及WindowsServer2003系列产品上，客户端和服务器应用程序都支持。此外，要开发ASP.NET服务器
27、应用程序，还必须具备以下软件：1）具有ServicePack2的Windows2000Server或AdvancedServer、WindowsXPProfessional或64位版本，或WindowsServer2003系列产品之一。2）MDAC2.7forData3）Internet信息服务2024年9月18日606.4.2ASP.NET（3/9）3.配置运行环境下面介绍如何使用“配置您的服务器向导”，在运行WindowsServer2003的服务器上安装。2024年9月18日616.4.2ASP.NET（4/9）1）在任务栏上，单击“开始”按钮，然后单击“管理您的服务器”，图6-27“管
28、理您的服务器”对话框2024年9月18日626.4.2ASP.NET（5/9）2）在“管理您的服务器”窗口中单击“添加或移除角色”，打开“配置您的服务器向导”对话框图6-28“配置您的服务器向导”对话框预备步骤2024年9月18日636.4.2ASP.NET（6/9）3）在“配置您的服务器向导”中，单击“下一步”，在“服务器角色”对话框中选择“应用程序服务器（）”图6-29“配置您的服务器向导”对话框设定服务器角色2024年9月18日646.4.2ASP.NET（7/9）4）在出现的“应用程序服务器选项”对话框中，选中“FrontPageServerExtension”选项和“启用ASP.NE
29、T”选项图6-30“配置您的服务器向导”对话框应用程序服务器选项2024年9月18日656.4.2ASP.NET（8/9）5）启用：在运行WindowsServer2003的服务器中，从“开始”菜单中，单击“运行”。在“运行”对话框中的“打开”框中，键入inetmgr，然后单击“确定”。在IIS管理器中，打开本地计算机，然后单击“Web服务扩展”。在右侧窗格中，右键单击“ASP.NET”，然后单击“允许”，ASP.NET的状态变为“允许”，这时候就已经启用了ASP.NET2024年9月18日666.4.2ASP.NET（9/9）图6-31“IIS管理器”启用2024年9月18日67的开发环境（
30、1/10）对于应用程序的编写，可以在（或简称）的集成环境下进行，此工具集成了微软的大多数开发工具语言，.NET系列有：，C#.NET，等，这些都给开发者提供了非常方便易用的设计、编码和调试环境，适合与开发者来使用学习。但是，该环境安装复杂，占用空间大，对计算机要求比较高。2024年9月18日68的开发环境（2/10）考虑到占用空间大，对计算机要求比较高等缺点，微软另外推出了一款免费的、简单易用的开发工具ASP.NETWebMatrix。尽管ASP.NETWebMatrix很小巧，但它依然是开发的最好工具之一，它包括了的一些特点，同时也加入了一些新的东西，这样，使用ASP.NETWebMatri
31、x开发应用就变得简单多了。比如，和一样，ASP.NETWebMatrix带有“所见即所得”的开发界面，开发者可以直接通过拖放Web控件来设计页面，在这个界面中，和使用一样，可以直接设置Web的属性。在设计的时候，开发者可以选择“所见即所得”的开发界面，也可以选择HTML代码界面。2024年9月18日69的开发环境（3/10）ASP.NETWebMatrix还有一个自带的Web服务器：MatrixWebServer，可以运行在Windows2000、WindowsXP或Windows2003环境中，由于只能本地访问，所以不必要担心这个服务器的安全性。这款Web服务器的目的是调试程序，因此，它和A
32、SP.NETWebMatrix有比较完善的结合，可以直接在ASP.NETWebMatrix打开Web服务器进行调试。并且MatrixWebServer使用的是8080端口，所以和系统已经有的IIS不会冲突。2024年9月18日70的开发环境（4/10）图6-32新建文件对话框2024年9月18日71的开发环境（5/10）图6-33WebMatrix主窗口2024年9月18日72的开发环境（6/10）图6-34QuickTagEdit对话框2024年9月18日73的开发环境（7/10）图6-35在主工作区添加控件后的结果图2024年9月18日74的开发环境（8/10）图6-36在主工作区添加代码
33、后结果图2024年9月18日75的开发环境（9/10）6-37“StartWebApplication”对话框2024年9月18日76的开发环境（10/10）图6-38执行程序图6-39运行结果2024年9月18日77的开发语言可以使用多种编程语言进行开发，常见有、C#.NET2024年9月18日786.5个人主页空间博客的申请与建立blog的全名是Weblog，中文意思是“网络日志”，后来缩写为Blog，而博客（Blogger）就是写Blog的人。从理解上讲，博客是“一种表达个人思想、网络链接内容，按照时间顺序排列，并且不断更新的出版方式”。2024年9月18日796.5个人主页空间博客的申请与建立博客存在的方式，一般分为三种类型：（1）托管博客：无需自己注册域名、租用空间和编制网页，博客们只要去免费注册申请即可拥有自己的博客空间，如“博客网”（）、“博客中国”（，如图所示）、新浪、搜狐等都提供这样的服务；2024年9月18日806.5个人主页空间博客的申请与建立图6-40“博客中国”首页2024年9月18日816.5个人主页空间博客的申请与建立（2）自建独立网站的博客：有自己的域名、空间和页面风格；（3）附属博客：将自己的博客作为某一个网站的一部分（如一个栏目、一个频道或者一个地址）。这三类之间可以演变，甚至可以兼得，一人拥有多种博客网站。
