个人网站的建设—模板和特效网页的制作PPT课件

1 项目1个人网站的建设 模板和特效网页的制作 任务1 个人网站的设计规划任务2 创建本地站点任务任务3 制作网页模板任务4 利用模板制作 我的简历 页面任务5 网页添加特效 2 任务1 个人网站的设计规划 任务1 1确定网站主题任务1 2确定网站的目录结构任务1 3确定网站的整体风格任务1 4确定网站主要栏目和布局 3 任务1 1确定网站主题 对于主题的选择主要按下列3个条件去考虑 本例所讲的是一个个人介绍性质的网站 主题就是介绍个人的相关信息 如果主题已经确定 就可以围绕主题给该网站起一个名字 网站名称也是网站设计的一部分 而且是很关键的要素 4 任务1 2确定网站的目录结构 网站的目录是指建立网站时创建的目录 目录结构的好坏 对浏览者来说并没有什么太大的感觉 但是对站点本身的上传维护以及以后内容的扩充和移植有着重要的影响 建立目录结构的建议 a 不要将所有文件都存放在根目录下 b 按栏目内容建立子目录 c 个主目录下都建立独立的images目录 d 目录的层次不要太深 5 任务1 3确定网站的整体风格 在动手建立网站之前 对网页进行完整 详尽的整体设计是至关重要的 风格是指站点的整体形象想给浏览者的综合感受 包括站点的标志 色彩 字体 标语 版面布局 内容价值 存在意义 站点荣誉等诸多因素 本例的页面采用绿色为主的色调 绿色具有清爽 理想 希望 生长的含义 采用这种大面积明亮的绿色块 营造了一个清晰明快 充满无限希望与活力的氛围 6 任务1 4确定网站主要栏目和布局 通常版面布局是按照如下步骤进行的 步骤1 设计草案 新建页面就像一张白纸 没有任何表格 框架和约定俗成的东西 设计者可以尽可能发挥想象力 用一张白纸和一支铅笔勾画出页面的大致布局 当然永续哦图软件photoshop Firewoeks等也可以 步骤2 进行粗略布局在草案的基础上 将确定需要放置的功能模块安排到页面上 必须遵循6突出重点 平衡协调的原则 将网站标志 主要栏目等最重要的模块放在最显眼 最突出的位置 然后再考虑次要模块的排放 7 任务2 创建本地站点 步骤1 选择 站点 管理站点 命令 弹出 管理站点 对话框 在 管理站点 对话框中 单击 新建 按钮 然后从弹出的菜单中选择 站点 选项 8 任务2 创建本地站点 步骤2 弹出 站点定义 对话框 如果对话框显示的是 高级 选项卡 则切换到 基本 选项卡 弹出 站点定义向导 的第一个界面 要求为站点输入名称 9 任务2 创建本地站点 步骤3 单击 下一步 按钮 出现向导的下一个界面 询问是否要使用服务器技术 选择 否我不想使用服务器技术 选项 指示目前该站点是一个静态站点没有动态页面 步骤4 单击 下一步 按钮 打开如图4 5所示的对话框 在文本框中输入站点路经 10 任务2 创建本地站点 步骤5 单击 下一步 按钮 询问如何连接到远程服务器 这里选择 无 因为将整个站点制作完成以后再上传 步骤6 单击 下一步 按钮 将显示设置概要 11 任务2 创建本地站点 步骤7 单击 完成 按钮 即出现 管理站点 对话框 其中显示了新建的站点 步骤8 单击 完成 按钮 关闭 管理站点 对话框 现在 已经为站点定义了一个本地根文件夹 就可以在站点中制作网页了 当制作完成以后 就可以上传到服务器上供大家浏览了 12 任务3 制作网页模板 使用模板创建文档可使站点具有统一的结构和外观 具体操作步骤如下 步骤1 选择 文件 新建 命令 弹出 新建文档 对话框 选择 空白页 选项 在 页面类型 选项卡中选择 模板 选择 步骤 单击 创建 按钮 创建一空白模板网页 选择 修改 页面元素 命令 打开 页面属性 对话框 在 页面属性 对话框中将 背景颜色 设置 左边距 右边距 上边距 和 下边距 分别设置为 步骤 单击 确定 按钮 步骤 将光标放置在页面中 选择 窗口 资源 命令 打开 资源 面板 13 任务3 制作网页模板 步骤 在面板中单击新建建按钮 显示以创建的库文件 单击并选择要插入的库文件 单击 资源 面板底部的 插入 按钮 即可插入库文件 步骤 将光标放置在库文件的右边 选择 插入记录 表格 命令 插入 行 列的表格 此表格记为表格 步骤 将光标放置在表格 的第 列 选择 插入记录 表格 命令 插入 行 列的表格 此表格记为表格 步骤 将光标放置在表格 的第 行单元格中 选择 插入记录 图像 命令 插入图像images left top jpg 14 任务3 制作网页模板 步骤9 将光标放置在表格2的第2行单元格中 单击属性面板中 背景 文本框右边的 浏览 按钮 插入背景图像images left di gif 15 任务3 制作网页模板 步骤10 将光标放置在背景图像上 选择 插入记录 表格 命令 插入10行1列的表格 此表格记为表格3 在属性面板中 将 对齐 设置为 居中对齐 16 任务3 制作网页模板 步骤11 将光标放置在表格3的第2行单元格中 选择 插入记录 图像 命令 插入图像images geren gif 步骤12 在表格3的其他单元格中再插入相应的图像 17 步骤13 将光标放置在表格2的第3行中 选择 插入记录 图像 命令 插入images left botton jpg 任务3 制作网页模板 18 步骤14 将表格1的第2列 宽 设置我10 步骤15 将光标放置在表格1的第3列中 选择 插入记录 表格 命令 插入4行1列的表格 此表格记为表格4 任务3 制作网页模板 19 步骤16 将光标放置在表格4的第1行中 选择 插入记录 图像 命令 插入图片hua 1 jpg 步骤17 将光标放置在表格4的第2行中 选择 插入记录 图像 命令 插入图像hua 2 jpg 任务3 制作网页模板 20 任务3 制作网页模板 步骤18 将光标放置在表格4的第3行中 选择 插入记录 表格 命令 插入1行1列的表格 此表格记为表格5 21 任务3 制作网页模板 步骤19 将光标放置在表格5中 单击属性检查器 背景 文本框右边的 浏览 按钮 插入背景图像images di gif 将 高 设置为 顶端 步骤20 将光标放置在表格4的第4行中 选择 插入记录 图像 命令 插入图像imageshua 3 jif 22 任务3 制作网页模板 步骤21 将光标放置在表格1的右边 选择 插入记录 表格 命令 插入1行1列的表格 此表格记为表格6 在属性检查器中将 对齐 设置为 居中对 23 步骤22 将光标放置在表格6中 单击属性面板中 背景 文本框右边的 浏览 按钮 插入背景图像images footer jpg 将 高 设置为113 任务3 制作网页模板 24 步骤23 将光标放置在背景图像上 输入文字 版权所有盈盈 步骤24 将光标放置在文字间 选择 插入记录 HTML 特殊字符 版权 命令 弹出Dreamweaver提示框 步骤25 单击 确定 按钮 插入版权符号 任务3 制作网页模板 25 任务4 利用模板制作 我的简历 页面 步骤1 选择 文件 新建 命令 弹出 新建文档 对话框 选择 模板中的页 选项 选择 站点 下的 个人网站 选项 选择 站点 个人网站 的模板 中的index选项 勾选 当模板改变时更新页面 复选框 步骤2 单击 创建 按钮 创建一模板 26 任务4 利用模板制作 我的简历 页面 步骤3 将光标置于可编辑区zhengwen中 选择 插入记录 表格 命令 插入5行1列的表格 此表格记为表格7 27 任务4 利用模板制作 我的简历 页面 步骤4 将光标放置在表格7的第1行中 将 高 设置为50 将光标放置表格7的第2行中 选择 插入记录 图像 命令 插入图像images jiben jif 28 任务4 利用模板制作 我的简历 页面 步骤5 将光标放置在表格7的第2行中 选择 插入记录 表格 命令 插入4行4列的表格 此表格记为表格8 在属性面板中将 间距 设置为2 29 任务4 利用模板制作 我的简历 页面 步骤6 在表格8中输入相应的文字 并把第4行单元格合并 步骤7 将光标放置在表格7的第4行中 选择 插入记录 表格 命令 插入3行1列的表格 此表格记为表格9 30 任务4 利用模板制作 我的简历 页面 步骤8 将光标放置在表格9的第1行中 选择 插入记录 图像 命令 插入图像images jiaoyu gif 31 任务4 利用模板制作 我的简历 页面 步骤9 在表格9的第2和第3行输入相应的文字 步骤10 将光标放置在表格7的第5行中 选择 插入记录 表格 命令 插入4行1列的表格 此表格记为表格10 32 任务4 利用模板制作 我的简历 页面 步骤11 将光标放置在表格10的第1行中 选择 插入记录 图像 命令 插入图像images gzjl gif 步骤12 在表格10的其他单元格中输入相应的文字 33 任务5 网页添加特效 2 5 1制作弹出窗口页面4 5 2给网页添加背景音乐 34 步骤1 从站点打开文件 步骤2 将光标置于文档中相应的位置 选择 窗口 行为 命令 打开行为面板 在行为面板中单击添加按钮 在弹出的下拉列表中选择 打开浏览器窗口 命令步骤3 弹出 打开浏览器窗口 对话框步骤4 在对话框中 单击 要显示的URL 文本框右边的 浏览 按钮 弹出 选择文件 对话框 任务5 1制作弹出窗口页面 35 任务5 1制作弹出窗口页面 步骤5 在对话框中选择相应的文件 单击 确定 按钮 返回到 打开浏览窗口 对话框 将 窗口宽度 设置450 窗口宽度 设置为450 窗口高度 设置为280 步骤6 单击 确定 按钮 在行为面板中就会出现添加 打开浏览器窗口 行为 事件 为onClick 在浏览器中预览 36 任务5 2给网页添加背景音乐 步骤1 打开网页 步骤2 选择 命令 扩展管理 命令 弹出AdobeExtensionManager对话框 37 任务5 2给网页添加背景音乐 步骤3 在对话框中单击 安装新扩展 按钮 弹出 选取要安装的扩展 对话框 38 任务5 2给网页添加背景音乐 步骤4 在对话框中选择要安装的插件 单击 安装 按钮 AdobeExtensionManager提示信息框 39 任务5 2给网页添加背景音乐 步骤5 单击 接受 按钮 弹出成功安装提示框 40 任务5 2给网页添加背景音乐 步骤6 单击 确定 按