实验一 基础网页制作.doc

实验一 基础网页制作一、 实验目的：通过上机操作，使学习者熟悉Dreamweaver工作界面、对工作环境进行设置；掌握如何使用Dreamweaver创建、保存或打开一个网页文档；了解使用Dreamweaver可以创建和打开哪些文档；掌握如何创建本地站点；掌握如何使用历史面板撤消或重复操作。二、 实验内容：1.熟悉Dreamweaver工作界面并进行首选参数设置；2.创建本地站点3.创建网页文档；4.设置头文件标签；5.使用历史记录面板。6.将实验一的唐诗文件整理，放入站点内。三、 实验要求：1.熟悉Dreamweaver工作界面并进行首选参数设置认识Dreamweaver界面的组成、各个菜单项包含哪些命令，并根据个人的喜好和需要进行首选参数设置。2.创建本地站点完成站点的创建、修改、删除等操作，并理解站点在网站设计中的重要性。3.创建网页文档采用两种方式：直接向网页中添加文本；将word文档导入网页中，并对文本进行属性设置。3.设置头文件标签认识各项头文件标签的作用，向头文件中添加说明信息，并在“代码”面板中查看说明信息。5.使用历史记录面板使用历史面板重复或者撤消操作。四、实验学时：4学时五、实验步骤：练习一：熟悉Dreamweaver工作界面并进行首选参数设置1.启动Dreamweaver（1）选择【开始】|【程序】|Macromedia |Dreamweaver命令，打开Dreamweaver的初始工作界面（如图1.1），第一次启动Dreamweaver需要选择工作界面。其中【代码编辑者】是纯代码编辑界面，适合对网页编程有很高水平的设计者。选择【设计者】是本实验后面所介绍的使用界面。（2）选择【设计者】工作界面，单击【确定】按钮，将进入图1所示的工作界面。图1.1 Dreamweaver欢迎界面2熟悉Dreamweaver的工作界面启动Dreamweaver，一个包含空白文档的Dreamweaver的工作界面就呈现在你的面前了。Dreamweaver工作界面各部分组成如图1.2所示。面板组标题栏常用工具栏属性面板工作区菜单栏图1.2 Dreamweaver的工作界面注：各个工作区的作用参考教材P8 “1.4Dreamweaver的工作区”这一节。3.设置首选参数选择【编辑】|【首选参数】，打开首选参数对话框，如图1.3所示图1.3 首选参数设置此处设置历史步骤最多次数设多点。练习二：创建本地站点要制作一个能够被大家浏览的网站，首先需要在本地磁盘上制作这个网站，然后把这个网站传到互联网的web服务器上。放置在本地磁盘上的网站被称为本地站点，位于互联网web服务器里的网站被称为远程站点。Dreamweaver提供了对本地站点和远程站点强大的管理功能。1.规划站点结构网站是多个网页的集合，其包括一个首页和若干个分页，这种集合不是简单的集合。为了达到最佳效果，在创建任何 Web 站点页面之前，要对站点的结构进行设计和规划。决定要创建多少页，每页上显示什么内容，页面布局的外观以及各页是如何互相连接起来的。我们可以通过把文件分门别类的放置在各自的文件夹里，使网站的结构清晰明了，便于管理和查找。2.创建站点在Dreamweaver中可以有效的建立并管理多个站点。搭建站点可以有两种方法，一是利用向导完成，二是利用高级设定来完成（自己完成高级设定步骤）。在搭建站点前，我们先在自己的电脑硬盘上建一个以英文或数字命名的空文件夹。（1）选择菜单栏【站点】|【管理站点】，出现“管理站点”对话框。点击“新建”按钮，选择弹出菜单中的“站点”项。,如图1.4所示。图1.4 管理站点（2）在打开的窗口上方有“基本”和“高级”两个标签，可以在站点向导和高级设置之间切换。可以先选择”高级”标签，如下图所示：填写相应内容即可。也可以选择“基本”标签，如图1.5所示。图1.5（3）在文本框中，输入一个站点名字以在 Dreamweaver中标识该站点。这个名字可以是任何你需要的名字。单击“下一步”。出现向导的下一个界面，询问是否要使用服务器技术，如图1.6所示。我们现在建立的是一个静态页面，所以选择 “否”。图1.6（4）点下一步，在文档框设置本地站点文件夹的地址。如图1.6所示。图1.7（5）点下一步，进入站点定义，我们将在站点建设完成后在与FTP链接，这里选择“无”，如图1.8所示。图1.8（6）单击“完成”按钮，结束“站点定义“对话框的设置，如图1.9所示。图1.9（7）单击“完成”按钮， “管理站点”窗口中会显示刚才建立的站点名。如图1.10所示。图1.10（5）到此，我们完成了站点的创建。文件面板显示出刚才建立的站点如图1.11所示。图1.113.搭建站点结构站点是文件与文件夹的集合，下面我们根据前面对xmweb网站的设计，来新建xmweb站点要设置的文件夹和文件。新建文件夹，在文件面板的站点根目录下单击鼠标右键，从弹出菜单中选择“新建文件夹”项（如图1.12所示），然后给文件夹命名。这里我们创建新建8个文件夹，分别命名为：img、med、swf、txt、css、js、moan和fy。图1.12创建页面，在文件面板的站点跟目录下单击鼠标右键，从弹出菜单中选择“新建文件”项，然后给文件命名。首先要添加首页，我们把首页命名为index.html，再分别新建01.html、02.html、03.html、03.html和05.html。如图1.13所示。图1.133.编辑和删除站点选择菜单【站点】|【管理站点】，弹出图1.14所示的窗口：图1.14单击“编辑”选项，弹出“站点定义为”窗口，此时可以编辑站点信息。如图1.15所示。图1.15若选择“删除”选项，则弹出如图1.16提示窗口：图1.16单击“是”，删除该站点，这个动作无法恢复，所以操作的时候要谨慎。练习三：创建网页文档（1）启动Dreamweaver软件，选择【文件】|【新建】命令打开【新建文档】对话框，如图1.17所示，从【类别】列表中选择【基本页】，从右侧的列表中选择HTML选项，然后单击【创建】按钮建一个空白文档。图1.17 【新建文档】对话框（2）可以直接在网页工作区输入文本，还可以导入已有文档。选择【文件】|【导入】命令可以看到，Dreamweaver支持导入多种类型的文档（见图1.18）。图1.18 【导入】子菜单在这里我们选择【Word文档】，弹出【导入Word文档】对话框（如图1.19）。图1.19 【导入Word文档】对话框（3）在【导入Word文档】对话框中选择要导入的Word文件，单击【打开】按钮，将在网页文档中显示该Word文档的内容，如图1.20所示。图1.20 导入文档后效果练习四：设置头文件标签（1）启动Dreamweaver，创建空白文档。选择【插入记录】工具栏中的HTML选项卡，切换到头文件插入栏。（2）单击【文件头】按钮，在弹出菜单中选择【说明】按钮，打开【说明】对话框，如图1.21所示。图1.21 【说明】对话框（3）将文档切换到【代码】视图，查看说明信息，如图1.22所示。图1.22 【代码】视图中的说明信息（4）自己试着加入meta关键字，关键字专门为搜索引擎而提供，不同的关键字之间用逗号隔开。练习五：使用历史记录面板在【历史记录】面板中，记录了用户在【文档】窗口中操作的历史，使用【历史记录】可以撤消或重复操作步骤。（1）选择【窗口】|【历史记录】命令，打开【历史记录】面板，如图1.23所示。图1.23 【历史记录】面板（2）如果想要撤消对【文档】窗口的操作，拖动【历史记录】面板中的滑块，选中要撤消的操作，被选中的操作呈灰色。如图1.24所示。这是【文档】窗口回到撤消操作后的状态。图1.24选中要撤消的操作（显示为灰色）（3）如果要恢复操作则可以重新拖动滑块到相应位置，这样就可以恢复被撤消的动作。如果撤消操作后进行了新的操作，则原来被撤消的操作就不能再被恢复了。（4）如果要清空记录，单击【历史记录】面板右上方的按钮，或者在【历史记录】面板中右击，在弹出的快捷菜单中选择【清空历史记录】命令，如图1.25