精华内容
下载资源
问答
  • 页眉 页脚 页眉 页脚 南京晓庄学院 JAVA WEB程序设计 课程报告 题 目: 学生信息管理系统 姓 名: 沈莉莉 学 号: 13131320 班 级: 13计算机转本1班 完成时间 2016年6月23号 成 绩 数学与信息技术学院 页脚 目 录 TOC \...
  • JAVA WEB程序设计 1 南京晓庄学院 JAVA WEB程序设计 课程报告 题 目: 学生信息管理系统 姓 名: 沈莉莉 学 号: 13131320 班 级: 13计算机转本1班 完成时间 2016年6月23号 成 绩 数学与信息技术学院 目 录 TOC \o "1-3...
  • 教育资料 南京晓庄学院 JAVA WEB程序设计 课程报告 题 目: 学生信息管理系统 姓 名: 沈莉莉 学 号: 13131320 班 级: 13计算机转本1班 完成时间 2016年6月23号 成 绩 数学与信息技术学院 教育资料 目 录 TOC \o "1-3...
  • web课程设计报告 1 概述 1 1.1 设计目的 1 1.2 设计任务 1 1.3 可行性分析 1 2 支撑环境规划 2 3 系统目标和设计原则 2 3.1 系统目标 2 3.2 设计原则 2 4 需求分析 3 4.1 系统任务 3 4.2 系统功能 3 4.3 系统流程图 ...
  • PAGE PAGE 24 汕头职业技术学院计算机系2014级软件技术 Java Web应用开发课程设计报告 课程设计题目 课程设计日期 年 月 日 起 年 月 日 止 班级 学号 姓名 指导教师 年 月 日 PAGE 2 目录 TOC \o "1-3" \h \z \u 1....
  • JSP实验报告模板
  • 武汉工业学院 Web高级程序设计 大作业报告 专业信息系统与信息管理 学号 _090502227 姓名 吴思敏 日期 20121019 一 需求分析 1引言 随着网络与信息技术的发展很多陌生人之间都有了或多或少的联系 如何更好地管理 ...
  • 教育资料 教育资料 教育资料 教育资料 南京晓庄学院 JAVA WEB程序设计 课程报告 题 目 学生信息管理系统 姓 名 沈莉莉 学 号 13131320 班 级 13计算机转本1班 完成时间 2016年6月23号 成 绩 数学与信息技术学院 TOC ...
  • 页眉 页脚 页眉 页脚 南京晓庄学院 JAVA WEB程序设计 课程报告 题 目: 学生信息管理系统 姓 名: 沈莉莉 学 号: 13131320 班 级: 13计算机转本1班 完成时间 2016年6月23号 成 绩 数学与信息技术学院 页脚 目 录 TOC \...
  • 1.课程设计目的 计算机网络课程设计是计算机及相关专业的实践环节之一,是学习完...(5)认真按时完成课程设计报告,课程设计报告内容包括:课程设计目的、设计任务与要求、设计说明书、设计成果和设计心得五个部分。
  • WEB课程设计报告.doc

    2010-08-27 11:13:33
    WEB课程设计很不错的与偶uuuuuuuuuuuuuuuuuuuuuuuuuu
  • 武 汉 工 业 学 院 Web高级程序设计 大 作 业 报 告 专业 信息系统与信息管理 学号 090502227 姓名 吴思敏 日期 20121019 一需求分析 1引言 随着网络与信息技术的发展很多陌生人之间都有了或多或少的联系如何更好地...
  • 这是一篇利用html+css+java+jap+tomcat开发的简单java web系统的课程实际报告,完整表述了简单的wen项目的开发流程及所用技术,希望对于初学者有所帮助
  • 这是我这学期做的java web期末测试题,有关于网上花店的实现,希望对你们有用。用户管理:创建一个名为user的数据Bean,用于存放user表的数据,创建一个名为UserDao的业务Bean,封装对user表的查询、修改、删除操作。...
  • 南京晓庄学院 JAVA WEB程序设计 课程报告 题 目: 学生信息管理系统 姓 名: 沈莉莉 学 号: 13131320 班 级: 13计算机转本1班 完成时间 2016年6月23号 成 绩 数学与信息技术学院 . 专业 专注 . 目 录 TOC \o "1-3" \h...
  • Web Service程序设计实验报告

    千次阅读 2018-11-21 15:51:18
    主要内容包括:   一、实验要求   二、运行环境   三、实验原理   四、实验步骤   四、实验心得   五、详细代码(简易计算器) 一、实验要求 编写一个网页,使其具有简单的数值计算...Web服务提供者设...

    主要内容包括:
      一、实验要求
      二、运行环境
      三、实验原理
      四、实验步骤
      四、实验心得
      五、详细代码(简易计算器)

    一、实验要求

    编写一个网页,使其具有简单的数值计算功能。
    

    二、运行环境

    Windows10,Microsoft Visual Studio 2017
    

    三、实验原理

    Web Service调用原理:
    

    图1

    实现一个完整的Web服务工作流程:

    • Web服务提供者设计实现Web服务,并将调试正确后的Web服务通过Web服务中介者发布,并在UDDI注册中心注册;
    • Web服务请求者向Web服务中介者请求特定的服务,中介者根据请求查询UDDI注册中心,为请求者寻找满足请求的服务;
    • Web服务中介者向Web服务请求者返回满足条件的Web服务描述信息,该描述信息用WSDL写成,各种支持Web服务的机器都能阅读;
    • 利用从Web服务中介者返回的描述信息生成相应的SOAP消息,发送给Web服务提供者,以实现Web服务的调用;
    • Web服务提供者按SOAP消息执行相应的Web服务,并将服务结果返回给Web服务请求者。

    四、实验步骤

    本程序以Microsoft .Net为开发平台,通过Microsoft Visual Studio 2017来创建Web Service服务。

    1、启动Microsoft Visual Studio 2017,新建项目;
    图2
    2、在新打开的窗口左边的选择框中,在已安装的模板下,选择Visual C# -> Web -> 先前版本,选择新建ASP.NET空网站,点击确定,继续;
    图3
    3、新建项目的界面右侧,有个“解决方案资源管理器”对话框,点击新建的项目名称,右键点击并选择添加 -> Web服务(ASMX),(可以选择对其重新命名),并继续;
    图4
    4、在WebService.cs中添加自定义测试功能代码(即自己想要实现的功能的代码);
    图5
    5、运行asmx文件(即上一步中的WebService.cs文件):
    图6
    运行成功,我们需要记住浏览器中的URL即上图中红色方框标记的地址,在后续步骤中将会用上;

    6、和第三步类似,在项目的解决方案管理器中,点击项目名称,并添加一个Web窗体,并给其命名为“Add”,继续;
    图7
    7、在新建的Add.aspx文件中,从工具箱(默认在项目界面左侧)中拖出三个控件:textbox1,textbox2,label分别用来显示整数a,整数b, 以及计算的和。另外再添加一个点击按钮工具“Button”,并为其添加一个点击事件“ OnClick=“BtnAdd_Click” ”,其功能为调用Web服务:
    图8
    8、现在,为网站项目添加Web服务,点击新建项目名称 -> 添加 -> 服务引用:
    图9
    9、在弹出的“添加服务引用”窗口中,把第5步生成的服务地址填入“地址”栏,然后点击“转到”,在显示的服务中,选择“WebServiceSoap”,点击确定,继续;
    图10
    成功添加服务引用后,会在项目的目录结构中显示出来
    图11
    10、在项目的目录结构中,点击第6步生成的“Add.aspx”文件,打开其源代码:
    图12
      在打开的Add.aspx.cs文件中,添加按钮控件“Button”对应的逻辑代码,实例化一个服务对象,需要注意的是,“Button”逻辑代码中的函数名(这里为BtnAdd_Click)必须与第7步中的Add.aspx文件中的Button工具的点击事件“OnClick=“BtnAdd_Click” ”描述相一致,才能在Web服务调用时完成函数的调用:
    图12
    11、现在运行Add.aspx文件,在输入框中分别输入两个整数,然后点击按钮“加”,其结果就会在标签“Label”中显示出来:
    图13
    12、到此,本Web Service程序的基本实现步骤就已经完成,其他的具体功能、代码和页面显示效果将在后面的详细代码中给出。支持的计算功能包括:加、减、乘、除、阶乘和开根号,下面是本程序的最终实现结果展示示例:
    图14
    图15

    四、实验心得

      在写这个程序的时候,所接触的WebService相关知识也就只有课堂上老师讲的,以及课本上所涉及的内容,刚开始的时候,感觉迷茫,不知道从哪里开始。后来在网上看了一些相关的资料,在慢慢的把这个程序整体框架完成。当然,具体的函数功能代码不是问题,但页面的显示效果又让我感到苦恼,后来在舍友的帮助下,以及自己在网上学习了一些相关的学习资料,才最终完成了这个简单的计算器。
      尽管这个项目很简单,因为所使用的Visual Studio平台已经提供了相关的框架,我们只需要把需要实现的功能代码添加进去,就会得到我们想要的结果。但它却涵盖了Web服务生成、发表和调用的全过程,所以通过这次实验,加深了我对Web服务相关知识的理解,也对今后的学习打下了基础。最重要的是,要学会自己去接触并吸收新知识的能力。

    五、详细代码(简易计算器)

    1、WebService.cs代码

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.Services;
    
    /// <summary>
    /// WebService 的摘要说明
    /// </summary>
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    // 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务,请取消注释以下行。 
    // [System.Web.Script.Services.ScriptService]
    public class WebService : System.Web.Services.WebService
    {
        [WebMethod]
        public double ForSUM(double a, double b)
        {
            return a + b;
        }
    
        [WebMethod]
        public double ForSub(double a, double b)
        {
            return a - b;
        }
    
        [WebMethod]
        public double ForMul(double a, double b)
        {
            return a * b;
        }
        [WebMethod]
        public double ForDiv(double a, double b)
        {
            return a / b;
        }
        
        [WebMethod]
        public double ForFac(double a)
        {
            double t =1;
            for(double i =1;i<=a;i++)
            {
                t *= i;
            }
            return t;
        }
        [WebMethod]
        public double ForSqrt(double a)
        {
            return System.Math.Sqrt(a);
        }
    }
    

    2、Calculate.aspx代码,这部分代码包含了该程序在浏览器中的界面点击按钮描述和显示效果:

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Calculate.aspx.cs" Inherits="Calculate" %>
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>简单数字运算</title>
        <style>
            body {
                font-family:楷体;
                font-size:22px;  
            }
            .bo {
                margin-top:100px;
                margin-left:100px;
                width:600px;
                height:auto;
                border:2px solid #858c66;
                background-color:rgba(149, 156, 99, 1);
            }
            p{  
                text-align:center;
                font-size:40px;
                color:black;
                margin-bottom: 20px;
                margin-top: 20px;
            }
            table{
                padding-left:110px;
                margin-bottom:10px;
            }
            .result{
                padding-left:50px;
                font-size:40px;
            }
            .button{
                font-size:20px;
                font-family:楷体;
            }
            .answer_view{
                background-color:lightgray;
                width:100%;            
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <div class="bo">
             <div>
                 <p>简易计算器</p>   
                       <div>
                             <asp:Label ID="res" runat="server" Text="答案:" Class="result"></asp:Label>
                       </div> 
                 <div class="answer_view">
                 <table>  
                    <tr>
                        <td><asp:Label ID="labResult" runat="server" Text="" >&nbsp</asp:Label> </td>
                    </tr> 
                </table>
                 </div>
                <table> 
                    <tr>  
                        <td> <asp:Label ID="labA" runat="server" Text="A">a:</asp:Label> </td>  
                        <td> <asp:TextBox ID="txtA" runat="server"></asp:TextBox> </td>  
                    </tr>  
                    <tr>
                        <td> <asp:Label ID="labB" runat="server" Text="B">b:</asp:Label> </td>  
                        <td> <asp:TextBox ID="txtB" runat="server"></asp:TextBox> </td>  
                    </tr>
                </table>
                <table>
                    <tr>
                        <td> <asp:Button ID="Button1" runat="server" Text="加" OnClick="btnSum_Click"  class="button"/> </td>  
                        <td> <asp:Button ID="Button2" runat="server" Text="减" OnClick="btnSub_Click"  class="button" /> </td>   
                        <td> <asp:Button ID="Button4" runat="server" Text="乘" OnClick="btnMul_Click"   class="button"/> </td> 
                        <td> <asp:Button ID="Button5" runat="server" Text="除" OnClick="btnDiv_Click"   class="button"/> </td>
                        <td> <asp:Button ID="Button3" runat="server" Text="阶乘" OnClick="btnFac_Click"  class="button" /> </td>
                        <td><asp:Button ID="Button6" runat="server" Text="开根号" OnClick="btnSqrt_Click"  class="button" /></td> 
                    </tr>
                 </table>
                   <span>提示:只能对a求阶乘(a为整数)和开根号。如果数的位数过长,会超出这个框,但结果是正确的~( ̄▽ ̄)~*</span>
                        
             </div>
        </div>
        </form>
    </body>
    </html>
    

    3、Calculate.aspx.cs代码,该部分代码包含了该程序在浏览器界面中的点击按钮的逻辑实现:

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    
    public partial class Calculate : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
    
        }
        protected void btnSum_Click(object sender, EventArgs e)
        {
            WebService fs = new WebService();
            double a = txtA.Text.ToString().Trim() == "" ? 0 : Convert.ToDouble(txtA.Text.ToString().Trim());
            double b = txtB.Text.ToString().Trim() == "" ? 0 : Convert.ToDouble(txtB.Text.ToString().Trim());
            labResult.Text = a+"+"+b+"="+fs.ForSUM(a, b).ToString();
        }
        protected void btnSub_Click(object sender, EventArgs e)
        {
            WebService fs = new WebService();
            double a = txtA.Text.ToString().Trim() == "" ? 0 : Convert.ToDouble(txtA.Text.ToString().Trim());
            double b = txtB.Text.ToString().Trim() == "" ? 0 : Convert.ToDouble(txtB.Text.ToString().Trim());
            labResult.Text = a + "-" + b + "=" + fs.ForSub(a, b).ToString();
        }
    
        protected void btnMul_Click(object sender, EventArgs e)
        {
            WebService fs = new WebService();
            double a = txtA.Text.ToString().Trim() == "" ? 0 : Convert.ToDouble(txtA.Text.ToString().Trim());
            double b = txtB.Text.ToString().Trim() == "" ? 0 : Convert.ToDouble(txtB.Text.ToString().Trim());
            labResult.Text = a + "*" + b + "=" + fs.ForMul(a, b).ToString();
        }
        protected void btnDiv_Click(object sender, EventArgs e)
        {
            WebService fs = new WebService();
            double a = txtA.Text.ToString().Trim() == "" ? 0 : Convert.ToDouble(txtA.Text.ToString().Trim());
            double b = txtB.Text.ToString().Trim() == "" ? 0 : Convert.ToDouble(txtB.Text.ToString().Trim());
            labResult.Text = a + "/" + b + "=" + fs.ForDiv(a, b).ToString();
        }
        protected void btnFac_Click(object sender, EventArgs e)
        {
            WebService fs = new WebService();
            double a = txtA.Text.ToString().Trim() == "" ? 0 : Convert.ToDouble(txtA.Text.ToString().Trim());
            double b = System.Math.Floor(a);
            labResult.Text =b+"!"+"="+fs.ForFac(b).ToString();
        }
        protected void btnSqrt_Click(object sender, EventArgs e)
        {
            WebService fs = new WebService();
            double a = txtA.Text.ToString().Trim() == "" ? 0 : Convert.ToDouble(txtA.Text.ToString().Trim());
            labResult.Text = "√" + a+"=" + fs.ForSqrt(a).ToString();
        }
    }
    
    展开全文
  • Java Web课程设计

    千次阅读 2019-07-02 20:43:25
    为时两周的Java Web课程设计,使用目前流行的Spring Boot后端框架,Layui前端框架,做了一个业务逻辑较简单,具有前后台的图书借阅管理系统,还有很多很多很多的不足,该项目已放在github上,欢迎交流,批评指正~~~ ...

    为时两周的Java Web课程设计,使用目前流行的Spring Boot后端框架,Layui前端框架,做了一个业务逻辑较简单,具有前后台的图书借阅管理系统,还有很多很多很多的不足,该项目已放在github上,欢迎交流,批评指正~~~

    å¨ææ£ç´¢çé¢

    å¤ææ¥è¯¢ç颠Dashboardçé¢

    å¾ä¹¦åæçé¢

    展开全文
  • 老师给与的课程设计的有关内容,有很多关于web课程设计的题目和写实验报告所需的任务书以及模板教材。可供大家使用。
  • web课程设计总结

    万次阅读 2015-07-21 16:22:18
    阶段的总结,是进步的一大助力,现在总结下课程设计。 第一个网站:基于PHP的购书网站 现在感到网站的本质是:数据的流动。 网站一开始,完全不懂后台,所以就只做了前台先。 做前端,就是html,CSS,javascript,...

    阶段的总结,是进步的一大助力,现在总结下课程设计。

    第一个网站:基于PHP的购书网站

    现在感到网站的本质是:数据的流动。

    网站一开始,完全不懂后台,所以就只做了前台先。

    做前端,就是html,CSS,javascript,jQuery。

    在这个过程中,接触到了很多库,框架,js插件。

    比如bootstrap,boostrap是响应式的,当时第一个接触的东西,感觉好强大,响应式的,有好多模块可以自己任意添加,顶部,按钮,图标等等,对样式的控制也很难。但是以我现在对bootstrap的认识,做不出很炫酷的页面。所以,本网站就用bootstrap只做了个顶部。

    做了个顶部,就很难再用bootstrap做下去。网站是分为好多个部分的。每个部分的样式也不一样,关键是把几个部分凑起来。

    之后接触到js插件(即大多是JQ插件),发现了很多JQ插件的网站,感觉好厉害,‘封装’这个词不错。封装好的JQ插件,拿去组装网站就行了,都有参数说明,很棒,我看到了很多网站的特效,有图片轮播,导航,菜单,弹出层,对话框等等,好多好多。最后,看到一个全屏滑动的插件,好炫酷,就拿来用到本网站了。

    有了顶部,有了这个全屏滑动的菜单,接下来,自然的想到了,购物网都有的左边的菜单。

    我就又到JQ插件网站找菜单,但是,几乎全部是包含了顶部的,而除这之外,有的我不会用的,那么问题来了。我不想放弃之前花了很多时间的bootstrap顶部,再加上,我这样组装网站的最致命的问题:样式的问题。因为每个插件都有自己的样式,而且有的命名还可能会重复的。很乱。而且,你要是想插件包含插件,或者想在插件上加点模块,真的很难很乱。但是没办法,都做到这里了。花了那么多的时间,也算是次经验吧。

    我想,唯有自己写个菜单了。于是我参考下载的JQ菜单插件,写了个菜单,其中学了点JQ动画,还由于是在全屏滑动JQ插件里面添加的,样式问题,调了好久。

    再后来,在网页的第一页和第二页添加了两个不同的图片轮播,都不错。(全屏滑动JQ插件,网站分为4页)。

    剩下第3、4页,但是,总不能全都做个图片轮播。第4页是写媒体合作预定的,写几行字说还没有媒体合作算了。那么还剩下第3页。也只有一种方式了,就是展现几个(10个吧)商品(哦,是10本书。),然后给个‘更多’链接就行了。就用10个div+JQ动画搞定。(这里用的动画就是,当鼠标滑动到这个页面是,10个div,上下两行,上行从左边滑进,下行从右边滑进。)

    还有一个,首页点开时,顶部下的一个动画,是模仿一个JQ库网站的,感觉不错。

    那么这样一来前端的东西就完成了。

    之后,因为不懂怎么后台不知道怎么做下去了,还有其他科目的考试等等,停了很长时间。在这段时间里,发现了很多前端的网站,还有网页的数据拼装,还有CSS的框架等等。

    后台的完成完全是被时间逼的。

    前面说到,网站的本质是数据的流动。

    网站的数据,那自然是要做数据库了。而数据的流动,一个是用户的注册,商品的销售数量,评论等等;一个是后台管理员的管理后台,其中最重要的添加商品,甚至添加分类等等。

    经过考虑,我还是选择了一步步来。因为之前有数据库的设计检测,表间有什么联系等等,之前老师的检测是糊弄过去了。随便用pdshell15建物理模型,建几个表,随便拉表间的关系线,但是,这些是不能拿来应用的,或者说是应用不了的。(后来我完成了网站,几个表也没设什么关系,都是各自增删改查的,嗯,可能是还没用到哪些功能吧,所以不用表间什么联系)

     

    首先是做登录注册,这里我只是做用户的,没做管理员的。当时也没管那么多。

    去JQ插件网逛了下,哪些表单验证插件都不满意,之后下载个,自己修改。

    登录注册,这里涉及到了很多。登录:不能为空,数据库连接,sql查询,cookie,sql防注入,用户名格式(我没有做多种方式登录,只做了用户名登录,没email登录等等),ajax,页面跳转,session,验证码等等。注册:不能为空,数据库连接,sql查询,sql防注入,用户名格式(正则表达式),email格式(正则表达式),session,实时检测用户名有没有重复(用onkeyup),验证码等等。

    剩下的,模糊搜索(我直接用了sql语句的模糊搜索),分类页面,商品展示页面,购物车页面,订单页面(没写),后台管理(时间原因,没写)都是数据的增删改查。

    还有,网站的logo。


    网站的组装:

    比如:include  ‘commontop.php’

    例如:你每个二级页面都包含了顶部导航和菜单,那么你没个页面都再写个导航和菜单吗?显然不可能,那么自然而然的想到要将这些部分封装起来,写到一个独立的php里面,要用的时候就include。(这里说明下,除了include还有include_once,require,require_once,看需要用哪个)

    如:在showbook.php里面include ‘commontop.php’;include ‘commonleft.php’;

    include ‘conn.php’;等等。

    数据库连接最好封装起来,封装到conn.php里面。

     

    Session的使用:

    在使用session前要初始化先,在php文件顶部session_start();

    还有session的注销等等。

    每个商品都有一个独有的网址:

    其实,这个是在商品展现网页showbook.php后面加了“?+’变量名’+’商品ID’”。

    比如 href=”showbook.php?book_id=<?php echo $book_id ?>

    而目标网页则用GET来获取book_id。即$_GET[‘book_id’]

    页面间的数据传递:

    post,get,session,cookie,ajax等等,

    submit,button+函数,href,location.href等等。

     

    js与php变量相互传递:

    这个很重要!很多功能和BUG都是因为这个!

    php网页的数据拼接少不了这个!

    Js与php是能相互传递变量的,具体可以搜索下。

    本网站只要用的是将php变量的值传个js变量:

    <?php $value=”购书”?>

    <script>

          var  str=<?php echo $value?>;

          alert(str);

    </script>

    还有,上文提到的页面跳转也用到:

    href=”showbook.php?book_id= <?php echo $book_id ?>

     

    数据库的小技巧:

    如:限制拿查到的前几个数据,用limit。等等~

     

    在index.php页面直接查找数据,然后用

    <?php

    While($data=mysql_fetch_array($res)){

               $book_id=$data[‘book_id’];

               $book_img_$data[‘book_img’];

    ?>

     

    <div>

    <ahref="showbook.php?book_id=<?php echo $book_id ?>"><imgsrc="images/<?php echo $book_img ?>"></a>

    </div>

     

    <?php

    }

    ?>

    这样来拼接页面数据。

    这样会生成好多个有不同动态数据的div,嗯。

    还有,用图片来代替效果!这招赞!

    还有前端的样式问题,确实的麻烦,要调很久;绝对定位,z-index,float的应用等等。

    云平台:新浪云,百度云,阿里云等等,网上有教程,我用的是新浪云,上传应用,因为我把数据库连接封装出来了,所以很简单,只是调下数据库的连接就行了,不过,这里很怪,搞了很久,最后只是把数据库连接的两个函数的两个参数调换下位置就行了。

    到这里,总结得差不多了,遗憾的是网站很多功能都没时间去实现,如排行榜,收藏商品,后台管理,响应式等等,也没有用到php模板smarty。总的来说,还是学到了很多的。

    要去考研了,怕时间长忘了,所以写了这个总结。

    附上网址:

    展开全文
  • 网页设计模板,让你轻松搞定实验报告 内附具体说明 实训作品1 中国招牌(本行格式为:标题1、宋体、二号、加粗、居中) 制作学生:BX091101XXXXXX 指导老师: 1 实训作品简介(本行格式为:宋体、三号、加粗,段...
  • 网页设计课程设计报告

    万次阅读 多人点赞 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分

     

       

    最终评定等级为:

                              指导老师签字:               

     

                                                   年    月    日

     

    展开全文
  • Java Web课程设计(代码+课程报告) 课程作业效果如下: 项目分工: 同学1:web jsp页面设计,后端的控制层,服务层设计与数据库连接 同学2:数据库设计,各个表对类的设计,大量数据处理,实验报告撰写,网页...
  • web前端课程设计.zip

    2020-05-31 16:46:26
    适用于大学网页设计课,非专业选修课,课程设计(大作业)。仅使用了CSS和HTML语言,结构简单,仅用于应付作业
  • PHP课程设计报告

    2018-03-04 20:21:50
    课程设计目标 1、基本掌握BS结构程序设计的基本思路和方法; 2、达到熟练掌握PHP语言的基本知识和技能; 3、熟练掌握MYSQL数据存储技术的基本知识和方法; 4、能够利用所学的基本知识和技能,解决简单的程序设计问题...
  • 上代码 运行完打开浏览器访问127.0.0.1:8000 #include &amp;lt;cstdio&amp;gt; #include &amp;lt;string&amp;gt; #include &amp;lt;fstream&amp;gt; #include &amp;...
  • Java web课程设计(宿舍管理系统)文档部分已经上传,所有宿舍管理系统的资源已经全部上传,有需要的可以下载哦!有疑问留言博主,博主会及时回复的。
  • 本系统实现的主要功能就是学生在线提交实验报告,教师在线批阅实验报告的功能。用PHP语言开发完成,文档内容结构如下: 1系统分析 1.1功能 1.2解决方案 2.系统设计 2.1.1系统流程图 2.1.2 应用程序的文件描述 ...
  • 包括web报告文档和所有部署文件。 有什么问题82581318加我问,自己做的,模板是老师的,东西是自己弄得。 这种东西简单,但是用的是MVC结构,代码还算清晰,老师看了虽然简单,但是用的是JSP BEAN Servlet 三个弄成...
  • html课程设计html模板

    2011-08-17 18:45:15
    资源为html模板对初学者以及开发者都有很大的帮助。对进一步了解html有一定的促进作用
  • 很详细的课程设计报告,简单完整,附有源码,软件图等,一次就可以通过,大学最佳作业

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 18,055
精华内容 7,222
关键字:

web课程设计报告模板