网页设计与应用.doc

1 网页设计与应用 专 业 计算机网络技术 班 级 2015 学 号 20150321031 姓 名 蔡依婷 指导教师 杨艳慈 邯郸职业技术学院 2017 年 11 月 21 日 摘要2 网页设计与应用 摘 要 本论文将对个人网页设计与制作的方法 工具等展开研究和探讨 在介绍网页设计与 制作语言的基础上 着重使用 JavaScript 作为工具语言进行网页设计与制作的实际操作 分别对基于对象的 JavaScript 语言 内部对象系统的使用及 WEB 页面信息交互 窗口和 框架进行详细描述 并利用具体的实例进行验证 本论文主要章节如下 第一章 绪论 本章主要介绍网页设计的相关知识 第二章 网页设计语言概述 本章主要介绍网页设计的语言 HTML 以及用于编辑 HTML 语 言的软件 为后续工作奠定基础 第三章 基于对象的 JavaScript 语言 本章介绍了基于 对象的 JavaScript 中常用内部对象属性 方法的使用 第四章 内部对象系统的使用 本 章主要介绍使用浏览器的内部对象系统 可实现与 HTML 文档进行交互 第五章 WEB 页面信息的交互 窗体与框架 本章主要介绍实现网页的动态交互 必须掌握有关窗 体对象 Form 和框架对象 Frames 更为复杂的知识 关键词 网页制作 网页设计 HT ML ASP 3 3 目 录 1 1 网页设计概述 4 1 2 网页设计的要素 4 1 3 大作业目的和意义 4 第二章 HTML 网页设计技术的应用 5 2 1 HTML 语言介绍 5 2 1 1 HTML 语言的特点 5 2 1 2 HTML 语言的编辑软件 5 第三章 色 彩 在 网 页 中 的 应 用 6 3 1 色 彩 在 网 页 中 的 应 用 6 3 2 主 页 色 彩 的 处 理 6 3 3 常 用 的 配 色 方 案 6 第四章 WEB 页面信息的交互 窗体与框架 7 4 1 窗体基础知识 7 4 1 1 窗体对象 7 4 1 2 窗体对象的方法 8 4 2 窗体中的基本元素 8 4 3 窗体对象实例 10 4 4 框架 12 4 5 框架的访问 13 4 6 本章小结 16 第五章 结 论 17 致 谢 18 参考文献 19 绪论 4 4 第一章 绪论 随着 21 世纪的到来 人们更深切地感受到计算机在生活和工作中的作用越来越重 要 越来越来的职业需要具有计算机的应用技能 掌握计算机是职业的需要 更是事 业发展的需要 网页设计与制作是计算机能力的具体表现 本章主要介绍网页设计的 相关知识 1 1 网页设计概述 网站是企业向用户和网民提供信息 包括产品和服务 的一种方式 是企业开展电子 商务的基础设施和信息平台 离开网站 或者只是利用第三方网站 去谈电子商务是 不可能的 企业的网址被称为 网络商标 也是企业无形资产的组成部分 而网站是 INTERNET 上宣传和反映企业形象和文化的重要窗口 1 2 网页设计的要素 网页设计的两大要素是 整体风格和色彩搭配 一 确定网站的整体风格 在这里 我提供给大家一些参考经验 1 将你的标志 logo 尽可能的放在每个页面上最突出的位置 2 突出你的标准色彩 3 总结一句能反映贵站精髓的宣传标语 4 相同类型的图像采用相同效果 比如说标题字都采用阴影效果 那么在网站中 出现的所有标题字的阴影效果的设置应该是完全一致的 二 网页色彩的搭配 1 用一种色彩 这里是指先选定一种色彩 然后调整透明度或者饱和度 这样的 页面看起来色彩统一 有层次感 2 用两种色彩 先选定一种色彩 然后选择它的对比色 3 用一个色系 简单的说就是用一个感觉的色彩 例如淡蓝 淡黄 淡绿 或者 土黄 土灰 土蓝 1 3 大作业目的和意义 本大作业主要是对网页设计与制作的语言基础上进行探讨 主要内容如下 通 过已经做好的网页 分析 html 网页设计技术 XML 技术 Java Applet 技术和 Javascript 技术在网页设计中的应用 绪论 5 5 第二章 6 6 第二章 HTML 网页设计技术的应用 2 1 HTML 语言介绍 HTML HyperText Mark up Language 即超文本标记语言或超文本链接标示语言 是目前网络上应用最为广泛的语言 也是构成网页文档的主要语言 HTML 文本是由 HTML 命令组成的描述性文本 HTML 命令可以说明文字 图形 动画 声音 表格 链接等 HTML 的结构包括头部 Head 主体 Body 两大部分 其中头部描述浏览器所需的信息 而主体则包含所要说明的具体内容 2 1 1 HTML 语言的特点 HTML 文档制作不是很复杂 且功能强大 支持不同数据格式的文件镶入 这也 是 WWW 盛行的原因之一 HTML 语言的特点如下 1 简易性 HTML 版本升级采用超集方式 从而更加灵活方便 2 可扩展性 HTML 语言的广泛应用带来了加强功能 增加标识符等要求 HTML 采取子类元素的方式 为系统扩展带来保证 3 平台无关性 虽然 PC 机大行其道 但使用 MAC 等其他机器的大有人在 HTML 可以使用在广泛的平台上 这也是 WWW 盛行的另一个原因 2 1 2 HTML 语言的编辑软件 HTML 的本质是文本 需要浏览器的解释 HTML 的编辑器大体可以分为三种 1 基本编辑软件 使用 WINDOWS 自带的记事本或写字版都可以编写 当然 如果你用 WPS 来编写 也可以 不过存盘时请使用 htm 或 html 作为扩展名 这样浏 览器就可以解释执行了 2 半所见即所得软件 这种软件能大大提高开发效率 它可以使你在很短的时间 内做出 Homepage 且可以学习 HTML 这种类型的软件主要有 HOTDOG 还有国产 的软件网页作坊 3 所见即所得软件 使用最广泛的编辑器 完全可以一点不懂 HTML 的知识就可 以做出网页 这类软件主要有 Frontpage DREAMWEAVER Delphi Eclipse UltraEdit 第三章 7 7 第三章 色 彩 在 网 页 中 的 应 用 3 1 色 彩 在 网 页 中 的 应 用 色 彩 是 艺 术 表 现 的 要 素 之 一 在 网 页 设 计 中 我 们 的 设 计 师 根 据 和 谐 均 衡 和 重 点 突 出 的 原 则 将 不 同 的 色 彩 进 行 组 合 搭 配 来 构 成 美 丽 的 页 面 根 据 色 彩 对 人 们 心 理 的 影 响 合 理 地 加 以 运 用 先 选 定 一 种 色 彩 然 后 调 整 透 明 度 或 者 饱 和 度 这 样 的 页 面 看 起 来 色 彩 统 一 有 层 次 感 简 单 的 说 就 是 用 一 个 感 觉 的 色 彩 例 如 淡 蓝 淡 黄 淡 绿 或 者 土 黄 土 灰 土 蓝 在 网 页 配 色 中 不 要 将 所 有 颜 色 都 用 到 尽 量 控 制 在 三 至 五 种 色 彩 以 内 背 景 和 前 文 的 对 比 尽 量 要 大 以 便 突 出 主 要 文 字 内 容 3 2 主 页 色 彩 的 处 理 色 彩 是 人 的 视 觉 最 敏 感 的 东 西 主 页 的 色 彩 处 理 得 好 可 以 锦 上 添 花 达 到 事 半 功 倍 的 效 果 色 彩 总 的 应 用 原 则 应 该 是 总 体 协 调 局 部 对 比 也 就 是 主 页 的 整 体 色 彩 效 果 应 该 是 和 谐 的 只 有 局 部 的 小 范 围 的 地 方 可 以 有 一 些 强 烈 色 彩 的 对 比 在 色 彩 的 运 用 上 可 以 根 据 主 页 内 容 的 需 要 分 别 采 用 不 同 的 主 色 调 因 为 色 彩 具 有 象 征 性 例 如 嫩 绿 色 翠 绿 色 金 黄 色 灰 褐 色 就 可 以 分 别 象 征 着 春 夏 秋 冬 其 次 还 有 职 业 的 标 志 色 例 如 军 警 的 橄 榄 绿 医 疗 卫 生 的 白 色 等 色 彩 还 具 有 明 显 的 心 理 感 觉 例 如 冷 暖 的 感 觉 进 退 的 效 果 等 另 外 色 彩 还 有 民 族 性 各 个 民 族 由 于 环 境 文 化 传 统 等 因 素 的 影 响 对 于 色 彩 的 喜 好 也 存 在 着 较 大 的 差 异 充 分 运 用 色 彩 的 这 些 特 性 可 以 使 我 们 的 主 页 具 有 深 刻 的 艺 术 内 涵 从 而 提 升 主 页 的 文 化 品 位 3 3 常 用 的 配 色 方 案 1 暖 色 调 即 红 色 橙 色 黄 色 赭 色 等 色 彩 的 搭 配 这 种 色 调 的 运 用 可 使 主 页 呈 现 温 馨 和 煦 热 情 的 氛 围 2 冷 色 调 即 青 色 绿 色 紫 色 等 色 彩 的 搭 配 这 种 色 调 的 运 用 可 使 主 页 呈 现 宁 静 清 凉 高 雅 的 氛 围 3 对 比 色 调 即 把 色 性 完 全 相 反 的 色 彩 搭 配 在 同 一 个 空 间 里 例 如 红 与 绿 黄 与 紫 橙 与 蓝 等 这 种 色 彩 的 搭 配 可 以 产 生 强 烈 的 视 觉 效 果 给 人 亮 丽 鲜 艳 喜 庆 的 感 觉 第四章 8 8 最 后 还 要 考 虑 主 页 底 色 背 景 色 的 深 浅 这 里 借 用 摄 影 中 的 一 个 术 语 就 是 高 调 和 低 调 底 色 浅 的 称 为 高 调 底 色 深 的 称 为 低 调 底 色 深 文 字 的 颜 色 就 要 浅 以 深 色 的 背 景 衬 托 浅 色 的 内 容 文 字 或 图 片 反 之 底 色 淡 的 文 字 的 颜 色 就 要 深 些 以 浅 色 的 背 景 衬 托 深 色 的 内 容 文 字 或 图 片 这 种 深 浅 的 变 化 在 色 彩 学 中 称 为 明 度 变 化 当 然 色 彩 的 明 度 也 不 能 变 化 太 大 否 则 屏 幕 上 的 亮 度 反 差 太 强 同 样 也 会 使 读 者 的 眼 睛 受 不 了 第四章 WEB 页面信息的交互 窗体与框架 要实现网页的动态交互 必须掌握有关窗体对象 Form 和框架对象 Frames 更为复杂的知识 4 1 窗体基础知识 窗体对象可以使设计人员能用窗体中不同的元素与客户机用户相交互 而用不着 在之前首先进行数据输入 就可以实现动态改变 Web 文档的行为 4 1 1窗体对象 窗体 Form 它构成了 Web 页面的基本元素 通常一个 Web 页面有一个窗体 或几个窗体 使用 Forms 数组来实现不同窗体的访问 在 Forms 0 中共有三个基本元素 而 Forms 1 中只有两个元素 窗体对象最主要的功能就是能够直接访问 HTML 文档中的窗体 它封装了相关的 HTML 代码 4 1 2 窗体对象的方法 窗体对象的方法只有一个 submit 方法 该方法主要功用就是实现窗体信息的 提交 如提交 Mytest 窗体 则使用下列格式 document mytest submit 4 2 窗体中的基本元素 窗体中的基本元素由按钮 单选按钮 复选按钮 提交按钮 重置按钮 文本框 等组成 在 JavaScript 中要访问这些基本元素 必须通过对应特定的窗体元素的数组下标 或窗体元素名来实现 每一个元素主要是通过该元素的属性或方法来引用 其引用的 基本格式见下 formName elements methadName 窗体名 元素名或数组 方法 formName elemaent propertyName 窗体名 元素名或数组 属性 下面分别介绍 1 Text 单行单列输入元素 功能 对 Text 标识中的元素实施有效的控制 基本属性 Name 设定提交信息时的信息名称 对应于 HTML 文档中的 Name Value 用以设定出现在窗口中对应 HTML 文档中 Value 的信息 defaultvalue 包括 Text 元素的默认值 基本方法 blur 将当前焦点移到后台 select 加亮文字 主要事件 onFocus 当 Text 获得焦点时 产生该事件 OnBlur 从元素失去焦点时 产生该事件 Onselect 当文字被加亮显示后 产生该文件 onchange 当 Text 元素值改变时 产生该文件 例 第四章 10 10 document mytest value that is a Javascript document mytest select document mytest blur 2 textarea 多行多列输入元素 功能 实施对 Textarea 中的元素进行控制 基本属性 name 设定提交信息时的信息名称 对应 HTML 文档 Textarea 的 Name Value 用以设定出现在窗口中对应 HTML 文档中 Value 的信息 Default value 元素的默认值 方法 blur 将输入焦点失去 select 将文字加亮后 事件 onBlur 当失去输入焦点后产生该事件 onFocus 当输入获得焦点后 产生该文件 Onchange 当文字值改变时 产生该事件 Onselect 当文字加亮后 产生该文件 3 Select 选择元素 功能 实施对滚动选择元素的控制 属性 name 设定提交信息时的信息名称 对应文档 select 中的 name Length 对应文档 select 中的 length options 组成多个选项的数组 selectIndex 该下标指明一个选项 select 在中每一选项都含有以下属性 Text 选项对应的文字 selected 指明当前选项是否被选中 第四章 11 11 Index 指明当前选项的位置 defaultselected 默认选项 事件 OnBlur 当 select 选项失去焦点时 产生该文件 onFocas 当 select 获得焦点时 产生该文件 Onchange 选项状态改变后 产生该事件 4 Button 按钮 功能 实施对 Button 按钮的控制 属性 Name 设定提交信息时的信息名称 对应文档中 button 的 Name Value 用以设定出现在窗口中对应 HTML 文档中 Value 的信息 方法 click 该方法类似于一个按下的按钮 事件 onclick 当单击 button 按钮时 产生该事件 例 document elements 0 value mytest 通过元素访问 或 document testcallvalue mytest 通过名字访问 4 3窗体对象实例 下面我们演示通过点击一个按钮 red 来改变窗口颜色 点击 调用动态按钮文 档 调用一个动态按钮文档 test8 1 htm 第四章 12 12 原来的颜色 document bgColor blue document vlinkColor white document linkColor yellow document alinkcolor red 动态改变颜色 function changecolor document bgColor red document vlinkColor blue document linkColor green document alinkcolor blue 调用动态按钮文档 输出结果见图 4 1 所示 图 4 1 调用动态按钮图 动态按钮程序 test8 2 htm 第四章 13 13 var id pause 0 position 0 function banner variables declaration var i k msg 这里输入你要的内容 increase msg k 30 msg length 1 for i 0 i banner 返回 第四章 14 14 图 4 2 动态按钮网页图 本讲介绍了使用 JavaScript 脚本实现 Web 页面信息交互的方法 其中主要介绍了 窗体中的基本元素的主要功能和使用 4 4 框架 框架 Frames 最主要功用是 分割 视窗 使每个 小视窗 能显示不同的 HTM L 文件 不同框架之间可以互动 interact 这就是说不同框架之间可以交换讯息与资料 例 如 假设您开了两个 frames 第一个 frame 可显示书的目录 第二个 frame 则显示章 节的具体内容 框架可以将屏幕分割成不同的区域 每个区域有自己的 URL 通过 Frames 数组 对象来实现不同框架的访问 实际上框架对象本身也一类窗口 它继承了窗口对象的 所有特征 并拥有所有的属性和方法 利用框架的例子具体说明 见图 5 3 所示 图 4 3 框架对象 第四章 15 15 以上 HTML 标识将屏幕分成三个框架 先将窗口分成以二行为单位的窗口 之后 再按分成二个窗口 并在相应的框架中放入自己的 HTML 文档 通过 Framset 告诉浏览器您要设置几个框架 rows 这项参数告诉浏览器您想将视 窗分割成几列 而 cols 这项参数是告诉浏览器您想将视窗分割成几行 可以用很多组的 tags 将视窗分割得更复杂 可以给每个 frame 一个 名字 name frame 的名字在 JavaScript 语法中的地位 非常重要 可以用 告诉浏览器要载入的 HTML 文件 4 5 框架的访问 在前面我们介绍过使用 document forms 实现单一窗体中不同元素的访问 而要实 现框架中多窗体的不同元素的访问 则必须使用 window 对象中的 Frames 属性 Frames 属性同样也是一个数组 他在父框架集中为每一个子框架设有一项 通过下标 实现不同框架的访问 parent frames Index1 docuement forms index2 通过 parent frames length 确定窗口中窗体的数目 除了使用数组下标来访问窗体外还可以使用框架名和窗体名来实现各元素的访问 parent framesName decument formNames elementName m p 通过一个具体的实例 来说明利用 JavaScript 脚本在 WEB 中实现更为复杂的信息 交互 该例子是在一个多窗口中实现窗体信息的动态交互 在程序中首先在浏览器窗 口中制作三个用于窗体交互的窗口 每个窗体窗口实现不同信息的动态交互 tset9 html 为主调用文档它首先将窗口划分为具有二行的窗体 尔后再将第二行的 窗体划分为具有二列的窗体 test9 1 html 为显示标题文档 test9 2 html 为第二框架文档其中需要注意的是 通过 JavaScript 脚本将所示的 云南省 和 四川省 分别改为 昆明市 和 成都市 test7 3 html 为第三框架文档 主调文档 主要作用是将窗口划分为具有二行的窗体 尔后再将第二行的窗体划分为具有二列 的窗体 Test9 htm 第四章 16 16 第一个框架 主要作用是显示标题文档 Test9 1 htm 使用框架实现 WEB 交互 第二个框架 主要作用是实现交互 可以通过 JavaScript 脚本将所示的 云南省 和 四川省 分别改为 昆明市 和 成都市 Test9 2 htm 请选择城市 山西省 四川省 贵州省 山东省 江苏省 浙江省 安徽省 河南省 第四章 17 17 document test9 1 elements 0 options 0 text 太原市 document test9 1 elements 0 options 1 text 成都市 第三个框架 主要作用是实现交互 Test9 3 htm 请输入用户名 请选择 全部信息 部分信息 所有城市 document test9 2 elements 0 value 劳动和社会保障 document test9 2 elements 1 checked true document test9 2 elements 2 checked true document test9 2 elements 3 checked false 在浏览器中的结果见图 5 4 所示 第四章 18 18 图 4 4 在浏览器中结果 4 6本章小结 本章主要介绍框架中的基本元素的主要功能和使用 利用 JavaScript 脚本可以非 常方便 灵活地实现 Web 页面更为复杂的信息交互 这是 HTML 标识语言所不能具 备的 从中可以了解到 JavaScript 是 Web 涉及人员的良好工具 结论 19 19 第五章 结 论 不知不觉中网页设计与制作的毕业毕业设计将要结束了 这门课程所包含内容的 丰富是让我从没有想到的 在整个的学习过程中 我学习了 Flash Dreamwave Javascript Fireworks Html 语言 IIS 网站建设的基本思想 等重要内容 到现在为止 我还是很庆幸能够学到这么多的内容 网页设计与制作毕业设计是在指导教师的悉心指导下独立完成的 虽然整个整个 内容还有很多不足 但是我的确能够感到在我制作过程中技能的提高 在今后的学习 生活中 我将不断提高自己网页设计与制作的能力和水平 从而弥补在本次毕业设计 中的不足 致谢 20 20 致 谢 本论文历时两个多月 我系统综合地将我所学的知识运用于毕业设计的全过程 在完成毕业设计中 首先我要感谢我的指导教师曹正文老师 曹老师耐心细致地指导 我毕业设计 提出了很多精辟而富有建设性的建议 曹老师认真负责的工作态度 严 谨的治学态度都给我留下了深刻的印象 在学习上给予了我极大的关心和帮助 在此 表示衷心感谢 同时 感谢西安电子科技大学网络学院为我提供了一个良好的学习环境 感谢学 院的领导和老师们 他们无微不至的关怀 精心的培养使我到了很多的知识 终生受 益 21 21 参考文献 1 徐国平 网页设计与制作 M 北京 机械工业出版社 2008 年 2 胡珊 个人网页设计与制作 J 电脑学习 2009 年 第 2 期 28 29 页 3 周琦 关于网页设计与制作技术的探讨 J 电脑知识与技术 2009 年 第 26 期 7376 7378 页 4 唐永明 浅议网页设计与制作 J 科技信息 2009 年 第 20 期 193 页 5 张明月 网页设计与制作研究 J 邯郸职业技术学院学报 2009 年 第 2 期 82 84 页 6 王君学 网页设计与制作 J 北京 人民邮电出版社 2009 年 7 吴以欣 陈小宁 动态网页设计与制作 CSS JavaScript M 人民邮电出版社 2009 年 8 泽卡斯著 李松峰 曹力译 JavaScript 高级程序设计 第 2 版 J 人民邮电出版 社 2010 年 9 周爱民 JAVASCRIPT 语言精髓与编程实践 J 北京 电子工业出版社 2008 年