基于html5和css3.0的手机网站的设计与实现

I术设计和实现手机版网站，该网站具有界面友好、采用的网页设计和关键技术也可以为其他手机网站的设计和开发提供参考和借ⅡWiththepopularofthesmastudyisbasedonwebsitewhichhasalreadybeenfoundedhavingmanyproblems,sufriendlyinterface,clearfunction,supportcross-platformandcross-mediabrocollegewebsite.ThewebpagedesignandthekeytechnologywhichtheresearchadoptedcanalsoprovideareferenceforothKeywords:HTML5;CSS3.0;JavaScript1目录 1 21.1功能需求分析 21.2环境需求分析 31.3用户界面需求分析 4 52.1网站首页的设计 62.2网站栏目页的设计 62.3网站内容页的设计 7 83.1网站主要布局和文件头代码的实现 83.2CSS3.0实现页面的主要布局和匹配屏幕的大小 3.3JavaScript实现页面的交互和检测不同的设备 4.1网站的测试 4.2网站的维护 引言动学习带来了方便，但是传统的网站无法适应手机屏2第1章需求分析ZZ聊城大学传媒技术学院内传媒鼓术学院***一4πm*#果m¥v=k*课#,,EQ\*jc3\*hps11\o\al(\s\up4(?),y)出**m* — 西830全保加光教术研双口的*¥的*工作程性不位发1作=mI性 一 1131.2环境需求分析根据笔者的专业开设和调试的需要，本设计基于windows平台，采用了Adobe服务器，考虑到安卓手机的用户量，决定采用Android4.1版本的手机并且用搜狗浏览器进行测试。由于考虑到网站需要联网测试，在没有足够多的域名和IP的情况下，决定采用局域网连接的方式，将主机和手机放置在同一局域网下，用手机连接主机，这样既减少了成本，并且加快了连接的速度。大=Ⅲjspic本地文件7584网站首页。Z聊城大学传媒技术学院5Y本科教学教学工作招生工作网络资源我院领导到北京电视台调研考察老…我院集体和个人获学校工会表彰新奥特(北京)视频技术公司来传媒技术5ZZ老…浏览70次浏览70次2014-04-20新奥特(北京)视频技术公司来传媒技术浏览70次2014-04-20数字媒体艺术系进行实训答辩浏览70次2014-04-20我院学生作品《伶魂》获省大学生电影节纪录…浏览70次2014-04-20图5网站首页截图2第2章网站设计根据前面对网站需求的分析，和用户浏览的需要，6图8所示)。传媒技术学院传媒技术学院学院概况科学研究本科教学学风建设师资队伍研究生培养学生工作联系我们党建工作科学研究招生就业服务社会学院概况图9栏目导航设计7网站的栏目页主要用来显示某一栏目的主要内容，设计主要包括栏目导航设计、内容列表设计、返回顶部设计三个部分。(如图9、图10、图11所示)我院集体和个人获学校工会表彰浏览70次2014-04-20新奥特(北京)视频技术公司来传媒技术学院…浏览70次2014-04-20数字媒体艺术系进行实训答辩浏览70次2014-04-20我院学生作品《伶魂》获省大学生电影节浏览70次2014-04-20点击查看更多点击查看更多2.3网站内容页的设计网页的内容页主要是用来显示学院的简介和重要的通知，设计主要包括栏目导航设计、返回顶部设计、内容显示设计三个部分(如图9,图11,图12)。8我院领导到北京电视台调研考察2月5日，我院院长张景生教授和党总支书记李焕芹教授与我校党委宣传部部长乔丙武一行到北京电视台考察，并看望了我院在北京台挂职的教师高国元。北京电视台副台长、副总编辑艾冬云、新闻节目中心主任张庆、专栏部主任黄暗等接见了聊城大学一行，并进行了深入的座谈。乔丙武感谢北京电视台在促进高校与新闻单位从业人员互聘工作中所做出的努力，并对北京卫视在弘扬社会主义核心价值观、探索电视节目制播模式等方面(1)首页的主要布局HTML5标签如下：9<li><a></a><span><em></em><<li><a></a><span><em></em><li><a></a><span><em></em> <li><a></a><span><em></em><li><a></a><span><em></em><li><a></a><span><em></em><li><a></a><span><em></em><li><a></a><span><em></em><li><a></a><span><em></em>(2)由于代码的重用性，栏目页和内容页中新增使用的HTML5标签为：为了实现在移动设备的显示，需要在文件头里加上以下标签，使页面匹配设备的宽度，更好的让页面显示：content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=3.2CSS3.0实现页面的主要布局和匹配屏幕的大小 对于手机网站的布局，CSS大多采用百分比的布局，并且内容大多居中显示，由于篇幅的原因，展示一些主要标签的布局：body{font-family:MicrosoftYaHei,Arial,Helvetica,sans-seriwidth:expression((document.documentElement.clientWidthlldocumentntWidth)>960?"960px"}}header,nav,footer,section,a)}}}text-decoration:und} expression(document.documentElement.clientWidthlldocument由于不用的设备屏幕大小不同，所以需要不同的布局，用以下代码来识别屏幕的宽度，对于不同宽度的设备，采用不同的CSS布局：@mediascreenand(min-width:480p}}@mediascreenand(min-width:640p}}3.3JavaScript实现页面的交互和检测不同的设备3.3.1JavaScript实现页面的交互由于jQuery库的功能强大并且好多自带的函数使用起来十分方便，所以决定采用调用jQuery的方式实现网页交互部分的制作，调用jQuery的JavaScript部分代码如下：$('body,html').animat{}3.3.2JavaScript实现检测不同的设备由于许多同学还会使用电脑浏览学院的网站，本设计采取了兼容的方式，保留了原学院网站，通过使用JavaScript和正则表达式来进行设备匹配，从而决定用户是否跳转到手机版网站。设备匹配的JavaScript代码如下：if((navigator.userAgent.match(/(iPhoneliPodlAndroidliosliOSlWebOSISymbianlWindowsPhonelPhone)location.replace("phone/in第4章网站的测试与维护4.1网站的测试本设计采用IS服务器和局域网进行测试，需将站点文件夹复制到根目录下，然后设置IP地址为全部未分配，为了保证手机的连接到网站，需要把防火墙关闭。(设置如图12、图13所示)(设置如图12、图13所示)作为“mashengqiang”连接绑定☑立即启动网站(M)…