网页设计课程设计报告Word文档格式.docx

1、参考文献指导教师签字：审查意见教研室主任签字：2013年月日说明：本表由指导教师填写，由教研室主任审核后下达给选题学生，装订在设计（论文）首页第2页共2页1 需求分析本课程设计为一个商业网站， 大的框架为整个网站分为 5 个页面，分别为：主页面、公司的业务面，公司产品问题咨询面，公司产品的技术支持面，校园招聘界面。各个页面间都是相互连接的，方便读者更快捷地找到想了解的信息。 在每个界面拥有的公司 logo ，登陆界面，和一些视频的宣传和校园招聘网页的背景音乐，友情链接，插入的各种静动态图片，搜索栏。每个界面链接的公司的最新各种动态，和基本的各种文字说明，采用的是中英双板模式书写。网站的目录结构

2、如下：伍志强 - 网站根目录Css - 存放外置 CSS 文件Images - 存放图片文件Music - 存放背景音乐 - 存放的代码 - 编译时建立的一个工程Index 系列 - 存放的网站的各个网页2 概要设计第3页共3页工大工公大司联盟科技投资公司主页 IndexIndex1Index2Index 3Index4主页介绍视频展示业务解决支持校园招聘登陆界面业最登相视信关频息务新陆的和提消产技链交说背品术接后明景音台3 详细设计页面的布局和风格DIV+CSS 的基本过程是先布局，对网页进行总体设计，再设计内容，对布局的每一部分进行设计。DIV+CSS 对内容的设计也体现内容和表现相分离的

3、思想。对内容的表现的描述都在 CSS 中，内容可以应用 CSS 样式，不需要额外的 HTML 标签进行内容的修饰。CSS网页布局的原理，就是按照 HTML5 代码中对象声明的body background:#131b20;font-family:Arial, Helvetica, sans-serif;font-size:100%;第4页共4页line-height:1.5em;color:#f1fefd;html min-width:980px;html, body height:container margin: 0 auto;position: relative;width: 980px

4、;.75em; 第5页共5页各个网页之间的链接：css/layout.csscss/style.cssullia href=index.html 主页 /liindex-1.html 业务 index-2.html 解决 index-3.html 支持 index-4.html 校园招聘 LOGO插入：div class=logo 第6页共6页登陆注册界面：form action= id=search-formfieldsetinput type=text class= value=submitSearch/fieldset/formul class=top-navli class=first

5、#about 关于 login 登陆 signup 注册 用户名 inputtype= 密码 passwordlabel for=checkbox 保存密码 第7页共7页 name= 忘记密码 ? 申请一个新账号 视频的使用：embedsrc=allowFullScreen=true quality=high width=200 height=align=left allowScriptAccess=alwaysapplication/x-shockwave-flash/embed第8页共8页背景音乐：div id=apDiv2audio src=sky.mp3 border=0 contro

6、ls/audio.vlinksrelative;第9页共9页padding:0 0 0 800px;#apDiv2absolute;left:660px;top:29px;width;301px;height:25px;z-index:1;border:#B0B82C 1px solid;background-color:#FFFFCC;提交的信息栏：contacts-formcol-1Enter Your Name:br / /Enter Your E-mail:Enter Your State:第10页共10页友 情 链 接 ：vlinksCollect from ahref= title

7、= 友 情 链 接 target=_blank 友情链接 动态信息栏：list1 工大联盟认证 工大联盟项目启动 工大联盟卓越计划 工大联盟软件竞赛 工大联盟采购计划 工大联盟产品上市 工大联盟招牌职员 搜索栏：第11页共 11页部分页面展示：4 调试分析出现的错误.1 网页背景色的设置2 重复使用实现相同功能的代码、或杂七杂八的乱套代码 .第12页共12页3. 在 HTML5中，我们并不需要给 和 增加 type 属性4. 不要把所有列表式的链接放在 nav 里。5 logo 也不适用于 figure6. Align center （自动居中）的滥用5 测试结果第13页共13页第14页共14页第15页共15页课程设计总结这次网页设计课程设计给我的最大的印象是： 基本知识是一切的根本；架构是重要的，想像的还要重要；实践比一切空谈和理论更能学到东西。从做这个网页设计开始无论遇到什么困难， 我都没有一丝的放弃的念头。在设计过程中一定要慎重，仔细。来不得半点马虎。布局是整个课程设计的中心，考虑要全面，分析彻底。才会为后来的设计打下良好的基础。否则，前功尽弃，甚至不能完成任务。从这次课程设计中我也学到了额外的知识， 初步认识了动态网页的制作，熟悉了本学期的网页制作与实例教程的知识，受益匪浅。第16页共16页