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

案例一案例一 简单个人网站的制作简单个人网站的制作 一 目的及要求 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 所示 选择 新建文件 修改默 认文件名为 index html 相同操作添加页面 photo html 图 9 6 新建文件 图 9 7 站点结构图 4 添加文件夹 将准备好的 image 文件夹复制到 e first 文件夹下 在文件属性中 点击 刷新 按钮 Image 文件夹会显示到文件站点中 如图 9 7 站点结构图 5 页面属性设置 左键双击 index html 页面文件 在 文档 窗口会显示 index html 页面 如 图 9 8 所示 点击 属性 栏中的 页面属性 按钮 弹出页面属性对口话框 如图 9 9 所示 在页面属性对话框中 单击背景图像对应的 浏览 按钮 弹出 选择图片文件源 对话框如图 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 表格对话框 7 表格属性设置 1 表格居中显示 将 属性 栏中对齐方式设置为 居中对齐 2 合并单元格 左键选中表格第 1 行 右键单击 表格 合并表格 第 3 行操作相同 3 设置单元格属性 1 单击表格第 1 行 在 属性 栏中设置单元格属性 如表 9 1 1 所以 表 9 1 1 第一行属性值 属性垂直背景高 属性值顶端 image top jpg180px 2 分别单击第 2 行第 1 个单元格 设置属性及属性值如下表 单击第 2 行第 2 个单元格 设置属性及属性值如下表 单元格垂直背景颜色高宽 第 2 行第 1 列 顶端 999999350px200px 第 2 行第 2 列 顶端 000000350px600px 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 插入图片 在左侧表格的相应位置选择 插入 常用 图片 选择图片 welcome gif 调整至 合适大小 在右侧表格的第 3 行 第 1 个单元格选择 插入 常用 图片 选择 cat jpg 设置图片属性 宽 200px 高 260px 效果图如 9 15 所示 图 9 15 插入图片效果图 10 设置链接 在左侧表格 插入 常用 链接 制作 我的首页 超链接 在对话康中输入相应信息 如图 9 16 所示 同样 制作 我的相册 超链接 及 我的母校 超链接 并设置中对齐 图 9 16 我的首页的超链接 图 9 17 南山学院超链接 11 输入文字并设置字体 在相应的位置输入应的文字 个人档案 设置为字号为 36px 颜色为 663399 居中 设置其所在单元格背景 图片为 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 删除表格 选择 个人档案 表