dreamweaver-cs5-网页制作.ppt

1、Dreamweaver CS5 网页制作,WWW服务的基本概念,WWW是World Wide Web的缩写，简称为Web（万维网）。 WWW起源于1989年3月，是由欧洲粒子物理实验室CERN (the European Laboratory for Particle Physics)开发的主从结构分布式（“客户机/服务器”模式）超文本系统。是以超文本标记语言（HTML,HyperText Markup Language）与超文本传输协议（HTTP，Hyper Text Transfer Protocol)为基础，提供面向Internet服务、具有一致的用户界面的信息浏览系统。1992年1月,

2、 Web的第一个版本在瑞士日内瓦问世 。,WWW是一个全球性的信息系统，使计算机能够在Internet上相互传送基于超媒体的数据信息。 WWW也可以用来建立Intranet（企业内部网）的信息系统。 WWW具有三个统一： 1.统一的资源命名方式：URL（统一资源定位符，即网址）。 2.统一的资源访问方式：HTTP （超文本传输协议）。 3.统一的信息组织方式：HTML（超文本标记语言）。,WWW服务的特点,Web系统的结构,Web浏览器软件安装在用户的计算机上，用户必须通过浏览器来查看服务器上的内容。 当客户通过浏览器向服务器发送一个查询请求时，服务器负责对来自客户机的请求做出回答，找到信息和

3、传递文件给用户；当客户机接收到文件，浏览器软件解释该文件在客户机上，用户才能在屏幕上看到。,Web系统的结构采用客户机/服务器模式。,Web系统的结构,网页存放在被称为Web服务器(Web Server)的计算机上，等待用户访问。,Web服务器,1.什么是Web 服务器？Web 服务器也称为 HTTP 服务器，它是响应来自浏览器的请求，并且发送出 网页的软件。当访问者在浏览器的地址文本框中输入一个 URL，或者单击在浏览器中打开的 网页上的某个链接时，便生成一个网页请求。 常见的 Web 服务器有：Microsoft Internet Information Server（IIS）Micros

4、oft Personal Web Server(PWS)Apache HTTP ServerNetscape Enterprise ServerSun ONE Web Server。,Web服务器,2.五种常见的Web应用程序服务器Dreamweaver可以使用以下五种服务器技术的任何一种 设计Web 应用程序：ColdFusion（可用于Windows和Solaris操作系统平台的动态服务器网页技术） ASP （Active Server Page：动态服务器网页技术） ASP .NET （.NET平台的动态服务器网页技术） JSP （Java Server Page ：Java服务器网页技

5、术） PHP （Personal Home Page：个人主页技术） 每种技术都与 Dreamweaver 中的一种文档类型相对应。,Web的特点和结构,3.Web技术经历了3个发展阶段第一代，提供对静态网页的管理和访问。第二代，提供对动态网页的访问和显示。第三代，除动态网页生成和访问之外，还提供基于Web的联机事务处理能力。静态网页是从放置到服务器以后，直到发送给浏览器不会发生更改的网页，通常用HTML语言编写其代码，保存为.htm文件。动态网页是在发送到浏览器之前由应用程序服务器修改的网页。动态网页的源文件可用HTML语言和VBScript或JavaScript等脚本语言编写，保存为.as

6、p文件，也称为Web应用程序。,WWW服务的常用术语,1. URL（统一资源定位符）Internet中使用URL(Uniform Resource Locators)来定位信息资源所在位置。URL格式由三部分组成，描述了浏览器检索资源所用的协议、资源所在计算机的主机地址及资源的路径与文件名。标准的URL如下：http:/ 表示用户要连接到名为的主机上，采用http方式读取名为index.html的超文本文件。,URL通过访问类型来表示访问方式或使用协议。常用的类型有：,Web pages http: / Ftp Servers ftp: / Telnet telnet:/ File file:

7、/,2. 网页WWW服务器上的基本信息单位就是网页。网页是单个的HTML文件，是作者公布信息的最小单位。3. 网站网站是一个存放在WWW服务器上的完整信息的集合体，由一组相关联的网络文件组成，包含一个或多个网页。4. 主页（首页）主页是一个特殊的网页，是整个网络文件的起始点和汇总点，读者开始浏览网络文件的开始点。,WWW服务的常用术语,网站界面的基本要素,文字 图像 声音 视频与动画 超级链接 表格 表单 导航栏,超级链接,超级链接是从一个网页指向另一个目的端的链接，例如指向另一个网页或者相同网页上的不同位置。这个目的端通常是另一个网页，但也可以是一幅图片，一个电子邮件地址，一个文件，一个程序

8、或者是本网页中的其他位置。其热点通常是文本，图片或图片中的区域，也可以是一些不可见的程序脚本。当浏览者单击超级链接热点时，其目的端将显示在Web浏览器上，并根据目的端的类型以不同方式打开。例如，当指向一个AVI文件的超级链接被单击后，该文件将在媒体播放软件中打开；如果单击的是指向一个网页的超级链接，则该网页将显示在Web浏览器上。加下划线的文字，就是已经建立了超链接的文本。,表格,在网页中表格用来控制网页中信息的布局方式。这包括两方面：一是使用行和列的形式把许多相互关联的信息集中起来，便于用户分析、比较；二是可以利用表格来控制各种网页元素在网页中布局定位，对网页进行排版。,表单,网页中的表单通

9、常用来接受用户在浏览器端的输入，然后将这些信息发送到用户设置的目标端。这个目标可以是文本文件，Web页，电子邮件，也可以是服务器端的应用程序。 表单一般用来收集联系信息、接受用户要求、获得反馈意见、设置来宾签名簿、让浏览者注册为会员并以会员的身份登陆站点等。表单由不同功能的表单域组成，最简单的表单也要包含一个输入区域和一个提交按钮。站点浏览者填写表单的方式通常是输入文本，选中单选按钮或复选框，以及从下拉列表框中选择选项等。,框架页面,一般情况下都是一个浏览器窗口显示一个的Web页面，这一类页面简单、直观制作方便。但是当要求在一个窗口内容纳大量信息时，比如一个大型网站的首页，这种页面就很难胜任了

10、。这时，我们就必须运用框架技术来解决问题。框架的作用就是把浏览器窗口划分为若干个区域，每个区域显示不同的网页。,可视化网页编辑工具,Dreamweaver是由Macromedia公司推出的一款网页制作软件，它具有可视化编辑界面，用户不必编写复杂的HTML源代码就可以生成跨平台、跨浏览器的网页。Dreamweaver的网页动态效果与网页排版功能都比一般的软件好用，所以它是网页设计者的首选工具。它可以满足多层次需求，是功能强大的可视化、专业级网页设计及制作工具。,动态网页技术,在Internet早期，Web站点大都是由静态web页组成，静态页面只能固定地显示事先设计好的页面内容。随着Web业务处理

11、越来越多，业务需求层次越来越高，特别是一些特殊的业务需求，比如商业网站中客户资料的获得、产品信息的查询、信息的反馈等，HTML的局限性日益明显，因此能够与用户进行动态交互的技术，就应运而生了。 动态网页页面内容经过了服务端处理，完成了动态的个性化设置。 但是客户端用户所接收到的页面与传统页面并没有任何区别。,(1) CGI技术 CGI -Common Gateway Interface，公用网关接口。用来实现CGI应用程序的编程语言有许多种，如Visual Basic、C/C+、Perl等。当用户在浏览器端填好表单要求输入的资料，提出HTTP请求后，Web服务器端执行该表单所设定的CGI应用程

12、序，处理访问者输入的信息并据此做出响应，将其运行结果传输到客户端的浏览器上。 由于CGI程序不是整合在HTML文档中，因此须使用与HTML不同的设计过程来设计一个应用程序，每一次修改程序都必须重新将CGI程序编译成可执行文件。使用CGI方式的缺点是效率低下。,动态网页技术,( 2) ASP技术 ASP （Active Server Pages）是微软公司推出的Web应用程序开发技术。使用ASP可以建立动态的、交互的、高效的Web服务器应用程序。 ASP允许用服务器端脚本来扩展HTML，使HTML编写人员可以利用VBScript、JavaScript或其他第三方脚本语言编程，实现动态网页。如果去

13、掉这些包含实现动态功能的脚本语句，它和标准的HTML文件没有任何区别。 ASP核心技术是对组件和对象技术的充分支持。利用ASP内建对象可以进一步扩展HTML，使脚本更加强大。ASP还包含标准的ActiveX组件， ASP本身封装了一些基本组件和常用组件，同时也可以使用第三方组件，通过访问组件可以简化编程，快速、简易地完善HTML。,动态网页技术,(3) JSP技术 JSP（Java Server Pages）是由Sun公司推出的，基于Java Servlet以及整个Java体系的Web开发技术。利用这一技术可以建立先进、安全和跨平台的动态网站。 JSP和 微软的ASP在技术方面有许多相似之处。

14、两者都是为基于Web应用实现动态交互网页制作提供的技术环境支持。两者都能够为程序开发人员提供实现应用程序的编制与自带组件设计，而且都能够替代CGI使网站建设与发展变得较为简单与快捷，不过两者是来源于不同的技术规范组织。,动态网页技术,站点目录结构设计,网站的目录是指建立网站时创建的文件目录。目录结构的好坏，对浏览者来说并没有什么感觉，但对于站点本身的维护、内容未来的扩充和移植有着重要的影响。,步骤1. 在驱动器根目录下创建网站文件夹；步骤2. 在网站文件夹目录下建立子目录；,按文件的类型建立子目录,按栏目内容建立子目录,网站的链接结构,网站的链接结构有树状链接结构，星状链接结构。,树状链接结构

15、,星状链接结构,网页文件命名设计,1. 文件名称统一用小写的英文字母、数字和下划线的组合 2. 主页文件名用 index.htm（index.html) 或 index.asp,3. 文件命名原则 方便理解每一个文件的意义。尽量用英文，不要用拼音、中文。 当我们在文件夹中使用“按名称排列”的命令时，同一种大类的文件能够排列在一起，以便我们查找、修改、替换等操作 。 例，“新闻”栏目html文件的命名原则 ：“国内新闻”的网页文件依次取名为：china_1.htm, china_2.htm, ；“国际新闻”的网页文件依次取名为：internation_1.htm, internation _2.

16、htm, ,应用场景,企业网站 电子商务网站 个人网站 门户网站,机构网站教育网站娱乐网站社区网站,企业网站,电子商务网站,个人网站,门户网站,机构网站,教育网站,娱乐网站,社区网站,Web服务器配置,架设网站的基本条件,1. 要有主机或主机空间 所谓主机在这里是指Web服务器。我们知道用户能浏览网站上的网页实际上是从远程的Web服务器上读取了一些内容，然后显示在本地计算机上的过程。因此如果要使网站能被访问就必须把网站的所有文件放到Web服务器上 使用本机作为Web服务器 将网站上传到专门的Web服务器上,架设ASP网站服务器,服务器运行 ASP 网站必须具备一定得软件环境和硬件环境在 Win

17、dows xp上，需安装 IIS 5.1；必须有数据库软件，如Access;,三个必选项：Internet 信息服务管理单元公用文件万维网服务,安装IIS,安装完成之后，可以打开浏览器，在地址栏输入“localhost”，如果出现如图2.2所示，就说明Internet信息服务已经安装成功，安装成功的计算机就是一台功能强大的Web 服务器了。,Internet信息服务界面,Web站点配置,选择【开始】|【控制面板】|【管理工具】|【Internet信息服务】命令，可以打开【Internet信息服务】窗口，如图所示。,Internet信息服务窗口,默认网站属性,默认网站属性,指定站点主目录、默认文

18、档,主目录用来存放站点文件的位置，默认是 %system%Inetpubwwwroot。单击“主目录”标签，切换到如图2.6所示的主目录设置页面，该页面可实现对主目录的更改或设置。可以选择其他目录作为存放站点文件的位置。实现方法：点击“浏览”按钮，选择存放站点文件的实际物理路经适当赋予访问者一些权限，例如读取、目录浏览等。,设定访问权限,一般赋予访问者有匿名访问的权限，其实IIS 默认已经在系统中建立了 IUSR_机器名 这种匿名用户了。匿名身份验证使用户无需输入用户名或密码即可访问网站上的公共部分。 实现方法：单击“目录安全性”标签，点选匿名访问和身份验证控制组里的“编辑”按钮在“身份验证方

19、法”对话框中点选“匿名访问”和“允许IIS控制密码”复选框。设置情况如图所示。,Dreamweaver CS5的工作界面,Dreamweaver CS5工作区的构成,DW CS5 站点管理,DW CS5 站点管理,DW CS5 站点管理,这里一定要选择 站点根目录。,这里是网页标题这是我的第一个网页这是用HTML语言编写的，以后还要学习网页编著工具。,以下是一个网页的源代码：,动手做第一个网页,Html基础,HTML基础,一、 HTML的概念1.什么是HTML ？超文本标记语言(HTMLHyperText Markup Language)是用于设计网页源文件（网页文档）的语言。每一个页面的代码

20、保存为一个网页源文件(.htm文件) 。八十年代初，HTML由万维网联盟（W3C：World Wide Web Consortium）制订。 HTML包括一些定义页面内容和格式的符号，称为标记。它能够将文本、图像、声音和动画结合在一个网页文档中。这些文档可以通过Web浏览器显示，还可以通过超链接以访问其它的信息资源。后来，进一步推出了XML（扩展标记语言），该语言可以由程序员自己定义标记。,HTML文档的基本结构,HTML语言的主要作用有：（1）格式化文本。如设置标题、字体、字号、颜色；设置文本的段落、对齐方式等。（2）建立超链接。通过超链接，只需用鼠标单击，就可以实现网页间的跳转。（3）创建

21、列表。把信息用一种易读的方式表现出来。（4）插入图像。使网页图文并茂，还可以设置图像的各种属性，如大小、边框、布局等。（5）建立表格。表格为浏览者提供了快速找到需要信息的显示方式，还可以用表格来设定整个网页的布局。（6）加入多媒体。可以在网页中加入音频、视频、动画，还能设定播放的时间和次数。（7）交互式表单等。为获取远程服务而设计表单，可用于检索信息、定购产品等。,HTML基础,HTML基础,2.什么是标记？标记是网页文档中的一些有特定意义的符号。这些符号指明如何显示文档中的内容。标记总是放在三角括号中，大多数标记都成对出现（有开始标记和结束标记）。结束标记和开始标记所用的字符相同，只是前面加

22、一个斜杠。例如： 用于标记一个自然段。 标记可以具有相应属性即各种参数，如size、color、 text、 width和noshade等 。 例如：,HTML基础,标记通常可以分成两种：第一种用来指定网页上的元素或元素的样式。 例如， 指定一个自然段及其字体和颜色： (自然段内容) 第二种用来指向其它的资源。 例如，指定一个链接地址：武汉大学 指定一个图片文件：,HTML基础,三、HTML的常用标记 1. HTML文档的结构标记 用来指明一个HTML文档的基本结构。 （1）文件标记：整个HTML文档内容均在标记之中。 （2）头部标记： 整个HTML文档分头部和主体部分。头部使用标记标识，凡是

23、在此标记之内的内容，例如标题等，均属于头部信息。头部信息不显示在Web页中。,HTML基础,（3）头部标题标记： 在此标记之间的内容将作为标题显示在浏览器的标题栏。注意： 标记只能放在标记之间。 （4）主体标记： 主体是Web页的主要部分， 用标记定义的信息将显示在Web页中。 例如： （见下页）,HTML基础,结构标记示例斜体字文本 ,HTML文档的基本结构,HTML文档通常由版本信息、文档头(head)和文档主体(body)三部分组成。,网页制作11111111111111111,1.版本信息说明：用户在定义HTML文档内容时，可以省略版本信息说明部分。,2.HTML文件标记：通过这一对特

24、殊标记，明确地表示了当前文档是超文本文档，它不带任何属性。,3.头部信息标记：标明当前文档的有关信息。,4.文档标题标记：title标记之间是HTML文档的标题，这个标题会显示在浏览器窗口的标题栏中，同时，它必须放在标记之间。,5.文档主体标记：在其中可以规定整个文档的一些基本属性，并且其中的内容会显示在浏览器中。,HTML基础,2.格式标记 （1）（段落标记） 标记用来创建一个段落，在此标记之间的文本将按照段落的格式显示。 （2）（换行标记） 是一个很简单的标记，它没有结束标记，用来创建一个换行。 （3）（两边缩进标记） 在标记之间的文本将按照两边缩进的方式显示。,下面一一介绍在标记之间常用

25、的各种标记。,HTML基础,（4）（列表标记） 用来创建一个列表; 用来创建列表中的上层项目; 用来创建列表中最下层项目; 和都必须放在标记之间。 例2-2 创建一个普通列表：,HTML基础,一个普通列表 中国城市 北京 上海 广州 美国城市 华盛顿 芝加哥 纽约 ,HTML基础,（5）（标有数字或圆点的列表标记） 标记用来创建一个标有数字的列表； 标记用来创建一个标有圆点的列表； 标记只能在或标记之间使用，此标记对用来创建一个列表项。 若放在之间,则每个列表项加上一个数字，若在之间,则每个列表项加上一个圆点。,HTML基础,例2-3 标有数字的列表与标有圆点的列表：,标有数字与圆点的列表中国

26、城市 北京 上海 广州 美国城市 华盛顿 芝加哥 纽约 ,HTML基础,（6）（分段标记） 标记对用来排版大块HTML段落，也用于格式化表，此标记的用法与标记非常相似，同样有align对齐方式属性 。 align属性，它用来说明对齐方式，语法是：。 align可以是Left(左对齐)、Center(居中)和Right(右对齐)三个值中的任何一个。 例如：表示标记中的文本居中显示。,HTML基础,3. 文本标记 （1）(预处理标记) 表示标记之间的文本原有格式如word格式仍有效 。（2）（六级标题标记） 是最大的标题，则是最小的标题。如果要在HTML文档中输出标题，那麽可以使用六对标题标记的任

27、何一对。,HTML基础,（3）（字体标记） 之间的文本以黑体字的形式输出； 之间的文本以斜体字的形式输出； 之间的文本以下加一划线的形式输出。 （4）（强调加重标记） 用来输出需要强调的文本(通常是斜体加黑体)； 则用来输出加重文本(通常也是斜体加黑体)。,HTML基础,（5） （字体的大小颜色标记） 可以指定输出文本的字体大小、颜色，它主要两个属性size和color。 size属性用来指定字体的大小，可以取值： -1、1和+1等； color属性用来指定文本的颜色，颜色的取值是十六进制RGB颜色码或HTML语言给定的颜色名称。例如，#ff0000，引号内的rrggbb是用六位十六进制数字表

28、示的RGB(即红、绿、蓝三色的组合)颜色，#ff0000对应的是红色。,HTML基础, Html语言所给定的颜色名称有： Black、White、Green、Maroon、Olive、Navy、Purple、Gray、Yellow、Lime、Agua、Fuchsia、Silver、Red、Blue和Teal。 例如： size取值“+1”、color取值“red”时的文本 表示标记之间的文本按大小为+1，颜色为红色显示。,HTML基础,例 文本标记的综合示例,文本标记的综合示例最大的标题使用h3的标题最大的标题黑体字文本 斜体字文本 下加一划线文本 强调的文本加重的文本size取值“+1”、c

29、olor取值“red”时的文本,HTML基础,4. 链接标记 （1）（超链接标记） 在标记对之间可指定作为超链接的文本或图像，使用标记指定图像。 例如，指定超链接及其文本“武汉大学网站” ：武汉大学网站 或者，指定超链接及其图像“d:pic1.gif”： 在上例中，href的值是武汉大学的网址。 （href缩写：http reference含义为http引用。）,HTML基础, href的值也可以是mailto:形式，即发送E-Mail形式。语法为： 这就创建了一个自动发送电子邮件的链接，mailto:后边紧跟想要自动发送的电子邮件的地址(即E-Mail地址)。 例如，链接到我的电子信箱： 这

30、是我的电子信箱(E-Mail信箱),HTML基础,还具有target属性，此属性用来指明显示的目标窗口。 如果不使用target属性，当浏览者点击了链接之后将在原来的浏览器窗口中显示HTML文档，若target的值等于“_blank”，点击链接后将会打开一个新的浏览器窗口显示HTML文档。 例如，进入，并且在新窗口中显示网页： 在新窗口中显示,HTML基础,例 链接标记的综合示例链接标记的综合示例欢迎想要学习网页制作的同学访问网站武汉大学网站,HTML基础, 本网站的主要内容在新窗口中显示欢迎给我来信，我的E-Mail是： ,可以建立HTML源文件和作为超链的图像文件d:Inetpubwwwr

31、ootweb.gif，在浏览器中显示执行结果。,5.图像标记和多媒体标记 （1）图像标记 ： 将图形文件嵌入到网页文档中的当前位置。 例如，网页文档与图形文件logo.gif在同一个目录下，则可以将代码写成: 。 假如图形文件放在网页文档所在目录的一个子目录(images)下，则代码应为： 。 此外，标记还有alt（文字代替）、align（对齐）、border（边框）、width（宽度）和height（高度）属性。,HTML基础,假如图形文件放在网页文档所在目录的上层目录(如home)下，则相对路径就必须是准网址，即用“./”表示网站，后边紧跟文件在网站中的路径。例如，home是网站下的一个目

32、录，则代码应为： 。例如，home是网站下的目录king下边的一个子目录，则代码应为： 。,HTML基础,例 图像标记举例图像标记示例,HTML基础,若事先在网站根目录中存放一幅图像logo468_60.gif ，则可以在网页中显示它。alt=网页制作属性表示在网页中可以用文字网页制作代替该图像先行显示出来。,6.多媒体标记 A.设置音乐播放的链接 在Windows中，可播放的音乐文件格式常有au、mid及wav三种。若要提供音乐文件让浏览者播放，则可建立指向音乐文件的超链接。例如： 甜美音乐 B.设置影像播放的链接 常见的影像文件有mov、mpg和avi。可建立超链接到影像文件。当浏览者单击

33、超链接时，将会调用Windows Media Player，进行影像文件播放。例如： 本市交通,HTML基础,C.直接将音乐或影像嵌入网页 可以用标记，即: 若“播放次数”设为TRUE，则无限次播放，直到单击关闭或停止。若设为NO（默认值），则只播放一次。D.播放网页背景音乐 可运用标记，即： 若“次数”设为Infinite，音乐将循环播放，直到网页关闭为止。,HTML基础,7. 表格标记 （用于制作表格或网页结构） （1）（创建一个表格） （2）和（创建表格中的每一行和每一格） （3）（创建表格头） 。 例2-7 用表格标记创建下列表格。,HTML基础,表格标记示例意大利英格兰西班牙,HTM

34、L基础,cellpadding设置格子边框与其内容之间的大小；valign是垂直对齐方式 ；colspan设置一个格子跨占的列数；rowspan设置一个格子跨占的行数。,AC米兰佛罗伦萨曼联纽卡斯尔巴塞罗那皇家社会,HTML基础,尤文图斯桑普多利亚利物浦阿申纳皇家马德里,HTML基础,拉齐奥国际米兰切尔西米德尔斯堡马德里竞技,HTML基础,8. 表单标记（用于制作对话框） （1）（表单开始和结束标记） （2）（输入区标记） （3）（列表框标记） （4） （多行文本框标记） 分别介绍如下： （1）标记用来创建一个表单，也即定义表单的开始和结束位置，在标记对之间的一切都属于表单的内容。,HTML基

35、础,标记具有action、method和target属性。 action的值是处理程序的程序名。例如：，当用户提交表单时，服务器将执行网站http:/ method用来定义处理程序从表单中获得信息的方式，可取值为 GET 或 POST 。 GET：将表单数据附加在请求页面的URL地址后面。GET方法用来传送少量数据，字符数不能超过8192个字符。 POST：将在HTTP请求中嵌入表单数据。POST方法用来传送大量数据。 target用来指定显示表单的目标窗口。,HTML基础,（2）标记用来定义一个用户输入区，用户可在其中输入信息。此标记必须放在标记对之间。标记中共提供文本框、按钮、复选框、单选

36、钮等八种类型的输入区域 。例如：,HTML基础,（3）标记用来创建一个下拉列表框或可以复选的列表框。此标记对用于标记之间。具有multiple、name和size属性。例如： 请选择最喜欢的男歌星: 刘德华 张学友 郭富城 黎明 ,HTML基础,标记指定列表框中的一个选项，此标记具有selected和value属性。value指定选项值，这个值要传送到服务器上。服务器正是通过调用区域的名字的value属性来获得该区域选中的数据项的。,（4）标记创建可以输入多行的文本框，此标记对用于标记对之间。 有name、cols和rows属性。 name 、cols和rows属性分别用来设置文本框的名称、列

37、数和行数。列与行以字符数为单位。例如：,HTML基础,例 建立一个输入密码，以及具有确认和重输按钮的表单。 请输入密码： ,HTML基础,9.其他常用标记 （1）空格标记  建立HTML源文件时，若用空格键输入多个空格，都将被视为一个。因此，如果想要输入多个空格时，必须用多个标记 。（2）原始排版有效标记和 若要使HTML源文件保留原始的文件排版方式（如：Enter表示换行等），只需在该文本前加入标记以及在文本结束后加上标记，即可使浏览器显示文件原始排版方式。,HTML基础,例如：在HTML源文件中使用空格标记窗里窗外,HTML基础,（3）自动切换标记 标记能使网页显示几秒种后

38、，自动切换到另一网页。语法如下： 说明： A. 标记应当置于标记之后; B. 设置http-equiv属性等于”refresh”表示自动更新； C. “秒数；URL=文件名称或网址”用于指定几秒后将执行自动更新，以及更新后所连接的网页地址与名称。,HTML基础,（4）水平线标记 标记是在HTML文档中加入一条水平线，它可以直接使用，具有size、color、width和noshade属性。size是设置水平线的厚度，而width是设定水平线的宽度，默认单位是像素。noshade属性用来加入一条没有阴影的水平线。 例如： 。 （5）居中标记 在屏幕上居中显示其间的内容。 例如，使网页在不同分辨率

39、时，总是居中显示，可用： ,HTML基础,HTML基础,（5）滚动的文本标签一般格式： 文本 例如： 文本 ,ASP+Access制作动态网页,一、建立Access数据库,采用Access 2003创建了一个名为db1.mdb的数据库。系统对数据的读取，存储都是对该数据库进行操作。在Access 2003数据库中，所有的数据存储都是围绕表进行的，数据不会存储在数据库的其他位置。虽然可以有许多方法访问数据，但是它们全部来自表。可以说，表示一个数据库的灵魂。,创建表,选择“使用设计器创建表”，填写相应的字段，具体如下表所示,二、Dreamweaver与数据库的连接(使用DSN连接数据库),如果打算

40、在网络应用程序中使用数据库，就需要创建至少一个数据库连接。没有数据库连接的话，应用程序将不知道在什么地方找到数据库或者如何与数据库连接。在Dreamweaver中创建数据库连接时，为应用程序提供了与数据库建立联系的信息或参数。,二、Dreamweaver与数据库的连接(使用DSN连接数据库),(1) 在控制面板中，双击管理工具，双击ODBC数据库源图标，出现ODBC数据源管理器窗口，选择系统DSN标记。(2) 单击“添加“，接着选择数据库驱动程序，本系统使用Access数据库，所以Microsoft Access Driver(*.mdb)，单击“完成“按钮。(3) 出现ODBC Micros

41、oft Access安装窗口，在数据源名一栏给连接取个名字conn，说明一栏不是必填项。(4) 单击窗口中“选择“按钮，找到数据库的所在路径(“E：我的网站”)并选中相应数据库文件，选中db1.mdb，此时ODBC Access安装窗口中数据库一栏就会出现刚才选定的数据库文件，如图所示。,1. DSN定义,二、Dreamweaver与数据库的连接(使用DSN连接数据库),二、Dreamweaver与数据库的连接(使用DSN连接数据库),二、Dreamweaver与数据库的连接(使用DSN连接数据库),建立了数据库名(DSN)之后，就可以创建网络应用程序和数据库之间的ODBC连接，DSN被定义后

42、，就能用它来调用各种参数了。(1) 启动Dreamweaver ，打开已经定义好的站点“我的网站”，在站点-我的网站窗口中点击鼠标右键，点新击建文件，文件名改为index.asp,双击文件index.asp使其处于编辑状态。(2) 单击“窗口”中的“数据库”，从“数据库”菜单中。在窗口中点击“+”，选择数据源名称，从弹出窗口“连接名称”一栏键入连接的名字conn;在数据源名称(DSN)一栏从下拉菜单中挑选数据库源名conn;Dreamweaver连接一栏选择使用本地DSN即可。,2. DSN连接,三、制作显示数据库记录页,(1)、双击index.asp文件，使其处于编辑状态，选择应用程序的“绑

43、定”，点击“+”，记录集(查询);在弹出的记录集窗口“名称”填写Rs，连接选择conn，表格选择“表1”，“列”选择全部，单击确定完成记录集的绑定。如下图;,(2)、在index.asp编辑状态下，插入2行7列的表格，并使其居中，在上一行的7个空格中加入数据表中的内容标签，然后将记录集的各字段拖入下一行对应的空格中，在表格上方输入数据库总记录数X条、目前为第X条数据，并将记录集中的总记录数，第一条记录拖入对应的字中，并使其居中。,(3)、选中第二行的全部表格，点击服务器行为，点击“+”选择重复区域，保持默认状态，点击确定完成重复显示区的设计。(4)、点击菜单“插入”，选择“数据对象”-记录集分

44、页-记录集导航条,在弹出窗口(保持默认值)点击确定。如图所示：,四、制作添加数据记录页,新建一网页，命名为add.asp，并使其处于编辑状态，点击菜单“插入”，选择“应用程序对象”-插入记录-插入记录表单向导,在弹出窗口“连接”项选择conn，“插入到表”选择“表1”，“插入后转到”填写index.asp(回到记录显示页),删除不需要的字段(ID),然后点击确定按钮完成页面的制作。,五、制作删除数据记录页,用上述学过的方法在Index.asp上创建“删除”连接。新建网页命名为delete.asp，并打开它，在其上创建一个七行二列的表格，并在左边的表格上填写相应的字段名，然后给网页绑定一个记录集，并对其字段拖到对应的右这表格中。创建一表单，并把上述所建的表格拖入表单内，同时为表单建立一个删除确定按钮，如下图所示：,五、制作删除数据记录页,点击服务器行为-记录集分页-移至特定记录,按确定按钮(保持默认值)。点击服务器行为-删除记录，在弹出菜单中填上相关内容。如图所示：,谢 谢!,