第1章Web设计基础.ppt

《第1章Web设计基础.ppt》由会员分享，可在线阅读，更多相关《第1章Web设计基础.ppt（90页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。

1、第第1 1章章 WebWeb设计基础设计基础 第第1章章Web设计基础设计基础1.1Web简介简介1.2网络基础知识网络基础知识1.3Web页的建立、保存与浏览页的建立、保存与浏览1.4超文本标记语言超文本标记语言(HTML)1.5可扩展标记语言可扩展标记语言XML简介简介实训一实训一第第1 1章章 WebWeb设计基础设计基础 1.1Web简简介介 随着Internet的不断发展、普及和推广，Web在人们的工作、学习和生活中所起的作用越来越大。从国家的政府部门到全国的各大高校、科研院所，从公司到企业甚至个人，纷纷建立了自己的Web，通过Internet把各种信息传播到了世界各地。Web正在逐

2、渐成为人们进行工作、学习、技术交流、经贸往来等各种社会活动的主要信息载体。第第1 1章章 WebWeb设计基础设计基础 那么，什么是Web呢？Web的英文全称为World Wide Web(简称为Web、WWW或3W)，中文通常称它为万维网、全球信息网、环球网。简单地说，Web是基于Internet并采用Internet协议的一种体系结构，是Internet上提供的一种服务。通过Web，任何人都可以访问处在Internet上任何位置的Web。第第1 1章章 WebWeb设计基础设计基础 通常，Web是由多个Web页通过超链接(Hyperlink)的形式，将Web页以及其他相关的组件关联在一起，

3、形成的一个具有一定目的和内容的整体，我们称它为Web站点或网站。进入Web站点首先看到的那一页被称为主页或首页(Home Page)。通过Web可以获得文本、图形、视频、音频等多种媒体信息，这些媒体被称为超媒体(Hypermedia)。第第1 1章章 WebWeb设计基础设计基础 1.1.1Web的工作原理的工作原理 Web的工作原理基于客户机/服务器(Client/Server，简称C/S)模式(如图1-1所示)。这种模式也被称为浏览器/服务器(Browser/Server)模式。当客户端用户使用浏览器向Web服务器发出浏览请求后，浏览器会根据用户指定的统一资源定位器(URL，Uniform

4、 Resource Locator)向相应的Web服务器发出请求。Web服务器(也称为HTTP服务器)接到请求后，将按照网络的传输控制/网际协议(TCP/IP，Transmission Control Protocol/Internet Protocol)和超文本传输协议(HTTP，HyperText Transport Protocol)，第第1 1章章 WebWeb设计基础设计基础 把统一资源定位器转换成页面所在服务器上的文件路径名，并调用相应的内容，由客户端的浏览器显示用户所请求的信息。因此从工作原理上讲，Web是由Web客户机、Web服务器、TCP/IP和HTTP协议构成的。Web涉及

5、到许多技术，包括服务器技术、HTML技术、XML技术、ASP技术、JavaScript技术以及ActiveX技术和VRML技术等。第第1 1章章 WebWeb设计基础设计基础 图1-1 客户机/服务器模式第第1 1章章 WebWeb设计基础设计基础 1.1.2Web的主要特点的主要特点 Web的主要特点在于，它是一个使用了超文本(Hypertext)的信息系统。超链接把Web上的各种信息连接起来，在Web上通过点击超链接元素，就可以从当前的位置链接到其他的Web上，从一个主题迅速跳到另一个主题。Web的另一个主要特点是它的交互性。一方面通过Web服务器可以发布大量的超媒体信息；第第1 1章章

6、WebWeb设计基础设计基础 另一方面，客户机也可以通过使用浏览器向Web服务器提交命令和用户信息，常见的诸如“客户登记注册表”、“读者调查表”等等，就是客户通过浏览器实现与Web交互的过程。此外，用户也可以在Web服务器上存放和发布自己的信息或者网页。第第1 1章章 WebWeb设计基础设计基础 1.2网络基础知识网络基础知识 在着手建立Web之前，必须具备一定的网络基础知识，诸如上面提到的TCP/IP协议、HTTP协议、IP地址、域名地址、URL等。了解这些知识，对于理解超链接、网络浏览等概念是十分必要的。第第1 1章章 WebWeb设计基础设计基础 1.2.1Internet的协议的协议

7、1.TCP/IP协议协议 传输控制/网际协议是一个在Internet上实现异种网之间的信息交换而使用的网络通信协议标准。它是一个协议集，其中最重要的是TCP/IP协议。凡是连入Internet的计算机，不论是何种类型和规模都必须安装和运行TCP/IP协议。第第1 1章章 WebWeb设计基础设计基础 2.HTTP协议协议 超文本传输协议是专门用于在Web浏览器和服务器之间传输超文本文档的。HTTP协议是TCP/IP协议集应用层中的协议之一。它要在通过DNS进行域名和IP地址的转换，建立TCP链接之后才能进行文档的传输。第第1 1章章 WebWeb设计基础设计基础 1.2.2IP地址、域名地址、

8、地址、域名地址、URL1.IP地址地址 Internet上连接着成千上万台计算机，为了识别和查询它们，Internet采用IP地址来惟一标识网络中的主机及网络设备的位置。接入Internet的计算机或者路由器都有一个由授权机构分配的地址。Internet的地址有两种表示形式：IP地址和域名。第第1 1章章 WebWeb设计基础设计基础 IP地址(Internet Protocol Address)采用的是分段结构，它由网络号和主机号两部分组成，其结构如图1-2所示。其中网络号用来标识一个逻辑网络，主机号用来标识这个网络上的一台主机。因此在网络上，每一台计算机都具有一个全网惟一、标识格式一致的I

9、P地址。每个IP地址的总长为32位(bit)，分为4段，每段8位，段间用“.”分开。每段的8位二进制数用十进制数表示，其值在000255之间。IP地址的格式为：nnn.hhh.hhh.hhh。例如，192.168.100.1就是典型的四字节IP地址。第第1 1章章 WebWeb设计基础设计基础 图1-2 IP地址结构 第第1 1章章 WebWeb设计基础设计基础 在付费的情况下，Internet服务提供商将为与之连网的计算机提供永久的或静态的IP地址。对位于局域网中的计算机，一般可以通过局域网管理员获得IP地址；而对于通过“拨号网络”连接到Internet的计算机，在拨号接入时，Interne

10、t服务提供商将会提供一个临时地址，HTTP服务器及浏览器将使用这个临时地址连接到Internet或其他的站点服务器，但是一旦断开连接，该临时地址就将自动消失。第第1 1章章 WebWeb设计基础设计基础 2.域名地址域名地址 由于IP地址采用数字标识网络上的主机，不易记忆，因此在TCP/IP协议集中提供了域名服务系统，允许采用英文简写代替IP地址，这就是域名地址(Domain Name Address)。在网络通信时，域名地址由域名服务器(DNS，Domain Name Server)解释成IP地址。域名地址包括域名和主机名，也采用多段表示方法，各段之间用“.”分开，每段至少由两个单词或者数字

11、组成。域名地址的表示方法为：低层的子域名在最左面，而它们所属的高层域名在最右面。第第1 1章章 WebWeb设计基础设计基础 Internet上主机域名地址的一般格式为：四级域名.三级域名.二级域名.顶级域名例如，洛阳大学电子系主机的域名地址为：第第1 1章章 WebWeb设计基础设计基础 域名地址与IP地址是一一对应的，当用户要和Internet上某台计算机进行信息交换时，只需使用对方的域名，域名服务器(DNS)会自动将域名地址转换为IP地址然后找到这台计算机。常用的顶级域名后缀见表1-1所示。第第1 1章章 WebWeb设计基础设计基础 表1-1 常用的顶级域名顶级域名域名类型示 例站 点

12、cn中国中国新浪网gov政府部门N北京图书馆Edu教育机构洛阳大学com商业组织微电脑世界第第1 1章章 WebWeb设计基础设计基础 3.统一资源定位器统一资源定位器(URL)为了确定被访问的Web站点及其网页的位置，浏览器使用统一资源定位器(URL，Uniform Resource Locator)来精确定位。URL通过定义资源位置的抽象标识来定位网络资源。URL的格式：/：/第第1 1章章 WebWeb设计基础设计基础 是指Internet的协议名称，包括HTTP(超文本传输协议)、Mailto(电子邮件传输协议)、FTP(文件传输协议)、Gopher(Gopher服务协议)、Telne

13、t(远程登陆协议)、News(网络新闻协议)、Wais(数据库检索协议)等。第第1 1章章 WebWeb设计基础设计基础 是指网络主机的域名或者IP地址。在Web上，计算机实际是通过数字IP地址相连的，站点名称只是为了方便访问者。(例如，洛阳大学校园网的域名地址是 ，与该域名地址对应的IP地址是 211.84.127.1。是网络上的计算机进行信息传输的出入口。HTTP服务器默认的端口号为80，此外，FTP的默认端口号为21，Telnet的默认端口号为23等。第第1 1章章 WebWeb设计基础设计基础 1.3Web页的建立、保存与浏览页的建立、保存与浏览1.3.1Web页的建立和保存页的建立和

14、保存 能够用来制作网页的工具很多，Office XP组件中的所有软件几乎都可以用来建立Web页。例如，使用Word的“Web页向导”创建Web页，或者将Word文件、Excel电子表格、PowerPoint演示文稿、Publisher出版物，用“另存为Web页”命令将其保存为Web页，然后使用IE浏览器进行浏览。第第1 1章章 WebWeb设计基础设计基础 但是除FrontPage以外，其他的Office组件创建的网页只能实现简单的网页功能，因为这些组件都不具备网站的管理功能以及对服务器端功能的支持。比较专业的设计软件有FrontPage、Dreamweaver 等。如果熟悉HTML语言，还可

15、以直接使用HTML语言来设计、制作网页。第第1 1章章 WebWeb设计基础设计基础 1.3.2网页浏览和浏览器网页浏览和浏览器 Web的信息资源是保存在Internet上的Web服务器中的，客户端的计算机需要通过浏览器(Browser)对Web中的内容进行访问。Web浏览器是客户端的应用程序。目前在Windows环境下最常用的浏览器主要有Internet Explorer和Netscape Navigator两种。第第1 1章章 WebWeb设计基础设计基础 1.4超文本标记语言超文本标记语言(HTML)HTML(HyperText Markup Language)是一种简单、通用的超文本标

16、记语言，用它可以制作包含文字、图形图像、声音等精彩内容的网页。HTML是带有标签的纯ASCII文件，其源代码可以用ASCII文本编辑器，如Windows附件中的“记事本”、“写字板”等进行编辑。如果掌握了HTML语言，那么，利用简单的文本编辑器就可以制作出内容丰富多彩的网页。第第1 1章章 WebWeb设计基础设计基础 在HTML文档中，字符和数据的语法结构是通过标记来表示的。标记是HTML语言的标签符号以及用标签符号构成的各种元素的统称。标签是描述性的标记，用一对中间包含若干字符表示。一般HTML标签是成对出现的，前一个是起始标签，后一个是结束标签。第第1 1章章 WebWeb设计基础设计基

17、础 例如：HTML文档开始标签。HTML文档结束标签。Web浏 览 器 根 据 文 档 的 开 始 标 签 和文档结束标签，就可以识别出在这两个标签之间使用的是超文本标记语言(网页文件)。第第1 1章章 WebWeb设计基础设计基础 1.4.1HTML文档的基本结构文档的基本结构 基本的HTML文件一般由HTML(开始信息)、HEAD(头部信息)和BODY(主体信息)三部分组成，其结构形式如下：向浏览器说明文档中使用的HTML版本。表示网页文件的开始。第第1 1章章 WebWeb设计基础设计基础 表示头部信息。头部信息主要包含、等用来说明当前HTML文档附加信息的说明标签。表示头部信息结束。表

18、示HTML主体文档的开始。第第1 1章章 WebWeb设计基础设计基础 在主体信息中主要包含、等控制网页布局及外观的标签。表示主体信息结束。表示网页文件结束。以上各标签的含义参见附录。为版本信息。第第1 1章章 WebWeb设计基础设计基础 1.4.2用用HTML语言制作网页语言制作网页1.制作网页标题制作网页标题 网页的标题包含在HEAD信息中，浏览网页时，标题将出现在浏览器窗口的标题栏上。定义标题的语法是：标题字符串 第第1 1章章 WebWeb设计基础设计基础 例1.1 要将网页文档的标题设为“洛阳大学电子工程系”，只要在头部信息标签之间插入代码洛阳大学电子工程系即可。插入该代码后浏览器

19、中的显示如图1-3所示。第第1 1章章 WebWeb设计基础设计基础 图图1-3制作网页标题制作网页标题第第1 1章章 WebWeb设计基础设计基础 2.在网页中使用图像在网页中使用图像 在网页中插入图像是必不可少的。因为使用图像的目的不仅是为了装饰网页，更重要的是可以通过图像传递信息。在网页中插入图像的语法是：例1.2 这条HTML语句在网页中的显示如图1-4所示。第第1 1章章 WebWeb设计基础设计基础 图图1-4插入图片插入图片第第1 1章章 WebWeb设计基础设计基础 标签具有以下几个属性。SRC属性：用来定义图像文件的来源，其值为带路径的图像文件名。ALT属性：图像说明字符串。

20、在非图形浏览器中，用来代替图像。另外可用参数Align、Width、Height、Border、Vspace、Hspace等来确定图像的尺寸、对齐方式等。要注意的是，标签是不成对的。第第1 1章章 WebWeb设计基础设计基础 3.在网页中使用文本在网页中使用文本 在网页中显示文本信息的HTML语法是：文本信息内容 如果要求文本的内容按照一定的段落和样式来显示，那么就需要使用各种文本样式标签来进行定义。常用于控制文本显示样式的标签如下。：分段标签，用于定义段落的开始和结束。也可以单用一个标签。第第1 1章章 WebWeb设计基础设计基础 ，：项目标题标签。每种标签定义一种字符串格式，共6种，字

21、号依次减小。：菜单列表标签，用于定义一个菜单列表。：目录列表标签，用于定义一个目录列表。第第1 1章章 WebWeb设计基础设计基础 ：无序列表标签，用于定义一个无序列表，并且用Type参数定义列表项目符号的形状。当Type=dise、circle、square时，列表符号分别为“”、“”、“”。：有序列表标签，用于定义一个有序列表。编号列表的项目符号是数字或字母，同样用Type 参数来定义。当Type=“1”、“a”、“A”、“i”、“I”时，项目符号的形式分别为“1，2，3，”、“a，b，c，”、“A，B，C，”、“i，ii，iii，”和“I，II，III，”。第第1 1章章 WebWeb

22、设计基础设计基础 ：列表项目标签，用于定义有序或无序列表中的项目，它是嵌入、标签中的子标签。项目列表、菜单列表、无序列表、有序列表是指网页中若干项可列表显示的文本项目。用不同的标签定义将显示不同的样式。下面以实例加以说明。第第1 1章章 WebWeb设计基础设计基础 例1.3 下面是一个使用段落标签、项目标题标签的例子，在浏览器中显示的结果如图1-5所示。洛阳大学电子工程系 定义标题样式第第1 1章章 WebWeb设计基础设计基础 洛阳大学电子系经济系外语系环化系第第1 1章章 WebWeb设计基础设计基础 图图1-5定义标题样式定义标题样式第第1 1章章 WebWeb设计基础设计基础 例1.

23、4 下面是一段显示有序和无序列表的HTML代码，其在浏览器中显示的结果如图1-6所示。洛阳大学电子工程系 有序列表 2001级第第1 1章章 WebWeb设计基础设计基础 计算机应用专业网络专业电气专业无序列表2002级计算机应用专业网络技术专业电气技术专业第第1 1章章 WebWeb设计基础设计基础 图图1-6使用项目列表使用项目列表第第1 1章章 WebWeb设计基础设计基础 4.用用HTML的表格标签在网页中定义表格的表格标签在网页中定义表格 表格通常由若干行和列组成，表的第一行称为标题行。定义表格的HTML语法是：在这个标记中包含的主要表格属性如下。：用于定义表格的起始行和终止行。：用

24、于定义表格的单元格。这个标签必须包含在标记中。第第1 1章章 WebWeb设计基础设计基础 ：用于定义表格的标题行。：用于定义以像素为单位的边框厚度，取值范围为0100。：用于定义表格的标题。它可以放在之间的任何位置，但不能放在、的内部。表格的其他属性见附录。第第1 1章章 WebWeb设计基础设计基础 例1.5 下列HTML语句定义一张学生登记表，其在浏览器中显示的结果如图1-7所示。洛阳大学电子系 第第1 1章章 WebWeb设计基础设计基础 图图1-7定义表格定义表格第第1 1章章 WebWeb设计基础设计基础 学号姓名性别年龄班级专业第第1 1章章 WebWeb设计基础设计基础 003

25、368李国良男1902级(3)班电气技术 学生登记表 第第1 1章章 WebWeb设计基础设计基础 5.用用HTML语言定义表单语言定义表单 表单在Web页中被用来收集用户的信息，并使网页具有交互功能。例1.6 一个用HTML语言创建的表单应用的综合例子，“读者调查表”在这个表单里应用了“单行文本框”、“单选按钮”、“复选按钮”、“下拉菜单”以及“提交按钮”等表单功能。该例的显示结果如图1-8所示。第第1 1章章 WebWeb设计基础设计基础 图图1-8定义表单定义表单第第1 1章章 WebWeb设计基础设计基础 读者调查表 用户名：性别：男女第第1 1章章 WebWeb设计基础设计基础 学历

26、：请选择你的最高学历博士硕士本科大专第第1 1章章 WebWeb设计基础设计基础 最喜欢的栏目：新闻中心学习园地 客户反馈：请在此输入你对本站的意见和建议.第第1 1章章 WebWeb设计基础设计基础 从这个实例中可以看到，定义表单时主要用到的HTML语言标签如下。：这对标签用来定义表单的开始和结束。：该标签在表单中定义一个用户输入域，包括“单行文本域”、“单选按钮”、“复选按钮域”、“隐藏域”、“提交按钮域”、“重置按钮域”、“密码域”等。这些不同的输入域是通过定义不同的Type参数来实现的。如定义的是一个复选按钮。第第1 1章章 WebWeb设计基础设计基础 ：该标签定义的是一组菜单。：该

27、标签用来定义菜单中的每一项。如在上例中，学历栏里包含有多种学历项，每项都必须用来定义，如博士等。但需要嵌入在标签对之间。第第1 1章章 WebWeb设计基础设计基础 ：该标签定义一个“多行文本域”。如上例中为客户提供的“客户反馈”信息栏，就是用来定义的。要注意的是，、都应包含在标签对之间。第第1 1章章 WebWeb设计基础设计基础 6.在网页中使用框架在网页中使用框架 框架网页的最大特点是能够将浏览器窗口分割成若干个子窗口，并且可以在浏览器窗口中同时显示静态和动态的网页信息。用HTML的标签可以定义显示多个子窗口，每个子窗口被称为一个框架。每个框架中显示一个HTML文档。使用框架的HTML文

28、档与其他HTML文档的结构有所不同，它不使用标签。其基本结构为：第第1 1章章 WebWeb设计基础设计基础 定义窗口的水平分割。定义窗口的垂直分割。定义窗口及要在该窗口中显示的HTML文档。第第1 1章章 WebWeb设计基础设计基础 例1.7 下面的HTML语言定义了一个目录结构的框架网页，其在浏览器中的显示如图1-9所示。框架网页 第第1 1章章 WebWeb设计基础设计基础 此网页使用了框架，但你的浏览器不支持框架。第第1 1章章 WebWeb设计基础设计基础 图图1-9定义框架网页定义框架网页第第1 1章章 WebWeb设计基础设计基础 1.5可扩展标记语言可扩展标记语言XML简介简

29、介 虽然HTML语言简单易学，但是由于HTML语言规定的标记是固定的，所以HTML的语法是不可扩展的。为了克服HTML缺乏灵活性和伸缩性的缺点，1982年2月，Web标准化组织W3C发布了可扩展的标记语言XML(Extensible Markup Language)。XML和HTML都属于SGML的子集，但它们是不同的。第第1 1章章 WebWeb设计基础设计基础 XML并没有一套固定的标记，它可以根据实际的需要来定义不同的标记，可以用来定义“标记集”(Tag Set)。它们之间最主要的区别是，HTML主要用于描述Web页面的显示，而XML主要用于描述Web页的文本结构，因此在网页设计上，XM

30、L与HTML间有着互补的关系。HTML描述显示数据的通用方法，XML则提供描述数据交换的功能。XML正逐步成为互联网标准的重要组成部分，目前在ADO2.5和IE5.0中已支持XML，XML将成为未来新一代的网页标记语言。第第1 1章章 WebWeb设计基础设计基础 实 训 一 HTML语言是网页设计的基础，虽然对于非网页专业设计人员来说，它并不是必须掌握的内容，但是如果能够了解它并能适时应用它，不仅能大大简化设计过程，而且能够进一步理解网页设计及网站管理的内涵，做到知其然，且知其所以然。尤其是在建立Web站点时，它更是必不可少的。现代计算机科学技术的发展速度非常快，软件更是这样。因此，不能试图

31、学通、学精一门语言后再去使用它，因为到那时，或许它已经过时了。第第1 1章章 WebWeb设计基础设计基础 事实证明，在实践中学习，边做边学，边学边做，多看、多想、多做是学习计算机语言最好、最有效的方法。实际上HTML语言并不难懂，也不难学，稍有编程经验的人很快就能掌握它；没有编程经验的人，经过一定时间的学习和训练，也完全能够掌握它。下面我们一起来制作一个实例，分析一下采用HTML标记语言是如何生成网页的。我们以XX大学计算机科学技术系计算中心主页(如实训图1-1所示)为例。第第1 1章章 WebWeb设计基础设计基础 实训图 1-1第第1 1章章 WebWeb设计基础设计基础 这是你做的第一

32、个网页。或许你还读不大懂HTML程序，不要紧，先将它输入到你的计算机中，注意理解每个单词的含义，结合本书后面的附录，经过试运行、调试、修改、再运行，你一定会很快地理解和掌握它的。注意，要求浏览器采用IE5.0，显示分辨率设定为800600。第第1 1章章 WebWeb设计基础设计基础 前言中我们提到，FrontPage是Office办公系列软件中的组件之一，因此本书将侧重点放在局域网内的公务网页设计上。一般来说，公务网页主要用于反映本部门、本办公室的业务职能和发布相关信息，所以公务网页应该体现严肃、规范、简洁、明了的特点，避免过多的装饰与点缀，说明问题即可。首先打开Windows的“记事本”，

33、输入下面的HTML程序。注意，下列程序中的带方框的句子为注释，不要输入。第第1 1章章 WebWeb设计基础设计基础 XX大学计算机科学系计算中心之间的内容将写入浏览器的标题栏 background语句是设定网页的背景 第第1 1章章 WebWeb设计基础设计基础 实验教学计划 学期实验安排 仪器设备管理 资料档案管理 科研课题管理 第第1 1章章 WebWeb设计基础设计基础 第一个表格，之间设定了网页上部的链接表格栏 第第1 1章章 WebWeb设计基础设计基础 XX大学计算机科学系计算中心 第第1 1章章 WebWeb设计基础设计基础 第二个表格，用于显示网页主题，并调出了两幅相同的gi

34、f图片 hr为显示水平线，颜色为蓝色 第第1 1章章 WebWeb设计基础设计基础 通知 本周机房上机实验安排表(第8周)第第1 1章章 WebWeb设计基础设计基础 1、图书馆换发电子借书卡，截止日期为4月30日，请各位教师尽快办理。2、请教研室速将教学调整计划报我中心。第第1 1章章 WebWeb设计基础设计基础 上面单元格定义了留言板 星期一 星期二 星期三 星期四 星期五 第第1 1章章 WebWeb设计基础设计基础 杨根如 编译原理 00网络1 李大伟 C+语言 02计算机 王子刚 数据库 01网络 杨根如 编译原理 00网络2 郭卫东 操作系统 00网络1 第第1 1章章 WebW

35、eb设计基础设计基础 李大伟 数据库 00计算机 郭卫东 操作系统 00网络2 李静 图形处理 00网络1 王子刚 数据库 01计算机 顾海波 网页设计 00网络1第第1 1章章 WebWeb设计基础设计基础 顾海波 网页设计 00网络2 上面单元格定义了实验课表 第三个表格，定义和显示了留言板和实验课表 第第1 1章章 WebWeb设计基础设计基础 注意，程序输入完毕后，要以“另存为”的方式存盘，程序名的后缀为.htm，如实训图1-2所示。该程序名为ds.htm，存入到“我的文档”文件夹中。第第1 1章章 WebWeb设计基础设计基础 实训图 1-2第第1 1章章 WebWeb设计基础设计基

36、础 现在，我们就可以运行它了。在运行它之前，将本书电子教案中的“第一章实训”文件夹中的所有文件拷贝到“我的文档”中，然后在“我的文档”中找到ds.htm，你就可以发现它的图标为 。双击它，这时程序将自动打开浏览器，显示该页内容。如果显示有问题，可能是程序输入过程中有误，应再次打开“记事本”，调出ds.htm程序文件进行修改。(注意，修改完后要先存盘，再试运行。)要求在上机实习之前，应仔细分析程序结构，弄清各条语句的含义以及各语句之间的关系，不要待上机实习时对着屏幕分析，因为调试程序是一件很费时间的事情。第第1 1章章 WebWeb设计基础设计基础 动手与思考动手与思考 当程序运行调试正确之后，可对ds.htm做如下改动。1.将网页中的“XX大学”改成你所在的学校或部门的名称。2.在链接表格栏中增加一项“中心教师情况”。3.将课程表中的内容改成你所在班级的课程表。4.将通知栏中的内容改成你所在班级或单位需发布的消息。第第1 1章章 WebWeb设计基础设计基础 *5.扩展实验课表一的结构，再做一个“本周机房二上机实验安排表”，安排在表一下面，并将通知栏向下延伸至表二的底线对齐。通过试运行这个程序，我们会对网页设计有最初的认识，其中有一个“表格”的概念，它是控制和规范网页布局非常重要的也是唯一的手段。关于“表格”，我们会在第4章详细介绍。