注册 登录
美国中文网首页 博客首页 美食专栏

福布斯齐 //www.sinovision.net/?43252 [收藏] [复制] [分享] [RSS] 梦幻排名!

x

博客栏目停服公告

因网站改版更新,从9月1日零时起美国中文网将不再保留博客栏目,请各位博主自行做好备份,由此带来的不便我们深感歉意,同时欢迎 广大网友入驻新平台!

美国中文网

2024.8.8

分享到微信朋友圈 ×
打开微信,点击底部的“发现”,
使用“扫一扫”即可将网页分享至朋友圈。

Dreamweaver视频教程

已有 6488 次阅读2011-3-28 11:25 |个人分类:网站制作分享到微信

Dreamweaver建站视频教程-01

Dreamweaver建站视频教程-02

Dreamweaver建站视频教程-03

Dreamweaver建站视频教程-04

Dreamweaver建站视频教程-05

Dreamweaver建站视频教程-06

Dreamweaver建站视频教程-07

Dreamweaver建站视频教程-08

Dreamweaver建站视频教程-09

Dreamweaver建站视频教程-10

       

界面面板

初识界面

  安装后,它会自动在 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>


免责声明:本文中使用的图片均由博主自行发布,与本网无关,如有侵权,请联系博主进行删除。







鲜花

握手

雷人

路过

鸡蛋

评论 (0 个评论)

facelist

您需要登录后才可以评论 登录 | 注册

 留言请遵守道德与有关法律,请勿发表与本文章无关的内容(包括告状信、上访信、广告等)。
 所有留言均为网友自行发布,仅代表网友个人意见,不代表本网观点。

关于我们| 反馈意见 | 联系我们| 招聘信息| 返回手机版| 美国中文网

©2024  美国中文网 Sinovision,Inc.  All Rights Reserved. TOP

回顶部