网页设计 订阅
网页设计(web design,又称为Web UI design,WUI design,WUI),是根据企业希望向浏览者传递的信息(包括产品、服务、理念、文化),进行网站功能策划,然后进行的页面设计美化工作。作为企业对外宣传物料的其中一种,精美的网页设计,对于提升企业的互联网品牌形象至关重要。网页设计一般分为三种大类:功能型网页设计(服务网站&B/S软件用户端)、形象型网页设计(品牌形象站)、信息型网页设计(门户站)。设计网页的目的不同,应选择不同的网页策划与设计方案。 展开全文
网页设计(web design,又称为Web UI design,WUI design,WUI),是根据企业希望向浏览者传递的信息(包括产品、服务、理念、文化),进行网站功能策划,然后进行的页面设计美化工作。作为企业对外宣传物料的其中一种,精美的网页设计,对于提升企业的互联网品牌形象至关重要。网页设计一般分为三种大类:功能型网页设计(服务网站&B/S软件用户端)、形象型网页设计(品牌形象站)、信息型网页设计(门户站)。设计网页的目的不同,应选择不同的网页策划与设计方案。
信息
外文名
Web Design,WUI design
相关项目
网站策划
设计目标
页面精美、逻辑清晰、体验良好
中文名
网页设计
域名选择
主要有.com、.cx、.cn、.net等
常用工具
PS、FL、DW、FW
网页设计概述
在进行网站制作前,首先要进行网站页面的整体设计。一个网站是由若干个网页构成的,网页是用户访问网站的界面。因此,通常意义上的网站设计,即指的是网站中各个页面的设计。而网页设计中,最先提到的就是网页的布局。布局是否合理、美观,将直接影响到用户的阅读体验及访问时间。在互联网高速发展的今天,网络已成为人们生活的一部分,成为人们获取信息资源的重要途径。信息的呈现离不开网页这个重要的界面,网页的主要作用是将用户需要的信息与资源采用一定的手段进行组织,通过网络呈现给用户。随着网络技术及其带宽的提高,网页的组成元素也发生了很大的变化。在90年代末,网页的构成元素主要就是大量的文本、表格、超链接和极少数量的静态图像和gif动图。现在的网页除了以上的组成元素外又增加了大量的图像、动画、视频、音乐、横幅广告以及多种动态效果。 [1] 
收起全文
精华内容
下载资源
问答
  • 网页设计

    2018-06-26 18:30:12
    本课程涵盖了PS,AI软件实操,字体设计,版式,配色,创意思维,图标设计,Banner设计,网页设计规范,网页组成,网页版式,网页配色,专题页设计,网页改版等网页设计师岗位涉及的内容。授课风格干净利落,系统细致...
  • 79套网页设计模版

    千次下载 热门讨论 2012-03-27 16:04:16
    79套网页设计模版
  • HTML网页设计结课作业——19张精美网页!

    万次阅读 多人点赞 2019-12-19 18:16:36
    什么高数啊、线代啊、C语言、网页设计等,简直让人头大。你还在为网页设计老师的作业要求感到头大?网页作业无从下手?网页要求的总数量太多?没有合适的模板?等等一系列问题。你想要解决的问题,在这篇博文中基本...

    临近期末,大一新生的各种考试和专业结课作业纷至沓来。什么高数啊、线代啊、C语言、网页设计等,简直让人头大。你还在为网页设计老师的作业要求感到头大?网页作业无从下手?网页要求的总数量太多?没有合适的模板?等等一系列问题。你想要解决的问题,在这篇博文中基本都能满足你的需求(博主之前的一个质量比较高的博客:C语言学生信息管理系统)。废话不多说,直接看效果,免得说我骗你们。

    首页

     

    首页底部

     

    网站地图

     

    网站地图底部

     

    Aime主页

     

    文章内容

     

    根目录
    ​​​​​​

     

    栏目目录

     

    栏目目录

     

    标题

     

    --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

    接下来就是代码了:需要全部代码请关注公众号:木节学编程,后台回复“html作业”即可获得。

    --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

    <html>
        <head>
            <title>Aime-toi个人博客</title>
            <link rel="shortcut icon" href="images/QQ图片20191129104345.jpg" />
            <link href="css/style2.css" rel="stylesheet" type="text/css" media="all">
            <link rel="stylesheet" href="css/animate.min.css">
            
            <!-- 用于背景动态样式 -->
            <!-- <link rel="stylesheet" href="css/style2.css" type="text/css" /> -->
    
            <script src="js/wow.min.js"></script>
            <script src="js/jquery-1.12.4.min.js"></script>
            <script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
            <script>
                if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))){
                new WOW().init();
            };
            </script>
    
            <!-- 响应式布局 -->
            <meta http-equiv="Cache-Control" content="no-transform" />
            <meta http-equiv="Cache-Control" content="no-siteapp" />
            <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
    
            <!--  -->
            <!-- 用于背景动态样式 -->
            <!-- <script type="text/javascript" src='js/TweenMax.min.js'></script>
            <script type="text/javascript" src="js/index.js"></script> -->
            
        </head>
        <body>
            <header class="header">
                <div class="logo">
                    <img src="images/QQ图片20191129104345.jpg" class="xwcms" onmouseover="this.src='images/QQ图片20191129104345.jpg'"
                     onmouseout="this.src='images/QQ图片20191129104345.jpg'" />
                    <div class="logo-text">Aime-toi<span style="color:#FF6347;font-size:1.4em;">'S</span>个人博客</div>
                </div>
                <div class="right-block">
                    <div class="wow pulse bg-yellow" data-wow-delay="0.1s">人生,</div>
                    <div class="wow rollIn bg-red" data-wow-iteration="1" data-wow-duration="0.5s">就像一盒巧克力,</div>
                    <div class="wow bounceInRight bg-blue">你永远不知道下一块会是什么味道!</div>
                    <div class="wow bounceInRight bg-blue">---《阿甘正传》</div>
                </div>
            </header>
            <!--   -->
    
            <!--   -->
            <div class="clear">
            </div>
            <nav id="nav" class="nav-wrap">
                <ul class="clearfix">
                    <li class="menuactive">
                        <a href="#">
                            首页
                        </a>
                    </li>
    
                    <li>
                        <a href="Program/index.html">
                            编程专栏
                        </a>
                    </li>
    
                    <li>
                        <a href="HTML/index.html">
                            HTML专栏
                        </a>
                    </li>
    
                    <li>
                        <a href="Life/index.html">
                            生活专栏
                        </a>
                    </li>
    
                    <li id="navEnd">
                        <a href="Personal/index.html">
                            个人中心
                        </a>
                    </li>
                    
                    <li id="navEnd">
                        <a href="map.html">
                            网站地图
                        </a>
                    </li>
                    
                    <div class="Alert" style="width: 400px; height:100%;float: right;">
                        <div class="Alert_text" style="margin: 10px;color: black;text-align: center;font-size: 17px;">
                            <strong><a href="https://aimetoi.github.io" target="_blank">本网页部分内容托管到了Github,请联网访问!</a></strong>
                        </div>
                    </div>
                    
                </ul>
            </nav>
    
            <section class="banner">
                <div class="youtiy_slider">
                    <div class="bd">
                        <ul>
                            <li><a target="_blank" href="http://aimetoi.github.io"><img src="plugin/SuperSlide/images/1.jpg" /></a></li>
                            <li><a target="_blank" href="http://aimetoi.github.io"><img src="plugin/SuperSlide/images/2.jpg" /></a></li>
                            <li><a target="_blank" href="http://aimetoi.github.io"><img src="plugin/SuperSlide/images/3.jpg" /></a></li>
                        </ul>
                    </div>
                    <div class="hd">
                        <ul>
                        </ul>
                    </div>
                    <div class="pnBtn prev"><span class="blackBg"></span> <a class="arrow" href="javascript:void(0)"></a></div>
                    <div class="pnBtn next"><span class="blackBg"></span> <a class="arrow" href="javascript:void(0)"></a></div>
                </div>
            </section>
    
            <section class="container-content">
                <div class="article-list">
                    <div class="item">
                        <div class="art-img">
                            <img src="images/CStuSystem.jpg" />
                        </div>
                        <div class="title">
                            <a href="Program/CStuSystem.html">C语言学生信息管理系统</a>
                        </div>
                        <div class="base-info">
                            <ul>
                                <li>
                                    <img src="images/QQ图片20191129104345.jpg" class="xwcms2" />
                                </li>
                                <li>
                                    <a href="http://aimetoi.github.io">Aime-toi</a>
                                </li>
                                <li>
                                    发布时间: 2019-12-02 12:00
                                </li>
                            </ul>
                        </div>
                        <div class="desc">
                            前文是楼主的一些经历,给大家分享一下,希望能够帮到大家。文中有不足的地方还请指出,我们一同探讨,或者可以直接看正文。
                        </div>
                    </div>
    
    
                    <div class="item">
                        <div class="art-img">
                            <img src="images/CSS_30_1.jpg" />
                        </div>
                        <div class="title">
                            <a href="HTML/CSS_30_1.html">熟记30个CSS选择器(上)</a>
                        </div>
                        <div class="base-info">
                            <ul>
                                <li>
                                    <img src="images/QQ图片20191129104345.jpg" class="xwcms2" />
                                </li>
                                <li>
                                    <a href="http://aimetoi.github.io">Aime-toi</a>
                                </li>
                                <li>
                                    发布时间: 2019-12-02 12:00
                                </li>
                            </ul>
                        </div>
                        <div class="desc">
                            CSS的魅力就是让我们前端工程师像设计师一样进行网页的设计,我们能轻而易举的改变颜色、布局、制作出漂亮的影音效果等等。
                        </div>
                    </div>
    
    
                    <div class="item">
                        <div class="art-img">
                            <img src="images/CSS_30_2.jpg" />
                        </div>
                        <div class="title">
                            <a href="HTML/CSS_30_2.html">熟记30个CSS选择器(下)</a>
                        </div>
                        <div class="base-info">
                            <ul>
                                <li>
                                    <img src="images/QQ图片20191129104345.jpg" class="xwcms2" />
                                </li>
                                <li>
                                    <a href="http://aimetoi.github.io">Aime-toi</a>
                                </li>
                                <li>
                                    发布时间: 2019-12-02 12:00
                                </li>
                            </ul>
                        </div>
                        <div class="desc">
                            CSS的魅力就是让我们前端工程师像设计师一样进行网页的设计,我们能轻而易举的改变颜色、布局、制作出漂亮的影音效果等等。
                        </div>
                    </div>
    
    
                    <div class="item">
                        <div class="art-img">
                            <img src="images/Self.jpg" />
                        </div>
                        <div class="title">
                            <a href="Life/Self.html">你是怎么变自律的?</a>
                        </div>
                        <div class="base-info">
                            <ul>
                                <li>
                                    <img src="images/QQ图片20191129104345.jpg" class="xwcms2" />
                                </li>
                                <li>
                                    <a href="http://aimetoi.github.io">Aime-toi</a>
                                </li>
                                <li>
                                    发布时间: 2019-12-02 12:00
                                </li>
                            </ul>
                        </div>
                        <div class="desc">
                            普遍认为,当我们能抵挡住诱惑并能够自我约束时,称之为自律,但当我们能够做到这些时,真的就是自律吗?
                        </div>
                    </div>
    
    
                    <div class="item">
                        <div class="art-img">
                            <img src="images/Website_18.jpg" />
                        </div>
                        <div class="title">
                            <a href="HTML/Website_18.html">私藏的18个黑科技网站</a>
                        </div>
                        <div class="base-info">
                            <ul>
                                <li>
                                    <img src="images/QQ图片20191129104345.jpg" class="xwcms2" />
                                </li>
                                <li>
                                    <a href="http://aimetoi.github.io">Aime-toi</a>
                                </li>
                                <li>
                                    发布时间: 2019-12-02 12:00
                                </li>
                            </ul>
                        </div>
                        <div class="desc">
                            要说现在啊,我们使用频率最高的设备是啥,那一定是手机啊,几乎不离身,没了它,生活就索然无味啊,除了手机,对我来说,排在第二位的就是电脑了。
                        </div>
                    </div>
    
    
                    <div class="item">
                        <div class="art-img">
                            <img src="images/Java.jpg" />
                        </div>
                        <div class="title">
                            <a href="Program/Java.html">为什么一些人瞧不起Java等其他语言</a>
                        </div>
                        <div class="base-info">
                            <ul>
                                <li>
                                    <img src="images/QQ图片20191129104345.jpg" class="xwcms2" />
                                </li>
                                <li>
                                    <a href="http://aimetoi.github.io">Aime-toi</a>
                                </li>
                                <li>
                                    发布时间: 2019-12-02 12:00
                                </li>
                            </ul>
                        </div>
                        <div class="desc">
                            编程是信仰!信仰是不兼容的!!当然,上边那些其实都是半桶水。真正的高手是万物皆为我所用一切皆可信手拈来的。
                        </div>
                    </div>
    
    
                    <div class="item">
                        <div class="art-img">
                            <img src="images/Program_Habit.jpg" />
                        </div>
                        <div class="title">
                            <a href="HTML/Program_Habit.html">6个编程好习惯</a>
                        </div>
                        <div class="base-info">
                            <ul>
                                <li>
                                    <img src="images/QQ图片20191129104345.jpg" class="xwcms2" />
                                </li>
                                <li>
                                    <a href="http://aimetoi.github.io">Aime-toi</a>
                                </li>
                                <li>
                                    发布时间: 2019-12-02 12:00
                                </li>
                            </ul>
                        </div>
                        <div class="desc">
                            是不是感觉自接触编程以来,每天都在努力的学习,但是学习的速度还是跟不上别人的速度?不是你不够努力,只是别人的方法更高效!
                        </div>
                    </div>
    
    
                    <div class="item">
                        <div class="art-img">
                            <img src="images/C++.jpg" />
                        </div>
                        <div class="title">
                            <a href="Program/C++.html">感受C++的痛楚</a>
                        </div>
                        <div class="base-info">
                            <ul>
                                <li>
                                    <img src="images/QQ图片20191129104345.jpg" class="xwcms2" />
                                </li>
                                <li>
                                    <a href="http://aimetoi.github.io">Aime-toi</a>
                                </li>
                                <li>
                                    发布时间: 2019-12-02 12:00
                                </li>
                            </ul>
                        </div>
                        <div class="desc">
                            当你做了几年c++程序员后,很自信地觉得自己已经掌握了这阶段,当重新对这门语言来个彻底大扫除的时候发现,又有新的语法出现。
                        </div>
                    </div>
    
    
                    <div class="item">
                        <div class="art-img">
                            <img src="images/Health.jpg" />
                        </div>
                        <div class="title">
                            <a href="Life/Health.html">健康生物钟</a>
                        </div>
                        <div class="base-info">
                            <ul>
                                <li>
                                    <img src="images/QQ图片20191129104345.jpg" class="xwcms2" />
                                </li>
                                <li>
                                    <a href="http://aimetoi.github.io">Aime-toi</a>
                                </li>
                                <li>
                                    发布时间: 2019-12-02 12:00
                                </li>
                            </ul>
                        </div>
                        <div class="desc">
                            你是不是曾经也很纳闷,为什么你能坚持到凌晨两点,而你的朋友晚上十点就挺不住了吗?
                        </div>
                    </div>
    
    
                    <div class="item">
                        <div class="art-img">
                            <img src="images/Programmer.jpg" />
                        </div>
                        <div class="title">
                            <a href="Life/Programmer.html">程序员的自我修养</a>
                        </div>
                        <div class="base-info">
                            <ul>
                                <li>
                                    <img src="images/QQ图片20191129104345.jpg" class="xwcms2" />
                                </li>
                                <li>
                                    <a href="http://aimetoi.github.io">Aime-toi</a>
                                </li>
                                <li>
                                    发布时间: 2019-12-02 12:00
                                </li>
                            </ul>
                        </div>
                        <div class="desc">
                            想必,你们一定看过很多关于程序员的自我修养的文章。
                        </div>
                    </div>
                </div>
    
    
                <div class="right-fun">
                    <div class="model">
                        <div class="title">站内搜索</div>
                        <div class="content">
                            <div class="bar7">
                                <form>
                                    <input type="text" placeholder="请输入关键词">
                                    <button type="submit"></button>
                                </form>
                            </div>
                        </div>
                    </div>
    
                    <div class="model">
                        <div class="title">快捷菜单</div>
                        <div class="menu">
                            <span><a href="Personal/Diary.html">个人日记</a></span> 
                            <span><a href="Personal/Contact.html">联系我</a></span> 
                            <span><a href="Personal/About.html">关于我</a></span>
                            <span><a href="Personal/Msg.html">给我留言</a></span>
                        </div>
                    </div>
    
                    <div class="model recommend">
                        <div class="title">热门推荐</div>
                        <div class="content">
                            <p>
                                <a href="Program/CStuSystem.html">C语言学生信息管理系统</a>
                            </p>
                            <p>
                                <a href="Life/Self.html">你是怎么变自律的?</a>
                            </p>
                            <p>
                                <a href="HTML/Website_18.html">私藏的18个黑科技网站</a>
                            </p>
                            <p>
                                <a href="Program/Java.html">为什么一些人瞧不起Java等其他语言</a>
                            </p>
                            <p>
                                <a href="Program/C++.html">感受C++的痛楚</a>
                            </p>
                        </div>
                    </div>
                </div>
            </section>
    
    
            <div class="clear">
            </div>
    
            <footer class="footer">
                <div class="footer_content">
                    <h2>Aime-toi<span style="color:#FF6347;">'S</span> 个人博客</h2>
                    <p>由<a href="http://aimetoi.github.io" target="_blank" style="color:white;text-decoration:underline;">沈栉博客</a>提供技术支持</p>
                    <p>© 2013-2019 aimetoi.github.io, all rights reserved</p>
                </div>
            </footer>
    
    
            <script src="plugin/SuperSlide/js/jquery.min.js"></script>
            <!-- <script src="js/jquery-1.12.4.min.js"></script> -->
            <script src="plugin/SuperSlide/js/superslide.2.1.js"></script>
            <script type="text/javascript">
                jQuery(".youtiy_slider .bd li").first().before(jQuery(".youtiy_slider .bd li").last());
                jQuery(".youtiy_slider").hover(function() {
                    jQuery(this).find(".arrow").stop(true, true).fadeIn(300)
                }, function() {
                    jQuery(this).find(".arrow").fadeOut(300)
                });
                jQuery(".youtiy_slider").slide({
                    titCell: ".hd ul",
                    mainCell: ".bd ul",
                    effect: "leftLoop",
                    autoPlay: true,
                    vis: 3,
                    autoPage: true,
                    trigger: "mouseover"
                });
    
    
                $(document).ready(function(e) {
                    var offset = 890;
                    $(window).on('scroll', function() {
                        if ($(this).scrollTop() > offset) {
                            $('.recommend').css('position', 'fixed');
                            $('.recommend').css('top', '0px');
                        } else {
                            $('.recommend').css('position', '');
                        }
                    });
                });
            </script>
    
    
        </body>
    </html>

    想要全部代码请扫描下方二维码,关注公众号:木节学编程,后台回复“html作业”即可获得。

    更多干货

    【干货分享】自学编程的小伙伴可以前往我的 Github 仓库(持续更新中...):

    📕【Java学习指南】从java基础、计算机基础到后端常用框架的教程,涵盖后端大部分必备知识(学习指南 + 技术文章 + 资源分享)

    Github仓库地址(来个Star吧~):https://github.com/MujieJava/JavaStudy

    展开全文
  • 网页设计期末作品

    千次阅读 多人点赞 2021-01-07 21:02:15
    网页设计作品 使用Dreamweaver设计九个页面,是大一时的期末作业作品,供大家参考。 作品源码文件可以在资源中下载!!! 1.index.html(首页) 主页(index):利用框架、超级链接、表格、css、插入特殊符号、时间等...

    网页设计作品

    使用Dreamweaver设计九个页面,是大一时的期末作业作品,供大家参考。
    作品源码文件可以在资源中下载!!!

    百度网盘链接
    链接:https://pan.baidu.com/s/1DLmmkJTfe2fx4gvPG6auzA
    提取码:oeeq

    1.index.html(首页)

    在这里插入图片描述
    主页(index):利用框架、超级链接、表格、css、插入特殊符号、时间等功能制作而成,并且插入了音频。

    2.aboutEason.html(关于奕迅)

    在这里插入图片描述
    关于奕迅(about Eason):利用了Spry菜单栏作为导航栏,其他部分主要利用了AP Div。

    3.music.html(热门音乐)

    在这里插入图片描述
    热门歌曲(music):上面四幅图片绘制了矩形热点,四幅图片对应的四首歌处添加了行为:隐藏-显示文本。

    4.photo.html(精彩图册)

    在这里插入图片描述
    精彩图册(photo):主要利用AP Div固定图片,利用超级链接返回主页。

    5.m2.html(演艺经历)在这里插入图片描述

    演艺经历(m2)前两张图片使用了鼠标经过图片,后两张图片使用了行为中的交换图像功能。

    6.family.html(家庭生活)

    在这里插入图片描述
    家庭生活(family):右侧两幅图片应用了行为效果,其他部分利用了AP Div、表格。

    7.introduce.html(自我介绍)

    在这里插入图片描述
    网页说明(explain):此页修改了背景图像,使用代码使图片平铺。

    8.explain.html(网页说明)

    在这里插入图片描述

    9.question.html(调查问卷)

    在这里插入图片描述
    问卷调查(question):利用了框架、表单、Spry表单、AP Div、CSS样式、“提交”两字处利用了行为。

    展开全文
  • 网页设计作业简单的个人网页设计

    热门讨论 2009-12-03 13:52:01
    简单的个人网页设计简单的个人网页设计简单的个人网页设计简单的个人网页设计简单的个人网页设计简单的个人网页设计简单的个人网页设计简单的个人网页设计
  • 大学生网页设计个人主页网站模板采用DIV CSS布局制作,网页作品共4个页面,包括个人介绍(文字页面)、我的作品(图片列表)、个人技能(图文页面)、在线留言(表单页面)CSS样式方面网页整体采用左右布局结构,...

    静态HTML个人主页网页作品制作

    制作介绍

    网页设计个人主页网站模板采用DIV CSS布局制作,网页作品共4个页面,包括个人介绍(文字页面)、我的作品(图片列表)、个人技能(图文页面)、在线留言(表单页面)CSS样式方面网页整体采用左右布局结构,制作了网页背景图片,左侧导航区域每个导航背景色不同,导航四个背景色与页面背景呼应。

    内容修改

    网页代码采用基础水平DIV 布局制作,可使用Dreamweaver、HBuilder、Notepad++等任意HTML软件编辑修改内容。

    作品演示

    个人网页作品
    个人主页模板
    个人网站模板
    个人主页成品

    代码演示

    代码说明:以下仅展示首页部分代码供参考

    <div class="menu">
        <ul>
        <li class="menua"><a href="index.html">个人介绍</a></li>
        <li class="menub"><a href="work.html">我的作品</a></li>
        <li class="menuc"><a href="skill.html">个人技能</a></li>
    	<li class="menud"><a href="message.html">在线留言</a></li>
        </ul>
    	</div>
        <div class="right">
    	<p> 
    		<strong>关于</strong><br>
    		姓名:<br>
    		籍贯:<br>
    		邮箱:<br>
    		寻找自我,树立自我,相信自我。迷茫时不必祈求神灵,忧愁时不必寄情于深邃的夜空,最好的依靠自我。
    	</p>
    	</div>
    

    作品源地址

    stu-works.com/html/geren/336.html

    展开全文
  • 非常不错的网页设计思想学习,网页学习!网站布局,前台设计.
  • 网页设计课程设计报告

    万次阅读 多人点赞 2019-03-01 21:45:11
    学号 课 程 设 计 课程名称 网页设计 题 目 鑫晨之家特效网站设计 专 业 软件工程 ...

    学号

     


     

     

     

     

     

     

     

    课    程   设   计

     

    课程名称    网页设计   

                      

     

    题       目

        鑫晨之家特效网站设计    

    专       业

             软件工程               

    班       级

             1173班             

    姓       名

                                        

    成       绩

    _____________________________

    指 导 老 师

                                                      

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

                 2019 1  6日至 2019  1  13 

    武汉华夏理工学院信息工程学院

     

    课 程 设 计 任 务 书

     

    课程名称:网页设计                     指导教师:汪汝  

    班级名称: 软件1173、1174班           开课院、系:计算机与网络工程系  

     

    一、课程设计目的与任务

    网页设计是软件专业的一门专业必修课。网页设计课程设计可以充分弥补课堂教学和实验中知识深度和广度有限的不足,更好地帮助学生系统地掌握网页设计课程的主要内容。通过课程设计的综合训练,能培养学生实际分析问题、编程和动手的能力,帮助学生系统掌握网页设计课程的主要内容,更好地完成教学任务。为后续课程打好基础。

    要求学生根据所学的网页设计的相关知识,能够针对一个具体的系统,进行需求分析,总体设计、详细设计、编码、测试等,完成题目要求的功能。本课程设计是设计企业网站主页。

    二、课程设计的内容与基本要求

    学生根据所学的网页设计的知识,能够针对企业网页,进行系统的需求分析、系统设计、编码及测试,系统必须实现以下功能:

    1. 企业LOGO、网站的主要栏目和概况介绍
    2. 产品介绍
    3. 图片
    4. 动画
    5. 网页除用到框架外,还使用CSS样式
    6. 网页美观、页面内容丰富

    三、学时分配进度安排

    序号

    设计内容

    所用时间

    1

    下发任务书,集中讲解课程设计原理与方法。系统需求分析、架构及界面设计

     

    1天

    2

    网页设计

    1天

    3

    网页设计

    1天

    4

    调试及撰写报告

    1天

    5

    答辩

    1天

    合    计

    1周

    四、课程设计考核及评分标准

    1.设计报告要求

    课程设计报告要求逻辑清晰、层次分明、书写整洁。格式包括标题、提要、正文(包括需求分析,总体设计、详细设计、调试分析、心得、答辩、成绩评定。)附录(程序清单)。设计报告须每人一份,独立完成。

    2.评分标准

    评分依据

    评分成绩

    1、学习态度认真、遵守纪律

    10

    2、设计分析合理性

    10

    3、设计方案正确性、可行性

    20

    4、设计结果正确性

    30

    5、设计报告的规范性

    10

    6、实践环节的独立性与主动性

    10

    7、设计验收

    10

    总分

    100分

    注:成绩等级:优(90分—100分)、良(80分—89分)、中(70分—79分)、及格(60分—69分)、60分以下为不及格。

    五、指导时间

    周次

    星期一

    星期二

    星期三

    星期四

    星期五

    第18周

    第1-4节

     

    第3-6节

     

    第3-4节

    地点

    现教221

     

    现教221

     

    现教221

                                            

     

     执笔:          日期:2018-12-24

     审阅:            日期:       

     

     

     

     

     

     

     

     

      

    1 设计题目 1

    2 开发环境 1

    3 开发工具 1

    4 完成时间 1

    5 设计思想 1

    5.1 网页设计思想 1

    5.2 设计方案 2

    6 设计过程及设计步骤 2

    6.1  网页结构设计 2

    6.2  CSS样式设计 3

    6.3  爱心飘落效果设计 4

    6.4  背景切换效果设计 5

    6.5  轮播图效果设计 7

    6.6  网页整合、填充以及整顿 8

    7 测试运行 9

    8 评价与修订 9

    9设计体会 10

     

     

    参 考 文 献 11

    附  录 12

    致  谢 25

    课程设计成绩评定表 26

     

     

     

     

     

     

     

    1 设计题目

    鑫晨之家特效网站设计(正文宋体五号,1.25倍行距)

    2 开发环境

    硬件环境:微机系列,内存在1G以上,软件环境:Microsoft Windows 10

    3 开发工具

    Dreamweaver8

    4 完成时间

    2019.1.6----2019.1.13

    5 设计思想

    5.1 网页设计思想

    网页设计由三大部分组成,分别为HTML超文本标记语言、CSS层叠样式表和JavaScript脚本语言。其中HTML主要做整个网页的基本架构,CSS用于为网页文档中的元素添加各类样式,给网页添加色彩,而JavaScript主要是给网页的页面添加动态效果和功能,从而实现网页的各种效果。

    而在本次网页设计也将会用到这三种语言实现整个网页的效果。在设计时先将整个网页的框架搭建起来,然后再用具体的图片和文字以及超链接代替结构中的内容,然后给设计的内容框架添加CSS样式效果,给网页添加色彩。大致样式设置后在用JavaScript结合框架和样式给网页设置动态效果。最后再整顿整个网页的框架、样式以及动态效果,使得网页美观,特效更加明显。

    5.2 设计方案

    首先用HTML写出网页的基本框架,其中大致需要用到HTML5新增文档结构标签的页眉标签<header>、导航标签<nav>、书标签<section>、文章标签<article>、侧栏标签<aside>、页脚标签<footer>,这几个标签将主要构造出网页的大致框架结构,另外还要用一些基本标签来完善框架的内容设计。比如添加添加一些段落标签、超链接标签、容器标签、以及图像标签和列表标签。

    接下来利用CSS样式来修饰以上标签,在修饰是需要用到适合和元素选择器来进行更好的控制元素的样式。在设计时,背景用图片代替,并设置大小属性为cover覆盖整个网页,网页的其它部分也设置一些颜色,但为了既能够显示它们的颜色,又能显示出背景图片的效果,所以在设置颜色时需要用能够设置透明的rgba()样式来设置颜色的效果。

    样式基本设计好之后,然后就是设计网站的一些动态效果,这时需要用到JavaScript脚本语言,其中会运用到jQuery模板来简化代码的实现,以便更好更有效的让网页多实现几个动态效果。主要效果将包括背景切换效果、爱心飘落效果、图片轮播效果和短视频播放效果。设计时需要结合CSS的样式元素进行合理的搭配。

    最后来补充网页的具体内容和整理网页的整个效果,主要是填充各个模块的标题、网站说明和菜单栏以及其它空余部分的空间,尽量让它显得不那么的单调。全部内容填充好之后再进行整顿整个网页的效果,使其位置更加的合适以及颜色更加的搭配。(为了不破坏代码,避免自己的逻辑跟不上,每个效果模块可以单独设计,最后在合理的整顿合并到一个网页中。)

    6 设计过程及设计步骤

    6.1  网页结构设计

    1.打开Dreamweaver8软件,新建一个HTML文件,修改头文件里面的编码、标题和去掉多余的内容,并调整好格式。

    2.在body里面设计网页结构,先写个大致的框架头部用一个<header>页眉标签,接下来用一个<div>标签来包裹下面的所有内容。然后在<div>标签里面依次放入<nav>导航标签、<aside>做侧栏标签、<section>节标签、<aside>右侧栏标签和<footer>页脚标签来制作<dev>里面空间的框架。其中导航标签将放在最上面当作菜单,接下来一层中间是节标签将是正文内容,两边是用两个侧栏标签来装左右两边侧栏的内容。

    3.进一步往中间层深入构造下一级框架。先在导航栏里面放多个<a>超链接标签来当菜单目录,接下来在两个侧栏标签里面各自都放一个字体标签和多个段落标签来当侧栏内容。然后在节标签里面放两个文章标签来分两段来放中间正文,并在两个文章标签里面都依次页眉标签、段落标签和页脚标签,进行再次分层。最后分别在页眉标签和页脚标签里面添加字体标签。

    6.2  CSS样式设计

    1.在HTML文本的head头标签里面添加<style>标签来放置CSS样式,然后把所有的内边距和外边距设置为0。

    2.设置body标签的背景颜色,最大宽度为900px,border边框为solid和边框颜色以及内部字体颜色。

    3.设置header标签背景颜色和字体颜色,display设置为把block块级元素,文本居中。

    4.设置各级标题标签的字体大小和文本居中。

    5.设置导航nav标签为块级元素,宽度相对为100%,浮动为左浮动,文本居中,设置颜色,相对外部标签顶部和底部都为20px。

    6.设置nav a:link和nav a:visited都为内联元素,设置它们的颜色,内边距10px,外边距5px,下边框3px,实线。并设置字体为粗字体。

    7.设置nav a:hover的背景颜色和字体颜色。nav h3外边距15。

    8.设置div的id=container并设置它的背景颜色。

    9.设置section为块级元素,宽度相对为60%,左浮动。

    10.设置article为块级元素,设置他的颜色以及外边距和内边框都为10px。

    11.设置article里面的header和footer的内边框都为5px。article的h1大小设置为18px。

    12.aside设置为块级元素,宽度相对为20%,左浮动。

    13.aside的h3设置外边距15px。aside p外边距15px,字体为加宽。

    14.footer设置为块级元素,两侧都不允许浮动,并设置它的背景颜色和字体颜色,文本居中,内边距为15px。

    15.footer h2 字体大小设置为14px。并设置它的颜色。设置a的颜色和a link文本下划线为无。

    HTML和CSS结合后的效果如图一显示。

          

                         图1  HTML+CSS网页设计效果

    6.3  爱心飘落效果设计

    1.新建一个HTML文本,在body里面写两个div标签,并设置它们的class分别为left和right。

    2.在head标签里添加style标签在里面设置body里面的div样式。

    3.设置left个right都为绝对定位,设置它们的绝对定位都为left 0xp top 0px 宽度为100px,高度为160px,背景颜色设置为红色,圆角属性border-raduis设置为(50px 50px 0px 0px),然后设置left的旋转角度为逆时针45度。right的旋转角度为顺时针45。这时两个div容器合在一起看起来就合成了一个完整的爱心。

    4.优化代码,在上面可以知道,两个div容器除了旋转角度的属性不一样外,其他的属性都是一样的,所以为了避免这么多的重复代码出现,可以吧这些重复的喝到一起写在一个类选择器中让两个容器共同使用它,所以可以用一个类选择器去同时引导另外两个选择器使用,为了结合后面需要用到的jQuery模板js代码,我这里的引导类选择器用snowfall-flakes作为类名,另外两个被领导的结合领导类的名字分别写为snowfall-flakes:before和snowfall-flakes:after。

    5.再将snowfall-flakes的属性设置为相对定位,高度和宽度都设置为20px,外边距设置为50px和auto。然后将之前left和right中相同代码部分放在snowfall-flakes:before,.snowfall-flakes:after中不相同的那一行代码也分别放在snowfall-flakes:before和snowfall-flakes:after中,然后注释之前的left和right代码。

    6.在body中写js代码,先将需要用到的两个jQuery模板库文件放到与该HTML文件的同目录里面的js文件夹中,然后在body标签中写入<script src="js/jquery-1.2.6.min.js"> </script>和<script src="js/snowfall.jquery.js"></script>两行代码吧这两个模板库引入带HTML中,然后写个script标签,在标签中写入$(document).snowfall({flakeCount : 200,maxSpeed : 5});这一行代码。

    7.最后改一下爱心的大小,把整体的一些与爱心相关的大小代码成倍数的减小,然后可以吧之前写的两个div删除,并在body的CSS样式里面添加一张背景图片,设置图片为平铺,外边距为0。

    最后爱心飘落的特效就出来了,其效果如图2,可以通过写的那行js代码来改变爱心飘落的数量和飘落的速度。

                                   图2  爱心飘落特效

    6.4  背景切换效果设计

    1.找16张图片,并且将这十六张片都按一定比例变小,大图片命名为1到16.jpg,小图片命名为1-1到1-16jpg,然后再制作一张图片做一个按钮(用来显示和关闭切换背景时的那些需要切换的图片),并将这些图片放在与HTML文件同目录下的images文件夹中。

    2.新建一个HTML文件,在body标签中写一个div标签设置它的id=img-wrap,然后在div标签包含一个ul无序列表标签,设置它的class=list,然后再ul标签里面包含16个li标签,设置它们的class=item,data-src的值分别等于images/(1到16).jpg(用来在js代码中方便切换背景图片寻找到对应的图片),然后再这些li标签里面分别包含img标签,并分别设置它们的src属性的值为images/(1-1到16-16).jpg图片路径。然后再第一个div标签的下面再写一个div标签设置id=tab-btn。

    3.在head标签里添加style标签用来添加CSS样式,各标签样式设置如下:

    .设置所有标签的内边距和外边距都为0。

    .设置body标签的背景图片为images/1.jpg,并且大小设置为覆盖整个网页页面。

    .设置img-wrap的宽度为相对100%,高度为150px,背景颜色为黑色,透明度为0.46。这个div容器是用来放置选择可选切换背景的图片的。

    .设置list的列表值类型为无,宽度为1000px,高度为100px,外边距为0 auto。

    .设置item为左浮动(使可选图片横排排列),外边距为0px 15px。

    .设置itm img的宽度为95px,高度为60px。

    .设置tab-btn为绝对定位,位置定位到网页的右上角,高度为50px背景图片为images/upseek.png,光标设置为pointer。(这个是一个用来显示和隐藏可选图片区域的按钮)。

    tab-btn:hover 当鼠标放在按钮上时,按钮向上移动64px,鼠标离开时回到原位置。

    4.写js代码,同样将上一个爱心飘落效果中的jQuery模板引入到该HTML代码中。然后写script标签,在里面写下面几行js代码

    $("#tab-btn").click(function(){

    $("#img-wrap").slideToggle();

    });

    //代码表示鼠标点击对应图片后寻找到对应图片的地址,然后将背景图片的地址换成点击图片得到的对应地址达到切换背景的效果。

    $(".item").click(function(){

    var uri = $(this).attr("data-src");

    $("body").css({

    "background-image":"url("+uri+")"

    });

    });

    设计效果如图3和图4所示:

                

                            图3  背景切换效果1

                

                            图4  背景切换效果2

    6.5  轮播图效果设计

    1.新建一个HTML文件,将它保存带到与背景切换的HTML同一个目录下,在body标签中写一个div标签设置它的id=lunbo,然后在div标签包含一个ul无序列表标签,设置它的id=shidian_img,然后再ul标签里面包含16个li标签,设置它们的class=img_lunbo,然后再这些li标签里面分别包含img标签,设置class=img_lunbo,并分别设置它们的src属性的值为images/(1到16).jpg图片路径。

    2.在head标签里添加style标签用来添加CSS样式,各标签样式设置如下:

    .设置全部背景颜色为绿色。

    .设置lunbo的高度和宽度都为500px,位置为left 100px,top 50px,关系型定位。

    .设置ul宽度和高度都相对为100%,位置为左上角,关系型定位。

    .设置li_lunbo宽度和高度都相对为100%,位置为左上角,绝对型定位。

    .设置img_lunbo宽度相对100%,高度为10px。

    3.写js代码,写script标签,在body里面写如下面js代码

               imgs=document.getElementById("shidian_img").children; //获取所以图片 并且存储到数组imgs数组里

               for(i =0; i<imgs.length;i++){                                

                      imgs[i].style.display="none";             

                }                //循环获取到imgs里面的元素,并且把它们隐藏设置为none

              imgs[index].style.display ="block";   //当所有元素都隐藏了,在显示当前index所指的图片。 

              index ++;

              if(index >= imgs.length){  

                   index=0;                    

                }      //判断index是否大于imgs的长度,等于imgs的长度后在重新赋予它初始值0;           

            }

      timer=setInterval(show_img,1000); //建立周期定时器。

    设计完成后的效果如图5和图6所示。

                     

                             图5  轮播图效果1

                  

                             图6  轮播图效果2

    6.6  网页整合、填充以及整顿

    1.将以上三个特效整合到原网页的框架中:

    .爱心飘落特效的代码可将CSS代码放到框架的HTML中head里面的style标签里面,js代码可放在其body里面的代码的最后面的script标签中。

    .背景切换效果中body里面的所有代码都可以放在框架body标签里面的最上面。将CSS样式也加入框架head里的style中,注意的是把原来框架里面的body样式和爱心飘落特效里面的body样式都去掉换成背景切换中的body样式,然后js代码也直接放入script标签中。

    .轮播图效果中body里面的所由代码放在框架里section标签里面的都一个article标签里面,但为了使得这部分的网页内容更融洽和不显得那么的单调所以在这个article标签里面在加一层aside、section,article和aside标签,而把轮播图效果中body里面的所由代码放在所添加的这一层中的section里面的article中,左右两边的aside中分别放入由ps出来的两只小象图片。然后接着把除了body样式的所有样式代码和js代码分别放入框架的style标签和script标签中。

    2.将框架里面的nav标签和左aside标签中加入一些超链接,分别进入一些常用网站以及与自己相关网站的效果。然后在右aside标签中写上一些网站的说明。最后在header标签中再加一张由ps出来的网站logo图片。

    3.网站最终效果如图7图8所示。

            

                          图7  网站最终效果1                

                

                        图8   网站最终效果2

    7 测试运行

    网站的主要功能是能够快速的进入一些常用网站和自己的一些常用网站的登陆页面。其页面的所有动态效果说明如下。

    1. 运行网页后自动运行爱心飘落特效和图片轮播特效以及短视频播放。
    2. 点击右上角的按钮可显示和隐藏背景切换的可选图片区域,点击可选图片区域里面的图片可以网页背景切换成对应的图片。
    3. 点击由下划线的文字可进入对应的网页页面。

    8 评价与修订

    整个网页页面清晰,效果明显,去其爱心飘落特效是页面比较显眼的效果,可以吸引浏览者的眼光,它是网页页面最具有创造性和独特性的地方。还有轮播图虽然在很多网页中都能看到这种效果,但是在该网页中也比较显眼的地方,然后就是网页的顶部有一个可以切换背景的图片选择区,可以通过它切换背景,右上角有一个按钮可以将这个选择区域显示和隐藏,这使得网页显得更加的高大上,更有独特性。网页正文区域的下方有一些三个短视频,是完成的项目小游戏录屏,这让网页显得更加的新颖,内容丰满。另外网页有说明,也有一些常用网站的入口,这可以更加方便客户进入这些网站。页面中每个区域都有不同的颜色,

    不足的是网页内容不够丰满,有大片的空白区域显得有些浪费空间,还有就是网页单配颜色也不够美观,字体也不是很显眼和美观。这些都是美中不足的地方。

    网页的整个效果还是比较可以的,但需要使它更加美观和页面丰满,还需继续学习和努力。

    9设计体会

     

               

     

     

     

     参 考 文 献 

    [1] 1] HTML5网页前端设计,周文洁编著,北京:清华大学出版社,2018

    [2] HTML5网页前端设计实战,周文洁编著,北京:清华大学出版社,2018

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

    附  录

    <!DOCTYPE>

    <html>

    <head>

    <meta charset="utf_8" />

    <title>鑫晨之家特效总站</title>

    <style>

    *{

    margin: 0;

    padding: 0;

    }

    body{

     

    background: url("images/1.jpg");

    background-size: cover;

    }

    #img-wrap{

    width: 100%;

    height: 150px;

    background-color: rgba(0,0,0,0.46);

    padding-top: 13px;

    }

    .list{

    list-style-type: none;

    width: 1000px;

    height: 100px;

    margin: 0 auto;

    }

    .item {

    float: left;

    margin: 5 15px;

    }

    .item img{

    width: 95px;

    height: 60px;

    }

    .item img:hover{

    color: #FF0099;

    }

    #tab-btn{

    position: absolute;

    top: 0;

    right: 0;

    width: 50px;

    height: 50px;

    background-image: url("images/upseek.png");

    cursor: pointer;

    }

    #tab-btn:hover{

    background-position-y: -64px;

    }

    .snowfall-flakes1{

    position: relative;/* 相对定位 监管绝对定位 */

    width: 20px;

    height: 20px;

    margin: 50px auto;

    /*background-color: #096;*/

    }

    .snowfall-flakes:before,.snowfall-flakes:after{/* ,并列 和 把相同的内容并到一起 */

    content: "";/* 激活伪元素的必要因素 */

    position: absolute;/* css重点和难点 绝对定位 */

    left: 0;

    top: 0;         /* 定位一般写到上面 */

     

    width: 5px;

    height: 8px;

    background: rgba(255,0,0,0.66);

    border-radius: 2.5px 2.5px 0px 0px;/* 圆角属性 */

    }

    .snowfall-flakes:before{

    transform: rotate(-45deg);/* css3变换属性 旋转 deg角度 */

    }

    .snowfall-flakes:after{

    transform: translateX(4.3px) rotate(45deg);/*  css3位移 css3变换属性 旋转 deg角度 */

    }

     

    header {

    background-color: rgba(210,50,50,0.46);

    display: block;

    color: #2178D8;

    text-align: center;

    }

    h1{

    font-size: 72px;

    margin: 0px;

    }

    h2{

    font-size: 24px;

    margin: 0px;

    text-align: center;

    }

    h3{

    font-size: 18px;

    margin: 0px;

    text-align: center;

    }

    nav{

    display: block;

    width: 100%;

    float: left;

    text-align: center;

    background-color: rgba(204,204,204,0.46);

    padding-top: 20px;

    padding-bottom: 20px;

    }

    nav a:link, nav a:visited {

    display: inline;

    border-bottom: 3px solid #00FFCC;

    padding: 10px;

    text-decoration: none;

    font-weight: bold;

    margin: 5px;

    }

    nav a:hover {

    color: #CC3333;

    background-color: rgba(255,255,0,0.46);

    }

    nav h3{

    margin: 15px;

    }

    #container{

    background-color: rgba(185,74,,221,0.46);

    }

    section{

    display: block;

    width: 70%;

    float: left;

    }

    article{

    background-color: rgba(0,255,204,0.16);

    display: block;

    margin: 0px;

    padding: 0px;

    }

    article header{

    padding: 5px;

    }

    article footer{

    padding: 5px;

    }

    article h1{

    font-size: 18px;

    }

    aside{

    display: block;

    width: 15%;

    float: left;

    }

    aside h3{

    margin: 15px;

    }

    aside p{

    margin: 15px;

    font-weight: bold;

    }

    footer{

    clear: both;

    display: block;

    background-color: rgba(51,0,204,0.16);

    color: #CC99CC;

    text-align: center;

    padding: 15px;

    }

    footer h2{

    font-size: 14px;

    color: #FF66FF;

    }

    a {

    color: #FF6633;

    }

    a:hover{

    text-decoration: underline;

    }

    .x{

    width:100%; height:166px;

    }

    #lunbo{ width:340px; height:160px;position:relative;left:0px;top:0px;}/* 定义轮播图片所显示的位置*/

    .ul_lunbo{width:100%; height:100%; position:relative;left:0px;top:0px}/*//为ul标签设置所在区域有*/

    .li_lunbo{width:100%; height:100%; position:absolute; left:140px;top:0px;}/*//为li标签设置所在区域有*/

     

    .img_lunbo{ width:100%; height:166px;}/*//为图片定义大小,并且是图片重合。*/

    ` video{float:left; margin: 100px 500px;}

    </style>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>

    <body>

    <div id="img-wrap">

    <ul class="list">

    <li class="item" data-src="images/1.jpg">

    <img src="images/1-1.jpg" alt="" />

    </li>

    <li class="item" data-src="images/2.jpg">

    <img src="images/2-2.jpg" alt="" />

    </li>

    <li class="item" data-src="images/3.jpg">

    <img src="images/3-3.jpg" alt="" />

    </li>

    <li class="item" data-src="images/4.jpg">

    <img src="images/4-4.jpg" alt="" />

    </li>

    <li class="item" data-src="images/5.jpg">

    <img src="images/5-5.jpg" alt="" />

    </li>

    <li class="item" data-src="images/6.jpg">

    <img src="images/6-6.jpg" alt="" />

    </li>

    <li class="item" data-src="images/7.jpg">

    <img src="images/7-7.jpg" alt="" />

    </li>

    <li class="item" data-src="images/8.jpg">

    <img src="images/8-8.jpg" alt="" />

    </li>

    <li class="item" data-src="images/9.jpg">

    <img src="images/9-9.jpg" alt="" />

    </li>

    <li class="item" data-src="images/10.jpg">

    <img src="images/10-10.jpg" alt="" />

    </li>

    <li class="item" data-src="images/11.jpg">

    <img src="images/11-11.jpg" alt="" />

    </li>

    <li class="item" data-src="images/12.jpg">

    <img src="images/12-12.jpg" alt="" />

    </li>

    <li class="item" data-src="images/13.jpg">

    <img src="images/13-13.jpg" alt="" />

    </li>

    <li class="item" data-src="images/14.jpg">

    <img src="images/14-14.jpg" alt="" />

    </li>

    <li class="item" data-src="images/15.jpg">

    <img src="images/15-15.jpg" alt="" />

    </li>

    <li class="item" data-src="images/16.jpg">

    <img src="images/16-16.jpg" alt="" />

    </li>

    </ul>

    </div>

    <div id="tab-btn"> </div>

     

    <header>

    <h1>鑫晨之家特效总站</h1>

    </header>

    <div id="container">

    <nav>

    <a href="https://www.baidu.com" target="_blank" >百度一下</a>

    <a href="https://www.taobao.com" target="_blank">淘宝</a>

    <a href="https://www.jd.com" target="_blank">京东</a>

    <a href="http://www.cnblogs.com/" target="_blank">博客园</a>

    <a href="https://blog.csdn.net/" target="_blank">博客</a>

    <a href="https://tieba.baidu.com" target="_blank">百度贴吧</a>

    <a href="https://www.nowcoder.com/" target="_blank">牛客网</a>

    <a href="https://weibo.com" target="_blank">微博</a>

    </nav>

    <aside>

    <h3>My Style</h3>

    <a style=" padding-left:40px;" href="https://user.qzone.qq.com/1476027184/main"  target="_blank"/>我的QQ空间</a>

    <br />

    <a style=" padding-left:40px;" href="https://weibo.com/u/6336414741/home"  target="_blank"/>我的微博</a>

    <br />

    <a style=" padding-left:40px;" href="https://i.csdn.net/#/uc/profile"  target="_blank"/>我的博客</a>

    <br />

    <a style=" padding-left:40px;" href="https://mail.qq.com/cgi-bin/frame_html?sid=1_cfIUKAR72LaT5i&r=2906efc2a8beaadb651dedb5da4bedcf"  target="_blank"/>我的邮箱</a>

    <br />

    <a style=" padding-left:40px;" https://www.cnblogs.com/star147/"  target="_blank"/>我的博客园</a>

    <br />

    <a style=" padding-left:40px;" href="http://acm.hdu.edu.cn/listproblem.php?vol=1"  target="_blank"/>算法练习系统</a>

    <br />

    </aside>

    <section>

    <article>

    <header>

    <h1>我的主页</h1>

    </header>

    <aside>

    <img class="x" src="images/x1.gif" />

    </aside>

    <section>

    <article>

    <div id="lunbo">

    <ul id="shidian_img" class="ul_lunbo">

    <li class="li_lunbo">

    <img class="img_lunbo" src="images/1.jpg" />

    </li>

    <li class="li_lunbo">

    <img class="img_lunbo" src="images/2.jpg" />

    </li>

    <li class="li_lunbo">

    <img class="img_lunbo" src="images/3.jpg" />

    </li>

    <li class="li_lunbo">

    <img class="img_lunbo" src="images/4.jpg" />

    </li>

    <li class="li_lunbo">

    <img class="img_lunbo" src="images/5.jpg" />

    </li>

    <li class="li_lunbo">

    <img class="img_lunbo" src="images/6.jpg" />

    </li>

    <li class="li_lunbo">

    <img class="img_lunbo" src="images/7.jpg" />

    </li>

    <li class="li_lunbo">

    <img class="img_lunbo" src="images/8.jpg" />

    </li>

    <li class="li_lunbo">

    <img class="img_lunbo" src="images/9.jpg" />

    </li>

    <li class="li_lunbo">

    <img class="img_lunbo" src="images/10.jpg" />

    </li>

    <li class="li_lunbo">

    <img class="img_lunbo" src="images/11.jpg" />

    </li>

    <li class="li_lunbo">

    <img class="img_lunbo" src="images/12.jpg" />

    </li>

    <li class="li_lunbo">

    <img class="img_lunbo" src="images/13.jpg" />

    </li>

    <li class="li_lunbo">

    <img class="img_lunbo" src="images/14.jpg" />

    </li>

    <li class="li_lunbo">

    <img class="img_lunbo" src="images/15.jpg" />

    </li>

    <li class="li_lunbo">

    <img class="img_lunbo" src="images/16.jpg" />

    </li>

    </ul>

    </div>

    </article>

    </section>

    <aside>

    <img class="x" src="images/x2.jpg" />

    </aside>

    <footer>

    <h2>网页背景相册轮播图</h2>

    </footer>

    </article>

     

    <article>

    <header>

    <h1>我的项目</h1>

    </header>

    <video width="280" hight="250" controls autoplay>

    <source src="videos/11.mp4">

    </video>

    <video width="280" hight="250" controls autoplay>

    <source src="videos/12.mp4">

    </video>

    <video width="280" hight="250" controls autoplay>

    <source  src="videos/13.mp4">

    </video>

    <footer>

    <h2>游戏项目短视频</h2>

    </footer>

    </article>

    </section>

    <aside>

    <h3>网站说明</h3>

    <p>该网站为鑫晨公司打造的独立个人网站,网站由各种效果搭建而成,其主要功能为更加快速的进入一些常用网站,其特色为爱心飘落特效,背景图片切换以及背景相册轮播特效,其中还有自己写过的其中三个小游戏作品运行的录屏短视频。本人第一次通过独立学习查找资料尝试写出一个比较完整的网页作品,虽然美观不足,相信自己以后会更加努力的其打造出更多更加完美的网站。希望进本网站的朋友大力支持,谢谢。</p>

    </aside>

    <footer>

    <h2>精彩无限,欢乐无穷</h2>

    </footer>

    </div>

    <script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>

    <script src="js/snowfall.jquery.js"></script>

    <script type="text/javascript">

    $("#tab-btn").click(function(){

    $("#img-wrap").slideToggle();

    });

     

    $(".item").click(function(){

    var uri = $(this).attr("data-src");

    $("body").css({

    "background-image":"url("+uri+")"

    });

    });

    $(document).snowfall({flakeCount : 40,maxSpeed : 3});

    index=0;

    function show_img(){

                 imgs=document.getElementById("shidian_img").children; //获取所以图片 并且存储到数组imgs数组里

                 for(i =0; i<imgs.length;i++){                                

                          imgs[i].style.display="none";

                 

                 }                                       //循环获取到imgs里面的元素,并且把它们隐藏设置为“”none“”

                 imgs[index].style.display ="block";   //当所有元素都隐藏了,在显示当前index所指的图片。

               

                 index ++;

                 if(index >= imgs.length){

                 

                          index=0;

                                     

                          }                      //判断index是否大于imgs的长度,等于imgs的长度后在重新赋予它初始值0           

                 }

     timer=setInterval(show_img,1000); //建立周期定时器。

     

    </script>

    </body>

    </html>

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

    致  谢

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

    课程设计成绩评定表

    课程设计题目

     

    课程设计学生答辩或质疑记录:

    问题1:HTML、CSS和JavaScript的作用分别是什么?

    答:HTML主要做网页中的框架,CSS主要是渲染HTML中的标签样式,JavaScript主要是实现网页中的动态效果。

    问题2:display这个属性是做什么用的?

    答:display属性是规定元素应该生成的框的类型,此元素默认为inline,表示此元素被显示为内联元素。

    问题3:爱心飘落特效大致是如何实现的?

    答:用两个div容器通过CSS样式的设置制作成一个爱心,然后运用jQuery的JavaScript模板通过调用模板中的snowfall函数,具体的一句代码为:$(document).snowfall({flakeCount : 40,maxSpeed : 3});其中 flakeCount 参数是设置爱心飘落的数量,maxSpeed 参数是设置爱心飘落的最大速度。

    评  分  依  据

    分 值

    评分成绩

    1、学习态度认真、遵守纪律

    10

     

    2、设计分析合理性

    10

     

    3、设计方案正确性、可行性

    20

     

    4、设计结果正确性

    30

     

    5、设计报告的规范性

    10

     

    6、实践环节的独立性与主动性

    10

     

    7、设计验收

    10

     

    总 分

    100分

     

       

    最终评定等级为:

                              指导老师签字:               

     

                                                   年    月    日

     

    展开全文
  • 大学生网页设计大作业-以下5个网页设计制作作品自己任选: 1.网页制作基础大二dw作业 2.web网页大作业 3.大学生期末网页大作业-6页面的网页设计,是个人主页类型。包含了6个页面,包含视频、脚本等元素。水平不高...
  • 网页设计成品

    2016-05-27 10:25:08
    网页设计成品,采用html+css布局,是不错的学习网页设计的案例和源代码
  • 期末网页设计 作业 大学生 高中生 网页设计作业成品下载dreamweaver/frontpage网页设计制作大作业,期末考试网页作业下载。
  • 咖啡网页设计作品网页制作介绍网页首页效果网页下载方式 网页制作介绍 咖啡主题大学生网页设计作品,共10个页面,无任何复杂技术及特效,页面宽度1200px,顶部导航使用CSS制作了鼠标经过白色效果制作很简单,页面配...
  • 学生电影八佰网页设计作品制作网页介绍网页演示网页下载方式 网页介绍 电影学生网页设计作品使用DIV CSS布局制作,包含影片信息、剧情简介、角色介绍、幕后制作、观影评价 5个页面,整个作品比较完善,细节处理到位...
  • 网页设计作业

    热门讨论 2012-06-08 13:28:40
    高质量网页设计制作大作业成品免费下载。本作品使用DIV布局粉红色边框,但是一点也不娘哦!免费dreamweaver/frontpage网页制作作业成品模板下载。学生原创课程设计网页设计制作大作业成品免费下载。本网页作业为一个...
  • 学生个人网页设计作品网页介绍修改说明网页演示网页下载 网页介绍 本学生个人网页制作作品共3个页面:个人主页、兴趣爱好、在线留言。网页采用DIV CSS布局制作,主页插入了背景音乐,兴趣爱好插入了视频,在线留言...
  • 校园班级网页设计制作网页作品介绍作品首页截图网页代码预览作品来源 网页作品介绍 班级网页设计HTML静态网页设计作业使用dreamweaver制作,采用DIV+CSS布局,共5页,首页使用CSS排版比较丰富,色彩鲜明有活力。顶部...
  • 学生北京故宫旅游网页设计作品作品介绍作品演示作品下载 作品介绍 本学生网站作业成品主题为北京故宫网页设计,采用DIV CSS布局制作,共5个页面,主要内容包括故宫简介、建筑形制、建筑布局、馆藏文物、参观信息方面...
  • 网页课程设计(完整下载,包括网页设计原代码,网页设计报告),不仅利用了Javascript和VBscript,而且采用了ASP技术,满足大家动态网页设计要求,连接数据库实现动态留言功能。
  • asp网站 网页设计 网页期末作业

    热门讨论 2012-06-11 11:40:18
    asp 网页设计
  • 学生简单静态个人主页网页设计作品作品介绍知识点应用作品简介绍网页演示网页首页演示源码文件展示网页代码预览作品修改作品下载 作品介绍 知识点应用 背景音乐、背景图片、留言表单、鼠标经过 作品简介绍 学生个人...
  • 大学生个人主页网页设计制作作品介绍截图演示代码演示作品来源 作品介绍 此作品为学生个人主页网页设计题材,代码为简单学生水平 DIV CSS布局制作,整个作品由主页、个人历程、兴趣爱好、学业成绩、联系我们共5页...
  • 网页设计流程

    千次阅读 2019-03-02 11:27:20
    网页设计可以有两种方式实现,一种是传统的表格布局方式,另一种就是通过css布局方式。 1。表格布局方式就是画网页。使用Photoshop或fireworks等工具画图,切图,最后输出为html页面,这种设计方式不考虑代码质量...
  • html网页设计大作业

    热门讨论 2018-01-04 16:36:21
    html网页设计大作业,关于植物,包含7个页面,css文件
  • 此次课程设计的题目是网页规划与设计(html+css+js+image+video+audio)确定每个页面将使用的页面布局技术(如结合使用CSS及表格、DIV、框架等技术),完成各页面的布局设计。 工具: EditPlus 一、网页效果(模仿游戏...
  • Dreamweaver网页设计作业下载

    千次下载 热门讨论 2010-04-11 22:57:19
    我们寝室四个人的四份做好的网页设计作业!成品四个!Dreamweaver做的!全部是满分作业哦~~!传上来大家看看!
  • web课程设计网页设计源代码

    热门讨论 2011-09-01 22:21:54
    利用web网页设计技术(html+css+javascript)进行网站开发,含源代码 ,以及网页所用的图片,可做课程设计参考
  • 简单的网页设计 网页设计 作业 大学生 高中生 网页设计作业 页面链接

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 518,680
精华内容 207,472
关键字:

网页设计