首先，我们创建一个空白的模版，代码很简单，如下所示：
复制代码
步骤2 增加HTML 5新标签 HTML 5中新增加了不少标签，如：
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section
在页面模版中，我们需要确保每个区域都能正确地对齐，因此需要使用HEADER、 NAVIGATION、 CONTENT、 SIDEBAR和Footer这些标签。代码如下所示：
复制代码
读者可能留意到这里使用的div id=”wrapper”，这个是稍候用来做meida query的时候调整全局CSS样式调整用的 步骤3 往HTML 5标签中增加代码
1）首先往标题中增加如下代码：
Simple HTML5 Template
复制代码
2）往导航标签中添加如下代码，这样很方便地构件了一个简单的页面分类导航：
HomeAboutParent PageChild
OneChild Two with childChild OneChild
TwoChild ThreeChild Three
Contact
复制代码
3）使用标签来描述每一个要展示的内容实体,比如要展示的是多篇文章列表,其中的每一篇文章的具体内容就可以使用标签了。如下代码所示：
This is a title for post
Richard KS20th March 2013TutorialsHTML5, CSS3
and Responsive10 CommentsLorem
Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the
1500s
复制代码
4）添加标签 HTML5提供的元素标签用来表示当前页面或文章的附属信息部分，可以包含与当前页面或主要内容相关的引用、侧边栏、广告、nav元素组，以及其他类似的有别与主要内容的部分。
根据目前的规范，元素有两种使用方法：
被包含在中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的引用、词汇列表等。
在之外使用，作为页面或站点全局的附属信息部分；最典型的形式是侧边栏(sidebar)，其中的内容可以是友情链接、附属导航或广告单元等。
代码如下：
CategoriesCategory 1Category 2
Parent CategoryChild OneChild Two
Grandchild OneGrandchild TwoGrandchild Three
Child ThreeCategory 3
TextLorem Ipsum is simply dummy
text of the printing and typesetting industry.
复制代码
5）加上最后的标签，代码为：
Copyright@ 2013 HTML5.comPrivacy Policy - About Us
复制代码
步骤4 增加CSS样式
首先创建一个空白的样式，如下：
[/code] 然后在http://necolas.github.com/normalize.css/中下载这个css,然后将其内容复制到该空白的文件中代码如下： [code]body {
font-family: arial, sans-serif
font-size: 100%/* best for all browser using em */
padding:0
margin:0
}
*, html { line-height: 1.6em}
article img { width:automax-width:100%height:auto}
.sidebar a, article a, header a, footer a { color: #C30}
header a { text-decoration: none}
#wrapper {
font-size: 0.8em/* 13px from 100% global font-size */
max-width: 960px/* standard 1024px wide */
margin: 0 auto
}
/* css for */
header {padding: 1em 0 margin: 0px float: left width: 100%
}
header hgroup { width: 100%font-weight:normal}
/* css for */
nav
{display: block margin: 0 0 2em padding: 0px
float: left width: 100% background-color: #181919
}
nav ul ul {display: none}
nav ul li:hover >ul {display: block}
nav
ul {padding: 0 list-style: none position:
relative display: inline-table z-index: 9999
margin: 0px float: left width: 100%
}
nav ul:after {content: ""clear: bothdisplay: block}
nav ul li {float: left}
nav ul li:hover a {color: #fff}
nav
ul li a {display: block padding: 1em font-size:
1.125em color: #ccc text-decoration: none
margin: 0px background-color: #000 border-right: 1px
solid #333
}
nav ul li:last-of-type a {border-right: 1px solid transparent !important}
nav
ul ul {background: #5f6975 border-radius: 0px
padding: 0 position: absolute top: 100% width:
auto float: none
}
nav ul li:hover {background: #5f6975 color: #FFF
}
nav ul ul li a:hover {background-color: #4b545f
}
nav ul ul li {
float: none
border-bottom: 1px solid #444240
position: relative
}
nav ul ul li a {
padding: 0.5em 1em
font-size: 1em
width:10em
color: #fff
}
nav ul ul ul {
position: absoluteleft: 100%top:0
}
/* css for */
section.content { width: 70%float:left}
.content article { width:100%float:leftpadding: 0 0 1emmargin: 0 0 1emborder-bottom: 1px solid #ddd}
article .entry { clear:bothpadding: 0 0 1em}
h1.post-title { font-size: 1.8emmargin:0padding:0}
.entry.post-meta { color: #888}
.entry.post-meta span { padding: 0 1em 0 0}
.entry.post-content { font-size: 1.125emmargin:0padding:0}
/* css for */
aside.sidebar { width: 25%float:right}
aside.sidebar ul {width:100% margin: 0px padding: 0px float: left list-style: none
}
aside.sidebar
ul li {width:100% margin: 0px 0px 2em padding:
0px float: left list-style: none
}
aside.sidebar ul li ul li {margin: 0px 0px 0.2em padding: 0px
}
aside.sidebar
ul li ul li ul li {margin: 0px padding: 0px 0px 0px
1em width: 90% font-size: 0.9em
}
aside.sidebar
ul li h3.widget-title {width:100% margin: 0px
padding: 0px float: left font-size: 1.45em
}
/* css for */
footer {width: 98% float:left padding: 1% background-color: white margin-top: 2em
}
footer .footer-left { width: 45%float:lefttext-align:left}
footer .footer-right { width: 45%float:righttext-align:right}
复制代码
步骤5 为移动应用使用@media query查询 为了进行响应式设计，最佳的方案是使用@media query去进行查询，在上面的CSS代码中添加如下代码：
/* ipad 768px */
@media only screen and (min-width:470px) and (max-width:770px){
body { background-color: red} #wrapper { width:96%font-size: 0.6875em}
section.content, aside.sidebar { width:100%}
}
/* iphone 468px */
@media only screen and (min-width:270px) and (max-width:470px){
body { background-color: yellow} #wrapper { width:96%font-size: 0.6875em}
section.content, aside.sidebar { width:100%}
}
复制代码
步骤6 增加jquery,modernizer和html5shiv到标签中 这里推荐使用Modernizr 和html5shiv，它们都是一个能在多种浏览器中通过运行各种脚本兼容运行支持大部分HTML 5标签的插件。我们将它们和jQuery库放在标签前，代码如下：
0
复制代码
网络策划范文五篇
网络策划 篇1一、活动主题：
当今时代网络无处不在，每个人都已经渐渐地离不开它，学习并掌握一些网络常用技能与一些网络道德知识是每个人所必须的。提高大学生对网络的发展以及对其道德的认知，提高同学们对计算机的喜爱也是必要的，让他们在可以学习中发现知识普及带来的快乐。
二、活动目的：
为了方便同学们对计算机日常的使用和普及网络有关方面的知识，特举办网络道德知识竞赛，希望这个活动在帮助同学们解决问题的同时，能够提高同学们对专业知识的热情，以及掌握更多的网络道德知识。
三、活动事项：
1.活动时间：11月20号
2.活动地点：暂定
3.主办单位：软件学院科技拓展部
4.参赛对象：软件学院全体学生
四、活动流程：
一、学习阶段
1.每班班长把电子档发到班级里面，让学生进行学习。半月之后从班级里面抽人考试。
2.大一每班两人，大二大三每班一人参加比赛。
二、报名阶段
报名方式：通过各班班长以报名表的形式发送给科技拓展部部长王娜邮箱
三、正式比赛
1.时间11月20号、地点暂定
2.竞赛规则：从题库的一百三十道题里面抽出五十道题，每题两分，总分100分。考试时间是一个小时。
五、奖项设置：
1.一等奖：加个人 *** 行分4分加三分班级量化
2.二等奖：加个人 *** 行分3分加两分班级量化
3.三等奖：加个人 *** 行分2分加一分班级量化
4.凡参与者每人加1分 *** 行分。
六、人员安排
监考人员4人
改卷人员10人
会场布置人员10名
注意事项：
1、先对决赛教室进行申请；
2、相关负责人员提前一小时到场地进行布置和准备（包括黑板、标题，教室的布置，等等）；
3、用品道具提前购置，准备充分；
4、对于网络道德知识竞赛题及试卷要确保保密性
5，确保大赛准时开始。
网络策划 篇2一、活动背景。
网络越来越贴近我们的大学，已经成为大学生活必不可少的一部分，但是网络是一把双刃剑，它给我们生活带来了方便的同时也带来了很多负面的影响。
二、活动主题。
创建网络文明、构建和谐校园。
三、活动目的。
为了更好地创建校园网络文明，提升大家的思想道德水平，体现当代大学生特有的风范。借此活动，呼吁大家学习文明上网，构建和谐校园网络文化。同时，动员同学们将活动开展到日常生活，让更多的人加入到创建网络文明的浪潮中。让我们不断提高文明用网意识，做一个文明的网民和文明上网倡导者。
四、活动过程。
1、时间：20xx年3月。
2、活动对象：信息科学与技术学院志愿团。
五、活动内容：
1、组织同学们观看关于网络文明事件的新闻报道视频。并围绕新闻中出现的问题请同学发表看法，阐述解决问题的关键。
2、文明上网投票活动。
3、“文明上网从我做起”倡议书及海报。
4、“绿色上网文明上网”宣传语征集。
网络策划 篇3一、网络教育的基本特点
为了能够设计有效的网络课程，首先应该了解网络教育环境的基本特点，也就是说懂得网络技术能够给学习带来哪些特别便利条件。笔者将网络教育的主要特点归结为四点：
1．资源共享：
一般而言，我们将网络资源中与教育相关的部分都称之为网络教育资源，包括网络环境资源、网络信息资源、网络人力资源。网络环境资源是指构成网络教育空间的各种物理器件硬件设备等，如计算机设备、网络设备、通信设备等，以及形成网络正常运行空间的各类系统软件、应用软件；网络信息资源则是指在网络上蕴藏着的各种形式的与教育相关的知识、资料、情报、消息等的集合；网络人力资源则通常包括具备或开发或建设或应用各种网络教育资源的能力的个体，如网络硬件结构设计、维修人员、网络系统开发人员、网络系统安全维护人员、教育网页开发人员、网络用户等等。在这三部分资源中，网络信息资源是核心，因为其他两部分资源是为信息资源的建立、传播和利用而服务的。不同于以往传统的教育信息资源是以书籍、报刊、磁带、磁盘、胶片、广播、电视等为物质载体的，网络教育信息资源是一种以电子网络为录存载体和传输媒介的数字化信息资源，具有传递迅速、取之不尽、用之不竭的非凡特性。
2．时空不限：
网上教育活动可以在个体、群体、众体三个层次上进行，按活动方式可分为异步教学和同步教学。同步教学具有空间上的自由度，异步教学在空间和时间上均具有很大的自由度。下表显示可以用于支持各类教学活动的部分网络信息工具。
同步（实时）异步
个体IP电话，可视电话Web,VOD,FTP,E-mail
群体视频会议，聊天室，MUD/MOOWeb,VOD,FTP,Usenet,计算机会议
众体网络视频广播，卫星IPWeb,VOD,FTP,BBS
网上教育的时空不限性给教学活动带来虚拟性，现在虚拟教育已经成为人们津津乐道的话题。虚拟教育可分为校内模式和校外模式，校内模式指在校园网上开发的各种教育应用，校外模式指网上远程教育。可以把校内模式与校外模式有机结合起来，成为一个无缝连接新型教育系统。对于实力较强的学校来说，这种双重办学模式有助于进一步发挥其教育优势，现在国家鼓励重点院校开办网上远程教育是一个明智之举。
3．多向互动：
双向互动曾经是教学系统设计所追求的目标，而网上教学能够做到多向互动。从学生视角来看，他一方面可以通过利用课件、信息资源及智力工具进行学习而产生互动，另一方面可以通过与在线教师、同伴、专家等对话而产生互动。图1显示这种互动模式。
4．便于合作：
通过网络进行学习，学习者可以不受时空限制，不仅能够进行交流研讨，还可以利用适当的软件工具支持协同创作。现在许多网络教育平台带有群件系统的功能，能够支持一个学习群体方便地进行通讯交流、工作空间共享、应用软件共享和协同创作。
二、网络课程设计的若干原则
网络课程设计不能简单套用传统课程设计的思路和方法，一是要充分发挥网络媒体的.特长，二是要适当体现当代教育改革的精神。笔者提出以下建议，可以作为网络课程设计的基本原则。
1．以教育改革为宗旨
利用信息技术促进教育改革是当代教育发展的大方向，网上教育应该做到观念更新、教法革新、内容从新、评价创新。对于中小学教师教育来说，经过这种革新课程学习熏陶的教师们无疑会转而对中小学教育改革产生巨大的带动作用。
2．以异步学习为基础
网络既可以支持同步学习，又可以支持异步学习。但从网络媒体的特性来说，更适合于异步学习，因为异步学习可以利用网络的时间和空间两个自由度，而同步学习只利用了它的空间自由度，并且目前的网络线路还受到带宽的限制。就目前而言，在网络上实行同步教学既不经济又不实用。对于网上成人教育来说，异步学习更是应该大力倡导的。
3．以多元载体为环境
网上教育不应该排斥其他媒体，特别是书本和光盘，可以作为离线学习资源。将离线资源与网络课程相结合，一是可以弥补目前网上中文教育资源不足的缺陷，二是可以减少网络信息传输的负担，三是通过减少在线学习时间而降低费用。因此，我们主张采用网络、书本、光盘三位一体的学习媒体配置。
图2三位一体的学习媒体配置
4．以自主学习为中心
网上教育应该坚持以学员为主体，营造一种有助于学员探究性学习的环境，促进一种自主学习的文化。学员自主学习活动包括自学知识、观摩演示、观察案例、寻找信息、探索问题解法、交流研讨、构建作品、自我评价等。
5．以案例学习为抓手
在医学、管理学等学科领域，案例学习历来被作为至关重要的教学方法。在教育领域，特别是在教师培训中，更应应用案例学习方法，让学员通过大量的案例观察与分析，从中体验教学的科学性与艺术性，提升自己的教学设计水平。Internet上有许多专门收集教案的网站，其中存有成百上千个中小学学科教案，可以优选出许多可供教师培训课程的案例学习资源。
6.以学习资源为支撑
传统的课程是一个内容自足的封闭系统，而网上课程应该是一个以信息资源利用为特点的开放系统，课程资源库建设可以采取自建与引用相结合的办法。比较而言，传统课程开发是以学习内容设计为中心的，而网上课程应该是以学习过程设计为中心的，而且网上学习过程具有利用信息资源的有利条件。这种基于资源的学习模式尤其适用于成人学习者。
7.以合作学习为导向
合作学习是备受国际教育界推崇的学习模式，因为它有助于培养学习者的合作精神和协同解决问题能力。在教师教育中，如果能够让教师们学会在网上运用电子手段进行教学研讨和协同设计教案，无疑会对他们今后的教学行为产生积极影响，因此是值得倡导的学习模式。
8.以电子作品为业绩
网上教学应该让学员尽量利用电子手段完成作业，把他们的电子作品作为学习业绩。学员的电子作品可以传送给老师，也可以通过网页形式发布，以便接受多方评议。对于教师教育来说，特别有价值的电子作品是信息化教案，教师通过设计信息化教案的练习就能逐渐形成信息化教学能力，为我国教育信息化的发展积蓄力量。
9.以结构化评价为特色
传统的计算机辅助教学通常采取客观性评价办法，利用大量选择题型的测试方式。这种基于简单行为反应的测试方式证明带有很大的局限性。革新的测试理论主张采取面向绩效的评价，不但要知道学员做得怎么样，还要知道他是怎么做的。对于网上教育来说，比较易行的方法是依据学员的电子作品进行评价。课程设计者必须根据教学目标设计出一些结构化的定量评价标准，称之为量规。通常从作品的选题、内容、组织、技术、资源利用等方面确定评价的结构分量，并具体规定各分量的评分等级。有了这种量规，就能大大降低评价的主观随意性，不但可以教师评，而且可以让学员自评和同伴互评。如果事先公布量规，可以对学生作业起到导向作用。
10.以电子学档为管理手段
网上教育可以充分利用系统的信息管理功能，通过建立和维护学员的电子学档来管理学习过程。电子学档可以包括学员身份信息、学习任务信息、学习活动记录、学习评价信息、电子作品选集等。
三、网络课程设计案例
为了便于示范如何运用上述原则来设计网络课程，笔者用自己承担的一门网络课程为例，在此展示此课程的基本结构。本网络课程的设计方案吸收了信息化教学的理念和网络教育研究的最新技术成果，主要特点是：
（1）基于资源库的课程组织：这个课程按内容专题组织成为若干模块：各模块采取网页结构，并且与教学案例库、常见问答库（FAQ）、评价量规库、媒体素材库、参考文献库以及作业工具库相连接。
（2）基于电子学档的管理：本系统用电子学档记录学员的学习过程与学习成果，支持面向过程的学习评价。
（3）开放式信息库结构：系统允许教师将优选的学员优秀电子作品上传至案例库，也可以将学员中提出的常见问题加解答后作为新的FAQ存入答问库。
（4）多向互动与合作学习：允许学员利用网上异步的及实时的通讯工具，与在线同伴合作学习，或者与在线教师和在线专家进行信息交流。
本文在一定程度上反映了作者近年来在网络教育研究方面形成的基本理念和实践体会。由于这些研究和实践都属初步阶段，文中观点肯定有许多值得商权之处，仅作引玉之砖而已。
网络策划 篇4活动主题：
网络涂鸦大赛
一、活动目的
涂鸦比赛能够充分激发同学们的创意，充分展示同学的才能，同时让同学们更好的领略科技和艺术的魅力。
本次活动使用的网站采用html5制作，在完成涂比赛的同时能够向大家介绍宣传html5等前沿的知识。
二、活动时间
三月底至四月初。
三、活动流程
（一）活动策划宣传
1.网络宣传。在微博、优习网、大学生精英论坛、qq空间等同学们活跃的在线社区进行线上宣传，充分预热。
2.校园宣传。在c区广场或者天颐广场进行户外宣传。
3.海报宣传：宣传海报5页，印刷好后在校园内张贴。
（二）初赛
1.规定涂鸦主题（待定），要求同学访问科技协会专门为本次比赛准备的在线涂鸦网站进行涂鸦制作。
2.制作好后选手将作品发送至指定邮箱。作品征集阶段持续一周。邮件内容要包括png格式的图片和报名表，报名表见附件。
3.将符合要求的参赛作品放到网络（微博或人人）中接受投票，票数前十份名的优秀作品进入决赛。
（三）决赛
1.队伍自我介绍。要求ppt或视频展示，每人2-3分钟。
2.公布决赛涂鸦主题。要求进入决赛的十名队伍进行现场规定主题的涂鸦。限时15分钟。
3.队伍涂鸦的过程中进行html5知识的讲解，达到宣传的目的。
4.选手在规定时间内完成作品后，依次展示个人作品并阐明寓意。
5.评委点评与现场观众投票。选出一等奖一名、二等奖两名、三等奖三名。其他队伍为优秀奖。
四、预算及奖品
一等奖（一名）：火狐双肩背包
二等奖（两名）：笔记本内胆包
三等奖（三名）：马克杯
优秀奖（四名）：鼠标垫
现场观众互动奖品（十名）：鼠标垫每人一个
活动预算
项目
规格
数量
单价（元）
总价
海报
60*90
5
10
50
宣传单页
a4
500
0.05
20
横幅
五米左右
1
6元/米
30
合计
100
山东师范大学第一届网络涂鸦大赛作品信息表
姓名
性别
学院专业
联系方式
作品名称
作品编号（选手勿填）
作品介绍与寓意
网络策划 篇5一：场环境分析
截至今年8月底，中国手机用户总数已经达到9.272亿。说明中国手机市场是非常巨大的。
中国消费者的特点是追求物美价廉，但目前智能手机市场动辄几千元的高端国际品牌如iphone，千余元的智能手机功能却勉强智能，所以一款高端配置，价格千余元性价比极高的手机将会占有中国普通智能手机消费市场大部分份额。
小米手机是一款高性能发烧级智能手机，搭载Scopion双核1.5Ghz引擎比单核1GHz处理器手机性能提升了200%，1GB大内存 配置在市场上是中上等，对比其他同配置手机最便宜的也要2500，而小米只卖1999元。这与小米手机只采用网络销售节约了门店零售的成本离不开的，小米手机的超低价使其必然只进行网络销售。
二：目标市场分析
小米手机目标顾客群有以下几个特点：
习惯网络购物和从网络获取信息的人群2对价格敏感的中等收入人群社会上易接受新事物的人群较大这些人长期接触网络，对新事物有较为开放的心态2习惯依靠互联网生活的人越来越多，宅男宅女已经成为潮流3大多数年轻人由于经济原因，对价格都很敏感，很高性价比的小米手机对他们将非常有吸引力。所以早起小米手机名声不是很大，大家没有看到实物时，主要是依靠宅男宅女打开了市场。随着时间推移，当小米手机有了一定的口碑和知名度以后，开始吸引更多“非宅”人的潜在顾客，经一步扩大了市场。
三：网站规划
完善的企业网站优点在于：可以成为信息发布，信息搜集，信息处理，信息共享的工具。
（一）网站建设内容
1.产品信息
2.业务运行信息：查询热线，投诉热线，交易收费须知，其他注意事项
（二）网站设计原则
1.整体效果：页面简洁，布局美观大方 ，突出重点
2.内容分类：内容分类精确，布局符合用户阅览习惯
（三）网页设计
1.色彩平稳和谐，注意运用简洁精致的图片和动态元素吸引用户注意
2.后台系统保证信息的快速传递和安全性
四：网络推广
定位：产品定位为发烧友手机，核心卖点是高配和软硬一体，以及手机配件和免费软件
低价策略。小米手机的战略优势——最低廉的高端智能手机。
（一）销售渠道
以网络作为载体进行B2C电子商务销售方式。此销售方式优点：为企业提供销售渠道同时具有调查、服务、咨询一体的特点。
网络营销应该考虑到的因素：
1、完善的配送中心：与大型配送企业如凡客合作，完全采用凡客、如风达配送资源。
2、网络营销渠道的流畅性:建立一个完善的订货系统减少销售费用节约成本。
3、网上商城：和大型网上商城合作，利用其资源进行优势互补。积分促销手段，通过购物获得积分，顾客再利用一定积分换取购物优惠
（二）促销策略
1.口碑营销（病毒式营销）
小米手机需要一个环境：即使你不关注手机也知道有小米这个手机。利用国人看热闹的特点，制造“绯闻”如某某某看好小米手机（名人效应）；小米pkiphone4（品牌效应）等消费者爱看的事情
2.事件营销
召开发布会利用小米手机高配低价吸引媒体关注
3.微博营销
利用新的信息传播工具宣传小米手机
4.饥饿营销
成功吸引了消费者关注后，不能一下子满足消费者需求，从产品发布到正式售卖需要一定时间段，给消费者以想象的空间。
1.看教学课程内容学习web前端技术，最主要是与时俱进，掌握的技术点能够满足时下企业的用人需求。而想要了解一家培训机构所提供的课程是否新颖，也可以去机构的官网上看看，了解自己想学习的学科的课程大纲。看看学习路线图是如何安排的，有没有从零到一的系统搭建，是不是有强化实训、实 *** 的比重，有尽量多的项目实战。因为企业对web前端从业者的技术能力和动手实战能力要求较高。
2.看师资力量
因为web前端开发技术知识的专业性很强，如果盲目去学很容易走进误区。相反，有讲师带领，站在巨人的肩膀上，往往事半功倍。毕竟现在这个时代只要多跟别人交流才能获得更多更有价值的信息，初学者千万不能闭门造车。
3.看口碑
行业内口碑比较好，学生对培训机构比较认可，这种机构把精力放在了学生身上的机构，才是做教育的应有态度。
4.看就业情况
以学生就业为目标的培训机构现在才是最主要的。要知道就业也是教学成果的体现，没有好的教学保证是做不到好的就业的。
5.上门免费试听
试听是为了更好的去感受培训机构的课程内容、讲课风格、班级氛围等，同时也能通过和班上在读同学进行交流，更进一步去了解这家培训机构各个方面是否符合自己的需要。
学习之前多对比，不只是费用，还有课程、师资等。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）