第7章 系统模板页面的设计.ppt

第7章系统模板页面的设计 7 1个人用户模板页面设计 1 在Dreamweaver8 0中单击 文件 新建 命令 会弹出如图7 1所示的对话框 2 在图7 1中 类别 区域单击 模板 在 模板页 区域单击 HTML模板 并单击 创建 3 出现空白的页面设计窗口 可以进行模板页的设计 4 先将该空白页面保存 在保存时弹出一个对话框 输入文件名 gogojobin 本资料由 大学生创业 创业 创业网 7 1个人用户模板页面设计 5 单击主菜单中的 插入 表格 命令 插入一个 3行3列 的表格 保持表格的选取状态并设置表格的属性 6 将 3行3列 表格的第1行合并单元格 然后设置第1行表格的背景图片 将光标移动到该行表格中 然后在 表格属性 面板中 单击 背景 文本框后的 浏览 按钮选择图片的路径 图片为图象文件夹 images 下面的 top1 gif 图片 选择图片后 背景 文本框中的路径为 images top1 gif 7 设置好 3行3列 表格的第1行的背景图片后 保持光标在该行 然后单击 插入 表格 命令 插入一个 1行2列 的表格 并在 1行2列 的表格中输入以下文字 Gogo求职招聘系统v1 0 普及版 设为首页 加入收藏 并在 设为首页 加入收藏 前面插入一个小图片 8 设置 设为首页 加入收藏 的链接 7 1个人用户模板页面设计 9 将光标定位到 3行3列 的表格第2行 合并第2行的第2列 第3列两个单元格 10 光标在 3行3列 的表格第2行中 在第1列中单击 插入 图片 命令 插入一张图片 图片位于图象文件夹 images 下面的 logo gif 插入图片后的路径为 images logo gif 11 同样 在 3行3列 的表格第2行合并后的第2列中插入图片 图片路径为 images top gif 12 将光标定位到 3行3列 的表格第3行中 在第1列中输入显示时间的源代码 13 在 3行3列 的表格第3行的第2列中选择 插入 图片 命令插入一张图片 图片的路径为 images top3 gif 14 将光标移动到第3列中 在 表格属性 面板中 单击 背景 文本框后面的 浏览 按钮 选择第3列表格的背景图片 图片路径为 images top2 gif 7 1个人用户模板页面设计 15 设置背景完成后 保持光标在第3列 然后选择 插入 表格 命令 插入一个 1行6列 的表格 并输入文字 网站首页 职位信息 人才信息 新闻动态 求职技巧 会员中心 作为网站的导航条 16 分别设置以上导航条的链接 依次选择各个导航条 在 属性 面板的 链接 文本框中设置链接 可以单击 链接 文本框后面的 浏览 按钮选择站点中的文件来设置导航条的链接 如选择 网站首页 文字 然后在 属性 面板中单击 链接 文本框后面的 浏览 按钮 17 单击 浏览 按钮后可以在站点中选择 链接 文件 18 单击图7 8中的 确定 按钮 在 属性 面板的 链接 文本框中出现了 链接 文件的路径 19 同样方法设置其他导航条链接 网站首页 职位信息 人才信息 新闻动态 求职技巧 会员中心 链接分别为 index asp grqz asp qyzp asp article1 asp article2 asp control asp 21 页眉 部分设计完成后 可以设计模板页的主体内容区 主体内容区的设计先是用一个 1行1列 的表格 然后在 1行1列 的表格中插入一个 2行2列 的表格 分别输入文字 7 1个人用户模板页面设计 22 在 2行2列 表格的左侧区域中插入 表格 并分别插入图片作为导航条 然后设置导航条的链接 在 2行2列 表格的右侧区域中设置右侧单元格的背景图片 23 版权区域的设计 24 分别给页眉 主内容区 版权区域添加 可编辑区域 25 选取需要设置 可编辑区域 的整个表格 26 单击 插入 模板对象 可编辑区域 27 弹出 新建可编辑区域 对话框 如图7 14所示 在 新建可编辑区域 对话框中输入名称 28 输入名称后单击 确定 按钮 即出现了 可编辑区域 的字样 7 2企业用户模板页面设计 操作步骤如下 1 打开模板文件Templates下的个人用户模板页面gogojoin dwt 2 将个人用户模板页面gogojoin dwt另存为企业用户模板页面gogojoben dwt 3 删除gogojoben dwt页面的可编辑区域Edit2内的表格及内容 4 将光标定位到可编辑区域Edit2内 单击主菜单中的 插入 表格 命令 插入一个 1行1列 的表格 表格的边框为0 5 将光标定位在 1行1列 的表格内 单击 插入 表格 命令 插入一个 2行4列 的表格 6 设置 2行4列 的表格属性 设置 表格宽 为705像素 高 为379像素 填充 为0 间距 为0 边框 为0 对齐方式为 居中对齐 7 2企业用户模板页面设计 7 在 2行4列 表格第1行第1列中 单击 插入 图象 命令 选择图象文件 图象文件的路径是 images control gif 8 在 2行4列 表格第1行第3列中 单击 插入 图象 命令 选择图象文件 图象文件的路径是 images controltop1 gif 9 将光标定位到 2行4列 表格的第2行中 用鼠标拖动选择第2行的4个单元列 然后在 表格 属性面板的左下角 用鼠标左键单击 单元格 下方的 合并 按钮 10 合并表格后 将光标定位在已经合并的 2行4列 表格的第2行中 单击 插入 表格 命令 插入一个 2行2列 的表格 设置 表格宽 为100 高 为272像素 填充 为0 间距 为0 边框 为0 对齐方式为 默认 7 2企业用户模板页面设计 11 合并插入的 2行2列 的表格的第1行 然后在该行内输入文字内容 会员中心 首页 12 将光标移动到插入的 2行2列 的表格的第2行的左侧单元格中 选择 插入 表格 命令 插入一个 11行1列 的表格 设置 表格宽 为100 高 为30像素 填充 为0 间距 为0 边框 为0 对齐方式为 默认 13 在该 11行1列 的表格的第1行到第10行 单击 插入 图象 命令 在打开的 选择图象源文件 的对话框中选择需要插入的图象 图象路径为 images menu1 gif 然后保持图象的选取状态 在 图象 属性面板中设置该图象的链接 单击 链接 文本框后面的 浏览 按钮 在弹出的 选择文件 对话框中选择站点中的链接文件 control asp 7 2企业用户模板页面设计 14 设置好的第1行的图象 源文件 及 链接 属性如图所示 7 2企业用户模板页面设计 15 第2行到第10行的图象文件及链接文件的设置方法与如