《Web前端页面设计-毕业论文》由会员分享，可在线阅读，更多相关《Web前端页面设计-毕业论文（33页珍藏版）》请在金锄头文库上搜索。
1、Web 前端页面设计1长沙理工大学继续教育学院成人函授教育毕业设计（论文）指导书Web 前端页面设计2摘摘 要要21 世纪是信息高速发达的时代，网络作为当今最流行最方便快捷的媒介也越来越被人们接受，并且融入我们的生活。随着高校信息化建设的不断推进，网站的作用超越了传统的信息获取，交流它更能体现组织机构的风采，性质。所以高校院系建立本院系美观，专业，易于维护管理的网站已经势在必行。 本论文主要围绕数字媒体技术专业的门户网站为开发主题，最基本也是最必须的三个技能。前端的开发中，在页面的布局时， HTML 将元素进行定义，CSS 对展示的元素进行定位，再通过 JavaScript 实现相应的效果和交
2、互。虽然表面看起来这些很简单，但这里面需要掌握的东西绝对不会少。在进行开发前，需要对这些概念弄清楚，弄明白，这样在开发的过程中才会得心应手。 分析并解决实现中的若干技术问题介绍了个性化页面的背景及jsp+javascript +mysql 系统的一般原理；阐述整个个性化页面生成系统的系统结构及工作原理；分析了系统实现中的特殊性，难点和重点；设计实现用户注册，用户登录，用户管理等 jsp 页面。分析并解决实现中的若干技术问题；建立完整的校园网站，进行测试并分析结果。 该网站有效地实现用户通过 JSP 页面访问来进行用户注册，登陆，并对网站内容进行有效的管理，提升了后期添加和删除信息的有效性，具有
3、一定的应用价值。Web 前端页面设计3目目 录录第第 1 1 章章 前端开发工具及相关技术前端开发工具及相关技术551.11.1 选题背景及意义选题背景及意义5 1.21.2 前端开发工具前端开发工具71.31.3 前端开发相关技术前端开发相关技术81.3.1 Javascript 简介.8 1.3.2 Java script 基本特点81.3.3 CSS 简介91.3.4 JQuery91.41.4 本章小结本章小结11第第 2 2 章章 前端布局分析与设计前端布局分析与设计.11.112.12.1 前端总体开发流程及设计前端总体开发流程及设计112.1.1 分层开发.12 2.1.2 代码
4、编写.122.1.3 内部测试与后续优化.132.22.2 前端前端 UIUI 设计设计.162.2.1 模块分布.16 2.2.2 颜色配置.16 2.2.3 CSS 元素 .17Web 前端页面设计42.32.3 交互设计与交互设计与 UIUI18 2.42.4 点线的运用点线的运用.20 2.4.1 点的运用20 2.4.2 线的运用20 2.52.5 网站结构布局及设计网站结构布局及设计.21 2.5.1 网站首页结构.212.5.2 主题鲜明，富有特色22 2.5.3 版式编排布局合理性.232.62.6 网站前台页面设计网站前台页面设计.252.5.1 首页26 2.5.2 系内概
5、况262.5.3 系内新闻27 2.62.6 本章小结本章小结.27第第 3 3 章章 主要功能的实现主要功能的实现.27.273.13.1 界面设计界面设计.273.23.2 具体设计文档具体设计文档.273.33.3 前台新闻文摘显示前台新闻文摘显示.28 3.3.1 网站装饰风格283.3.2 网站的链接结构283.43.4 可视化设计可视化设计. .28 3.53.5 具体实现技术具体实现技术.29 3.5.1 CSS 在“数字媒体技术系网站“中的应用实例.29 3.5.2 应用 JavaScript 设计网页29Web 前端页面设计53.63.6 本章小结本章小结31 第第 4 4
6、章章 总结总结324.14.1 本章小结本章小结.32 致谢致谢.33Web 前端页面设计6第第 1 1 章章 前端开发工具及相关技术前端开发工具及相关技术 1.11.1 选题背景及意义选题背景及意义如今的互联网已经渗透到我们生活的每一个层面，网站的内容越来越丰富全面，以此来满足了各种不同需求的浏览者。网站的作用众所周知人们通过网站快速获取，发布和传递信息。 目前很多高校建立起了自己的网站这些网站的建立使得学校可以突破传统的媒体的限制在网络上开辟的属于自己的新天地。网络具有超时空性。网络超时空性是一种“一人对一人，一人对多人，多人对一人，多人对多人”的传播方式。超时空性的形成正式由于在网络在时
7、间层面，空间层面上的开放性带来的。网络的超时空性使得网站对学校本身和外界社会表现特定的功能，表现在网站有助于改变教育资源的分散性和分布不均衡性，有效的将教育资源进行整合，从而使得教育资源使用意义上的无限增长。网络具有的海量存储特性，网络能形成一个巨大无比的数据库，世界上任何时间任何地点的任何一件事都能成为网络的信息被广泛传播。 网站的海量存储特性可以从横向和纵向两方面分析：横向看网站往往设置多个板块，分别放置相关内容。不同板块的信息相互独立，共同构成网站的内容。 纵向看，同一个板块的内部，内容并不是固定不变的，而是不断添加连续更新的。大量的信息使得高校网站成为一个巨大的数据库。 交互性体现在网
8、站通过设置留言板，论坛，发挥网络交互的功能，在我们的日常生活建立起了交流渠道。 网站正是以这些特点为基础，发挥了自己本身的资源整合，信息传播，多方交流互动等方面的独特功能，成为一座沟通桥梁。 很多网站内容多姿多彩，板块，内容争妍斗艳。但不外乎以一下几部分例如：学校介绍，新闻发布，招生信息，就业信息，师资力量，科研成果，机构设置，教学素材等。高校网站的建立和维护需要大量的物力和人力，为何要投入Web 前端页面设计7去建网站上？是因为如上所述的网站有的独特特性使得建设高校网站势在必行我们要创建我们本专业的网站数字媒体技术系的专业网站，网站前端设计最基本的三个技能：HTML，CSS，JavaScri
9、pt，PS 矢量图像编辑技术。这个是前端开发中最基本也是最 必须的三个技能。前端的开发中，在页面的布局时， HTML 将元素进行定义，CSS 对展示的元素进行定位，再通过 JavaScript 实现相应的效果和交互。虽然表面看起来这些很简单，但这里面需要掌握的东西绝对不会少。在进行开发前，需要对这些概念弄清楚，弄明白，这样在开发的过程中才会得心应手。 建立本系网站发挥的作用如下： (1) 数字媒体技术系网站是数字媒体专业的“商标”。在这个高度信息化的社会里，建立数字媒体技术系自己的网站是最直接的宣传手端。网站的超时空特性，不仅能让本地区的人们了解学院，更可让世界了解本专业。 (2) 数字媒体技
10、术系网站巨大的教育资源，网站是实现教育资源分配的桥梁，它使每一位教师和学生都能均等的得到培训和受教育的机会，能极大的提高教学效率。数字媒体技术系网站能提供教学互动的全新方式，网站使得教师与教师，教师与学生，学生与学生之间的交流有了全新的方式，它不再受到传统课堂的制约。它可以使不同的学院同处一室，共同讨论，共同提高。地理上的界限在这里模糊和消失了，数字媒体技术系网站是真正没有围墙的系网站。 (3) 数字媒体技术系网站能够提供个性化的学习平台，不同的学生理解世界的方式各不相同，认知世界有诸多方式。网络提供的丰富资源可以使学生寻觅不同的教育方式，各取所需。数字媒体技术系网站允许不同的学生沿着自己的途
11、径，按自己的速度接受教育与学习，学生将有机会享受最佳的教育机会，充分发掘自己的内在潜力，培植独特的个性和人格。 (4) 数字媒体技术系网站是最佳的教学研究室，数字媒体技术系网站与教育类专门网站的有效链接，给本系教学研究带来了一片新天地，各种优秀教案，专家论坛，网络观摩课，各科素材，多媒体课件制作等内容为教师教研提供了极佳的平台。有效地降低教研成本，提高效率。Web 前端页面设计81.21.2 前端开发工具前端开发工具(1)(1) MyEclipseMyEclipse 简介简介 MyEclipse 企业级工作平台（MyEclipse Enterprise Workbench ，简称MyEclip
12、se）是对 EclipseIDE 的扩展，利用它我们可以在数据库和 JavaEE 的开发，发布以及应用程序服务器的整合方面极大的提高工作效率。它是功能丰富的JavaEE 集成开发环境，包括了完备的编码，调试，测试和发布功能，完整支持HTML，Struts，JSP，CSS，JavaScript，Spring，SQL，Hibernate。MyEclipse4结构上的这种模块化，可以让我们在不影响其他模块的情况下，对任一模块进行单独的扩展和升级。 简单而言，MyEclipse 是 Eclipse 的插件，也是一款功能强大的 JavaEE集成开发环境，支持代码编写，配置，测试以及除错，MyEclips
13、e6。0 以前版本需先安装 Eclipse。MyEclipse6。0 以后版本安装时不需安装 Eclipse。 (2)(2) DreamweareDreamweare Dreamweare 是美国 MACROMEDIA 公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页5。 使用网站地图可以快速制作网站雏形，设计，更新和重组网页。改变网页位置或档案名称，Dreamweare 会自动更新所有链接。使用支援文字，HTML 码，HTML 属性标签和一般语法的搜寻及
14、置换功能使得复杂的网站更新变得迅速又简单。(3)(3) PhotoshopPhotoshop AdobeAdobe Photoshop，简称“PS”，是一个由 Adobe Systems 开发和发行的图像处理软件。Photoshop 主要处理以像素所构成的数字图像。使用其众多的编修与绘图工具，可以更有效的进行图片编辑工作。 Web 前端页面设计9在网站前端开发过程中需要把图片用 Photoshop 处理成加载到网站页面的图片，用 Photoshop 制作矢量图形用作网站页面的修饰按钮。1.31.3 前端开发相关技术前端开发相关技术1.3.11.3.1 JavaJava scriptscript
15、 简介简介 JavaJava scriptscript 的出现，它可以使得信息和用户之间不仅只是一种显示和浏览的关系，而是实现了一种实时的，动态的，可交互式的表达能力。从而基于CGI 静态的 HTML 页面将被可提供动态实时信息，并对客户操作进行反应的 Web 页面的取代。Java script 脚本正是满足这种需求而产生的语言。它深受广泛用户的喜爱和欢迎。它是众多脚本语言中较为优秀的一种，它与 WWW 的结合有效地实现了网络计算和网络计算机的蓝图。无疑 Java 家族将占领 Internet 网络的主导地位。因此，尽快掌握 java script 脚本语言编程方法是我国广大用户日益关心的问题
16、。1.3.21.3.2 JavaJava scriptscript 基本特点基本特点 (1) 基于对象的语言 javajava scriptscript 是一种基于对象的语言，同时也可以看作一种面向对象的。这意味着它能运用自己已经创建的对象。因此，许多功能可以来自于脚本环境中对象的方法与脚本的相互作用。 (2) 简单性 javajava scriptscript 的简单性主要体现在：首先它是一种基于 Java 基本语句和控制流之上的简单而紧凑的设计， 从而对于学习 JavaJava 是一种非常好的过渡。其次它的变量类型是采用弱类型，并未使用严格的数据类型。 (3) 安全性 javajava scriptscript 是一种安全性语言，它不允许访问本地的硬盘，并不能将数据存入到服务器上，不允许对网络文档进行修改和删除，只能通过浏览器实现信Web 前端页面设计10息浏览或动态交互。从而有效地防止
