《网站制作详细流程》由会员分享，可在线阅读，更多相关《网站制作详细流程（68页珍藏版）》请在金锄头文库上搜索。
1、向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004 网页制作培训教程调音调音返回返回 零点 起飞电脑培训学校结束结束课前导读基础知识 重点知识向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004 网页制作培训教程调音调音返回返回 零点 起飞电脑培训学校结束结束重点知识一个完整的个人主页 的创建。向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004 网页制作培训教程调音调音返回返回 零点 起飞电脑培训学校结束结束课堂讲解制作分析 浏览网站向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004 网页制作
2、培训教程调音调音返回返回 零点 起飞电脑培训学校结束结束本课将利用前面所学的知识，构建名为“吾 茶吾心”的个人网站，本网站以个人爱好茶 文化为主题，将网站的主题定位在比较小的范围 内，并且跳出了以往个人网站的千篇一律的老模 式。主要介绍了茶文化的几个方面，栏目的划分 比较简单，网站的色彩和构图以古典的中国文化 为主要构成元素，有着浓烈的个人特色。本网站 包括首页、茶艺茶道、茶诗茶文和茶水茶具几部 分。在构建本网站时，本章将从建立站点开始以 步骤的形式详细介绍在Dreamweaver MX 2004中 构建个人网站的方法。向下向下向上向上末页末页首页首页中文版Dreamweaver MX 200
3、4 网页制作培训教程调音调音返回返回 零点 起飞电脑培训学校结束结束制作分析在制作本网站前应先在电脑中创建一个 名为tea的文件夹，然后在该文件夹中创建 image和org文件夹。image文件夹中保存网站 中的所有图片；org文件夹中放置图片的源文 件，以方便要对某个图片进行修改时直接进行 修改即可。向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004 网页制作培训教程调音调音返回返回 零点 起飞电脑培训学校结束结束制作本例时，先新建一个名为tea的站点 ，并保存在tea文件夹中，然后在站点根目录下 新建一个名为index.htm的页面文件。再新建 wcwx.htm页
4、面文件，并将导航栏中的各项链接 到对应的名称上，由于网站的各个页面并不是 十分规整，这里将利用复制页面文件再进行修 改的方法，将wcwx.htm页面文件复制成为 cscw.htm页面文件，再对其进行修改。向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004 网页制作培训教程调音调音返回返回 零点 起飞电脑培训学校结束结束浏览网站如图19-1所示是“吾茶吾心”网站的首页， 如图19-2所示是“吾茶吾心”页面，如图19-3所示是 “茶诗茶文”页面，如图19-4所示是“茶”页面。图19-1向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004 网页制作培
5、训教程调音调音返回返回 零点 起飞电脑培训学校结束结束图19-2向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004 网页制作培训教程调音调音返回返回 零点 起飞电脑培训学校结束结束图19-3向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004 网页制作培训教程调音调音返回返回 零点 起飞电脑培训学校结束结束图19-4向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004 网页制作培训教程调音调音返回返回 零点 起飞电脑培训学校结束结束上机实战创建站点 制作index页面 制作“吾茶吾心”页面 制作“茶诗茶文”页面向下向下向
6、上向上末页末页首页首页中文版Dreamweaver MX 2004 网页制作培训教程调音调音返回返回 零点 起飞电脑培训学校结束结束下面讲解这个个人网站的具体制作方法， 由于篇幅有限，这里只讲解，首页、“吾茶吾心 ”和“茶诗茶文” 3个页面的制作。读者可根据学 习的知识将其他两个页面制作完成。总之，希 望读者通过学习制作这个个人网站能巩固前面 所学的知识，并能对其灵活运用，就达到目的 了。向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004 网页制作培训教程调音调音返回返回 零点 起飞电脑培训学校结束结束创建站点根据上面的制作分析，首先创建“吾茶吾 心”个人网站的站点，
7、具体操作如下。（1）打开Dreamweaver MX 2004窗口。（2）选择站点管理站点菜单命令， 打开“管理站点”对话框。向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004 网页制作培训教程调音调音返回返回 零点 起飞电脑培训学校结束结束（3）单击 按钮，在弹出的列表中选 择“站点”选项，如图19-5所示，打开“站点定 义”对话框。图19-5向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004 网页制作培训教程调音调音返回返回 零点 起飞电脑培训学校结束结束（4 ）在“你 打算为你 的站点取 什么名字 ？”文本 框中输入 tea，如 图19
8、-6所 示。图19-6向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004 网页制作培训教程调音调音返回返回 零点 起飞电脑培训学校结束结束（5）单击 按钮进入“编辑文件，第2 部分”对话框。（6）选中 单选项，如图 19-7所示。向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004 网页制作培训教程调音调音返回返回 零点 起飞电脑培训学校结束结束图19-7向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004 网页制作培训教程调音调音返回返回 零点 起飞电脑培训学校结束结束（7）单击 按钮进入“编辑文件，第3 部分”对话框
9、。（8）选中 单选项，在“您将把文件存储在计算机上的什 么位置?”文本框中单击文本框右侧的 按钮 ，选择前面创建的tea文件夹，如图19-8所示 。向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004 网页制作培训教程调音调音返回返回 零点 起飞电脑培训学校结束结束图19-8向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004 网页制作培训教程调音调音返回返回 零点 起飞电脑培训学校结束结束（9）单 击 按钮 进入“共享文 件”对话框， 在“您如何连 接到远程服 务器?”下拉 列表框中选 择“无”选项 ，如图19-9 所示。 图19-9向下向下向
10、上向上末页末页首页首页中文版Dreamweaver MX 2004 网页制作培训教程调音调音返回返回 零点 起飞电脑培训学校结束结束（10）单 击 按钮 进入“总结” 对话框，如 图19-10所示 。单击 按钮，创建 的站点显示 在“管理站点 ”对话框中。图19-10向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004 网页制作培训教程调音调音返回返回 零点 起飞电脑培训学校结束结束（11）在 “管理站点” 对话框中， 单击 按 钮，站点就 显示在“文件 ”面板中，如 图19-11所示 。图19-11向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2
11、004 网页制作培训教程调音调音返回返回 零点 起飞电脑培训学校结束结束（12）在 “文件”面板 的tea文件夹 上单击鼠标 右键，从弹 出的快捷菜 单中选择“新 建文件”命令 ，如图19-12 所示。图19-12向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004 网页制作培训教程调音调音返回返回 零点 起飞电脑培训学校结束结束（13）将 新建的文档 重命名为 index.htm， 如图19-13所 示。图19-13向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004 网页制作培训教程调音调音返回返回 零点 起飞电脑培训学校结束结束（14）用
12、同样的方法 ，分别新建 名为 wcwx.htm、 cycd.htm、 cscw.htm和 cscj.htm的 文档，如图 19-14所示。图19-14向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004 网页制作培训教程调音调音返回返回 零点 起飞电脑培训学校结束结束制作index页面创建好站点及index.htm页面后，就可以 制作index.htm页面了，具体操作如下（1）在站点窗口中双击index.htm打开该页 面。（2）在“标题”文本框中输入“吾茶吾心 可以清心也”，如图19-15所示。图19-15向下向下向上向上末页末页首页首页中文版Dreamweaver
13、MX 2004 网页制作培训教程调音调音返回返回 零点 起飞电脑培训学校结束结束（3）单击“插入”栏中“布局”选项卡中的 按 钮，再单击 按钮，此时光标变成“+”，在页面中 按住鼠标不放拖动绘制出一个布局表格，如图19- 16所示。图19-16向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004 网页制作培训教程调音调音返回返回 零点 起飞电脑培训学校结束结束（4）单击 按钮，在布局表格中拖动绘制出 一个单元格，如图19-17所示。图19-17向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004 网页制作培训教程调音调音返回返回 零点 起飞电脑培
14、训学校结束结束（5）按住【Ctrl】键，连续绘制出如图 19-18所示的单元格。图19-18向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004 网页制作培训教程调音调音返回返回 零点 起飞电脑培训学校结束结束（6）将光标定位到左上方的单元格中， 单击“插入”栏中“常用”选项卡中的 按钮， 在“选择图像源文件”对话框中打开tea文件夹 中的image文件夹，在文件列表中选择 bg_c1.jpg，如图19-19所示。向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004 网页制作培训教程调音调音返回返回 零点 起飞电脑培训学校结束结束图19-19向下
15、向下向上向上末页末页首页首页中文版Dreamweaver MX 2004 网页制作培训教程调音调音返回返回 零点 起飞电脑培训学校结束结束（7）单击 按钮，将图像插入到单元 格中，如图19-20所示。图19-20向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004 网页制作培训教程调音调音返回返回 零点 起飞电脑培训学校结束结束（8）将光标定位在左下方单元格中，再 单击 图标，在打开的对话框中选择 bg_c2.htm，单击 按钮将图像插入到单 元格中，如图19-21所示。向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004 网页制作培训教程调音调
16、音返回返回 零点 起飞电脑培训学校结束结束图19-21向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004 网页制作培训教程调音调音返回返回 零点 起飞电脑培训学校结束结束（9）用同样的方法在右边的4个单元格中 单击将依次插入图像，如图19-22所示。图19-22向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004 网页制作培训教程调音调音返回返回 零点 起飞电脑培训学校结束结束（10）单击“吾茶吾心”导航图片，在其属 性面板的“链接”文本框中输入wcwx.htm。（11）用同样的方法，依次为其他3个导 航图片建立链接。（12）按【Ctrl+S】键保存页面文件，并 按【F12】键预览效果，如图19-
