网页设计专周报告.doc

网页设计与制作
专周报告书

学 生：
小组成员：
学 号：
班 级：
指导教师：
实习日期：
成 绩：

目 录
一、 专周实验题目 ………………………………………………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修改搜集来的图片使其达到想要的效果，最终设计出
有良好的视觉效果的页面设计方案。
五、网页设计
下面为我设计的笔记本副主页的代码：
w.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

无标题文档
<!--//--><![CDATA[//><!--
startList = function() {
if (document.all&&d</p><p style='padding:5px 0px;'>7、ocument.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.onmous</p><p style='padding:5px 0px;'>8、eout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;

//--><!]]>

$(document).ready(function(){
$(".clickButton a").</p><p style='padding:5px 0px;'>9、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("</p><p style='padding:5px 0px;'>10、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</p><p style='padding:5px 0px;'>11、");
$(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("</p><p style='padding:5px 0px;'>12、")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

<!--
img{
border:0px;
float: left;
}
.imgsBox{overflow:hidden;width:900px;height:176px; border:1px gray dashed;
margin:10px 10px 10px 0;
padding:5px;
float:left;}
.imgs a{display:block;width:9</p><p style='padding:5px 0px;'>13、00px;height:164px;}
.clickButton{background-color:#888888;width:282px;height:12px;position:relative;top:-1px;_top:-5px;}
.clickButton div{float:right;}
.clickButton a{background-color:#666;border-left:#ccc 1px solid;line-height:12px;height:12px;font-size:10px;float:left;padding:0 7px;text-decorat</p><p style='padding:5px 0px;'>14、ion:none;color:#fff;}
.clickButton a.active,.clickButton a:hover{background-color:#d34600;}
-->

#nav,#nav ul{
padding: 0;
margin: 0;
list-style-type:none;
}
li {
float: left;
width: 110px;
position:relative;
}
li ul {
display: no</p><p style='padding:5px 0px;'>15、ne;
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;
colo</p><p style='padding:5px 0px;'>16、r: #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-co</p><p style='padding:5px 0px;'>17、lor: #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{</p><p style='padding:5px 0px;'>18、
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: #6C</p><p style='padding:5px 0px;'>19、F;
font-weight: bold;
font-style: italic;
font-family: "Arial Black", Gadget, sans-serif;
}

>联想ul>>
市场超过三成份额。
业务架构运营，以便因应不同的市场特色，迅速而有效地执行适当的战略。
并且设有美国预托证券在美国进行买卖 (预托证券代码：LNVGY) 。
脑所采用的配件性能并不算优秀，不过联想电脑就是让您在使用中表现得稳定、出色，这也体现出厂家的实力。
v>
et="_blank">多媒体播放”、“手写输入”等，降低了操作难度，提高了工作效率，让老百姓更容易使用电脑。
较高，因此厂家的售后服务也显得尤为重要。这一联想电脑的优势就非常明显，它不仅配备了高素质的今后服务和技术咨询队伍，提供了三年保修和及时、迅速的上门服务，让消费者真正做到“买得放心、用得安心！”。
t="_blank">操作系统、文字处理、家庭娱乐、杀毒及上网软件，内容丰富，简单易学，很适合初学者使用。当然更让人动心的是送手写板、电子词典等东西。另外，您还可以用更优惠的价格购买打印机、扫描仪、掌上电脑等产品。
　　根据电脑的不同,赠送的软件也不同。主要有幸福之家一系列软件、金山软件、nero、联想宽带通、数码家电、联想安全中心、诺顿杀毒软件、金山毒霸、一键恢复、网络爸爸、联想100分学校、系统拯救、闪电恢复、金山词霸……。
"_blank">昭阳、启天系列：
全功能笔记本
rong>：终极便携
站采用英特尔&reg; 酷睿™2 计算技术和 NVIDIA 高端独立显卡。
技的商务应用设计 + 体贴入微的人性关怀设计，创造三维体验设计的时尚精品，给用户带来耳目一新的商务娱乐应用体验。
天A系列：卓越品质
济实用的平台产品；外观朴素大方，简洁得体。
/strong>
户实现可持续发展。
关于我们      便捷服务       自信AI       AI导航        抽奖活动©2010-2025 宁波自信网络信息技术有限公司  版权所有客服电话：4009-655-100  投诉/维权电话：[phone]浙公网安备33021202000488号   浙ICP备2021020529号-1  |  浙B2-20240490  关注我们 ：