小时髦全球旅拍网站前端设计与实现毕业设计.pdf

《小时髦全球旅拍网站前端设计与实现毕业设计.pdf》由会员分享，可在线阅读，更多相关《小时髦全球旅拍网站前端设计与实现毕业设计.pdf（42页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、摘要本设计首先进行了小时髦全球旅拍网站的需求分析根据需求分 析得出了网站设计的整体结构，接下来制作了网站首页、摄影师理念 页面、旅行电影页面、作品欣赏页面等20多个页面,使用了 Photoshop、Dreamweaver、HTML、C SS、JavaScript等软件和技术实现了导航栏 下拉框、图片轮播、鼠标经过图像等十个动态效果，呈现了较为完整 的网站前端页面效果。最后通过电子邮件、QQ、微博、微信等工具对 网站进行了推广。关键词：网站设计；网页制作；网站推广目录引言.1第一章设计背景.21.1企业网站设计目的.21.2网站建设需求分析.31.3网站整体结构.3第二章前期准备.52.1素材收

2、集整理.52.2 LOGO 设计.52.3 B anner 设计.72.4首页效果图.10第三章网页设计制作.123.1首页设计制作.123.2“摄影师理念”页面设计制作.193.3“旅行电影”页面设计制作.233.4“作品欣赏”页面设计制作.253.5“联系我们”页面设计制作.29第四章网站推广.314.1电子邮件推广.314.2 IM及时通讯工具推广一QQ.324.3 SNS社区营销推广微博、微信、抖音.34总结.37致谢.38参考文献.39引言电子商务就是利用互联网进行网上交易的一种商务交易。电子商 务的迅猛发展，引起了各大企业的重视，从而掀起了互联网转型的浪 潮。各大企业为了更好的给自

3、己的企业做宣传，让更多的人知道，都 纷纷创建了企业网站。我们可以通过文字、图片或者动画来宣传企业 产品，也可以把公司的具体信息、新闻动态、产品功能介绍放入网站 内，让用户所熟知。网站的创建注重网站页面的美观以及内容清晰,采用图文并茂的形式，更容易让用户接受，才能够吸引到更多的用户 群体来浏览网站，从而达到宣传效果。1第一章设计背景1.1企业网站设计目的企业网站设计目的1.1.1当前旅拍行业的发展状况随着旅行和摄影的双重火爆，目前旅拍已经逐渐成为了摄影市场 的主流产品。旅拍是随着年轻人越来越追求个性化，近几年兴起的新 行业，一般都是在新人度蜜月的时候进行的，相对于本地拍的千篇一 律的内景和已经看

4、烂了的家乡的外景，去到梦想的城市，带上最爱的 TA,记录最美好的风景，留下青春的身影，同时也将彼此最美的样子 留下来，那么有一天，当彼此老了的时候，依旧还记得彼此当初让对 方动心的样子。而随着各种网络社交平台上的发展和传播，在各地热门旅游城市 拍摄的经典照片也成为热门话题，“因为旅游城市风景好，哪怕是一 张没有精修过的原图，也能抓住很多人的眼球。视觉上感觉能秒杀很 多传统摄影作品。”之前，大家想要的可能是一张照片，而现在，顾 客可能更加注重照片背后的故事。同时，因为传播速度快，来旅拍一 套属于自己的照片成为很多人的愿望。旅拍婚纱摄影风格日新月异，简约婚纱照、时尚风格婚纱照、清 新唯美风格婚纱照

5、、纪实婚纱照。各种各样风格的出现就是为了满足 很多新人们的各种不一样的需求。现在的新人都很喜欢旅拍，每年都 有很多人会去热门旅游城市拍婚纱照。1.1.2小时髦全球旅拍网站建设目的2建设小时髦全球旅拍网站，主要是树立小时髦全球旅拍突破平凡,诠释年轻时尚旅拍的形象，宣传小时髦全新风格等文化，展示了小时 髦独树一帜的风格，让客户可以第一时间了解小时髦的作品更新情况,增加客户的满意度与忠诚度以及信任，也大大便利了小时髦全球旅拍 的宣传和推广。1.2网站建设需求分析网站建设需求分析首先对旅拍行业进行调研分析，可从行业发展现状以及前景知道 客户对作品的要求与期待，找到定位。其次对目标客户人群进行定位，以独

6、一无二的旅拍风格来吸引新人们。对竞争对手的网站目前发展进 行分析，让好看的旅拍搭配时髦比竞争对手更让顾客心动。1-3网站整体结构网站整体结构本网站的结构由首页、摄影师理念、旅行电影、作品欣赏、跨境 旅拍、联系我们六大部分组成。其网站结构图如图11所示：小时髦全球旅拍首页 摄影师理念 旅行电影作品欣赏跨境旅拍 联系我们三亚函江巴厘岛图1-1小时髦全球旅拍网站栏目布局图3“首页”栏目：该栏目主要是关于小时髦全球旅拍的简介及 风格特色。“摄影师理念”栏目：该栏目主要是展示小时髦摄影团队的 风格和创意。“旅行电影”栏目：该栏目主要内容是长视频作品剪辑而成。“作品欣赏”栏目：该栏目主要展示小时髦三大拍摄

7、地点的 作品集。“跨境旅拍”栏目：该栏目主要内容是跨境旅拍的一些注意 事项与说明。“联系我们”栏目：该栏目主要是小时髦的联系方式以及官 方微信微博。4第二章前期准备2.1素材收集整理素材收集整理小时髦全球旅拍网站图片素材来源于百度搜索引擎(http:/www.baidu./),小视频来源于抖音APP,MV来源于优酷视频(https:/ Photoshop 软件处理后 保存到images文件夹，从抖音上下载的小视频保存到MV文件夹便于 运用。2.2 LOGO 设计设计1、logo设计大小及设计理念Logo设计对小时髦全球旅拍有识别和推广的作用，通过logo可 以让顾客记住小时髦的主体和品牌文化广

8、。小时髦全球旅拍的logo 主要用黑黄色调搭配的“小时髦”文字为主体，寓意着在传统婚纱照 上添加上些亮眼的时髦元素让婚纱照与众不同，左侧“VERY FASHIONAB LE,英文字体译为非常时髦，右侧做了一个好看的对称字 母，从旁侧击地凸显出“小”时髦并不只是一点点时髦这样的字面 意思，其与众不同的色调搭配以前所未有的视觉冲击打破传统、诠释 不同以及间接的英文都在告诉大家：小时髦二VERY FASHIONAB LEo 效果图如图2-1所示：VERV SSSIMSHICMUBLE.aaS.脉 图2-1 logo效果图52、logo的制作过程如下：第一步：打开Photoshop软件，新建，大小为1

9、00*59像素，并且背景是白色的，如图2-2：K:H-.I-dil图2-2新建文档第二步：运用文字工具写出“小时髦”字样，微软雅黑，24号字体，字体颜色为灰黑色，且每个字都在不同的图层，如图2-3：runiii 33 lia Z3 m Ml.t E图2-3文字设置1第三步：再运用文字工具写出“VERY FASHIONAB LE”字样，微软雅黑，6号字体，文字上下间隔为8,加粗，字体颜色为灰黑色，6如图2-3：图2-4文字设置2第四步：将“小时髦”三个图层栅格化文字，然后运用钢笔工具、变形工具选中，换色，调整，最后再运用文本、画笔工具做一个与以 英文对称的字母，最后将文件命名并以jpg的格式保存

10、到images的 文件夹中。2.3 B anner 设计设计1、banner设计理念B anner即是宣传海报，是吸引每位进入小时髦网站的顾客的眼 球的地方，所以banner既要一眼就能明了此网站是做什么的，又要 向顾客展示每个人都是全球限量版的全新时髦风格。本网站banner 宣传了小时髦全新风格并运用了 JavaScript代码实现图片轮播的效 果。banner部分效果图如图2-5和图2-6所示：7图25 banner效果图明星选择新奢主义 GOLDMEDALINTHETEAMGOLDMEDALINTHETEAM全新的映画时代，让无限美学创想转眼成真图26 banner效果图2、banne

11、r的制作过程第一步：把已经从网上找好的banner背景图片利用Photoshop软件打开，然后调整图片大小，如图2-7所示：8:IF)ffl(E；匿唆:：g.iu*(境s SSM SCpffl)ai(HJ,nI早I法I+口仁 HxJyJ.具卜匚上位,w,.i-iaJ.i j.i.i.i MH 二iX1-像圭K：1.61nK2IW为 1.83M)|碇定 1芝.*WX匕0。11 gi素-j.|犯消20:由|醐-,胃:HsJl.AJ.a泥1|叫大小：攵1393|m*-j也H.jiS)：)：9,51|匡弟 v龙/针年1TI|整煎英.|-I 算诫在点力M如比g曰由丰图制景去；同3 4话三二平君g!,民习

12、雌出莒云祥舌凝.一 w一有砒渐_图2-7调整banner背景图大小第二步：插入小时髦的作品缩略图以及另类小时髦标识，调整图片大小，如图2-8所示：jz件y;梆刖；囹伽，s)s(i,i 蟀(0 炳加：现码仲 siriiwj fl：q I SB-w.；-j-Jb；-:口 jCjP S|wo_l EL 栏：Its wkr.h.?.r.i,.r.i1.H.h.if.i;.h.p6 I,?|w,?.U-吠 X 死tf 土*T*.二*,a X图2-8插入作品图第三步：新建新的图层，使用横排文字工具输入文字，调整字体 大小、样式以及颜色，制作水印，最终实现效果如图2-9所示：9id无KI明星选择新奢主义明星

13、选择新奢主义GOLDMEDALINTHETEAMGOLDMEDALINTHETEAM全新的映画时代，让无限美学创想转眼成真如图2-9 banner最终实现效果图2.4首页效果图首页效果图首页犹如人的外貌，顾客打开网站的第一看见的便是首页，所以 首页给人的第一印象要好，顾客才有兴趣去看去研究网站的“内在”。因此，首页的栏目要清晰明了，布局颜色搭配要恰好，图片要清晰,内容要丰富吸引人。本网站的首页颜色主要是使用灰黑白黄搭配，既 不显冲突和花销也带入了时尚元素。字体颜色为黑色或白色，背景颜 色为淡粉色，栏目清晰明了，分类清晰，图片高清，采用了整齐的图 文结合以及图标使得整个页面整洁大方耐看。页面内容

14、既突出了小时 髦的特色也展示了小时髦的作品风格，首页效果图如图2-10所示：10每个人都是全球限量版2018 EVERYONE IS A LIMITED EDITION一个没有标签没有限制的新世界，在这个世界里，人们打破传统、创新未来 每个人都能成为自己的限量版，成为光影中绝无仅有的人。版&帝g.如jSSHlEKiVERY kASHIOMABlE GLQ8ALRAVEL PHOTOGRAPHY橱】蝠大的g就呈.afi38t3imj 部磕企福邮.埴1皿曜料皿构睥如图2-10首页效果图11第三章网页设计制作3.1首页设计制作首页设计制作1、首页布局本网站首页主要由logo、导航条、轮播banner

15、鼠标经过小视 频、滚动文字、GIF图、滚动分类板块图、jpg链接图以及网站版权 九个部分组成，logo与导航条在页面顶部，其次是轮播banner板块，鼠标经过小视频、滚动文字、GIF图在一个大板块、然后是滚动分类 板块图等依次各占一版块，最后是网站版权。页面内容丰富，排版美 观且合理。具体布局如图3-1：图3-1首页布局图小时笔HLOG。首页 鼬师理念旅行电影作品欣赏 跨境旅拍 联系我们四张轮播海报花絮小视频Wh a t is 小时曜(FCSM)?链接合集介绍文字皈|GIF 图系列作品滚动模块图片网站版权122、导航条的制作导航栏是网页的方向牌，导航栏能够让用户快速并且准确地找到 他们想要了解

16、的信息，网页若没有一个清晰的导航栏，那么肯定是会 影响用户的体验感，严重甚至导致用户的流失，本网站是设计了一个 下拉导航栏，背景颜色主要为黑色板块，导航栏为横排，鼠标经过变 白色板块。导航条效果图和其节选部分代码如图3-2和图3-3所示:首页作品欣赏1 稣珈LbblL巴屈岛rZ图3-2导航条效果图img s rc=ima ge s/1 cgc-1-jpgh t-ef=index.腐易为U巾理念l ix：a h ref=n 1 xdy.h t ml Kl iXa h t e=zpxsh re f=11 ay.h t in 1，r,IE巴厘岛l ix：a h ref=kj 1 ph t ml,p:

17、跨境眼拍h ref=l xv!Tn.h t inlri：I，r ht -n j_n jj _图3-3导航栏节选部份代码截图3、图片轮播的制作把B anner图片调整同样大小，再用JavaScript实现图片轮播效果，效果图与其节选部分代码截图如下图3-4、图3-5和图3-6所示：13图3-4图片轮播图1效果（轮播前）餐心泥或】hB B a图3-5图片轮播图2效果（轮播后）14代码顷T设计 买肘传码曰 实时视图 检萱&地址：曲e:/C两ser$及1场罗虹叩.癌.Iki驻村i pdex.ktrnl-目琮书E 3-回-福板一13厘农B.，一风既ocri pr rype=rext/j a va scr

18、i pt 3rc=i mga pper.j s/scri ptwi ndow.oni oa d=frui cti on(i mga pper.scroll(4,ba nner_ li s t,li st,ba nnej i nfo);!Te-La teBe gi nEdi ta ble na me=hea dr?la tEEn.dEdlta j 31e I!Tengs La teBe gi nEdi ta ble na j ne=,Edi tRegiia i i l tul i d=li stx/ul,图3-6图片轮播节选部分代码截图4、鼠标经过文字效果给予较为重要的区域适当加一些鼠标经过的效

19、果，会有力的 增强区域的点击感，给用户带来良好的用户体验,起到画龙点睛的作用。本网站在花絮小视频文字区域增加了鼠标经过效果，点 击即可观看一个几分钟的小视频，以此增加客户的点击量以及客 户的兴趣。效果图与其节选部分代码截图如下图3-7、图3-8和图3-9所示:丁了解一下？饷长扬蹴红色 海烤 爱笑爱跳的d溯姐 可爱鸣 让我 日削 小麦真是人皿爱！图3-7鼠标经过文字效果（经过前）15稻城市T了解一下？曰书长扬蹴红色 海烤卧1娅 可爱鸭 让 日跚图3-8鼠标经过文字效果（经过后）苗矽I拆分I.设计 实时代玛 M I实时褪图 检查 a 3*、地址：fi le:/C j/Vsers/xlh/Desk顷

20、p/毕业设计力ndex.html1541551561571581591601611621631641516616716816917017117217317417517617717817&180B蚤打甘 V 幅们EgLllE-R 国”“M 曲-ma rgi n-bottom:Ops;ma rgi n-left:50px:#zuol ba ckground-color:#393939;ma rgi n:a uto;floa t:lett;hei ght:220px;wi dth:200px;border-top-style:da shed;border-top-wi dth:0.5px;borde

21、r-top-color:#99S;#tcp3#a uo#zul p a(text-decora ti on:none;font-si ze:14px;font-wei ght:bolder;color:#999;ma rgi n:20px;#top3 fzuol p a:hover color:#F37248;text-decora ti on:underli ne:font-si ze:lpx;#you ba ckground-color:#FFF;图3-9鼠标经过文字效果节选部分代码截图5、文字滚动效果动态效果往往比较吸引用户的目光，文字滚动效果比静态文 字易读得多，也容易引起顾客的注意。

22、本网站在首页介绍小时髦 时的文字实现了向上滚动效果，滚动速度为2,效果图与其节选 部分代码截图如下图3T0、图3T1和图3T2所示：16田I 和时信1 土主 ES 住*玄万山图3-10滚动文字效果（滚动前）用15W间去完成的伟大系列！f 大胆而偏执的作品系列一群京酬星时尚摄舅师和巴黎时装设计师用他们对于时尚的理解来突破平凡诠释年轻时尚旅拍的管风格延续时尚让所想皆有所愿！每个人都是全球曜版，成为光影中罅无仅有没有标签只有风格时星与婚纱绝配W蛔让传统乏味婚妙摄翌一次革命萌覆挑就！S-浏甥我阁睥肩-fi 任，不光疑心.也是思籍眼术上锹菽持，10。绑蹒人满音是对小时壁最完美的肯定！所有服装由独立的巴贽

23、时装设计师设计，并非苏用或者广州买的杂牌或者仿大牌的时，无*A S m M-nryj Wa-1 曰 Z*I ttr n4VP 4ruUn-*A I图3-11滚动文字效果（滚动后）打代码I拆分设计实时代码 M I实时视囹 检查 地址:、i le：/C|Afsers/xlh/Desktop/t设计/i ndex,htmlD 缚355356357358359di v i d=youOWha t i s 小时笔(FCSM)?30361362363364用15年时间去完成的伟大系列!个大胆而偏机的 作品系列一群京圈明星时尚摄影师和巴黎时装设计师 用他们对于时尚的理解来突破平凡诠释年轻时尚旅拍的全新风格延

24、续时尚让所想皆有所br/典个入都是全球限里版，成为光影中的绝无仅有35363673839没有标签只有风格时笔与婚纱绝如小时笔让传统乏味婚纱摄影一次革命簸覆挑衅！每一次拍摄我们都身肩一份表任，不光是走心.也是思维和技术上的终端支持，1。说的新入满意是对小时笔 最完美的肯定！所有服装由独立的巴黎时装设计师设计，并非 苏州或者广州买的杂牌或者仿大牌的婚纱，无论是男生女生月艮装 搭如，或者是个人整体服装搭甑方面色调样式，相当时图3-12滚动文字效果节选部分代码截图6、图片滚动效果+鼠标经过效果小时髦全球旅拍为了在向用户展示优质的作品同时给用户17 一个舒适的用户体验，把作品系列做了一个个单独的图片合集

25、,运用了图片滚动效果+鼠标经过效果呈列在首页，效果图与其节 选部分代码截图如下图3-13、图3-14、图3-15、图3-16和图3-17所示:18#r:op4 ma rquee a text-decora ti on!none;di spla y:block;hei ght;240px;wi dth:185px;ma rgi n-top;lOpx;floa t:left;border:0.5px soli d#993;font-si ze:14px;color:f000;ba ckground-color:#FFF;#rop4 lEa rquee a:ha ver ba ckground-co

26、lorIF3C102;color:#FFF;floa t:left;#top4 ma rquee a p font-si ze:14px;color:#000;text-decora ti on:none;ma rgi n-left;65px;ma rgi n-top:lpx;font-wei ght:bolder;a h ref=jt sm.h t ml*ximg src=ima ga/fl fl江/麻态04.jpg w idt h s720 h eih t 1080/冲瘠态时髦SAB7p 图3-17图片滚动效果+鼠标经过效果效果节选部分代码截图3.2“摄影师理念”页面设计制作“摄影师理念”

27、页面设计制作1、“摄影师理念”网页布局摄影师理念主要是介绍小时髦的金牌团队，网页主要由log。、导航条、banner图片、团队介绍视频、滚动文字、图片放大效果、文字、网站版权七大部分组成，其具体布局如图3-19所示：19小时髦LOGO首页 摄影加理念旅行电影作品欣赏 跨境旅拍 联系我们海报小时髦摄影师金牌团队视频向左滚动的介绍文字团队介绍图片团队介绍文字网站版权图片3-18摄影师理念布局图2、“摄影师理念”页面效果图页面为了更详细地介绍团队以及摄影师理念，插入了网页视频,运用图文结合的方式来介绍摄影团队、造型、创意与时尚服饰穿搭,页面效果图如图3-19所示：20|；%，EIE谯SlKfnE*金

28、牌团队GOLDMEDALINTHETEAMGOLDMEDALINTHETEAM没有标室，只有风格！展示自有无惧的摄影创意#-TA HE t停.lar-tBffj*.AUtwiiT不一鼻r摞碧人的豪弟他们天龙茶主义好，丈乞者导，会折儿会生话，i,适格料瘴氟令，拿擢*n箱毒.Chezhe/J、时整FCSM.Photography.削惠总股!（5二Cliezhp）,JHfi歇目撮影人1W学制最吕黄格认址（I MPAJ Itllihvstiip nF Maslnr PhltigriifihHf:A-ssim ialiiin,将肆蟠人 底蔑求访*i希林朗SlR&S；十。2010*t,祢#4hi扃伯泪珈（

29、MPA Master Photographers Awards,呻二大也顶，*fil 为事时人保作取皇 轻触玷从餐作品蔻军以及经典A埸ft品冠电编虱心 CChfl7hR,空标荷11芒而英国皿大师协？（MPAUiq伊人t的+F龄师，也字晰掘凯井|Ejr忡翩附了出j他咨屏?就时尚眼饰芽搭.升吟；5成立的F5国阳;囹J顾如.：T：!成州也#T州龄峰游成起6丈挣瞄纱，无iBT孱E/T赋!:is阳一霹呈个人珞fl硕:档祈!方面色剧式.招当时里！小H技酬1笆耐M丽人拇：UJJBiirlrnrry,古醐;UM：I,：4迪l+NIl,编也穴皿回u御a,纪.iglVFMCHY,湖-布fcjfeJUiom Bro

30、wnc.-.SJEfiM-M；）KrteKitEfti就I由*心函品，心的苦M*WT职皆的回虹 口近岸Mg他#图片3-19摄影师理念效果图3、“摄影师理念”页面动态效果及实现页面同样运用了滚动文字效果，还采用了 JavaScript实现了图 片放大效果，插入了网页视频，增加页面的动态性与活力。效果图以 及其部分代码截图如下图3-20、图3-21和图3-22所示：21图3-20图片放大效果图|/r 图3-21插入网页视频代码截图di v i d/i mg*LiDg srcuna ge3/7.jpg w idt h s w106Sn h eigh t=600li cla ss=evenflow s

31、ca le Xi mg src=j j na gea/8.j pg wi dth=IOCS h el gh t=00/X/nxb Sg a rcs ima ges/S.jpg w idt h IOCS,h eigh t=00/l i cl a s s=evenfl ow sca l eximg a rc=jjna gea/l O.Tpg w idt h.=1,108n h ex?h t=600*.t fveuxxuw*tma rgi n:0:pa ddi ng:0;border:。：font-si ze：100%;font:i nheri t;verti ca l-a li gn:ba sel

32、i ne;outli ne:none;-webki t-font-smoothi ng:a nti a li a sed;-webki t-cext-si ze-a dj ust:100%;-ms-text-si ze-a dj ust.:1001;-webki t-box-sizi ng:border-box;-mos-box-si zi ng:border-box;box-si zi ng:border-box;.evenflow di spla y:i nli ne-block:.lew:a fter；content:di spla y:block;clea r:boi h;vi si

33、bi li ty:hi dden;li ne-hei ght:0;hei ght:0;.evenflow Li di spla y:block:fl oa t:l eft:ma x-wi dth:400px;li ne-hei ght:0;ma rgi n-left:lOpx;ma rgi n-ri ght:lOpx;ma rgi n-bottom:20px;tra nsi ti on:a ll 0.25s ea se;1图3-22图片放大效果节选部分代码截图223.3“旅行电影”页面设计制作“旅行电影”页面设计制作1、“旅行电影”网页布局旅行电影主要是顾客旅拍的小视频或作品整合制作成了一部“

34、时 髦”电影，该页面主要由log。、导航条、图片、视频、文字网站版 权等七大部分组成，其具体布局如图3-23所示：H首页摄影师理念旅行电影作品欣赏跨境旅拍联系我们LOGO 置置旅行电影丽江旅行电影视频网红小杨幕城市旅行纪丽江（文字介绍）三亚旅行电影视频脱口秀主持人波波城市旅行纪三亚（文字介绍）网站版权图3-23旅行电影布局图2、“旅行电影”页面效果图23该页面主要是展示顾客美好的旅行电影供用户参考观看，页面比 较单一且简单，其效果图3-24所示:图3-24旅行电影效果图3、该页面的动态效果及实现该页面插入了网页视频，效果比较单一且简单，效果实现代码如 图3-25所示:24 cdiv id=na

35、 mecifra m h eigh r=500 w idrh=SCiO src.=h t t p:/pl a r&M&borderj1 a l l oirfful l 3creen,=w nX/if ra inedq;cl a s s=,wpc,红小椅皋一市旅行纪丽江匚切，拍担景点:HU江/div;|脱口秀主持人液液一城市旅行纪三3L拍榻景”点:二丑/pHi 八图3-25网页视频效果实现代码截图3.4“作品欣赏”页面设计制作“作品欣赏”页面设计制作1、“作品欣赏”网页布局作品欣赏主要为一个静态页面，方便给顾客参考的一个作品集,该页面主要由logo、导航条、文字、图片、右侧导航条、网站版权 等其

36、大部分组成，其具体布局如图3-26所示：25小时髦 首页 摄影师理念 旅行电影 作品欣赏 跨境旅拍 联系我们 ICS._作品欣赏小时髦全球旅拍作品欣赏作品图片行走时髦系列 静态时髦系列 青春时髦系列性感时髦系列 经典时髦系列（列表固定）查看更多（链接）网站版权图3-26作品欣赏布局图2、“作品欣赏”页面效果图该页面主要都是小时髦作品集，其效果图如图3-27所示:26图3-27作品欣赏效果图273、该页面的动态效果及实现为了方便顾客查看其它系列图片，该页面实现了右侧导航条固定 滑动效果，效果实现代码如图3-28所示：w en ma rgin:a ut o;h eigh t:5400 x;w id

37、t h.!230pxr posit ion:fixed;t op：350px;l eft:950pxr I zh-ong Iw ea ul(pa dding:Opxr ma rgin-Bp;30px;)I zh ong fw e-n ul Li(l is t-s uyl e-cype:none;l ine-h eigh t:40px:h eigh t:60px;w idt h.:150px;t ext-a l ign:cent er:zh ong#w en ul l i a t ext-decora t ion:none:dis pl a y:bl ock;foa t-s ize：LSpx:c

38、ol or:*000;font-fa mil y;呦圆”；foa t-w eigh t：bol der;border:O.Spx sol id#000;图3-28右侧导航条固定滑动效果实现代码截图4、该页面的其它动态效果及实现为了使网页保持活力，该页面还增添了一个浮动效果，其效果图与效果实现部分代码截图如图3-29、图3-30所示：图3-29浮动效果图28：地址:i le:万/C|/Users/xlli ZDesktop/JlTri-/zpxs.htmlBWV苫 贫.国aj aEIMPa虬va r JBy=num%20;va r ch=dLocui nent.docwnencElemenc.c

39、li enrHei ghC;va r cw=dacument.documentElement.cli entWi dth;setlnterva l(move(movea bledi v)七100);functi on move(d)(va r ra i i v=docuj rtent.getELementByIi(d):whi le(mx=0|I my=0)num=new D&z()getTi me();mx=num%15;my=num%20;mdi v.style.Left=pa r=Int(nri i v.style.left)+mx+px;mdi v.style.top=pa?3=Inr

40、(mdi v.s cyle.rop)+my+px;i f(pa rse I nt(nKi i v.style.left)+pa rselnt(mdi v.style,wi dth)=cw)(ni uG=new Da te().getli me();mx=-n.uj n?15;whi le(mx=0)(num=new Da te().getTLme(J;mK=-ni ua%15;else i f(pa rselnt(mdi v.style.left)=0)图3-30浮动效果实现代码截图3.5“联系我们”页面设计制作“联系我们”页面设计制作1、“联系我们”网页布局联系我们主要是给心动的顾客提供联系

41、方式的，该网页主要由 log。、导航条、图片、文字、二维码、网站版权等六大部分组成，其 具体布局如图3-31所示：小时髦._ N E 首页摄影师理念旅行电影作品欣赏跨境旅拍 联系我们LOGO._客户咨询电话15306244666小时髦全球旅拍VERY FASHIONABLE扫一扫Weixin微信咨询（二维码）扫一扫Weixin官方微信（二维码）扫-fiWeibog方微博（二S码）加入我们办公电话：021-60556573手机：15121177532阿站版权图3-31联系我们布局图292、“联系我们”页面效果图联系我们主要是给心动顾客提供联系方式和进一步推广官方微 信、微博，让顾客可以更方便关注

42、我们的动态，其效果图如图3-32所示:扣S户咨询巾讯15306244666小时半全球旅拍i1I1A 酬 5W3lWi：021 G05SC573 7tl:1S121I775J2VERY EA5E3tUeLE GLOBAL TRAVEL rHOTOOMTHYHP!咔g*.5袖7橱 I.BNMJHEX 5?季砌加巽图3-32联系我们效果图3、该页面的动态效果及实现该页面运用了鼠标经过效果，效果实现代码如图3-33所示:hei ght:200px;wi dth;200px;pa ddi ng-top:20pK；pa ddi ng-left:20px;pa ddi ng-ri ght:20px;pa d

43、di ng-bottom:1Opx;floa t:left;#bj 3 a p(font-si ze:18px;color:#FFF;test-decora ti on:none;ma rgi n-top:Opx;font-fa mi ly:”微软睡黑#bj 3 a p:hover color:#F0;#bj 3 a di spla y:block;floa t:left;hei ght:280px;wi dth:245px;ma rgi n-top:4Opx;ma rgi n-ri ght:2Opx;ma rgi n-bottom:1Opx:ma rgi n-left:5Opx:text-a

44、 li cm：center;图3-33鼠标经过效果效果实现代码截图30第四章网站推广4.1电子邮件推广电子邮件推广在高速发展的移动互联时代，每个人都有一个或多个专属于自己 的E-mail.它已成为了人们相互联系，工作交流，拓展业务的必备工 具。EDM(Email Direct Marketing)就是一种顺应时代发展的产 物。电子邮件推广是以电子邮件为主要的网站推广手段，与用户以及 潜在用户沟通，实现企业经营战略的一种营销技术，它主要指通过邮 件列表向顾客发布公司的新闻、声明、新产品信息、优惠信息等。首先要收集大量的电子邮件地址和客户姓名，收集邮件地址和客 户姓名的方法很多，比如购买第三方的营

45、销邮件数据库、或者与别人 交换数据库资料等，但这些都不是我们需要的客户，最理想的方法是 客户主动提交相关信息，例如注册用户的时候提示客户订阅，订阅邮 件后给客户提供优惠信息等。要让订阅者不反感，要提供针对性的内 容，让用户看到他们想要看到的东西，提供分类订阅，在用户订阅和 退订的时候，列出一个分类目录让用户选择，这样就可将用户邮件进 行分类，按照用户的实际需求来给用户发送不同类型的电子邮件。时 效短的信息要优先发送，时效性长的信息可以适当延后时间，要控制 信息发送不要过于频繁。在发送电子邮件之前，一定要做好潜在的访 问者分析，然后再进行发送工作。切忌不分用户类型一味滥发邮件,那样不但达不到预期

46、的效果，还有可能造成完全相反的效果，所发电 子邮件被判定为垃圾邮件。314.2 IM及时通讯工具推广一及时通讯工具推广一QQIM营销，它是通过即时通讯工具如qq或者msn一类达到传播推广 信息。QQ已经不仅仅是一种个人的通讯工具，而已经成为现代交流方 式的象征。4.2.1 QQ推广的特点1、高适用性2、精准，有针对性3、易于操作4、近乎零成本5、持续性6、高效率4.2.2 QQ适合什么样的推广1、针对特定人群。2、针对固定人群的网站。3、低流量指标的网站。4、推广有针对性的项目。5、对现有用户群进行维护，建立QQ群对现有用户进行维护。6、维护一个老客户的成本要低于挖掘一个新客户的成本。4.2.

47、3 QQ的设置技巧：1、头像最好要真实，有特色，让人看了一眼就能记住，最好是稳重正规给人信任，有亲和力。322、名字昵称要真实，健康向上，有活泼个性，真名可以极大增 加别人的信任度。3、最好不要用那些英文和非主流的形式。4、个人资料要完善。5、排名位置要靠前。6、个性签名一定要认真对待。4.2.4聊天注意事项：1、图片，表情不要乱发，语气助词要慎用。2、称呼称谓不要乱用。3、聊天速度要得当，字体字号颜色不要乱用。4、信息发布时间要准确，要用礼貌用语。QQ群分为：自建QQ群和加入已有QQ群。加入已有的QQ群：尽量加 成员多的QQ群，不活跃的群尽量不加，同质化严重的不加，目标人群 不集中的不加，及

48、时修改群的名称。自建QQ群：尽量多建高级群，群的定位一定要明确，主题鲜明，群名针对性要强，群中男女搭配要适当，提升群类排名。4.2.5 QQ群推广的技巧：先感情后推广，推广对象具体到人，传播内容少要精，巧用群其 他的功能，申请成为管理员，建立QQ群联盟。QQ群推广的效果好坏,也直接取决于群的数量和质量。寻找目标群的方法：腾讯群的平台：http:/33直接使用搜索引擎搜索。到相关网站，论坛查找。4.3 SNS社区营销推广一博、微信、抖音社区营销推广一博、微信、抖音1、微博推广微博推广以微博作为推广平台，每一个听众（粉丝）都是潜在营 销对象，利用更新自己的微型博客向网友传播企业、产品的信息，树 立

49、良好的企业形象和产品形象。每天的更新的内容就可以跟大家交流,或者有大家所感兴趣的话题，这样就可以达到营销的目的。首先，注重风格彰显个性。其实每个人有都自己的个性，微博也 不例外，要想别人关注你，你就要彰显自己微博的个性，注重自己的 风格。所以注册完微博之后一定不能急于求成，就大量的发布关于自 己网站的东西，首要任务就是要完善我们的个人资料，让别人知道我 的微博是干什么的，能给予用户什么样的体验，发表内容时更是要注 重原创性，这才可以彰显出自己的风格，耐人寻味。其次，做好微博 定位选择用户群体。要了解用户的喜好，关注用户对于哪一类型的微 博比较感兴趣给予微博一个主题，因为目的是推广，用户的关注量

50、才 是最根本的。在积累到一定用户的时候，就可以在每天发的微博中推 广网站。但是这一定要注意，凡事都要有个度，否则就会物极必反，有的站长因为关注自己微博的人数多了就大量的推广自己的网站，从 而失去了原本自己微博的个性，从而导致关注度下降，甚至取消关注 的可能。内容创意新颖吸引用户关注，切勿频发微博应选好时间段。34 从推广微博促进网站推广，可以加入一些微博群，利用微博群这个资 源将它推广出去，让更多的人知道我的微博，关注我的微博，从而达 到推广效果。2、微信推广微信推广也是时下火热的一种模式，微信拥有超过10亿月活跃用 户，可以实现海量品牌曝光，传递品牌文化，强化品牌形象，并配合 精准定向，让更