下载文档原格式
感受精彩——Dreamweaver CS3综合实例内容提要：本文主要介绍一个公司网页和一个科技公司网站的创建过程，目的是让读者能够更深入地了解网站的制作过程和方法，使读者进一步巩固使用Dreamweaver CS3 创建网站的基本方法和步骤，并能独立制作出简单的网站。
关键字：公司网页制作、网站制作引言：Dreamweaver CS3 是Adobe 公司推出的网页制作利器之一，其强大的功能和友好的操作界面，受到越来越多的网页设计师的青睐。
随着互联网信息时代的发展，网络已经成为人们生活中不可缺少的一部分。
利用网络，我们可以进行网上学习、网上购物、网上娱乐。
越来越多的公司和企业都拥有自己的网站，作为他们企业形象和产品的宣传平台。
正文：1 公司网页制作本实例通过Fireworks CS3 和Dreamweaver CS3 相结合完成，效果如图1 所示。
图 1其操作步骤如下：（1）用Fireworks CS3 制作一个网页图片，如图2 所示。
（2）使用切片工具，对图片进行切片，如图 3 所示。
图 3（3）单击“→ ”命令，打开“导出”对话框，将切割后的图片导出。
在“文件名”文本框中输入需要导出的 HTML 文件名，如 fwIndex.html ，在“导出”下拉列表中选 择“HTML 和图像”，在“切片”下拉列表中选择“导出切片”，并且选中“包括无切片区域”和“将图像放入子文件夹”复选框，如图 4 所示。
单击按钮，将切割后的图片导出。
（4）用Dreamweaver CS3 打开fwIndex.html，一个网页的基本架构已展现出来，如图 5 所示。
图 5→”命令，打开“ CSS 样式”面板，如（5）为文档设置样式表。
单击“图 6 所示。
（6）单击“CSS 样式”面板中的按钮，弹出如图7 所示的对话框。
图 6 图7 （7）进行相关的设置，单击按钮，弹出“保存样式表文件为”对话框，在“文件名”文本框中输入样式表名称，如“Style”，如图8 所示。
综合实例13——用Div+CSS制作茶文化网站首页在学习了“Div+CSS”的基础知识后，本例通过制作一个使用“Div+CSS”技术制作的茶文化网站首页来学习其在实际网页制作中的应用。
制作思路：本例主要用到Div的嵌套、浮动定位和三列式布局等知识。
为便于大家理解，我们将该网页的制作分为4部分来讲，包括上部、中部、下部和<body>样式。
制作步骤：一、制作网页上部1、将目录下“tea”文件夹拷贝至本地磁盘，然后在Dreamweaver中新建站点“tea”，将“tea”文件夹设置为站点根文件夹。
2、在站点“tea”中新建网页文档，并重命名为“index.html”。
3、在“文件”面板中双击打开新建的文档，在文档编辑窗口中定位插入点，然后将“插入”栏切换至“布局”，并单击其中的“插入Div标签”按钮。
4、打开“插入Div标签”对话框，在“ID”编辑框中输入ID名“top”，然后单击“新建CSS样式”按钮。
5、打开“新建CSS规则”对话框，选择器类型默认为“高级”，选择器名为“#top”，在“定义在”列表区选择“新建样式表文件”，然后单击“确定”按钮。
6、打开“保存样式表文件为”对话框，在“保存在”下拉列表中选择网站根文件夹，在文件名编辑框中输入文件名（此处为“s1”），然后单击“保存”按钮。
7、打开“#top的CSS规则定义”对话框，在左侧的“分类”列表中选择“方框”，设置“宽”为“1000”像素，然后单击“确定”按钮。
8、回到“插入Div标签”对话框，单击“确定”按钮插入Div标签。
然后切换至“常用”插入栏，并单击“图像”按钮。
9、打开“选择图像源文件”对话框，在“查找范围”下拉列表中选择图像所在文件夹（此处为网站根文件夹下的“images”文件夹），在文件列表中选择图像文件“main-01.jpg”，然后单击“确定”按钮。
10、插入图像，并将其上方的文本删除。
11、单击图像，然后按向右方向键【→】，将插入点置于图像右侧，接着参照前面的方法插入图像“main-02.jpg”。
