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

《计算机网络课件第六章网站构建及应用.ppt》由会员分享，可在线阅读，更多相关《计算机网络课件第六章网站构建及应用.ppt（81页珍藏版）》请在三一办公上搜索。

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

2、.1.2 网站开发工具（1/5）,静态网页静态网页就是标准的HTML文件，其扩展名为.htm或.html，它可以包含HTML标记、文本、声音、图像、动画、Java程序以及客户端ActiveX控件，这种网页不包含任何脚本代码，在程序员开发好后不会自行改动。,2023/9/15,8,6.1.2 网站开发工具（2/5）,客户端动态网页客户端动态网页包含一些可在客户端浏览器中执行的脚本程序，这些程序可以在浏览器中被解释执行，这些脚本可以根据用户的操作做出响应，实现这种动态效果的语言主要有JavaScript和VBScript。,2023/9/15,9,6.1.2 网站开发工具（3/5）,这种动态网页有

3、很大的局限性。首先，客户端动态网页中的脚本程序是程序员在设计网页的时候事先写好的，响应的内容和方法有限；其次，这些脚本程序在客户端是可见的，减低了网站的安全性。为了改进客户端动态网页的问题，人们提出了服务器端动态网页。,2023/9/15,10,6.1.2 网站开发工具（4/5）,服务器端动态网页服务器端动态网页中也包含脚本程序，但是当网页被访问时，这些脚本程序首先在服务器端运被解释执行，然后把执行的结果以一个新的纯HTML网页返回客户端。在交互的过程中，客户端可以得到服务器处理的结果，但是源程序并不能在客户端看到，所以大大提高了网站的安全性。动态网页的文件扩展名不再是.htm或.html，而

4、是与所使用的服务器端动态网页开发技术有关，例如，使用ASP。NET技术开发时，网页文件的扩展名是.aspx。,2023/9/15,11,6.1.2 网站开发工具（5/5）,2023/9/15,12,6.2 使用Dreamweaver 8设计网页,Dreamweaver最初由Macromedia公司推出，是一款“所见即所得”的网页编辑工具，与Flash、Fireworks 并称为 Macromedia的“网页制作三剑客”，2005年4月，著名图形软件开发商Adobe公司收购了Macromedia，同年9月，Adobe公司正式推出了Dreamweaver 8的版本，比之前的版本具有更强的功能和灵活

5、性。,2023/9/15,13,6.2.1 运行Dreamweaver 8,图6-1“设计器”工作界面,2023/9/15,14,6.2.2 熟悉工作界面（1/7）,1、编辑窗口：打开Dreamweaver 8并建立空白页面后看到的白色区域就是编辑窗口。,图6-2 编辑窗口,2023/9/15,15,6.2.2 熟悉工作界面（2/7）,2、“插入”工具栏：网页的内容多种多样，都可以被称为对象，简单的对象如文字、图像、表格等，复杂的对象包括导航条、程序等。大部分对象都可以通过“插入”工具栏插入,图6-3“插入”工具栏,2023/9/15,16,6.2.2 熟悉工作界面（3/7）,单击“常用”旁边

6、的向下箭头，可以打开其他的插入对象,图6-4 其他插入对象,2023/9/15,17,6.2.2 熟悉工作界面（4/7）,3、“属性”面板：网页设计中的对象都有各自的属性，比如文字有字体、字号、对齐方式等属性，图像有大小、链接等属性。所以要有“属性”面板，可以对这些对象进行属性的修改。,图6-5“属性”面板,2023/9/15,18,6.2.2 熟悉工作界面（5/7）,4、“浮动”面板：Dreamweaver中有很多的浮动面板，方便设计者使用，其实浮动面板上的操作功能在菜单当中也有相应的命令。Dreamweaver的浮动面板有“属性”面板、“设计”面板、“代码”面板、“应用程序”面板、“文件”

7、面板、“答案”面板等等。“浮动”面板可以通过面板左上角的三角图标打开或折叠起“浮动”面板,图6-6“浮动”面板,2023/9/15,19,6.2.2 熟悉工作界面（6/7）,当需要更大的编辑窗口时，可以按F4快捷键，这样所有的面板都会隐藏。再按下F4键，隐藏的面板又会在原来的位置上出现。对应的菜单命令是“窗口”|“显示面板（隐藏面板）”。,2023/9/15,20,6.2.2 熟悉工作界面（7/7）,5、网页编辑视图：在编辑窗口上方有一个“文档”工具栏，如图6.7所示，左侧前三个按钮对应三种视图，分别是代码、拆分和设计。,6-7“文档”工具栏,2023/9/15,21,6.2.3 站点管理（1

8、/2）,1）创建新站点,图6-8“站点定义”对话框,2023/9/15,22,6.2.3 站点管理（2/2）,2）删除站点,图6-9“编辑站点”对话框,2023/9/15,23,设计主页,新建一个网页文件,图6-10在“文件”面板中管理网页文件,2023/9/15,24,6.2.5 CSS样式的使用（1/4）,CSS是Cascading Style Sheets（层叠样式表），如果在网页制作时采用CSS技术，可以轻松而又有效地对页面的整体布局、字体、颜色、链接、背景和其它效果实现更加精确的控制。当CCS样式更改时，应用该样式的所有网页文档会自动更新。,2023/9/15,25,6.2.5 CS

9、S样式的使用（2/4）,图6-11“新建CSS样式”对话框,2023/9/15,26,6.2.5 CSS样式的使用（3/4）,创建自定义样式：用户可以对任何文本块或文本区域应用自定义CSS样式。重定义HTML标签：该样式是对现有HTML标记的一种重定义，当用户创建或改变一个CSS样式时，所有使用该标记的文本格式也将自动被更新。使用CSS选择器：该样式用于重新定义一些特定的标记组合或包含了特定ID属性的标记。,2023/9/15,27,6.2.5 CSS样式的使用（4/4）,“CSS样式定义”对话框,图6-12 CSS样式的定义,2023/9/15,28,6.2.6 层的使用（1/2）,在Dre

10、amweaver 8中层的使用可以更方便地对页面元素进行布局,图6-14层的应用,2023/9/15,29,6.2.6 层的使用（2/2）,“显示层面板”,图6-14层的应用,2023/9/15,30,6.2.7 行为的使用,通过行为可以在网页上制作出一些简单的交互效果，根据用户操作来触发相应的动作。打开“行为”面板，利用行为面板来添加所选中对象的行为、删除行为等,图6-16行为面板,2023/9/15,31,6.2.8 时间轴的使用,时间轴最简单的应用就是利用层和时间轴的结合来制作出动画网页,图6-22记录层的路径,2023/9/15,32,6.3 Web语言HTML,HTML语言基础知识

11、HTML语言常用标记及属性,2023/9/15,33,6.3.1 HTML语言基础知识（1/4）,HTML：Hyper Text Markup Language，即超文本标记语言，是一种用来编写超文本文档的简单标记语言。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台（如UNIX，WINDOWS等）。自1990年以来HTML就一直被用作WWW 的信息表示语言，用于描述网页的格式设计以及它与WWW上其它网页的连接信息。使用HTML语言描述的文件，需要通过WWW浏览器显示网页效果。所谓超文本，就是因为它可以加入图片、声音、动画、影视等内容，并且可以从一个文件跳转到另一个文件，

12、与世界各地主机的文件连接。,2023/9/15,34,6.3.1 HTML语言基础知识（2/4）,1.HTML的基本结构,2023/9/15,35,6.3.1 HTML语言基础知识（3/4）,图6-23 一个简单的HTML示例,2023/9/15,36,6.3.1 HTML语言基础知识（4/4）,2.标签单标签这类标记的语法是：双标签由“始标签”和“尾标签”两部分构成，必须成对使用：内容单标签和双标签的始标记内可以包含一些属性，其语法是：,2023/9/15,37,6.3.2 HTML语言常用标记及属性（1/19）,1.页面格式标记 1）段落标记用来创建一个段落，中间可以加入文本，按段落文本显

13、示在浏览器中。可使用align属性，说明段落的对齐方式，语法为：文本内容 align可以是left/center/right,2023/9/15,38,6.3.2 HTML语言常用标记及属性（2/19）,2）换行标记如果加在的外边，将产生一个大的回车换行，在的里面，产生一个小的回车换行。,2023/9/15,39,6.3.2 HTML语言常用标记及属性（3/19）,3）列表标记（1）、创建普通列表（2）、用来创建标有数字的列表，用来创建一个标有圆点的列表。,2023/9/15,40,4）标题格式标记：共有6个标题标记对，是最大的标题，是最小的标题。,6.3.2 HTML语言常用标记及属性（4/

14、19）,2023/9/15,41,6.3.2 HTML语言常用标记及属性（5/19）,2.文本标记,表6-2文本标记,2023/9/15,42,6.3.2 HTML语言常用标记及属性（6/19）,3.图像标记1）图像属性赋值标记：在HTML文档中不是真正加入图像，而是加入图像的路径，路径可以是相对路径，也可以是绝对路径。的属性根据路径的不同有不同的书写形式，如果使用相对路径，有下列几种情况：（1）如果HTML文件与图像文件（比如为logo.gif）在同一个文件夹下，则代码应为：（2）如果图像文件放在当前的HTML文档所在的文件夹的子文件夹中（比如images），则代码应为：,2023/9/15

15、,43,6.3.2 HTML语言常用标记及属性（7/19）,（3）如果图像文件放在当前的HTML文档所在的文件夹的上一层文件夹中（比如为files），则代码应为：如果files是该网站下的home文件夹里的一个子文件夹，则代码应为另外还有alt/border/width/height属性，alt是浏览时鼠标移动到图像上时显示的文本。如果使用绝对路径，比如图像存放在E盘根目录下，代码应为：2）水平线标记：noshade表示无阴影,2023/9/15,44,6.3.2 HTML语言常用标记及属性（8/19）,4.表格标记1）创建表格标记 bgcolor表示背景色的属性2）行、单元格和表格头标记,2

16、023/9/15,45,6.3.2 HTML语言常用标记及属性（9/19）,tr的属性值有align：td的属性值可以有width、colspan（单元格所跨行数）、rowspan（单元格所跨列数）：,表6-3 行、单元格和表格头标记,2023/9/15,46,6.3.2 HTML语言常用标记及属性（10/19）,5.链接标记1）创建链接页面标记指向Internet上的网页文件链接：搜狐指向本地网页文件的链接：兴趣指向电子邮件的链接：与我联系target属性：_blank代表链接的网页以新窗口形式打开_self代表在本窗口打开_parent代表在父窗口打开_top代表在整个浏览器窗口打开,20

17、23/9/15,47,6.3.2 HTML语言常用标记及属性（11/19）,2）创建链接标签标记1 建立标签1 建立指向标签的链接,2023/9/15,48,6.3.2 HTML语言常用标记及属性（12/19）,6.帧标记frame用来向浏览器窗口中装载多个HTML文件，即每一个HTML文件占据一个帧，多个帧可以显示在同一个浏览器窗口中，帧也可以称为框架。1）帧属性标记在外边，可以嵌套使用,2023/9/15,49,6.3.2 HTML语言常用标记及属性（13/19）,表6-4 常见的帧标记,2023/9/15,50,6.3.2 HTML语言常用标记及属性（14/19）,2）帧内容标记（1）放

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

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

20、6.3.2 HTML语言常用标记及属性（18/19）,9.其他标记1）走动的文字例如：滚动的文字behavior属性：scroll/slide/alternatedirection属性：left/right/up/down移动的方向scrolldelay属性：移动的延时scrollamount属性：移动的速度,2023/9/15,55,6.3.2 HTML语言常用标记及属性（19/19）,2）放在之间的标记设定HTML文件以及其编码语系中文网页使用gb2312编码。表示该网页由什么编辑器生成,2023/9/15,56,6.4 服务器端动态网页技术,6.4.1 服务器端动态网页技术概述 所谓服务

21、器端动态网页技术，简单来说就是在服务器端根据客户端的请求，动态地将结果返回给客户端。最早的服务器端动态网页技术就是CGI（Common Gateway Interface，公用网关接口），它可以称之为一种机制，开发者可以使用不同的程序编写适合的CGI程序，如Visual Basic、Delphi或C/C+等，然后将已经写好的程序放在Web服务器上运行，再将其运行结果通过Web服务器传输到客户端的浏览器上。,2023/9/15,57,6.4.1 服务器端动态网页技术概述,为了解决CGI技术的安全问题和性能问题，诞生了ASP、ASP.NET、JSP和PHP等技术。,2023/9/15,58,6.4

22、.2 ASP.NET（1/9）,1.ASP.NET简介ASP.NET是建立在微软新一代.NET平台架构上，利用CLR（Common Language Runtime）在服务器后端为用户提供建立强大的企业级Web应用服务的编程框架。,2023/9/15,59,6.4.2 ASP.NET（2/9）,2.ASP.NET平台要求在Windows 2000（Professional、Server 和 Advanced Server）、Windows XP Professional 以及 Windows Server 2003 系列产品上，客户端和服务器应用程序都支持 ASP.NET。此外，要开发 ASP

23、.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 信息服务,2023/9/15,60,6.4.2 ASP.NET（3/9）,3.配置ASP.NET运行环境下面介绍如何使用“配置您的服务器向导”，在运行 Windows Server 2003 的服务器上安装 ASP.NET。,2023/9/15,6

24、1,6.4.2 ASP.NET（4/9）,1）在任务栏上，单击“开始”按钮，然后单击“管理您的服务器”，,图6-27“管理您的服务器”对话框,2023/9/15,62,6.4.2 ASP.NET（5/9）,2）在“管理您的服务器”窗口中单击“添加或移除角色”，打开“配置您的服务器向导”对话框,图6-28“配置您的服务器向导”对话框预备步骤,2023/9/15,63,6.4.2 ASP.NET（6/9）,3）在“配置您的服务器向导”中，单击“下一步”，在“服务器角色”对话框中选择“应用程序服务器（IIS,ASP.NET）”,图6-29“配置您的服务器向导”对话框设定服务器角色,2023/9/15

25、,64,6.4.2 ASP.NET（7/9）,4）在出现的“应用程序服务器选项”对话框中，选中“FrontPage Server Extension”选项和“启用ASP.NET”选项,图6-30“配置您的服务器向导”对话框应用程序服务器选项,2023/9/15,65,6.4.2 ASP.NET（8/9）,5）启用ASP.NET：在运行 Windows Server 2003 的服务器中，从“开始”菜单中，单击“运行”。在“运行”对话框中的“打开”框中，键入 inetmgr，然后单击“确定”。在 IIS 管理器中，打开本地计算机，然后单击“Web 服务扩展”。在右侧窗格中，右键单击“ASP.NE

26、T”，然后单击“允许”，ASP.NET 的状态变为“允许”，这时候就已经启用了ASP.NET,2023/9/15,66,6.4.2 ASP.NET（9/9）,图6-31“IIS管理器”启用ASP.NET,2023/9/15,67,6.4.3 ASP.NET的开发环境（1/10）,对于ASP.NET应用程序的编写，可以在Visual Studio.NET（或简称VS.NET）的集成环境下进行，此工具集成了微软的大多数开发工具语言，.NET系列有：VB.NET，C#.NET，JAVA.NET，ADO.NET等，这些都给开发者提供了非常方便易用的设计、编码和调试环境，适合与开发者来使用学习。但是，该

27、环境安装复杂，占用空间大，对计算机要求比较高。,2023/9/15,68,6.4.3 ASP.NET的开发环境（2/10）,考虑到VS.NET占用空间大，对计算机要求比较高等缺点，微软另外推出了一款免费的、简单易用的开发工具ASP.NET Web Matrix。尽管ASP.NET Web Matrix很小巧，但它依然是开发ASP.NET的最好工具之一，它包括了Visual Studio.Net的一些特点，同时也加入了一些新的东西，这样，使用ASP.NET Web Matrix开发ASP.NET应用就变得简单多了。比如，和Visual Studio.Net一样，ASP.NET Web Matri

28、x带有“所见即所得”的开发界面，开发者可以直接通过拖放Web控件来设计页面，在这个界面中，和使用Visual Studio.Net一样，可以直接设置Web的属性。在设计的时候，开发者可以选择“所见即所得”的开发界面，也可以选择HTML代码界面。,2023/9/15,69,6.4.3 ASP.NET的开发环境（3/10）,ASP.NET Web Matrix还有一个自带的Web服务器：Matrix Web Server，可以运行在Windows2000、Windows XP或Windows2003环境中，由于只能本地访问，所以不必要担心这个服务器的安全性。这款Web服务器的目的是调试程序，因此，

29、它和ASP.NET Web Matrix有比较完善的结合，可以直接在ASP.NET Web Matrix打开Web服务器进行调试。并且Matrix Web Server使用的是8080端口，所以和系统已经有的IIS不会冲突。,2023/9/15,70,6.4.3 ASP.NET的开发环境（4/10）,图6-32 新建文件对话框,2023/9/15,71,6.4.3 ASP.NET的开发环境（5/10）,图6-33 Web Matrix主窗口,2023/9/15,72,6.4.3 ASP.NET的开发环境（6/10）,图6-34 Quick Tag Edit对话框,2023/9/15,73,6.

30、4.3 ASP.NET的开发环境（7/10）,图6-35 在主工作区添加控件后的结果图,2023/9/15,74,6.4.3 ASP.NET的开发环境（8/10）,图6-36 在主工作区添加代码后结果图,2023/9/15,75,6.4.3 ASP.NET的开发环境（9/10）,6-37“Start Web Application”对话框,2023/9/15,76,6.4.3 ASP.NET的开发环境（10/10）,图6-38执行NewFile.aspx程序,图6-39 运行结果,2023/9/15,77,6.4.4 ASP.NET的开发语言,可以使用多种编程语言进行ASP.NET开发，常见有

31、Visual Basic.NET、C#.NET,2023/9/15,78,6.5 个人主页空间博客的申请与建立,blog的全名是Weblog，中文意思是“网络日志”，后来缩写为Blog，而博客（Blogger）就是写Blog的人。从理解上讲，博客是“一种表达个人思想、网络链接内容，按照时间顺序排列，并且不断更新的出版方式”。,2023/9/15,79,6.5 个人主页空间博客的申请与建立,博客存在的方式，一般分为三种类型：（1）托管博客：无需自己注册域名、租用空间和编制网页，博客们只要去免费注册申请即可拥有自己的博客空间，如“博客网”（）、“博客中国”（，如图6.40所示）、新浪、搜狐等都提供这样的服务；,2023/9/15,80,6.5 个人主页空间博客的申请与建立,图6-40“博客中国”首页,2023/9/15,81,6.5 个人主页空间博客的申请与建立,（2）自建独立网站的博客：有自己的域名、空间和页面风格；（3）附属博客：将自己的博客作为某一个网站的一部分（如一个栏目、一个频道或者一个地址）。这三类之间可以演变，甚至可以兼得，一人拥有多种博客网站。,