网页制作课程设计报告

网页设计报告网页设计报告 祖国六十年祖国六十年 学号 3123420 姓名 赵佐权姓名 赵佐权 2012 12 162012 12 16 精品文档 2欢迎下载 目录目录 一 设计目的一 设计目的 3 3 二 设计思想二 设计思想 3 3 三 网页详细设计分析三 网页详细设计分析 4 4 1 1 建立布局建立布局 4 4 2 2 网页中的图像 网页中的图像 4 4 1 1 在网页中插入图像 在网页中插入图像 4 4 2 2 图像的各种属性设置 图像的各种属性设置 5 5 3 3 怎样编辑网页中的图像 怎样编辑网页中的图像 6 6 4 4 使用背景图像 使用背景图像 7 7 5 5 设置链接 设置链接 8 8 四 网页说明四 网页说明 8 8 五 总结五 总结 1010 精品文档 3欢迎下载 网页设计试验报告网页设计试验报告 一 设计目的一 设计目的 本课程的设计目的是通过实践使我经历 Dreamweaver 8 开发的 全过程和受到一次综合训练 以便能较全面地理解 掌握和综合运 用所学的知识 结合具体的开发案例 理解并初步掌握运用 Dreamweaver8 可视化开发工具进行网页开发的方法 了解网页设计 制作过程 我本次主要是设计的 祖国六十年 为主题的网页 针 对祖国六十年的发展了介绍 二 设计思想二 设计思想 利用 Dreamweaver8 制作一个关于 祖国六十年 的网站 利用 表格 行为 层和链接等网页设计技术设计页面 本网站以新中国发展为素材 主要讲解了与新中国变化相关的 内容 精品文档 4欢迎下载 各网站链接示意图如下所示 祖国六十年祖国六十年 国情总览国情总览经济发展经济发展航天事业航天事业武器装备武器装备 人口增长人口增长 环境保护环境保护 法律体系法律体系 教育体系教育体系 卫生体系卫生体系 北京北京 上海上海 深圳深圳 天津天津 杭州杭州 东方红一号东方红一号 神州五号神州五号 嫦娥一号嫦娥一号 神州八号神州八号 天宫一号天宫一号 红鸟导弹红鸟导弹 翼龙无人机翼龙无人机 L 15 教练机教练机 99 式坦克式坦克 辽宁号辽宁号 三 网页详细设计分析三 网页详细设计分析 1 1 建立布局建立布局 在这次的网页设计中用到大量的布局 所以怎么样建立布局 是关键 Dreamweaver 8 是大多数人设计网页的称手兵器 也是众 多入门者的捷径 特别是其在布局方面的出色表现 更受青睐 大 家都知道 没有表格的帮助 很难组织出一个协调合理的页面 2 2 网页中的图像 网页中的图像 1 1 在网页中插入图像 在网页中插入图像 利用 Dreamweaver 8 可以方便地在网页中插入图像 还可以设置图像边框 大小 和 精品文档 5欢迎下载 位置 并且可以直接对图像进行编辑 在网页中加入图像的操作非常简单 1 新建一个空白网页 把光标定位在网页的开始位置 2 打开 工具 菜单 选择 图片 菜单项 在子菜单中选择 来自文件 菜单项 或者单击工具栏中的图片工具图标 弹出一个 图片 对话框 3 在此对话框中单击 浏览 按钮 出现一个 选择文件 对话框 4 在 选择文件 对话框的文件列表中选择某个图像文件 然后单击 确定 按钮 或直接双击该图像文件 该图像即被加入到网页中 在网页中插入图像后我们就可以对图 像的各种属性进行设置了 2 2 图像的各种属性设置 图像的各种属性设置 1 选中所插入的图片 单击鼠标右键 弹出一个快捷菜单 在菜单中选择 图片属性 菜单项 出现一个 图片属性 对话框 2 打开 外观 选项卡 1 设定图像边框粗细 在 外观 选项卡的 布局 栏里可以根据需要定义图像的边 框 也可以定义边框值为 0 即无边框 2 设置图像环绕方式 一般情况下一幅图像只能与一行文字处在同一高度 但有时需 要将图像和文字分开 且两者互不影响 比如在网页左边插入一幅图像 要求右边的文字 就像没有图像时可以多行输入 这就要通过设置图像的环绕方式来实现 在网页中图像的 环绕方式有两种 左环绕 图像在左边 文本在图像的右边进行环绕 右环绕 图像在右边 文本在图像的左边进行环绕 在 外观 选项卡的 布局 栏中打开 对齐方式 下拉列表框 选择 左 选项 精品文档 6欢迎下载 并单击 确定 按钮 图像就被设置为左环绕方式 同样 如果选 右 图像就被设置为 右环绕方式 3 编辑图像大小 在 Dreamweaver8 中 当在网页中加入一幅图像后 图像大小默认 设置为其原来的大小 如果加入的图像太大或太小 或有其他特别需要 就得调整图像的 大小 调整图像大小非常简单灵活 只要你选中加入的图像 用鼠标左键拖动图像边框 可任意调整图像的宽度和高度直到达到你满意的尺寸 4 设置图像缩放比例 网页设计的一个重要原则就是网页的兼容性 对于不同的浏览 器或者不同的分辨率 不管是 800 600 的窗口 还是 1024 768 的窗口 网页都要能正常 的显示 设置图像缩放比例就是将图像设置为大小可以按比例变化 与浏览器的大小成一 固定比例 这样在不同大小的浏览器窗口里图像都能正常的显示外观 设置图像缩放比例 的步骤如下 1 选中网页中的图像 单击鼠标右键 在弹出的快捷菜单里 选择 图像属性 菜单 项 弹出一个 图像属性 对话框 2 在 大小 栏中选中 指定大小 复选框 同时选中 宽度 和 高度 下面的 百分比 单选按钮 然后在 宽度 和 高度 栏里输入想显示的比例 单击 确定 完成设置 外还可以在 外观 选项卡的 水平间距 和 垂直间距 栏里进行设置 水 平间距是指图像与周围元素在水平方向的间距 以象素为单位 垂直间距指图像与周围元 素在垂直方向的间距 3 3 怎样编辑网页中的图像 怎样编辑网页中的图像 在 Dreamweaver8 中 可以使用 图片 工具栏中的各种工具对 网页中的图像进行编辑 编辑功能主要有 图像旋转和翻转 剪裁 精品文档 7欢迎下载 图像淡化 凹凸效果等等 另外 为了使图片更符合要求 我们还在 photoshop 中对所用 的图片进行了处理 使得图片看起来更加精细美观 符合我们的主 题要求 4 4 使用背景图像 使用背景图像 使用背景图像与使用背景色不同 使用背景色只将网页的背景 用某种颜色填充 而使用背景图像则是将网页的背景用图像平铺 这样做可以使制作的网页更美观好看 网页中使用背景图像的具体 步骤如下 1 新建一个空白网页 2 单击鼠标右键 弹出的快捷菜单里选 网页属性 弹出 网 页属性 对话框 3 开 背景 选项卡 4 在 背景 选项卡的 格式 栏中选中 背景图片 复选框 然后单击下面的 浏览 按钮 出现一个 选择背景图片 对话框 5 在 选择背景图像 对话框中单击 浏览文件 按钮 出现 一个 选择文件 对话框 6 在 选择文件 对话框的文件列表中选择图像文件 单击 确定 按钮 这样 所选图片将作为整个网页的背景 如果在第 4 步时同时 精品文档 8欢迎下载 选中 水印 复选框 背景图片将显示为特殊的水印效果 当网页 滚动时 背景不动 只有网页内容滚动 产生一种透明层的效果 非常吸引人 5 5 设置链接 设置链接 选中图片或者文字 在下面的链接属性中输入所要连接到的地 址 同时 下方的目标属性被激活 输入 blank 设置成在新窗口中 打开网页 我们设置了链接本站点的网页页面 同时也连接了外网 使得大家访问页面时能够查询更多详细的信息 方便用户查询 四 网页说明四 网页说明 1 在首页中 分别连接在不同的网页中 精品文档 9欢迎下载 友情链接 连接到与之对应的网站 同时在其 他网页中也用同样的作用 2 在 国情总览 网页中 分别连接在本网页的相应位置 精品文档 10欢迎下载 不同栏目中不同的资料 通过点击可以连接到本页中的对应位置 3 在 经济发展 网页中 点击后分别连接到五个地方经济发展的状况 4 在 航天事业 网页中 点击后分别连接到在中国航天史上具有重要意义的时刻的叙述中 5 在 武器发展 网页中 通过点击可以进入相关武器的介绍中去 五 总结五 总结 通过这次网页课程设计激发学习兴趣 调动学习的自觉性 自 精品文档 11欢迎下载 己动脑 动手 动口 运用网络资源 结合教材及老师的指导 通 过自身的实践 创作出积聚个人风格 个性的个人网页 总体来说 整个学期的学习过程 我学会了很多知识 在此次网页设计中 我充分利用了这次设计的机会 全心全 意投入到网页世界 去不断的学习 去不断的探索 同时去不断的 充实 去不断的完善自我 在网络的天空下逐渐的美化自己的人生 做好页面 并不是一件容易的事 它包括个人主页的选题 内容采集整理 图片的处理 页面的排版设置 背景及其整套网页 的色调等很多东西 本次课程设计不是很好 页面过于简单 创新 意识反面薄弱 这是我需要提高的地方 需要学的地方还有很多 需要有耐心 坚持 不断的学习 综合运用多种知识 才能设计出