网页设计与制作
专周报告书
学    生：           
小组成员：           
学    号：           
班    级：           
指导教师：           
实习日期：           
成    绩：           

目  录
一、 专周实验题目 ………………………………………………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" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript"><![CDATA[//><!--
startList = function() {
    if (document.all&&ElementById) {
        navRoot = ElementById("nav");
        for (i=0; i<navRoot.childNodes.length; i++) {
            node = navRoot.childNodes[i];
            if (deName=="LI") {
                useover=function() {
                    this.className+=" over";            /*问题3 不能无空格*/
                }
                useout=function() {
                    this.className=place(" over", "");
                }
            }
        }
    }
}
load=startList;
//--><!]]></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">
<!--
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:900px;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:12
px;font-size:10px;float:left;padding:0 7px;text-decoration:none;color:#fff;}
.clickButton a.active,.clickButton a:hover{background-color:#d34600;}
-->
</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;

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。