Dreamweaver 4简明教程
文 / Bighead　整理 / Jingr
一、Dreamweaver 简介
  Dreamweaver是Macromedia公司的出品的一款"所见即所得"的网页编辑工具。与 Frontpage不同，Deamweaver采用的是Mac机浮动面版的设计风格，对于初学者来说可能会感到不适应。但当你习惯了其操作方式后，就会发现Dreamweaver的直观性与高效性是Frontpage所无法比拟的。
  Dreamweaver对于DHTML（动态网页）的支持特别好，可以轻而易举地做出很多眩目的互动页面特效。插件式的程序设计使得其功能可以无限的扩展。Dreamweaver与Flash、Firework 并称为 Macromedia的网页制作三剑客，由于是同一公司的产品，因而在功能上有着一个非常紧密的结合。因此，说Dreamweaver是高级网页制作的首选并不为过。
  Dreamweaver最新的版本为:Dreamweaver 4.0和Dreamweaver UltraDev4.0。后者支持ASP、JSP等程序的编写与调试。对于初学者来讲，这两个版本的Dreamweaver在使用上不会有太大的差别。而本书则以最新的Dreamweaver4.0为基准。（以上软件都可以在way下载）
二、初步认识 Dreamweaver 
  Dreamweaver的启动
  Dreamweaver的安装过程非常简单，一但成功安装后，就可以在开始菜单到Dreamweaver的选项：
二、初步认识 Dreamweaver 
  编辑窗口
  第一次启动Dreamweaver，首先看到的是Dreamweaver的编辑窗口，千万别给上面密密麻麻的浮动窗口吓倒，其实常用的，就以下几个：
  ① 主菜单：在这里可以到编辑窗口的的绝大部分功能；
  ② 工具栏：是Dreamweaver4的新增功能；
  ③ 对象面板（Objects）：在网页编辑的过程中，通过单击对象面板的按钮来为网页添加相应的元素，如图片、表格、层、Flash。我们称这些元素为为对象。单击对象面板上的向下箭头，能插入其他类型的对象，如特殊字符（Characters）、表单（Froms）等。
  ④ 属性面板：用于显示所选中的网页元素的属性，并可在属性面板上修改。选择不同的网页元素，属性面板所显示的内容也有所不同，例如图片和表格所显示的属性是不一样的。此外，点击属性面板右下角的小三角可以根据使用的需要，缩小或展开属性面板，建议一般情况下都设置为展开模式。
  ⑤ 面板组（又称可停靠浮动面板）：Dreamweaver 还有很多很多其他的浮动面板，我们可以根据自己的喜好，将不同的浮动面板重新组合，这就是所谓的面板组。在Photoshop中，也有类似的概念。
  ⑥ 快速启动栏（又称启动面板）：用于显示或隐藏响应的浮动面板。启动面板与右下角的微型启动栏 一一对应；其中 是切换到站点管理器， 是切换到行为面板， 是查看网页源代码。
  ⑦ 编辑区域：以"所见即所得"的方式显示被编辑网页内容:
  【提示1】如果屏幕上的浮动面板位置过于凌乱，甚至超出了桌面范围而不便操作的时候（在改变了显示器的分辨率后尤其容易出现这种情况），可以选取主菜单中的"Window > Arrange Panels"自动重排浮动面板。
  【提示2】以下是几个常用的浮动面板的快速打开和关闭的热键，好好记住，因为将会再制作过程中被频繁地使用：
  Properties属性面板：Crtl+F3
  CSS Styles样式面板：Shift+F11
  Behaviors行为面板：Shift+F3
  Obje二、初步认识 Dreamweaver 
  站点窗口 
  站点窗口是Dreamweaver另一个重要的窗口，左半部是远程站点的目录，一般显示为空，只有在 FTP 连通状态下才有显示内容；右半部是当前编辑中的本地目录，是不是有点象windows的资源管理器？对，站点窗口的作用其实就是直观而方便地让你让像管理硬盘里的文件一样管理的你的站点。
  在以后网页制作的过程中，将会频繁地在编辑窗口和站点窗口之间切换。
cts对象面板：Crtl+F2
三、制作前的准备工作——定义网站
  在正式开始制作网页之前，最好先定义一个新网站，这是为了更好地利用站点窗口对站点文件进行管理。
  定义的方法
  方法一：在站点窗口的下拉菜单选择最后一项Define Sites，如下图。
  此时会弹出一个新的对话框，点击New按钮是定义一个新网站，如果日后需要对旧有网站重新定义，可以在左边的网站列表中选中你需要重新定义的网站，然后点击 Edit 按钮便可。
  方法二：选择命令菜单 Site > New Site 选项。
  基本设置
  在接着看到的对话框中，要进行以下三步简单的设置：
  ① Site Name（网站名称）：为你的网站起一个名字，这个名字只起着识别的作用，与网站发布后真实的名字无关，例如这里的名字是：“我的网站”，而实际上我的网站叫“上网指南”；
  ② Local Root（本地根目录）：设置网站在本地硬盘的位置，点击后面的文件夹图标可以选择硬盘的任意目录作为存放网站文件的目录；
  ③ Cache（缓存）：建立缓存可以使文件的移动、改名、查等站点管理的操作速度大大提升，因此建议大家在这里打上钩。  　
  完成后，回到站点窗口，就可以看到如下类似的画面：
  可以看到，“我的网站”的名称已经出现在站点窗口了，因为是新建的一个站点，所在在本地目录看到的一片空白。
  站点定义完毕之后，就可以正式制作属于你自己的网页了。
四、从最简单的网页开始
  新建页面
  一般推荐大家在站点窗口完成新建网页文件的操作，这样有助大家清楚新建的页面在整个网站的具体位置：
  方法一：选择菜单上的 File > New File
  方法二：在本地目录选中需要新建页面的目录，单击右键，选择 New File
下载什么软件可以改变字体样式
  在Dreamweaver UltraDev中，新建页面的文件名默认为untitled.asp。我们要给这个页面重新起一个名字，例如是“index.htm”。改名的方法是在文件名上缓慢地点击两下（如下图），不要太快，否则会变成是双击打开该文件。
  其中，htm既是文件的后缀，也是这个网页文件的类型说明，表示这个网页文件是属于静态的HTML文件（也可以用后缀html表示），以后大家紧记将网页的后缀改为htm或html，否则传上到服务器之后，浏览器就无法正常打开。
  【提示】
  为什么网站的第一页的名字通常是index.html而不是其他？举个例子，当你在浏览器打入 way 这个网址时，其实并没有明确地指定打开哪一个页面，但服务器就会自动寻 index.html这个文件，如果有的话，就显示这个文件，如果没有，就再index.htm，再没有的话，就很可能会显示错误信息了。而先index.html，再index.htm这个顺序是由服务器决定的，并且绝大多数的服务器都是遵循这种原则，而且一般用户无权修改这种设定。所以我们在制作网页时，最好将网站的第一页命名为index.html或index.htm。
四、从最简单的网页开始
设置页面属性
  设置页面属性，是在正式开始制作网页前一个必不可少的工序。双击打开刚才新建的index.
htm，就自动转入编辑窗口。选择Modify > Page Properties设置一些必要的页面属性，如下图：
　① Title（标题）：页面的标题会直接显示在浏览器的左上方，例如用浏览器打开 goEway 网站，可以在浏览器的左上角看到该页的标题“goEway – 上网指南”。务必要养成为每一页都设定一个标题的习惯，这既便于访问者的浏览，也有助于你在网页编辑的过程中区分不同的页面。虽然标题并不是一个网页必要的元素，但却是体现着网页制作者有
否从细处为浏览者着想。
  ② Background Image（背景图片）：点击Browse按钮，可以为网页添加背景图片。
  ③ Background（背景颜）：默认为白，点击 可以选择其他的颜。后面“#FFFFFF”是以16进制形式显示的RGB值。
  ④ Text（文字颜）：在这里将文字设置为黑。要注意，假如不对背景及文字的颜进行设置（此时RGB值显示为空），那么浏览器在显示页面的时候，就会采用系统的默认设置。但因为不同的系统的设置都可能会有所区别，这样就回导致页面的显示效果也是千差万别。因为，为了更好地让页面体现出你的设计思想，就千万别忘记设定页面的背景颜及文字颜。
  ⑤ Link（链接颜）：设定超级链接的颜，不设定则默认为蓝。
  ⑥ Left和Top：设置左部及顶部的页边距，一般都设置为“0”以方便于网页的编辑。
  确保页面的设置正确后，点击 OK 结束。
四、从最简单的网页开始
  制作一个最简单的网页
  万事起头难，就让我们先从最简单的网页做起。如果你是按照先前的步骤一步一步做下来，那么应该可以如下类似的画面：
  此时光标处于编辑窗口的最最左上角，现在可输入你喜欢的任何文字，例如：“欢迎来到 goEway”，选取文字，在属性面板上的Size下拉菜单 选取文字的大小，例如“6”，再点击 使文字置中，再在文字前敲几个回车，使文字下移，直到使文字完全至于页面中央高度为止，如下图：
  选取菜单 File > Save 保存页面，恭喜你，你的第一个网页就已经完成了，按 F12 看看页面效果，满意吗？
五、让你的网页更漂亮
  用图片美化你的页面
  上面的网页实在也太单调了，当然无法让大家满意，现在我们来一步一步美化我们的页面。而最简单直接的方法是在网页上添加图片。而很大程度上，人们说一个网页漂亮，通常就是指网页上的图片漂亮。
  点击对象面板上的 按钮，然后弹出对话框，选择需要插入的的图片，如下图：
  如果被选择的文件，是网站目录以外的文件，系统就会问你时候将图片复制到网站内，如
下图。答案当然是“是”，否则网页传上服务器后，图片就不会被显示，因为图片根本就不在网站里面：
  接着，选择图片在网站的存放位置，如下图。我的做法是将所有图片另存放在同一个目录，例如如图所示的“Images”，这样可以方便查。也有人喜欢将图片和网页文件混放在一起，看各人习惯，没有什么特别好，也没什么特别不好。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。