dreamweaver cs3实验

《dreamweaver cs3实验》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、DreamweaverCS3实验目标：1.熟练掌握Dreamweaver的基本操作；2.掌握使用Dreamweaver创建和管理本地站点；3.掌握在网页中插入文本、图像、超级链接和图像热点的基本操作；4.掌握使用CSS样式美化网页；5.掌握使用表格对网页进行布局。任务：1.制作简单的文本网页；2.使用表格规范网页布局；3.使用CSS美化网页，规范网页总体格式。【任务1】制作简单的文本网页背景说明：在信息技术飞速发展的今天，上网已经成为人们获取信息的一个非常重要的途径。随着Internet技术的不断发展，网页也从以前的单纯文本形式发展到了包含文本、图像、声音、动画以及视频的多媒体形式。制作页

2、面的方法很多：熟练的计算机专业人员可直接使用文本编辑器通过编写HTML语言来制作网页；非专业人员可使用专门的网页制作工具进行页面制作。目前市面上已有的制作网页的工具很多，常见的有FrontPage、Dreamwaver、WebsphereHomepageBuilder等。下面我们采用Dreamwaver这种最常用的工具学习制作简单的文本网页。具体操作：子任务1：创建和管理本地站点。在使用Dreamwaver制作网页前，为了便于管理网页文档，减少代码中的路径或者链接错误，需要先创建一个本地站点。在制作站点的过程中，可以将站点的网页文档保存在站点的目录下，便于浏览和管理。新手在学做网站时，往往

3、不善于管理站点的文件夹，要么把所有文件都放在一个文件夹内，要么文件东一个，西一个，缺乏管理。建议在站点根目录下创建几个文件夹用于存放分类的文件，例如使用img文件夹存放图片文件，config文件夹存放网站的配置文件等。如果网站的内容比较多，还可以针对网站的不同栏目创建不同的文件夹。【步骤1】选择菜单中的【站点】

4、【新建站点】，打开新建站点的向导对话框，首先是如图1-1所示的“未命名站点1的站点定义为”对话框，在“您打算为您的站点起什么名字？”文本框中输入新建站点的名称“MyWebsite”，输入名称时，对话框的名称也变为“MyWebsite的站点定义为”。【步骤2】单击【下一步】，进入向导

5、的下一个对话框，如图1-2所示，询问您是否打算使用服务器技术。如果创建的是静态网站，则选择【否】，如果创建的是动态网站，则选择【是】。图1-1命名新站点图1-2选择是否要使用服务器技术【步骤3】单击【下一步】，进入向导的下一个对话框，如图1-3所示，设置在开发过程中如何使用文件以及文件的存储位置，选中【编辑我的计算机上的本地脚本，完成后再上传到服务器（推荐）】，并选择网站文件存储在计算机中的位置。【步骤4】单击【下一步】，进入向导的下一个对话框，如图1-4所示，设置如何连接到远程服务器，选择【无】，制作完站点后再上传。图1-4选择如何连接到远程服务器图1-3选择如何使用文件以及文件的存储位

6、置【步骤5】单击【下一步】，进入向导的最后一个对话框，如图1-5所示，提示用户站点已经创建完毕，并显示了创建的站点的一些基本信息，单击【完成】结束站点的创建。【步骤6】选择菜单中的【站点】

7、【管理站点】，打开如图1-6所示的管理站点的对话框，其中列出了Dreamweaver中的所有站点，在左边的列表框中选中要管理的站点，然后点击右边的【编辑】、【复制】、【删除】等按钮进入相应的操作，在这个对话框中也同样可以进入新建站点的向导。图1-5新站点创建完毕图1-6管理站点对话框子任务2：新建网页。新建网页文件可以通过两种操作方式来实现，一种是使用菜单中【文件】

8、【新建】命令来实现，一种是通过【文件

9、】面板来实现。另外，在【文件】面板中还可以新建文件夹，以便更好地分类管理站点中的各类文件。【步骤1】选择菜单中的【窗口】

10、【文件】命令，打开【文件】面板。在站点根目录名称上单击右键打开如图1-7所示的快捷菜单，在菜单中选择【新建文件夹】命令。【步骤2】Dreamweaver会自动生成一个名为“untitled”的文件夹，此时文件夹名称处于可编辑的状态，输入文件夹名称“images”，按回车键，文件夹创建完成。后面我们将用这个文件夹存放网站中的图片文件。图1-7选择【新建文件夹】命令图1-8新建文件夹【步骤3】在站点根目录名称上单击右键，打开快捷菜单，在菜单中选择【新建文件】命令，如图1-9

11、所示。【步骤4】Dreamweaver会自动生成一个名为“untitled.html”的文件，此时文件的名称处于可编辑的状态，输入文件名称“index.html”，按回车键，文件创建完成。这是站点的首页面。图1-9选择【新建文件】命令图1-8新建文件【步骤5】在【文件】面板中双击index.html文件，Dreamweaver会在左边的编辑区内打开该网页文件，单击【代码】、【拆分】和【设计】按钮，可以将编辑窗口分别切换到