实验14 用Dreamweaver设计和发布站点.docx

实验14 用Dreamweaver设计和发布站点.docx

《实验14 用Dreamweaver设计和发布站点.docx》由会员分享，可在线阅读，更多相关《实验14 用Dreamweaver设计和发布站点.docx（15页珍藏版）》请在冰点文库上搜索。

实验14用Dreamweaver设计和发布站点

实验14用Dreamweaver设计和发布站点

14.1实验目的

1．掌握AdobeDreamweaverCS6的启动与退出。

2．掌握利用AdobeDreamweaverCS6建立站点的方法。

3．掌握利用AdobeDreamweaverCS6建立发布站点的方法。

4．掌握在AdobeDreamweaverCS6新建网页和保存网页的方法。

5．掌握网页中文本、图像、表格的使用方法。

6．掌握在网页中创建超链接的操作方法。

14.2实验内容

1．AdobeDreamweaverCS6的启动与退出。

2．建立网站，在网站中添加所需要的网页。

3.根据要求设计各网页。

4.发布网站，浏览测试。

14.3实验操作步骤

14.3.1AdobeDreamweaverCS6的启动与退出

1．启动AdobeDreamweaverCS6

要使用AdobeDreamweaverCS6就需先启动AdobeDreamweaverCS6，启动AdobeDreamweaverCS6有以下三种方法：

●方法一：

菜单命令方式启动。

单击“开始”菜单，选择“所有程序”子菜单中的“AdobeDreamweaverCS6”命令，即可启动AdobeDreamweaverCS6。

●方法二：

桌面快捷方式启动。

如果用户要经常使用AdobeDreamweaverCS6，可以在桌面上创建AdobeDreamweaverCS6的快捷方式。

双击MicrosoftOfficeAdobeDreamweaverCS6快捷方式图标，即可启动AdobeDreamweaverCS6。

●方法三：

文档方式启动。

如果用户要编辑修改已经存在的网页，则右击该文件，在弹出快捷菜单的子菜单“打开方式”中单击“AdobeDreamweaverCS6”命令，即可启动AdobeDreamweaverCS6并随之打开该文件。

2．退出AdobeDreamweaverCS6

完成网站或网页设计后，需要退出AdobeDreamweaverCS6，退出AdobeDreamweaverCS6有以下四种方法：

●方法一：

单击“文件”菜单中的“退出”命令。

●方法二：

直接按【Alt+F4】组合键。

●方法三：

单击AdobeDreamweaverCS6窗口右上角的“关闭”按钮。

●方法四：

单击窗口左上角的控制按钮，打开AdobeDreamweaverCS6控制菜单，从中单击“关闭”命令或直接双击窗口左上角的AdobeDreamweaverCS6标记。

14.3.2建立网站并在网站中添加网页

建立网站的基本步骤是先建立网站，在网站中添加需要的网页。

然后再逐步设计主页和其他的页面。

下面以新建由5个网页组成的我的小站“D:

\webs\MySite”来加以说明。

1．新建网站

这里将新建网站“D:

\webs\MySite”，并添加images子文件夹，具体操作步骤如下：

（1）启动AdobeDreamweaverCS6，单击“站点”菜单中的“新建站点”命令，则弹出“站点设置对象”对话框，如图14-1所示。

图14-1“站点设置对象”对话框

（2）在站点名称右边的文本框中填入站点名称“我的小站”，在本地站点文件夹中填入D:

\webs\mySite（也可以指定其他位置）后，单击“保持”按钮，就创建了一个新的站点。

但是此时网站只是一个空的文件夹，如图14-2所示。

（3）在“文件”面板中选择已经定义的网站，右键点击，在弹出的快捷菜单中选择“新建文件夹”命令，在文件夹名称框中输入文件夹名字（如images），则在站点中添加了子文件夹images。

2.在网站中添加网页

这里将在新建的空白网站“D:

\webs\MySite”中添加主页index.html，个人简介页Introduction.html，“我的学校”页MySchool.html，“我的相册”页MyAlbums.html和“我的链接”页MyLinks.html五个空白页面。

具体操作步骤如下：

（1）在“文件”面板中选择已经定义的网站，右键点击，在弹出的快捷菜单中选择“新建文件”命令，输入文件名（如index.html），则在站点中添加了主页index.html。

图14-2创建了一个新的站点后的效果

图14-3“新建文档”对话框

（2）单击“文件”菜单，选择“新建”命令，则弹出“新建文档”对话框，如图14-3所示。

在“新建文档”对话框中选择一种模板类型，在“页面类型”中选择一种语言（静态页选择HTML），选择相应的布局后单击“创建”按钮。

便创建了一个新的网页。

单击“文件”菜单中的“保存”命令，或单击“标准”工具栏中的“保存”按钮，则弹出“另存为”对话框（见图14-4）。

选择保存位置为站点根目录，输入文件名Introduction.html，单击“保存”按钮。

则在站点中添加了个人简介页Introduction.html。

图14-4“另存为”对话框

（3）参照步骤

（2）的方法，可以在站点中新建“我的学校”页MySchool.html;新建“我的相册”页MyAlbums.html;“我的链接”页MyLinks.html。

完成以上步骤，就创建了一个由5个空白页组成的网站“D:

\webs\MySite”，完成效果如图14-5所示。

图14-5完成了网站架构的网站

14.3.3设计网站各页面

详细设计网站中的页面是创建网站的关键步骤，网页布局是否合理，图片文字搭配是否得当直接关系到网站的表现力，其中主页的设计则更加重要的。

下面我们通过详细的介绍主页index.html的设计过程来学习网页设计的基本技能。

其他页面我们给出参考效果图，请你参考效果图，利用网页设计的基本方法来自行设计。

1、设计主页index.html

主页index.html主要包括顶部的网站导航、中部的信息和底部的版权联系信息三部分，效果参见图14-15，具体操作步骤如下：

（1）修改标题：

双击文件面板中的index.html文件，打开主页。

单击属性面板中的“页面属性”按钮，打开“页面属性”对话框，选择分类下的“标题/编码”项，将网页的标题修改为“个人小站首页”，如图14-6所示。

图14-6“页面属性”对话框

（2）添加网站logo图片：

切换好“设计”视图模式，单击“插入”菜单中的“图像”命令，弹出“选择图像源文件”对话框，如图14-7所示。

选择images下的log.png文件后单击确定，弹出的“图像标签辅助功能属性”对话框，如图14-8所示。

在替换文本文本框中填入“log”，详细说明中填入“index.html”后单击“确定”按钮。

则添加了logo图片到主页中。

图14-7“选择图像源文件”对话框

图14-8“图像标签辅助功能属性”对话框

（3）设置图片链接：

单击图片，在属性面板中的链接文本框中填入“index.html”，目标列表框中选择“_self”。

则为log图片添加了默认链接，如图14-9所示。

图14-9图像属性面板

（4）添加导航栏：

在图片右边输入文字“个人简介”，选中文字，单击“插入”菜单中的“超级链接”命令，弹出“超级链接”对话框，如图14-10所示。

在链接文本框中填入“Introduction.html”，目标列表框中选择“_self”，单击“确定”按钮。

采用同样的方法添加其他页面导航按钮。

图14-10“超级链接”对话框

（5）设计首页正文:

单击“插入面板”中的常用组中的“水平线”命令插入水平线按【Enter】键后，输入以下文字：

我的小站首页

我要一个奇迹

我的每一天都是奇迹的发光源

我要创造一个辉煌的明天！

将“我的小站首页”字体设置为宋体，大小为6。

将其他文字字体字体设置为隶书，大小为5。

（6）插入心情图片：

输入“我的心情”，单击“插入”菜单“图像对象”子菜单中的“鼠标经过图像”命令，则弹出“插入鼠标经过图像”对话框，如图14-11所示。

在图像名称文本框中填入“mood”；单击原始图像右边的“浏览”按钮，在弹出的“原始图像”对话框中选择images文件夹下的mood01.png图片，如图14-12所示；单击鼠标经过图像右边的“浏览”按钮，在弹出的“鼠标经过图像”对话框中选择images文件夹下的mood02.png图片，如图14-13所示；在替换文本文本框中填入“我的心情”，单击确定按钮，则添加了一个鼠标经过会改变的心情图片。

图14-11“插入鼠标经过图像”对话框

图14-12“原始图像”对话框

图14-13“鼠标经过图像”对话框

（7）设计网页底部：

单击“插入面板”中的常用组中的“水平线”命令插入水平线按【Enter】键后，输入以下文字：

Copyright©2013嘉兴学院

我的邮件：

chengyanw@

选中“chengyanw@”，单击“插入”菜单中的“电子邮件链接”命令，弹出“电子邮件链接”对话框，如图14-14所示，单击“确定”按钮。

图14-14“电子邮件链接”对话框

现在主页设计完成，设计后的效果如图14-15所示。

图14-15网站主页设计效果图

2、设计其他网页

设计其他网页包括设计个人简介页Introduction.html，“我的学校”页MySchool.html，“我的相册”页MyAlbums.html和“我的链接”页MyLinks.html。

这里我们只给出了各个网页的参考效果图，你可以根据具体情况自行设计或修改。

具体操作步骤如下：

（1）打开Introduction.html，将网页的标题修改为“个人简介”，参照图14-16添加一个表格，根据自己的信息自行设计页面的内容。

（2）打开MySchool.html，将网页的标题修改为“我的学校”，参照图14-17自行设计页面的内容。

（3）打开MyAlbums.html，将网页的标题修改为“我的相册”。

参考网络上的电子相册自行设计页面内容。

（4）打开MyLinks.html，将网页的标题修改为“我的链接”，参考导航网站（如

（5）保存所有页面，现在就设计完成了一个包括5个页面的个人站点。

图14-16“个人简介”页面参考图图14-17“我的学校”页面参考图

图14-18“站点设置对象”对话框

14.3.4发布站点

网站做好之后要发布到网络上，才能被人从网络上搜索看到。

发布网站一般需要域名空间来存放网站文件，空间服务商会提供FTP服务器地址、用户名和密码。

如何没有域名空间也可以采用“本地/网络”的形式进行测试。

发布“我的小站”的操作步骤如下：

1.双击“文件”属性面板中的“我的小站”，打开“站点设置对象”对话框，如图14-18所示。

选择“服务器”，单击“添加新服务器”按钮，弹出“服务器设置”对话框，如图14-19所示。

如果有FTP服务器，输入FTP服务器地址、用户名和密码，单击“确定”按钮，添加远程服务器。

（也可以选择“本地/网络”的连接方法，在本地测试）

2.单击“文件”属性面板中“向远程服务器上传文件”按钮，如图14-20所示，就可以将网站发布到服务器上。

图14-19“服务器设置”对话框图14-20发布网站操作

14.3.5操作与练习

本操作练习要求设计一个个人求职站点，具体要求如下：

1.包括主页index.html、我的简历jianli.html、联系我lianxi.html、求职信qiuzhi.html四个页面。

2.“主页”设计一张图片，在图片上添加到其他各页面的超级链接，完成后的效果如图14-21所示。

3.“我的简历”页面完成后的效果如图14-22所示，具体内容可以根据自己情况进行修改。

4.“联系我”页面参考图14-23所示效果进行设计，要求包含一个邮件链接。

5.“求职信”页面参考图14-24所示效果进行设计，注意求职信的格式设计。

图14-21主页index.html图14-22我的简历jianli.html

图14-23联系我lianxi.html图14-24求职信qiuzhi.html

操作与练习操作步骤（略）