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

1、实验6.1 创建站点并掌握编辑网页的基本操作一、实验目的1.熟悉Dreamweaver 的工作环境2.掌握使用Dreamweaver创建站点的基本步骤3.掌握网页编辑的基本方法二、实验要求1.掌握使用Dreamweaver创建本地站点的基本步骤。2.掌握使用Dreamweaver 编辑网页的基本方法，包括对网页标题、网页文档中的标题、无序列表、有序列表、超链接等设置。三、实验内容和步骤（1）【任务】熟悉Dreamweaver CS6的工作环境启动Dreamweaver CS6，可以看到如图1所示的Dreamweaver CS6的操作界面，它包括如下几个部分：标题栏、菜单栏、对象面板、标签选择栏

2、、页面区域、属性检查器、面板组等。图 1 Dreamweaver CS6软件的界面1. “文档”工具栏包含按钮和弹出式菜单，它们提供各种“文档”窗口视图（如“设计”视图和“代码”视图）、各种查看选项和一些常用操作（如在浏览器中预览）。2. “属性”面板用于查看和更改所选对象或文本的各种属性。每种对象都具有不同的属性。3. “插入”面板包含用于将各种类型的“对象”（如图像、表格和水平线）插入到文档中的按钮。每个对象都是一段 HTML 代码，允许在插入它时设置不同的属性。例如，可以通过单击“插入”栏中的“表格”按钮插入一个表格。还可以不使用“插入”栏，而使用“插入”菜单插入对象。通过拖动“插入”栏

3、到Dreamweaver菜单的下部，并在出现一条蓝色的提示线时松手，可以把“插入”栏的形式变换为“插入”选项卡。4. “文档”窗口显示当前创建和编辑的文档。在Dreamweaver CS6中可以通过多种视图方式查看网页文件，这个特点和Word的多视图查看类似。Dreamweaver CS6有4种视图：代码、设计、拆分、实时视图。当关注文档的源代码或者需要编辑源代码时，可以使用代码视图。要实现类似Word的所见即所得功能，通过可视化的方式编辑网页，可以使用设计视图。如果要兼顾以上两点，可以选择拆分视图。在实时视图下，看到的页面与用浏览器查看的效果一样，这种视图是不能编辑文档的。5. 标签选择器用

4、于选择准确地选择网页上的元素。6. CSS样式面板CSS样式面板可以用来进行新建CSS规则、编辑CSS规则、删除CSS规则以及为网页附加外部样式表等操作。7. “文件”面板可以管理文件和文件夹，无论它们是 Dreamweaver 站点的一部分还是在远程服务器上。“文件”面板可以访问本地磁盘上的全部文件，非常类似于 Windows 资源管理器。 Dreamweaver还提供了其他面板窗口，例如“多屏预览”面板、“标签检查器”面板、“历史记录”面板灯。若要打开 Dreamweaver 各面板，请使用“窗口”菜单。（2）【任务】使用Dreamweaver建立站点站点可以被看作一系列文档的组合，这些文

5、档通过各种链接建立逻辑关联。为了方便管理网站文件，在使用Dreamweaver CS6设计网站文件之前，必须先要建立站点，以充分利用Dreamweaver CS6的功能。一旦建立了站点，网站的后期维护也会相对容易。当管理员修改某些站点文件时，Dreamweaver CS6会自动检索与被修改文件相关的文件，并提示管理员更新这些文件。Step1. 在C盘创建一个以自己的学号命名的文件夹。Step2. 选择“站点新建站点”命令，打开“站点设置对象未命名站点”对话框。图 2 站点设置对话框或者选择“站点管理站点”命令，打开“管理站点”对话框，在对话框中单击“新建站点”按钮。图 3 管理站点对话框Ste

6、p3. 在对话框中，通过“站点”标签设置站点名称和站点文件夹。站点名称设置为“我的网站”，“本地站点文件夹”通过点击 设置为C盘自己的学号对应文件夹。或者也可以直接输入。点击“保存”。 Step4. 在Dreamweaver的“文件”面板中，可以看到一个空白的站点。图 4 “文件”面板中的空白站点Step5. 在站点上单击鼠标右键，会出现右键菜单，从中进行新建文件、新建文件夹、复制、粘贴等操作。通过“新建文件”，创建一个空白的站点主页文件“index.html”图 5 创建index.htmlStep6. 从站点的右键菜单选择“新建文件夹”，建立images、css、js文件夹，分别用来存放整

7、个站点的图像文件、CSS样式表文件、JavaScript文件。图 6 创建站点通用文件夹Step7. 如果这时通过“资源管理器”观察C盘的站点文件夹，可以看到一致的文件和文件夹。Step8. 如果通过“资源管理器”来在站点文件夹下创建文件，那么在Dreamweaver中需要等待几秒钟，或者点击“文件”面板的刷新按钮 来同步显示。图 7 “文件”面板中的刷新按钮（3）【任务】使用Dreamweaver创建和保存网页除了可以在文件面板创建网页，在Dreamweaver中可以通过多种方式新建网页。1通过欢迎页Step1打开Dreamweaver后，弹出如图 8所示的欢迎页，可以单击中间“新建”栏中的

8、选项，分别创建不同类型的文件。图 8 欢迎页Step2单击“HTML”项，将会创建一个默认名为“Untitled-1.html”的空白网页文档，如图 9所示。图 9 空白的网页文档Step3单击“更多”项，将打开如图 10所示的“新建文档”对话框。在“新建文档”对话框中，分为4栏，在左侧第1栏中可以选择创建的文档类别。如果选择“空白页”，则可以选择“页面类型”栏中的“HTML”或其他页面类型。在“布局”栏中，可以选择“无”或者Dreamweaver内置的一些布局类型。图 10 “新建文档”对话框在对话框右侧的第4栏中，可以预览页面；可以选择文档的“文档类型”，如“XHTML 1.0 Trans

9、itional”；在“附加CSS文件”列表框中，可以把外部的CSS文件附加到新建的网页中。2通过“文件”菜单通过选择“文件”菜单中的“新建”命令，可以打开“新建文档”对话框，新建各种类型的文档。同时，通过快捷键“Ctrl+N”也可以完成新建文件的操作。通过这些方式创建网页后，需要通过“文件”|“保存”或通过快捷键“Ctrl+S”来保存网页。（4）【任务】编辑基本网页下面以“实验素材/练习1中国传媒大学_原文.docx”为素材，来编辑对应的网页。完后的网页在“实验结果/练习1”文件夹下。Step1. 在Dreamweaver 中创建布局类型为“无”的网页文件，通过“文件”|“保存”或“Ctrl+

10、S”保存网页为“cuc.html”。Step2. 把素材中的文字复制到网页中。在Word中选择所有的文字并复制后，粘贴到Dreamweaver 的设计视图。Step3. 设置网页标题网页文件的标题是显示在浏览器标题栏中的内容，通过Dreamweaver可以用多种方式对网页标题进行设置。在文档工具栏中，在“标题”文本框中直接输入网页标题，如图 11所示。图 11 通过文档工具栏设置网页标题另外一种方式是单击“属性”面板中的“页面属性”按钮，或者选择菜单命令“修改|页面属性”，打开“页面属性”对话框。在“标题/编码”栏的“标题”框中，设置网页标题，如图2.12所示。图 12通过“页面属性”对话框设

11、置网页标题Step4. 设置网页文档中的标题通过标题元素，可以为网页文档定义良好的文档结构。标题元素是通过等标签进行定义的。浏览器会自动地在标题的前、后添加空行，并且标题的文字显示为加粗的效果。在Dreamweaver中，要把普通段落文字设置为标题，可以通过 “属性”面板来完成。把光标定位在欲设置为标题1的段落文字中，如图 13所示。图 13 定位光标然后通过“属性”面板的“格式”下拉列表中的“标题1”可以把光标所在的段落设置为标题1元素。图 14 通过“属性”面板设置文章中的标题图 15 设置标题1的段落按照同样的方式，把文章中的“简介”、“教学单位”、“导航链接”所在的段落设置为标题2元素

12、。图 16设置标题2的段落Step5. 设置文章中的无序列表当网页中需要对多个并列的内容进行展示时，可以通过无序列表（Unordered List）来完成。无序列表的每个列表项的前面是项目符号。选择网页中“教学单位”下面的6个段落，如图 17所示。图 17选择段落文字在“属性”面板中单击“项目列表”按钮，将段落文字设置为无序列表，效果如图 18所示。图 18 无序列表Step6. 设置文章中的有序列表当网页中的某些内容存在排序关系时，可以通过有序列表（Ordered List）来完成。有序列表的每个列表项的前面是编号。选择网页中“导航链接”下面的3个段落，如图 19所示。图 19选择段落文字在

13、“属性”面板中单击“项目列表”按钮，将段落文字设置为有序列表，效果如图 20所示。图 20 有序列表Step7. 设置超链接下面把导航链接中的文件设置为指向目标网页的超链接，其中的三个超链接分别是：超链接文字超链接地址校内邮箱 网络服务 图书馆 设置超链接可以有多种方式，例如选择超链接文字后，在“属性”面板的“链接”栏中输入相应的网址，如图 21所示。图 21 通过“属性”面板设置超链接也可以在选择超链接文字后，通过点击“插入”面板中的“超级链接”打开“超级链接”对话框，在其中设置链接目标，如图 22所示。图 22 “超级链接”对话框用户点击超链接后，在默认情况下浏览器会使用当前窗口打开目标网

14、页。如果希望在新的浏览器窗口中打开目标网页，可以通过设置超链接元素的“目标”属性为“_blank”来完成。在“属性”面板和“超级链接”对话框都可以进行这一属性的设置。Step8. 预览网页在Dreamweaver 中的设计视图中显示的网页有时和网页真正显示在浏览器中的效果是有差异的，因此在Dreamweaver 中编辑完网页后，需要通过“预览”功能在浏览器中进行查看。Dreamweaver 中提供了快捷键“F12”来打开浏览器来打开计算机默认的浏览器进行预览。可以通过“编辑”|“首选参数”对话框中的“在浏览器中预览”来设置计算机中安装的其它浏览器来进行预览。图 23 首选参数对话框（5）【任务

15、】CSS的基本练习以任务4完成的网页为基础，通过CSS样式来设置网页中不同元素的样式。Step 1 设置标题1的样式在“CSS样式”面板中点击“新建CSS规则”按钮。图 24 CSS样式面板在“新建CSS规则”对话框中设置选择器类型为“标签”，选择器名称为“h1”,点击“确定”。在打开的“h1的CSS规则定义”对话框中可以设置如字体、字号、斜体等样式。在font-family的下拉列表中列出了一些默认的英文字体的组合。如果需要设置中文字体，需要选择下拉列表中的最后一项“管理字体”，如图 25所示。图 25 管理字体在“管理字体”对话框的“自定义字体堆栈”标签中，选择“微软雅黑”、“黑体”、“宋

16、体”的字体加入到左侧。如果浏览器所在的计算机中安装了微软雅黑，那么段落文字的字体将是微软雅黑，而把“黑体”、“宋体”作为候选字体。设置完成后，回到“h1的CSS规则定义”对话框，即可以从font-family的下拉列表中找到刚才所定义的字体系列并选择，如图 26所示。图 26 自定义的字体系列网页中的元素默认情况下是左对齐的，通过“区块”类别中的“Text-align”为“center”可以设置标题1元素水平居中。图 27 文字的水平居中接着设置h1的Font-size为28px。其它的字体设置，如加粗Font-weight、斜体Font-style请自行练习。Step 2 设置标题2的样式使用与编辑标题1同样的方式，通过标签选择器为标题2设置样式，设置标题2的字体系列也为“微软雅黑”、“黑体”、“宋体”，字体大小为24px。图 28标题2的样式设置Step 3 设置普通段落的样式在“CSS样式”面板中点击“新建CSS规则”按钮，创建选择器类型为“标签”，选择器名称为“p”的样式。图 29 创建段落样式在“p的CSS规则定义”对话框中，设置“text