《网页设计与制作实训》_第1页
《网页设计与制作实训》_第2页
《网页设计与制作实训》_第3页
《网页设计与制作实训》_第4页
《网页设计与制作实训》_第5页
已阅读5页，还剩13页未读， 继续免费阅读

付费下载

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

南阳理工学院网页设计与制作实训报告2012014年6月题目：题目：个人网站专业：工商管理系别：国际教育学院班级：13级工管二班姓名：李敬静学号：1321215123实训报告单题目：个人网站目的要求：目的与要求

1.

目的：

《网页设计》是一门实用性很强的课程，它主要培养动手操作方面的技术性人才，学习好该门课程的同学就可以到社会上承担一般的网站建设的职务了。而课程设计为学生提供了一个既动手又动脑，独立实践的机会，将课本上的理论知识和实际有机的结合起来，锻炼学生的分析解决实际问题的能力。提高学生适应实际，实践设计的能力。通过对本课程的学习，学生能够掌握有关网页制作的技术及其综合应用：如网站规划、页面组织、素材准备等，通过实践训练，能够举一反三，能够将所学知识点与工作技巧融合，为本专业学生打下坚实的基础，本课程侧重于实际的开发，加强实践环节，提高网页制作能力，使学生适应当前的计算机网络流行趋势

2.

要求

基本要求：

（1）网站定位准确，需求分析合理。

（2）网站结构合理。

（3）网站设计要实用，功能全面。

（4）页面整洁美观，具有特色，页面布局建议采用div+css技术。

（5）网站内容充实，应包含链接、CSS、行为等技术的使用。

（6）网站有个人简介、网站简介等页面，至少包含一个用户注册页面，5页以上，特别注意首页的设计，布局要合理、整洁、美观，建议采用CSS+DIV进行页面布局。

（7）具体网站内容可根据需要自行安排

3.创新要求

在基本要求达到后，可进行创新设计。实现步骤我的总体功能介绍制作这个网站的主要目的是因为我想要通过个人网站把我展现在大家面前。让大家认识我，知道在这个世界上还有一个叫李敬静的女孩。然后再通过各个页面所记录的我平时的照片、随笔感想文章、以及我的个人介绍，让大家进一步了解我。该网站主要运用了CSS+DIC进行了页面布局，设计了我的个人网站。页面设计展示2.1首页（页面展示设计思路主要代码）主页index.htm1截图：设计思路:主页展示了我喜欢的风格类型页面，呈现出这是一个个人主页网站。3.主要代码:<!DOCTYPEhtml><htmllang=""><head><metacharset="utf-8"> <title>我的个人主页</title> <metaname="description"content=""/> <metaname="keywords"content=""/> <metaname="robots"content=""/> <linkhref="css/reset.css"rel="stylesheet"type="text/css"/> <linkhref="css/960.css"rel="stylesheet"type="text/css"/> <linkhref="css/styles.css"rel="stylesheet"type="text/css"/> <linkhref="fancybox/jquery.fancybox-1.3.4.css"rel="stylesheet"type="text/css"/> <scripttype="text/javascript"src="/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <scripttype="text/javascript"src="js/smooth-scroll.js"></script> <scripttype="text/javascript"src="js/jquery.sticky.js"></script> <scripttype="text/javascript"src="fancybox/jquery.fancybox-1.3.4.pack.js"></script> <scripttype="text/javascript"src="js/jquery.easing-1.3.pack.js"></script> <scripttype="text/javascript"src="fancybox/jquery.mousewheel-3.0.4.pack.js"></script> <scripttype="text/javascript"src="cform.js"></script> <scripttype="text/javascript">//stickynavbar$(document).ready(function(){$("nav").sticky({topSpacing:0});});</script><scripttype="text/javascript">//fancybox$(document).ready(function(){ /*Thisisbasic-usesdefaultsettings*/ $("a.single_image").fancybox(); /*Usingcustomsettings*/ $("a#inline").fancybox({ 'hideOnContentClick':true }); /*Applyfancyboxtomultipleitems*/ $("a.group").fancybox({ 'transitionIn' : 'elastic', 'transitionOut' : 'elastic', 'speedIn' : 600, 'speedOut' : 200, 'overlayShow' : false }); });</script></head><divclass="topbar"></div><!--topbar--><divid="intro"> <divclass="title"> <h1>hello</br> <spanclass="small">mynameis</span><br/> <spanclass="name">zs</span><br/> <spanclass="intro_line"></span><spanclass="amp">&</span><spanclass="intro_line"></span><br/> <spanclass="small">i'mawebdesigner</span></h1> </div><!--end.title--></div><!--end#intro-->2.2导航展示（页面设计思路主要代码）导航效果图截图:设计思路：通过导航设计，引导大家浏览我的网页。主要代码：<nav> <ul> <li><ahref="#intro">主页</a></li> <li><ahref="#work">相片</a></li> <li><ahref="#services">文章</a></li> <li><ahref="#about">关于</a></li> <li><ahref="#contact">联系</a></li> <li><ahref="#login">登陆</a></li> <li><ahref="#res">注册</a></li> <li><ahref="#guanyu">关于本网</a></li> </ul></nav><!--endnav-->3.3主要子页（页面设计思路主要代码）（1）1.子页wenzhang.htm1截图：设计思路：通过添加一些近期文章和交流日志，向大家展示我的近况和心情以及我的想法，可以通过我的个人网站更好的和大家进行交流。主要代码：<divclass="work_bg_bottom"></div><divid="services"> <divclass="container_16"> <divclass="subheader"> <divclass="subheader_line"></div><h2>近期文章</h2> <divclass="subheader_line"></div> </div> <divclass="clear"></div> <divclass="serv_icons"> <divclass="grid_4"> <divclass="serv_icon1"></div> <h3>个人原创</h3> <p><li><ahref="#"title="以后发展良好">以后一定去的很好的发展</a></li></p><br/> <p><li><ahref="#"title="以后发展良好">以后一定去的很好的发展</a></li></p><br/> <p><li><ahref="#"title="以后发展良好">以后一定去的很好的发展</a></li></p><br/> <p><li><ahref="#"title="以后发展良好">以后一定去的很好的发展</a></li></p><br/> <p><li><ahref="#"title="以后发展良好">以后一定去的很好的发展</a></li></p><br/> <p><li><ahref="#"title="以后发展良好">以后一定去的很好的发展</a></li></p><br/> </div> </div><!--end.serv_icons--> </div><!--end.container_16--></div><!--end#services-->（2）1.子页guanyu.htm1截图：设计思路：通过对我的个人介绍，让大家更好地了解我。主要代码： <divclass="about_copy"> <h4>我是谁？</h4> <p>我叫李敬静，我来自平顶山，我是国际教育学院13级工管2班的一名学生。我的性格偏于外向，活泼开朗爱说爱笑，为人坦率、热情、讲求原则；处事乐观、专心、细致、头脑清醒；富有责任心、乐于助人。</p> <p>我还是一个正直忠诚、勤奋求实的人，会不断追求人格的自我完善；明显的特点是乐观自信、温和开朗、稳重宽厚，因此，我人际关系和谐，适应环境能力较强。爱好电脑、科普知识，喜欢钻研，正因为这些增强了我的实干精神，习惯事情或问题及早解决。</p> <p>最大的满足感在于该做的事顺利完成，以便有精力去关注其他，也就是追求感觉上的自我良好或优越感。最大的缺点是对没有秩序感的人可能缺乏足够的耐心，也可能因为心太细，会让别人误解我的一番好意。基本上就这些，谢谢！</p> </div><!--end.about_copy--> </div><!--end.grid_6--> <divclass="grid_5"> <divclass="skills"> <h4>Skills</h4> <ul> <li><divclass="skill1"><p>Photoshop</p></div></li> <li><divclass="skill2"><p>jsp</p></div></li> <li><divclass="skill3"><p>HTML/CSS</p></div></li> <li><divclass="skill4"><p>Javascript</p></div></li> <li><divclass="skill5"><p>Wordpress</p></div></li> <li><divclass="skill6"><p>PHP/MySQL</p></div></li> </ul> </div><!--end.skills--> </div><!--end.grid_5--> </div><!--end.container_16--></div><!--end#about-->（3）1.子页zhuce.htm1截图：设计思路：可以让大家在我的个人网站注册自己的用户，可以让我和大家更好的交流。主要代码：<divid="res"> <divclass="container_16"> <divclass="subheader"> <divclass="subheader_line"></div><h2>注册</h2><divclass="subheader_line"></div> </div> <divclass="grid_7"> <divclass="contact_form"> <h4>注册</h4> <formmethod="post"> <inputtype="text"name="Name"id="name"value="你的名字"onFocus="this.value=this.value=='你的名字'?'':this.value;"onBlur="this.value=this.value==''?'你的名字':this.value;"/> <inputtype="text"name="Email"id="email"value="你的邮箱"onFocus="this.value=this.value=='你的邮箱'?'':this.value;"onBlur="this.value=this.value==''?'你的邮箱':this.value;"/> <inputtype="text"value="电话"id="subject"onFocus="this.value=this.value=='电话'?'':this.value;"onBlur="this.value=this.value==''?'电话':this.value;"/> <inputtype="radio"value="男"name="sex"checked>男 <inputtype="radio"value="男"name="sex">女 <inputtype="submit"name="submit"id="submit"value="注册"class="submit-button"onClick="returncheck_values();"/> </form> <divid="confirmation"style="display:none;position:relative;z-index:600;font-family:'OpenSans',sans-serif;font-weight:300;font-size:16px;color:#4e4e4e;"></div> </div><!--end.contact_form--> </div><!--end.grid_7--> <divclass="grid_9"> <divclass="contact_info"> </div><!--end.contact_info--> <divclass="map"> <imgsrc="img/about_pic.jpg"> </div><!--end.map--> </div><!--end.grid_9--> </div><!--end.container_16--></div>1.子页guanyubenwang.htm1截图：设计思路：在这个网页介绍《网页设计》这门实训课我对它的认识以及感触。主要代码：<divid="guanyu"> <divclass="container_16"> <divclass="subheader"> <divclass="subheader_line"></div><h2>关于本网</h2><divclass="subheader_line"></div> </div> <divclass="text1"> 《网页设计》是一门实用性很强的课程，它主要培养动手操作方面的技术性人才，学习好该门课程的同学就可以到社会上承担一般的网站建设的职务了。而课程设计为学生提供了一个既动手又动脑，独立实践的机会，将课本上的理论知识和实际有机的结合起来，锻炼学生的分析解决实际问题的能力。提高学生适应实际，实践设计的能力。通过对本课程的学习，学生能够掌握有关网页制作的技术及其综合应用：如网站规划、页面组织、素材准备等，通过实践训练，能够举一反三，能够将所学知识点与工作技巧融合，为本专业学生打下坚实的基础，本课程侧重于实际的开发，加强实践环节，提高网页制作能力，使学生适应当前的计算机网络流行趋势 </div> <br> <divclass="text2"><li>（1）网站定位准确，需求分析合理。</li><li>（2）网站结构合理。</li><li>（3）网站设计要实用，功能全面</li><li>（4）页面整洁美观，具有特色，页面布局建议采用div+css技术。</li><li>（5）网站内容充实，应包含链接、CSS、行为等技术的使用。</li><li>（6）网站有个人简介、网站简介等页面，至少包含一个用户注册页面，5页以上，特别注意首页的设计，布局要合理、整洁、美观，建议采用CSS+DIV进行页面布局。</li><li>（7）具体网站内容可根据需要自行安排</li></div> </div><!--end.container_16--></div><divclass="contact_bg_bottom"></div><footer> <p>©2012Allrightsreserved</p></footer>总结不知不觉网页设计的课程将

人人文库> 全部分类> 应用文书 > 作业报告

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论