鱼玄机Lolita网站前台设计与实现毕业设计论文

摘要截止2017年6月，我国网民规模达到7.51亿，互联网普及率为55.9%。互联网的快速扩张使得网络经济飞速发展，大数据、云计算、移动电子商务等发展迅速。本毕业 设计 领导形象设计圆作业设计ao工艺污水处理厂设计附属工程施工组织设计清扫机器人结构设计 主要内容是关于鱼玄机Lolita原创服装品牌网站的设计与实现过程。本网站建设目的是为喜爱Lolita服装文化爱好者提供快速获取资讯的平台。本毕业设计首先进行了网站 规划 污水管网监理规划下载职业规划大学生职业规划个人职业规划职业规划论文 ，然后开展了素材收集与整理，接着进行了网站首页及子页面的前台设计与实现。关键词：服装网站；网站前台设计；网页制作2ThisdocumentisproducedbyfreeversionofPrint2Flash.Visitwww.print2flash.comformoreinformation目录引言................................................................1第一章概述.........................................................21.1网站设计背景................................................21.2网站整体结构................................................2第二章网站建设技术.................................................42.1Dreamweaver网页制作.......................................42.2Photoshop图片处理...........................................52.3网站前端技术................................................6第三章前期准备....................................................103.1素材收集整理...............................................103.2LOGO设计...................................................163.3Banner设计.................................................19第四章网站前台设计实现...........................................234.1首页设计实现...............................................234.2其他页面设计实现...........................................30总结.............................................................37致谢.............................................................39参考文献...........................................................40ThisdocumentisproducedbyfreeversionofPrint2Flash.Visitwww.print2flash.comformoreinformation引言互联网是唯一的全天候24小时不间断的媒体平台，是传统媒体所无法企及的。作为一个企业，建立自己的网站最主要的目的就是向全世界展示自己的商业风采，让更多的人了解自己的企业，并使企业的公众意识得到提高。随着全球化进程的推进，企业迫切的需要与外界沟通行业内外的信息。通过建设企业网站企业可以树立企业形象，推介产品，挖掘潜在客户。随着经济的快速发展，人们紧紧的追随着现代发展的脚步，多数消费者也对服装质量款式的要求也在不断的提高。互联网的诞生对服装行业所产生的巨大影响为服装行业和消费者们带来了更多的利益。服装作为人们衣食住行中不可或缺的重要组成部分。在网络平台进行销售与购买能够更加便捷与实惠，也大大的降低了企业与消费者的交易成本。在这样的背景下，服装官方网站的诞生可以说是水到渠成。服装官方网站不仅为消费者提供了便捷优惠的消费平台，为企业降低了交易成本，同时还促进了服装行业的多元化发展。1ThisdocumentisproducedbyfreeversionofPrint2Flash.Visitwww.print2flash.comformoreinformation第一章概述1.1网站设计背景随着互联网的高速发展与日趋成熟，互联网作为信息传播的主要媒介，日益成为人们获取各种信息与资讯的重要平台。互联网带给服装行业的巨大影响，已经悄无声息的让人们的日常生活发生了巨大的变化，截止目前为止与服装相关的网页大概有78,000,000个，在这些网站中大多为各大服装品牌的官方网站，这些网站为消费者们提供了便捷的购物方式并提供了自己服装品牌的最新资讯。鱼玄机Lolita原创服装品牌官方网站作为鱼玄机原创服装有限公司的唯一官方网站。鱼玄机Lolita原创服装品牌官方网站意在为喜爱Lolita服装风格的爱好者们提供一个及时了解企业最新资讯和最新产品的平台。Lolita服装风格源自日本，Lolita品牌客户群年龄集中在13-25岁的女性，她们并不存在要拼命装嫩的需要，更多时候她们追求的是一种崭新的衣着态度，和寻求有别一般的生活方式。1-2网站整体结构本网站由首页，JSK、OP、SK、衬衫五大部分组成，其网站结构图如下图1-1所示图1-1网站结构框架图2ThisdocumentisproducedbyfreeversionofPrint2Flash.Visitwww.print2flash.comformoreinformation(1)“JSK”栏目：鱼玄机Lolita原创服装品牌官方网站女装无袖连衣裙或吊带裙分类。(2)“0P”栏目：鱼玄机Lolita原创服装品牌官方网站女装长袖连衣裙或中长袖连衣裙分类。(3)“SK”栏目：鱼玄机Lolita原创服装品牌官方网站女装背带裙或短裙分类。(4)“衬衫”栏目：鱼玄机Lolita原创服装品牌官方网站女装长袖衬衫或长袖内搭分类。3ThisdocumentisproducedbyfreeversionofPrint2Flash.Visitwww.print2flash.comformoreinformation第二章网站建设技术2.1Dreamweaver网页制作AdobeDreamweaver,简称“DW”,中文名称”梦想编织者”，是集网页制作和管理网站于一体的所见即所得网页编辑工具。利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。AdobeDreamweaver界面如图2T所示：图2TDreamweaver界面本网站所有网页运用了Dreamweaver软件的站点创建、站点管理、网页制作等功能加以实现。其中，在建站初始，采用了Dreamweaver进行网站创建，而在网站建设过程中，运用了Dreamweaver进行站点管理，这使得在网页制作过程中，网站目录一目了然，且形成了清晰明了的网站目录结构；网页的图片、视频等多媒体元素的插入及属性设置亦通过Dreamweaver设计实现；为了提升网站页面的美观度，网页中大量采用了DIV布局，同时结合CSS进行网页样式美化，这些操作也是通过采用Dreamweaver的层创建、CSS样式设置及样式代码编程等功能加以实现；为了增强网页的生动性，采用了Dreamweaver的鼠标经过图像菜单实现了网页多处的鼠标经过图像效果。总体来说，4ThisdocumentisproducedbyfreeversionofPrint2Flash.Visitwww.print2flash.comformoreinformationDreamweaver的应用为网站建设提供了一个方便快捷的实现途径，是网站建设及网页制作最强有力的工具。以下是采用Dreamweaver的站点管理功能所形成的网站站点结构。图2-2网站站点结构图CS.h仕mldxtz.KtrnJ.FMJTZop.FT.1-TMop.IxtmLFLVF1®y«x-_Pr-FL.itZCop.htmlFYcs.KtmlGDVZDjwkindex,litmlJGMjsk.htmlJsk.htrml.JXROj=J«.LSKJcs.html本网站目录结构介绍如下:（1）CSS文件夹主要用于保存网页所需的css文件；（2）images文件夹主要用于保存网页所需的图片素材；（3）SpryAssets/Scripts文件夹主要用于保存网页中下拉导航栏的Css文件和Java脚本代码文件；（4）Multimedia文件夹主要用于保存网页所需的多媒体素材。2.2Photoshop图片处理AdobePhotoshop,简称"PS”。Photoshop主要处理以像素所构成的数字图像。从功能上看，Photoshop可分为图像编辑、图像合成、5ThisdocumentisproducedbyfreeversionofPrint2Flash.Visitwww.print2flash.comformoreinformation校色调色及特效制作部分oPhotoshop是平面设计三大主流软件之一，也是网页设计、室内设计要用到的软件。主要是用来修改与处理图片的，只要是图片，都可以用它来修改与美化。Photoshop界面如图2-3所示：图2-3Photoshop软件界面本网站中几乎所有图片素材均采用了Photoshop进行图片处理，具体来说，采用了Photoshop左侧菜单栏中的裁剪工具实现了截取部分图片的效果；采用了Photoshop的左侧菜单栏中的吸管和画笔工具实现了图片的水印祛除效果；采用了Photoshop的左侧菜单栏中的横排文字工具实现了图片上的文字添加效果。此外还通过Photoshop的图像大小、图像不透明度、图像曝光度等技术实现了图像大小的修改、图像的不透明度调整及图片的曝光度等图片处理效果。2.3网站前端技术1、HTMLHTML(HyperTextMarkupLanguage)o即超文本标记语言或超文本链接标识语言，是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。“超文本”就是指页面内可以包含图片、链接，甚6ThisdocumentisproducedbyfreeversionofPrint2Flash.Visitwww.print2flash.comformoreinformation至音乐、程序等非文字元素。HTML具有简易性、可扩展性、平台无关性、通用性等主要特点。当通过Dreamweaver软件新建一个HTML网页文件时，该网页文件将自动生成HTML基本结构代码，如图所示：pDOCimhtmlPUBLIC"-//K3C//DTDXHTML1.0TransitionaV/EN""hccp;//ww.w3.org/TE^Khtull/DTD/Khtnill-transitional.dtd">《body,dy>图2-4HTML初始语言本网站通过运用HTML超文本语言中的“div”、“a”、“ul”、“li”、“p”、“span”、“img”等标签，完成了网站的设计与实现。如使用“div”标签对网页进行页面布局；使用“a”超链接标签对页面内容进行超链接的设置；使用“img”标签插入网页所需图像等。以下为网站首页部分HTML代码。