图书出版网站的前端设计与制作

河南农业大学本科毕业论文(设计)主题图书出版网站的前端设计与生产大学信息管理科学院专业课计算机科学与技术(软件工程2类)学生名称郭怀远()指导老师高睿创建日期：2004年5月15日列表1简介12前端开发环境和相关技术22.1前端开发环境22.2前端开发相关技术22.2.1 JavaScript简介22.2.2 CSS简介22.2.3 JQuery简介32.3.4 DOM简介33前页面渲染设计33.1简化33.2视觉效果43.4交互4使用3.5点划线63.6关系结构63.7表达主题74前端页面实施84.1分层开发84.2代码编写84.3内部测试和后续优化94.4显示页面结果105前端页面技术实现分析135.1列表显示区域135.2首页横幅焦点图145.3缩减和扩展图书目录155.4图书显示选项卡166结论17审计18图书出版网站前端的设计与生产郭会员信息管理科学学院计算机科学技术专业摘要：随着图书出版业的规模扩大和快速发展，图书的在线出版和销售成为新的情况和要求。在此背景下，图书出版社将Sublime、Photoshop等web前端设计工具相结合，本文利用JavaScript、CSS、div等技术在图书出版社的web前端进行视觉效果和内容规划设计，还制作了漫画图、视觉和颜色安排、各种页面的布局以及js动态交互动态内容的呈现等图书出版网站主页、电子书城市关键字：web创作；前Ajax UIfront pages design and production of the book publication websiteabstract:the development of web front end is made of web page，And has obvious features of the times.web production is The product of The web 1 times，the website to static content，The user uses The website behavior also to browse The main . aftsKeywords:网页；Front websiteAjax UI引言1web前端技术在当前internet上也变得越来越成熟，从以前的表格布局到CSS2.0、CSS3.0和当前正在普及的HTML5。在整个网站建设中，web前端的作用也越来越明显，其地位也越来越突出。优秀的网站体验与web前端的设计和制作密不可分，优秀的网络应用将起到广告宣传、咨询协商、在线支付、电子账户、服务交付、咨询和交易管理等作用1。其前端开发环境和相关技术也变得越来越重要。2前端开发环境和相关技术2.1前端开发环境前端的开发离不开相关工具的配合，用于开发的工具主要包括：(1) Sublime Text(2) adobe dremweave(3) Adobe Photoshop2.2前端开发相关技术2.2.1 JavaScript简介JavaScript是动态类型语言，当然是弱类型，并基于JavaScript的面向对象实现。目前所有主要浏览器都支持的唯一脚本语言。修改html页面内容而不与服务器交互，最重要的部分是文档对象模型(DOM)2。2.2.2 DIV CSS简介很久以前，web工程师通过table进行页面布局，现在大多数页面布局都推荐使用div CSS方法。所谓的div CSS通过CSS控制div的布局。实际应用不仅可以通过div进行控制，还可以通过CSS控制任何节点(p、span、img、table等)的位置。块级元素：段落、标题、列表、表格、DIV和BODY等元素是块级元素。内嵌元素：a、EM、SPAN元素和大多数替代元素，如图像和表单输入。不必在新行中显示或强制其他元素在新行中显示，并且可以用作其他元素的子元素。在HTML中包含LI元素。它们类似于用于特殊表示法(例如点、字母或数字)的书签。列表项目元素出现在有序列表中时，将对其进行排序。因此，有序列表中的列表项目会根据上下文自动编号3。图1方框模型分析图2.2.3 JQuery简介Jquery是用于快速构建完整页面布局和功能的JavaScript框架。Jquery框架的概念是通过编写较少的代码实现更多的功能。这是一个轻量级JavaScript库，具有其他JavaScript库无法替代的功能，与CSS4兼容，与当前主流浏览器(chrome、fixfire 3.0、IE2.0)兼容。Jquery使您可以通过DOM轻松修改HTML节点的元素并添加新功能4。2.3.4 DOM简介DOM不是一种语言，而是W3C平台提供的标准API，它类似于数据结构树。树的节点、子节点、父节点和按层次操作每个元素的API。DOM是独立于平台、编程语言的界面，用于操作当前页面的其他组件。DOM分为核心、XML和HTML的多个部分和级别(DOM Level 1/2/3)5。3前页面渲染设计3.1简化大多数网站的前端页面都执行明确的目标、直接行动等，以满足用户对信息的需求。设计主页时，整体要简洁、朴素、平衡、和谐、页面布局大方，和谐、合理，单词间距、行间距适中。与此同时，为了加强网站的功能，图片背景不应看起来太刺眼，因此，要切断无序的图片、背景等，使用户在第一次看到的瞬间，能够舒适地掌握网站的功能，不受过度的干扰。本网站由页眉、搜索、导航、面包屑、边栏、内容、新闻动态、页脚等部分组成，结构明确。中间部分是典型的3段限制宽度布局，提供了显示非常整洁而庞大内容的功能。中间部分是实际制作时的一种流动布局，随着内容的增加，其高度会增加以满足实际开发需要。导航部分实际上是侧栏布局，容纳了更多的目录条目，大气看起来很简洁。主页由页眉、主导航栏、面包屑导航、图书分类栏、热书展示区、编辑推荐栏、战略合作栏、页脚等8个功能区组成。头：在所有站点设置此项目，但内部模块各不相同。站点头包含站点徽标、搜索框、我的订单等，这些组件根据本站点的要求计划进行设置，并满足当前主要站点配置的基本要素要求。主导航栏：浏览可以看作是对网站的内容进行分类和细分，使用户根据自己的需要浏览相应的列。网页浏览要明确分类，航行部分不重复。该部分旨在最显眼、最醒目的网页，蓝色背景的白色字，hover市背景的深蓝色字，与网站的整体风格很搭配6。图2主结构拆分图3.2视觉效果视觉元素是现代网页的另一种重要表达方法，不同的颜色组合和web结构排列以不同的样式出现。基本上，冷色调可以用来表现机敏的风格，温暖的色调更能表现时尚、流行等时尚元素。很多人在网站设计中只想着自己的想法，例如忘记了某人更喜欢红色的事实，在整个网站上布置了红色背景，看起来很舒服，但是设计网站后，让其他人看网站设计是否能第一次吸引他们，如果连周围的人都不能保持的话，也要修改网站设计，说明我们的视觉效果是在不断变化的背景下完成的，让更多人证明你的网站视觉设计真的很有魅力8。因为网络内容属于很多电子商务系列图书网站，所以内容量太大，颜色把握不好，看起来很乱。为了防止这个问题，为了制作整洁的页面，首先要调整颜色的数量。因此，本网站的主要颜色为蓝色，根据颜色逐层加深或变浅，内容区域的颜色为深灰色，与特殊背景的白色相匹配，更加整洁。图3是主页部分区域的截图。图3显示主页部分区域颜色布局图4显示了页面主页图书编辑推荐功能的捕获。图4编辑建议列表使用3.5点划线在大多数情况下，虚线的引导是必不可少的，这样浏览者就可以更容易地找到他们想要的东西。图5是关于使用网页中点线的图例。图5虚线使用图3.6关系结构图6的左侧很清楚，右侧不清楚。a表示头部，b表示背景，c表示右侧内容详细区域，d表示产品区域。正确的层次结构布局无效图6结构级比较图图7是显示上述结构的页面，例如导航区域、面包屑、左列、内容区域等。图7结构级别示例3.7主题表达在制作页面的时候，不仅要向客户展示完整的实现功能，还要向客户展示要表达的中心思想。表达意思的时候要明确，直接，不要太模糊。图8以主页为例说明。图8主页图表第一页是左侧和右侧布局的明确左侧“书籍分类”，表示导航索引区域。中间部分分为右侧的“banner展示区”和“新书架”，右侧部分分为“最近动态”和“建议列表编辑”，表示明确的层次结构和明确的标题。这样布局的目的是在显示更多内容的同时保持页面清晰美观。4实现前端页面4.1分层开发阶层开发主要与基本样式(base)、一般样式(common)和页面样式(page)有关。其中，base样式是包含字体大小、近似框架等的最基本样式。常规样式本身属于模块级别，包括导航栏、公告板、网页基本结构等，可在单独的页面上使用。页面样式属于页面级别9。分层发展通过图9分阶段进行。图9分层发展概述4.2编写代码初始站点布局完成后，下一步是代码编写步骤，基本过程为总体计划创建网站的一般风格，然后执行站点前端详细任务，如明确的分工、艺术设计、寻找图片、框架构建、页面设计等。粗略工作结束后，通过测试、完成页面详细信息，最终完成的页面完成后端站点开发、站点后台开发和制作，使开发站点节省时间，进行二次开发10。粗略的计划如下：确定站点制作过程后，分析和分割站点原型详细信息，选择重复使用的部分，将其制成代码模块，以便以后根据类似情况应用代码。确保第2，3阶段网页的样式构建一致的框架。确定前台页面CSS样式后，将完成普通版CSS的设计(包括单个选择框、button、字体大小、默认字体颜色、背景图片和颜色等)，并将其提交给前端，前端创作者将基于整个内容进行创作。在编写代码的过程中，最重要的是有自己规范的代码编写指南，在编写HTML时，根据页面的设计充分发挥自己的想象力，完成页面功能的实现。图10显示了代码编写过程。图10代码编写配置文件4.3网站测试和辅助开发、优化修改站点详细信息后，应优化web站点以优化代码、完成站点的所有功能，并将相应的HTTP请求最小化。图11表示网站的内部测试过程。图11内部测试配置文件图12表示前端页面开发过程。图12前端开发摘要流程图一旦开发了页面开发过程，前端制作就要按照这个流程图一步一步地进行，然后长时间地继续进行。虽然不完美，但适合当前网站制作需要，遵循页面开发过程并使用它的优点是，对网站制作有很大的帮助，更好地应对高强度的开发要求。代码更受控制，开发效率更高。实际上，有多个频道可以更加突出一个网站的外观，制作网站时可以有不同的设计趋势。随着互联网的发展，现在已经成为很多人获取信息的渠道，所以在创建网站的时候，必须把用户的感情放在第一位。经常暴露在设计不好的网站上感觉不好，所以我们考虑通过以下几个模块改善用户体验。1.网站排版：创造性地使用排版的方法实际上是有效的，让用户立即收到关于该网站的新消息。