实验6.1创建站点并掌握编辑网页的基本操作.docxVIP

实验6.1 创建站点并掌握编辑网页的基本操作一、实验目的1.熟悉Dreamweaver的工作环境2.掌握使用Dreamweaver创建站点的基本步骤3.掌握网页编辑的基本方法二、实验要求1.掌握使用Dreamweaver创建本地站点的基本步骤。2.掌握使用Dreamweaver编辑网页的基本方法，包括对网页标题、网页文档中的标题、无序列表、有序列表、超链接等设置。三、实验内容和步骤（1）．【任务】熟悉Dreamweaver CS6的工作环境启动Dreamweaver CS6，可以看到如图1所示的Dreamweaver CS6的操作界面，它包括如下几个部分：标题栏、菜单栏、对象面板、标签选择栏、页面区域、属性检查器、面板组等。图1 Dreamweaver CS6软件的界面“文档”工具栏包含按钮和弹出式菜单，它们提供各种“文档”窗口视图（如“设计”视图和“代码”视图）、各种查看选项和一些常用操作（如在浏览器中预览）。“属性”面板用于查看和更改所选对象或文本的各种属性。每种对象都具有不同的属性。“插入”面板包含用于将各种类型的“对象”（如图像、表格和水平线）插入到文档中的按钮。每个对象都是一段 HTML 代码，允许在插入它时设置不同的属性。例如，可以通过单击“插入”栏中的“表格”按钮插入一个表格。还可以不使用“插入”栏，而使用“插入”菜单插入对象。通过拖动“插入”栏到Dreamweaver菜单的下部，并在出现一条蓝色的提示线时松手，可以把“插入”栏的形式变换为“插入”选项卡。“文档”窗口显示当前创建和编辑的文档。在Dreamweaver CS6中可以通过多种视图方式查看网页文件，这个特点和Word的多视图查看类似。Dreamweaver CS6有4种视图：代码、设计、拆分、实时视图。当关注文档的源代码或者需要编辑源代码时，可以使用代码视图。要实现类似Word的所见即所得功能，通过可视化的方式编辑网页，可以使用设计视图。如果要兼顾以上两点，可以选择拆分视图。在实时视图下，看到的页面与用浏览器查看的效果一样，这种视图是不能编辑文档的。标签选择器用于选择准确地选择网页上的元素。CSS样式面板CSS样式面板可以用来进行新建CSS规则、编辑CSS规则、删除CSS规则以及为网页附加外部样式表等操作。“文件”面板可以管理文件和文件夹，无论它们是 Dreamweaver 站点的一部分还是在远程服务器上。“文件”面板可以访问本地磁盘上的全部文件，非常类似于 Windows 资源管理器。Dreamweaver还提供了其他面板窗口，例如“多屏预览”面板、“标签检查器”面板、“历史记录”面板灯。若要打开 Dreamweaver 各面板，请使用“窗口”菜单。（2）．【任务】使用Dreamweaver建立站点站点可以被看作一系列文档的组合，这些文档通过各种链接建立逻辑关联。为了方便管理网站文件，在使用Dreamweaver CS6设计网站文件之前，必须先要建立站点，以充分利用Dreamweaver CS6的功能。一旦建立了站点，网站的后期维护也会相对容易。当管理员修改某些站点文件时，Dreamweaver CS6会自动检索与被修改文件相关的文件，并提示管理员更新这些文件。在C盘创建一个以自己的学号命名的文件夹。选择“站点｜新建站点”命令，打开“站点设置对象未命名站点”对话框。图2站点设置对话框或者选择“站点｜管理站点”命令，打开“管理站点”对话框，在对话框中单击“新建站点”按钮。图3管理站点对话框在对话框中，通过“站点”标签设置站点名称和站点文件夹。站点名称设置为“我的网站”，“本地站点文件夹”通过点击设置为C盘自己的学号对应文件夹。或者也可以直接输入。点击“保存”。在Dreamweaver的“文件”面板中，可以看到一个空白的站点。图4“文件”面板中的空白站点在站点上单击鼠标右键，会出现右键菜单，从中进行新建文件、新建文件夹、复制、粘贴等操作。通过“新建文件”，创建一个空白的站点主页文件“index.html”图5创建index.html从站点的右键菜单选择“新建文件夹”，建立images、css、js文件夹，分别用来存放整个站点的图像文件、CSS样式表文件、JavaScript文件。图6创建站点通用文件夹如果这时通过“资源管理器”观察C盘的站点文件夹，可以看到一致的文件和文件夹。如果通过“资源管理器”来在站点文件夹下创建文件，那么在Dreamweaver中需要等待几秒钟，或者点击“文件”面板的刷新按钮来同步显示。图7“文件”面板中的刷新按钮（3）．【任务】使用Dreamweaver创建和保存网页除了可以在文件面板创建网页，在Dreamweaver中可以通过多种方式新建网页。1．通过欢迎页Step1　打开Dreamweaver后，弹出如图8所示的欢迎页，可以