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