网站制作详细流程

《网站制作详细流程》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、课前导读基础知识重点知识重点知识一个完整的个人主页的创建。课堂讲解制作分析浏览网站本课将利用前面所学的知识，构建名为“吾茶吾心”的个人网站，本网站以个人爱好——茶文化为主题，将网站的主题定位在比较小的范围内，并且跳出了以往个人网站的千篇一律的老模式。主要介绍了茶文化的几个方面，栏目的划分比较简单，网站的色彩和构图以古典的中国文化为主要构成元素，有着浓烈的个人特色。本网站包括首页、茶艺茶道、茶诗茶文和茶水茶具几部分。在构建本网站时，本章将从建立站点开始以步骤的形式详细介绍在DreamweaverMX2004中构建个人网站的方法。制作分析在制作本网站前应先在电脑中创建一个名为tea

2、的文件夹，然后在该文件夹中创建image和org文件夹。image文件夹中保存网站中的所有图片；org文件夹中放置图片的源文件，以方便要对某个图片进行修改时直接进行修改即可。制作本例时，先新建一个名为tea的站点，并保存在tea文件夹中，然后在站点根目录下新建一个名为index.htm的页面文件。再新建wcwx.htm页面文件，并将导航栏中的各项链接到对应的名称上，由于网站的各个页面并不是十分规整，这里将利用复制页面文件再进行修改的方法，将wcwx.htm页面文件复制成为cscw.htm页面文件，再对其进行修改。浏览网站如图19-1所示是“吾茶吾心”网站的首页，如图19-2所示

3、是“吾茶吾心”页面，如图19-3所示是“茶诗茶文”页面，如图19-4所示是“《茶》”页面。图19-1图19-2图19-3图19-4上机实战创建站点制作index页面制作“吾茶吾心”页面制作“茶诗茶文”页面下面讲解这个个人网站的具体制作方法，由于篇幅有限，这里只讲解，首页、“吾茶吾心”和“茶诗茶文”3个页面的制作。读者可根据学习的知识将其他两个页面制作完成。总之，希望读者通过学习制作这个个人网站能巩固前面所学的知识，并能对其灵活运用，就达到目的了。创建站点根据上面的制作分析，首先创建“吾茶吾心”个人网站的站点，具体操作如下。（1）打开DreamweaverMX2004窗口。（2）

4、选择[站点][管理站点]菜单命令，打开“管理站点”对话框。（3）单击按钮，在弹出的列表中选择“站点”选项，如图19-5所示，打开“站点定义”对话框。图19-5（4）在“你打算为你的站点取什么名字？”文本框中输入tea，如图19-6所示。图19-6（5）单击按钮进入“编辑文件，第2部分”对话框。（6）选中单选项，如图19-7所示。图19-7（7）单击按钮进入“编辑文件，第3部分”对话框。（8）选中单选项，在“您将把文件存储在计算机上的什么位置?”文本框中单击文本框右侧的按钮，选择前面创建的tea文件夹，如图19-8所示。图19-8（9）单击按钮进入“共享文件”对话框，在“您如何

5、连接到远程服务器?”下拉列表框中选择“无”选项，如图19-9所示。图19-9（10）单击按钮进入“总结”对话框，如图19-10所示。单击按钮，创建的站点显示在“管理站点”对话框中。图19-10（11）在“管理站点”对话框中，单击按钮，站点就显示在“文件”面板中，如图19-11所示。图19-11（12）在“文件”面板的tea文件夹上单击鼠标右键，从弹出的快捷菜单中选择“新建文件”命令，如图19-12所示。图19-12（13）将新建的文档重命名为index.htm，如图19-13所示。图19-13（14）用同样的方法，分别新建名为wcwx.htm、cycd.htm、cscw.htm

6、和cscj.htm的文档，如图19-14所示。图19-14制作index页面创建好站点及index.htm页面后，就可以制作index.htm页面了，具体操作如下（1）在站点窗口中双击index.htm打开该页面。（2）在“标题”文本框中输入“吾茶吾心－－可以清心也”，如图19-15所示。图19-15（3）单击“插入”栏中“布局”选项卡中的按钮，再单击按钮，此时光标变成“+”，在页面中按住鼠标不放拖动绘制出一个布局表格，如图19-16所示。图19-16（4）单击按钮，在布局表格中拖动绘制出一个单元格，如图19-17所示。图19-17（5）按住【Ctrl】键，连续绘制出如图19-

7、18所示的单元格。图19-18（6）将光标定位到左上方的单元格中，单击“插入”栏中“常用”选项卡中的按钮，在“选择图像源文件”对话框中打开tea文件夹中的image文件夹，在文件列表中选择bg_c1.jpg，如图19-19所示。图19-19（7）单击按钮，将图像插入到单元格中，如图19-20所示。图19-20（8）将光标定位在左下方单元格中，再单击图标，在打开的对话框中选择bg_c2.htm，单击按钮将图像插入到单元格中，如图19-21所示。图19-21（9）用同样的方法在右边的4个单元格中