网页设计专周报告.doc_咨信网zixin.com.cn

资源描述

网页设计与制作专周报告书学生：小组成员：学号：班级：指导教师：实习日期：成绩：目录一、专周实验题目 ………………………………………………3 二、专周实验目的 ………………………………………………3 三、分工……………………………………………………………3 四、专周实验内容…………………………………………………5 五、网站设计………………………………………………………5 六、实验专周心得体会……………………………………………16 七、结束语…………………………………………………………17 八、参考文献………………………………………………………17 一、专周实验题目运用所学知识构建网站二、专周实验目的 1、培养学生的创新思维能力，学以致用，把学到东西充分应用。进一步做到理论和实践相结合； 2、增强学生运用所学课程《基于Web标准的网页设计与制作》的理论知识和技能，分析解决网页设计与制作的实际问题的能力； 3、提高学生对创建网站的实际动手能力；调查研究、查阅技术文献、资料、手册的能力； 4、通过专周实习，学生在指导教师的指导下，以课题小组协作方式完成设计课题的全部内容。专周基本要求如下：（1）、掌握创建网站的基本知识；（2）、掌握对各种技能的应用；（3）、通过收集和调查有关技术资料，设计班级网战；（4）、熟练掌握对dreamweaver软件的使用；（5）、掌握设计网站的基本步骤和方法；三、分工：由于我们组有明确的分工，我主要负责子网页的笔记本电脑部分的制作。张成明负责做超级链接和寻找资料。而谭艺利用所学的PS知识，负责美工、主页和一些另外几个子网页。这是网站的首页这是我做的笔记本主页标题栏是用一张图片经过PS以后生成的，面导航条则是用div标签，a标签，b标签，再用标签选择器，最后做出了这样的效果。图片则是可以链接到联想笔记本的介绍部分。这是链接后的网页，背景是白色的，看着比较纯净。主要采用的是表格布局，一半文字一半图片的布局可以让人在浏览电脑参数的同时也能欣赏到电脑外观。四、专周实验内容（步骤）（1）、经过讨论我们一致决定创建以笔记本为主的电脑资讯网站；（2）、搜集了许多关于电脑的图片，各种硬件图片，还有各种笔记的详细参数，市场参考价格等等。（3）、在专周开始之前就将主页构思好了，并且完成了大概，之后构思个人主页，由于我们做的是个人网站，所以由我们每人做各自的分工部分（4）、用PS修改搜集来的图片使其达到想要的效果，最终设计出有良好的视觉效果的页面设计方案。五、网页设计下面为我设计的笔记本副主页的代码： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script type="text/javascript"><![CDATA[//><!]]></script> <script type="text/javascript" src="jquery-1.2.6.js"></script><script type="text/javascript"> $(document).ready(function(){ $(".clickButton a").attr("href","javascript:return false;"); $(".clickButton a").each(function(index){ $(this).click(function(){ changeImage(this,index); }); }); autoChangeImage(); }); function autoChangeImage(){ for(var i = 0; i<=10000;i++){ window.setTimeout("clickButton("+(i%3+1)+")",i*1000); } } function clickButton(index){ $(".clickButton a:nth-child("+index+")").click(); } function changeImage(element,index){ var arryImgs = ["images/lianxiang4.jpg","images/lianxiang5.jpg","images/lianxiang6.jpg"]; $(".clickButton a").removeClass("active"); $(element).addClass("active"); $(".imgs img").attr("src",arryImgs[index]); } function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } </script> <style type="text/css">  </style> <style type="text/css"> #nav,#nav ul{ padding: 0; margin: 0; list-style-type:none; } li { float: left; width: 110px; position:relative; } li ul { display: none; position: absolute; top: 22px; } li:hover ul { display: block; } li:hover ul,li.over ul { /*IE 6不支持非a元素的伪类，故IE6不显示下拉菜单*/ display: block; } ul li a{ display:block; font-size:14px; text-align:center; border: 1px solid #ccc; padding:3px; text-decoration: none; color: #00F; height:1em; background-color: #FFF; } ul li a:hover{ background-color:#F00; background-image: url(images/12345.jpg); background-repeat: no-repeat; background-position: center; } body { color: #333; background-image: url(images/113.JPG); } .beijingse { background-color: #FFC; } h2 { } .tongzhi { background-image: url(images/12.jpg); } .tupian { float: left; } .daohang { color: #000; } body { } .one { color: #F00; } #FlashID { float: left; } p { font-size: 14px; line-height: 1.5; margin: 0px; text-indent: 2em; } .firstLetter{ font-size:3em; float:left; } .p1{ width:240px; float:left; margin:10px; margin-left:0; padding:10px; } .anniu { background-image: url(images/123456.jpg); background-repeat: no-repeat; background-position: center; } .hu { color: #3CF; } .hu { font-size: 24px; color: #6CF; font-weight: bold; font-style: italic; font-family: "Arial Black", Gadget, sans-serif; } </style> </head> <body> <table width="816" height="360" border="1" align="center"> <tr> <td width="806" height="182"><img src="images/22.gif" width="567" height="142" /><img src="images/08.gif" width="205" height="156" /></td> </tr> <tr> <td height="33"><ul id="nav"> <li><a href="index.html" class="anniu"><strong>首页</strong></a></li> <li><a class="anniu"><strong>硬件</strong>介绍</a> <ul> <li><a href="cpu.html">CPU</a></li> <li><a href="zhuban.html">主板</a></li> <li><a href="xianka.html">显卡</a></li> <li><a href="xianshiqi.html">显示器</a></li> <li><a href="jianshu.html">键鼠</a></li> <li><a href="zhengzaijianshe.html">更多</a></li> </ul> </li> <li><a class="anniu" href="index.html"><strong>软件</strong>下载</a> <ul> <li><a href="exe/QQ2011Beta3.exe">腾讯QQ</a></li> <li><a href="exe/暴风影音5.exe">暴风影音</a></li> <li><a href="exe/多米音乐_0.2.3.4.exe">酷我音乐盒</a></li> <li><a href="exe/SogouExplorer_3.1.0.3846_3354.exe">搜狗浏览器</a></li> <li><a href="exe/360安全卫士8.5Beta.exe">360安全卫士</a></li> <li><a href="zhengzaijianshe.html">更多</a></li> </ul> </li> <li><a class="anniu" href="index.html"><strong>系统维护</strong></a> <ul> <li><a href="yingjianweihu.html">硬件维护</a></li> <li><a href="ruanjianweihu.html">软件维护</a></li> <li><a href="wangluoanquan.html">网络安全</a></li> <li><a href="bingduchasha.html">病毒查杀</a></li> <li><a href="xitonghuanyuan.html">系统还原</a></li> <li><a href="zhengzaijianshe.html">更多</a></li> </ul> </li> <li><a href="#" class="anniu"><strong>品牌电脑</strong></a> <ul> <li><a href="lianxiang.html">联想</a></li> <li><a href="huipu.html">惠普</a></li> <li><a href="huashuo.html">华硕</a></li> <li><a href="Apple.html">苹果</a></li> <li><a href="Sony.html">索尼</a></li> <li><a href="zhengzaijianshe.html">更多</a></li> </ul> </ul></td> </tr> <tr> <td valign="top" class="beijingse"><div class="imgsBox"> <div class="imgs" align="center"> <a href="Lenovo.html"> <img id="pic" src="images/lianxiang4.jpg" width="900" height="164" /> </a> </div> <div class="clickButton"> <div> <a class="active" href="">1</a> <a class="" href="">2</a> <a class="" href="">3</a> </div> </div> </div> <img src="images/lianxiang7.jpg" width="894" height="417" /><img src="images/lianxiang8.jpg" width="897" height="416" /><img src="images/lianxiang9.jpg" width="904" height="428" /> <p> </p> <h2>前言</h2> 　　如今，市场上的品牌电脑可谓众星云集，各有千秋，而联想电脑却始终凭借着其稳定的性能、完善的品质和优异的服务为消费者的至爱，让我们来细细品味： <div></div> <h2><a name="2" id="2"></a>公司介绍</h2> 　　● 联想是一家营业额达210亿美元的个人科技产品公司，客户遍布全球 160多个国家。 <div></div> 　　● 联想是全球第二大个人电脑厂商，名列《财富》世界500强，为全球前五大电脑厂商中增长最快。自1997年起，联想一直蝉联中国国内市场销量第一，现占中国个人电脑市场超过三成份额。 <div></div> 　　● 凭借创新的产品、高效的供应链和强大的战略执行，联想锐意为全球用户打造卓越的个人电脑和移动互联网产品。集团由联想及前IBM个人电脑事业部所组成，在全球开发、制造和销售可靠、优质、安全易用的技术产品及优质专业的服务。 <div></div> 　　● 联想产品系列包括Think品牌商用个人电脑、Idea品牌的消费个人电脑、服务器、工作站以及包括平板电脑和智能手机在内的家庭移动互联网终端。 <div></div> 　　● 联想的「保卫和进攻」战略为集团下阶段的发展奠定了坚实的基础，在这项战略下，联想围绕新兴市场和成熟市场的独特业务架构运营，以便因应不同的市场特色，迅速而有效地执行适当的战略。 <div></div> 　　● 一流的世界级研发团队分驻于日本大和研究所、中国北京、上海、深圳及美国北卡罗莱纳州的罗利。 <div></div> 　　● 在中国的北京、上海、惠阳及深圳、印度的庞帝其利(Pondicherry)、墨西哥的蒙特雷(Monterrey)及美国的格林斯博罗(Greensboro)设有个人电脑制造和物流基地，并于全球采用合同制造及OEM。 <div></div> 　　● 全球员工约24,000名。 <div></div> 　　● 联想在香港联合交易所上市（香港交易所股份编号：0992），并且设有美国预托证券在美国进行买卖 (预托证券代码：LNVGY) 。 <div></div> <h2><a name="3" id="3"></a>质量</h2> 　　联想电脑的最大卖点就是<a href="/view/13930.htm" target="_blank">质量</a>。联想电脑生产时是专业化、流水线作业，出厂关都经过严格的质量把关，由专业人员在电磁干扰、高低温、辐射等方面进行严格规范化测试。质量上绝对不是仅靠一把螺丝刀组装的<a href="/view/706987.htm" target="_blank">兼容机</a>能比的，其故障率比兼容机要少得多。联想电脑所采用的配件性能并不算优秀，不过联想电脑就是让您在使用中表现得稳定、出色，这也体现出厂家的实力。 <div></div> <h2><a name="4" id="4"></a>个性设计</h2> 　　 <div id="alb_4090661" log-set-param="album_view"> <p><a href="/albums/16950/16950.html#1388705$" target="_blank"><img src=" alt="" data-src=" /></a></p> 联想电脑(16张)</div> 　看过联想电脑天骄、锋行、家悦系列的朋友，你们是否被它们新颖的造型、绚丽的色彩所吸引呢？这种高水平的创意和时尚化的设计，让人感觉到：“原来电脑可以更美的！”一部外形独特、做工精细的电脑，也是对家庭及办公环境的一种装饰。最新产品天骄i660，超小机身，只占传统主机的七分之一（一本词典的厚度，一本杂志的<a href="/view/51849.htm" target="_blank">宽度</a>），吸入式光驱，感应开关，隐蔽式接口设计，无线鼠标和键盘，底部有“U”型情感灯，28分贝超底静音，10合1读卡器，可与客厅电视连接，千兆网卡，纳米防辐射涂层，样式更美观。 <div></div> <h2><a name="5" id="5"></a>易用</h2> 　　联想电脑的说明书详细通俗，让您一看就懂；而兼容机的说明书不仅多，而且英文多多，让人看着头疼。联想电脑的驱动盘格式统一，标注得清楚，而兼容机除了驱动盘标注不统一外，还分放在不同的产品包装盒里，让人找起来费神劳力。联想电脑特别是<a href="/view/560170.htm" target="_blank">家用电脑</a>，还在“网络化、易用化”上大做文章，有很多贴心的设计，如“一键上网”、“<a href="/view/3323.htm" target="_blank">多媒体</a>播放”、“手写输入”等，降低了操作难度，提高了工作效率，让老百姓更容易使用电脑。 <div></div> <h2><a name="6" id="6"></a>服务</h2> 　　电脑产品不同于<a href="/view/204363.htm" target="_blank">一般</a>家电，它包括<a href="/view/25278.htm" target="_blank">硬件</a>和<a href="/view/37.htm" target="_blank">软件</a>两个方面，出现故障的机率也比较高，因此厂家的<a href="/view/300225.htm" target="_blank">售后服务</a>也显得尤为重要。这一联想电脑的优势就非常明显，它不仅配备了高素质的今后服务和技术咨询队伍，提供了三年保修和及时、迅速的上门服务，让<a href="/view/99548.htm" target="_blank">消费者</a>真正做到“买得放心、用得安心！”。 <div></div> <h2><a name="7" id="7"></a>附赠产品</h2> 　　联想电脑附赠了各种软件，包括<a href="/view/880.htm" target="_blank">操作系统</a>、文字处理、家庭娱乐、杀毒及上网软件，内容丰富，简单易学，很适合初学者使用。当然更让人动心的是送手写板、电子词典等东西。另外，您还可以用更优惠的价格购买<a href="/view/7836.htm" target="_blank">打印机</a>、扫描仪、<a href="/view/30816.htm" target="_blank">掌上电脑</a>等<a href="/view/1214.htm" target="_blank">产品</a>。 <div></div> <h2><a name="8" id="8"></a>附赠软件</h2> 　　根据电脑的不同,赠送的软件也不同。主要有<a href="/view/2369612.htm" target="_blank">幸福之家</a>一系列软件、<a href="/view/26977.htm" target="_blank">金山软件</a>、nero、联想宽带通、数码家电、联想安全中心、诺顿杀毒软件、<a href="/view/28493.htm" target="_blank">金山毒霸</a>、一键恢复、<a href="/view/363604.htm" target="_blank">网络爸爸</a>、联想100分学校、系统拯救、闪电恢复、<a href="/view/6599.htm" target="_blank">金山词霸</a>……。 <div></div> <h2><a name="9" id="9"></a>联想商用电脑产品线</h2> 　　按照目标消费者的不同，<strong>联想</strong>建立了覆盖个人、中小企业、大企业三类用户的完整商用产品线，包括：针对高端商务个人的<a href="/view/1344818.htm" target="_blank">ThinkPad笔记本</a>，针对中小企业的V系列、扬天系列，以及针对大客户的ThinkCentre、<a href="/view/651776.htm" target="_blank">昭阳</a>、启天系列： <div></div> 　　<strong>个人商用电脑：</strong> <div></div> 　　<strong>笔记本产品：</strong> <div></div> 　　<strong>ThinkPad R</strong><strong>系列</strong>：高性价比的典范 <div></div> 　　具有主流性能与ThinkPad特性，具备高性价比，是理想的家庭及办公的笔记本工具。 <div></div> 　　<strong>ThinkPad SL</strong><strong>系列</strong>：成长型全功能笔记本 <div></div> 　　专为成长型企业量身定制，集性能、无线及多媒体功能于一身、可轻松投入的<a href="/view/7690.htm" target="_blank">笔记本电脑</a>。 <div></div> 　　<strong>ThinkPad T</strong><strong>系列</strong>：性能与便携的完美平衡 <div></div> 　　将强大的性能与便携性完美结合，并包括更为强大、专业的已通过 ISV 认证的移动工作站。 <div></div> 　　<strong>ThinkPad X</strong><strong>系列</strong>：终极便携 <div></div> 　　极致轻薄设计，超长电池使用时间专为移动商务人士设计，产品包括全新的轻薄领袖 ThinkPad X301。 <div></div> 　　<strong>ThinkPad X</strong><strong>平板系列</strong>：可变式平板电脑 <div></div> 　　可作为书写板和笔记本电脑使用，直接在屏幕上灵活书写每一个想法。 <div></div> 　　<strong>ThinkPad W</strong><strong>系列</strong>：终极移动工作站 <div></div> 　　ThinkPad移动工作站采用英特尔&reg; 酷睿™2 计算技术和 NVIDIA 高端独立<a href="/view/2882.htm" target="_blank">显卡</a>。 <div></div> 　　<strong>中小企业商用电脑：</strong> <div></div> 　　<strong>笔记本产品：</strong> <div></div> 　　<strong>IdeaPad V</strong><strong>系列：</strong> <div></div> 　　IdeaPad V系列宽屏超便携高性能笔记本电脑以时尚动感的家族Family ID设计 + 尖端科技的商务应用设计 + 体贴入微的人性关怀设计，创造三维体验设计的时尚精品，给用户带来耳目一新的商务娱乐应用体验。 <div></div> 　　其采用最新英特尔&reg;迅驰&reg;2<a href="/view/50152.htm" target="_blank">处理器</a>技术，结合联想最新科技结晶，是专门针对高端商用用户量身打造的笔记本精品。能同时满足用户对于笔记本便携性和丰富多媒体应用的需求，是睿智工作、精彩生活完美结合的移动平台。 <div></div> 　　<strong>台式机产品：</strong> <div></div> 　　<strong>扬天A</strong><strong>系列</strong>：卓越品质 <div></div> 　　扬天A系列产品是专为100人以上的中型企业用户设计的一款产品。支持Intel AMT技术。 <div></div> 　　<strong>扬天M</strong><strong>系列</strong>：主流商务 <div></div> 　　扬天M系列产品是专为100人以下零散型采购的中小企业用户量身打造的一款产品。 <div></div> 　　<strong>扬天T</strong><strong>系列</strong>：实用超值 <div></div> 　　扬天T系列是一款经济实用的平台产品；外观朴素大方，简洁得体。 <div></div> 　　<strong>地税专用机</strong>：地税专用 <div></div> 　　联想专门为普通发票用户设计的专用电脑，专门用于企业用户的普通发票项目。 <div></div> 　　<strong>国税专用机</strong>：国税专用 <div></div> 　　一键开票为税控用户量身定制,专门用于“金税工程”企业增值税防伪税控项目。 <div></div> 　　<strong>大客户商用电脑：</strong> <div></div> 　　<strong>台式机产品：</strong> <div></div> 　　<strong>ThinkCentre M</strong><strong>系列：</strong> <div></div> 　　ThinkCentre M<a href="/view/2056588.htm" target="_blank">塔式机箱</a>系列立足商业大客户的安全稳定的应用需求，是专为企业级客户设计的节能、环保型商务办公平台。扩展性强是塔式机箱的最大优势，可以对硬盘、光驱、内存、扩展卡等PC部件进行灵活特配。ThinkCentre M塔式机箱系列凭借高品质、绿色环保、易管理三大顶尖特性，将绿色转化为企业竞争力，助力客户实现可持续发展。 <div></div> 　　<strong>启天系列：</strong> <div></div> 　　启天系列具有节约能源、环境友善、保护健康三大顶尖特性： <div></div> 　　<strong>节能</strong>：全面通过国家节能认证，超低功耗显示器，获得国家能效标志1级认证，节能效率高达30%； <div></div> 　　<strong>环保</strong>：通过了<a href="/view/61891.htm" target="_blank">中国</a>的RoHS（无铅）认证，减少对环境的影响。<a href="/view/396570.htm" target="_blank">整机</a>通过国家环保局十环认证； <div></div> 　　<strong>健康</strong>：键盘、鼠标采用抗菌材料，避免细菌吸附（抗菌率达99%）；经过严格的测试，保证电脑在使用过程中，无有害物质的挥发。主机通过国家电磁辐射最高级（B级）标准； <div

展开阅读全文