案例一--简单个人网站的制作.docx

案例一--简单个人网站的制作
案例一简单个人网站的制作
一、目的及要求
.认识Dreamwaver开发环境；
.掌握站点、网页的创建、保存、运行；
.掌握运用表格进行页面布局；
.熟练进行图片、文字、链接等网页元素的添加和属案例一--简单个人网站的制作
案例一简单个人网站的制作
一、目的及要求
.认识Dreamwaver开发环境；
.掌握站点、网页的创建、保存、运行；
.掌握运用表格进行页面布局；
.熟练进行图片、文字、链接等网页元素的添加和属性设置。
创建个人网站，网站主要包括个人资料、我的相册和南山学院等项目，运行效果如图9-1所示,当点击
“我的相册”，运行效果如图9-2所示。
当单击“南山学院”链接，跳转到南山学院的主页。
欢迎光临
图9-1个人资料页面
图9-2我的相册页面
［三、内容及操作］
本案例创建如图9-1所示的网站，通过该案
例，学会网页创建、页面布局、元素添加设置、浏览页面等基本操作。操作步骤：注：准备一个image文件夹，包括需要的图片文件。
L启动Dreamweaver
打开“开始|程序|D
ream weaver^ 后，弹出
如图9・3所示的欢迎界面。
E tlHUi k - T"4M+.—色 ,“ u
w<r kvt，* 4-11 i t
1』岸曰 "” ]
F^l Hip ♦♦«+ *f4biM ■*、i4k~
力弘『工品蜂]燧融%春加*Hf此通知5U』”
V8RR*承*的重堂弟
ITr-l-fcj~~T<1*
图9-3所示的欢迎界一
图9-4站点定义界面一
图9-5站点定义界面二
.创建站点
选择菜单中“站点|新建”，弹出“站点定义为”对话框，如图9-4所示的站点定义界面一，在文本框中输入站点名称“first”，选择“下一步”，选取默认信息至“共享文件”选项，在“如何连接到远程服务器”下拉列表中选择“无”如图9-5站点定义界面二，最终选择“完成”按钮。
.添加文件
右键单击文件面板的站点，弹出快捷菜单如图9-6所示。选择“新建文件”，修改默认文件名为"”,相同操作添加页面“
图 9-6
新建文件
图9-7站点结构图
.添加文件夹
将准备好的image文件夹复制到e:
\first文件夹下，在文件属性中，点击“刷新”
按钮。Image文件夹会
显示到文件站点中。如图9-7站点结构图。
.页面属性设置
左键双击"”页面文件，在“文档”窗口会显示"”页面，如图9-8所示。点击“属性”栏中的“页面属性”按钮，弹出页面属性对口话框，如图9-9所示。在页面属性对话框中，单击背景图像对应的“浏览”按钮，弹出“选择图片文件源”对话框如图9-10
所示，选择“”图片；上边距和下边距设置成“0像素”；在标题/编码分类中，标题文本框输入“我的主页”如图9-11所示。选择“确定”按钮完成页面属性的设置，界面效果如图9-12所示。
图9-8index文件界面
图9-9页面属性对话框一
图9-10“选择图片文件源”对话框
图9-11页面属性二
图9-12 页面效果
.表格布局
选择“插入|常用|表格
图标为
,在弹出的表格对话框中输入下列的属
性。行数：3,列数2,表格宽度：800像素，边框1像素。单击“确定”按钮后，显示效果如图9-13表格对话框所示。
图9-13表格对话框
.表格属性设置
(1)表格居中显示。将“属性”栏中对齐方
式设置为“居中对齐”。
(2)合并单元格。左键选中表格第1行，右键单击|表格|合并表格，第3行操作相同。
(3)设置单元格属性。
1)单击表格第1行，在“属性”栏中设置单元格属性。如表9-1-1所以。
表9-1-1第一行属性值
属性
垂直
背景
[Wj
属性
顶端
image/
2Px
值
2）分别单击第2行第1个单元格，设置属性及属性值如下表。单击第2行第2个单元格，设置属性及属性值如下表。
单元
格
垂直
背景颜色
高
宽
第2行
第1歹U
顶端
#999999
350Px
200px
第2行
第2列
顶端
#000000
350Px
600px
4）单击第3行单元格，设置属性及属性值如下表。