网页设计与应用

精选文库 网页设计与应用网页设计与应用 专专 业 业 计算机网络技术计算机网络技术 班班 级 级 2015 学学 号 号 20150321031 姓姓 名 名 蔡依婷蔡依婷 指导教师 指导教师 杨艳慈杨艳慈 邯郸职业技术学院邯郸职业技术学院 2017 年年 11 月月 21 日日 精选文库 网页设计与应用网页设计与应用 摘摘 要要 本论文将对个人网页设计与制作的方法 工具等展开研究和探讨 在介绍网页设计与 制作语言的基础上 着重使用 JavaScript 作为工具语言进行网页设计与制作的实际操作 分别对基于对象的 JavaScript 语言 内部对象系统的使用及 WEB 页面信息交互 窗口和 框架进行详细描述 并利用具体的实例进行验证 本论文主要章节如下 第一章 绪论 本章主要介绍网页设计的相关知识 第二章 网页设计语言概述 本章主要介绍网页设计的语言 HTML 以及用于编辑 HTML 语 言的软件 为后续工作奠定基础 第三章 基于对象的 JavaScript 语言 本章介绍了基于 对象的 JavaScript 中常用内部对象属性 方法的使用 第四章 内部对象系统的使用 本 章主要介绍使用浏览器的内部对象系统 可实现与 HTML 文档进行交互 第五章 WEB 页面信息的交互 窗体与框架 本章主要介绍实现网页的动态交互 必须掌握有关窗 体对象 Form 和框架对象 Frames 更为复杂的知识 关键词 关键词 网页制作 网页设计 HT ML ASP 精选文库 目目 录录 1 1 网页设计概述 4 1 2 网页设计的要素 4 1 3 大作业目的和意义 4 第二章 HTML 网页设计技术的应用 5 2 1 HTML 语言介绍 5 2 1 12 1 1 HTML 语言的特点语言的特点 5 2 1 22 1 2 HTML 语言的编辑软件语言的编辑软件 5 第三章 色彩在网页中的应用 6 3 1 色彩在网页中的应用 6 3 2 主页色彩的处理 6 3 3 常用的配色方案 6 第四章第四章 WEBWEB 页面信息的交互页面信息的交互 窗体与框架窗体与框架 7 4 1 窗体基础知识 7 4 1 14 1 1 窗体对象窗体对象 7 4 1 24 1 2 窗体对象的方法窗体对象的方法 8 4 2 窗体中的基本元素 8 4 3 窗体对象实例 10 4 4 框架 12 4 5 框架的访问 13 4 6 本章小结 16 第五章 结 论 17 致 谢 18 参考文献 19 精选文库 第一章 绪论 随着 21 世纪的到来 人们更深切地感受到计算机在生活和工作中的作用越来越重 要 越来越来的职业需要具有计算机的应用技能 掌握计算机是职业的需要 更是事 业发展的需要 网页设计与制作是计算机能力的具体表现 本章主要介绍网页设计的 相关知识 1 11 1 网页设计概述网页设计概述 网站是企业向用户和网民提供信息 包括产品和服务 的一种方式 是企业开展电子 商务的基础设施和信息平台 离开网站 或者只是利用第三方网站 去谈电子商务是 不可能的 企业的网址被称为 网络商标 也是企业无形资产的组成部分 而网站是 INTERNET 上宣传和反映企业形象和文化的重要窗口 1 21 2 网页设计的要素网页设计的要素 网页设计的两大要素是 整体风格和色彩搭配 一 确定网站的整体风格 在这里 我提供给大家一些参考经验 1 将你的标志 logo 尽可能的放在每个页面上最突出的位置 2 突出你的标准色彩 3 总结一句能反映贵站精髓的宣传标语 4 相同类型的图像采用相同效果 比如说标题字都采用阴影效果 那么在网站中 出现的所有标题字的阴影效果的设置应该是完全一致的 二 网页色彩的搭配 1 用一种色彩 这里是指先选定一种色彩 然后调整透明度或者饱和度 这样的 页面看起来色彩统一 有层次感 2 用两种色彩 先选定一种色彩 然后选择它的对比色 3 用一个色系 简单的说就是用一个感觉的色彩 例如淡蓝 淡黄 淡绿 或者 土黄 土灰 土蓝 1 31 3 大作业目的和意义大作业目的和意义 本大作业主要是对网页设计与制作的语言基础上进行探讨 主要内容如下 通 过已经做好的网页 分析 html 网页设计技术 XML 技术 Java Applet 技术和 Javascript 技术在网页设计中的应用 精选文库 精选文库 第二章第二章 HTMLHTML 网页设计技术的应用网页设计技术的应用 2 12 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 精选文库 第三章第三章 色色彩彩在在网网页页中中的的应应用用 3 1 色色彩彩在在网网页页中中的的应应用用 色彩是艺术表现的要素之一 在网页设计中 我们的设计师根据和谐 均衡和 重点突出的原则 将不同的色彩进行组合 搭配来构成美丽的页面 根据色彩 对人们心理的影响 合理地加以运用 先选定一种色彩 然后调整透明度或者饱和度 这样的页面看起来色彩统一 有层次感 简单的说就是用一个感觉的色彩 例如淡蓝 淡黄 淡绿 或者土黄 土灰 土蓝 在网页配色中不要将所有颜色都用到 尽量控制在三至五种色彩以内 背景和前文 的对比尽量要大以便突出主要文字内容 3 2 主主页页色色彩彩的的处处理理 色彩是人的视觉最敏感的东西 主页的色彩处理得好 可以锦上添花 达到事 半功倍的效果 色彩总的应用原则应该是 总体协调 局部对比 也就是 主 页的整体色彩效果应该是和谐的 只有局部的 小范围的地方可以有一些强烈色彩 的对比 在色彩的运用上 可以根据主页内容的需要 分别采用不同的主色调 因 为色彩具有象征性 例如 嫩绿色 翠绿色 金黄色 灰褐色就可以分别象征着春 夏 秋 冬 其次还有职业的标志色 例如 军警的橄榄绿 医疗卫生的白色等 色彩还具有明显的心理感觉 例如冷 暖的感觉 进 退的效果等 另外 色彩还 有民族性 各个民族由于环境 文化 传统等因素的影响 对于色彩的喜好也存在 着较大的差异 充分运用色彩的这些特性 可以使我们的主页具有深刻的艺术内涵 从而提升主页的文化品位 3 3 常常用用的的配配色色方方案案 1 暖色调 即红色 橙色 黄色 赭色等色彩的搭配 这种色调的运用 可使 主页呈现温馨 和煦 热情的氛围 2 冷色调 即青色 绿色 紫色等色彩的搭配 这种色调的运用 可使主页呈 现宁静 清凉 高雅的氛围 3 对比色调 即把色性完全相反的色彩搭配在同一个空间里 例如 红与绿 黄与紫 橙与蓝等 这种色彩的搭配 可以产生强烈的视觉效果 给人亮丽 鲜艳 喜庆的感觉 精选文库 最后 还要考虑主页底色 背景色 的深 浅 这里借用摄影中的一个术语 就是 高调 和 低调 底色浅的称为高调 底色深的称为低调 底色深 文字 的颜色就要浅 以深色的背景衬托浅色的内容 文字或图片 反之 底色淡的 文字的颜色就要深些 以浅色的背景衬托深色的内容 文字或图片 这种深浅的 变化在色彩学中称为 明度变化 当然 色彩的明度也不能变化太大 否则屏 幕上的亮度反差太强 同样也会使读者的眼睛受不了 第四章 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 24 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 元素值改变时 产生该文件 例 精选文库 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 指明当前选项是否被选中 精选文库 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 34 3 窗体对象实例窗体对象实例 下面我们演示通过点击一个按钮 red 来改变窗口颜色 点击 调用动态按钮文 档 调用一个动态按钮文档 test8 1 htm 精选文库 原来的颜色 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 精选文库 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 返回 精选文库 图 4 2 动态按钮网页图 本讲介绍了使用 JavaScript 脚本实现 Web 页面信息交互的方法 其中主要介绍了 窗体中的基本元素的主要功能和使用 4 44 4 框架框架 框架 Frames 最主要功用是 分割 视窗 使每个 小视窗 能显示不同的 HTM L 文件 不同框架之间可以互动 interact 这就是说不同框架之间可以交换讯息与资料 例 如 假设您开了两个 frames 第一个 frame 可显示书的目录 第二个 frame 则显示章 节的具体内容 框架可以将屏幕分割成不同的区域 每个区域有自己的 URL 通过 Frames 数组 对象来实现不同框架的访问 实际上框架对象本身也一类窗口 它继承了窗口对象的 所有特征 并拥有所有的属性和方法 利用框架的例子具体说明 见图 5 3 所示 图 4 3 框架对象 精选文库 以上 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 精选文库 第一个框架 主要作用是显示标题文档 Test9 1 htm 使用框架实现 WEB 交互 第二个框架 主要作用是实现交互 可以通过 JavaScript 脚本将所示的 云南省 和 四川省 分别改为 昆明市 和 成都市 Test9 2 htm 请选择城市 山西省 四川省 贵州省 山东省 江苏省 浙江省 安徽省 河南省 精选文库 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 所示 精选文库 图 4 4 在浏览器中结果 4 64 6 本章小结本章小结 本章主要介绍框架中的基本元素的主要功能和使用 利用 JavaScript 脚本可以非 常方便 灵活地实现 Web 页面更为复杂的信息交互 这是 HTML 标识语言所不能具 备的 从中可以了解到 JavaScript 是 Web 涉及人员的良好工具 精选文库 第五章第五章 结结 论论 不知不觉中网页设计与制作的毕业毕业设计将要结束了 这门课程所包含内容的 丰富是