HTML5开发技术课程设计.doc

课 程 设 计课 程 名 称： HTML5开发技术课程设计 专 业 班 级： 计科1201 学 生 姓 名： 伍志强 学 号： 201216010506 指 导 教 师： 刘宏月 学 期： 2013-2014学年第一学期 第 17 页 共 17 页 HTML5开发技术 专业课程设计任务书学生姓名伍志强专业班级计科1201学号201216010506题 目课题性质工程课题来源自拟指导教师刘宏月同组姓名无主要内容任务要求参考文献审查意见指导教师签字：教研室主任签字： 2013 年 月 日 说明：本表由指导教师填写，由教研室主任审核后下达给选题学生，装订在设计（论文）首页1 需求分析本课程设计为一个商业网站，大的框架为整个网站分为5个页面，分别为：主页面、公司的业务面，公司产品问题咨询面，公司产品的技术支持面，校园招聘界面。各个页面间都是相互连接的，方便读者更快捷地找到想了解的信息。 在每个界面拥有的公司logo ，登陆界面，和一些视频的宣传和校园招聘网页的背景音乐，友情链接，插入的各种静动态图片，搜索栏。每个界面链接的公司的最新各种动态，和基本的各种文字说明，采用的是中英双板模式书写。 网站的目录结构如下：伍志强 -网站根目录Css -存放外置CSS文件 Images -存放图片文件Music -存放背景音乐 -存放的代码-编译时建立的一个工程Index系列 -存放的网站的各个网页2 概要设计工大联盟科技投资公司主页Index 工大公司主页介绍视频展示登陆界面Index4校园招聘Index 3支持Index2解决Index1业务信息提交后台视频和链接相关的技术相关的说明视频和背景音乐登陆和链接登陆和链接相关产品链接最新消息业务信息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; 各个网页之间的链接： 主页 业务 解决 支持 校园招聘 LOGO 插入： 登陆注册界面： 关于 登陆 注册 用户名 密码 保存密码 忘记密码? 申请一个新账号 网页部分图片的插入： 视频的使用： 背景音乐： .vlinksposition: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; 提交的信息栏： Enter Your Name: Enter Your E-mail: Enter Your State: 友情链接： Collect from 友情链接动态信息栏： 工大联盟认证 工大联盟项目启动 工大联盟卓越计划 工大联盟软件竞赛 工大联盟采购计划 工大联盟产品上市 工大联盟招牌职员 搜索栏：部分页面展示：4 调试分析出现的错误.1网页背景色的设置 2重复使用实现相同功能的代码、或杂七杂八的乱套代码.3. 在HTML5中，我们并不需要给和增加type属性4. 不要把所有列表式的链接放在nav里。5 logo也不适用于figure6. Align center（自动居中）的滥用5测试结果 课程设计总结这次网页设计课程设计给我的最大的印象是：基本知识是一切的根本；架构是重要的，想像的还要重要；实践比一切空谈和理论更能学到东西。从做这个网页设计开始无论遇到什么困难，我都没有一丝的放弃的念头。在设计过程中一定要慎重，仔细。来不得半点马虎。布局是整个课程设计的中心，考虑要全