Dreamweaver CS4教程1—4章.doc

Dreamweaver CS4教程一 前言Dreamweaver是一个很好的软件它终究会被淘汰淘汰它的可能是更加便捷的模版类软件，虽没变化但快捷硬件的变化也会淘汰它包括：智能终端的兴起平板的兴起，这两者带来的操作系统的改变。3D立体虚拟投影的兴起 佩戴设备的兴起（这两者带来的显示的变化）（介绍一下谷歌眼镜、苹果手表。牙齿硬盘等）就是浏览器本身的市场争夺都已经白热化（飞行、火狐、库塔等）我们怎么做？100个人取第85位作为基线讲解。讲述的方式也是最基本的傻瓜型讲解。（跟着一个有录像的、比较好的教材走）reamweaver、FLASH 以及在 DREAMWEAVER 之后推出的针对专业网页图像设计的 FIREWORKS，三者被 MACROMEDIA 公司称为 DREAMTEAM(梦之队)，也叫三剑客。但是，随着互联网飞速的发展，情况有了变化。主要变化我们会专门讲解，主要是，互联网的移动性越来越强，硬件变化越来越剧烈，引起的软件和格式的变化很剧烈，总之，现在的互联网是一个动荡的世界。希望大家了解。前十年，随着HTML 技术的不断发展和完善，随之而产生了众多网页编辑器，从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器（则原始代码编辑器），两者各有千秋。所见则所得网页编辑器的优点就是直观性，使用方便，容易上手，你在所见即所得网页编辑器进行网页制作和在 WORD 中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点效率低下，慢！Dreamweaver CS4 的界面几乎是做了一次脱胎换骨的改进，从中看到了更多的设计元素，让DW 也稍稍带着点苹果的味道。这是Adobe 的功劳。但是：PS是美术人员的设计，DW是工科人的设计，二者不同的思维方式造成了我们学习这个软件的艰难。讲述理科男的特点。举买饭的例子，从CS4以后的特点：布局按钮：这个按钮似乎和下方的代码、分割、设计按钮功能重复，目前还不明白DW的意图，唯一增加的新功能是垂直分割，让代码和设计界面以垂直对比的方式呈现。精简设计：它提供了更多的可视区域，同时可以把右边的菜单收缩到只剩下图标。对于习惯了Adobe 其他设计软件的朋友来说，这的确是非常贴心的设计。应用程序开发增强：左上方是和数据相关的面板，包括数据库面板、数据绑定面板和行为面板；左下方则是文件与资源相关的面板，包括文件面板、相关资源面板、代码收集器等；右边则是设计相关面板，包括插入面板、CSS 样式表面板、AP 元素面板（用来为浮动层定位）。应该说这是一个万金油布局，几乎适用所有的开发者，同时，它也把大部分菜单展示在用户面前，其他的七种布局可以说只是在这个基础上进行一些排列和隐藏。在下方的文档面板上，DW 新增加了一个实时预览功能Live View。它的作用是在DW 窗口中实时查看代码的效果，包括Javascript 特效！讲述苹果手机对微软界面的颠覆。锤子手机对苹果界面的颠覆。小米手机对用户体验的颠覆最早的金山对微软的打字软件的冲击。优点1最佳的制作效率Dreamweaver 可以用最快速的方式将Fireworks，FreeHand，或Photoshop 等档案移至网页上。使用检色吸管工具选择荧幕上的颜色可设定最接近的网页安全色。对于选单，快捷键与格式控制，都只要一个简单步骤便可完成。Dremweaver 能与您喜爱的设计工具，如Playback Flash，Shockwave 和外挂模组等搭配，不需离开Dreamweaver 便可完成，整体运用流程自然顺畅。除此之外，只要单击便可使Dreamweaver 自动开启Firework 或Photoshop来进行编辑与设定图档的最佳化。2网站管理使用网站地图可以快速制作网站雏形、设计、更新和重组网页。改变网页位置或档案名称，Dreamweaver 会自动更新所有连结。使用支援文字、HTML 码、HTML 属性标签和一般语法的搜寻及置换功能使得复杂的网站更新变得迅速又简单。3无可比拟的控制能力Dreamweaver 是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite 和BBEdit 等主流文字编辑器。帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。甚至可以排序或格式化表格群组，Dreamweaver 支援精准定位，利用可轻易转换成表格的图层以拖拉置放的方式进行版面配置。所见即所得Dreamweaver 成功整合动态式出版视觉编辑及电子商务功能，提供超强的支援能力给Third-party 厂商，包含ASP， Apache，BroadVision， ColdFusion，iCAT， Tango 与自行发展的应用软体。当您正使用Dreamweaver 在设计动态网页时，所见即所得的功能，让您不需要透过浏览器就能预览网页。梦幻样版和XML Dreamweaver 将内容与设计分开，应用于快速网页更新和团队合作网页编辑。建立网页外观的样版，指定可编辑或不可编辑的部份，内容提供者可直接编辑以样式为主的内容却不会不小心改变既定之样式。您也可以使用样版正确地输入或输出XML 内容。Dreamweaver 还集成了程序开发语言，对ASP、.NET、PHP、JS 的基本语言和连接操作数据库，都是完全支持的。缺点一、难以精确达到与浏览器完全一致的显示效果。也就是说你在所见即所得网页编辑器中制作的网页放到浏览器中是很难完全达到您真正想要的效果，这一点在结构复杂一些的网页（如分帧结构、动态网页结构）中便可以体现出来；二、页面原始代码的难以控制性，比如您在所见即所得编辑器中制作一张表格也要几分钟，但您要它完全符合您要求可能需要几十分钟，甚至更多时间。而相比之下，非所见则所得的网页编辑器，就不存在这个问题，因为所有的HTML 代码都在您的监控下产生，但是由于非所见则所得编辑器的先天条件就注定了它的工作低效率。如何实现两者的完美结合，则既产生干净、准确的HTML 代码，又具备则见则所得的高效率、直观性，一直是网页设计师梦想。在DREAMWEAVER 之前，FRONTPAGE98 一直被人们认为是最好的所见即所得网页编辑器，但是它同样继承了所见即所得的种种劣性。但是我说过这是在DREAMWEAVER 之前，现在我无意说DREAMWEAVER 已经实现网页设计师的梦想，但我觉得DREAMWEAVER 正在努力向这个梦想一步步走去。三准备工作（必须的软件）主要还是Dreamweaver 的基本使用，对于中小型企业网站，商业性专题网站为主。1.主要是以表格布局为主，Div+CSS 布局为简略介绍(Div+CSS 在XHTML课程中已详细介绍)2.不讲解代码区，代码区都是自动提示，学习阶段不利于你的自身发展。工作后，为了开发效率，可以考虑使用。3.不涉及任何语言，xHtml,Css,JavaScript,ASP,JSP,ASP.NET,PHP 等等，只讲软件。补充说明0：此课程是给初次基础网页的学友踏上网页设计大门的课程，是给什么都不会，什么都没接触过的同学定制的，所以不会讲解诸如：DW for HTML、Div+CSS、ASP、PHP、JavaScript、JSP、ASP.NET 等。所以，这是网页设计的第一门，最初级的课程，不参杂任何其他元素。补充说明 1：Dreamweaver之所以采用表格 布局为主，是为了让第一次接触网页的新手快速而简单的创建出网页，达到一种满足和喜悦，从而提高了兴趣继续往下学，绝对不能讲多余或者深入的东西。因为这门课是网页最最初学者的第一门课。二 创建网页的基本对象找到你的DW，希望它在你的工作磁盘文件夹里。我们以后所有的学习软件都应该在这里。双击打开会出现一个欢迎界面，左下角可关闭，在打开的话，找编辑首选项(快捷键是CONTROL_U)常规里还可以找到。编辑首选项常规显示欢迎屏幕。打开后看右边的快捷面板，一般默认的收起来的状态就可以了。它有记忆功能，你下次打开的时候会回到你关闭前的状态。所以你关闭了，再打开也是关闭状态。一网页的创建和存储1.创建网页第一次启动 Dreamweaver CS4 的时候，会让你选择“编码区”和“设计区”。启动欢迎界面有四个功能：1.打开最近的项目 2.新建（大家可以打开更多的选项，有可能会用到模板功能） 3.主要功能 4.快速入门这里我们选择“设计区”。如果多次打开，则不再显示此选择。不过，我们最好选择CTRL加N,这样有多重选择。我们主要用的就是HTML。 点击这里的新建，它会自动的新建一个html.我们不要用，我们还是希望大家从文件菜单中选择新建或快捷键ctrl加n。这样会出来一个丰富的新建对话框，里面可以有我们的设置。 新建网页的时候，布局暂时不要选择。一来死板，二来太让人熟知。如同ppt上的或模板一样。没有新鲜感。空白页页面类型-HTML-布局-无就可以了html是一种是用于描述网页文档的一种标记语言。是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言。支持各种浏览器的使用，同时支持超链接和文本及图像。2.保存页面首先请大家按照微软的思维方式新建一个到两个文件夹，我们所有的作业和联系都将保存在这里。讲解微软的思维方式和苹果的思维方式。举直升飞机的例子这个文件夹保存在你常用的和dw在一起的磁盘上最好。起名DW实验.双击后关闭。然后新建一个网页，刚才说了，新建网页的时候，布局暂时不要选择。一来死板，二来太让人熟知。如同ppt上的或模板一样。没有新鲜感。空白页页面类型-HTML-布局-无就可以了。然后看右下有很多的文档类型。这么多的类型我们选择哪个呢？我们明年开始就可以选择html5.0了。现在不行，因为里面牵扯到IE浏览器的兼容问题。所以我们现在选择1.0过度型。就是transitranol。然后点击创建。下面让附加css,我们也不用。我们打印一句话：第一次接触Dreamweavre编辑好的网页需要保存，我们可以执行“文件-保存”，或者按下 Ctrl+S 组合键，打开“另存为”对话框，第一次都是另存为，以后就是在原文件的基础上保存了。你改个名字，比如2-1，你不加后缀它会自动加成html.你如果在页面上再修改一下，你看页面上面有一个星号，你就可以点击保存了。我们双击你文件夹里的文件，不断的写新的文字上去，然后更新页面，就可以不断的看到你的修改了。另存为就是另外再存储一个。你修改原文件夹里的文件再另存一下，你就会看到在你的文件夹里，自动又建立了一个网页。在保存的时候选择保存的位置。我们需要保存在你刚才建立的那个Dreamweaver实验学习文件夹。也可以直接在文档工具上方选中需要保存的网页文档，然后单击鼠标右键，在弹出的快捷键菜单中选择“保存”。把第二个网页删掉，因为我们以后要经常要用这个文件夹，它会碍事。在页面上面把这个页面的名字起好，然后保存，在IE里刷新。3.打开和关闭页面关右上角是关闭整个软件，关文件的话有个小。右键点击文件名，会出来关闭、关闭很多、关闭其它等等，你都可以试试。关闭后再打开，在欢迎页面上有文件的名字，如果你执行文件打开命令，会自动记忆到这个文件的文件夹。非常方便。如果要打开电脑中存有的网页文件，则执行“文件-打开”命令。二 网页的组成元素网页主要由三部分组成：文本、图象和超链接1 文本 一般文本占用的空间很小（一个中文字符只占 2 字节 ）a) 文本就是网页上的文字，2 图片 a) 图片会让我们的网站变的生动有趣，一般网站上的图片格式有这几种， JPG、BMP b) GIF、PNG 等。一般用的比较多的是 JPG、GIF 两种。 c) GIF 是图形交换格式，这种格式的特点就是小巧，更重要的是，它可以做为小动画，在网络上传播。平板上目前运用的最多。 d) JPG 图片格式是在网络上被广泛采用的图片格式。（讲述一下压缩和插值） e) PNG 是用 Macromedia 公司推出的网页图片处理软件生成的格式。它的用途越来越大。因为现在的浏览器都支持它的透明效果了。3 超级链接 a) 一个网站由很多的网页组成， 而这些网页之间通常是通过超级链接的方式进行连接的。三文本操作文本操作包括文本的插入、特殊符号的插入、日期以及文本列表的插入等。1 插入文本a) 直接在文档窗口中输入文本，将光标放置在文档窗口中要插入文本的位置，后直接输入。如果需要跳段，可以按 ENTER 键。如果是换行，则是 Shift+Enter.你可以看下面的属性HTML的格式，里面会告诉你，回车是段落。如果你改成标题，则你刚才打的字会变大变粗。大家看属性上面。如果全部选定，是body,也就是表示整个区域。如果只是我是老师，则是一个p字符，就是段落的意思。如果你选择标题1，会出来一个h1.那么这些就是Html的标签。我们打开代码区，可以看到，我是老师是h1，你是学生是p.如果把我是老师在下面改成段落，再看代码区，也就成了p.再回车，我们一起学习。大家看，每个段落之间空得太大了。所以我们可以不用段落，我们用换行，也就是shift加回车，大家看一下。和段落比起来，它和上一段文字相隔的距离就小。你看代码区，是br,意思就是换行。b) 粘贴其他编辑器中生成的文本，首先要将光标插入文本的位置，然后执行“编辑-粘贴”，就能完成文本的插入。也可以直接使用标准工具栏上的“粘贴”按钮。如果直接从网页上复制粘贴文本，会把网页上的超链接和HTML格式等一起复制过来，所以如果从网页上复制，一定要用文本过度一下。（开始附件记事本）2. 调整文本a) 如果要调整文本大小，则选定文本，在属性面板的“大小”下拉列表框中选择合适 的大小。这里其实非常繁琐，除了第一个可以选择一个标题一，底下的选择很麻烦。你不能也选择标题。如果选择了，这个网页最后出来了就是两个标题。先选择CSS，弹出一个界面，有字体大小 字体等，但你选择一个数字，会出来一个选择CSS对话框，取消，（这是新版本的一个特性，让你新建一个外部或内部的css.别管它）看下面HTML右边对话框，目标规则中选择新建内联样式就可以了。当然前提是你先选定你要改变的字。选择完字号后，再选择像素啊，磅啊什么的，我们统一选像素。就是（PX）然后在右边还可以选择颜色。这样就不会出现那个窗口了。右边是颜色，自己做个选择。（仔细讲述RGB及CMYK颜色模式以及色卡模式。以及他们随后显示的区别）b) 如果需要改变文本字体，则先选定文本，在属性面板上“字体”下拉列表中选择字 体样式。记住，网页上的字体一定用设定默认的字体，千万不要选择特殊字体，为什么，就像以前讲的印刷是一样的，只是网页的字体更严格，毕竟是给大众看的。要不有可能显示不出来。如果选择特殊字体，则采用图片。（讲述印刷的字体限制、讲述字库的特点、印刷的特点）c) 如果“字体”下拉列表中没有需要的字体，则执行“字体-编辑字体列表”会出来一个编辑字体列表。你选择可用字体里的字体。把它拖到左边的选择的字体里面来。然后点击确定。确定后回到页面，再选择你刚才的文本。选择字体，你刚才选择的字体就在里面了。 我们将这个页面进行一下保存。我们看上面的实时视图。我们还是选择在IE浏览器上好。预览、刷新等。d) 可以将字体设置为标题字体，格式：段落，Hx。3. 特殊字符 a) 在文档窗口中，将光标定位在需要插入特殊字符的位置。 b) 执行“插入-HTML-特殊字符”，在子菜单选择合适的字符命令。或者在快捷栏中选择文本，特殊字符。注意：在菜单中比较麻烦，所以看右边收起的快捷面板中插入，一定先选择文本，下面才会出来特殊字符。一般先选择字符前面那个小三角，它帮你分好了类别。选择特殊字符后如果需要改变大小，又会弹出新建CSS规则对话框，你需要选择下方的目标规则菜单里的新内联样式。c)如果在下拉菜单中没有找到需要的字符，那么可以选择“其他字符”。如果还没有，你就要上百度里查你要的那个特殊字符的编码了。（点击插入其他字符，左上角插入会有编码出来）保存后刷新就可以出来刚才保存的网页。(学会用F5)4. 插入日期 a) 将光标放置到要插入日期的位置。 b) 执行“插入日期”，会出来插入日期对话框。你自己选择日期格式，点击确定。点击保存。或者在插入面板上点日期按钮，便可以。上面的只是格式，选择后会自动出现现在的日期。5插入文本列表 a) 用鼠标选定要插入的项目的文本内容比如在页面上打出：技术部财务部商务部然后把这三个全部选定，然后 b)选择插入常用选择文本选择项目列表。项目列表就是在前面加个小符号！也叫无序列表。回车后可以继续添加。连续回车两次列表结束。（举例音乐讲述什么叫列表）c) 还有一种方式，做列表前你先选择插入文本项目列表，你就可以自己建立一个列表了。它会自动出来列表符号。然后你再输入。d) 插入编号列表是一样的。你全部练习完成后刷新完成看效果。三 规划站点所谓站点，你可以理解成一个目录文件夹。每做一个网站时，我们需要先做一个站点。然后通过站点把某些规范化的、自动化的程序、包括模版等可以直接导入站点，节省时间。1. 站点规划的规则2. 建立本地站点3. 站点导入导出复制删除一站点规划的规则一般来说，在规划站点结构时，应该遵循以下一些规则。也就是说，站点的建立是有规则的，否则就乱了。(1).文档分类保存如果一个复杂站点，它有很多文件，我们必须使用分类保存是它更清晰。从做PS开始，老师就教导我们，利用层级结构，从开始就命名好每一个文件夹、每一个目录。每之间的一层关系。为以后工作量大了以后带来明确的名字。所以，分类保存是图片就是图片，文本就是文本。这不是绝对的，有文本又有图片的时候你怎么办？按标签和属性保存。所有的站点目录都是以文件夹形式来表示的（在windows形式下）文件夹的名字要有几个特点，整个电脑打开。所有的硬盘都有明确的分工。系统、素材、工作等等。专业的电脑是不会把工作和个人同时使用的，我们只有一部电脑，你的个人娱乐一定要一个单独的文件夹。打开你的工作磁盘，每一个工作类软件都是一个文件夹，打开，里面的文件夹先有数字。然后有详细的题目说明。你的DW文件夹也一样，打开后可能又很多项目文件夹，在DW软件里我们称之为站点目录。一般按时间编号，然后有项目名称。打开后有一个主页，一般叫index,然后有几个文件夹，图片、文字等。一般都要有images,有一个放css的文件夹，叫style.如果它很复杂，有音乐，子页什么的，也一定分类。如果是比较大的新闻类网站，可能还要建立每个月甚至每日的文件夹（比如QQ）记住，网页建立只是第一步，然后要维护，到时候需要明确的文档分类。这么做的目的就是维护、操作、更新用，这些可能都不是网页设计师的工作。(2).合理地命名文件名称为了方便管理，文件夹和文件的名称最好要有具体的含义。就是说，你要善于利用数字、英语，。明确的表达好这个文件名，一定要具体。（一般用英语，汉语服务器有时候不认）(3).本地站点与远程站点结构统一为了方便管理，在设置本地站点时，应该将本地站点与远程站点的结构设计保持一致。（建立好本地站点后，网站做大了，有可能需要远程站点，这时候需要申请服务器等等）讲述申请.COM .CN .ORG等。讲述视频网站的费用。二建立本地站点在建立站点之前，我们要知道所有的文件夹、资源和特定的文件都包含在站点中。因此，首先在硬盘上建立一个新文件夹作为本地根文件夹，用来存放相关文档。如在F 盘根目录下创建一个名为MyWeb 的文件夹，在MyWeb 文件夹里再创建一个名为images 的文件夹，用来存放网站中甬道的图象文件。这个程序是这样的，打开Dreamweaver，在帮助右边有三个方块的网络连接标志，打开新建站点。以后会用管理站点。上面也有新建。现在先用新建。新建后会弹出对话框。1 先给你的站点起个名字，注意，一般起的就是MYWEB就可以了。2 站点的HTTP,也就是网址随便，因为是本地操作。点击下一步！3 选择不使用服务器技术。然后点击下一步！4 在开发过程中，你打算如何使用你的文件?选择编辑副本，上传服务器。不要选择直接在服务器上编辑。下面，你把文件储存在计算机上的什么位置？（文件是指本地文件）它的默认位置是有的，你看一下，我们尽量不要默认。我们要在dw实验文件夹下。新建一个MYWEB文件夹，大家注意，这个myweb和前面那个myweb的区别在于，（点击上一步、上一步，看文件夹名字那里。）前一个myweb是站点在DW里面的名字。后一个是你在DW里存储文件的文件夹名字，我们尽量让这两个名字保持一致。不一致也可以，但将来会惹麻烦。注意！站点的名字和储存在硬盘上的文件夹的名字尽量一致。下一步，您如何连接到远程服务器。选择无（因为我们是在本地做）然后下一步。出来你的myweb的站点定义，解释一下含义。（高级选项完成配置暂时不需要）！点击完成。看插入文件myweb站点下面，已经自动建立了一个myweb文件夹。（myweb右边，只选择本地视图,别的不选）完成后选择插入myweb下本地文件下站点myweb，在下面再建立一个子文件夹images.因为我们做网站，需要用到很多音乐和图片，我们一般都要用到相对路径，如果你的网站在f盘上，但你的图片在C盘上，那么你的图片只能在本地欣赏，不能同步上传。你上传的图片会变成一个小叉。所以你建立了图片文件夹，你的图片会自动保存在里面和文件同步上传。（音乐什么的文件也一样）所以我们选择管理站点。点击myweb,点击编辑。出来对话框，选择高级。在默认图像文件夹一栏文件夹图标点击一下。路径就到了myweb里面。你不能把上面的根文件夹复制下来后在后面建立一个文件夹images。你点击确定后会出现警告：图像文件夹不在站点中。所以我们点击文件夹图标后进到myweb里面，然后右键新建一个文件夹，起名images.然后选择就有了。确定后点击完成。回到插入文件状态。你就看到出来了子目录。以后插入的图片它会自动存进去。存进去如果没有及时显示出来你可以点击上面的刷新键。总结：(1).给站点起个名字，网址无所谓(2).不使用任何服务器端技术(3).选择编辑计算机上的副本再上传(4).网络连接不需要(5).完成站点定义(6).定义默认图像文件夹(以后的图片均会自动存在这里)在MYWEB下面建立一个文件夹，装你的图片，因为你的图片即使在本地，也不能在C盘，否则不能同步上传。也可以使用高级定义站点，更加的方便。高级的方法自动创建站点的方法：1 在你认定的盘上建立一个DW试验文件夹，在里面建一个myweb文件夹，在里面再建立一个子文件夹images，然后点击右上角网络连接标志的管理站点，点击新建站点。在出来的对话框里选择左上角的高级，站点名称和你刚才的对话框一样。（MyWeb）本地根文件夹，一定选择你刚才在认定盘上建立的叫myweb的文件夹。（dw试验myweb）默认图像文件夹的确定,选择你刚才建立的images文件夹，如果你没有建，就在这一步建立一个。建完之后你要把这个文件夹导入到软件里，否则软件不知道。你要在管理站点那个对话框里选择一下。然后按选择键就可以了。2 点击确定后点击完成。其他的你什么都不要管。点击完成。你把鼠标放在本地文件下的站点我的站点，看后面出来的路径F:DW试验MyWeb,前面的站点叫我的站点，后面对应的是DW试验下的MyWeb。三导入和导出与复制删除站点a) 站点复制、删除：点击右边的网络连接标志选择管理站点。出来站点显示，然后就可以删除了。出来对话框：你不能撤销该动作点是，点击完成。在看出来的对话框，站点就已经没有了。当然，你只是删除了站点名称的引用，你最早建立的文件夹并没有删除，只是删除了Dreamweaver的在菜单里显示的站点名称。你如果删除你最早建立的文件夹你要进到它的路径，然后shift加delete.注意：不要删除了站点源副本 b)站点导入、导出导入和导出的作用是在另外一台机器操作的时候会用到，从管理站点中可以导入和导出你刚才的站点。Dreamweaver通过这种方法可以把原来的文件及其结构完整的导入到另一台机器上面。点击新建管理站点，出来对话框，选择导出。出来对话框，你现在可以选择桌面，点击保存。在桌面上你就可以看到后缀名为ste的配置文件了。选择它，新建，管理站点，按导入！确定，就又回去了。注意，源副本（就是DW实验下的myweb千万不要删除。否则你再导入了路径就乱了。实验，把源副本删除后导入，就可以看到乱了的路径，要解决，就自己手工在DW下简历一个和原来一样的myweb,里面建一个一样的images,就又可以了。复制先对简单。新建管理站点，出对话框点击复制。我们复习一下：打开DW界面。选择管理站点新建站点高级站点名称myweb,默认图像文件夹后手动加images_确定完成。在这个站点下新建一个页面，保存，名称叫index,然后点击保存。插入文件对话框会自动显示出来，如果没出现，点击上面的刷新。四 插入图片1. 插入图像首先我们要了解图像没有在站点和有站点的区别，所以我们点击管理站点选择myweb选择右下删除。然后确定。然后去你的DW实验文件夹下删除那个源副本Myweb.现在我们新建一个网页，打开新建，点击创建。在常用工具栏点击按钮。看菜单，插入，可以选择图像，但是选择插入按钮，看图像旁边有小箭头，上面有很多选择。你选择插入图像以后，它的左边和右边会记忆你上次的选择，你就可以直接点击插入图像。现在我们点击插入图片，我们在我的文档中选择一张图片，点击后会出现一个对话框。若要创建文档的相对路径，你应该首先保存文档。我们点击确定，有出来一个新的对话框，替换文本的意思是当你的图片不能显示或别人禁止了你的文本的时候能够看到的文本。一般我们要选择你软件的名字，这样的好处是将来容易辨认，所以我们在替换文本一栏填写dreaweaver.详细说明是指你点击一下还能回到原来的链接路径当中，我们暂时不需要。点击确定，图像就出现在网页上。你点击一下这张图片，看下面的属性（不点击下面时没有属性的）你看源文件是在C盘下的。现在我们保存这个网页。保存到你最早F盘上DW实验下。起名4-1,就是第四课第一张图的意思。然后浏览。这时候你看，你在DW下只有网页的图标，没有图片的图标。（和ps不同）图片还在你原来的文件夹里。所以，在没有建立的站点的情况下，直接在网页上插入的图片只能在本地观看，不能上传，因为图片的路径没有在站点下的inmages图片文件夹里，所以不能同步上传。我们先删除4-1,然后先建立站点。然后操作。管理站点新建站点站点名称myweb本地根文件夹在你指定的盘上建立站点根文件夹MyWeb,然后点击打开、选择。默认图像文件夹一栏点击浏览，在myweb下建立一个inmages文件夹，然后点击打开、选择。然后在这个对话框上点击确定，在管理站点菜单上点击完成。完成后你再看插入菜单面板，就能看到有了你的站点。现在我们来建立一张页面。保存，起名4-1.点击插入图片，路径会自动来到你刚才设定的images.找到你刚才那张图片。确定，替换文本你写dreaweaver，点击确定，图片出来，点击看下面的属性，出来了一个你不太了解的路径，不了解没关系，这个没有盘符的路径就叫相对路径。我们保存、预览！图片是在的，我们从我的电脑里看磁盘DW实验文件夹images里面有了从那边过来的图片。总结：做网站必须建立站点再做，这样可以保证图片的完整性。因为建立了站点，插入的图片都会自动保存在站点的相对目录里边。这样不会因为上传到虚拟主机而找不到。现在的问题是，如果我第二次插入这张图片，该怎么进行呢？点击插入图像，再选择你刚才的图像，选择后会出来对话框。你选择的文件已经存在，你想覆盖吗？这句话的意思是，这个文件、这张图片在你的路径，你这个目录上已经存在了。点击否，会出来让你重新命名这个新文件的对话框。复制文件为:就是让你重新存贮一下，你要点击images进去，换名字再存贮。我们取消了，图像还是被重新显示在页面上。点是的话直接就覆盖了。最好的方法是插入图像DW实验文件夹myweb文件夹images文件夹图片然后点击确定。出来对话框，替换文本写：写DW2就好。大家看下面的属性替换：是DW2。那么替换是什么意思呢？我们点击预览一下。我们放上去鼠标，一个是dreamwerer.一个是DW2.（以后的新版本不提示了）我们看一下代码区。Alt表示替换，是替换的代码。是你图片不能显示的提示。比如我们在下面的源文件的链接稍微改个代码，图像立刻不能显示，就会出来替换的文字。然后我们保存，刷新，就看到你的网页图片是不显示的。显示的是替换文本。点击属性设置图像的属性点击图像，看下面的属性。ID就是给图片起个唯一的编号。让css调用它。宽度和高度.一般来说，你插入的图片像素是多少，插入到网页里尺寸还是多少。比如我们现在看下面的宽和高，在回到DW实验mywebimages图片看源图片的尺寸，是一样的。当然你可以拖动，修改后旁边出来一个小标，那是回复原始大小用的。学名叫重置大小标示。源文件就是指它的路径，相对路径和绝对路径。替换刚才讲过了。链接和地图暂时不讲。边框我们设置为2.回车，你看图片就有了两个像素的边框。后面的标识是不能显示颜色。点击画面保存。刷新。看下面的对其模式比较复杂，有很多种，大家可以每一个都试试。一般左右对其比较多。默认的话图片在文字上面。左右对其的话文本是环绕状态的。我们保存、刷新！有文字有图像的时候看下面有一个水平边距和垂直边距，我们把文字做多。让文字把图片包围，我