第1章 情景一——认识网页和网站.ppt

1、本章主要讲解网页与网站的基本概念，网站设计与制作流程，网站策划与规划。如何利用HTML编写网页和网站，Dreamweaver CS5制作网站的具体流程与步骤。 本章内容通过任务情景方式来组织，并用三个教学任务实施，具体涉及以下内容： 网页与网站的基本概念 使用HTML编写网页 利用Dreamweaver CS5制作网站,第一章 情景一认识网页和网站,1.1 任务一：了解网页和网站的基本概念,1.1.1 网页 网页（Web page）是一个文件，是网站中的一“页”，它存放在某一部与互联网相连的计算机中。网页经由网址（ URL ）来识别与存取，通过网页浏览器来阅读。通常的网页，是以 .htm 或

2、.html 作为文件的扩展名，俗称 HTML或XHTML文件。不同网页文件的扩展名代表不同类型的网页文件，例如以 .cgi 或.asp或.aspx或.php或.jsp等，甚至更多。,1.1.2 网站 网站（Website）是指在互联网上，按照一定的规则，使用HTML等工具制作的用于展示特定内容的相关网页的集合。由域名(也就是网站地址)和网站空间构成，通常包括主页和其他具有超链接文件的页面。 简单地说，网站也是一种信息管理工具，可以通过网站来发布想要公开的信息，或者利用网站来提供相关的网上服务与实施某种管理。人们可以通过网页浏览器来访问网站，获取自己需要的信息或者享受网上服务。,网站的组成模块：

3、 一、前台界面： 设计页面布局，搜集素材。主要内容有PS,FLASH,HTML,JAVASCRIPT,Dw,等。 二、后台开发： ASP.NET, PHP, 服务器设置等。 三、数据库设计： ACCESS, SQL, MYSQL等,1.1.3 网站相关概念,1网页编码： 网页中特定字符的编码格式。通过编码将网页代码解释成图形界面，编码不正确会出现乱码。中文编码用GB2312。现在一般都用UTF-8编码，任何一浏览器都能识别。 2超文本标记语言HTML(Hyper Text Markup Language) 在WWW中用来指定一个超媒体文本的内容和格式的一种语言。超文本的文件扩展名一般为.htm

4、l，存取这些文件的语法分析程序为Web浏览程序。是其他网页语言的基础。 3超级链接 所谓的超链接是指从一个网页指向一个目标的连接关系,这个目标可以是另一个网页,也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。而在一个网页中用来超链接的对象，可以是一段文本或是一个图片，当浏览者单击已经链接的文字或图片后，链接目标将显示在浏览器上,并且根据目标的类型来打开或运行。,网站的运行需要有服务器和客户端（浏览器），用户在客户端以http超文本协议的形式向服务器提出访问请求，服务器根据提出的请求，判断文件类型，查找文件，再返回给客户端，通过浏览器展现给客户。,

5、4浏览器（Browers） 客户端的一个Web程序，这一程序能够解释并显示超文本文件，它知道如何找到并显示由链接指向的文件。简单的说就是浏览网页的工具。 IE浏览器是人气最旺 IE6(WINXP)、IE8(WIN7)；360、遨游，搜狗、百度、UC、QQ都是以IE为内核的浏览器，在IE外面加外套、方便操作、可获取更多信息、不稳定。 火狐浏览器、谷歌浏览器都是独立内核，简洁、轻小、稳定。,firefox,ie,遨游,网景,腾讯TT,谷歌,5首页（主页） 是使用浏览器打开网站时显示的第一页，或者是网站建站时树状结构的第一页。首页也是网站最重要的一页，人们都将首页作为体现公司形象的重中之重，也是网站

6、所有信息的归类目录或分类缩影。 index.html default.asp,6网页常见内容 Logo是徽标或者商标的英文说法，起到识别和推广的作用。形象的Logo可以让消费者记住公司主体和品牌文化。 关于网站的Logo，目前有4种规格（单位均为px）。 8831 这是互联网上最普遍的Logo规格。 12060 这种规格用于一般大小的Logo。 12090 这种规格用于大型Logo。 20070 这种大规格的Logo也已经出现。,Banner 在网页中Banner一般指网页广告、旗帜广告、横幅广告等。在网页布局中，大部分网页都将Banner放置在与导航条相邻处，或者其他醒目的位置，以吸引用户浏

7、,导航条 导航条是网页的重要组成元素。设计导航条的目的是将站点内的信息分类处理后放在网页中，以帮助浏览者快速查找站内信息。导航条的形式多种多样，包括文本导航条、图像导航条以及动画导航条等。,栏目 网页的内容栏目是整个页面的组成部分，每个栏目有一个标题内容，用来显示与网站相关的不同信息，如时尚、美容、美体等。,7页脚信息 页脚即页面最底端的版块。这一位置通常放置网页的版权信息，以及网页所有者、设计者的联系方式等。有的网站也将网站的友情链接以及一些附属的导航条放置在这里。,8上传/下载 上传就是将信息从本地计算机传递到服务器。上传分为Web上传和FTP上传，前者直接通过单击网页上的链接即可操作，后

8、者需要使用专用的FTP工具。 下载是将服务器上的文件传输并保存到本地计算机。也有专用下载工具，如迅雷等。,9Web服务器 Web服务器就是在Web站点上运行的应用程序。当用户使用浏览器请求读取 Web站点上的内容时，浏览器会建立一个 Web链接，服务器接受链接，向浏览器发送所要求的文件内容，然后断开链接。 10静态网页 静态网页是页内容不会发生变化，不能实现和浏览网页的用户之间的交互。信息流向是单向的，即从服务器到浏览器。服务器不能根据用户的选择调整返回给用户的内容。 11动态网页 动态网页是指网页文件里包含了程序代码，通过后台数据库与Web服务器的信息交互，由后台数据库提供实时数据更新和数据

9、查询服务。这种网页的后缀名称一般根据不同的程序设计语言不同，如常见的有.asp、.jsp、.php、.perl、.cgi等形式为后缀。动态网页能够根据不同时间和不同访问者而显示不同内容。如常见的BBS、留言板和购物系统通常用动态网页实现。 动态网页的制作比较复杂，需要用到ASP、PHP、ISP和ASP.NET等专门的动态网页设计语言。,12网页布局 网页布局是指网页的摆布格局，应遵循对称、平衡、对比和空白等原则。常见的网页布局形式包括： 1.“国”字形布局: 也可以称为“同”字型，是一些大型网站所喜欢的类型，即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列两小条内容，中间

10、是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等。这种结构是我们在网上见到的差不多最多的一种结构类型。 2.“三”字形布局:这是一种简洁明快的网页布局，在国外用的比较多，国内比较少见。这种布局的特点是在页面上由横向两条色块将网页整体分割为3部分，色块中大多放置广告条与更新和版权提示。如图所示即是一种三字形布局的网页。 3.海报型布局: 这种类型基本上是出现在一些网站的首页，大部分为一些精美的平面设计结合一些小的动画，放上几个简单的链接或者仅是一个“进入”的链接甚至直接在首页的图片上做链接而没有任何提示。这种类型大部分出现在企业网站和个人主页，如果说处理的好，会给

11、人带来赏心悦目的感觉。,13网页配色与网页安全色 网页配色就是将不同的颜色搭配，可以产生不同的表现效果。配色就是根据不同的设计任务，通过颜色的搭配选择，来改变空间的舒适程度和环境气氛。例如绿色和金黄、淡白搭配，可以产生优雅，舒适的气氛；蓝色和白色混合，能体现柔顺、淡雅、浪漫的气氛；红色和黄色、金色的搭配能渲染喜庆的气氛；而金色和栗色的搭配则会给人带来暖意。,安全色是当红色(Red)、绿色(Green)、蓝色(Blue)颜色值为0、51、102、153、204、255时构成的颜色组合，它一共有666=216种颜色(其中彩色为210种，非彩色为6种)。这些色彩在不同硬件环境、不同操作系统、不同浏览

12、器中都能够正常显示。使用216网页安全色进行网页配色可以有效地避免原有的颜色失真问题。,14门户网站 门户网站是指通向某类综合性互联网信息资源并提供有关信息服务的应用系统。门户网站主要提供新闻、搜索引擎、网络接入、聊天室、电子公告牌、免费邮箱、影音资讯、电子商务、网络社区、网络游戏、免费网页空间等。在我国，典型的门户网站有新浪网、百度、网易和搜狐网等 。 15Internet Internet（因特网）又叫国际互联网。它是由那些使用公用语言互相通信的计算机连接而成的全球网络。 16电子邮件 电子邮件（简称E-mail，分隔符：）在Internet上，E-mail是使用最多的网络通信工具之一。可

13、以通过E-mail系统同世界上任何地方的人交换信息。,1.1.4 网站设计与制作流程,1.1.5 网站的策划与网站规划,网站策划是一项比较专业的工作，包括了解客户需求，客户评估、网站功能设计、网站结构规划、页面设计、内容编辑，撰写网站策划书，提供网站系统硬件、软件配置方案，整理相关技术资料和文字资料。,网站策划书包含的主要内容： 1网站建设的市场分析 2网站目的及功能定位 3网站技术解决方案 4网站内容规划 5网页设计 6网站维护 7网站测试 8网站的发布与推广 9网站建设日程表 。各项规划任务的开始完成时间、负责人等。 10费用明细。各项事宜所需费用清单,1.1.6 工作任务总结 在任务中，

14、主要了解网页与网站的基本概念。掌握网站和网络的常用术语，特别是一些核心技术术语是学习网页制作和网站设计的基础。认真分析网站的建设流程和人员分工。学会拟写网页策划书。而后者是本任务学习的重点。在进行基本概念学习教程中，应积极参与网站实践。,1.2 任务二：使用XHTML语言制作网页,HTML（Hyper Text Markup Language的缩写），即超文本链接标签语言。它是在互联网发布超文本文件(通常所说的网页)的通用语言。可以使用任何文本工具和本语言标签来制作网页。XHTML是 Extensible HyperText Markup Language(可扩展超文本标签语言) 的英文缩写。

15、,1.认识XHTML语言 我们在IE浏览器地址栏中输入htttp:/打开百度的首页，然后再打开IE浏览器的“查看”菜单，选择“源文件”子菜单，就会在“记事本”中打开百度网站首页对应的XHTML格式文件。,2.编辑XHTML文档 可使用任何一种文本处理软件编辑XHTML文档，推荐记事本。XHTML文档取名为*.html或*.htm。只有用浏览器才能被解释，最终在浏览器窗口中呈现为图文并茂的网页。,3.XHTML文档结构 一个XHTML文档可分为文档类型说明和文档数据两个区域，文档类型由DOCTYPE声明，文档数据区由html标签定义。,4.XHTML标签的书写格式和属性 XHTML标签分两类：包

16、含内容的标签（双标签）和自封闭的标签（单标签）。 包含内容的标签（双标签）由标签的起始标签和标签的结束标签组成，一般格式为： 内容。如中国 自封闭的标签（单标签）指起始和结束使用同一个标签的标签，一般格式：。如 除了标签本身描述的特性，大部分标签还包含一些属性，以提供更多信息。一般格式为： 内容。 如中国 一个标签可以加多个属性，属性之间加空格。通常属性都有一个值，值的选取必须合法，属性值要加上英文双 引号。 如中国,5.XHTML语言代码规范 （1）XHTML 标签一定要被正确的嵌套。 如： 这是一行加粗和倾斜文本注意：嵌套标签不能交叉。 （2）XHTML 文件一定要有正确的组织格式。所有的

17、XHTML应该正确的被嵌套在以开始以结束的标签里面，其他的标签可以有子标签，并且子标签也要被正确的嵌套在他们的父标签内。如： . . （3）所有标签和属性都必须小写。因为 XHTML文档是XML应用程序， XML 对大小写是敏感的。象 和 是两个不同的标签。,（4）所有的 XHTML 标签一定要关闭。 HTML中，不必须关闭标签，例如和不一定写对应的 和来关闭它们。但在XHTML中这是不合法的。如果是单独不成对的标签，在标签最后加一个“/”来关闭它。不能有没有关闭的空的标签存在代码中。例如错误代码： This is a paragraph This is another paragraph 正

18、确的代码为： This is a paragraph This is another paragraph （5）所有的属性必须用引号括起来。所有属性都必须赋值，没有值的属性用自己的名称作为值如：错误的代码： 正确的代码： ,（6）属性的缩写被禁止。 如：错误的代码： 正确的代码： （7）用id属性代替name属性。在 XHTML 里name属性是不能被使用的，应该用id 来替换它。如： 错误代码： 正确的代码： （8）把所有）必须被编码为 （9）不要在注释内容中使“-”。“-”只能发生在XHTML注释的开头和结束，在注释内容中不再有效。 （10）文档的开始必须有文档类型声明，在根标签html中

19、必须声明名字空间。,6.XHTML常用标签及属性,（1）标题标签 一般文章都有标题、副标题、章和节等结构，HTML中也提供了相应的标题标签,其中n为标题的等级，HTML总共提供六个等级的标题，n越小，标题字号就越大，以下列出所有等级的标题： 第一级标题 第二级标题 第三级标题 第四级标题 第五级标题 第六级标题,（2）换行、段落与水平线段标签 换行 在编写HTML文件时，我们不必考虑太细的设置，也不必理会段落过长的部分会被浏览器切掉。因为，在HTML语言规范里，每当浏览器窗口被缩小时，浏览器会自动将右边的文字转折至下一行。所以，编写者对于自己需要断行的地方，应加上标签。 段落标签 为了排列的整

20、齐、清晰，文字段落之间，我们常用来做标记。文件段落的开始由来标记，段落的结束由来标记，是可以省略的，因为下一个的开始就意味着上一个的结束。 标签还有一个属性align，它用来指名字符显示时的对齐方式，一般值有center、left、right三种。 水平线段 这个标签可以在屏幕上显示一条水平线，用以分割页面中的不同部分。的属性：size水平线的宽度width 水平线的长，用占屏幕宽度的百分比或象素值来表示align 水平线的对齐方式，有center、left、right三种noshade 线段无阴影属性，为实心线段,文本设置标签 有以下属性。 size属性就能设置字号大小，而SIZE属性的有效

21、值范围为17，其中缺省值为3。我们可以size属性值之前加上“”、“”字符，来指定相对于字号初始值的增量或减量。 Face设定本机上的任一字体类型，但有一点麻烦的是，只有对方的电脑中装有相同的字体才可以在他的浏览器中出现你预先设计的风格。 color属性设定字体的颜色，颜色值可以是一个十六进制数(用“#”作为前缀)，也可颜色名称。,（3）链接标签 超文本中的链接是其最重要的特性之一，使用者可以从一个页面直接跳转到其他的页面、图象或者服务器。一个链接的基本格式如下： 链接文字 标签表示一个链接的开始，表示链接的结束；属性“href”定义了这个链接所指的地方；通过点击“链接文字”可以到达指定的文件

22、。,超链接是网页中由一个地方跳转到另一个地方。跳转的起点称为源端点或简称源，跳转的终点即跳转到的页面称为目标端点或简称目标。超链接指出了从源端点到目标端点的路径即地址。 常用路径有三种：绝对路径、文档相对路径和站点根目录相对路径。,1. 绝对路径 如果路径是一个完整的URL地址，则这种链接路径就称为绝对路径。其特点是，路径同链接的源端点所处的位置无关。,2. 相对路径 为了避免绝对路径的缺陷，对于在本站点之中的链接来说，使用相对路径是一个很好的方法。相对路径是目标端点同源端点之间的相对位置，它的参考点是源端点所在位置，与网站的名称、地址、以及根目录的位置和名称无关。,3. 基于根目录的路径 基

23、于根目录的路径可以看作一种特殊的相对路径，只不过路径不是相对于源端点的，而是相对于本网站的根目录的相对路径。通常用一个斜线“/”表示根目录，所有基于根目录的路径都从该斜线开始。,例如我们制作完成一个生活服务类站点。分别有购物、音乐、天气、查询四个子页。 首先在我们的本地机建一个文件夹（e:mysite）。然后再分别建立购物页（buy.html）、音乐页(music.html)、天气页(weather.html)、查询页(find.html)以及主页（index.html）存放在此文件夹中。然后再作相应的链接就构成一个站点。,同一个目录中的网页之间的链接用“相对路径链接”。,URL链接：如果链接

24、的文件在其它服务器上，我们就要弄清我们所指向的文件时采用的哪一种URL地址。URL意思是统一资源定位器，通过它可以以多种通讯协议于外界沟通来存取信息。URL链接的形式是：协议名：/主机.域名路径文件名,（4）多媒体 超文本之所以在很短的时间内如此广泛的受到人们的青睐，很重要的一个原因是它能支持多媒体的特性，如图象、声音、动画等。 图象标签 超文本支持的图象格式一般有Bitmap、GIF、JPEG三种，所以我们对图片处理后要保存为这三种格式中的任何一种，这样才可以在浏览器中看到。插入图象的标签是，其格式为： src属性指明了所要链接的图象文件地址，这个图象文件可以是本地机器上的图象，也可以是位于

25、远端主机上的图象。地址的表示方法可以沿用上一篇内容“文件的链接”中URL地址表示方法。 例： img还有两个是height和width，分别表示图形的高和宽。通过这两个属性，可以改变图形的大小，如果没有设置，图形按原大显示。 由img中的align属性来设置图文的对齐方式，有以下几种： align=top/ middle/ buttom/ texttop/ baseline/ left/ right 图文之间的距离设置：水平位置的配置，可由hspace属性来完成，其垂直位置的配置.,音乐与视频 用浏览器可以播放的音乐格式有：MIDI音乐、WAV音乐、AU格式。另外在利用网络下载的各种音乐格式中

26、，MP3是压缩率最高，音质最好的文件格式。 点播音乐：将音乐做成一个链接，只需用鼠标在上面单击，就可以听到动人的音乐了. 例如： 播放一段MIDI音乐：MIDI音乐 播放一段MP3格式音乐：Miss You Finally-mp3音乐 自动载入音乐：前面，我们是借助链接来实现网上播放音乐这一功能的，我们还可以让音乐自动载入，你可以让它出现控制面板或当背景音乐来使用。基本语法： 还可以设置其他属性,（5）列表标签 无序号列表 无序号列表使用的一对标签是，每一个列表项前使用。其结构如下所示： 第一项第二项第三项 序号列表 序号列表和无序号列表的使用方法基本相同，它使用标签，每一个列表项前使用。每个

27、项目都有前后顺序之分，多数用数字表示。其结构如下所示： 第一项第二项第三项,（6）表格标签 表格的基本结构 . 定义表格.定义标题 定义表行 定义表头 定义表元(表格的具体数据),定义表格 定义表行 学号 姓名 定义表头 2012张三 定义表元(表格的具体数据.） . ,表格标题的位置： 设置标题位于表格上方： . 设置标题位于表格下方： . 表格的大小： ， n1和n2可以用像素来表示，也可以用百分比（与整个屏幕相比的大小比例）来表示。 边框尺寸设置 边框是用border属性表示表格的边框边厚度和框线。将border设成不同的值，有不同的效果。 表格的颜色 表格的背景色彩 行的背景色彩 表元

28、的背景色彩或 #=rrggbb 16进制 RGB数码, 或者是预定义色彩名称：red blue 跨多行、多列的表元 colspan表示跨越的列数，例如colspan=2表示这一格的宽度为两个列的宽度。 rowspan所要表示的意义是指跨越的行数，例如rowspan=2就表示这一格跨越表格两个行的高度。,(7) 多窗口页面(Frames) 使用Frames结构设计的HTML文件，能够将整个窗口分成几个独立的小窗口，每一个窗口可分别载入不同的文件。 Frames结构的基本格式 . 在有Frames结构的HTML文件中，Frames文件的整体结构为： . Frames结构中的每个URL值指定了一个文

29、件（这个文件必须事先做好），这个文件将载入相应的窗口。,（8）表单标签 一个表单有三个基本组成部分： 表单标签：这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。 表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。 表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。 表单的基本语法,表单的基本语法 . . *=get, post,文字输入和密码输入 代码： 您的姓名: 您的主页的网址: 密码: ,复选框(Checkbox) 和 单选框

30、(RadioButton) 代码： Banana Apple Orange ,代码： Banana Apple Orange ,列表框(Selectable Menu) 基本语法 . 代码 Banana Apple Orange ,1.2.2 工作任务和设计效果 利用已经掌握的XHTML语言功能，制作一个有关历史伟人毛泽东的个人类网站。具体工作任务是制作一个首页和五个二级页面。在制作完成之前要注意以下几点。 1首先在你的本地盘建立一个文件夹作为本网站的一个站点。（注：在此先略去文件夹和站点的区别）本任务站点先命名为web。 2在本任务站点web中分别建立子文件夹move、images和txt存

31、放站点中所用到的视频、图像及文本资料。3将收集制作好的有关视频、图像及文本资料存放到相应的子文件夹中，并将制作好的首页和五个二级页面存放web根文件中，如图1-2-28所示。,项目效果图,1.3 任务三：利用Dreamweaver CS5制作网站,Dreamweaver是Adobe公司出品的一款专业网页设计软件，其功能强大，操作简单。本任务介绍了该软件DreamweaverCS5中文版的功能、特性、基本组成及运用等基础知识，内容主要包括DreamweaverCS5的功能、工作流程及界面组成，站点的设置与管理，以及站点的创建、发布与维护等。,1.3.1 知识要点 1. Dreamweaver C

32、S5工作区布局,2. Dreamweaver CS5主要面板,“插入”面板：,“文件”面板,“CSS样式”面板,“网格”线,1.3.2 工作任务和设计效果,制作中国马文化博物馆网站。是一个以展示马文化为主旨的专题博物馆。通过本任务了解Dreamweaver CS5中网页文件的建立方法。常见网页元素的插入、控制，简单版面的布局，页面之间的超链接，站点的建立及站点文件的管理等。设计效果如图所示。,1.3.3 认识Dreamwweaver CS5,Dreamweaver CS5是Adobe公司最新推出的网页制作软件，用于对网站、网页和Web应用程序进行设计、编码和开发。它广泛用于网页制作和网站管理。

33、Dreamweaver CS5为开发各种网页和网页文档提供了灵活的环境，除了可以制作HTML静态网页外，还可以使用ASP、PHP或JSP技术，创建基于数据库的交互式动态网页。此外，Dreamweaver CS5对CSS样式表提供了更强劲的支持，并扩展了对XML和XSLT技术的支持，以帮助设计人员创建功能复杂的专业级Web页面。,1、启动 安装Dreamweaver CS5软件之后，可以执行Windows的“开始”|“程序”|Adobe Dreamweaver CS5命令，启动该软件，弹出欢迎屏幕，如图1-3-8所示。用于打开最近使用过的文档或创建新文档。其中有3个栏目，分别是打开最近的项目、新

34、建和主要功能。在3个栏中单击任意一个栏中的文字和图标，都可打开相应的功能程序或窗口。,Dreamweaver 为处理各种 Web 文档提供了灵活的环境。除了 HTML 文档以外，您还可以创建和打开各种基于文本的文档，如 ColdFusion 标记语言 (CFML)、ASP、JavaScript 和层叠样式表 (CSS)。还支持源代码文件，如 Visual Basic、.NET、C# 和 Java。 文件类型。在 Dreamweaver 中可以使用多种文件类型。使用的主要文件类型是 HTML 文件。HTML 文件（或超文本标记语言文件）。包含基于标签的语言，负责在浏览器中显示 Web 页面。可以

35、使用 .html 或 .htm 扩展名保存 HTML 文件。Dreamweaver 默认情况下使用 .html 扩展名保存文件。,2文件类型与文件创建,文件创建 Dreamweaver 为创建新文档提供了若干选项。如图所示,1.3.4 使用Dreamweaver CS5建立站点,了解本地根文件夹、远程文件夹、测试服务器文件夹的结构 Web站点是一组具有共享属性（如相关主题、类似的设计或共同目的）的链接文档和资源。Dreamweaver是创建和管理站点的工具。可以组织和管理所有的Web文档，将用户的站点上传到Web服务器，跟踪和维护链接以及管理和共享文件。 Dreamweaver CS5站点由3

36、个部分（或文件夹）组成，具体取决于开发环境和所开发的Web站点类型。,本地根文件夹。存储正在处理的文件。此文件夹可以位于本地计算机上，也可以位于网络服务器上。 远程文件夹。存储用于测试、生产和协作等用途的文件。远程文件夹通常位于运行Web服务器的计算机上。 测试服务器文件夹。Dreamweaver 在其中处理动态页的文件夹。,2、创建站点 若要定义Dreamweaver站点，需要先创建一个本地文件夹。若要向Web服务器传输文件或开发Web应用程序，还必须添加远程站点和测试服务器信息。为了让大家比较直观地了解站点的创建过程，在本任务中我们安装了FTP服务器软件Server-U 10.0配置好了文

37、件服务器（存放远程站点），同时也安装了WEB服务器软件IIS5.0配置了测试服务器（存放测试文件）。（注：有关FTP和IIS的安装不做详细说明，在后续课程中讲解。如果需要在讲授时做适当的扩充。）,在本任务中，三个文件夹分别命名为： 测试服务器文件夹：horse(http:/localhost/) 本地根文件夹：horse(E:商业网页设计与制作horse) 远程文件夹：ftp(),站点建立的具体步骤主要有五个：指定本地站点位置；指定服务器；版本控制；高级设置；站点保存与完成；。 指定本地站点位置。 在Dreamweaver菜单程序中，执行“站点”|“新建站点”命令。

38、在弹出的“站点设置对象”“对话框中，输入站点名称（horse），并选择本地根文件夹为（E:商业网页设计与制作horse）。如图所示。,指定服务器。 选择“站点设置对象”“对话框中左列的“服务器”选项。出现如图1-3-15所示的“站点设置对象”样式。通过点击“添加新服务器”来设置不同服务器类别。,“服务器”类别允许您指定本地服务器、远程服务器和测试服务器。Dreamweaver 可连接到支持 IPv6 的服务器。所支持的连接类型包括 FTP、SFTP、本地/网络、WebDAV和 RDS等。如图1-3-16所示。,本地/网络的连接设置图所示。在连接到网络文件夹或在本地计算机上存储文件或运行测试服务

39、器时使用此设置。,FTP连接设置如图所示。如果使用 FTP 连接到 Web 服务器，请使用此设置。 在FTP连接设置中，一定要单击“测试”，测试 FTP 地址、用户名和密码。对于托管站点，必须从托管服务商的系统管理员处获取 FTP 地址、用户名和密码信息。其他人无权访问这些信息。确切按照系统管理员提供的形式输入相关信息。,WebDAV连接设置如图1-3-19所示。如果使用基于 Web 的分布式创作和版本控制 (WebDAV) 协议连接到 Web 服务器，请使用此设置。对于这种连接方法，必须有支持此协议的服务器，如 Microsoft Internet Information Server (IIS) 5.0，或安装正确配置的 Apache Web 服务器。如果选择 WebDAV 作为连接方法，并且是在多用户环境中使用 Dreamweaver，则还应确保您的所有用户都选择 WebDAV 作为连接方法。,在本任务中，三种连接方法设置完成的效果如图所示。,版本控制 Dreamweaver 可以连接到