【#文档大全网# 导语】以下是®文档大全网的小编为您整理的《案例一简单个人网站的制作》，欢迎阅读！
-
案例一 简单个人的制作
一、目的及要求
1.认识Dreamwaver 开发环境；
2.掌握站点、网页的创立、保存、运行； 2.掌握运用表格进展页面布局；
4.熟练进展图片、文字、等网页元素的添加和属性设置。
创立个人，主要包括个人资料、我的相册和南山学院等工程，运行效果如图9-1所示，当点击“我的相册〞，运行效果如图9-2所示。当单击“南山学院〞，跳转到南山学院的主页。
图9-1 个人资料页面 图9-2 我的相册页面
二、案例效果图
三、内容及操作
本案例创立如图9-1所示的，通过该案例，学会网页创立、页面布局、元素添加设置、
浏览页面等根本操作。 操作步骤：
注：准备一个image文件夹，包括需要的图片文件。 1.启动Dreamweaver
翻开“开场|程序|Dreamweaver〞后，弹出如图9-3所示的欢送界面。
图9-3所示的欢送界面 图9-4 站点定义界面一
图9-5 站点定义界面二
2.创立站点
选择菜单中“站点|新建〞，弹出“站点定义为〞对话框，如图9-4所示的站点定义界面一，在文本框中输入站点名称“first〞，选择“下一步〞，选取默认信息至“共享文件〞选项，在“如何连接到远程效劳器〞下拉列表中选择“无〞如图9-5 站点定义界面二，最终选择“完成〞按钮。 3.添加文件
右键单击文件面板的站点，弹出快捷菜单如图9-6所示。选择“新建文件〞，修改默认文件名为“inde*.html〞，一样操作添加页面“photo.html〞。
图9-6 新建文件 图9-7 站点构造图 4.添加文件夹
将准备好的image文件夹复制到e：\first 文件夹下，在文件属性中，点击“刷新〞 按钮
。Image文件夹会显示到文件站点中。如图9-7站点构造图。
5.页面属性设置
左键双击“inde*.html〞页面文件，在“文档〞窗口会显示“inde*.html〞页面，如图9-8所示。点击“属性〞栏中的“页面属性〞按钮，弹出页面属性对口话框，如图9-9所示。在页面属性对话框中，单击背景图像对应的“浏览〞按钮，弹出“选择图片文件源〞对话框如图9-10所示，选择“bg.gif 〞图片；上边距和下边距设置成 “0像素〞；在标题/编码分类
. z.
-
中，标题文本框输入“我的主页〞如图9-11所示。选择“确定〞按钮完成页面属性的设置，界面效果如图9-12所示。
图9-8 inde*文件界面 图9-9 页面属性对话框一
图9-10 “选择图片文件源〞对话框 图9-11 页面属性二
图9-12 页面效果
6.表格布局
选择“插入|常用|表格〞，图标为
，在弹出的表格对话框中输入以下的属
性。行数：3 ，列数2，表格宽度：800 像素，边框1像素。单击“确定〞按钮后，显示效果如图9-13表格对话框所示。
图 9-13 表格对话框 7.表格属性设置
〔1〕表格居中显示。将“属性〞栏中对齐方式设置为“居中对齐〞。
〔2〕合并单元格。左键选中表格第1行，右键单击|表格|合并表格，第3行操作一样。 (3〕设置单元格属性。
1〕单击表格第1行，在“属性〞栏中设置单元格属性。如表9-1-1所以。
表9-1-1 第一行属性值
属性 属性值
垂直 顶端
背景 image/top.jpg
高 180p*
2〕分别单击第2行第1个单元格，设置属性及属性值如下表。单击第2行第2个
单元格，设置属性及属性值如下表。
单元格 第2行第1列
第2行第2列
垂直 顶端 顶端
背景颜色 *999999 *000000
高 350p* 350p*
宽 200p* 600p*
4〕单击第3行单元格，设置属性及属性值如下表。
属性 属性值
垂直 顶端
背景颜色 *666666
表格设置完的效果如图9-13所示 。
图9-13 表格布局效果图
8.插入表格
单击第2行第1个单元格，选择“插入|常用|表格〞，选择4行，1列，宽度100%，在第2行，第2个单元格选择“插入|常用|表格〞，选择8行，2列。并将第1列，第3行道第8行 合并单元格，对表格的操作后如图9-14所示。
图9-14在页面中插入表格效果图
9.插入图片
在左侧表格的相应位置选择“插入|常用|图片〞，选择图片“wele.gif〞，调整至适宜大小；在右侧表格的第3行，第1个单元格选择“插入|常用|图片〞，选择“cat.jpg〞,设置图片属性，宽200p*，高260p*。效果图如9-15所示。
. z.
-
图9-15 插入图片效果图
10.设置
在左侧表格“插入|常用|〞，制作“我的首页〞超，在对话康中输入相应信息如图9-16所示。同样，制作“我的相册〞超，及“我的母校〞超。并设置中对齐。 图9-16 我的首页的超 图9-17南山学院超 11.输入文字并设置字体
① 在相应的位置输入应的文字。
② “个人档案〞设置为字号为36p*，颜色为*663399，居中。设置其所在单元格背景
图片为“image/li.gif〞。 ③ 左键第1行，“插入|布局|绘制AP Div〞 ，当出现十字架后，拖拽适宜宽度，输入
“欢送光临奋斗〞。在属性栏中设置文字的属性，如图9-18。设置字号为48号，“奋斗〞两字为绿色。
图9-18 文字属性设置
12．保存页面。选择“文件|保存〞。 13．复制页面
复制整个inde*.html页面。粘贴至photo.html页面。
提 示
复制页面内容可以在inde*.html页面，用快捷键 ctrl+A选中页面内容ctrl+C复制内容，在photo页面，ctrl+V进展粘贴。页面元素可以完全复制，但是页面属性是复制不过来的。如果有多个页面布局风格相似，我们可以用模板实现。
14．删除表格
选择“个人档案〞表格，按Delete键删除表格。
按照样，及以上操作，实现对photo.html 页面的制作。插入4行两列表格，“插入|图片〞，设置图片适宜大小。
15. 保存页面。选择“文件|保存〞。
16．运行页面 .运行键盘中F12键.按提示保存页面。运行结果如样所示。
. z.
本文来源：https://www.wddqxz.cn/752322cd350cba1aa8114431b90d6c85ec3a883a.html
2022-07-12
