静态设计页面的制作课程设计.docx

上传人:b****9 文档编号:25828026 上传时间:2023-06-15 格式:DOCX 页数:27 大小:278.91KB
下载 相关 举报
静态设计页面的制作课程设计.docx_第1页
第1页 / 共27页
静态设计页面的制作课程设计.docx_第2页
第2页 / 共27页
静态设计页面的制作课程设计.docx_第3页
第3页 / 共27页
静态设计页面的制作课程设计.docx_第4页
第4页 / 共27页
静态设计页面的制作课程设计.docx_第5页
第5页 / 共27页
点击查看更多>>
下载资源
资源描述

静态设计页面的制作课程设计.docx

《静态设计页面的制作课程设计.docx》由会员分享,可在线阅读,更多相关《静态设计页面的制作课程设计.docx(27页珍藏版)》请在冰豆网上搜索。

静态设计页面的制作课程设计.docx

静态设计页面的制作课程设计

存档资料成绩:

 

华东交通大学理工学院

课程设计报告书

 

所属课程名称网页设计与网页制作

题目  静态设计页面的制作          

   

分院 电信分院   

专业班级信管2班

学  号20120210450221       

学生姓名熊武       

指导教师魏建红   

 

2014年12月29日

序号

项目

等   级

优秀

良好

中等

及格

不及格

1

课程设计态度评价

2

出勤情况评价

3

任务难度评价

4

工作量饱满评价

5

任务难度评价

6

设计中创新性评价

7

论文书写规范化评价

8

综合应用能力评价

综合评定等级

课程设计(论文)评阅意见

 

评阅人 职称

2014年12月29日

目录

第一章课程设计内容及要求4

第二章课程设计目的及流程5

第三章课程设计方法及步骤6

第四章课程设计的部分代码及截图10

第五章课程设计心得27

第六章参考文献28

第一章课程设计内容及要求

一.课程设计题目

用已经学过的网站开发技术及开发工具DW,根据网站首页效果图,利用DIV+CSS设计出一个《网站首页》。

二.课程设计内容及要求

内容有:

1.建立站点;2.结构分析;3.搭建框架;4.切割效果图;5.布局页面——头部和导航;6.布局页面——侧边栏;7.布局页面——主体部分;8.底部和细节调整

要求有:

运用DIV+CSS设计出一个静态页面,做到简洁,清晰,明了。

第二章课程设计目的及流程

一.课程设计目的:

1.通过课设的制作,来加深同学对网页设计的认识和制做。

同时也加强了对同学的实际操作能力。

2.要尊重浏览者体验,网站不是做给自己看的。

一.课程设计流程:

第三章课程设计方法及步骤

一.课程设计方法:

1.建立站点

打开DW,建立名为website站点

2.结构分析

◆头部

◆LOGO

◆导航栏

◆内容框

✓左边部分内容

Ø上面部分

Ø下面部分

✓右边部分内容

✓中间部分

✓下面部分

◆尾部

3.搭建框架

4.切割效果图

5.布局页面——头部和导航

6.布局页面——侧边栏

7.布局页面——主体部分

8.底部和细节调整

第四章课程设计的部分代码及截图

1、html代码

头部和导航栏

足球天下

首页

登陆

绿茵场

  • 首页
  • 联赛
  • 直播
  • 欧洲
  • 南美
  • 亚洲
  • 侧边栏

    aquamarine">

    最新消息

    lightgreen">

    积分榜

    英超积分榜
    排名球队场次积分
    1切尔西1946
    2曼城1946
    3曼联1946
    4开普敦1933
    5切尔西1933
    6阿森纳1933
    7热刺1846
    8西汉姆联1846

    主题部分

    url('1.jpg.png')">

    url('2.fw.png')">

    url('3.fw.png')">

    url('4.fw.png')">

    lightgreen">

    英超赛事

    lightgreen">

    德甲赛事

    底部和细节调整

    Copyright©2014熊武,AllRightsReserved

    2、CSS代码

    *{

    margin:

    0px;

    padding:

    0px;

    font-family:

    "微软雅黑";

    }

    #head{

    background-color:

    deepskyblue;

    height:

    50px;

    width:

    100%;

    box-shadow:

    cornflowerblue5px5px5px;

    position:

    fixed;

    float:

    top;

    z-index:

    100;

    }

    #head#head_contend{

    margin-left:

    15%;

    background-color:

    chartreuse;

    height:

    50px;

    width:

    75%;

    }

    #head_contend#first{

    text-align:

    left;

    background:

    powderblue;

    width:

    200px;

    height:

    50px;

    float:

    left;

    }

    #head_contend#admin{

    text-align:

    center;

    background:

    lightblue;

    height:

    50px;

    width:

    50px;

    float:

    right;

    }

    #head_contend#index{

    text-align:

    center;

    background:

    darkseagreen;

    height:

    50px;

    width:

    50px;

    float:

    right;

    }

    #body{

    margin-left:

    15%;

    padding-top:

    10px;

    width:

    75%;

    float:

    top;

    z-index:

    0;

    }

    #logo{

    height:

    50px;

    margin-top:

    50px;

    padding:

    0;

    }

    #rad{

    margin:

    5px;

    height:

    50px;

    width:

    100%;

    border-radius:

    10px;

    box-shadow:

    darkcyan5px5px10px;

    }

    #content{

    border-radius:

    10px;

    width:

    30%;

    box-shadow:

    darkcyan5px5px10px;

    float:

    left;

    padding:

    15px;

    }

    #content#content_top{

    border:

    5pxdimgreysolid;

    border-radius:

    10px;

    width:

    100%;

    box-shadow:

    darkcyan5px5px10px;

    position:

    relative;

    float:

    left;

    margin-right:

    5px;

    background:

    greenyellow;

    ;

    }

    #content#content_center{

    border:

    5pxdimgreysolid;

    border-radius:

    10px;

    width:

    100%;

    box-shadow:

    darkcyan5px5px10px;

    position:

    relative;

    float:

    left;

    margin-right:

    5px;

    background:

    turquoise;

    }

    #content#content_bottom{

    border:

    5pxdimgreysolid;

    border-radius:

    10px;

    width:

    100%;

    box-shadow:

    darkcyan5px5px10px;

    position:

    relative;

    float:

    left;

    margin-right:

    5px;

    background:

    palegreen;

    }

    #content1{

    border:

    5pxdimgreysolid;

    border-radius:

    10px;

    width:

    65%;

    height:

    250px;

    box-shadow:

    darkcyan5px5px10px;

    float:

    left;

    background:

    powderblue;

    }

    #content1#slid{

    height:

    100%;

    width:

    100%;

    margin:

    4px;

    padding:

    2px;

    }

    #slid#img{

    border:

    solid2pxrosybrown;

    height:

    190px;

    width:

    98%;

    box-shadow:

    lightblue2px2px2px;

    padding-top:

    2px;

    }

    #slid#mcimg{

    border:

    2pxdarkcyansolid;

    height:

    40px;

    margin-top:

    2px;

    width:

    58%;

    padding-left:

    40%;

    padding-top:

    2px;

    overflow:

    hidden;

    }

    #boot{

    border:

    5pxdimgreysolid;

    border-radius:

    10px;

    width:

    65%;

    height:

    500px;

    box-shadow:

    darkcyan5px5px10px;

    float:

    left;

    }

    #boot.c1{

    border:

    solid2pxgreenyellow;

    border-radius:

    5px;

    width:

    98%;

    height:

    200px;

    box-shadow:

    darkcyan5px5px10px;

    float:

    top;

    }

    #root{

    border:

    5pxdimgreysolid;

    border-radius:

    10px;

    width:

    100%;

    height:

    50px;

    box-shadow:

    darkcyan5px5px10px;

    float:

    left;

    background-color:

    deepskyblue;

    }

    #p1{

    background:

    cornflowerblue;

    width:

    35px;

    height:

    35px;

    float:

    left;

    box-shadow:

    darkcyan5px5px10px;

    }

    #p2{

    background:

    orange;

    width:

    35px;

    height:

    35px;

    float:

    left;

    box-shadow:

    darkcyan5px5px10px;

    }

    #p3{

    background:

    chartreuse;

    width:

    35px;

    height:

    35px;

    float:

    left;

    box-shadow:

    darkcyan5px5px10px;

    }

    #p4{

    background:

    orchid;

    width:

    35px;

    height:

    35px;

    float:

    left;box-shadow:

    darkcyan5px5px10px;

    }

    .b1{

    width:

    47%;

    height:

    28%;

    float:

    left;

    box-shadow:

    darkcyan5px5px10px;

    position:

    absolute;

    }

    .b2{

    background:

    chartreuse;

    width:

    47%;

    height:

    28%;

    float:

    left;

    font-size:

    40px;

    box-shadow:

    darkcyan5px5px10px;

    position:

    absolute;

    display:

    none;

    }

    .b3{

    background:

    orange;

    width:

    47%;

    height:

    28%;

    float:

    left;

    box-shadow:

    darkcyan5px5px10px;

    position:

    absolute;

    display:

    none;

    }

    .b4{

    background:

    cornflowerblue;

    width:

    47%;

    height:

    28%;

    float:

    left;

    box-shadow:

    darkcyan5px5px10px;

    position:

    absolute;

    display:

    none;

    }

    h1{

    color:

    chocolate;

    font-family:

    sans-serif;

    }

    ul

    {

    list-style-type:

    none;

    margin:

    0;

    padding:

    0;

    overflow:

    hidden;

    }

    .radli

    {

    float:

    left;

    }

    .rada:

    link,a:

    visited

    {

    display:

    block;

    width:

    150px;

    height:

    32px;

    font-weight:

    bold;

    color:

    #FFFFFF;

    background-color:

    lightblue;

    text-align:

    center;

    padding:

    4px;

    text-decoration:

    none;

    text-transform:

    uppercase;

    padding-top:

    10px;

    }

    .rada:

    hover,a:

    active

    {

    background-color:

    aqua;

    }

    .blank{

    border:

    5pxdimgreysolid;

    border-radius:

    10px;

    width:

    98%;

    box-shadow:

    darkcyan5px5px10px;

    float:

    top;

    margin-bottom:

    5px;

    }

    .c1a{

    color:

    dodgerblue;

    }

    #logoh1{

    color:

    lime;

    }

    #logoh2{

    color:

    dodgerblue;

    }

    #content_topa{

    color:

    dodgerblue;

    }

    3、JS代码

    /**

    *Createdbyxxon2014/12/28.

    */

    $(document).ready(function(){

    $("#p1").mouseenter(function(){

    varp1=$("#p1");

    p1.css({background:

    '#00ced1',boxshadow:

    'red5px5px5px',fontsize:

    '25px'});

    p1.css({border:

    'solid2pxlavender'})

    $(".b1").css({display:

    'inherit'})

    $(".b2").css({display:

    'none'})

    $(".b3").css({display:

    'none'})

    $(".b4").css({display:

    'none'})

    })

    $("#p1").mouseleave(function(){varp1=$("#p1");

    varp1=$("#p1");

    p1.css({background:

    'cornflowerblue'});

    })

    $("#p2").mouseenter(function(){

    varp2=$("#p2");

    p2.css({background:

    '#00ced1'});

    $(".b2").css({display:

    'inherit'})

    $(".b1").css({display:

    'none'})

    $(".b3").css({display:

    'none'})

    $(".b4").css({display:

    'none'})

    })

    展开阅读全文
    相关资源
    猜你喜欢
    相关搜索

    当前位置:首页 > 幼儿教育 > 幼儿读物

    copyright@ 2008-2022 冰豆网网站版权所有

    经营许可证编号:鄂ICP备2022015515号-1