界面面板

初识界面

　　安装后，它会自动在 Windows 的菜单中创建程序组。与 FrontPage 有很大的不同，是的，它

  

Macromedia Dreamweaver

把工具栏省去了，然后增加了几个浮动的工具栏。在 Dreamwaver3.0 中，它的工具栏全是浮动工具栏，可以将工具栏缩小，也可以关闭。在专业术语里面，他们叫“浮动面板”，利用浮动面板来控制对页面的编写，而不是利用烦琐的对话框，这是 Dreamwaver3.0 编辑网页中最值得人赞赏的特性。通过在浮动面板中进行属性设置，这样就直接可以在文档中看到结果，避免了中间过程，提高了工作效率。但对于熟悉了微软的应用程序的用户来说，开始的时候可能很不习惯。那好，就先来介绍它的三个最重要的浮动面板。

启动面板

　　启动面板主要用来快速启动响应的任务，或显示/隐藏相应的浮动面板。如果启动面板是竖的，那么，可以点击它又下角的一个小按钮，它就可以变成横向的了，这时，可能会发现，它的状态栏上也有这个面板上的所有选项。这也就为网页制作者提供了方便。可以直接从右下角点击相应的栏目进入想要进入的对话框。

对象面板

　　对象面板主要功能相当于插入菜单，主要是向网页中插入一些对象，如表格，框架，图象，层，Flash 动画等，它通过一个下拉菜单，把要插入的选项都包括在了其中，如图5。

　　每一个选项中都有若干个图标，只要在图表上单击一下，就可以插入想要插入的对象了。

属性面板

　　属性面板会随着编辑的内容而变化，这个图是文字属性面板，它里面包含了所要编辑的文字的所有内容，包括字体，颜色，大小，连接，缩进等，它的右下角还有一个向下的小三角箭头，单击它，会展开属性面板，它把一些不常用的属性也例出来。展开后，箭头会变成向上，单击它，又会使属性面板复原。属性面板很多，还有图象属性控制面板，层属性控制面板等对象的属性控制面板，用户只要选择要编辑的对象，它就会自动变化，挺方便的。用户对所有由启动面板弹出来的浮动面板在被打开后，可以重新组合，可以将经常用的面板单独地拉出来，只需要将鼠标放到想要拉的按钮上面，然后按住左键拖动就可以了，同理，把他们组合也是一样，用鼠标拖动后，放到上面就可以。

工具简介

　　第一个为插入图象的按钮，点击后，会弹出对话框，标准对话框，选择想要的图象就行了。

　　第二个（横向走）为插入轮替图象，它弹出的对话框会让选择两副图，以及鼠标点击时的连接等。作好后，用鼠标移动到图象上面，图象就会变成另外的一副图象，点击它，就会连接到另外一个页面上去。

　　第三个为表格，点击后，在弹出的对话框中，添入想要的行数和列数以及表格边距颜色等。

　　第四个为插入表格式数据，可以将以前作成的表格形状的数据表，直接插入到网页中来，而不用做任何的修改。

　　第五个按钮为插入水平线按钮，插入后，在属性浮动面板上改改它的大小等。

　　第六个为导航条，和第二个差不多，也可以换图象，不过，比起第二个要复杂的多，但绝对简单。

　　第七个为插入层，这好象是 Dreamweaver 特有的特性，其他的网页编辑软件中都没有这项功能。插入的层可以位于页面的任何位置。拖动就行。

　　第八个为插入换行符，有时网页中的文字想让它换行，按回车又太大，用换行符就是一种不错的选择。

　　第九个为插入 Email，将联系用的 Email 插入网页中，只要填上 Email 地址就行。

　　第十个为插入日期，很简单，没有什么好说的。

　　第十一个为插入 Flash按钮，Flash 是现在网页中新兴的一种多媒体，有动画，有声音，但文件很小，极适合在网上传播。

　　第十二个为插入 Shockwave 按钮，做好了的 Shockwave 直接就可以插到这儿来。

　　第十三个为插入制作人，亲自制作的东西不想留名吗？点它就行。

　　第十四为插入 Firework 按钮，Firework 是 Macromedia 公司的又一个产品，具有制作动画图象等动态功能。也是专门为网页制作设计的。

　　第十五为插入 Java 语言编写的 Applet 小程序按钮。

　　第十六为插入 Active X控件用的按钮。

　　第十七为插入插件用的按钮，这儿可以插入别的插件，上面未包括的。

　　第十八未插入服务器端接口联系的按钮。

组的按钮

插入框架

　　第一个按钮为插入框架按钮，为插入下面的那些按钮作准备。这下面的按钮选项包括：文本框，按钮，多选按钮，单选按钮，列表，文件域，图象域，隐含域，跳转菜单等交互式网页要用到的组件，假如要制作一个交互式的网页像留言薄什么的，用它做，非常的方便快捷。

其他按钮

　　它还有几个选项组，但都不是那么常用了，一个就是它 Character 组它是常用符号组面板，里面为收集了最长用的符号，这些，通过手工直接写，是非常麻烦的事，因为它们是源码了，而这儿，可以给直接的转换成为源码，插入就成。而 Frames 组，则是对页面的分页，也就是分窗口，将一个浏览器窗口分成几个窗口，在每个窗口里加入不同网页，来达到不同的效果。它可以分的总类也如下，可以从图上直接看出来，非常的方便与快捷。而 Head 组则是在网页“head”和“/head”之间加入必要的语句，可以是连接，可以是关键字，也可以是描述性的语句，还可以规定网页的刷新频率等。Invisible 组则是插入网页中看不见的元素了，比如说：换行符，回车符等不可见的符号。主要由这个控制面板来插入。

使用方法

网页制作

　　新建方法，就不用多说，一般软件中的新建方法在这儿同样使用，点击菜单 File 中的 New 就行了，或者按 Ctrl+N 也行。

　　在这儿就可以插入文字，图象，层等，反正都随，是不是也是所见既所得。假如想看一下它的源文件，可以点击右下角的“〈〉”标记，也可以点击启动面板中的最后一个选项。就会弹出来一个小窗口如图：也可以打开外部编辑器来编辑它的源代码，比如说记事本。

　　只要点一下“External Editor”按钮，Wrap选项为换行，当不想横向拉动滚动条，把它选上，文字就自动会换行了，另外一个选项为行号选项，当选上它是，左边将会出项行号，这样特别便于查找，去掉后，就与普通的记事本没有什么区别了。编辑好后，关了它就可以了。

构建站点

　　所有设计好的网页，在放到网上去以前，都需要把它组建好，以便于上传，在本地机上就要组织好，而 DreamWeaver 也把这想到了，点击启动面板上的 Site 选项，就会弹出站点管理窗口，和文件浏览器差不多，在这儿，可以增加文件夹，删减文件，文件改名等等，只要是文件浏览器能干的事，它都能干。并且可以清楚地看到，哪个文件连接到了哪个文件，哪些文件是并列的关系，那些文件是父子关系。所做的第一步是先建立一个本地站点根目录。然后选择“New Site”打开对话框，在“Local Root Folder”中，输入本地站点根目录的位置。然后输入 HTTP Address，如果还没有该地址，随便输入一个也行，只要好记。最后，按“OK”键就可以了。以后从本地站点中删除文件，拷贝文件时，站点会自动刷新站点文件列表。其余的管理操作，与文件浏览器一样，也就不多说了。

        Dreamweaver快捷键　　新建(New)一个网页【Ctrl】+【N】

　　制作一个网页

　　打开(Open)一个存在的网页【Ctrl】+【O】

　　在框架中打开(Open)...【Ctrl】+【Shift】+【O】

　　关闭(closedoWn)当前网页【Ctrl】+【W】

　　保存（Save）当前网页【Ctrl】+【S】

　　另存为 【Ctrl】+【Shift】+【S】

　　检查联接的有效性【Shift】+【F8】

　　撤消上一步操作【Ctrl】+【Z】/【Alt】+【BackSpace】

　　重复上一步操作【Ctrl】+【Y】/【Ctrl】+【Shift】+【Z】

　　剪切到剪贴板【Ctrl】+【X】/【Shift】+【Del】

　　拷贝（Copy）到剪贴板【Ctrl】+【C】/【Ctrl】+【Ins】

　　将剪贴板的内容粘贴到当前文件中【Ctrl】+【V】/【Shift】+【Ins】

　　拷贝（Copy）HTML代码【Ctrl】+【Shift】+【C】

　　粘贴HTML代码【Ctrl】+【Shift】+【V】

　　全部（All）选择【Ctrl】+【A】

　　选择上一级标签【Ctrl】+【Shift】+【<】

　　选择下一级标签【Ctrl】+【Shift】+【>】

　　查找（Find）和替换...【Ctrl】+【F】/【Ctrl】+【H】

　　查找下一个【F3】

　　缩进代码【Ctrl】+【]】

　　取消缩进代码【Ctrl】+【[】

　　平衡背带【Ctrl】+【】

　　设置断点（Breakpoint）【Ctrl】+【Alt】+【B】

　　调用外部编辑器（ExternalEditor【Ctrl】+【E】

　　参数设置（setUp）...【Ctrl】+【U】

　　在编辑窗口和代码窗口间进行切换【Ctrl】+【Tab】

　　刷新视窗显示【F5】

　　显示/隐藏头文件【Ctrl】+【Shift】+【W】

　　表格用标准显示方式【Ctrl】+【Shift】+【F6】

　　表格显示为版面【Ctrl】+【F6】

　　显示/隐藏不可见因素【Ctrl】+【Shift】+【I】

　　显示/隐藏标尺（Rulers）【Ctrl】+【Alt】+【R】

　　显示/隐藏网格【Ctrl】+【Alt】+【G】

　　捕捉到网格（Grid）【Ctrl】+【Alt】+【Shift】+【G】

　　播放（Play）外部插件【Ctrl】+【Alt】+【P】

　　停止播放外部插件【Ctrl】+【Alt】+【X】

　　播放所有的外部插件【Ctrl】+【Alt】+【Shift】+【P】

　　停止所有外部插件【Ctrl】+【Alt】+【Shift】+【X】

　　插入图像（Image）【Ctrl】+【Alt】+【I】

　　插入Flash动画【Ctrl】+【Alt】+【F】

　　插入Shockwave影片【Ctrl】+【Alt】+【D】

　　插入表格（Table）【Ctrl】+【Alt】+【T】

　　插入书签命名锚点（Anchor）【Ctrl】+【Alt】+【A】

　　插入回车符号【Shift】+【Enter】

　　插入非间断空格【Ctrl】+【Shift】+【Space】

　　修改页面属性...【Ctrl】+【J】

　　打开/关闭物体属性设置面板【Ctrl】+【Shift】+【J】

　　快速代码编辑【Ctrl】+【T】

　　新建链接（Link）...【Ctrl】+【L】

　　删除链接（Link）【Ctrl】+【Shift】+【L】

　　选择表格【Ctrl】+【A】

　　合并（Merge）单元格【Ctrl】+【Alt】+【M】

　　[2]　分离（Split）单元格...【Ctrl】+【Alt】+【S】

　　插入一行【Ctrl】+【M】

　　插入一列【Ctrl】+【Shift】+【A】

　　删除一行【Ctrl】+【Shift】+【M】

　　删除一列【Ctrl】+【Shift】+【-】

　　增加单元格跨度【Ctrl】+【Shift】+【]】

　　减少单元格跨度【Ctrl】+【Shift】+【[】

　　左对齐选择物体【Ctrl】+【Shift】+【1】

　　右对齐选择物体【Ctrl】+【Shift】+【3】

　　顶对齐选择物体【Ctrl】+【Shift】+【4】

　　底对齐选择物体【Ctrl】+【Shift】+【6】

　　使宽度相同【Ctrl】+【Shift】+【7】

　　使高度相同【Ctrl】+【Shift】+【9】

　　将对象添加到库（Library）中【Ctrl】+【Shift】+【B】

　　在模板中新建一个可编辑区域...【Ctrl】+【Alt】+【V】

　　添加物体到时间线（Timeline）上【Ctrl】+【Alt】+【Shift】+【T】

　　在时间线上添加关键帧【F6】

　　删除时间线上的关键帧【Shift】+【F6】

　　文本缩进【Ctrl】+【Alt】+【]】

　　取消文本缩进【Ctrl】+【Alt】+【[】

　　设置段落格式为无【Ctrl】+【0】

　　设置段落格式为“Paragraph”【Ctrl】+【Shift】+【P】

　　设置段落格式为“标题1”【Ctrl】+【1】

　　设置段落格式为“标题2”【Ctrl】+【2】

　　设置段落格式为“标题3”【Ctrl】+【3】

　　设置段落格式为“标题4”【Ctrl】+【4】

　　设置段落格式为“标题5”【Ctrl】+【5】

　　设置段落格式为“标题6”【Ctrl】+【6】

　　文字左（Left）对齐【Ctrl】+【Alt】+【Shift】+【L】

　　文字居中（Center）对齐【Ctrl】+【Alt】+【Shift】+【C】

　　文字右（Right）对齐【Ctrl】+【Alt】+【Shift】+【R】

　　文本样式使用粗体（Bold）【Ctrl】+【B】

　　文本样式使用斜体（Italic）【Ctrl】+【I】

　　编辑（Edit）样式表...【Ctrl】+【Shift】+【E】

　　拼写检查【Shift】+【F7】

　　开始录制命令【Ctrl】+【Shift】+【X】

　　播放（Play）录制好的命令【Ctrl】+【P】

　　获取站【Ctrl】+【Shift】+【D】

　　检查站点【Ctrl】+【Alt】+【Shift】+【D】

　　放置（pUt）站点【Ctrl】+【Shift】+【U】

　　登记站点【Ctrl】+【Alt】+【Shift】+【U】

　　检查链接【Ctrl】+【F8】

　　显示/隐藏面板和工具箱【F4】

　　显示/隐藏上方工具栏（Toolbar）【Ctrl】+【Shift】+【T】

　　显示/隐藏对象面板【Ctrl】+【F2】

　　显示/隐藏属性面板【Ctrl】+【F3】

　　显示/隐藏站点窗口【F8】

　　打开站点映射图【Alt】+【F8】

　　显示/隐藏资源面板【F11】

　　显示/隐藏行为面板【Shift】+【F3】

　　显示/隐藏代码窗口【F10】

　　显示/隐藏CSS样式面板【Shift】+【F11】

　　显示/隐藏框架面板【Shift】+【F2】

　　显示/隐藏历史面板【Shift】+【F10】

　　显示/隐藏HTML样式面板【Ctrl】+【F11】

　　显示/隐藏图层面板【F2】

　　显示/隐藏参考面板【Ctrl】+【Shift】+【F1】

　　显示/隐藏时间线面板【Shift】+【F9】

　　最小化Dreamweaver窗口【Shift】+【F4】

　　恢复Dreamweaver窗口【Alt】+【Shift】+【F4】

　　“站点”菜单命令

　　新建（New）窗口【Ctrl】+【N】

　　新建（New）一个文件【Ctrl】+【Shift】+【N】

　　新建（New）一个文件夹【Ctrl】+【Alt】+【Shift】+【N】

　　打开（Open）网页...【Ctrl】+【O】

　　打开（Open）选定的文件【Ctrl】+【Alt】+【Shift】+【O】

　　关闭（closedoWn）站点窗口【Ctrl】+【W】

　　重命名文件【F2】

　　删除文件【Delete】

　　检查链接【Shift】+【F8】

　　退出Dreamweaver【Ctrl】+【Q】

　　发布站点【F12】

Dreamweaver20个“标准的”配色方案

　　<html>

　　<head>

　　<title>Colors</title>

　　<style type="text/css">

　　body{

　　margin:20px;

　　font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;

　　font-size:12px;

　　}

　　.style1{

　　width: 800px;

　　height: 100px;

　　margin: 0px auto;

　　margin-bottom:20px;

　　border:1px solid #96C2F1;

　　background-color: #EFF7FF

　　}

　　.style1 h5{

　　margin: 1px;

　　background-color: #B2D3F5;

　　height: 24px;

　　}

　　.style2{

　　width: 800px;

　　height: 100px;

　　margin: 0px auto;

　　margin-bottom:20px;

　　border:1px solid #9BDF70;

　　background-color: #F0FBEB

　　}

　　.style2 h5{

　　margin: 1px;

　　background-color: #C2ECA7;

　　height: 24px;

　　}

　　.style3{

　　width: 800px;

　　height: 100px;

　　margin: 0px auto;

　　margin-bottom:20px;

　　border:1px solid #BBE1F1;

　　background-color: #EEFAFF

　　}

　　.style4{

　　width: 800px;

　　height: 100px;

　　margin: 0px auto;

　　margin-bottom:20px;

　　border:1px solid #CCEFF5;

　　background-color: #FAFCFD

　　}

　　.style5{

　　width: 800px;

　　height: 100px;

　　margin: 0px auto;

　　margin-bottom:20px;

　　border:1px solid #FFCC00;

　　background-color: #FFFFF7

　　}

　　.style6{

　　width: 800px;

　　height: 100px;

　　margin: 0px auto;

　　margin-bottom:20px;

　　border:1px solid #92B0DD;

　　background-color: #FFFFFf

　　}

　　.style6 h5{

　　margin: 1px;

　　background-color: #E2EAF8;

　　height: 24px;

　　}

　　.style7{

　　width: 800px;

　　height: 100px;

　　margin: 0px auto;

　　margin-bottom:20px;

　　border:1px solid #A9C9E2;

　　background-color: #E8F5FE

　　}

　　.style8{

　　width: 800px;

　　height: 100px;

　　margin: 0px auto;

　　margin-bottom:20px;

　　border:1px solid #E3E197;

　　background-color: #FFFFDD

　　}

　　.style9{

　　width: 800px;

　　height: 100px;

　　margin: 0px auto;

　　margin-bottom:20px;

　　border:1px solid #ADCD3C;

　　background-color: #F2FDDB

　　}

　　.style10{

　　width: 800px;

　　height: 100px;

　　margin: 0px auto;

　　margin-bottom:20px;

　　border:1px solid #F8B3D0;

　　background-color: #FFF5FA

　　}

　　.style11{

　　width: 800px;

　　height: 100px;

　　margin: 0px auto;

　　margin-bottom:20px;

　　border:1px solid #D3D3D3;

　　background-color: #F7F7F7

　　}

　　.style12{

　　width: 800px;

　　height: 100px;

　　margin: 0px auto;

　　margin-bottom:20px;

　　border:1px solid #BFD1EB;

　　background-color: #F3FAFF

　　}

　　.style13{

　　width: 800px;

　　height: 100px;

　　margin: 0px auto;

　　margin-bottom:20px;

　　border:1px solid #FFDD99;

　　background-color: #FFF9ED

　　}

　　.style14{

　　width: 800px;

　　height: 100px;

　　margin: 0px auto;

　　margin-bottom:20px;

　　border:1px solid #CACAFF;

　　background-color: #F7F7FF

　　}

　　.style15{

　　width: 800px;

　　height: 100px;

　　margin: 0px auto;

　　margin-bottom:20px;

　　border:1px solid #A5B6C8;

　　background-color: #EEF3F7

　　}

　　.style16{

　　width: 800px;

　　height: 100px;

　　margin: 0px auto;

　　margin-bottom:20px;

　　border:1px solid #CEE3E9;

　　background-color: #F1F7F9

　　}

　　.style17{

　　width: 800px;

　　height: 100px;

　　margin: 0px auto;

　　margin-bottom:20px;

　　border:1px solid #CAE3FF;

　　background-color: #F4F9FF

　　}

　　.style18{

　　width: 800px;

　　height: 100px;

　　margin: 0px auto;

　　margin-bottom:20px;

　　border:1px solid #C9D9EE;

　　background-color: #ECF8FF

　　}

　　.style19{

　　width: 800px;

　　height: 100px;

　　margin: 0px auto;

　　margin-bottom:20px;

　　border:1px solid #5C9CC0;

　　background-color: #F2FAFF

　　}

　　h5{color:#CCCCCC;margin-left:680px}

　　a{color:#CCCCCC;text-decoration:none}

　　a:hover{color:#666666;text-decoration:underline}

　　</style>

　　<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>

　　<body>

　　<div class="style1"><h5>Title</h5></div>

　　<div class="style2"><h5>Title</h5></div>

　　<div class="style6"><h5>Title</h5></div>

　　<div class="style3"></div>

　　<div class="style4"></div>

　　<div class="style5"></div>

　　<div class="style7"></div>

　　<div class="style8"></div>

　　<div class="style9"></div>

　　<div class="style10"></div>

　　<div class="style11"></div>

　　<div class="style12"></div>

　　<div class="style13"></div>

　　<div class="style14"></div>

　　<div class="style15"></div>

　　<div class="style16"></div>

　　<div class="style17"></div>

　　<div class="style18"></div>

　　<div class="style19"></div>

　　</body>

　　</html>