MX2004网页制作培训教程19个人网站制作实例.ppt

《MX2004网页制作培训教程19个人网站制作实例.ppt》由会员分享，可在线阅读，更多相关《MX2004网页制作培训教程19个人网站制作实例.ppt（70页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004 网页制作设计教程调音调音返回返回南通大学计算机学院 王则林结束结束第十九课 个人网站制作实例课前导读课堂讲解上机实战课后练习向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004 网页制作设计教程调音调音返回返回南通大学计算机学院 王则林结束结束课前导读基础知识重点知识向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004 网页制作设计教程调音调音返回返回南通大学计算机学院 王则林结束结束基础知识 利用布局视图布局个人主页，个人主页的内容策划。向下向下向上向上末页末页首页首

2、页中文版Dreamweaver MX 2004 网页制作设计教程调音调音返回返回南通大学计算机学院 王则林结束结束重点知识 一个完整的个人主页的创建。向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004 网页制作设计教程调音调音返回返回南通大学计算机学院 王则林结束结束课堂讲解制作分析浏览网站向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004 网页制作设计教程调音调音返回返回南通大学计算机学院 王则林结束结束 本课将利用前面所学的知识，构建名为“吾茶吾心”的个人网站，本网站以个人爱好茶文化为主题，将网站的主题定位在比较小的范围内，并且跳出了以往

3、个人网站的千篇一律的老模式。主要介绍了茶文化的几个方面，栏目的划分比较简单，网站的色彩和构图以古典的中国文化为主要构成元素，有着浓烈的个人特色。本网站包括首页、茶艺茶道、茶诗茶文和茶水茶具几部分。在构建本网站时，本章将从建立站点开始以步骤的形式详细介绍在Dreamweaver MX 2004中构建个人网站的方法。向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004 网页制作设计教程调音调音返回返回南通大学计算机学院 王则林结束结束制作分析 在制作本网站前应先在电脑中创建一个名为tea的文件夹，然后在该文件夹中创建image和org文件夹。image文件夹中保存网站中的所

4、有图片；org文件夹中放置图片的源文件，以方便要对某个图片进行修改时直接进行修改即可。向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004 网页制作设计教程调音调音返回返回南通大学计算机学院 王则林结束结束 制作本例时，先新建一个名为tea的站点，并保存在tea文件夹中，然后在站点根目录下新建一个名为index.htm的页面文件。再新建wcwx.htm页面文件，并将导航栏中的各项链接到对应的名称上，由于网站的各个页面并不是十分规整，这里将利用复制页面文件再进行修改的方法，将wcwx.htm页面文件复制成为cscw.htm页面文件，再对其进行修改。向下向下向上向上末页末页

5、首页首页中文版Dreamweaver MX 2004 网页制作设计教程调音调音返回返回南通大学计算机学院 王则林结束结束浏览网站 如图19-1所示是“吾茶吾心”网站的首页，如图19-2所示是“吾茶吾心”页面，如图19-3所示是“茶诗茶文”页面，如图19-4所示是“茶”页面。图19-1向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004 网页制作设计教程调音调音返回返回南通大学计算机学院 王则林结束结束图19-2向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004 网页制作设计教程调音调音返回返回南通大学计算机学院 王则林结束结束图19-3向下向下

6、向上向上末页末页首页首页中文版Dreamweaver MX 2004 网页制作设计教程调音调音返回返回南通大学计算机学院 王则林结束结束图19-4向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004 网页制作设计教程调音调音返回返回南通大学计算机学院 王则林结束结束上机实战创建站点制作index页面制作“吾茶吾心”页面制作“茶诗茶文”页面向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004 网页制作设计教程调音调音返回返回南通大学计算机学院 王则林结束结束 下面讲解这个个人网站的具体制作方法，由于篇幅有限，这里只讲解，首页、“吾茶吾心”和“茶诗茶

7、文”3个页面的制作。读者可根据学习的知识将其他两个页面制作完成。总之，希望读者通过学习制作这个个人网站能巩固前面所学的知识，并能对其灵活运用，就达到目的了。向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004 网页制作设计教程调音调音返回返回南通大学计算机学院 王则林结束结束创建站点 根据上面的制作分析，首先创建“吾茶吾心”个人网站的站点，具体操作如下。（1）打开Dreamweaver MX 2004窗口。（2）选择站点管理站点菜单命令，打开“管理站点”对话框。向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004 网页制作设计教程调音调音返回返回

8、南通大学计算机学院 王则林结束结束 （3）单击 按钮，在弹出的列表中选择“站点”选项，如图19-5所示，打开“站点定义”对话框。图19-5向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004 网页制作设计教程调音调音返回返回南通大学计算机学院 王则林结束结束 （4）在“你打算为你的站点取什么名字？”文本框中输入tea，如图19-6所示。图19-6向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004 网页制作设计教程调音调音返回返回南通大学计算机学院 王则林结束结束 （5）单击 按钮进入“编辑文件，第2部分”对话框。（6）选中 单选项，如图19-7

9、所示。向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004 网页制作设计教程调音调音返回返回南通大学计算机学院 王则林结束结束图19-7向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004 网页制作设计教程调音调音返回返回南通大学计算机学院 王则林结束结束 （7）单击 按钮进入“编辑文件，第3部分”对话框。（8）选中 单选项，在“您将把文件存储在计算机上的什么位置?”文本框中单击文本框右侧的 按钮，选择前面创建的tea文件夹，如图19-8所示。向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004 网页制作设计教程调音调音返

10、回返回南通大学计算机学院 王则林结束结束图19-8向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004 网页制作设计教程调音调音返回返回南通大学计算机学院 王则林结束结束 （9）单击 按钮进入“共享文件”对话框，在“您如何连接到远程服务器?”下拉列表框中选择“无”选项，如图19-9所示。图19-9向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004 网页制作设计教程调音调音返回返回南通大学计算机学院 王则林结束结束 （10）单击 按钮进入“总结”对话框，如图19-10所示。单击 按钮，创建的站点显示在“管理站点”对话框中。图19-10向下向下向上

11、向上末页末页首页首页中文版Dreamweaver MX 2004 网页制作设计教程调音调音返回返回南通大学计算机学院 王则林结束结束 （11）在“管理站点”对话框中，单击 按钮，站点就显示在“文件”面板中，如图19-11所示。图19-11向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004 网页制作设计教程调音调音返回返回南通大学计算机学院 王则林结束结束 （12）在“文件”面板的tea文件夹上单击鼠标右键，从弹出的快捷菜单中选择“新建文件”命令，如图19-12所示。图19-12向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004 网页制作设计教

12、程调音调音返回返回南通大学计算机学院 王则林结束结束 （13）将新建的文档重命名为index.htm，如图19-13所示。图19-13向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004 网页制作设计教程调音调音返回返回南通大学计算机学院 王则林结束结束 （14）用同样的方法，分别新建名为wcwx.htm、cycd.htm、cscw.htm和cscj.htm的文档，如图19-14所示。图19-14向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004 网页制作设计教程调音调音返回返回南通大学计算机学院 王则林结束结束制作index页面 创建好站点及

13、index.htm页面后，就可以制作index.htm页面了，具体操作如下 （1）在站点窗口中双击index.htm打开该页面。（2）在“标题”文本框中输入“吾茶吾心可以清心也”，如图19-15所示。图19-15向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004 网页制作设计教程调音调音返回返回南通大学计算机学院 王则林结束结束 （3）单击“插入”栏中“布局”选项卡中的 按钮，再单击 按钮，此时光标变成“+”，在页面中按住鼠标不放拖动绘制出一个布局表格，如图19-16所示。图19-16向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004 网页制

14、作设计教程调音调音返回返回南通大学计算机学院 王则林结束结束 （4）单击 按钮，在布局表格中拖动绘制出一个单元格，如图19-17所示。图19-17向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004 网页制作设计教程调音调音返回返回南通大学计算机学院 王则林结束结束 （5）按住【Ctrl】键，连续绘制出如图19-18所示的单元格。图19-18向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004 网页制作设计教程调音调音返回返回南通大学计算机学院 王则林结束结束 （6）将光标定位到左上方的单元格中，单击“插入”栏中“常用”选项卡中的 按钮，在“选择

15、图像源文件”对话框中打开tea文件夹中的image文件夹，在文件列表中选择bg_c1.jpg，如图19-19所示。向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004 网页制作设计教程调音调音返回返回南通大学计算机学院 王则林结束结束图19-19向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004 网页制作设计教程调音调音返回返回南通大学计算机学院 王则林结束结束 （7）单击 按钮，将图像插入到单元格中，如图19-20所示。图19-20向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004 网页制作设计教程调音调音返回返回南

16、通大学计算机学院 王则林结束结束 （8）将光标定位在左下方单元格中，再单击 图标，在打开的对话框中选择bg_c2.htm，单击 按钮将图像插入到单元格中，如图19-21所示。向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004 网页制作设计教程调音调音返回返回南通大学计算机学院 王则林结束结束图19-21向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004 网页制作设计教程调音调音返回返回南通大学计算机学院 王则林结束结束 （9）用同样的方法在右边的4个单元格中单击将依次插入图像，如图19-22所示。图19-22向下向下向上向上末页末页首页首页中

17、文版Dreamweaver MX 2004 网页制作设计教程调音调音返回返回南通大学计算机学院 王则林结束结束 （10）单击“吾茶吾心”导航图片，在其属性面板的“链接”文本框中输入wcwx.htm。（11）用同样的方法，依次为其他3个导航图片建立链接。（12）按【Ctrl+S】键保存页面文件，并按【F12】键预览效果，如图19-1所示。向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004 网页制作设计教程调音调音返回返回南通大学计算机学院 王则林结束结束制作“吾茶吾心”页面 “吾茶吾心”的页面主要介绍了制作者本人对茶文化的理解和感触。具体操作如下。（1）在“文件”面板中

18、双击“wcwx.htm”打开该文件。（2）单击“插入”栏中“布局”选项卡中的 按钮，再单击 按钮，此时光标变成“+”，在页面中按住鼠标不放拖动绘制出一个布局表格，如图19-23所示。向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004 网页制作设计教程调音调音返回返回南通大学计算机学院 王则林结束结束图19-23向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004 网页制作设计教程调音调音返回返回南通大学计算机学院 王则林结束结束 （3）单击 按钮，按住【Ctrl】键，连续绘制出如图19-24所示的单元格。图19-24向下向下向上向上末页末页首页

19、首页中文版Dreamweaver MX 2004 网页制作设计教程调音调音返回返回南通大学计算机学院 王则林结束结束 （4）将光标定位到第一个的单元格中，单击“插入”栏中“常用”选项卡中的 按钮，在“选择图像源文件”对话框中打开tea文件夹中的image文件夹，选择dh_c1.jpg，单击 按钮将图像插入到单元格中，依次插入全部导航图像，如图19-25所示。向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004 网页制作设计教程调音调音返回返回南通大学计算机学院 王则林结束结束图19-25向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004 网页制

20、作设计教程调音调音返回返回南通大学计算机学院 王则林结束结束 （5）单击“吾茶吾心”导航图片，在其属性面板的“链接”文本框中输入wcwx.htm。（6）用同样的方法，依次为其他3个导航图片建立链接。（7）单击 按钮，按住【Ctrl】键，连续绘制3个单元格。（8）将在Fireworks中制作好的图像切片插入到各个单元格中。（9）按【Ctrl+S】键保存页面文件，并按【F12】键预览效果。向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004 网页制作设计教程调音调音返回返回南通大学计算机学院 王则林结束结束 个人网站一般都希望体现制作者的个性，常常都需要用到一些特殊的字体，

21、这时就需要将这些文本制作成图像，因为许多浏览者的计算机上并没有这些字体，浏览时将无法显示这些个性的特殊字体。向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004 网页制作设计教程调音调音返回返回南通大学计算机学院 王则林结束结束制作“茶诗茶文”页面 “茶诗茶文”的页面主要介绍了中国古代和现代文学作品中关于茶的诗歌和文章以及一些对联等。由于该页面与“吾茶吾心”页面在导航部分是相同的，所以可以将wcwx.htm页面文件复制，再将其改名为cscw.htm，具体操作如下。向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004 网页制作设计教程调音调音返回返

22、回南通大学计算机学院 王则林结束结束 （1）在“文件”面板中选中wcwx.htm页面文件，按【Ctrl+D】键重制一个wcwx.htm页面文件，如图19-26所示。图19-26向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004 网页制作设计教程调音调音返回返回南通大学计算机学院 王则林结束结束 （2）单击“拷贝于wcwx.htm”页面文件名，将其更改为cscw.htm，如图19-27所示。图19-27向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004 网页制作设计教程调音调音返回返回南通大学计算机学院 王则林结束结束 （3）双击cscw.ht

23、m页面文件打开该文件。（4）将除了导航区域外的其他图像和布局单元格全部删除，删除后如图19-28所示。图19-28向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004 网页制作设计教程调音调音返回返回南通大学计算机学院 王则林结束结束 （5）单击 按钮，按住【Ctrl】键，连续绘制4个单元格，如图19-29所示。图19-29向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004 网页制作设计教程调音调音返回返回南通大学计算机学院 王则林结束结束 （6）分别在4个单元格中插入图像，插入后如图19-30所示。图19-30向下向下向上向上末页末页首页首页

24、中文版Dreamweaver MX 2004 网页制作设计教程调音调音返回返回南通大学计算机学院 王则林结束结束 （7）再绘制一个单元格，如图19-31所示，用于在单元格中输入各首茶诗的诗名。图19-31向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004 网页制作设计教程调音调音返回返回南通大学计算机学院 王则林结束结束 （8）在单元格中输入茶诗的诗名，完成后如图19-32所示。图19-32向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004 网页制作设计教程调音调音返回返回南通大学计算机学院 王则林结束结束 （9）为文字定义一个样式，按【Sh

25、ift+F11】键打开“CSS样式”面板，单击 按钮，打开“新建CSS样式”对话框，如图19-33所示。图19-33向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004 网页制作设计教程调音调音返回返回南通大学计算机学院 王则林结束结束 （10）在“名称”下拉列表框中输入.c1，在“选择器类型”栏选中 单选项，在“定义在”栏中选中 单选项。单击 按钮，打开“.c1的CSS样式定义”对话框。（11）在该对话框中进行如图19-34所示的设置。设置完成后，单击 按钮，完成样式的定义。向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004 网页制作设计教程

26、调音调音返回返回南通大学计算机学院 王则林结束结束图19-34向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004 网页制作设计教程调音调音返回返回南通大学计算机学院 王则林结束结束 （12）在页面中选中要应用样式的文本，再在其属性面板的“样式”下拉列表框中选择.c1选项，这时选中的文本就应用了所定义的样式，如图19-35所示。图19-35向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004 网页制作设计教程调音调音返回返回南通大学计算机学院 王则林结束结束 （13）重复第（4）（9）步，为“茶文”栏目也输入茶文名，完成后如图19-36所示。图1

27、9-36向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004 网页制作设计教程调音调音返回返回南通大学计算机学院 王则林结束结束 （14）至此这个页面就做完了，但还需要为每首诗或文进行链接，这里采用“打开浏览器窗口”行为来实现。按【Shift+F3】键来打开“行为”面板。（15）选择一首诗名，如“茶唐元稹”，单击 按钮，在弹出的“行为”菜单中选择“打开浏览器窗口”命令，打开“打开浏览器窗口”对话框。向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004 网页制作设计教程调音调音返回返回南通大学计算机学院 王则林结束结束 （16）在“要显示的URL”

28、文本框中输入要显示的这首诗的页面名cs_01.htm。在“窗口宽度”和“窗口高度”文本框中分别输入打开浏览器的宽度620和高度364，如图19-37所示。图19-37向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004 网页制作设计教程调音调音返回返回南通大学计算机学院 王则林结束结束 （17）单击 按钮，“行为”面板中将出现“打开浏览器窗口”动作。将事件设为onClick事件。（18）接着创建cs_01.htm页面文件，新建一个空白页面，并保存为cs_01.htm。打开该页面文件。（19）选择插入表格菜单命令，打开“表格”对话框，在“行”和“列”数值框中都输入1，在“

29、表格宽度”文本框中输入600，在其后的下拉列表框中选择“像素”，如图19-38所示。向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004 网页制作设计教程调音调音返回返回南通大学计算机学院 王则林结束结束图19-38向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004 网页制作设计教程调音调音返回返回南通大学计算机学院 王则林结束结束 （20）单击 按钮，在页面中即插入一个1行1列的表格，在表格中插入图像，完成后如图19-39所示。图19-39向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004 网页制作设计教程调音调音返

30、回返回南通大学计算机学院 王则林结束结束 （21）选择插入布局对象层菜单命令，在页面中插入一个层，拖动层的控制柄，使层的大小刚好和插入图像的空白处一样大，如图19-40所示。图19-40向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004 网页制作设计教程调音调音返回返回南通大学计算机学院 王则林结束结束 （22）将光标定位在层中，插入写有诗的图像，如图19-41所示。图19-41向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004 网页制作设计教程调音调音返回返回南通大学计算机学院 王则林结束结束 （23）用同样的方法将所有的茶诗和茶文的页面都

31、制作好，并进行相关的链接。至此，“茶诗茶文”的页面就制作完成了。按【F12】键在浏览器中预览效果。向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004 网页制作设计教程调音调音返回返回南通大学计算机学院 王则林结束结束课后练习思考题上机操作题向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004 网页制作设计教程调音调音返回返回南通大学计算机学院 王则林结束结束思考题 （1）定义样式有何好处？（2）怎样创建个人网站才能跳出只介绍自己，并放几张照片的老模式？向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004 网页制作设计教程调音调音返回返回南通大学计算机学院 王则林结束结束上机操作题 根据前面所学的知识，制作一个如图19-42所示的“我爱漫画”的个人网站。这里只给出了网站的首页，读者可以发挥自己的想像将这个网站建设完整，当然，读者也可以根据自己的喜好，建立自己的个人网站。需要注意的是个人网站是展示自己的一个平台，所以一定要体现个人魅力，有自己的独到之处。向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004 网页制作设计教程调音调音返回返回南通大学计算机学院 王则林结束结束图19-42