1、安装并运行安装并运行Dreamweaver CS51任务分析任务分析 安装Dreamweaver CS5 并运行该软件。任务实施任务实施(1)将安装盘放入电脑光驱中,双击Dreamweaver CS5安装盘的Setup.exe文件,即可进入安装提示界面。依照提示输入相关信息后,将进入安装进度的界面。等待一段时间后,出现安装完成界面。点击“完成”,即安装成功,并能在“开始”菜单中找到Adobe Dreamweaver CS5。(2)从桌面上依次点击“开始”“所有程序”“Adobe Dreamweaver CS5”运行Dreamweaver CS5,会弹出“默认编辑器”对话框(3)这里通常使用默认
2、选项,点击“确定”,即可进入Dreamweaver CS5初始界面(4)选择“新建”栏中的“HTML”,即可进入Dreamweaver CS5的工作界面。Dreamweaver CS5的工作界面的工作界面2任务分析任务分析 布置Dreamweaver CS5软件的窗口布局:文档区显示黑色网格,把右侧浮动面板的“插入”面板拖到文档编辑区,右侧浮动面板组区显示CSS面板和文件面板,如图所示。相关知识相关知识1.Dreamweaver CS5的界面 目前,在制作网页中比较广泛使用的Dreamweaver版本是CS5,较之以前的版本,它的整体界面有了一点改变,原来插入菜单栏是在菜单栏下方,CS5版本改
3、到浮动面板中。CS5版本新增了许多功能,例如集成CMS,跨平台测试,CSS检查功能,保持跨媒体一致性,更改源图像,快速、轻松地更新图像等。Dreamweaver CS5的界面主要由以下几部分组成:菜单栏、文档工作栏、文档编辑区、标签选择器、状态栏、属性面板和浮动面板组。2.Dreamweaver CS5的菜单栏 Dreamweaver CS5的菜单栏位于窗口的最上端,几乎Dreamweaver CS5工作界面中的所有操作在菜单栏的菜单选项中都能找到。3.Dreamweaver CS5的插入菜单栏 Dreamweaver CS5的插入菜单栏与以往的版本不同,默认布置在浮动面板中。使用Dreamw
4、eaver CS5插入菜单栏中的选项,可以在编辑区中插入相应的各种元素,如超链接、图像、表格、媒体、日期等4.Dreamweaver CS5的文档编辑区 Dreamweaver CS5的文档编辑区是制作网页的区域,网页元素可以通过各种方式插入到编辑区中。在编辑区的左上角,显示网页的文档名称,默认是Untitled-1,如果名称后有“*”,表明该网页文件发生了修改却没有保存,保存后“*”会消失。文档工作栏中有三个按钮,依次是“设计”、“代码”、“拆分”,三个按钮分别对应着编辑区的三种工作模式。在设计视图中实现可视化的设计方式;在代码视图中可以通过编写HTML代码的方式制作网页;在拆分视图中能同时
5、使用代码视图和设计视图,。默认情况下是设计视图模式。在文档编辑区的顶端有一个“标题”文本框,用于输入网页标题栏的信息。按钮用来设置浏览器的信息,单击后弹出的菜单如图313所示,在菜单中可以选择用何种浏览器。单击菜单中的“编辑浏览器列表”选项,弹出“首选参数”对话框,在该对话框中可以通过“+”和“-”来添加浏览器类型,并能定义主浏览器与次浏览器。也可以通过按钮来即时浏览所制作的网页。文档编辑区的下端是状态栏,状态栏左侧为标签选择器,通过选择标签选择器能方便地选中文档编辑区的内容。例如,编辑区内有一个表格,光标定位到某行里,单击标签选择器中的标签,如图所示,便能选中表格中的该行。状态栏右侧的按钮依
6、次是选取工具、手型工具、缩放工具、设置缩放比例、窗口大小及网页的下载速率,如图所示。5.Dreamweaver CS5中的属性面板 在文档编辑区的下方有一个属性面板,当选中编辑区中的某个网页元素时,通过属性面板可以定义该元素的属性。属性面板与文档和文档窗口之间的按钮用于关闭属性面板,打开属性面板要在菜单栏中的“窗口”“属性”选项打开。不同的网页元素对应的属性面板也不同,但在使用属性面板之前,都要保证网页元素是处于选中状态的。通过单击属性面板右下角的 按钮可以收起属性面板。6.Dreamweaver CS5中的浮动面板 在整个工作界面的右侧有多个浮动面板,称为浮动面板组,分别对应着不同的功能,如图318所示。通过“窗口”菜单栏可以选择显示或隐藏哪些面板。用鼠标按着面板的标题,可以将面板拖动到适合的位置。任务实施任务实施(1)打开Dreamweaver CS5软件。(2)选择“查看”菜单栏中的“网格设置”“显示网格”选项,文档区显示黑色网格。(3)选择“窗口”菜单中的“插入”,在右边的浮动面板中找到“插入”面板的标题,按着鼠标左键拖到文档编辑区。(4)分别选择“窗口”菜单中的“文件”、“CSS样式”和“框架”等选项,即可完成。
