《计算机网络课件第六章网站构建及应用.ppt》由会员分享，可在线阅读，更多相关《计算机网络课件第六章网站构建及应用.ppt（81页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、计算机网络技术与应用简明教程计算机网络技术与应用简明教程清华大学出版社清华大学出版社网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用第六章第六章网站构建及应用网站构建及应用教学目标教学重点教学过程2/23/20231计算机网络技术与应用简明教程计算机网络技术与应用简明教程清华大学出版社清华大学出版社网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用教学目标教学
2、目标了解网站构建的基本流程了解网站构建的基本流程掌握网页设计的方法掌握网页设计的方法了解服务器端动态网页设计了解服务器端动态网页设计2/23/20232计算机网络技术与应用简明教程计算机网络技术与应用简明教程清华大学出版社清华大学出版社网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用教学重点教学重点掌握掌握Dreamweaver8的基本使用的基本使用理解理解HTML网页编码语言网页编码语言2/23/20233计算机网络技术与应用简明教程计算机网络技术与应用简明教程清华大学出版
3、社清华大学出版社网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用教学过程教学过程网站建设概述网站建设概述使用使用Dreamweaver8设计网页设计网页HTML语言语言服务器端动态网页服务器端动态网页2/23/20234计算机网络技术与应用简明教程计算机网络技术与应用简明教程清华大学出版社清华大学出版社网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用6.1网
4、站的建立网站的建立网站建设概述网站建设概述网站开发工具网站开发工具2/23/20235计算机网络技术与应用简明教程计算机网络技术与应用简明教程清华大学出版社清华大学出版社网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网站建设概述网站建设概述1.网站策划准备阶段网站策划准备阶段2.内容设计与实现阶段：3.网站的发布与推广、维护阶段网站的发布与推广、维护阶段2/23/20236计算机网络技术与应用简明教程计算机网络技术与应用简明教程清华大学出版社清华大学出版社网络技术与应用网络
5、技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用6.1.2网站开发工具网站开发工具（1/5）静态网页静态网页静态网页就是标准的静态网页就是标准的HTML文件，其扩展名文件，其扩展名为为.htm或或.html，它可以包含，它可以包含HTML标记、标记、文本、声音、图像、动画、文本、声音、图像、动画、Java程序以及程序以及客户端客户端ActiveX控件，这种网页不包含任何控件，这种网页不包含任何脚本代码，在程序员开发好后不会自行改脚本代码，在程序员开发好后不会自行改动。动。2/23/20237计
6、算机网络技术与应用简明教程计算机网络技术与应用简明教程清华大学出版社清华大学出版社网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用6.1.2网站开发工具网站开发工具（2/5）客户端动态网页客户端动态网页客户端动态网页包含一些可在客户端浏览客户端动态网页包含一些可在客户端浏览器中执行的脚本程序，这些程序可以在浏器中执行的脚本程序，这些程序可以在浏览器中被解释执行，这些脚本可以根据用览器中被解释执行，这些脚本可以根据用户的操作做出响应，实现这种动态效果的户的操作做出响应，实现这种
7、动态效果的语言主要有语言主要有JavaScript和和VBScript。2/23/20238计算机网络技术与应用简明教程计算机网络技术与应用简明教程清华大学出版社清华大学出版社网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用6.1.2网站开发工具网站开发工具（3/5）这种动态网页有很大的局限性。首先，客这种动态网页有很大的局限性。首先，客户端动态网页中的脚本程序是程序员在设户端动态网页中的脚本程序是程序员在设计网页的时候事先写好的，响应的内容和计网页的时候事先写好的，响应的内
8、容和方法有限；其次，这些脚本程序在客户端方法有限；其次，这些脚本程序在客户端是可见的，减低了网站的安全性。为了改是可见的，减低了网站的安全性。为了改进客户端动态网页的问题，人们提出了服进客户端动态网页的问题，人们提出了服务器端动态网页。务器端动态网页。2/23/20239计算机网络技术与应用简明教程计算机网络技术与应用简明教程清华大学出版社清华大学出版社网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用6.1.2网站开发工具网站开发工具（4/5）服务器端动态网页服务器端动态网页
9、服务器端动态网页中也包含脚本程序，但是当网页被访问服务器端动态网页中也包含脚本程序，但是当网页被访问时，这些脚本程序首先在服务器端运被解释执行，然后把时，这些脚本程序首先在服务器端运被解释执行，然后把执行的结果以一个新的纯执行的结果以一个新的纯HTML网页返回客户端。在交互网页返回客户端。在交互的过程中，客户端可以得到服务器处理的结果，但是源程的过程中，客户端可以得到服务器处理的结果，但是源程序并不能在客户端看到，所以大大提高了网站的安全性。序并不能在客户端看到，所以大大提高了网站的安全性。动态网页的文件扩展名不再是动态网页的文件扩展名不再是.htm或或.html，而是与所使，而是与所使用的服
10、务器端动态网页开发技术有关，例如，使用用的服务器端动态网页开发技术有关，例如，使用ASP。NET技术开发时，网页文件的扩展名是技术开发时，网页文件的扩展名是.aspx。2/23/202310计算机网络技术与应用简明教程计算机网络技术与应用简明教程清华大学出版社清华大学出版社网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用6.1.2网站开发工具网站开发工具（5/5）静态网页设计类框架结构类FrontPage微软公司的Office套装软件之一，简单易学，适合初学者使用Dreamw
11、eaver由Macromedia公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具图形处理类Fireworks由Macromedia公司发布的一款专为网络图形设计的图形编辑软件Photoshop由Adobe公司出品的最流行的图像编辑软件，所设计的图像也可用于网页图像Flash由Macromedia公司发布的一款优秀网页动画设计软件动态网页开发类代码类ASP.NET微软公司开发的用来在服务器端构建功能强大的web应用程序JSPJSP(Java Server Pages)是由Sun Microsystems公司倡导、许多公司参与一起
12、建立的一种动态网页技术标准。JSP技术是用JAVA语言作为脚本语言的，JSP网页为整个服务器端的JAVA库单元提供了一个接口来服务于HTTP的应用程序PHP一种超级文本预处理语言（PHP:Hypertext Preprocessor），在服务器端执行的嵌入HTML文档的脚本语言，语言的风格有类似于C语言，现在被很多的网站编程人员广泛运用开发环境类Editplus一个功能很全面的文本、HTML、程序源代码编辑器，方便输入和编辑代码Visual SVisual Studio.NET 是一套完整的开发工具，用于生成 ASP Web 应用程序、XML Web services、桌面应用程序和移动应用程
13、序Webmatrix一款小巧的ASP.NET开发环境，方便安装，简单易用2/23/202311计算机网络技术与应用简明教程计算机网络技术与应用简明教程清华大学出版社清华大学出版社网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用6.2使用使用Dreamweaver8设计网页设计网页Dreamweaver最初由最初由Macromedia公司推公司推出，是一款出，是一款“所见即所得所见即所得”的网页编辑工的网页编辑工具，与具，与Flash、Fireworks并称为并称为Macrom
14、edia的的“网页制作三剑客网页制作三剑客”，2005年年4月，著名图形软件开发商月，著名图形软件开发商Adobe公公司收购了司收购了Macromedia，同年，同年9月，月，Adobe公司正式推出了公司正式推出了Dreamweaver8的版本，的版本，比之前的版本具有更强的功能和灵活性。比之前的版本具有更强的功能和灵活性。2/23/202312计算机网络技术与应用简明教程计算机网络技术与应用简明教程清华大学出版社清华大学出版社网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用
15、6.2.1运行运行Dreamweaver8图6-1 “设计器”工作界面2/23/202313计算机网络技术与应用简明教程计算机网络技术与应用简明教程清华大学出版社清华大学出版社网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用6.2.2熟悉工作界面熟悉工作界面（1/7）1、编辑窗口：、编辑窗口：打开打开Dreamweaver8并建立空白页面后看到的白色区域并建立空白页面后看到的白色区域就是编辑窗口。就是编辑窗口。图6-2 编辑窗口2/23/202314计算机网络技术与应用简明教
16、程计算机网络技术与应用简明教程清华大学出版社清华大学出版社网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用6.2.2熟悉工作界面熟悉工作界面（2/7）2、“插入插入”工具栏：工具栏：网页的内容多种多样，都可以被称为对象，简单的对象如文字、图像、网页的内容多种多样，都可以被称为对象，简单的对象如文字、图像、表格等，复杂的对象包括导航条、程序等。大部分对象都可以通过表格等，复杂的对象包括导航条、程序等。大部分对象都可以通过“插入插入”工具栏插入工具栏插入图6-3“插入”工具栏2/
17、23/202315计算机网络技术与应用简明教程计算机网络技术与应用简明教程清华大学出版社清华大学出版社网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用6.2.2熟悉工作界面熟悉工作界面（3/7）单击单击“常用常用”旁边的向下箭头，可以打开旁边的向下箭头，可以打开其他的插入对象其他的插入对象图6-4 其他插入对象2/23/202316计算机网络技术与应用简明教程计算机网络技术与应用简明教程清华大学出版社清华大学出版社网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技
18、术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用6.2.2熟悉工作界面熟悉工作界面（4/7）3、“属性属性”面板：面板：网页设计中的对象都有各自的属性，比如文字有字体、字号、对齐方网页设计中的对象都有各自的属性，比如文字有字体、字号、对齐方式等属性，图像有大小、链接等属性。所以要有式等属性，图像有大小、链接等属性。所以要有“属性属性”面板，可以面板，可以对这些对象进行属性的修改。对这些对象进行属性的修改。图6-5“属性”面板2/23/202317计算机网络技术与应用简明教程计算机网络技术与应用简明教程清华大学出版社清华大学出版社网络技术
19、与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用6.2.2熟悉工作界面熟悉工作界面（5/7）4、“浮动浮动”面板：面板：Dreamweaver中有很多的浮动面板，方便设计者使用，其实浮动面板中有很多的浮动面板，方便设计者使用，其实浮动面板上的操作功能在菜单当中也有相应的命令。上的操作功能在菜单当中也有相应的命令。Dreamweaver的浮动面板的浮动面板有有“属性属性”面板、面板、“设计设计”面板、面板、“代码代码”面板、面板、“应用程序应用程序”面板、面板、“文件文件”面板、面板、
20、“答案答案”面板等等。面板等等。“浮动浮动”面板可以通过面板左上面板可以通过面板左上角的三角图标打开或折叠起角的三角图标打开或折叠起“浮动浮动”面板面板图6-6“浮动”面板2/23/202318计算机网络技术与应用简明教程计算机网络技术与应用简明教程清华大学出版社清华大学出版社网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用6.2.2熟悉工作界面熟悉工作界面（6/7）当需要更大的编辑窗口时，可以按当需要更大的编辑窗口时，可以按F4快捷快捷键，这样所有的面板都会隐藏。再按下键，
21、这样所有的面板都会隐藏。再按下F4键，隐藏的面板又会在原来的位置上出现。键，隐藏的面板又会在原来的位置上出现。对应的菜单命令是对应的菜单命令是“窗口窗口”|“显示面板显示面板（隐藏面板）（隐藏面板）”。2/23/202319计算机网络技术与应用简明教程计算机网络技术与应用简明教程清华大学出版社清华大学出版社网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用6.2.2熟悉工作界面熟悉工作界面（7/7）5、网页编辑视图：、网页编辑视图：在编辑窗口上方有一个在编辑窗口上方有一个“文档
22、文档”工具栏，工具栏，如图如图6.7所示，左侧前三个按钮对应三种视所示，左侧前三个按钮对应三种视图，分别是代码、拆分和设计。图，分别是代码、拆分和设计。6-7“文档”工具栏2/23/202320计算机网络技术与应用简明教程计算机网络技术与应用简明教程清华大学出版社清华大学出版社网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用6.2.3站点管理站点管理（1/2）1）创建新站点）创建新站点图6-8“站点定义”对话框2/23/202321计算机网络技术与应用简明教程计算机网络技术与
23、应用简明教程清华大学出版社清华大学出版社网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用6.2.3站点管理站点管理（2/2）2）删除站点）删除站点图6-9“编辑站点”对话框2/23/202322计算机网络技术与应用简明教程计算机网络技术与应用简明教程清华大学出版社清华大学出版社网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用设计主页设计主页新建一个网页文件新
24、建一个网页文件图6-10在“文件”面板中管理网页文件2/23/202323计算机网络技术与应用简明教程计算机网络技术与应用简明教程清华大学出版社清华大学出版社网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用6.2.5CSS样式的使用样式的使用（1/4）CSS是是CascadingStyleSheets（层叠样（层叠样式表），如果在网页制作时采用式表），如果在网页制作时采用CSS技术，技术，可以轻松而又有效地对页面的整体布局、可以轻松而又有效地对页面的整体布局、字体、颜色、链接
25、、背景和其它效果实现字体、颜色、链接、背景和其它效果实现更加精确的控制。当更加精确的控制。当CCS样式更改时，应样式更改时，应用该样式的所有网页文档会自动更新。用该样式的所有网页文档会自动更新。2/23/202324计算机网络技术与应用简明教程计算机网络技术与应用简明教程清华大学出版社清华大学出版社网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用6.2.5CSS样式的使用样式的使用（2/4）图6-11“新建CSS样式”对话框2/23/202325计算机网络技术与应用简明教程计
26、算机网络技术与应用简明教程清华大学出版社清华大学出版社网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用6.2.5CSS样式的使用样式的使用（3/4）创建自定义样式：用户可以对任何文本块创建自定义样式：用户可以对任何文本块或文本区域应用自定义或文本区域应用自定义CSS样式。样式。重定义重定义HTML标签：该样式是对现有标签：该样式是对现有HTML标记的一种重定义，当用户创建或改变一标记的一种重定义，当用户创建或改变一个个CSS样式时，所有使用该标记的文本格样式时，所有使用该标记
27、的文本格式也将自动被更新。式也将自动被更新。使用使用CSS选择器：该样式用于重新定义一选择器：该样式用于重新定义一些特定的标记组合或包含了特定些特定的标记组合或包含了特定ID属性的属性的标记。标记。2/23/202326计算机网络技术与应用简明教程计算机网络技术与应用简明教程清华大学出版社清华大学出版社网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用6.2.5CSS样式的使用样式的使用（4/4）“CSS样式定义样式定义”对话框对话框图6-12 CSS样式的定义2/23/202
28、327计算机网络技术与应用简明教程计算机网络技术与应用简明教程清华大学出版社清华大学出版社网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用6.2.6层的使用层的使用（1/2）在在Dreamweaver8中层的使用可以更方便中层的使用可以更方便地对页面元素进行布局地对页面元素进行布局图6-14层的应用2/23/202328计算机网络技术与应用简明教程计算机网络技术与应用简明教程清华大学出版社清华大学出版社网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络
29、技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用6.2.6层的使用层的使用（2/2）“显示层面板显示层面板”图6-14层的应用2/23/202329计算机网络技术与应用简明教程计算机网络技术与应用简明教程清华大学出版社清华大学出版社网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用6.2.7行为的使用行为的使用通过行为可以在网页上制作出一些简单的通过行为可以在网页上制作出一些简单的交互效果，根据用户操作来触发相应的动交互效果，根据用
30、户操作来触发相应的动作。打开作。打开“行为行为”面板，利用行为面板来面板，利用行为面板来添加所选中对象的行为、删除行为等添加所选中对象的行为、删除行为等图6-16行为面板2/23/202330计算机网络技术与应用简明教程计算机网络技术与应用简明教程清华大学出版社清华大学出版社网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用6.2.8时间轴的使用时间轴的使用时间轴最简单的应用就是利用层和时间轴时间轴最简单的应用就是利用层和时间轴的结合来制作出动画网页的结合来制作出动画网页图6-
31、22记录层的路径2/23/202331计算机网络技术与应用简明教程计算机网络技术与应用简明教程清华大学出版社清华大学出版社网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用6.3 Web语言HTMLHTML语言基础知识语言基础知识HTML语言常用标记及属性语言常用标记及属性2/23/202332计算机网络技术与应用简明教程计算机网络技术与应用简明教程清华大学出版社清华大学出版社网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络
32、技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用6.3.1HTML语言基础知识语言基础知识（1/4）HTML：HyperTextMarkupLanguage，即超，即超文本标记语言，是一种用来编写超文本文档的简文本标记语言，是一种用来编写超文本文档的简单标记语言。用单标记语言。用HTML编写的超文本文档称为编写的超文本文档称为HTML文档，它能独立于各种操作系统平台（如文档，它能独立于各种操作系统平台（如UNIX，WINDOWS等）。自等）。自1990年以来年以来HTML就就一直被用作一直被用作WWW的信息表示语言，用于描述网的信息表示语言，用于描述网页的格式设计以及它与页的
33、格式设计以及它与WWW上其它网页的连接上其它网页的连接信息。使用信息。使用HTML语言描述的文件，需要通过语言描述的文件，需要通过WWW浏览器显示网页效果。浏览器显示网页效果。所谓超文本，就是因为它可以加入图片、声音、所谓超文本，就是因为它可以加入图片、声音、动画、影视等内容，并且可以从一个文件跳转到动画、影视等内容，并且可以从一个文件跳转到另一个文件，与世界各地主机的文件连接。另一个文件，与世界各地主机的文件连接。2/23/202333计算机网络技术与应用简明教程计算机网络技术与应用简明教程清华大学出版社清华大学出版社网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络
34、技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用6.3.1HTML语言基础知识语言基础知识（2/4）1.HTML的基本结构的基本结构一个简单的HTML示例欢迎光临我的主页文档头 文档体2/23/202334计算机网络技术与应用简明教程计算机网络技术与应用简明教程清华大学出版社清华大学出版社网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用6.3.1HTML语言基础知识语言基础知识（3/4）图6-23 一个简单的HTML示例2/23/
35、202335计算机网络技术与应用简明教程计算机网络技术与应用简明教程清华大学出版社清华大学出版社网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用6.3.1HTML语言基础知识语言基础知识（4/4）2.标签单标签这类标记的语法是：双标签由双标签由“始标签始标签”和和“尾标签尾标签”两部分构成，两部分构成，必须成对使用：必须成对使用：内容内容单标签和双标签的始标记内可以包含一些属性，单标签和双标签的始标记内可以包含一些属性，其语法是：其语法是：2/23/202336计算机网络技术
36、与应用简明教程计算机网络技术与应用简明教程清华大学出版社清华大学出版社网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用6.3.2HTML语言常用标记及属性语言常用标记及属性（1/19）1.页面格式标记页面格式标记1）段落标记）段落标记用来创建一个段落，中间可以加入文本，用来创建一个段落，中间可以加入文本，按段落文本显示在浏览器中。可使用按段落文本显示在浏览器中。可使用align属性，说明段落的对齐方式，语法为：属性，说明段落的对齐方式，语法为：文本内容文本内容align可以可
37、以是是left/center/right2/23/202337计算机网络技术与应用简明教程计算机网络技术与应用简明教程清华大学出版社清华大学出版社网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用6.3.2HTML语言常用标记及属性语言常用标记及属性（2/19）2）换行标记）换行标记如果加在如果加在的外边，将产生一个大的的外边，将产生一个大的回车换行，在回车换行，在的里面，产生一个小的里面，产生一个小的回车换行。的回车换行。2/23/202338计算机网络技术与应用简明教程计算
38、机网络技术与应用简明教程清华大学出版社清华大学出版社网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用6.3.2HTML语言常用标记及属性语言常用标记及属性（3/19）3）列表标记）列表标记（1）、创建普通列表创建普通列表（2）、用来创建标有数字的列表，用来创建标有数字的列表，用来创建一个标有圆点的列表。用来创建一个标有圆点的列表。2/23/202339计算机网络技术与应用简明教程计算机网络技术与应用简明教程清华大学出版社清华大学出版社网络技术与应用网络技术与应用网络技术与应用
39、网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用4）标题格式标记：共有）标题格式标记：共有6个标题标记对，个标题标记对，是最是最大的标题，大的标题，是最小的标题。是最小的标题。6.3.2HTML语言常用标记及属性语言常用标记及属性（4/19）2/23/202340计算机网络技术与应用简明教程计算机网络技术与应用简明教程清华大学出版社清华大学出版社网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用6.3
40、.2HTML语言常用标记及属性语言常用标记及属性（5/19）2.文本标记文本以黑体字形式输出用来使文本以斜体字的形式输出用来使文本以下划线的形式输出输出打字机风格的文字输出引用方式的文字（通常是斜体）输出需要强调的文本（通常是斜体加黑体）输出加重文本（通常是斜体加黑体）设置文本的字体大小、颜色，比如：红色表6-2文本标记2/23/202341计算机网络技术与应用简明教程计算机网络技术与应用简明教程清华大学出版社清华大学出版社网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用6.
41、3.2HTML语言常用标记及属性语言常用标记及属性（6/19）3.图像标记1）图像属性赋值标记）图像属性赋值标记：在：在HTML文档中不是真正加文档中不是真正加入图像，而是加入图像的路径，路径可以是相对路径，也入图像，而是加入图像的路径，路径可以是相对路径，也可以是绝对路径。可以是绝对路径。的属性根据路径的不同有不同的书写形式，如果使的属性根据路径的不同有不同的书写形式，如果使用相对路径，有下列几种情况：用相对路径，有下列几种情况：（1）如果）如果HTML文件与图像文件（比如为文件与图像文件（比如为logo.gif）在同）在同一个文件夹下，则代码应为：一个文件夹下，则代码应为：（2）如果图像文
42、件放在当前的）如果图像文件放在当前的HTML文档所在的文件夹文档所在的文件夹的子文件夹中（比如的子文件夹中（比如images），则代码应为：），则代码应为：2/23/202342计算机网络技术与应用简明教程计算机网络技术与应用简明教程清华大学出版社清华大学出版社网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用6.3.2HTML语言常用标记及属性语言常用标记及属性（7/19）（3）如果图像文件放在当前的）如果图像文件放在当前的HTML文档所在的文件夹文档所在的文件夹的上一层文件
43、夹中（比如为的上一层文件夹中（比如为files），则代码应为：），则代码应为：如果如果files是该网站下的是该网站下的home文件夹里的一个子文件夹，文件夹里的一个子文件夹，则代码应为则代码应为另外另外还有还有alt/border/width/height属性，属性，alt是浏览是浏览时鼠标移动到图像上时显示的文本。时鼠标移动到图像上时显示的文本。如果使用绝对路径，比如图像存放在如果使用绝对路径，比如图像存放在E盘根目录下，代码盘根目录下，代码应为：应为：2）水平线标记：）水平线标记：noshade表示无阴影表示无阴影2/23/202343计算机网络技术与应用简明教程计算机网络技术与应用简明
44、教程清华大学出版社清华大学出版社网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用6.3.2HTML语言常用标记及属性语言常用标记及属性（8/19）4.表格标记1）创建表格标记）创建表格标记bgcolor表示背景色表示背景色的属性的属性2）行、单元格和表格头标记）行、单元格和表格头标记2/23/202344计算机网络技术与应用简明教程计算机网络技术与应用简明教程清华大学出版社清华大学出版社网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技
45、术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用6.3.2HTML语言常用标记及属性语言常用标记及属性（9/19）tr的属性值有的属性值有align：td的属性值可以有的属性值可以有width、colspan（单元格所跨行数）、（单元格所跨行数）、rowspan（单元格所跨列数）：（单元格所跨列数）：标 志含 义最外层，创建一个表格创建一行创建一个单元格行末尾最外层表6-3 行、单元格和表格头标记2/23/202345计算机网络技术与应用简明教程计算机网络技术与应用简明教程清华大学出版社清华大学出版社网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术
46、与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用6.3.2HTML语言常用标记及属性语言常用标记及属性（10/19）5.链接标记1）创建链接页面标记）创建链接页面标记指向指向Internet上的网页文件链接：上的网页文件链接：搜狐搜狐指向本地网页文件的链接：指向本地网页文件的链接：兴趣兴趣指向电子邮件的链接：指向电子邮件的链接：与我联与我联系系target属性：属性：_blank代表链接的网页以新窗口形式打开代表链接的网页以新窗口形式打开_self代表在本窗口打开代表在本窗口打开_parent代表在父窗口打开代表在父窗口打开_top代表在
47、整个浏览器窗口打开代表在整个浏览器窗口打开2/23/202346计算机网络技术与应用简明教程计算机网络技术与应用简明教程清华大学出版社清华大学出版社网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用6.3.2HTML语言常用标记及属性语言常用标记及属性（11/19）2）创建链接标签标记）创建链接标签标记1建立标签建立标签1建立指向标签的链建立指向标签的链接接2/23/202347计算机网络技术与应用简明教程计算机网络技术与应用简明教程清华大学出版社清华大学出版社网络技术与应用网
48、络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用6.3.2HTML语言常用标记及属性语言常用标记及属性（12/19）6.帧标记frame用来向浏览器窗口中装载多个用来向浏览器窗口中装载多个HTML文件，文件，即每一个即每一个HTML文件占据一个帧，多个帧可文件占据一个帧，多个帧可以显示在同一个浏览器窗口中，帧也可以以显示在同一个浏览器窗口中，帧也可以称为框架。称为框架。1）帧属性标记）帧属性标记在在外边，可以嵌套使用外边，可以嵌套使用2/23/202348计算机网络技术与应用简明教程计算机网
49、络技术与应用简明教程清华大学出版社清华大学出版社网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用6.3.2HTML语言常用标记及属性语言常用标记及属性（13/19）示 例说 明总共有三个按列排列的帧，每个帧占整个浏览器窗口的1/3总共有三个按行排列的帧，第一个帧占整个浏览器窗口的40%，剩下的空间平均分配给另外两个帧总共有六个帧，先是在第一行中从左到右排列三个帧，然后在第二行中从左到右再排列三个帧，即两行三列，所占空间依据rows和cols属性的值，其中200的单位是像素表6
50、-4 常见的帧标记2/23/202349计算机网络技术与应用简明教程计算机网络技术与应用简明教程清华大学出版社清华大学出版社网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用网络技术与应用6.3.2HTML语言常用标记及属性语言常用标记及属性（14/19）2）帧内容标记）帧内容标记（1）放在放在中间，用来定义某一个具中间，用来定义某一个具体的帧，具有体的帧，具有src、name、scrolling、noresize属性，属性，src和和name必须赋值，必须赋值，src是帧的源是帧的源HTM