Dreamweaver 4 简明教程(二、初步认识 Dreamweaver)

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
  Objects对象面板:Crtl+F2
  站点窗口  

  站点窗口是Dreamweaver另一个重要的窗口,左半部是远程站点的目录,一般显示为空,只有在 FTP 连通状态下才有显示内容;右半部是当前编辑中的本地目录,是不是有点象windows的资源管理器?对,站点窗口的作用其实就是直观而方便地让你让像管理硬盘里的文件一样管理的你的站点。

  在以后网页制作的过程中,将会频繁地在编辑窗口和站点窗口之间切换。

时间: 2024-10-31 04:58:44

Dreamweaver 4 简明教程(二、初步认识 Dreamweaver)的相关文章

教程/dreamweaver/入门 Dreamweaver 4 简明教程2(初步认识 Dreamwe

dreamweaver|教程 Dreamweaver的启动 Dreamweaver的安装过程非常简单,一但成功安装后,就可以在开始菜单找到Dreamweaver的选项: 编辑窗口 第一次启动Dreamweaver,首先看到的是Dreamweaver的编辑窗口,千万别给上面密密麻麻的浮动窗口吓倒,其实常用的,就以下几个: ① 主菜单:在这里可以找到编辑窗口的的绝大部分功能: ② 工具栏:是Dreamweaver4的新增功能: ③ 对象面板(Objects):在网页编辑的过程中,通过单击对象面板的按

F#简明教程二:F#类型系统和类型推断机制

在上一篇教程<F#与函数式编程概述>中我们了解到F#和函数式编程的一些特点,更多关于F#语言和函数式编程的介绍可以参考51CTO之前对微软MVP赵颉老师的专访<TechED 09视频专访:F#与函数式编程语言>.本节教程我们将学习到F#的一些基础原理,在开始之前,让我们先温习一下我们的Hello World代码: #light System.Console.WriteLine("This is one hello") printfn "This is

Dreamweaver 4 简明教程(五、让你的网页更漂亮之二)

dreamweaver|教程|网页 图片的处理 假设现在我们插入的是如下这张图片: 点选该图片,打开属性面板(Ctrl+F3),可看到如下图的状态: 1.图片的缩略图及图片的大小. 2.图片的长宽,如果图片长于宽跟原图的大小不一致的话,这里的数字会用粗体显示:点取一张图片,你可以看到图片会被套上一个框和三个点,三个点分别代表将图片向三个不同的方向拉伸,从而达到放大和缩小的效果:在拉伸过程中,按着Shift键,再拖动角上的点,可以使图片保持宽高比例拉伸,如下图.如果要将图片恢复为原始大小,可以按属

教程/dreamweaver/入门 Dreamweaver 4 简明教程11(表格的使用)

dreamweaver|教程 表格的使用之二 根据上面对表格和单元格的参数,我们可以做出以下的表格: 以上是一个3×2的表格,表格宽度为350个像素,每个单元格的宽度为33%,即占表格的三分之一,其中单元格1和单元格4 已经合并:单元格边距.单元格间距.表格线宽度都为10:表格的底色为灰色,单元格5的边框颜色为红色,单元格6的底色为绿色: 在上面的例子,我们将表格线宽度设置为0,在编辑状态下,看到的表格是: 宽度为0的边框线,在编辑状态下会以虚线表示,而实际的浏览效果为:     可见,宽度为0

教程/dreamweaver/入门 Dreamweaver 4 简明教程3(定义网站)

dreamweaver|教程 在正式开始制作网页之前,最好先定义一个新网站,这是为了更好地利用站点窗口对站点文件进行管理. 定义的方法 方法一:在站点窗口的下拉菜单选择最后一项Define Sites,如下图. 此时会弹出一个新的对话框,点击New按钮是定义一个新网站,如果日后需要对旧有网站重新定义,可以在左边的网站列表中选中你需要重新定义的网站,然后点击 Edit 按钮便可. 方法二:选择命令菜单 Site > New Site 选项. 基本设置 在接着看到的对话框中,要进行以下三步简单的设置

教程/dreamweaver/入门 Dreamweaver 4 简明教程4(从最简单的网页开始)

dreamweaver|教程|网页 新建页面 一般推荐大家在站点窗口完成新建网页文件的操作,这样有助大家清楚新建的页面在整个网站的具体位置: 方法一:选择菜单上的 File > New File 方法二:在本地目录选中需要新建页面的目录,单击右键,选择 New File 在Dreamweaver UltraDev中,新建页面的文件名默认为untitled.asp.我们要给这个页面重新起一个名字,例如是"index.htm".改名的方法是在文件名上缓慢地点击两下(如下图),不要太快

Dreamweaver 4 简明教程(四、从最简单的网页开始)

dreamweaver|教程|网页 四.从最简单的网页开始 新建页面 一般推荐大家在站点窗口完成新建网页文件的操作,这样有助大家清楚新建的页面在整个网站的具体位置: 方法一:选择菜单上的 File > New File 方法二:在本地目录选中需要新建页面的目录,单击右键,选择 New File 在Dreamweaver UltraDev中,新建页面的文件名默认为untitled.asp.我们要给这个页面重新起一个名字,例如是"index.htm".改名的方法是在文件名上缓慢地点击

Dreamweaver 4 简明教程(三、制作前的准备工作——定义网站)

dreamweaver|教程 三.制作前的准备工作--定义网站 在正式开始制作网页之前,最好先定义一个新网站,这是为了更好地利用站点窗口对站点文件进行管理. 定义的方法 方法一:在站点窗口的下拉菜单选择最后一项Define Sites,如下图. 此时会弹出一个新的对话框,点击New按钮是定义一个新网站,如果日后需要对旧有网站重新定义,可以在左边的网站列表中选中你需要重新定义的网站,然后点击 Edit 按钮便可. 方法二:选择命令菜单 Site > New Site 选项. 基本设置 在接着看到的

Dreamweaver 4 简明教程(七、网页的排版2)

dreamweaver|教程|网页 七.网页的排版 表格的使用之二 根据上面对表格和单元格的参数,我们可以做出以下的表格: 以上是一个3×2的表格,表格宽度为350个像素,每个单元格的宽度为33%,即占表格的三分之一,其中单元格1和单元格4 已经合并:单元格边距.单元格间距.表格线宽度都为10:表格的底色为灰色,单元格5的边框颜色为红色,单元格6的底色为绿色: 在上面的例子,我们将表格线宽度设置为0,在编辑状态下,看到的表格是: 宽度为0的边框线,在编辑状态下会以虚线表示,而实际的浏览效果为: