java_毕业论文门户网站开发中技术阐述(编辑修改稿)

java_毕业论文门户网站开发中技术阐述(编辑修改稿)内容摘要：

主流浏览器，并配合程序完成静态页面 的整合工作。 另外，要对网站做一些相应的更新，维护及优化。 整个网站开发的流程在后面有具体介绍。 前端开发在整个过程中占据着不可替代的地位，其它几个环节主要给予相关的配合。 前端开发工具 （ 1） Dreamweare 简介 7 Dreamweare 是美国 MA CROMEDIA 公司开发的集网页制作和管理网站于一身的所见即所得 网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。 使用网站地图可以快速制作网站雏形，设计，更新和重组网页。 改变网页位置或档案名称， Dreamweare 会自动更新所有链接。 使用支援文字， HTML 码，HTML 属性标签和一般语法的搜 寻及置换功能使得复杂的网站更新变得迅速又简单。 （ 2） Photoshop 简介 Adobe Photoshop，简称“ PS”，是一个由 Adobe Systems 开发和发行的图像处理软件。 Photoshop 主要处理以像素所构成的数字图像。 使用其众多的编修与绘图工具，可以更有效的进行图片编辑工作。 在网站前端开发过程中需要把图片用 Photoshop 处理成加载到网站页面的图片，用 Photoshop 的 切片工具获得简单的 css 代码。 （ 3） 谷歌 浏览器 简介 Google Chrome，又称 谷歌 浏览器，是一个由 Google（谷歌）公司开发的开放原始码网页浏览器。 该浏览器是基于其他开放原始码软件所撰写，包括WebKit 和 Mozilla，目标是提升 稳定 性 、速度 和安全性 ，并创造出简单且有效率的使用者界面。 Google Chrome 的特点是简洁、快速。 Google Chrome 支持多标签浏览，每个标签页面都在独立的 “ 沙箱 ” 内运行，在提高安全性的同时，一个标签页面的崩溃也不会导致其他标签页面被关闭。 此外， Google Chrome 基于更强大的 JavaScript V8 引擎，这是当前 Web 浏览器所无法实现的。 前端开发相关技术 DIV+CSS 简介 a. 什么是 div。 8 di标签和其他 HTML 标签都是一样的，都要由关闭标志。 要是不擦入 css样式表，它的效果和 p标记一样。 div代码如下： div内容 /div 如果把 css 的扩展属性放入 div 标签中，那么可以控制 div 容器中的元素显示在屏幕的具体位置，为了控制一一对应，最好是给当前的 div 加上标识 id名，以区分其他 div 标记。 另外一种情况是如果你想让多个个 div 具有相同的样式属性时，可以给每个 div 加上相同的 class 属性，这种具同样 class 属性的 div 标记样式相同。 如下： div id=”wrap” 内容 /div div class=”button” 内容 /div b． 什么是 CSS。 CSS 是英文 Cascading Style Sheet 缩写形式，中文意思为级联样式表或层叠样式表。 网页设计师可用它来定义文档的表现样式，这里指的文档不仅限于（ X） HTML。 通过 CSS，设计师可控制文档的颜色、字体、链接、图像、表格和布局格式，设计师也可以将表现充网页内容中分离出来，放在网页的某一处，而且可以保持一个独立文件存放，大大得减少文件容量，节省网络和空间的带宽、节约网页维护这的维护时间。 CSS 有如此多的好处，使用好和掌握 CSS技术对于网页设计师来说是非常重要的。 c． 什么 是 DIV+CSS。 DIV+CSS 是网站标准中常用术语之一， div+css 是布局方式一种形式 ,这种网页布局有有别于传统的表格网页布局 ,真正的达到由 w3c 提出的内容与表现的分离。 自从 以来， W3C 就没有发布过新版本，因为 html 变得越来越复杂了、更专用化。 Xhtml 语言可以将 html 语言标准化，用 XHTML 语言编写的 HTML 页面，就可以使用 xml 技术。 使得网页有更好的扩展性，适用数据自动交换，而且更加规整。 现在大多网站都已经使用 div+css 布局而放弃了表格布局 9 Javascript 基本特点 (1) 基于对象的语言 javascript是一种基于对象的语言，同时也可以看作一种面向对象的。 这意味着它能运用自己已经创建的对象。 因此，许多功能可以来自于脚本环境中对象的方法与脚本的相互作用。 (2) 简单性 javascript 的简单性主要体现在：首先它是一种基于 Java 基本语句和控制流之上的简单而紧凑的设计， 从而对于学习 Java 是一种非常好的过渡。 其次它的变量类型是采用弱类型，并未使用严格的数据类型。 (3) 安全性 javascript 是一种安全性语言，它不允许访问本地的硬盘，并不能将数据存入到服务器上，不允许对网 络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互。 从而有效地防止数据的丢失。 (4) 动态性 javascript 是动态的，它可以直接对用户或客户输入做出响应，无须经过Web 服务程序。 它对用户的反映响应，是采用以事件驱动的方式进行的。 所谓事件驱动，就是指在主页 (Home Page)中执行了某种操作所产生的动作，就称为“事件” (Event)。 比如按下鼠标，移动窗口，选择菜单等都可以视为事件。 当事件发生后，可能会引起相应的事件响应。 本章小结 本章介绍了开发 XXXXXXXX 培训中心 网 站前端所需要的开发工具和他们的运行环境，同时讲述了相关的前端开发技术比如： Javascript ， DIV＋ CSS 等。 以便以后的开发过程中能够对这些开发工具盒技术有深刻的理解。 10 第 3 章 前端布局分析与设计 前端总体开发流程及设计 前端设计 Web 前端开发技术是一个先易后难的过程 ，主要包括三个要素：HTML， CSS 和 JavaScript ，这就要求前端开发工程师不仅要掌握基本的 Web前端开发技术 ，网站性能优化， SEO 和服务器端的基础知识，而且要学会运用各种工具进行辅助开发以及理论层面的知识 ，包括代 码的可维护性，组件的易用性，分层语义模板和浏览器分级支持等。 分层开发 在 XXXXXXXX 培训中心 网站概要确定后就需要进行分层开发的划分， 根据项目内容的 不同，划分工作。 大致分为，总体结构搭建，模块制作，页面制作，底层 CSS 搭建， Javascript 动态 效果，内部测试，代码优化。 这样做的好处是能根据项目的不同 ，划分出不同的功能模块，合理的 安排时间 ， 在有限的时间内做出很多模块和功能。 降低开发成本，提高开发效率。 代码编写 前期工作准备好后，就开始进入代码编写阶 段 ，我们采用 LSM 方式进行，大致流程为 总规划和设计草稿完成 后，就进行前期的前端开发（搭建大致的HTML 结构），然后设计出完设计稿后再进行页面样式的完善 ，最后完成正式的页面后交给开发，嵌套程序。 这样做的好处不仅能有效的提高开发效率，实现逐层开发，让前端提前介入，减少整体消耗的时间，确保产品有更多的时间修改和完善。 确定了流程后还需要对产品原型进行分析，拆分，把复用性高的部分找出来制作成代码模块，方便以后的套用。 确认二，三级页面的风格搭建统一框架。 11 前端 设计 样式确定以 后，就进行通用模块样式的设计（包括按钮，分 页，默认字体颜色，连接颜色等），完成后并提交给前端，统一的搭建。 在代码的编写过程中 ，最重要的是标准和规范的执行遵守，在编写 HTML时候充分发挥想象尽可能的满足后期样式表现的需要 ， 如图所示： 图 1 编写代码流程图 代码编写过程中让前端提前进入开发流程中来 ，在 样式属性 后就进行 HTML结构的编写，页面设计完成后，在进行样式表的开发 ，这样不仅能节省很多的开发时间，提高开发效率， 能在 前端对全局页面的把控。 在此同时也强调规范和模块化的重要性，正所谓无规矩不成方圆，这样能便于后期维护，减少维护成本。 而模块化，是敏捷开发所必需的，重要性在这里也不做过多的描述。 内部测试与后续优化 前端的内部测试，指出页面与设计稿不匹配的地方，优化部分细节页面样式。 测试不仅能提高内测的质量，还能更早的发现问题并及时的修改，否则。