人人show英语学习网站前台设计与实现毕业论文.pdf

摘要本设计首先进行了人人show英语学习网站建设的需求分析，根据需求得出了网站设计的整体结构，接下来制作了网站首页、课程分 类页面、加入班级页面、每日英语页面等21个页面，使用了 Photoshop、Dreamweaver、HTML、CSS JavaScript 等软件和技术实 现了二维码浮动广告、图片点击轮播、网页视频播放等12个动态效 果，呈现了较为完整的网站前台页面效果。最后通过电子邮件、QQ、微信等工具对网站进行了推广。关键词：英语学习网站；网站前台设计；网页制作目录引言.1第一章设计背景.21.1英语学习网站设计目的.21.2网站建设需求分析.21.3网站整体结构.3第二章前期准备.52.1素材收集整理.52.2 LOGO 设计.82.3 Banner 设计.102.4首页效果图.14第三章网页设计制作.153.1首页设计制作.153.2动态效果的制作.173.3其他页面设计制作.23第四章 网站运营推广.294.1电子邮件推广.294.2 IM即时通讯工具推广一QQ.294.3 SNS社区营销推广一微博、微信、论坛.31总结.35致谢.36参考文献.37引言随着各类在线学习网站不断发展，传统教育的弊端日益显现。人 们不再局限于从传统课堂中获取知识而更多的倾向于通过互联网渠 道在不同网站平台进行在线学习。在线学习可突破时空限制，结合移 动终端实现碎片化学习，教育内容多样化。随着互联网等现代技术的 发展，在线英语学习将对传统英语教育带来颠覆式的变革，英语在线 教育平台的建设成为英语教学的普遍发展趋势。本毕业设计主要内容是关于人人show英语学习网站的设计与实 现过程。内容阐述包括网站设计背景、网站logo banner元素设计,网站动态效果实现以及对该网站进行相应运营推广。人人show英语 学习网站建站目的在于为英语爱好者提供在线英语学习平台，实现课 程资源共享，普及各层面英语学习知识。1第一章设计背景1.1英语学习网站设计目的1.1.1当前英语教育网站的发展状况根据中国社会科学院消费研究院报告（SSIC）显示，中国境内有3 亿人的庞大英语消费群体，有近5万所英语培训机构，而随着经济、网络技术的不断发展这一数据也逐步增长，社会对英语的需求越来越 大。数据表明国人每年有大量花费用于英语学习培训，但其实际效果 不佳，在全球44个母语为非英语国家及地区中，中国人的英语熟练 度仅排在29位。传统教育在空间、时间、受教育者年龄和教育环境 等方面都有限制，在线教育克服了这一限制带来了崭新的学习模式，随着新技术、新媒体教学的应用与创新教育的发展，英语教学要顺应 信息时代的新变化、新趋势、新要求。1.1.2人人show英语学习网站建设目的建设英语在线教育平台可以提高国民英语教育信息化水平和教 学质量，促进传统教学模式改革。基于在线教育课程教学是人人show 英语学习网站建设的核心，积累和共享教学资源并长期更新，网站主 要通过网络平台辅助，旨在增强教学过程中的交互性和实时性。网站 旨在帮助各个不同阶段对英语有兴趣的人提高英语水平，学习英语知 识，共同学习进步。1.2网站建设需求分析在互联网+的时代，人们生活的方方面面都离不开网络，信息化、网络化成了常态，给人们的生活和工作带来了重大影响。网络化多媒 2体与传统教育相结合衍生了在线教育，在线教育为我国教育现状提供 了全新模式，我国传统教育现状促成了教育型网站大肆发展的契机。人人show英语学习网站基于这一契机应运而生，利用网络资源优化 英语课堂教学的在线学习网站,有利于解决现今国人“哑巴英语”这 一难题，增强学习动力，促进在线学习、自主学习。1.3网站整体结构人人show英语学习网站设有一级页面一个一一首页；二级页面 六个一一关于我们、课程分类、加入班级、每日英语、最新资讯、联 系我们；网站还设计有多个子页面，丰富、美化网站结构，构成了人 人show英语学习网站。如下图1-1所示为网站框架结构图：图1-1网站框架结构图(1)“关于我们”栏目：关于我们栏目主要介绍人人show英语 学习网站的建设理念和相关业务板块有助于用户第一时间认识这个 网站。(2)“课程分类”栏目：课程分类栏目共设置有听力、口语、3写作三个子栏目。栏目分布清晰目的在于为用户提供有针对性、有选 择性的课程学习。(3)“加入班级”栏目：这一栏目的设置考虑到社会各阶层人 们对英语的不同需求。零基础英语适合对英语有兴趣没基础者自学，考级神器的内容针对大学生四、六级考试，职场提升的受众则是广大 商务人士内容主要是商务英语。(4)“每日英语”栏目：每日英语栏目注重逐日积累，重在测 试，使用户更好的了解自己的英语水平。(5)“最新资讯”栏目：此栏目不定时更新关于英语学习的最 新资讯和相关课程信息。帮助用户及时了解网站动态和英语相关领域 信息。(6)“联系我们”栏目：联系我们栏目用于网站与用户实现交 互。相关合作或者建议都可通过后台联系网站工作人员实施。上述六大主栏目构成了网站的结构框架，从框架图可知，每个栏 目紧贴英语学习网站这一主题，栏目清晰，结构严谨。4第二章前期准备2.1素材收集整理1.图片素材人人show英语学习网站图片素材参考了千图网、站长素材图片、百度图片，以“教育、英语、在线学习”为关键词搜索图片，然后通 过Photoshop软件对搜索所得的图片进行处理。运用了诸如：滤镜、裁剪、羽化、亮度/对比度、钢笔工具等一系列技术对素材图片进行 美化处理，最后将处理好的图片储存在以images命名的文件夹后期 应用于网站。以下为“人人show”英语学习网站中的一张图片素材实现步骤:(1)打开Photoshop软件，点击左上脚文件打开原图素材。(2)调整图像大小使适应网站需要，运用矩形选框工具绘制文 字录入区域，修改该区域透明度。图2-1绘制文字录入区域并修改透明度(3)使用横排文字工具在绘制好的矩形选框内添加文字素材。5图2-2录入文字(4)点击“图像”菜单下“调整”选项，选择“亮度/对比度”,调整亮度/对比度输入输出的相关取值达到目标效果。图2-3图片亮度/对比度调整(5)将调整美化好的图片以JPG格式储存在images文件夹下。2.文字素材人人show英语学习网站文字素材来自网络搜索，根据网站主题,在百度搜索框或者素材网站中输入关键词如“英语”、“教育”、“在线学习”等关键字查找内容。然后对搜索到的有关英语在线学习的资 6讯或者相关介绍文本素材进行合理化筛检、编辑。最后结合相关栏目 内容定位选择合适的素材应用于网站。3.视频素材人人show英语学习网站中的视频素材通过百度搜索框搜索“英 语学习”关键字所得，对搜索到的视频文件进行转码整理，保存到相 应文件夹中应用于网站。4.素材的整理网站所有内容都统一放置一个文件夹中并命名为毕业设计，在其 子文件夹新建images文件夹、fla文件夹、css样式文件夹、js文 件夹、Templates文件夹。图片素材进行分类命名统一放在images 文件夹中，视频素材进行分类命名统一放在fla文件夹中，样式文件 放在css样式文件夹中，脚本放在js文件夹中，模板放在Templates 文件夹。如下图2-4所示为网站文件夹结构图：国 css 2017/11/30 22:49 划犊山 fla 2017/12/415:17 支件夫出 images 2017/11/23 19:22 文件夹国 js 2017/11/27 18:49 文件夹|.Templates 2017/11/30 22:49 文件夹敢一e-e-一e e一，度.e-e-一，e-,e-e-e-e-,e-e-e-一，e-.V，e-.V.首一.-，e-_e，e-_ee-e-e-e-一e-.e-.dl.html2017/12/4 16:1336 0 sH TML Do.5 KBgywm.html2017/12/5 1111336 0 se H TML Do.10 KBndex.html2017/12/5 9:5536 0 se H TML Do.16 KBrbj.html2017/12/4 17 g36 0 se H TML Do.9 KBccfl.html2017/12/114:036 0 sH TML Do.17 KBcjsq.html2017/12/6 9:4236 0&H TML Do.15 KBcsxx(html2017/12/4 16:583&0sH TML Do.18 KBt./It./,垒 E 迎 R(R(回图2-10图片宽局大小调整(3)选择横排文字工具，输入“can you speak English,just join us now”，调整文字大小和字体，体现整体美感。11图2-11网站banner文字录入调整（4）制作右下角小图标，丰富banner界面，突出主题。图212调整素材颜色、大小图2T3添加修饰元素12(5)给banner添加制作好的logo图标。图2-14添加logo(6)将处理好的图片以适应网站需求的格式保存在images图片 文件夹下。此外，网站banner的实现调用了 js代码实现动态图片轮播效果,三张图片间隔一定时间可自动轮播，当鼠标置于图片上出现可点击进 入下一页按钮。如下图2-15所示为js实现图片轮播代码截图：$(fu nc t ion()(va r ba nnerSl ider=new Sl ide r($(#ba nner_c a bs1),t ime:5000r del a y:400r evenr:1h over1/a u t o:t ru er|堆|mode:1 fa der c ont-xol l er:$(#ba zmerCt xl,a c t ive Cont rol l e rCl s:a c t ive”$(1#ba nnex_t a bs.fl ex-pxev*).c l ic k(fu nc t ion()ba nne rSl ide r.pre v)；$1#ba nnex_t a ibs.fl e x-ne xt*).c l ic k(fu nc t ion()ba nne rSl ide r.ne xt()；)图215banner图片轮播js代码132.4首页效果图网站首页是一个网站的精华所在，受众往往会通过一个网站的首 页来对网站进行评价。首页的作用是一个网站内容的汇总和索引，在 首页有很多图标和链接，导航清晰明了，由此通往网站各个模块。如 下图2-16所示为网站首页效果截图：II图2-16网站首页效果图14第三章网页设计制作3.1首页设计制作网站首页是一个网站给受众的第一映像，第一印象往往是形成成 见效应的基础，首页在一个网站中起决定性作用，没耐性的受众常根 据网站首页决定自己是否选择继续浏览这个网站。本网站首页设计围绕“英语在线教育”这一网站主旨，以暖橙色 为主色调。由上而下分区块排版，各区块内容交互、简洁明了，方便 用户使用。同时整个首页设置有多个不同的动态效果使得网页简洁而 又不失格调。1、首页布局本网站首页布局采用上下型框架布局，上下型框架布局结构能够 很好的分层次展现网站个性化，网站内容一目了然。网站首页布局以 暖橙色为主色调，顶部采用LOGO与登录/注册菜单相结合，由上而下 分别是顶部导航栏、banner、热门课程、企业合作等内容，底部加上 版权，整个页面简洁明了，重点突出。如图3-1所示为网站首页布局 图：15登录注册加入搜索为什么选择人人Sh ow企业合作单位相关友情链接版权信息图3-1网站首页布局图2、导航条的制作网页设计中一个不可缺少的部分非导航条莫属，网站导航条是网 站的路标，也是网站内容的总体概述，搜索引擎收录网站的重要权衡 因素也包括导航条在内，因此创建一套良好的网站导航系统将会大大 提高网站总访问量。导航条的存在让用户可以快速找到他们想要浏览 的页面，提升用户对网站的总体印象。本网站设置有两类导航条且都为顶部导航。第一类导航由logo 和登录、注册等栏目构成，位于整个首页最顶端位置。视觉呈现效果 为左边为网站logo右边为登录、注册等栏目。导航条背景颜色为网16 站主色调一暖橙色。登录、注册页面等栏目应用了鼠标经过图像动态 效果，使之更加生动。如下图3-2所示为网站第一类导航效果截图：矍澄 法花 切入 搜索图3-2网站第一类导航第二类导航为网站主要内容导航，设置有多个一级栏目和二级栏 目。由“首页”、“关于我们”、“课程分类”、“加入班级”、“每 日英语”、“最新资讯”、“联系我们”等主要栏目构成。如下图 3-3所示为网站第二类导航效果截图：首页 关于我们 课程分类 加入班级 每日英杳 最新资讯 联系我们零觐英语考级神器 职场提升图3-3网站第二类导航3.2动态效果的制作静态网页通常让人感觉呆板沉闷，设计者为了改变这一现象故而 在网页中加入动态效果丰富整个页面，使得网站生动吸引受众。本网 站在设计过程中为吸引受众遵循这一原理，设计有多个动态效果。(1)鼠标经过图像效果：在网站宣传这一栏目采用鼠标经过图 像效果，当鼠标滑动到对应图标上显示相应图片。前后对比效果明显,视觉差增强受众对网页的印象。如下图所示为鼠标经过图像对比截 图：17为什么选择人人sh ow%ZWi AAslwW l*Ai*1*WIITBJI#金力aastc*k*.ri*Ais-cm,mwr.“he,uti r*-r+w：,卒w iwMft_LWS7T.G!Ki*iytlS3&iE.图3-4原图效果为什么选择人人人人shewAAsMiSaW也 PxlLMiSS也？i S.Jj:USU知射Wfii*.,询却WIdUl与六竿子Mhnw，曲6咨瞄HAAshM更甘涌Jt竺*溢钢毋MS11S也TtJJLS溟.Hlh岫W时耿，2全Mt*趋.aWiS,Hi.:.写W个土垸.切5 gRF=IWfiJI,dSSJtPTEitEKinx.图3-5鼠标经过图像效果（2）二维码浮动广告特效：由于手机移动端的普及，二维码广 告越来越受欢迎，其成本低、见效快、运作方便的优势成了大众选 择推广工具的首选。网站运用js动态特效制作浮动广告，广告类型 为二维码广告。网站中的广告二维码利用草料二维码生成工具制作而成，打开微信扫描此二维码能出现关于如下网站宣传信息。图3-6二维码编辑、制作过程18人人show人A s h ow,暮宇案宜于人人M眦人人A 人航会说萸谓条妾的fi!人人加敢于在人筋sh ow旨己，驴C3W自已的英谖能力.人人!sh ow英语学习向略是专业的粤联同学习平 合-致力于为用户蕴供俚通.优质的全方应网咯学习 产品和臆秀自成立以案.沪江抒谐T较先豹学淀 瓯、学习工具.社群学习平台.调理平台四大此务作 程.通盈升孝、溶M iHSu 兴建等志盘内容，返年来.人人驴。打大力扶搏国跌耐数商函业旬 从.桁噬打追在生牧商生态圈，交观笋业我,同 时.与惨统精校合作厚索.煽小械月荽范.席进技静 公平i FB优质的筑卧泛源iS国亘联网传遂到世界的E 个陋落。图3-7手机端扫描浮动广告效果13113213313413513413713813914Q.jpg*1 r Tima g es/na v-4Sll.-jpg,吕y5副本.jpg,T P iina g色m/g y-E制J本.jpg Tima g es/s y-7eiJ-:$:.jpgr J spa n c l a ss=ref信扫 13 l e SLV _C5CRIPI mz?c=ja/jm/S睥l e 1=1600 bQrder=,B0 a l ig n=c e nt ern图3-8二维码浮动广告js代码截图(3)点击返回顶部：为了方便用户浏览网页，在网页设置一定19 返回顶部按钮。当下拉网页至一定值浮现隐藏按钮，鼠标置于按钮 上，按钮颜色变淡，点击可一键返回顶部。如下图3-9所示为返回 顶部按钮截图：新手瞬 ij阿跳/UO U00加入我们 没疵设 A _台咋兰位 瞑择异逢 a26 0flS7 6 7 0Dgqq.con图3-9点击返回顶部按钮(4)视频点击播放：网站“关于我们”页面加入了视频控件，视频有点击播放/暂停按钮，可调节音量，可全屏播放。视频来源于 百度，通过优酷转码为mp4文件，为电影国王的演讲最后演讲过 程选段。旨在通过视频向用户传达一个信息一一网站可以帮助用户 提高英文水平。如下图3-10所示为视频点击播放效果截图：SHOW关于我们人人名字来白丁人人&k人人出侦T,入人都会说英语重要的是人人都放丁在人前 品自己，Sh。自己的英语能力，人入how英语学习网站是专业的互联洌学习早合，蚊力十为用户提供便捷 航康的仝方位 网络亨习产品和服务*目成立以来，沪江牝造了翎兄的学习资讯、学习工且、社奇学习平台：探理平台四大业务体系，涅盖升学.留学、语言.职场、兴趣等丰皇内容.近年来，人人shg 夫力W括耳联网教育创业匿队.诀职打间再牍r育杰普.宝观产业共赢-同吒 与传蜿学桂 合作探索，缩小教育差距，推进教莒公平，把优质的教育资源通垣互氐网传递到世界能每个角 落，图3-10视频点击播放效果截图(5)message留言板：留言板用于网站与用户之间的交互。本 网站与用户交互区域由表单加js代码组成，主要有姓名、邮箱、电 话、建议等一起构成。点击相应文本域，初始字符消失，边框呈现 红色，当鼠标置于提交按钮上按钮颜色变为红色。如下图3-11所示 为留言区域效果截图：20oa们SHOW图3-11留言区域效果截图171172 E B173 174 175 176 177 Me5sa g e178 179 _180=_图3-12留言区域代码截图(6)网站地图：本网站网站地图为中国地图，地图按省份划分 活动区块，每个区块有动画效果，当鼠标置于不同区块该位置颜色 改变，出现相关省区为可点击超链接，鼠标悬停字体颜色改变。如 图所示为网站地图效果图：21il宁宁举山四MJL山压.潺北.勘甬E 上海rrra38州图3T 3网站地图黑龙江 Heilongjiang哈尔滨市，齐齐哈尔市吉梯图3-14网站地图动态效果223娥 i 二LJV?;%0二3里区 0 药mM lucgln:0;padding;0;bozdex:aone;j.mapTipT2Ku wdths 280paifheigkb:11 OpKshackgr,3UE：dcolor-:*WfWf;.mapTipTxl:5px 0-12bx:I,mapTipText.mapIipTsxT；,map!iplsxt,map!ipT-sxt,mapiipiaxt.mapTipTxL m4)IipT2KX.mapIipTaxT：.EiH PlipISXt,map!ipText$(function()5 frJhinaflap)-SViiMap(napwiatn:eog；napIIeLght:39 4.napTipTmgh?icht:fifipx:width：fifips;float:1 pft.:bnifi=r:2px wnlid#ffffff:hnrdFr-rariius:fir%：rwrf 1 nw:hiridFnrmarg-n:-1?px,napliplmg iingwidth:100S;height:1Q01;.napTipLisCflcac:left;margin-left:4px;.napTipList.napTipList.napnpLisr.laapTipLis L EiapTipLiot.EapTipList.napIipList.napIipList.ti2 text-align:left;)h2 afont-siz?5 24px;color:#2f226;text-decoratian:none;H 2 a：J10VET|C3J.OE:ti2 a speiifutiL-size:lpx;iiiyi.lef L：3px;u.1(wtdttii 203ps;po.dd.itic right-:lOpx;)dl liflisc-stle:nons:fLoac:leftpadding:Tpx 3px C 3px;)u.1 li a color:#26 26 26:text-deccra-ion:non=;ul li a:hoverbackgroitic-colDr:|2ebcfe;color32333435body nargin-tap:Opx;图3-15网站地图实现代码(7)文字、图片滚动效果：设置文字、图片滚动可以增加网页 动感，本网站一级栏目页面版权均为滚动文字，资讯页面部分图片 为滚动，其效果均为从右往左滚动，当鼠标置于滚动区域，该区域 停止滚动，鼠标离开恢复从右往左滚动效果。如下图所示为滚动效 果截图：图3-16滚动效果图3.3其他页面设计制作3.3.1 课程分类”页面图3-17滚动效果对比图本页面主要是网站课程介绍分类，分别依据二级栏目内容“听力”、“口语”、“写作”，三种分类由上而下展示。页面内容排版23采用图文混排，分为听力、口语、写作，不同内容单独成块，由水平 线和表格对不同区块内容进行明确划分，主要目的是为了使页面整洁 而有条理。如下图3-18所示为课程分类页面效果截图：ISHOWBOOK DAYwr i 晦；英语 初学者专题却SI fit上F巾r.7.A/,芮语宁与同站l图3-18课程分类页面 本页面包括logo、banner顶部导航和左侧导航。其中左侧 导航采用了鼠标经过图像特效，即当鼠标悬停于该导航栏目，导航栏 目背景颜色由白色变为暖橙色，字体颜色作相应改变。页面不同区块展示位置的图片运用相关代码设置了图片放大特 效，艮|3：当鼠标置于图片上方图片显示放大，移除鼠标图片恢复原图24大小。如下图所示为图片放大效果截图:Oii藉瑚力T喝星巴克的人,在哌啡师溟里有多做？最让中国人嘶愧的T单词，应该就皇了就像骑目行车，要融平衡就*断前选图3-19原图效果听说读写听力T喝星巴克的人，在甑唯师里有务任端?曷让中国人崩愧的一Is单词，应该就是它了Ai就瞄目行车r 平衡就稣所前迸.图3-20图片放大效果3.3.2“考级神器”页面此页面的受众为四、六级考生，页面内容展示均与四、六级考试 相关，如四、六级真题、资讯、成绩查询、考试热门等。页面采用“T”字型布局，整体感官呈现左右结构，页面依然采用图文混排+表格布25局。如下图3-21所示为考级神器页面效果图:n事部冲刺英仍回海Pg:it蚓I伸幡束f!听JI清湾凝冼i!舵g疝住邺?;.FU4|(IkF ML,点WMTAlUMIk书iLLCVJi”)年1川询家燃;就诚道妙流(11 替至Sill 74ri HX3WS111 j SfTH河17时口匹螂物烛;:15耕好BIHJKLIM嬷芥*KM I初西顽惊Mt:WV7。17英倒坡*文秘：野识由力呈PTni.W.SSEifl:版心*taM:FV#HSfa*：4；3反id:aSR纨博1也愚5|!椅1由建嘛为:B*2横通点顽I/SfiFisiES:3=：IW两&gWW!RS，冲*sag*9、n!7g：B!?Sjy*#iCfttSU苗讯:fiB*tTTW#f3iW.t.E&:2CZtf*EteOa 丽UlE任顽Sf晦 2317XFL2n.-：rtWeaiTfF.W E5iSt*：tW曾*JR3 酒 初&a*!Sit!i：i7r6fl：7n rH.UB-?l3I7F4fllu.11咨岫7祁.耻，旧jagSHjCi-.WJT 卜句辛M略疝迎gt.isam#电geUkcwouy ta 皿)*=做l&SriH*bfflcSE!lie,SWTismA2M.aSWXI17*l；J3;gfEWB:ZJ1/卜4廿桐2*11品 niAift3BCC碎.lEK独 JJl/!=TrJ IBsffl!-：K：-H老成涕f rejssauiSKP岸.hwjiuc其语叫毋老讯煦罚X=AXilira1CigaiJ fnpjhht*Riights Rrvrm图3-21考级神器页面效果图网页左上角部分大图调用了 js动态效果代码，实现图片轮播效 果，四张图片轮番播放，图片上设置对应文字，点击文字可进入相应 页面观看课程视频。如下所示为图片轮播及点击播放视频效果：四六级心段级 零基哥英话 考级淋器职场提升 返可苣顶刀四施:成雁了？听力渣谶怎么办?推思7分到给平？20U 英看:考最近5年四泗听力膜tiB最多的L3C词透讲座折力芯汝SS3皿巧图3-22轮播图片26四皴听力详解图3-23相应视频播放页面截图3.3.3“每日一测”页面每日一测页面为每日英语栏目的一个二级页面，此页面的主要内 容为每天一次的英文测试，其与每日一说、每日一句三个栏目共同组 成每日英语。如下图3-24所示为每日英语页面效果图：图3-24每日英语页面效果图27网页搜索框及单项选择答案选项均运用表单来完成设计，页面顶 端设有一键分享按钮，点击相应选项可以分享页面内容至微信，微博等社交平台。如下图3-25所示为一键分享及单选按钮效果图:首页 关于我们 课程分类 加入班级每日英语最新资讯 联系我I每日一刑分荽厝大网站1 Q输入网站名或撕音第写Schools across China are expected to hir shortterm teachers,almost three tiroes tl reduce uneiDployment pressures.微信 蠢微博晨Q砺友 南QQO A.as B.of O C.and复制网址 黄itfQg夹母打印-蛔牛。人人网 Q开心网游戏规则，快速阅读上面的句子选择最佳答案填入空白处回印会笔记 0茹如飞信 园妆C Twitter Facetrook匚喜欢冏8 分享到：含Q易信 回硕网排序：时间建 Google+十二月2017日一二 三 四26272829303 456710.1213141718192021242526272831i2 34按日期查看丁 iaThis2017T 2-5237-12-7图3-25 一键分享及单选按钮效果图为了体现网页中“每日”这一特征，给网页加入了日历插件，日 历可以随着北京时间实时更新，也可以点击查看以往的年、月份。如下图3-23所示为日历插件效果截图:按日期查看图3-26日历插件效果图28第四章网站运营推广4.1电子邮件推广电子邮件是新时代流行的网络推广工具之一，它在一定程度上打 破了信息传播在时间、空间等方面的限制，与传统邮件相比它更方便、高效，传播推广受众更广。在传播内容方面它不再局限于传统邮件纯 粹的文字信息，电子邮件传播内容可以包括音频文件、视频文件、相 关数据等，内容更加丰富全面。网站利用电子邮件推广成本低、效率高、速度快等特点对网站进 行推广。成功的推广很重要的一步是找准受众，本网站的人群定位比 较普遍但其有一个共同点在于对英语的兴趣。因而在对网站进行电子 邮件推广初期本人浏览了 了大量相关英语在线教育网站，通过造访这 些网站收集目标受众相关邮件信息，进而进行精准的信息推送。如下图4T所木为网站电子邮件推广图片:I I iimIiiii.，主I mF图4T网站电子邮件推广4.2 IM即时通讯工具推广一QQIM即时通讯是目前因特网上最受欢迎的网络通讯方式之一，其中29又以腾讯旗下腾讯QQ为之最，它利用互联网线路允许两人或多人在同 一网路上进行即时交流。即时通讯除了能加强人们在网路上的日常信 息交流外，还是各行业门户网站、企事业单位推广新形式下的一种积 极尝试。推广者可以直观的将推广信息呈现给与你交流的用户，迅速 吸引潜在受众对网站的关注，提高网站的点击率与转化率从而增加潜 在需求用户增加受众。本网站进行IM即时通讯工具QQ推广过程如下：(1)新建与网站内容相关的QQ号、QQ群在对本网站内容进行推广时，首先需要新建与网站信息相关的 QQ号、QQ群并完善信息，相对完善的信息往往给人更高可信度。把QQ 头像设置成人人show网站logo,昵称以网站名称命名为“人人show 英语学习网”，签名与网站内容相关为“人人show英语学习网站，英 语爱好者都在这里”。QQ在线状态设置成“Q我吧”，实时在线，便 于用户与你交流。(2)巧用推广工具，精准投放推广信息当QQ号、QQ群等相关信息处理设置做好后，就要着手寻找潜在 有需求用户，找准人群定位精确投放推广信息，可以达到事半功倍的 效果。主动加入一些英语在线学习QQ群，QQ群内都是对英语学习有兴 趣的潜在目标客户，但需要注意的是既不能贸然添加好友引起用户反 感又需要给用户留下一定的印象，这就需要不定时在群内冒泡发言，和群主打好关系合作宣传网站。其次，可以通过兴建跟本网站信息相 关的QQ群来寻找潜在目标客户,丰富QQ群内容可以上传一些课件视频 或者英语资料吸引用户关注网站。如下图4-2、4-3所示为即时通讯QQ30推广图片:图4-2QQ好友推广图片.人人sh ow英语学习群聊天公告相册文件活动设置、9：Q5:29 群通知【物欢迎加A人人城，同E同 群日历文件*gffi QQ电活群成员96/136 Q亘有朝龙麟（57的95272）*A a a-（2-,1 fi-E3-踏眼-寮Jft珈龄）次 德,薯芸老厢32908193）*?.M 靛老崛316 1529 332 3 5）-.I.U 隔,onine诗涵老师（1。6芨,图4-3QQ群推广图片4.3 SNS社区营销推广一微博M信、论坛4.3.1微博推广微博推广的受众面较广，它使得信息不再局限于熟人之间的交31 流，有别于QQ、微信等其他推广方式。微博是社会的缩影，明星八 卦、时事热点尽在其中，利用微博的影响力对网站进行推广能有效增 加网站人气。网站进行微博推广前期需要增加粉丝数量，前期通过与 微博大V合作捆绑宣传，加入在线英语微博群积极留言、转发，参与 热门话题讨论主动添加好友，发布免费精品课程，英语考级资料等吸引听众关注。如下图4-4所示为网站微博推广图片:人人sh ow英语15部瞄来目 W AAtalKAAshow g松考皿点吗想随日寸吐乌语高通格吗如果想的话辫什么呢加入我们吧展开全文推广 E 33 S10 心28帕丁顿靛2 9 8.5巨额来电 9 4.7查看更名地门话题 0换T&司宝贝Wit#篱滕搜愈7 call#5.7亿律南京大崖杀8。辑#1亿蜓我们单纯的41#59亿#中国女留学生在日本被釜#2.7它图4-4微博推广图片4.3.2微信推广微信平台同样聚焦了庞大潜在用户群体，它不同于微博之处在于 其本身的私密性。通过微信进行推广可以通过两个有效途径。其一：通过个人朋友圈发布网站宣传信息。其二：通过注册微信公众号对网 站内容进行推广。如下图4-5、4-6所示为网站进行微信推广图片：32r 朋友圈人人sh ow英语网人人talk人人show想轻松考过四六级吗泠 想和歪果仁交流无障碍吗嗅 想随时吐鸟语高逼格吗二 如果想的话T还等什么呢全文51分钟前删除图4-5朋友圈推广图片竖微信公众平台3人人shew美谖学习网站人人im人人甬E检飘I四六婀E理剧翎t无定枷鸟淳高jgf阳MT09 iri细岫我wuras蹄卒向食E朋：felffl白E 由伽人十H33ZIff3 人垃U慕fit o iam图4-6公众号推广图片4.3.3论坛推广论坛推广指的是利用论坛这种网络交流平台的影响力进行推广。论坛话题开放人气较高，推广者可以自由发帖并且附加网址链接。网 站选择“天涯杂谈”模块发帖，这个模块人气高热帖多，有利于网站 推广宣传。如下图4-7所示为本网站论坛推广图片：33刻捋,tfcs.聚焦 W3膀，：品 renn-n4r K.泠 ST飞古浒-ajb：+XSW+天近娘+区球典+旅眼丘+JR1LJS.S I k学棱国|q，般.云筮网.挪A字 融的音.知计诺也,豚止婿锥.殓璐.程，救专区 喑嗦天地 耶：姬 宓询.才厥 江仙糊发帖I-Ss S MHP关注人人曲OW魁专回钏片顷非目朝页JkfeA,?.,talk,a.A shcir恐轻砍老二叫六就.&M知拿二交境天璋苻耳出随时吐二吉高低韬竖如果想的T还T+i昵加入我中吧或让卜门吝运格敏学H我们助呵拥有套习讴格主I人生Imp,._ukJ.Lalbslilz-.cil/p/li,/Z8,/7J4T8 8._s朝云注住E1E规叫不农电王砂律法觌天蓼注诺 日阻|年语箱埠划轩莉 F存草仔|图4-7论坛推广图片34总结毕业设计是对三年大学专业课程的检测，它不仅需要丰富的理论 知识还需要过硬的实操经验。通过一个多月的努力，完成了对人人 show英语学习网站的建设，这次毕业设计锻炼了本人综合运用所学 专业知识解决实际问题的能力，对今后开展相关工作是一次很好的经 验，也令自己充分认识到专业课程学习上的不足之处。这对临近毕业 马上要踏入社会工作的我们来说是很重要的，只有充分认识到错误才 能从根本上改正。这次毕业设计的选题是英语在线学习网站，有明确目标后接踵而 来的便是对网站内容的排版与页面美化设计。由于设计感一直是弱 项，在这方面用了相对较长的时间。在网站设计过程中查看了大量同 类型英语在线学习网站，发现它们大致分为三类：以课程为主、以资 讯为主、以在线教学为主。在确定自己网站的风格为课程加资讯相辅 相成后，要做的就是搜集大量与网站主题相符的图片和文字资料，这 方面比较考验photoshop及文字编辑能力o资料搜集工作进行一个段 落后就开始建设网站，这里遇到较多的麻烦是动态效果的实现。想让 网站整体呈现精彩生动的视觉效果，所以需要调用大量JavaScript 动态脚本代码，由于对这方面知识的相对匮乏导致操作过程中出现过 一些失误，幸运的是最后通过不断尝试都能完美解决。在毕业设计完成的一系列过程中，不仅巩固了旧知识还学到了新 知识，专业能力得到很大提升。让本人认识到在今后学习和工作过程 中充实、丰富自己的重要性，需知没有最好只有更好！35致谢昨天你可能还在回首那年今日跨进校门时的彷徨今天已经在准 备毕业设计为即将到来的未知奋战。处于毕业边缘大家无不感叹一句 光阴似水而覆水难收。在校近三年的时间既学习了专业课程知识又丰 富了人生阅历增长了见识，之所以能够取得这么多的收获，少不了一 路上帮助扶持的人。在这里，首先要感谢本次毕业设计的指导老师一刘宁老师。在本 次毕业设计完成过程中，从开始选题到最后完成都少不了刘宁老师的 精心指导，他认真负责的工作态度，以及在专业课程上独到的见解给 毕业设计的完成带来了很大的帮助。其次要感谢大学三年引领专业课 程学习的各位专业课程老师，感谢各位专业老师不吝赐教倾囊相授，让我们学习到扎实的专业知识能更好的面对即将到来的工作环境。最 后要感谢辅导员危盛老师，感谢危老师三年大学生活的照顾与陪伴，感谢她的无微不至、谆谆教诲。大学生活转眼而过，感谢这段历程中遇到的每一个人，感谢有他 们见证、陪伴自己的成长，感谢他们让你变成更好的自己。36参考文献1 邹自德，李文斐，王学珍.开放教育“在校课堂”与“在线课堂”的实践探索J.中国远程教育,2014,(12):55-59+96.2 王昭君.初中生英语在线学习现状及对策研究D.鲁东大 学，2017.王钢.企业网站制作技术分析JL电脑编程技巧与维 护，2017,(03):67-69+834 马玉洁，张伟.基于.NET的小型教育网站的开发与建设J.电脑 知识与技术,2017,13(27):5-8.5 秦红梅.网站综合实训课程在线学习平台的构建与应用研究J.广西教育，2017,(34):75-76.李卓，韩利凯.自主学习网站的开发与实现J.电子世 界，2017,(12):23+25.7 辛纲领.多媒体在线教育平台的设计与实现D.郑州大学,2017.8 陆玉亭.网站设计技术在线开放学习系统的设计与实现J.福建电脑，2017,33(07):78-79.37