文档介绍：感受精彩——Dreamweaver CS3 综合实例
内容提要:本文主要介绍一个公司网页和一个科技公司网站的创建过程,目的是让读者能够更
深入地了解网站的制作过程和方法,使读者进一步巩固使用 Dreamweaver CS3 创建网站的基本方法
和步骤,并能独立制作出简单的网站。
关键字:公司网页制作、网站制作
引言:Dreamweaver CS3 是 Adobe 公司推出的网页制作利器之一,其强大的功能和友好的操作
界面,受到越来越多的网页设计师的青睐。随着互联网信息时代的发展,网络已经成为人们生活中
不可缺少的一部分。利用网络,我们可以进行网上学习、网上购物、网上娱乐。越来越多的公司和
企业都拥有自己的网站,作为他们企业形象和产品的宣传平台。
正文:
1 公司网页制作
本实例通过 Fireworks CS3 和 Dreamweaver CS3 相结合完成,效果如图 1 所示。
图 1
其操作步骤如下:
(1)用 Fireworks CS3 制作一个网页图片,如图 2 所示。
图 2
※ 1 ※
(2)使用切片工具,对图片进行切片,如图 3 所示。
图 3
(3)单击“→”命令,打开“导出”对话框,将切割后的图片导出。
在“文件名”文本框中输入需要导出的 HTML 文件名,如 ,在“导出”下拉列表中选
择“HTML 和图像”,在“切片”下拉列表中选择“导出切片”,并且选中“包括无切片区域”和“将
图像放入子文件夹”复选框,如图 4 所示。单击按钮,将切割后的图片导出。
图 4
※ 2 ※
(4)用 Dreamweaver CS3 打开 ,一个网页的基本架构已展现出来,如图 5 所示。
图 5
(5)为文档设置样式表。单击“→”命令,打开“CSS 样式”面板,如
图 6 所示。
(6)单击“CSS 样式”面板中的按钮,弹出如图 7 所示的对话框。
图 6 图 7
(7)进行相关的设置,单击按钮,弹出“保存样式表文件为”对话框,在“文件名”
文本框中输入样式表名称,如“Style”,如图 8 所示。
(8)单击按钮,弹出“CSS 规则定义”对话框,编辑样式如图 9 所示。
图 8 图 9
※ 3 ※
(9)用同样的方法定义其他样式,结果如图 10 所示。
图 10
(10)单击“→”命令,在弹出的“页面属性”对话框中对页面布局进
行修改,如图 11 所示。
图 11
(11)单击按钮,确认设置,并设置页面中的表格为居中对齐,如图 12 所示。
图 12
※ 4 ※
(12)单击如图 13 所示位置的图片。
图 13
删除选中的图片,并把单元格中的背景图像设置为删除的图片,把单元格的宽度设置为删除的
图片的宽度,如图 14 所示。
图 14
※ 5 ※
(13)在设置好的单元格中输入站点导航内容,如图 15 所示。
图 15
(14)重复步骤(12)~(13),设置其他单元格,最终效果如图 16 所示。
图 16
2 网站制作实例
主要内容包括:
(1)概述。
(2)定义本地站点。
※ 6 ※
(3)设计主页。
(4)建立模板。
(5)制作“公司简介”页面。
(6)编辑“联系我们”页面。
(7)建立链接。
概述
首先在建网站前要规划好网站的结构,准备好所需内容以及素材。在这个实例中,将所建的网
站起名为“创杰科技公司”,主要是向客户介绍公司及公司的业绩,其结构如图 17 所示。
图 17
定义本地站点
首先需要定义一个本地站点,定义站点的方法如下:
(1)在 Dreamweaver 中,单击“→”命令,弹出站点定义对话框,如图
18 所示。
图 18
(2)在定义站点的对话框中,选择“本地信息”选项,在“站点名称”文本框中输入站点名:
“创杰科技公司”,在“本地根文件夹”和“默认图像文件夹”文本框中输入本地文件的路径,其他
不用设置,如图 19 所示。
图 19
※ 7 ※
(3)单击按钮,在“文件”面板中出现刚才规划好的文件夹,如图 20 所示。
(4)用鼠标右键单击“创杰科技”文件夹,在弹出的上下文菜单中单击命令,
新建一个空文档“”,如图 21 所示。
图 20 图 21
设计主页
主页是进入站点时的第一个页面(ind