实验用dreamweavermx制作个人网页

《实验用dreamweavermx制作个人网页》由会员分享，可在线阅读，更多相关《实验用dreamweavermx制作个人网页（16页珍藏版）》请在金锄头文库上搜索。

1、实验8 用Dreamweaver MX 制作个人网页一、实验目的（1） 了解理解网站制作的过程，会收集、制作网页素材。（2） 熟悉Dreamweaver MX的基本功能。（3） 掌握网站设计工具Dreamweaver MX的使用。（4） 掌握简单网页制作的步骤与方法。二、实验内容1. Dreamweaver MX的基础知识Dreamweaver MX是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。在制作个人网页之前我们先介绍一下

2、Dreamweaver MX的一些基本知识。从桌面的快捷方式或者开始程序中启动Dreamweaver MX后进入下面的窗口。图7.1 Dreamweaver MX的窗口 菜单栏 为菜单区，和其它的软件一样，该软件所有的操作命令都可以从这一个区内找到,举个例子，选中该区编辑(E)中的参数选择(S). CTRL+U,如图7.2。这里，您可以将Dreamweaver MX设为自己喜欢的样式，一般使用默认就可以，如图7.3。 图7.2 参数选项图 图7.3 字体项的默认值、 插入栏图7.1中， 是插入项目选择工具(插入面板)，在 选中了某个项目， 中会出现相应的插入项目，下面详细介绍，选中常用这一项后

3、可得下图：图7.4 插入栏锚点用于网页中的定位，如网页的上、中、下等；图像占位符是用于动态交换图片的；Fireworks HTML为用Fireworks软件切割出来的图片；交换图像为鼠标移上去时变为另一图片，增强动感；表格数据可以将其它文件的数据转化为表格，插进网页；标签选择器可以插入其它不常用的HTML标签。在 中选中布局一项，共有标准视图和布局视图两种视图，如图7.5所示：图7.5 布局在标准视图下，可以插入表格和在网页制作区画图层。切换到布局视图下，如图7.6：图7.6 布局视图在布局视图下，可以在网页制作区描绘布局视图下的表格和单元格，描绘好之后，再切换到标准视图后，可以转化为表格。这

4、个可以用来排版网页。在 中选中文本一项，可以对文本进行格式化，如图7.7：图7.7 文本图A可以对字体进行全面的格式；B可以将字体变为粗体；I为斜体；S为加强字体。在 中选择表单，可以插入各种按钮，如图8：图7.8 表单图A 为表单；B 为文本框；C 为隐藏域；D 为文本区域；E 为多选框；F 为单选框；G 为单选按钮组；H 为列表/菜单；I 为跳菜单；J 为图像域；K 为文本字段；L 为按钮；M 为标签；N 为字段集。在 中选中模版可以使用模版制作网页或自己创建模版，做起网页更加方便快捷。在 中选中字符可以插入一些特殊的字符，如： ,其中BR为换行符（快捷键为CTRLENTER）。在 中选中

5、媒体，可以插入FLASH，LASH按扭，FLASH文本，Applet等插件。在 中选中文本头，将出现下面的画面：图7.9 文件头图 文档工具栏 文档工具栏中包含按钮，这些按钮使您可以在文档的不同视图间快速切换：“代码”视图、“设计”视图、同时显示“代码”和“设计”视图的拆分视图。 工具栏中还包含一些与查看文档、在本地和远程站点间传输文档有关的常用命令和选项。图7.10 文档工具栏以下对选项进行说明：显示代码视图仅在“文档”窗口中显示“代码”视图。显示代码视图和设计视图在“文档”窗口的一部分中显示“代码”视图，而在另一部分中显示“设计”视图。当选择了这种组合视图时，“视图选项”菜单中的“在顶部查

6、看设计视图”选项变为可用。请使用该选项指定在“文档”窗口的顶部显示哪种视图。显示设计视图仅在“文档”窗口中显示“设计”视图。标题允许您为文档输入一个标题，它将显示在浏览器的标题栏中。如果文档已经有了一个标题，则该标题将显示在该区域中。没有浏览器/检查错误使您可以检查跨浏览器兼容性。文件管理显示“文件管理”弹出菜单。在浏览器中预览/调试在浏览器中预览或调试文档。从弹出菜单中选择一个浏览器。刷新设计视图当您在“代码”视图中进行更改后刷新文档的“设计”视图。视图选项允许您为“代码”视图和“设计”视图设置选项。 “文档”窗口 显示您当前创建和编辑的文档。 “属性”窗口“属性”窗口（下图显示的是字体的属

7、性）： 用于查看和更改所选对象或文本的各种属性。图7.11 属性工具栏 “面板组”窗口“面板组”是分组在某个标题下面的相关面板的集合。若要展开一个面板组，请单击组名称左侧的展开箭头。2 个人网页的制作过程为了更好地利用站点窗口对站点文件进行管理，也可以尽可能的减少一些错误的出现，如路径出错，链接出错（特别是新手），正式开始制作网页之前，最好先定义一个新网站，将网页中的所有文件都放在建立好的站点文件夹中。（1）定义站点在面板区，展开文件一项，选中站点，然后再选编辑站点如图7.12，则弹出图7.13对话框。 图7.12 站点定义 图7.13 编辑站点点击图7.13的“新建”，进入图7.14所示的对

8、话框。在站点名称中输入您的站点名，注意：名字必须用字母表示。点击“在本地根文件夹”右侧的文件夹，选择预先设计好的文件夹，如：E:gerenwangzhan，作为网站所有内容的存放地点如图7.14。图7.14 新建站点在图7.14中输入完成后，点击“确认”，即初步定义了您的个人网站。（2）新建页面在图12中点击“文件”-“新建”，得到图7.15的对话框。 图7.15 新建页面图 图7.16 页面编辑窗口选中图7.15的“HTML”,点击“创建”，即可进入图16页面内容的编辑窗口。点击菜单栏中的“修改”-“页面属性”，在“标题”中输入您的网页的名字，如：wodewangye，见图7.17。点击“确

9、定”即可进入编辑页面窗口如图7.18。 图7.17 页面属性窗口 图7.18 页面编辑窗口（3）输入文字在文档窗口可以直接输入文字,并且可以通过下面的属性窗口调整文字的属性，例如：大小，颜色，居中排列，字体等，如图7.19。 图7.19 页面的文字输入 图7.20 编辑字体列表如果在字体选项中，找不到想要的字体，可以通过选择图7.19中的“编辑字体列表”，添加新的字体，见图7.20。例如：从“可用字体”中，选择“华文新魏”，在点击向左的添加键，即可以将“华文新魏”添加到“字体列表”中，这时您可以使用“华文新魏”这种字体了。（4）添加图像 图7.21 添加层 图7.22 选择图像源选择菜单中的“

10、插入”-“层”，点击即可在网页中插入一个新层。拖动层的到想要放置该层的位置，点击“插入”栏中的“常用”，然后选中下面的图像标签，进入图7.22的 “选择图像源”对话框，在对话框中选择要添加的图像，如“实验素材Dreamweaver MX”下的20047418324680.jpg。注意：在选择图像前，我们应该将要使用的图像复制到“gerenwangzhan”文件夹中去。（注 本节所使用的实验素材存在“实验素材Dreamweaver MX”下） 图7.23 添加1个图像 图7.24 添加2个图像添加一个图像后得到如图7.23。用同样的方法，在网页的右侧再添加另一个图像，如图7.24。（5）添加文本

11、添加图像后，继续添加2个层，第一个层用来描述“个人简历”，第二个层用来描述“求学经历”，如图7.25。当然您也可以根据自己的需要设定为其它的内容，字体格式可以在下方的属性栏设定。图7.25 添加文本（6）添加个人照片在“个人简历”和“求学经历”的右侧添加一个新层，用来存放您的照片，如图7.26。图7.26 添加照片 （7）添加FLASH图像为了增加网页美观性，在文本内容间可加入一些点缀的flash图像。同样通过层来实现。将准备好的flash图片gif012.gif，存放在我们的网站文件夹，E:gerenwangzhan下。然后通过添加图片的方式添加到网页中，得结果如图7.27。图7.28 添加

12、FLASH图像在网页上继续以添加文本的方式将“计算机水平”，“实习与工作经历”，“就业意向”，“个人爱好”，“自我评价”，“奖项证书”几个栏目添加到网页中。并在它们中间添加2个相同的flash动画作装饰。（8）周边装饰在网页的底边插入多个层，将这些层平行排列，在每个层中添加一个flash图像200542413384984478.gif，得结果如图7.29。图7.29 周边装饰再增加一个层，使该层能够覆盖所有200542413384984478.gif所在的层，将该层用表示背景色的图像20041114131452134.jpg填充。（9）竖边框的设置在网页中添加2个层，分别位于两侧，每个层插入名

13、为2005530131656420.gif的图像，这样我们就可以得到图7.30所示的网页。图7.30 加入边框后的网页（10）添加背景音乐图7.31 添加背景音乐步骤：选择“插入”-“媒体”-“插件”，即可弹出下图“选择文件”对话框。在该对话框下选择要添加的背景音乐，如budebuai.mp3。这样就可以为已经制作好的网页添加上动听的背景音乐，当您的网页被打开的时候，该歌曲即被播放。图7.32 选择文件（11）邮件链接图7.33 邮件链接将鼠标移至将要插入邮件链接的位置，选择“插入”-“电子邮件链接”，即可弹出图34的窗口，在该对话框的“文本”处输入您想要建立邮件链接的文字；再e-mail处输

14、入建立链接的邮件地址，然后点击“确定”。图34 电子邮件链接窗口建立链接之后，被链接的文字将变成蓝色，如下图7.35的*.图7.35 建立好的电子邮件链接3. 主题网页的设计设定某一个主题的网页，如图7.36“wodezuopin”主题网页。图7.36 我的作品主题网页（1）添加3层，在每个层中分别插入gif002.gif，pianime1.gif和gif002.gif，作为顶部的装饰图案。（2）在文档栏输入文本内容，如网页的题目，作者，时间，地址等。（3）添加新层，然后点击“插入”-“交互式图像”-“鼠标经过图像”，得到图7.38。在图中选择原始图像和鼠标经过图像，然后点击“确定”。注意图像必须是保存在网站文件夹中，且两个图像大小必须相等。此时鼠标经图像过时将自动换成另一幅图像。图7.37 交互式图像的设计图7. 38 插入鼠标经过图像(4) 用同样的方法添加几幅图到网页中，如：8_FHtL6ktVyKF5.jpg，chxs004.jpg.（5）用制作第一个网页方法设定边框。（6）网页背景图案的设置。选择“修改”-“页面属性”，即可得到如下图7.39的“页面属性”对话框，在该对话框的“背景图像”处设定页面的背景图像。 图7.39 页面背景图案设置