网页设计专周报告Word格式.docx
《网页设计专周报告Word格式.docx》由会员分享，可在线阅读，更多相关《网页设计专周报告Word格式.docx（20页珍藏版）》请在冰豆网上搜索。
（3）、在专周开始之前就将主页构思好了，并且完成了大概，之后
构思个人主页，由于我们做的是个人网站，所以由我们每人做各自的
分工部分
（4）、用PS修改搜集来的图片使其达到想要的效果，最终设计出
有良好的视觉效果的页面设计方案。
五、网页设计
下面为我设计的笔记本副主页的代码：
<
!
DOCTYPEhtmlPUBLIC"
-//W3C//DTDXHTML1.0Transitional//EN"
"
http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
htmlxmlns="
//www.w3.org/1999/xhtml"
head>
metahttp-equiv="
Content-Type"
content="
text/html;
charset=utf-8"
/>
title>
无标题文档<
/title>
scripttype="
text/javascript"
--//-->
[CDATA[//>
--
startList=function（）{
if（document.all&
&
document.getElementById）{
navRoot=document.getElementById（"
nav"
）;
for（i=0;
i<
navRoot.childNodes.length;
i++）{
node=navRoot.childNodes[i];
if（node.nodeName=="
LI"
）{
node.onmouseover=function（）{
this.className+="
over"
;
/*问题3不能无空格*/
}
node.onmouseout=function（）{
this.className=this.className.replace（"
"
"
}
}
}
}
window.onload=startList;
//-->
]]>
/script>
src="
jquery-1.2.6.js"
$（document）.ready（function（）{
$（"
.clickButtona"
）.attr（"
href"
"
javascript:
returnfalse;
）.each（function（index）{
$（this）.click（function（）{
changeImage（this,index）;
}）;
}）;
autoChangeImage（）;
}）;
functionautoChangeImage（）{
for（vari=0;
=10000;
i++）{
window.setTimeout（"
clickButton（"
+（i%3+1）+"
）"
i*1000）;
functionclickButton（index）{
.clickButtona:
nth-child（"
+index+"
）.click（）;
functionchangeImage（element,index）{
vararryImgs=["
images/lianxiang4.jpg"
images/lianxiang5.jpg"
images/lianxiang6.jpg"
];
）.removeClass（"
active"
$（element）.addClass（"
.imgsimg"
src"
arryImgs[index]）;
functionMM_preloadImages（）{//v3.0
vard=document;
if（d.images）{if（!
d.MM_p）d.MM_p=newArray（）;
vari,j=d.MM_p.length,a=MM_preloadImages.arguments;
for（i=0;
a.length;
i++）
if（a[i].indexOf（"
#"
）!
=0）{d.MM_p[j]=newImage;
d.MM_p[j++].src=a[i];
}}
styletype="
text/css"
img{
border:
0px;
float:
left;
.imgsBox{overflow:
hidden;
width:
900px;
height:
176px;
1pxgraydashed;
margin:
10px10px10px0;
padding:
5px;
left;
.imgsa{display:
block;
164px;
.clickButton{background-color:
#888888;
282px;
12px;
position:
relative;
top:
-1px;
_top:
-5px;
.clickButtondiv{float:
right;
.clickButtona{background-color:
#666;
border-left:
#ccc1pxsolid;
line-height:
font-size:
10px;
float:
padding:
07px;
text-decoration:
none;
color:
#fff;
.clickButtona.active,.clickButtona:
hover{background-color:
#d34600;
-->
/style>
#nav,#navul{
0;
list-style-type:
li{
width:
110px;
position:
liul{
display:
none;
absolute;
top:
22px;
li:
hoverul{
block;
hoverul,li.overul{/*IE6不支持非a元素的伪类，故IE6不显示下拉菜单*/
ullia{
font-size:
14px;
text-align:
center;
1pxsolid#ccc;
3px;
text-decoration:
color:
#00F;
height:
1em;
background-color:
#FFF;
ullia:
hover{
#F00;
background-image:
url（images/12345.jpg）;
background-repeat:
no-repeat;
background-position:
center;
body{
#333;
url（images/113.JPG）;
.beijingse{
#FFC;
h2{
.tongzhi{
url（images/12.jpg）;
.tupian{
.daohang{
#000;
.one{
#F00;
#FlashID{
p{
14px;
line-height:
1.5;
0px;
text-indent:
2em;
.firstLetter{
3em;
.p1{
240px;
margin-left:
0;
.anniu{
url（images/123456.jpg）;
.hu{color:
#3CF;
.hu{font-size:
24px;
#6CF;
font-weight:
bold;
font-style:
italic;
font-family:
ArialBlack"
Gadget,sans-serif;
/head>
body>
tablewidth="
816"
height="
360"
border="
1"
align="
center"
<
tr>
tdwidth="
806"
182"
imgsrc="
images/22.gif"
width="
567"
142"
images/08.gif"
205"
156"
/td>
/tr>
tdheight="
33"
ulid="
li>
ahref="
index.html"
class="
anniu"
strong>
首页<
/strong>
/a>
/li>
aclass="
硬件<
介绍<
ul>
cpu.html"
CPU<
zhuban.html"
主板<
xianka.html"
显卡<
xianshiqi.html"
显示器<
jianshu.html"
键鼠<
zhengzaijianshe.html"
更多<
/ul>
href="
软件<
下载<
exe/QQ2011Beta3.exe"
腾讯QQ<
exe/暴风影音5.exe"
暴风影音<
exe/多米音乐_0.2.3.4.exe"
酷我音乐盒<
exe/SogouExplorer_3.1.0.3846_3354.exe"
搜狗浏览器<
exe/360安全卫士8.5Beta.exe"
360安全卫士<
系统维护<
yingjianweihu.html"
硬件维护<
ruanjianweihu.html"
软件维护<
wangluoanquan.html"
网络安全<
bingduchasha.html"
病毒查杀<
xitonghuanyuan.html"
系统还原<
品牌电脑<
lianxiang.html"
联想<
huipu.html"
惠普<
huashuo.html"
华硕<
Apple.html"
苹果<
Sony.html"
索尼<
tdvalign="
top"
beijingse"
divclass="
imgsBox"
imgs"
<
Lenovo.html"
<
imgid="
pic"
900"
164"
/div>
clickButton"
div>
1<
2<
3<
images/lianxiang7.jpg"
894"
417"
images/lianxiang8.jpg"
897"
416"
images/lianxiang9.jpg"
904"
428"
p>
nbsp;
/p>
h2>
前言<
/h2>
如今，市场上的品牌电脑可谓众星云集，各有千秋，而联想电脑却始终凭借着其稳定的性能、完善的品质和优异的服务为消费者的至爱，让我们来细细品味：
aname="
2"
id="
公司介绍<
●联想是一家营业额达210亿美元的个人科技产品公司，客户遍布全球160多个国家。
●联想是全球第二大个人电脑厂商，名列《财富》世界500强，为全球前五大电脑厂商中增长最快。
自1997年起，联想一直蝉联中国国内市场销量第一，现占中国个人电脑市场超过三成份额。
●凭借创新的产品、高效的供应链和强大的战略执行，联想锐意为全球用户打造卓越的个人电脑和移动互联网产品。
集团由联想及前IBM个人电脑事业部所组成，在全球开发、制造和销售可靠、优质、安全易用的技术产品及优质专业的服务。
●联想产品系列包括Think品牌商用个人电脑、Idea品牌的消费个人电脑、服务器、工作站以及包括平板电脑和智能手机在内的家庭移动互联网终端。
●联想的「保卫和进攻」战略为集团下阶段的发展奠定了坚实的基础，在这项战略下，联想围绕新兴市场和成熟市场的独特业务架构运营，以便因应不同的市场特色，迅速而有效地执行适当的战略。
●一流的世界级研发团队分驻于日本大和研究所、中国北京、上海、深圳及美国北卡罗莱纳州的罗利。
●在中国的北京、上海、惠阳及深圳、印度的庞帝其利（Pondicherry）、墨西哥的蒙特雷（Monterrey）及美国的格林斯博罗（Greensboro）设有个人电脑制造和物流基地，并于全球采用合同制造及OEM。
●全球员工约24,000名。
●联想在香港联合交易所上市（香港交易所股份编号：
0992），并且设有美国预托证券在美国进行买卖（预托证券代码：
LNVGY）。
3"
质量<
联想电脑的最大卖点就是<
/view/13930.htm"
target="
_blank"
。
联想电脑生产时是专业化、流水线作业，出厂关都经过严格的质量把关，由专业人员在电磁干扰、高低温、辐射等方面进行严格规范化测试。
质量上绝对不是仅靠一把螺丝刀组装的<
/view/706987.htm"
兼容机<
能比的，其故障率比兼容机要少得多。
联想电脑所采用的配件性能并不算优秀，不过联想电脑就是让您在使用中表现得稳定、出色，这也体现出厂家的实力。
4"
个性设计<
divid="
alb_4090661"
log-set-param="
album_view"
/albums/16950/16950.html#1388705$"
alt="
data-src="
联想电脑（16张）<
看过联想电脑天骄、锋行、家悦系列的朋友，你们是否被它们新颖的造型、绚丽的色彩所吸引呢？
这种高水平的创意和时尚化的设计，让人感觉到：
ldquo;
原来电脑可以更美的！
rdquo;
一部外形独特、做工精细的电脑，也是对家庭及办公环境的一种装饰。
最新产品天骄i660，超小机身，只占传统主机的七分之一（一本词典的厚度，一本杂志的<
/view/51849.htm"
宽度<
），吸入式光驱，感应开关，隐蔽式接口设计，无线鼠标和键盘，底部有&
U&
型情感灯，28分贝超底静音，10合1读卡器，可与客厅电视连接，千兆网卡，纳米防辐射涂层，样式更美观。
5"
易用<
联想电脑的说明书详细通俗，让您一看就懂；
而兼容机的说明书不仅多，而且英文多多，让人看着头疼。
联想电脑的驱动盘格式统一，标注得清楚，而兼容机除了驱动盘标注不统一外，还分放在不同的产品包装盒里，让人找起来费神劳力。
联想电脑特别是<
/view/560170.htm"
家用电脑<
，还在&
网络化、易用化&
上大做文章，有很多贴心的设计，如&
一键上网&
、&
/view/3323.htm"
多媒体<
播放&
手写输入&
等，降低了操作难度，提高了工作效率，让老百姓更容易使用电脑。
6"
服务<
电脑产品不同于<
/view/20436
升级会员 