第五讲DREAMWEAVER基础

《第五讲DREAMWEAVER基础》由会员分享，可在线阅读，更多相关《第五讲DREAMWEAVER基础（51页珍藏版）》请在金锄头文库上搜索。

1、第五讲第五讲 DREAMWEAVER基础基础5.1 INTERNET及相关知识及相关知识网页开发工具网页开发工具第五讲第五讲 DREAMWEAVER基础基础INTERNETINTERNET的定义的定义什么是什么是WWWWWW超级文本超级文本浏览器浏览器URLURLIPIP地址地址域名域名 INTERNET是一个基于TCP/IP协议的网络，通过该协议实现了 不同品牌、不同性能、使用不同操作系统之间计算机之间的通信。 我们把INTERNET翻译成“国际互联网络”，它实际上是由成千上万个网络以及上亿台计算机相互连接而成的，是具有提供信息资源查询和信息资源共享的全球最大的信息资源平台。 INTERNE

2、T在人们的生活、工作和学习中扮演着举足轻重的角色。网页开发工具网页开发工具第五讲第五讲 DREAMWEAVER基础基础5.1.1 INTERNET的定义的定义 WWW是WORLD WIDE WEB的缩写，翻译为“万维网”。它是一个基于超级文本的信息查询工具。WWW是在INTERNET的TCP/IP协议基础上，由自愿加入的各计算机节点上的WWW软件和超级文本格式的信息文件组成。这些节点被称为WWW服务器，简称WEB服务器，信息就一页一页分门别类地存放在服务器上。用户使用WWW时只需提出查询要求，到何处查询及如何查询则由WWW自动完成。 网页开发工具网页开发工具第五讲第五讲 DREAMWEAVER

3、基础基础5.1.2 什么是什么是WWW WWW是INTERNET的一部分，INTERNET中还包括许多技术，如FTP、TELNET、WAIS等。 WWW采用的是窗口技术，人们只要操纵鼠标，通过下的软件和超级文本，就可以完成浏览、下载、查询等功能，就可以通过INTERNET得到所需的文本、图像和声音信息。 可以说WWW的诞生使人们从繁杂的操作中解脱出来，充分享受计算机给人们带来的便利。网页开发工具网页开发工具第五讲第五讲 DREAMWEAVER基础基础 超级文本是一种更复杂、更高级的文本显示方式，通过对有关词汇进行索引链接，使得这些带链接的词汇或语句指向文本中其他的有关段落、注解或文本。 在链接

4、的帮助下，用户可以沿着超级文本中的索引链接跳转阅读，与计算机之间的交流更加快捷。 当鼠标经过带有超级链接的文本时，鼠标会从“箭头”形状变成“手”的形状，所指向的文本会做出一些提示，通常是在其下面出现下划线或改变颜色，用户就知道这是一个带有超级链接的超级文本了。 网页开发工具网页开发工具第五讲第五讲 DREAMWEAVER基础基础5.1.3 超级文本超级文本 每个WW W用户都要在自己的计算机上安装浏览器，用于阅读网页中的信息，这是使用WEB系统最基本的条件。 浏览器是指安装在客户端，用来查看万维网中的超级文本的一种工具。按照其运行的平台分类，主要有基于UNIX系统、基于MICROSOFT WI

5、NDOWS系统和基于APPLE MACINTOSH系统的三种不同类型。 基于WINDOWS平台的浏览器是目前使用最广泛的，有INTERNET EXPLORER(IE)和NETSCAPE NAVEGATOR两种。 网页开发工具网页开发工具第五讲第五讲 DREAMWEAVER基础基础5.1.4 浏览器浏览器 URL（统一资源定位）用来指明通信协议及访问地址，以取得网络上的各种服务。它包括以下几部分：l通信协议：http、ftp、telnet、mailto等协议。l主机名：即服务器在INTERNET中的IP地址（如210.77.35.178）l或域名（如WWW.LAOHU.NET）。l所要访问的文件

6、的路径和文件名：主机名与文件的目录名之间以“/”符号分隔。 URL的书写格式为：PROTOCOL:/HOST.DOMAIN/PATH/FILENAME如 HTTP:/WWW.153.COM/SPORTS/01900.HTM网页开发工具网页开发工具第五讲第五讲 DREAMWEAVER基础基础5.1.5 URL 一个IP地址由两部分组成，即网络号和主机号。网络号用于识别一个逻辑网络，就像是电话号码中的区号，主机号用于识别网络中的某台主机，也就是电话号码。每台INTERNET中的主机至少要有一个IP地址。 IP地址由32位二进制数值组成，为了方便用户的理解和记忆，它采用了十进制标记，每个数值小于等于

7、255，数值中间用“.”隔开，如202.102.134.100。 最低的 IP地址为0.0.0.0，最高的IP地址为255.255.255.255。根据IP地址第一个数值大小将网络规模分为5级：A、B、C、D、E。 网页开发工具网页开发工具第五讲第五讲 DREAMWEAVER基础基础5.1.6 IP地址地址类别第一个数值最大主机数目适用的网络规模A0-12715387054大型网络B128-19154515中型网络C192-223254小型网络D特殊用途E特殊用途网页开发工具网页开发工具第五讲第五讲 DREAMWEAVER基础基础 IP地址为INTERNET提供了统一的寻址方式，但由于IP地址

8、是一串数字，人们记忆和识别比较困难，因此便赋予每台主机一个主机名。 主机名由英文字母或者数字组成，能代表其所处位置而且非常好记，这就是域名。网页开发工具网页开发工具第五讲第五讲 DREAMWEAVER基础基础5.1.7 域名域名 域名和IP地址可交互使用，但域名主要是为管理设置的，域名必须被映射成IP地址才能找到主机，在INTERNET中这项工作由域名服务器完成。 每台域名服务器都保存着所管辖区域内的域名与其IP地址的对照表，当INTERNET应用程序收到一个域名时，它向本地的域名服务器查询该域名所对应的 IP地址，并把查找到的IP地址返回给INTERNET应用程序。 网页开发工具网页开发工具

9、第五讲第五讲 DREAMWEAVER基础基础 域名中的顶级域名有地理和机构两类。地理的顶级域名通常分配给国家，如： Cn 代表中国； Jp 代表日本； Uk 代表英国。 以机构性质划分为7类：Com 代表商业机构； Edu 代表教育机构；Gov 代表政府机构； Mil 代表军事机构；Net 代表网络机构； Org 代表非利益机构；Int 代表国际组织。p常见域名常见域名网页开发工具网页开发工具第五讲第五讲 DREAMWEAVER基础基础网页及网页中的元素网页及网页中的元素HTMLHTML基础基础网页开发工具网页开发工具第五讲第五讲 DREAMWEAVER基础基础5.2 初识网页初识网页 网页是

10、WWW上的文档，它是由HTML（超文本表示语言）编写的，包括文本、图像、表格、声音等内容。 HTML语言严格说来并不是一种编程语言，它只是一些能让浏览器看懂的标记，当网页中包含正常文本和HTML语言标记时，浏览器会翻译由这些语言标记提供的网页结构、外观和内容等信息，从而将网页设计者的要求显示出来。 网页开发工具网页开发工具第五讲第五讲 DREAMWEAVER基础基础5.2.1 网页及网页中的元素网页及网页中的元素 通常所说的网页或网站就是由一个或多个超文本组成的，进入网站时一般首先打开网站的首页（或主页）。 网页的出色之处在于能够把超级链接嵌入到网页中，然后通过超级链接指向其他的文本、图像甚至

11、网页。 一个网页中包括的元素很多，经过浏览器的翻译后，成了我们看到的这些元素：文字、图像、表格、表单、程序及声音等。网页开发工具网页开发工具第五讲第五讲 DREAMWEAVER基础基础p浏览器浏览网页的过程浏览器浏览网页的过程 （1）浏览者的计算机向网络中的服务器发出请求，通过在浏览器的地址栏中输入URL来指向某个特定的文件；（2）服务器接受请求后，找到文件，回传给浏览者的计算机，此时传送的只是文本文件；（3）浏览器接收到服务器送来的信号，开始解读HTML标签，然后转换HTML标签，调整显示页面；网页开发工具网页开发工具第五讲第五讲 DREAMWEAVER基础基础（4）如果文件中含有图像、动画

12、及Javascript、Vbscript、ASP、PHP等程序，浏览器会再向服务器发出请求信号；（5）服务器找到这些文档再回传给浏览器；（6）浏览器接收服务器送来的结果，然后将其组织到浏览器的页面中。网页开发工具网页开发工具第五讲第五讲 DREAMWEAVER基础基础 HTML（Hypertext Markup Language）是专门用于网页制作的标记语言，用HTML语言可以在网上发布文本与图片相结合的复杂页面。 使用HTML语言制作页面既容易又枯燥，只要熟悉HTML的标记规范，就可以在记事本中制作；但是为了制作一个网页，需要输入大量的字符并要检查输入的正确性。 网页开发工具网页开发工具第五

13、讲第五讲 DREAMWEAVER基础基础5.2.2 HTML基础基础 现在在制作网页的过程中主要使用可视化的软件，但是为了实现特殊效果，还必须使用HTML语言对网页进行一些特殊编辑处理。 在进一步使用ASP、PHP等语言进行动态网页开发时，也要用到HTML语言。所以还需要了解使用HTML语言对网页进行编辑的一般方法，尤其要了解HTML标记的一般方法。网页开发工具网页开发工具第五讲第五讲 DREAMWEAVER基础基础 查看一个简单网页的HTML源代码，可以发现HTML语言主要使用到、符号，它是HTML语言对信息进行标记的基本符号。 和是每个网页文件必须使用的，放在网页文件的最前面，文件的末尾必

14、须有，这两个标记必须配对使用，在它们之间是网页的其他标记。 网页开发工具网页开发工具第五讲第五讲 DREAMWEAVER基础基础 在和之间首先出现的是和标记，它们构成文档的开头部分，两者之间包含网页的标题、使用的脚本、样式定义等。 和放在和之间，标记网页的标题，该标题出现在浏览器窗口的标题栏中。 和定义HTML文档的主题部分。网页开发工具网页开发工具第五讲第五讲 DREAMWEAVER基础基础网页文件的基本结构如下： 网页的标题 网页的主体部分 网页开发工具网页开发工具第五讲第五讲 DREAMWEAVER基础基础常用标记还有：（1）图像在网页中出现的位置：；（2）文字换行的标记： 使后面的文字

15、出现在下一行；（3）标题文字的标记： 标题字符串 ；（4）横线标记：；（5）超级链接标记：院办；网页开发工具网页开发工具第五讲第五讲 DREAMWEAVER基础基础（6）表格标记：和，中间放表格行标记；（7）表格行标记：中间放表格单元格标记；（8）表格单元格标记： 单元格字符串 网页开发工具网页开发工具第五讲第五讲 DREAMWEAVER基础基础 安装DREAMWEAVER，初次运行该软件时，会出现“工作区设置”对话框，可以设置每次运行该软件时的工作区布局：设计者视图和代码编写者视图。如果以后向更改工作区布局，选择“插入”|“工作区布局”命令（DREAMWEAVER MX 2004中选择“编辑

16、”|“首选参数”）即可进入窗口进行设置。网页开发工具网页开发工具第五讲第五讲 DREAMWEAVER基础基础5.3 工作界面介绍工作界面介绍网页开发工具网页开发工具第五讲第五讲 DREAMWEAVER基础基础规划站点的目录规划站点的目录定义新站点定义新站点创建目录和空白页面创建目录和空白页面 创建WEB站点是从对其进行规划开始的，决定要创建多少页、每页上显示什么内容、页面的布局以及页之间如何进行互相链接等，对自己的站点进行规划是进行网页设计之前必须要做的事情。网页开发工具网页开发工具第五讲第五讲 DREAMWEAVER基础基础5.4 站点管理站点管理开始制作我们的网页开始制作我们的网页 站点的

17、结构规划好了，下一步要确定站点的目录结构。一个网站会用到许多图片，产生许多HTML文件，再加上各种脚本、FLASH动画等等。不能把所有的文件全部放在根目录下，否则查找文件会成为一件苦差事，哪怕规模很小，也要规划你的目录，并在制作过程中严格按照规划来存放文件。l不要将所有文件都存放在根目录下；l按栏目内容建立子目录；l在每个目录下建立单独的images目录专门用来存放图片。网页开发工具网页开发工具第五讲第五讲 DREAMWEAVER基础基础5.4.1 规划站点目录规划站点目录 定义一个新站点的步骤如下：（1）启动DREAMWEAVER 8,单击菜单“站点”|“管理站点”命令，或使用“文件”面板“

18、文件”选项卡中的 “管理站点”超级链接，此时弹出 “管理站点”对话框。（2）单击对话框中的“新建”按钮，在弹出的菜单中选择“站点”即可。（3）在接下来的对话框中输入网站的名称（比如mywebs)、站点存放目录等信息就可以完成站点的建立。网页开发工具网页开发工具第五讲第五讲 DREAMWEAVER基础基础5.4.2 定义新站点定义新站点 创建好的站点出现在文件面板中（1）在站点管理窗口中用鼠标右键单击“mywebs”站点，出现弹出式菜单。（2）在菜单中选择“新建文件”和“新建文件夹”命令，可以建立目录和空白文件。网页开发工具网页开发工具第五讲第五讲 DREAMWEAVER基础基础5.4.3 创建

19、目录和空白页面创建目录和空白页面网页开发工具网页开发工具第五讲第五讲 DREAMWEAVER基础基础 在基于浏览的开发方案中，MICROSOFT的IIS（INTERNET信息服务）起到客户端与服务器端的连接作用。 WINDOWS 2000/XP系统安装完毕不会自动安装IIS，需要通过“控制面板”|“添加和删除程序”，在列表中选择“添加WINDOWS组件”来进行安装。 另外，家庭版的的XP系统没有安装该组件的功能，只有在专业版和企业版的XP中才能进行。 网页开发工具网页开发工具第五讲第五讲 DREAMWEAVER基础基础5.4.4 关于关于IIS（INTERNET信息服务）信息服务） 页面操作是

20、最基本的操作，编辑一个页面一定要注意保存。（1）选择“文件”|“新建”命令，在打开的对话框中选择“创建”按钮即可创建一个新页面。（2）选择“文件”|“打开”命令，在对话框中选择要打开的文件，可以对已有页面进行编辑。（3）选择“文件”|“保存”命令或单击工具栏中的“保存”按钮，可对页面进行保存；选择“另存为”命令则可将页面保存为一个新的页面。网页开发工具网页开发工具第五讲第五讲 DREAMWEAVER基础基础5.5 页面操作页面操作5.5.1 创建创建保存页面操作保存页面操作 用户在调试页面时可以对页面进行预览，观察最终效果。只要选择“文件”|“在浏览器中预览”命令即可。 用户也可以在计算机上安

21、装不同的浏览器，通过“首选参数”|“添加浏览器”将新建浏览器添加到浏览器列表，则可以在预览时选择不同浏览器进行预览。 按下F12可快速进行预览。网页开发工具网页开发工具第五讲第五讲 DREAMWEAVER基础基础5.5.2 对页面进行预览对页面进行预览 网页开发工具网页开发工具第五讲第五讲 DREAMWEAVER基础基础5.5.3 设置页面属性设置页面属性 一个页面的属性在页面建立后可以修改。选择“修改”|“页面属性”命令，打开“页面属性”对话框，可以对页面的字体、文本颜色、背景颜色、背景图像等等属性进行设置，修改后的属性将及时放映在页面中。 网页元素种类繁多，基本的元素有文本、图像，这些都可

22、以通过菜单命令或插入面板来实现。 插入面板的显示方式通过单击临近菜单栏左侧的“常用”按钮，在弹出的菜单中选择“显示为制表符”命令来进行改变。制表符式的插入面板如图所示，网页开发工具网页开发工具第五讲第五讲 DREAMWEAVER基础基础5.6 插入网页元素插入网页元素 将光标定位在工作区内，就可以输入文本。输入的文本可以通过工作区下方的“文本属性”面板进行设置。l格式的设置；l字体设置；l大小设置；l颜色设置；l对齐方式设置。网页开发工具网页开发工具第五讲第五讲 DREAMWEAVER基础基础5.6.1 插入文本插入文本 网页开发工具网页开发工具第五讲第五讲 DREAMWEAVER基础基础5.

23、6.2 插入水平线和特殊字符插入水平线和特殊字符1、水平线水平线可以分离页面中两块不同内容，使得页面整齐。单击插入面板中HTML选项卡，再单击“水平线”按钮，可以在编辑的页面中插入水平线。 插入水平线后，可以通过属性面板对水平线的宽、高、对齐、阴影等进行设置。2、特殊字符单击插入面板的“文本”选项卡，可以选择你喜欢的特殊字符。单击最右边的按钮，还可以插入更多的特殊字符。1）网页中的颜色 在网页中是以RGB方式来表示颜色的。0表示最弱，255表示最强。例如纯红色表示为（红100%，绿0%，蓝0%），即（255，0，0），用十五进制就是FF0000；同样黑色表示为（255，255，255）即FFF

24、FFF。 除此之外，还有网页安全色。因为浏览器的缘故，网页被浏览器浏览后，只有215种颜色能正常显示，而有的颜色在显示时就可能发生偏差，所以将能被浏览器正常显示的215种颜色称为网页安全色。随着浏览器性能的提高，网页安全色的范围也会越来越广。网页开发工具网页开发工具第五讲第五讲 DREAMWEAVER基础基础5.6.3 插入图像插入图像网页开发工具网页开发工具第五讲第五讲 DREAMWEAVER基础基础2）网页中的图像格式 在网页中常用的图像格式有GIF、JPEG和PNG。前两种格式的图像生成的文件体积小，在网页上使用较多，其中GIF还能做成动画，而PNG格式只在专门针对PNG格式图像浏览器的

25、网页中使用。 GIF图像最多使用255种颜色，当表达渐变色彩时，颜色过度会不够平滑，比较适合纯色的插图，但它可以将多幅图像结合在一个GIF文件中，通过顺序下载显示实现动画的效果。JPEG图像（扩展名为.jpg）最多可以支持15.8M颜色，占用的空间大，比较适合有渐变色彩、颜色细腻的图像如油画照片等。在使用图像之前，要有目的地选择图像。网页开发工具网页开发工具第五讲第五讲 DREAMWEAVER基础基础3）图像的插入 将光标定位在要插入图像的未知，单击插入面板“常用”选项卡的 “插入图像”按钮（图2-10），在出现的对话框中选择需要的图像文件并按“确定”，即可在页面中插入图像。图像插入后，其与文

26、本的对齐方式、与其他元素的边距等都可以通过下方的“图像”属性面板来进行设置。 参数有宽和高、源文件、链接、替换文本、边框和低解析度源等。其中低解析度源低解析度源用于作为图像的副本，当浏览器下载时，先下载该副本，再下载网页上的其他元素，最后再下载原图像，这样可以节省用户浏览网页的时间。网页开发工具网页开发工具第五讲第五讲 DREAMWEAVER基础基础 有了超级链接，可以从一个网页跳转到另外一个网页用超级链接实现网上冲浪，是用户在INTERNET上的最大乐趣。在DREAMWEAVER 8 中，可以制作出多种样式的超级链接。网页开发工具网页开发工具第五讲第五讲 DREAMWEAVER基础基础5.7

27、 超级链接超级链接 链接路径一般分为相对路径和绝对路径。 绝对路径是指完整的文件路径，包含其应用协议，如http:/ 相对路径指的是与页面的当前位置相对，如果链接目标文件都在同一个文件夹中，则可以使用相对路径，如iamges/button.gif。如果要链接上一层文件夹中的文件，需要在文件名称前加上“./”，如./images/button.gif。网页开发工具网页开发工具第五讲第五讲 DREAMWEAVER基础基础5.7.1 链接的路径链接的路径 链接时，在目标列表中出现4个选项：_blank、 _parent 、_self、 _top，各选项含义如下：l_blank：表示打开一个新的浏览器

28、窗口，在新窗口中显示链接所指向的网页文档内容；l_parent ：回到上一级的浏览器窗口，显示链接所指向的网页文档内容；l_self：在当前的浏览器窗口中显示链接所指向的网页文档内容；l_top：回到最顶端的浏览器窗口显示链接所指向的网页文档内容。 网页开发工具网页开发工具第五讲第五讲 DREAMWEAVER基础基础 选中要建立链接的文本,在属性窗口的链接一栏中填入要链接到的页面路径即可。网页开发工具网页开发工具第五讲第五讲 DREAMWEAVER基础基础5.7.2 创建文本超级链接创建文本超级链接5.7.3 创建图像超级链接创建图像超级链接 超级图像超级链接的方法与文本链接类似，只要选中要建

29、立链接的图像并为其指定链接文件即可。 网页开发工具网页开发工具第五讲第五讲 DREAMWEAVER基础基础5.7.4 创建图形热点链接创建图形热点链接在图形中创建一些热点，并在每个热点上建立链接，可以实现在一副图像中的不同区域有不同链接的效果。（1）在页面中插入一副可以做热点链接的图片。选中该图片，在属性窗口中点击不同的热点按钮，在图片中拖动出热点区域后释放鼠标。左边的指针工具可以对热点区域进行调整。（2）在属性面板的“链接”框中建立链接。（3）重复操作为图片其他区域的再创建热点链接。 当网页中有大段文章时，浏览全文要频繁拉动滚动条，可以采用锚记链接的方法快速跳到指定位置。（1）在文章中定位锚记位置，单击常用面板中的“命名锚记”按钮，在弹出的对话框中输入锚记名称，确定后锚记标志会插入光标所在位置。（2）重复步骤1，可以创建多个锚记。（3）再为文本建立锚记链接，选择文本，在属性面板的“链接”框中输入“#锚记名称”。（4）预览时，单击创建了锚记链接的文本，就会链接到相应锚记所在的内容。网页开发工具网页开发工具第五讲第五讲 DREAMWEAVER基础基础5.7.5 创建锚记链接创建锚记链接命名锚点：1、2、3、4；建立锚点链接：#1、#2、#3、#4网页开发工具网页开发工具第五讲第五讲 DREAMWEAVER基础基础网页开发工具网页开发工具第五讲第五讲 DREAMWEAVER基础基础