门户网站前端设计
摘要：随着互联网的不断发展，使用互联网的人群迅速增加，传统的网站架构逐渐不能适应日益增长的用户数量，前后台分离的新型网站架构成为主流。而其中对于网站前台的设计开发过程被称为前端开发，成为了一种权全新的技术。设计就是呈现的过程，前端设计是通过色彩/构图/等元素赋予页面性格和特点，前端也是展现，通过色彩先抓住自己的目标人群，通过设计表现自己。前端技术就是为了在人们访问互联网时，把界面更好的呈现在用户面前，给予用户更好的浏览体验和交互体验。
关键词：网站；界面；前端；呈现
UI Design of Portal Website
Abstract: With the continuous development of the Internet and the rapid increase in the number of people using the Internet, the traditional website architecture can not adapt to the growing number of users, and the new website architecture which separates front and back has become the mainstream. And the design and development process of website front-end is called front-end development, which has become a new technology. Design is the process of presentation. Front-end design endows the page with personality and characteristics through elements such as color/composition/etc. The front-end also shows itself. First, it grasps its target population through color and expresses itself through design. Front-end technology is to provide users with better browsing experience and interactive experience when they visit the Internet.
Keywords: website; interface; UI ;present
一、系统概述
（一）系统简介
前端开发技术是互联网技术中非常重要的一部分，以前由于网速和终端能力的限制 ，绝大多数网站呈现给用户的都是粗略单调的图文信息，甚至加载都需要很长的时间，用户体验受到了很大限制。随着科技的发展，带动互联网也不断进步，前端技术拥有了更多的可能性，这个行业得到了迅速的发展。以前能够熟练实用Photoshop和Dreamweaver就可以进行网页的制作。但是用户的需求也在不断的增加，导致了网站开发难度不断加大、开发方式也逐渐多样，网页制作更加接近于曾经的网站的后台开发， Web前端开发逐渐取代了过去的网页制作。
前端技术不仅仅包含网页的制作传统的HTML，CSS技术，增加各类的富媒体让网页的内容更加生动，提供网页上软件化的交互形式等都是为了给用户提供更好的使用体验。这些技术统统都离不开前端开发。而且不仅仅是编程方面，艺术性很强的视觉设计甚至平面设计也包含在前端技术中。正是因为此技术涵盖领域的多样性与复杂性，需要一个整合各种前端技术信息的大型门户网站。
通过本系统用户可以根据自己的需求浏览各类关于前端技术的网页，对文章进行点赞，评论等。管理员可以通过管理后台快速的对网站主页的栏目进行修改，删除，添加新栏目等，对于各种文章进行分类管理，添加，修改，删除等，同时也会审核用户的评论发言，通过审核的用户发言将会显示在文章的评论区。本系统完全符合一个大型门户网站的运营需求。
（二）开发工具
1、Adobe Dreamweaver CC 2019
Dreamweaver，简称“DW”，中文名是 "梦想编织者"，最早是由美国MACROMEDIA公司开发 ，2005年4月18日Adobe以34亿美元收购Macromedia公司，从此Dreamweaver成为Adobe旗下产品。
Adobe Dreamweaver CC是一个Web设计和开发应用程序，它拥有一个被称为Live View（实时预览）的可视化设计界面的代码编辑器。同时，它还具有一些标准功能，例如语法突出显示，代码完成和代码折叠。此外他还有其他更高级的功能，如实时语法检查和代码内省，这些功能可以快速生成代码提示以便于用户编写代码。再结合一系列的站点管理工具，Dreamweaver可以让用户设计，编码和管理网站以及其移动端内容。Dreamweaver是一个集成开发环境（IDE）工具。让用户可以预览前端的更改。Dreamweaver被定位为一个多功能网页设计和开发工具，可在编码时实现Web内容的可视化。
2、Photoshop
Adobe Photoshop，简称“PS”，是由Adobe开发和发布的光栅图像编辑软件。该软件同时在Windows和Mac OS双平台上进行发布。
1988年，美国的诺尔兄弟发布了Photoshop的第一个版本。从那时至今，Photoshop经过不断发展，逐渐成为光栅图像编辑的行业标准，甚至成为了整个数字化平面设计的行业标准。至此，Photoshop商标已成为了一个专有名词，后来演变出许多俚语，如“to Photoshop an image”（P图），“Photoshopping”（PS一下）等等。虽然Adobe不提倡这样使用，但人们仍然乐此不疲。Photoshop可以对位图进行多图层的操作和合成，支持图层蒙版、图像合成、校色调色，特效制作等等功能。它可以使用自己独有的PSD格式进行储存，该格式可以储存除了历史记录外的所有图像信息，包括图层，色板，文本，透明度，路径等。同时PSD格式可以方便的被导入其他Adobe软件，如Adobe Illustrator，Premiere Pro和After Effects等等。除了光栅图像之外，Photoshop甚至还具有编辑矢量图形、渲染3D图形和视频，处理文本等能力。此外Photoshop还不断推出新的插件，拓展软件的能力。
3、MySQL
MySQL是一个关系型数据库管理系统，改系统最初是开源程序，由瑞典的MySQL AB公司于1995年5月首次发布初始版本。2008年昇阳微系统公司（Sun Microsystems）收购MySQL AB。2009年，昇阳微系统公司被Oracle（甲骨文公司）收购，自那之后，MySQL成为Oracle旗下产品。
MySQL在过去因为其功能强大、稳定性高（最主要的是因为开源所以成本低廉），已经成为了现今最流行的数据库管理系统，因此各类中小型网站，移动端应用，嵌入式系统等等都在广泛的使用MySql。相比于SQL Server等大型数据库，MySQl就显得小巧方便许多。随着这些年来MySQL的不断成熟，一些大型的应用和网站也开始使用MySQL，如Drupal，WordPress，twitter，YouTube等等。一些著名的开源软件包LAMP，WAMP，MAMP等，这些模型中的“M”指的都是MySQL。
在web方面，MySQL可以说是最好的数据库管理软件。在访问时，服务器支持多个客户主机的同时连接，没有用户数量的限制，同一个数据库可由多个客户机同时使用。
4、WordPress
WordPress（世界杂志）是一个基于PHP语言和MySQL数据库搭建的，免费开源的博客发布软件和内容管理系统（CMS）。WordPress的功能包含有插件系统和模板系统。截至2019年4月，有超过6000万个网站使用了WordPress作为内容管理系统，这其中包括了排名前1000万的网站中超过30.6%的网站。所以说，WordPress是目前最受人们欢迎的网站内容管理系统（CMS）。WordPress也被用于其他应用领域，如普适显示系统（PDS）。2003年5月27日b2/cafelog的创始人马特·查尔斯·穆伦维格和迈克·利特尔基于b2/cafelog系统，发布了全新的WordPress系统。到了2019年2月，WordPress的版本升级已经超过35次，被下载次数突破1亿次。
WordPress有一个使用模板处理器的Web模板系统。它的体系结构是一个前端控制器，将对非静态URI的所有请求路由到单个PHP文件，该文件解析URI并标识目标页面。这允许支持更人性化的永久链接。WordPress用户可以安装和切换不同的主题。主题允许用户在不更改核心代码或网站内容的情况下更改WordPress网站的外观和功能。WordPress还具有集成的链接管理功能; 一个搜索引擎友好，干净的永久链接结构; 为帖子分配多个类别的能力; 并支持标记帖子。还包括自动过滤器，为帖子中的文本提供标准化格式和样式（例如，将常规引号转换为智能引号）。WordPress还支持Trackback和Pingback标准，用于显示指向自己链接到帖子或文章的其他网站的链接。WordPress帖子可以用HTML编辑，使用可视化编辑器，或者使用许多插件中的一个，允许各种自定义编辑功能。
WordPress的主要支持网站是WordPress.org。这个支持网站同时提供WordPress Codex，WordPress的在线手册和WordPress信息和文档的存储库，以及WordPress论坛，一个活跃的WordPress用户在线社区。
Matt Mullenweg表示，WordPress的未来将会更加注重于社交，移动和应用平台上。。
二、系统分析
（一）需求分析
1、用户（浏览者）的需求分析
（1）分类浏览
在本网站中，由于前端技术涵盖的范围很广，把所有类型的文章都放在一起显然是不合适的，浏览者需要一个清晰明了的分类列表，所以本网站设置了前端开发、网页设计&灵感、设计工具、设计杂谈、HTML&CSS共5个栏目页面，用户可以根据需求点击自己想要的栏目进入专题分类浏览某一类的文章。
（2）搜索功能
在本网站中，各类文章的数量众多，用户在进行访问时可能会出现长时间无法找到自己需要浏览的文章，所以需要搜索功能对于某一个关键词进行搜索，快速找到想要浏览的文章。
（3）评论点赞
用户阅读完文章后可能会有自己的见解，对于文章的内容产生赞同或者其他见解，需要给文章点赞或者评论文章。用户还可以分享网站的文章到各个平台。对于一个网站的运营来说，保持网站流量是最重要的，文章加入评论与点赞与分享功能有利于增加用户的粘性与交互性，利于网站的长期运营。
目 录
一、 系统概述 1
（一）系统简介 1
（二）开发工具 2
1、Adobe Dreamweaver CC 2019 2
2、Photoshop 2
3、MySQL 3
4、WordPress 4
二、系统分析 4
（一）需求分析 4
1、用户（浏览者）的需求分析 4
2、网站管理员的需求分析 5
（二）业务分析 6
1、管理员的业务分析 6
2、用户（浏览者）的业务分析 7
三、数据库设计 8
四、系统实施 10
（一）网站外观设计 10
1、网站logo设计 10
2、网站主题图片设计 10
3、网站页面布局设计 12
（二）首页显示信息的实现 13
（三）相关文章的实现 17
五、系统测试 32
六、系统使用说明 34
（一）网站前台界面 34
（二）网站后台登录界面 35
（三）网站后台管理界面 35
1、文章管理 35
2、媒体库管理 36
3、页面管理 36
4、评论管理 36
5、外观管理 36
6、用户管理 36
7、网站设置 36
七、结束语 37
八、参考文献 38
八、参考文献
[1] 刘西杰.张婷. HTML css JavaScript网页制作从入门到精通-第3版[M].北京：人民邮电出版社，2016.7
[2] 陈湘扬, 陈国益. PHP5+MySQL网页系统开发设计[M]. 北京: 电子工业出版社, 2007.
[3] 胡菘.Dreamweaver完美网页设计[M].中国青年电子出版社,2010.5
[4] WordPress中文官网. [Z].[2014-04-16]. https://codex.wordpress.org/
[5] （美）赞德斯彻.深入PHP：面向对象、模式与实践(第3版)[M].人民邮电出版社,2011.7出版社,2009.4
