中国传媒大学实验61 创建站点并掌握编辑网页的基本操作.docx

《中国传媒大学实验61 创建站点并掌握编辑网页的基本操作.docx》由会员分享，可在线阅读，更多相关《中国传媒大学实验61 创建站点并掌握编辑网页的基本操作.docx（13页珍藏版）》请在冰豆网上搜索。

中国传媒大学实验61创建站点并掌握编辑网页的基本操作

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

一、实验目的

1.熟悉Dreamweaver的工作环境

2.掌握使用Dreamweaver创建站点的基本步骤

3.掌握网页编辑的基本方法

二、实验要求

1.掌握使用Dreamweaver创建本地站点的基本步骤。

2.掌握使用Dreamweaver编辑网页的基本方法，包括对网页标题、网页文档中的标题、无序列表、有序列表、超链接等设置。

三、实验内容和步骤

（1）．【任务】熟悉DreamweaverCS6的工作环境

启动DreamweaverCS6，可以看到如图1所示的DreamweaverCS6的操作界面，它包括如下几个部分：

菜单栏、文档工具栏、页面区域、状态栏、属性面板、面板组等。

图1DreamweaverCS6软件的界面

1.“文档”工具栏

包含视图按钮和弹出式菜单，它们提供各种“文档”窗口视图（如“设计”视图和“代码”视图）、各种查看选项和一些常用操作（如在浏览器中预览）。

2.“属性”面板

用于查看和更改所选对象或文本的各种属性。

每种对象都具有不同的属性。

3.“插入”面板

包含用于将各种类型的“对象”（如图像、表格和水平线）插入到文档中的按钮。

每个对象都是一段HTML代码，允许在插入它时设置不同的属性。

例如，可以通过单击“插入”栏中的“表格”按钮插入一个表格。

还可以不使用“插入”栏，而使用“插入”菜单插入对象。

通过拖动“插入”栏到Dreamweaver菜单的下部，并在出现一条蓝色的提示线时松手，可以把“插入”栏的形式变换为“插入”选项卡。

4.“文档”窗口

显示当前创建和编辑的文档。

在DreamweaverCS6中可以通过多种视图方式查看网页文件，这个特点和Word的多视图查看类似。

DreamweaverCS6有4种视图：

代码、设计、拆分、实时视图。

当关注文档的源代码或者需要编辑源代码时，可以使用代码视图。

要实现类似Word的所见即所得功能，通过可视化的方式编辑网页，可以使用设计视图。

如果要兼顾以上两点，可以选择拆分视图。

在实时视图下，看到的页面与用浏览器查看的效果一样，这种视图是不能编辑文档的。

5.标签选择器

用于选择准确地选择网页上的元素。

6.CSS样式面板

CSS样式面板可以用来进行新建CSS规则、编辑CSS规则、删除CSS规则以及为网页附加外部样式表等操作。

7.“文件”面板

可以管理文件和文件夹，无论它们是Dreamweaver站点的一部分还是在远程服务器上。

“文件”面板可以访问本地磁盘上的全部文件，类似于Windows资源管理器。

Dreamweaver还提供了其他面板窗口，例如“多屏预览”面板、“标签检查器”面板、“历史记录”面板等。

若要打开Dreamweaver各面板，请使用“窗口”菜单。

（2）．【任务】使用Dreamweaver建立站点

站点可以被看作一系列文档的组合，这些文档通过各种链接建立逻辑关联。

为了方便管理网站文件，在使用DreamweaverCS6设计网站文件之前，必须先要建立站点，以充分利用DreamweaverCS6的功能。

一旦建立了站点，网站的后期维护也会相对容易。

当管理员修改某些站点文件时，DreamweaverCS6会自动检索与被修改文件相关的文件，并提示管理员更新这些文件。

Step1.在C盘创建一个以自己的学号命名的文件夹。

Step2.选择“站点｜新建站点”命令，打开“站点设置对象未命名站点”对话框。

图2站点设置对话框

或者选择“站点｜管理站点”命令，打开“管理站点”对话框，在对话框中单击“新建站点”按钮。

图3管理站点对话框

Step3.在对话框中，通过左侧“站点”类别设置站点名称和站点文件夹。

站点名称设置为“我的网站”，“本地站点文件夹”通过点击设置为C盘自己的学号对应文件夹。

或者也可以直接输入。

点击“保存”。

Step4.在Dreamweaver的“文件”面板中，可以看到一个空白的站点。

图4“文件”面板中的空白站点

Step5.在站点上单击鼠标右键，会出现快捷菜单，从中进行新建文件、新建文件夹、复制、粘贴等操作。

通过“新建文件”，创建一个空白的站点主页文件“index.html”

图5创建index.html

Step6.从站点的快捷菜单选择“新建文件夹”，建立images、css、js文件夹，分别用来存放整个站点的图像文件、CSS样式表文件、JavaScript文件。

图6创建站点通用文件夹

Step7.如果这时通过“资源管理器”观察C盘的站点文件夹，可以看到一致的文件和文件夹。

Step8.如果通过“资源管理器”在站点文件夹下创建文件，那么在Dreamweaver中需要等待几秒钟，或者点击“文件”面板的刷新按钮来同步显示。

图7“文件”面板中的刷新按钮

（3）．【任务】使用Dreamweaver创建和保存网页

除了可以在文件面板创建网页，在Dreamweaver中可以通过多种方式新建网页。

1．通过欢迎页

Step1　打开Dreamweaver后，弹出如图8所示的欢迎页，可以单击中间“新建”栏中的选项，分别创建不同类型的文件。

图8欢迎页

Step2　单击中间列，第一项：

“HTML”项，将会创建一个默认名为“Untitled-1.html”的空白网页文档，如图9所示。

图9空白的网页文档

Step3　如果中间列下方的单击“更多”项，将打开如图10所示的“新建文档”对话框。

在“新建文档”对话框中，分为4栏，在左侧第1栏中可以选择创建的文档类别。

如果选择“空白页”，则可以选择“页面类型”栏中的“HTML”或其他页面类型。

在“布局”栏中，可以选择“无”或者Dreamweaver内置的一些布局类型。

图10“新建文档”对话框

在对话框右侧的第4栏中，可以预览页面；可以选择文档的“文档类型”，如“XHTML1.0Transitional”；在“附加CSS文件”列表框中，可以把外部的CSS文件附加到新建的网页中。

2．通过“文件”菜单

通过选择“文件”菜单中的“新建”命令，可以打开“新建文档”对话框，新建各种类型的文档。

同时，通过快捷键“Ctrl+N”也可以完成新建文件的操作。

通过这些方式创建网页后，需要通过“文件”|“保存”或通过快捷键“Ctrl+S”来保存网页。

（4）．【任务】编辑网页并预览

下面以“中国传媒大学_原文.docx”为素材，来编辑对应的网页。

Step1.在Dreamweaver中创建布局类型为“无”的网页文件，通过“文件”|“保存”或“Ctrl+S”保存网页为“cuc.html”。

Step2.把素材中的文字复制到网页中。

在Word中选择所有的文字并复制后，粘贴到Dreamweaver的设计视图。

Step3.设置网页标题

网页文件的标题是显示在浏览器标题栏或选项卡中的内容，通过Dreamweaver可以用多种方式对网页标题进行设置。

在文档工具栏中，在“标题”文本框中直接输入网页标题，如图11所示。

图11通过文档工具栏设置网页标题

另外一种方式是单击“属性”面板中的“页面属性”按钮，或者选择菜单命令“修改|页面属性”，打开“页面属性”对话框。

在“标题/编码”栏的“标题”框中，设置网页标题，如图2.12所示。

图12通过“页面属性”对话框设置网页标题

Step4.设置网页文档中的标题

通过标题元素，可以为网页文档定义良好的文档结构。

标题元素是通过

…

等标签进行定义的。

浏览器会自动地在标题的前、后添加空行，并且标题的文字显示为加粗的效果。

在Dreamweaver中，要把普通段落文字设置为标题，可以通过“属性”面板来完成。

把光标定位在欲设置为标题1的段落文字中，如图13所示。

图13定位光标

将光标放在“中国传媒大学”段落中，然后选择“属性”面板的“格式”下拉列表中的“标题1”可以把光标所在的段落设置为标题1元素。

图14通过“属性”面板设置文章中的标题

图15设置“中国传媒大学”为标题1的段落

Step5.设置文章中的无序列表

当网页中需要对多个并列的内容进行展示时，可以通过无序列表（UnorderedList）来完成。

无序列表的每个列表项的前面是项目符号。

选择网页中“学校的教学单位包括”下面的6个段落，如图16所示。

图16选择段落文字

在“属性”面板中单击“项目列表”

按钮，将段落文字设置为无序列表，效果如图17所示。

图17无序列表

Step6.设置文章中的有序列表

当网页中的某些内容存在排序关系时，可以通过有序列表（OrderedList）来完成。

有序列表的每个列表项的前面是编号。

选择网页中“导航链接”下面的3个段落，如图18所示。

图18选择段落文字

在“属性”面板中单击“项目列表”

按钮，将段落文字设置为有序列表，效果如图19所示。

图19有序列表

Step7.设置超链接

下面把导航链接中的文件设置为指向目标网页的超链接，其中的三个超链接分别是：

超链接文字

超链接地址

图书馆

校内邮箱

网络服务

设置超链接可以有多种方式，例如选择超链接文字后，在“属性”面板的“链接”栏中输入相应的网址，如图20所示。

图20通过“属性”面板设置超链接

也可以在选择超链接文字后，通过点击“插入”面板中的“超级链接”打开“超级链接”对话框，在其中设置链接目标，如图21所示。

图21“超级链接”对话框

用户点击超链接后，在默认情况下浏览器会使用当前窗口打开目标网页。

如果希望在新的浏览器窗口中打开目标网页，可以通过设置超链接元素的“目标”属性为“_blank”来完成。

在“属性”面板和“超级链接”对话框都可以进行这一属性的设置。

Step8.预览网页

在Dreamweaver中的设计视图中显示的网页有时和网页真正显示在浏览器中的效果是有差异的，因此在Dreamweaver中编辑完网页后，需要通过“预览”功能在浏览器中进行查看。

Dreamweaver中提供了快捷键“F12”打开计算机默认的浏览器进行预览。

可以通过“编辑”|“首选参数”对话框中的“在浏览器中预览”来设置计算机中安装的其它浏览器来进行预览。

四、操作技巧与注意事项

搭建站点，进行构建目录的工作最好在开始完成，目标可以使结构清晰，这样可以节约网站建设者的宝贵时间，不至于出现相关联的文件都分布在众多相似名称的文件夹中的情况。

建立文件夹的过程实际上就是构思网站结构的过程，很多情况下文件夹代表网站的子栏目，每个子栏目一般有自己对应的文件夹。

无论是改名还是移动，都应该在站点管理器中进行，因为站点管理器有动态更新链接的功能。

确保站点内部不会出现链接错误。