企业网站前端设计流程与实现,网站设计论文.docx

《企业网站前端设计流程与实现,网站设计论文.docx》由会员分享，可在线阅读，更多相关《企业网站前端设计流程与实现,网站设计论文.docx（7页珍藏版）》请在得力文库 - 分享文档赚钱的网站上搜索。

1、企业网站前端设计流程与实现,网站设计论文Abstract:ForthenetworktechnologyCo.,Ltd.,theestablishmentofgoodmanagementofcorporatewebsites,hasbecomethekeytothesuccessofE-commerceapplications.BasedonthecreationoftheenterpriseWebsite,throughthedesignprocessanalysis,layoutanalysisandnavigationanalysis,makethebasicframeworkofweb

2、sitedesign.BasedonPS,+JavaScriptandothertechnologiestocompletethecompanyshomepagedesign.Keyword:front-endtechnology;CSS;JavaScript;随着移动互联网技术的快速发展，基于Web前端开发的网站技术也日趋完善1.然而，当下已有的企业网站主要有下面缺点：Web网站内容薄弱，更新滞后；构造层次重点失衡，用户体验效果不佳2;部分网页制作粗糙，或过于花哨3.为了有效实现企业网站的庄重和设计感，在下面方面深切进入设计和研究：在排字方面，以简洁群众化的字体为主4;在图像切换效应方面，基

3、于图像形式，通过完好的网站任务，如复杂的交互、网页动画、UI设计、后期维护，主页简单、快速和有效地完成网站提供或用户需要的服务、功能和目的5.当下已有的网站建设大多基于Web前端开发，华而不实牵涉的开发工具如WebStorm,AdobeDreamweaver,牵涉的应用包括了层叠样式表CascadingStyleSheets,CSS规则、JavaScript和Jquery库。基于以上工具和软件实现某企业网站的设计，成为基于Web前端开发的研究关键。首先，通过使用CSS样式设置页面的格式，实现页面的内容与表现形式分离。页面内容存放在文档中，而用于定义表现形式的CSS规则存放在另一个文件中或文档的

4、某一部分，通常为文件头部分。将内容与表现形式分离，不仅可使维护站点的外观愈加容易，而且还能够使文档代码愈加简练，缩短阅读器的加载时间。其次，JavaScript是在的基础上，以实现开发交互式的Web页面。JavaScript的出现使得它能够实现实时、动态和交互式Web页面和用户之间的关系。这是JavaScript和DOM构成网页的行为。JavaScript程序实际上是一个文本文件文档，当使用嵌入在文档的需求。因而，能够使用任何文本编辑器软件开发JavaScript程序。JavaScript来提高Web页面的交互性；JavaScript能够响应用户的操作，提交表单做立即检查，不需要浪费时间CGI

5、身份验证。最后，通过jQuery这一JavaScrip库，它以写更少的代码、做更多的事情为宗旨。jQuery是一个快速、简洁的JavaScript库，使用户能够方便地遍历Documents、操作文档对象模型DocumentObjectModel,DOM、处理事件、实现动画效果和提供Ajax交互，除此之外，jQuery兼容CSS3.0及各种阅读器。1、企业网站框架分析设计一个主网页和6个副网页，总网页主要是给阅读者简单地介绍公司的业务，美观形象。副网页以导航栏关于企业、企业营销、网站建设、设计服务、人才招募、联络我们，深切进入介绍公司的业务。当前，国内大型商业网站基本上是多行多列形式布局。例如人

6、民、中关村在线、淘宝网、腾讯、网易、新浪、搜狐、人民网等网站采用多行三列形式.公安部、财政部、阿里巴巴、网上超市1号店、去哪儿网、赶集网等网站采用多行四列形式.试图通过三行形式或三列形式展开设计，此形式的特点是把整个页面水平、垂直分成3个区域，华而不实三行形式将页面头部、主体及页脚3部分；三列形式将页面分成左、中、右3个部分。多行三列形式的CSS定义如此图1所示，通过CSS规则建立三行三列的基本设计框架。实现网站的基本框架建设，参加JavaScript编写模块内容。2、企业网站导航分析导航菜单是网站重要的组成部分。导航菜单的设计关系着网站的可用性和用户体验，有吸引力的导航能够吸引用户去阅读更多

7、的网站内容。设计一个优秀的页面导航会给网站增色不少。网站菜单表现形式丰富多样。从菜单层次看，能够分为一级、二级和多级菜单。从排列方式上看，可分为水平导航、垂直导航菜单。从技术实现角度上看，导航菜单通常采用无序列表、表格、超链接和样式表相结合的方式方法来实现，可以以使用如CSS3Menu,jQuery等第三方插件技术来实现。借助JavaScript设计网站下拉菜单的案例比拟多见，而采用纯CSS设计网站下拉菜单需要对样式进行具体的定义才能实现。不过要考虑到不同阅读器之间的兼容性。编写下拉菜单的代码。逐步设置样式，让菜单越来越美。1定义ul的样式，设置边距和填充均为0px.ulmargin:0px;

8、padding:0px;/*考虑到不同阅读器的兼容性，去除列表项前的符号*/2定义列表样式，由垂直排列改为水平排列。ulliheight:30px;width:115px;list-style:none;float:left;display:inline;font:0.9emArial,Heletica,sans-serif;这条规则定义了li标记、行内浮动、行内显示、宽度、高度、字体等样式。3定义超链接样式。这一条规则的作用就是加上背景和菜单间的隔离线，把默认有下划线蓝色的文字变成白色无下划线。4定义嵌套列表项和子菜单超链接的规则。ulliulliheight:25px;ulliulliab

9、ackground:#666;line-height:24px;此处第1条是设置子菜单的列表项目高度为25px,以区别菜单为主菜单列表项；第2条规则是子菜单项中的超链接背景改为#666,并将行高调整为24px.5定义鼠标滑过某个菜项时的样式。ullia:hoverbackground:#666;border-bottom:1pxdashed#FF0000;3、企业网站总体设计通过主题设计和版式设计完成总计架构的设计：主题突出，清楚简洁，利用简单明确的文字和图片，对于一些LOGO使用徽标。借助版式编排布局的合理性，充分利用与平面设计效果。企业网站的总体建设页面如此图2-3所示。在总体设计方面，通

10、过JavaScript和调用jQuery库实现前端的页面研发。4、结束语介绍了JavaScript,CSS,jQuery以及前端布局的制作做法，具体讲明了企业网站前端的主要设计流程，以及网站中的主要功能。当前缺乏之处在于部分框架的布局的局限，下一步工作将着重加强前端技术的研究和应用。以下为参考文献1李帮诚。Web前端开发技术与研究J.电脑知识与技术，202129:47-49.2王政。Web前端开发技术以及优化研究J.电脑知识与技术，202022:5037-5038.3电脑培训学校丛书编委会。网页设计与网站建设培训教程M.北京：机械工业出版社，2003.4王聪。社交网络服务系统Web前端设计与实现D.成都：电子科技大学，2020.5储久良。Web前端开发技术M.北京：清华大学出版社，2020.