课程设计课程名称：HTML5开发技术课程设计专业班级：计科1201学生姓名：伍志强学号： 201216010506指导教师：刘宏月学期：2013-2014学年第一学期HTML5开发技术专业课程设计任务书说明：本表由指导教师填写，由教研室主任审核后下达给选题学生，装订在设计（论文）首页1 需求分析本课程设计为一个商业网站，大的框架为整个网站分为5个页面，分别为：主页面、公司的业务面，公司产品问题咨询面，公司产品的技术支持面，校园招聘界面。
各个页面间都是相互连接的，方便读者更快捷地找到想了解的信息。
在每个界面拥有的公司logo ，登陆界面，和一些视频的宣传和校园招聘网页的背景音乐，友情链接，插入的各种静动态图片，搜索栏。
每个界面链接的公司的最新各种动态，和基本的各种文字说明，采用的是中英双板模式书写。
网站的目录结构如下：伍志强------网站根目录Css ------存放外置CSS文件Images ------存放图片文件Music ------存放背景音乐ＪＳ------存放的ｊａｖａｓｃｒｉｐｔ代码．ｐｒｏｊｅｃｔ------编译时建立的一个工程Index系列------存放的网站的各个网页2 概要设计3 详细设计页面的布局和风格DIV+CSS的基本过程是先布局，对网页进行总体设计，再设计内容，对布局的每一部分进行设计。
DIV+CSS对内容的设计也体现内容和表现相分离的思想。
对内容的表现的描述都在CSS中，内容可以应用CSS样式，不需要额外的HTML标签进行内容的修饰。
CSS网页布局的原理，就是按照HTML5代码中对象声明的body {background:#131b20;font-family:Arial, Helvetica, sans-serif;font-size:100%;line-height:1.5em;color:#f1fefd;}html { min-width:980px;} html, body { height:100%;} container {margin: 0 auto;position: relative;width: 980px;font-size:.75em;}……各个网页之间的链接：<link rel="stylesheet" href="css/reset.css" type="text/css"media="all"><link rel="stylesheet" href="css/layout.css" type="text/css" media="all"><link rel="stylesheet" href="css/style.css" type="text/css" media="all"><ul><li><a href="index.html">主页</a></li><li><a href="index-1.html">业务</a></li><li><a href="index-2.html">解决</a></li><li><a href="index-3.html">支持</a></li><li><a href="index-4.html">校园招聘</a></li></ul>LOGO 插入：<div class="logo"> <a href="index.html"><img src="images/logo.png" alt=""></a> </div><div class="logo"> <a href="index.html"><imgsrc="images/logo.png" alt=""></a> </div>登陆注册界面：<form action="" id="search-form"><fieldset><input type="text" class="text" value=""><input type="submit" value="Search" class="submit"></fieldset></form><ul class="top-nav"><li class="first"><a href="#" class="about">关于</a></li> <li><a href="#" class="login">登陆</a></li><li><a href="#" class="signup">注册</a></li></ul><form action="" id="login-form"><fieldset><div class="field"><label>用户名</label><input type="text" class="text" value=""></div><div class="field"><label>密码</label><input type="password" class="password" value=""></div><div class="field"><label for="checkbox">保存密码</label> <inputtype="checkbox" name="checkbox" id="checkbox"></div><ul><li><a href="#">忘记密码?</a></li><li><a href="#">申请一个新账号</a></li></ul><div class="wrapper"><input type="submit" value="Submit"class="submit"></div>网页部分图片的插入：<div class="inside"><div class="wrapper p2"><figure class="img-wrapper"><img src="images/1page-img1.jpg" alt=""></figure>视频的使用：<embedsrc="/player.php/sid/XNTY4MjcwMzI0/v.swf" allowFullScreen="true" quality="high" width="200" height="200" align="left" allowScriptAccess="always" type="application/x-shockwave-flash"> </embed>背景音乐：<div id="apDiv2"> <audio src="sky.mp3" border="0" controls> </audio></div>.vlinks{position:relative;padding:0 0 0 800px;}#apDiv2{position:absolute;left:660px;top:29px;width;301px;height:25px;z-index:1;border:#B0B82C 1px solid;background-color:#FFFFCC;提交的信息栏：<div class="inside"><form action="" id="contacts-form"> <fieldset><div class="col-1"><label>Enter Your Name:<br /><input type="text" value="" /> </label><label>Enter Your E-mail:<br /> <input type="text" value="" /> </label><label>Enter Your State:<br /> <input type="text" value="" /> </label></div>友情链接：<div class="vlinks">Collect from <a href="/list.aspx?cid=329" title="友情链接" target="_blank">友情链接</a></div>动态信息栏：<ul class="list1"><li><a href="#">工大联盟认证</a></li><li><a href="#">工大联盟项目启动</a></li><li><a href="#">工大联盟卓越计划</a></li><li><a href="#">工大联盟软件竞赛</a></li><li><a href="#">工大联盟采购计划</a></li><li><a href="#">工大联盟产品上市</a></li><li><a href="#">工大联盟招牌职员</a></li></ul>搜索栏：部分页面展示：4 调试分析出现的错误.1网页背景色的设置2重复使用实现相同功能的代码、或杂七杂八的乱套代码.3.在HTML5中，我们并不需要给<script>和<script>增加type属性4.不要把所有列表式的链接放在nav里。