内容发布更新时间 : 2024/11/9 4:03:48星期一 下面是文章的全部内容请认真阅读。

Web前端页面设计

长沙理工大学继续教育学院

成人函授教育毕业设计（论文）

指

导 书

1

Web前端页面设计

摘要

21世纪是信息高速发达的时代，网络作为当今最流行最方便快捷的媒介也

越来越被人们接受，并且融入我们的生活。随着高校信息化建设的不断推进，网站的作用超越了传统的信息获取，交流它更能体现组织机构的风采，性质。所以高校院系建立本院系美观，专业，易于维护管理的网站已经势在必行。

本论文主要围绕数字媒体技术专业的门户网站为开发主题，最基本也是最必

须的三个技能。前端的开发中，在页面的布局时， HTML将元素进行定义，CSS对展示的元素进行定位，再通过JavaScript实现相应的效果和交互。虽然表面看起来这些很简单，但这里面需要掌握的东西绝对不会少。在进行开发前，需要对这些概念弄清楚，弄明白，这样在开发的过程中才会得心应手。

分析并解决实现中的若干技术问题介绍了个性化页面的背景及

jsp+javascript +mysql系统的一般原理；阐述整个个性化页面生成系统的系统结构及工作原理；分析了系统实现中的特殊性，难点和重点；设计实现用户注册，用户登录，用户管理等jsp页面。分析并解决实现中的若干技术问题；建立完整的校园网站，进行测试并分析结果。

该网站有效地实现用户通过JSP页面访问来进行用户注册，登陆，并对网站

内容进行有效的管理，提升了后期添加和删除信息的有效性，具有一定的应用价值。

2

Web前端页面设计

目 录

第1章 前端开发工具及相关技术..........................5

1.1 选题背景及意义........................................5 1.2 前端开发工具..........................................7 1.3 前端开发相关技术......................................8

1.3.1 Javascript简介...............................8 1.3.2 Java script基本特点..........................8 1.3.3 CSS简介......................................9 1.3.4 JQuery........................................9 1.4 本章小结..............................................11

第2章 前端布局分析与设计...............................11

2.1 前端总体开发流程及设计................................11

2.1.1 分层开发.....................................12 2.1.2 代码编写.....................................12 2.1.3 内部测试与后续优化...........................13 2.2 前端UI设计...........................................16

2.2.1 模块分布.....................................16 2.2.2 颜色配置.....................................16 2.2.3 CSS元素 .....................................17

3

Web前端页面设计

2.3 交互设计与UI........................................18 2.4点线的运用.............................................20

2.4.1 点的运用....................................20 2.4.2 线的运用....................................20 2.5网站结构布局及设计.....................................21

2.5.1 网站首页结构...............................21 2.5.2 主题鲜明，富有特色..........................22 2.5.3版式编排布局合理性...........................23 2.6 网站前台页面设计.....................................25

2.5.1 首页........................................26 2.5.2 系内概况....................................26 2.5.3 系内新闻....................................27 2.6 本章小结...............................................27

第3章 主要功能的实现.....................................27

3.1 界面设计...............................................27 3.2 具体设计文档...........................................27 3.3 前台新闻文摘显示.......................................28 3.3.1 网站装饰风格..................................28 3.3.2 网站的链接结构................................28 3.4 可视化设计.............................................28 3.5 具体实现技术...........................................29

3.5.1 CSS在\数字媒体技术系网站\中的应用实例.......29 3.5.2 应用JavaScript设计网页......................29

4