实验14 用Dreamweaver设计和发布站点.docx
- 文档编号:12395453
- 上传时间:2023-04-18
- 格式:DOCX
- 页数:15
- 大小:1.14MB
实验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
操作与练习操作步骤(略)
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 实验14 用Dreamweaver设计和发布站点 实验 14 Dreamweaver 设计 发布 站点
![提示](https://static.bdocx.com/images/bang_tan.gif)