dreamweaver第1章 基础篇.ppt

1、第1章 Dreamweaver基础知识,本章要点 了解关于网页的基本概念 认识构成网页的常用元素 了解网页的常见布局 学会使用Dreamweaver创建网页 在Dreamweaver中管理站点资源 认识Dreamweaver的一些独特功能,网页是用于在Web浏览器中打开的一种文件，它能够任意包含丰富的文字、图片，以及动画。 伴随互联网的发展，网页被大量使用。人们在浏览器中输入网址，各种信息便通过网页呈现出来，其应用包括实时新闻与个人博客、电子邮件和网上办公、在线社区及网页游戏等等。,1.1 网页设计基础,网页的本质并不复杂，事实上，它与普通文本文档的区别并不大。在IE浏览器中打开网页后，选择工

2、具栏上的【页面】|【查看源文件】命令，就能够在记事本中了解网页的原始风貌。,1.1 网页设计基础,这里包含的仅仅是网页的HTML内容。现在选择【文件】|【另存为】命令，在弹出的对话框中指定【保存类型】为“所有文件”，而在【文件名】文本框中输入任意文件名称，并在最后加上扩展名“.htm”，单击【保存】按钮，便得到了一份网页文件。,互联网将世界各地的资源整合在了一起。要查看新闻或是下载文件时，人们并不需要知道这些信息存放在地球的哪一台计算机上。要访问它们时，只需打开Web浏览器，然后键入正确的地址就可以了。 以Windows系统自带的IE浏览器为例，双击桌面上的IE图标，在打开的浏览器地址栏中输入

3、“”并回车，就能查看雅虎网站首页。而这一串字符，便是网站的域名。显示于地址栏中的字符串将会在前方添加“http:/”字样，它与后面的内容一起，构成了该网站在互联网上的唯一标识。 网站是互联网上的一个信息集中地，它里面包含了大量的网页、图片，以及其他任意格式的文件。网站需要存储在特定的计算机上，当有浏览器请求访问它里面的不同内容时，网站中的资源便会显示出来。至于如何处理来自世界各地的请求，则交由Web服务器完成。,1.1 网页设计基础,Web服务器是一种特殊的应用程序，不同的浏览器请求访问网站时，Web服务器负责取出合适的内容以返回给它们。 常见的Web服务器有Apache、Tomcat、IIS

4、、GlassFish等。IIS即“Internet Information Services”，由Microsoft提供。 需要开启IIS功能时，单击【开始】按钮并选择【控制面板】命令，在打开的窗口中依次单击【程序】|【打开或关闭Windows功能】链接，在弹出的【Windows功能】对话框中勾选【Internet信息服务】复选框，然后单击【确定】按钮就可以了。,1.1 网页设计基础,来看看IIS 7的管理台界面与在IE中显示的默认站点首页。,1.1 网页设计基础,现在为当前站点添加新的目录。回到IIS管理窗口后右击默认网站名称，从弹出的快捷菜单中选择【添加虚拟目录】命令。在弹出的对话框中输入

5、该目录的别名这将显示在浏览器地址栏中。在【物理路径】栏中输入网站内容所在的磁盘目录并确定。,1.1 网页设计基础,能被浏览器直接识别和显示的是HTML文件，其扩展名通常为“.htm”或“.html”，由于其内容不会变化，也称之为静态网页。HTML文件能够被任何文本编辑器编辑修改，它的典型结构是由多个标签组织起来的文本。下图显示的是由记事本创建的简单HTML文件。,1.1 网页设计基础,为了让网页在尽可能多的浏览器中看起来一致，早期的方法是使用表格来布局。这固然是十分天才的方法，却也让表格担负起原本不属于它的任务。为了精确定位网页上的元素，人们不得不使用多层嵌套的表格，这不仅使得HTML源文件十

6、分臃肿，也让整个页面的结构显得混乱。 HTML标签中也提供了许多对文本样式进行更改的标签，比如、等，当网页包含大量内容时，这些标签会被埋藏在很深的HTML源代码中。而如果要修改大量网页的样式，逐一寻找和更改它们简直就是一场灾难。 为解决此问题，人们提出了CSS，这样HTML就只需要关注如何组织好网页中的内容，因为无论是布局安排还是版式设计，CSS都能够担当起大任。再加上运行于Web浏览器上的脚本语言JavaScript，这样就形成了结构、表现与行为分离的良好理念。,1.1 网页设计基础,Structure | Presentation | Behavior,使用记事本打开之前保存的网页文件，在

7、标签对中加入一段CSS代码，然后保存并查看页面。,1.1 网页设计基础,HTML文档中的标签定义了CSS代码的开始与结束，而样式表中的“body”、“h1”和“p”等选择器及其中的CSS属性和值则重新定义了HTML标签的外观。只有在Web浏览器中查看网页时，它们的效果才会显示出来。,Dreamweaver不仅提供了编辑和管理HTML与CSS的工具，能够让设计与开发人员快速构建优秀的网页，还具备了强大的站点管理功能，方便统一管理整个站点中的资源，此处的版本为CS4，这里使用默认的设计器布局。,1.1 网页设计基础,考虑到网页最终仍需要在访问者的浏览器中查看，设计页面时应当充分考虑它在不同种类、不

8、同版本的浏览器，甚至不同设备（如手机）上的表现。虽然Dreamweaver提供了全面的浏览器兼容性测试功能，但了解网页实际表现最简单的方法，仍是直接在Web浏览器中进行查看。这里出场的是IE 7和Firefox 3。,1.1 网页设计基础,Dreamweaver这一“梦想编织者”的安装与使用方式当与操作系统中其他常见的应用软件没有差别，这里来了解一下它的基本操作。 软件启动后，会在主窗口会显示欢迎屏幕，列出了一些常见的任务。由于此时并未打开或创建任务文件，许多菜单项、工具栏命令和面板都不可用。单击【欢迎】面板底部的【快速入门】按钮可获取简略教程；单击【资源】按钮则可获取软件相关扩展。 单击欢迎

9、屏幕【新建】栏下的“HTML”项，创建一份新的HTML文档，此时即可使用软件的各项命令来编辑当前文档。 要退出Dreamweaver时，选择【文件】|【退出】命令，或是使用快捷键【Ctrl】+【Q】与【Alt】+【F4】。,1.2 Dreamweaver基本操作,菜单栏上包含了Dreamweaver几乎所有的命令。对于一些不知来源的命令，往往可以从众多菜单项中找到答案。 【文件】菜单包含了管理网页文件的命令，包括新建和保存、导入与导出、文件转换、检查与验证等。一个常用的命令是【在浏览器中预览】，可以从弹出的子菜单中选择使用何种浏览器查看网页。 与其他文本编辑器一样，【编辑】菜单中包括了常见的选

10、择、查找与替换功能。另外，Dreamweaver在这里提供了大量的代码辅助工具。用户也可以在此查找网页的标签库或是自定义软件的各项设置。 【查看】菜单提供了缩放和切换视图的方法，此菜单也用来定制Dreamweaver的界面外观、切换编辑视图、查看可视化助理与辅助元素等等。,1.2 Dreamweaver基本操作,【修改】菜单集成了网页的常用修改命令，包括自定义页面属性、编辑标签、设计表格、编辑图像、拆分框架、排序等等，另外，这里还包含了【属性】面板与【CSS样式】面板的启动命令。 【格式】菜单包含了格式化文本的常用命令，包括更改字体与样式、颜色，改变文字大小和对齐方式等。 【站点】菜单提供了管

11、理站点的一些命令，而【窗口】菜单则主要用来显示和隐藏Dreamweaver的界面元素，以及更改软件整体布局。如果对Dreamweaver的使用有疑问，可以从【帮助】菜单中得到许多有益的知识。 选择【窗口】|【工具区布局】|【经典】命令，即可将Dreamweaver布局切换为经典模式，此时【插入】面板调整为【插入】工具栏，显得更为方便。,1.2 Dreamweaver基本操作,文档编辑区提供了【代码】、【拆分】与【设计】三种视图，单击对应的按钮以切换。其中，【代码】视图给出了网页的HTML和CSS、JavaScript源代码，而【设计】视图将呈现网页的可视化效果，【拆分】视图仅仅是将二者结合在一

12、起。需要查看网页在浏览器中的实际表现时，除了按下【F12】键，也可以使用CS4新增的【实时视图】按钮来随意切换编辑与浏览状态。,1.2 Dreamweaver基本操作,打开Dreamweaver，选择【文件】|【新建】命令，在弹出的【新建文件】对话框中选择【空白页】|【HTML】|【无】，创建一份空白HTML文档。切换到【设计】视图，在【标题】框中输入网页标题，然后按下回车键，在正文区输入适当内容。,1.2 Dreamweaver基本操作,选取首行行文字，将【插入】面板切换到【文本】类别，然后单击此处的【h1（标题1）】按钮，将该段文字设置为标题。现在保存本文档。选择【文件】|【保存】命令，在

13、弹出的对话框中选择网页文件的保存位置，输入文件名称并单击【保存】按钮即可。,1.2 Dreamweaver基本操作,在【设计】视图中将光标定位到正文之前以输入导航栏的各项文本，记得换行时使用回车键就可以了。在【设计】视图中选中刚才输入的多个段落，然后单击【插入】面板【文本】类别中的【ul（项目列表）】按钮，将这些段落转换为项目列表。,1.2 Dreamweaver基本操作,既然是导航栏，有必要为每个列表项添加超链接。选择列表项中的文本，然后单击【插入】面板【常规】类别中的【超级链接】按钮。在在弹出对话框的【链接】栏中输入链接到的网页或任意文件的地址，单击【确定】按钮以完成链接添加。,1.2 D

14、reamweaver基本操作,将光标定位于网页正文之前，然后单击【插入】面板中的【插入Div标签】，弹出【插入Div标签】对话框，在【ID】框中输入用于唯一标识该Div标签的字符串“divSidebar”，然后单击【确定】按钮。,1.2 Dreamweaver基本操作,选中当前已有的网页正文内容，然后单击【插入】面板的【插入Div标签】按钮，在弹出的对话框中为该Div标签指定ID“divMainCont”并确定，这里将是网页主内容所在的位置。Div标签添加完毕后，当前文档结构如图所示。,1.2 Dreamweaver基本操作,考虑到网页可能还需要一些脚注，现在将光标定位到标签之后，添加ID为“

15、divFooter”的Div标签并在其中输入内容。,1.2 Dreamweaver基本操作,现在向网页中添加图片。将光标定位到标签内，单击【插入】面板中的【图像】按钮，从展开的列表中选择【图像】命令。弹出【选择图像源文件】对话框，选择图片并单击【确定】按钮。,1.2 Dreamweaver基本操作,选中图片以调整尺寸并继续为网页添加文本与图片和链接。,1.2 Dreamweaver基本操作,除了使用之前介绍的【文件】|【在浏览器中浏览】命令，还可以单击编辑区【文档】工具中的【在浏览器中预览】按钮，然后在弹出的列表中选择【预览在IExplorer】命令即可调用IE查看页面。默认快捷键为【F.12

16、】,1.2 Dreamweaver基本操作,Dreamweaver的面板集成了大量的实用命令。需要展开某个面板时，选择菜单栏【窗口】命令，然后在弹出的列表项中勾选面板名称即可。Dreamweaver按功能将不同的面板整合在一起，形成为数不多的几个面板组。这里主要介绍一些常用的面板。 【CSS样式】面板与【AP元素】和【标签检查器】面板一道位于【CSS】面板组，【AP元素】面板是管理绝对定位元素的地方。,1.3 Dreamweaver面板,选择菜单栏【窗口】|【CSS样式】命令以调出【CSS样式】面板（【Shift】+【F11】），这里将列出当前网页中所定义和链接的所有CSS样式。下面使用面板来

17、创建新的CSS样式。在文档编辑区选择标签，然后单击【CSS】面板中的【新建CSS规则】按钮 。,1.3 Dreamweaver面板,弹出【新建CSS规则】对话框，将选择器类型指定为“ID”，在【选择器】框中保持默认值“#divSidebar”，并将规则定义位置指定为“仅对该文档”。 单击【确定】按钮后弹出【CSS规则定义】对话框，在【类型】类别中指定字体为“Verdana”，行高为1.5em。切换至【方框】类别，在此指定宽度为18em，【浮动】模式为“right”（右），【填充】值为1em，【边界】值为0。单击【确定】按钮以保存规则。,1.3 Dreamweaver面板,返回文档编辑区后应该发

18、现标签已浮动到页面右侧。现在继续选择标签后新建CSS规则，在【新建CSS规则】对话框中保持默认设置以继续。在规则定义对话框的【类型】类别中，选择一种无衬线字体（sans-serif），并将【行高】指定为1.5em；接着切换到【方框】类别，将【填充】值设定为1em，然后指定将右【边界】值为20em，其它为0。,1.3 Dreamweaver面板,单击【确定】按钮以保存规则，返回【设计】视图，此时两个应用了CSS规则的Div标签已经分离开来了，如图所示。,1.3 Dreamweaver面板,接下来为网页底部的脚注添加CSS规则。选中它所在的标签后单击【新建CSS规则】按钮，在弹出的对话框中保持选择

19、器为默认值“#divFooter”，然后单击【确定】按钮以继续。,1.3 Dreamweaver面板,弹出【CSS规则定义】对话框，在【区块】类别中设置文本对齐方式（Text-align）为“居中”（center）；接着切换至【方框】类别，指定【清除】方式为“两边”（both），并将上【填充】值设为1em。,1.3 Dreamweaver面板,继续切换到【边框】类别，将上【边框】样式、宽度与颜色分别调整为实线、5px、绿色，接着保存规则后返回，使用【5号标题】适当修饰页脚中的文本。,1.3 Dreamweaver面板,同样位于【CSS】面板组中的【标签检查器】面板可由选择【窗口】|【标签检查器

20、】命令来展开，其中包含了【属性】与【行为】两个子面板。,1.3 Dreamweaver面板,选择整个导航栏列表标签，在【属性】面板中为它指定【id】值“ulNavi”。此时项目列表标签标识为。,1.3 Dreamweaver面板,单击【CSS样式】面板中的【新建CSS规则】按钮并确定，保持【选择器名称】为“#ulNavi”。单击【确定】按钮，在弹出的【CSS规则定义】对话框中切换至【背景】类别，在此指定【背景颜色】为绿色；继续切换至【方框】类别以调整【高度】（Height）为3em。,1.3 Dreamweaver面板,返回【设计】视图，可以发现整个标签变成了一条固定高度的绿化带。,1.3 D

21、reamweaver面板,现在选中任一列表项标签，然后单击【CSS样式】面板上的【新建CSS规则】按钮，在弹出的【新建CSS规则】对话框中保留默认选择器名称“#ulNavi li”。在【CSS规则定义】对话框中切换到【区块】类别，将【显示】属性指定为“inline”，然后单击【确定】按钮以保存规则。,1.3 Dreamweaver面板,返回设计视图，选择列表中的任一超链接标签后新建CSS规则，在弹出对话框中指定【选择器】为“#ulNavi li a”。 在规则定义对话框的【类型】类别中选择一种新的衬线字体和颜色，并指定【字体大小】为1.5em，【行高】为2em并勾选【none】复选框。,1.3

22、 Dreamweaver面板,切换至【方框】类别，在此指定左右【填充】值均为1em。 继续切换到【边框】类别，在此指定右【边框】为黄色实线。,1.3 Dreamweaver面板,保存规则并返回【设计】视图，查看初步完成的导航栏。,1.3 Dreamweaver面板,【行为】子面板集成了简单的JavaScript特效，这里就用它来设置浏览器状态栏文本。选中标签后，切换到【行为】子面板，单击面板底部的【添加行为】按钮，从弹出的菜单中选择【设置文本】|【设置状态栏文本】命令，弹出【设置状态栏文本】对话框，在此输入适当文本，然后单击【确定】按钮以返回。,1.3 Dreamweaver面板,在【行为】面

23、板的事件列表中选择【onLoad】，表示在Web浏览器加载网页时执行此行为。,1.3 Dreamweaver面板,现在按下【F12】键以在IE中预览网页，即可看到被修改的状态栏。,1.3 Dreamweaver面板,Dreamweaver中的其它面板组还包括适用于动态网页设计的【应用程序】面板组、适用于站点管理的【文件】面板组和用于检查网页和站点的【结果】面板组，它们都包含了若干子面板。 值得一提的是【历史记录】面板，它记录了之前所执行的各项操作，用户可以在这里重新执行之前的步骤，或是将操作记录保存为命令，以便重复使用。拖动面板左侧的滑块以选择需要回放的操作步骤，然后单击【重放】按钮即可执行它

24、们。,1.3 Dreamweaver面板,继续编辑之前的网页，注意结合各个面板以简化操作。这里通过新增几个CSS规则来修饰整个页面。在编辑区选中标签，然后单击【CSS样式】面板中的【新建CSS规则】按钮，在弹出的【新建CSS规则】对话框中指定【选择器类型】为“复合内容”或“标签”，指定【选择器】为“body”。,1.3 Dreamweaver面板,在弹出的【CSS规则定义】对话框中切换到【方框】类别，在此指定【宽度】为60em，左、右【边界】为“自动”，上【边界】为0。切换到【边框】类别，设置边框为宽度值为1px的绿色实线，单击【确定】按钮以保存该规则。,1.3 Dreamweaver面板,回

25、到【设计】视图，可以发现整个页面正文已经居中对齐，并具有了固定的宽度。现在重新定义1号标题的样式。选中页面上的标签后新建CSS规则，在弹出的对话框中指定【选择器类型】为“标签”，并在【选择器名称】框中输入“h1”。,1.3 Dreamweaver面板,在【类型】类别中指定【字体】为任一种衬线字体（serif），【字体大小】为2em，【颜色】为淡黄色；切换到【背景】类别，将1号标题的【背景颜色】指定为草绿色；继续切换到【方框】类别，将【填充】指定为1em，【边界】指定为0。单击【确定】按钮以保存规则。,1.3 Dreamweaver面板,返回编辑区以查看已完成修饰的1号标题。,1.3 Dream

26、weaver面板,为了让导航栏中的链接响应光标动作，再次选中列表项中的链接以创建新CSS规则，在【新建CSS规则】对话框中指定【选择器类型】为“复合内容”，【选择器名称】为“#ulNavi li a:hover”，在规则定义对话框中勾选【underline】复选框以启用下划。单击【确定】按钮以保存规则。,1.3 Dreamweaver面板,返回编辑区，选中正文段落中的任一图片标签后新建CSS规则。 在弹出的【新建CSS规则】对话框中保持【选择器名称】为“#divMainCont p img”。,1.3 Dreamweaver面板,在【CSS规则定义】对话框中切换至到【方框】类别，指定【浮动】方

27、式为“left”，【填充】与【边界】值均为1em，切换至【边框】类别，在此指定四周边框均为宽1px的绿色实线。单击【确定】按钮以保存规则。,1.3 Dreamweaver面板,返回页面编辑区，按下【F12】键以在IE浏览器中查看网页。,1.3 Dreamweaver面板,为了保证网页在不同浏览器中能够正确显示，Dreamweaver提供了相关的检查与验证工具，它们不仅可能找出网页上的错误，还会给出针对不同浏览器的兼容性测试报告。 需要验证当前文档是否符合HTML规范，可以单击【文档】工具栏上的【验证标记】按钮 ，再从弹出菜单中选择【验证当前文档】命令即可。Dreamweaver会在【验证】面板

28、中给出报告。 至于检查不同浏览器对网页的兼容性，只需要单击【文档】工具栏中的【检查页面】按钮 ，然后选择【检查浏览器兼容性】命令即可，报告会在相应的面板中给出。,1.3 Dreamweaver面板,即使是制作单一的网页，也会用到许多的资源，包括HMTL文件、CSS样式表、图片等等。Dreamweaver提供了站点功能来统一组织和管理这些文件。 单击菜单栏【站点】菜单，从弹出的菜单项中选择【新建站点】命令，弹出【站点定义】对话框，切换到【高级】选项卡，在【本地信息】类别中输入站点名称，并选择它在计算上所存放的文件夹目录，,1.4 Dreamweaver中的站点管理,切换到【远程信息】类别，根据网页将要正式发布的Web服务器类型，从【访问】列表中进行正确的设置。只需进行本地测试时，可以选择【无】。这里为方便演示，选择【本地/网络】并设置远端文件夹（将它设置为与本地目录相同）。,1.4 Dreamweaver中的站点管理,切换到【测试服务器】类别，按实际情况测试网页用的服务器模型与访问方式。当访问方式为【本地/网络】时，应确保计算机上已经安装有Web服务器（比如IIS），并根据Web服务器中的配置正确设定【URL前缀】中的内容。 单击【完成】按钮以完成站点添加。需要更改站点的各项设置时，只须选择菜单栏【站点】|【管理站点】命令，此时弹出【管理站点】