第3章 Dreamweaver基础1

第3章Dreamweaver基础2010-03-18Dreamweaver是美国Macromedia公司推出的一个“所见即所得”的可视化网站开发工具，它是一套针对专业网页设计师特别开发的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。由于Macromedia在2005年被Adobe并购，故此软件现已为Adobe旗下产品。3.1Dreamweaver概述1.Dreamweaver简介2．Dreamweavercs3的主要新功能Dreamweaver有多个版本：Dreamweaver3、DreamweaverMX、Dreamweaver8等，Macromedia被Adobe收购后推出的第一个版本是AdobeDreamweaverCS3，熟悉Dreamweaver8的用户容易发现，DreamweaverCS3对“插入”面板进行了优化，对工具按钮进行了更加细化的排列，去掉了部分工具按钮，为了加强Spry工具的应用，而让新增的“Spry”面板中的工具按钮同时占据了“布局”面板、“表单”面板和“数据”面板的一部分。标题栏插入面板“文档”工具栏文档窗口状态栏“标准”工具栏其他面板属性面板菜单栏3．DreamweaverCS3的工作界面（1）标题栏标题栏位于程序窗口的顶端，主要显示Dreamweaver8的图标、名称、当前文档的标题和名称等按钮。（2）菜单栏菜单栏提供了所有的菜单命令，是提供软件最完整功能的方式。（3）插入面板Dreamweaver8的“插入”面板提供了创建各种对象的快捷按钮，包括常用、布局、表单、文本、HTML、应用程序、Flash元素、收藏夹插入面板等。单击“插入”面板左侧的下拉按钮，可以在各插入面板之间切换。（4）工具栏（5）文档窗口文档窗口是用来显示、创建和编辑当前文档的地方。（6）状态栏状态栏上包括标记符选择器、窗口设置等工具。（7）“属性”面板“属性”面板上显示的是被选取对象和文本的各种属性，使用户可以随时修改，大大方便了编辑工作。要显示或隐藏“属性”面板，应选择“窗口”菜单中的“属性”命令或者直接按“Ctrl+F3”。“属性”面板的右下角有一个三角形图标，单击该图标，可以展开或折叠属性面板。（8）其他面板Dreamweaver8提供了多种设置面板，如“文件”面板、“行为”面板、“层”面板等。默认情况下，它们停靠在窗口右侧，用户可以用鼠标将其拖动到窗口的任意位置，从而成为浮动面板。单击面板名称，可以展开或隐藏该面板；单击面板右上角的按钮，利用弹出的下拉菜单可以实现多种相关操作。1.定义站点(1．通过站点定义向导创建站点单击“窗口”|“文件”命令或按“F8”键，打开“文件”面板，单击该面板上的“管理站点”超链接；或从左侧的下拉列表框中选择“管理站点”选项，弹出“管理站点”对话框。单击“新建”按钮，在弹出的下拉菜单中选择“站点”选项，打开“站点定义”对话框1，选择“基本”选项卡，然后,按照提示进行选项设置.。3.2站点的创建和管理（2.直接定义站点选择“站点”|“新建站点”命令，弹出“站点定义”对话框，在对话框中选择“高级”选项卡，从“分类”列表框中选择“本地信息”选项，然后,按照提示进行选项设置。如果要打开站点，先打开站点管理窗口，打开“显示”下拉列表框（如图2-35所示），选择需要打开的站点，文件窗口中即会显示该站点文件夹和文件信息。2.站点的基本操作（1．打开站点若要复制当前站点，可以使用文档窗口或站点面板中“站点”菜单的“编辑站点”命令，打开“编辑站点”对话框。选中要复制的站点名称，单击“复制”按钮即可对当前站点进行复制操作。执行复制站点操作后，系统会自动复制一个所选择的站点，并且会为复制的站点加上一个“拷贝”字样的站点名称。（2．复制站点如果要更改当前站点设置，比如对站点进行修改站点名称、设置参数选项等编辑操作，可以利用上面的方法打开“编辑站点”对话框，选中一个站点后单击“编辑”按钮，即可打开该“站点定义为”对话框，选择“高级”选项卡进行站点编辑。（3．编辑站点在Dreamweaver8中删除一个站点非常容易，在弹出的“编辑站点”对话框中，单击“删除”按钮就可以删除选中的站点。（4.删除站点注意：此删除操作并未真正删除站点文件夹和其中的内容，而只是无法再用Dreamweaver管理该文件夹而已。如果需要再次用Dreamweaver管理该文件夹，只要用新建站点的方式再次将该文件夹指定为站点根目录即可。3.3网页文件的基本操作1．新建和保存网页2．打开网页打开已经建立好的网页的方法有：选择“文件”|“打开”命令，在弹出的对话框中选择要打开的文件。在站点管理器中找到相应的网页文件，双击打开，按【Ctrl+O】组合键。在页面标题处右击，在弹出的快捷菜单中选择“打开”命令。3．设置页面的属性3.4网页元素的添加——文字、图像和链接1.编辑文本（1.插入文本在Dreamweaver中添加文本有两种方法：一是直接通过键盘输入，二是导入已有的文档。当然也可以将其他程序窗口里文本复制到网页中。文本的属性面板（2．插入空格在Dreamweaver处理文本，尽管与Word十分相似，但还是有许多不同之处。例如，在编辑窗口中，默认状态下，按Space键只能插入一个空格。若想在文档中添加更多的连续空格，则要选择以下方法之一：选择菜单“编辑|首选参数”命令，然后在“常规”类别中确定选中“允许多个连续的空格”项。在“插入”栏中，选择“文本”子工具栏，然后单击最右边的（字符）按钮，在弹出的菜单中选择“不换行空格”命令。按Ctrl+Shift+Space组合键。将输入法切换到全角状态，直接按Space键。（3．插入水平线在文档中插入水平线，只要将插入点放在要插入水平线的位置，然后执行下列操作之一:选择菜单“插入|HTML|水平线”命令。在“插入”栏的“HTML”子工具栏中单击（水平线）按钮。（4．插入日期①在“设计”视图中，将插入点定位在要插入日期的位置。②选择菜单“插入|日期”命令或者在“插入”栏的“常用”子工具栏中，单击（日期）按钮。③在出现的“插入日期”对话框中选择星期格式、日期格式和时间格式。2.添加图像（1.Web图像格式目前，网页中使用的图像格式主要有GIF、JPEG（包括JPG和JEPG）和PNG三种:GIF（图形交换格式）：最多只能显示256种颜色，可以制作网络动画及透明图像。适合于色彩要求较低的导航条、按钮、图标和项目符号等。JEPG（联合图像专家组标准）：压缩率很高，可显示数大约1670万种颜色。适合于对色彩要求较高的风景画、照片等。PNG（可移植网络图形）：是一种替代GIF格式的无专利权限制的格式，它包括对索引色、灰度、真彩色图像以及Alpha通道透明的支持。（2.插入图像将图像插入Dreamweaver文档时，Dreamweaver自动在HTML源代码中生成对该图像文件的引用。为了确定此引用的正确性，该图像文件必须位于当前站点中。如果图像文件不在当前站点中，Dreamweaver会询问你是否要将此文件复制到当前站点中。（3.设置图像属性将图像插入到指定位置后，还可以利用“属性”面板设置图像的属性，以便达到最佳效果。改变图像大小通过精确定义图像的宽度和高度，可以使浏览器更快地装载图像，以便减少页面的下载时间。“宽”和“高”：是在浏览器中为图片所保留的宽度和高度，默认单位是像素，也可以用点、英寸、毫米为单位。当在其文本框内输入其他单位的数值时，Dreamweaver8自动转换为像素。设置图像的垂直边距与水平边距“垂直边距”：是图像在垂直方向与文本或其他页面元素的间距。“水平边距”：是图像在水平方向与文本或其他页面元素的间距设置图片注释“替代”：在此可输入图片的注释。当用户的浏览器不能正常显示图像时，便在图像的位置用这个注释代替图像。[注]用户使用浏览器浏览网页时，为了加快浏览速度，可以在浏览器中关闭图片显示，原来放置图像的位置会显示图片的注释。另外，当把鼠标移动到图像上时，无论图像是否显示，都会显示替代文字。设置图像边框“边框”：是用来设置环绕图像四周边框的宽度，单位是像素。如果输入0，则表示没有边框设置图像的对齐属性（1）图像在页面中的对齐与设置文本在页面中的对齐类似，单击“属性”面板中的对齐按钮、或，即可将图像按照相应的对齐方式进行对齐。（2）图像与周围内容的对齐“对齐”弹出列表：用于指定图像与周围内容的对齐方式，如图3.12所示。方法是先选中图像，然后在“属性”面板中的“对齐”下拉列表框中，选择一种对齐方式。“默认值”：默认为基线对齐方式。“基线”：图像与文本或其它对象的基线对齐。“顶端”：图像顶部与当前行中最高的元素（文本或其它对象）对齐。“居中”：图像中部与当前行对象基线对齐。“底部”：图像与文本或其它对象的底部对齐。“文本上方”：图像与当前行中最高的字母对齐。“绝对居中”：图像与当前行中的对象绝对中部对齐。“绝对底部”：图像与当前行中的对象绝对底部对齐。“左对齐”：图像放置在对象的左边。“右对齐”：图像放置在对象的右边。设置图像其他属性除了上述列出的图像属性外，通过图像“属性”面板还可以设置以下属性：“地图”：用于制作映像图。“源文件”：是图片的具体路径，通过单击按钮来选择图片。“链接”：是链接的目标页面或定位点的URL。“目标”：是链接时的目标窗口或框架。“低品质源”：是当前图像的低分辨率副本的路径（4.创建鼠标经过图像“鼠标经过图像”是网页特效中的一种，它的效果是，当鼠标箭头经过一个图像时，该图像将被另一幅图像代替，当鼠标箭头从图像上移走的时候，原图像恢复；单击鼠标，将跳转到其链接的页面。（5.创建网站相册3.超级链接单击网页中的超链接，即可跳转至相应的位置，可以很方便的从一个页面到达另一个页面。一个完整的网站往往包含了相当多的链接。（1.超级链接文字使用“属性”面板可以很方便地创建文字链接。方法如下：（1）在文档中选中需要创建链接的文字。（2）在“属性”面板上的“链接”框中输入目标文件的URL，或者单击（浏览文件）按钮，在弹出的选择文件对话框中选择链接的目标文件亦可。（2.图片超级链接图像链接创建图像链接与创建文字链接的方法一样，选中图像后利用属性面板进行相关的设置即可。创建映像图链接使用映像图链接是创建复杂的图像交互的好方法。当用户创建一个映像图时，可以对图像中的每一个映像部分分别创建链接，它将告诉浏览器图像的这些部分应该链接到特定的URL中。（3.命名锚记是指对内容较长的文档进行有条理地编号，并对这些编号进行链接。在页面中使用命名锚记链接，需要两个步、骤。第一个步骤是创建命名锚记，第二个步骤是链接命名锚记。具体操作如下：①将鼠标定位在需要创建命名锚记的地方。②选择菜单“插入|命名锚记”命令（或者直接按Ctrl+Alt+A键），也可单击“插入”栏“常用”类别中的（命名锚记）按钮。打开“命名锚记”对话框。③在“锚记名称”文本框中输入锚记的名称。④单击“确定”按钮。⑤选择要链接命名锚记的文本、图像或其它对象。⑥如果要链接到当前文档中的命名锚记，直接在“链接”框中输入符号“#”和锚记名称。⑦如果要把选定的文本或图像，链接到相同的文件夹下的其他文件中的命名锚记，则在“链接”框中输入文件名后跟符号“#”和锚记名称。⑧保存文件，按F12键预览及测试结果。（4.空链接为文本创建空链接时，只要先在文档窗口中选择文本，然后在“属性”面板中的“链接”文本框中输入一个数值符“#”即可。建立空链接的目的就是为了应用行为。（5.电子邮件链接电子邮件链接是指当访问者单击该超链接时，系统会启动客户端电子邮件系统（如OutlookExpress），并进入创建新邮件状态，使访问者能方便地撰写电子邮件。（6.下载链接如果超链接所链接的目标文件为浏览器不能自动打开的文件格式（例如“.rar”、“.zip”、“.exe”等文件格式），则会弹出“文件下载”对话框，用户可根据需要选择下载或打开文件。休息一下。。。