精华内容
下载资源
问答
  • web课程设计网页设计源代码

    热门讨论 2011-09-01 22:21:54
    利用web网页设计技术(html+css+javascript)进行网站开发,含源代码 ,以及网页所用的图片,可做课程设计参考
  • 华东交通大学 web课程设计报告 ,简单的网页制作,适合初学者参考,包含有CSS技术 和JavaScript技术
  • 此次课程设计的题目是网页规划与设计(html+css+js+image+video+audio)确定每个页面将使用的页面布局技术(如结合使用CSS及表格、DIV、框架等技术),完成各页面的布局设计。 工具: EditPlus 一、网页效果(模仿游戏...

    web前端开发技术期末大作业 网页规划与制造,做得不深 但是还是满足期末大作业的 分享一下
    在这里插入图片描述

    题目:
    此次课程设计的题目是网页规划与设计(html+css+js+image+video+audio)确定每个页面将使用的页面布局技术(如结合使用CSS及表格、DIV、框架等技术),完成各页面的布局设计。

    工具:
    EditPlus

    一、所需文件

    在这里插入图片描述

    二、网页效果(模仿游戏官网)

    A.首页效果
    在这里插入图片描述
    B.游戏介绍
    假装有图


    C.游戏攻略
    在这里插入图片描述
    D.手办商城
    在这里插入图片描述
    E.问卷调查
    假装有图


    F.加入我们
    …懒了
    …哈哈


    三、部分代码

    首页HTML

    <!DOCTYPE html>
    <html lang="en">
     <head>
      <meta charset="UTF-8">
      <meta name="Generator" content="EditPlus®">
      <meta name="Author" content="">
      <meta name="Keywords" content="">
      <meta name="Description" content="">
      <title>主页</title>
       <link rel="stylesheet" href="css/index.css">
       <script src="js/index.js" charset="gb2312"></script>
     </head>
     <body>
     <embed src="audios/attack.mp3" width=0 height=0 type=audio/mpeg loop="-1" autostart="true" volume="0"></embed>			<!-- 音乐 -->
     <div id="container">				<!-- 大框 -->
    	<div id="header">			<!-- 1 头部-->
    		<div id="logo"></div>		<!-- 1左  logo -->
    		<div id="select_search">	<!-- 1右  搜索-->
    			<table height="80px" align="right" >
    				<tr align="right">
    					<td colspan="4">
    						<select id="sel">
    							<option selected>简体中文</option>
    							<option >繁体中文</option>
    							<option >English</option>
    						</select>
    					</td>
    				</tr>
    				<tr align="right">
    					<td><font size="2">关键词:</font></td>
    					<td><input type="text" size="25"></td>
    					<td><input type="image" src="images/搜索.png"></td>
    				</tr>
    			</table>
    		</div>
    		
    	</div>
    	<div id="nav">		<!-- 2  导航栏-->
    		<table>
    			<td id="line.png"><a href="index.html">首页</a></td>
    			<td id="line.png"><a href="game_introduction.html">游戏介绍</a></td>
    			<td id="line.png"><a href="game_tips.html">游戏攻略</a></td>
    			<td id="line.png"><a href="toy.html">手办商城</a></td>
    			<td id="line.png"><a href="survey.html">问卷调查</a></td>
    			<td id="line.png"><a href="join.html">加入我们</a></td>
    			
    		</table>
    	</div>
    	<div id="bao">		<!-- 3  图片轮播-->
    		<div id="photo">
    			<img src="images/a.png" >
    			<img src="images/b.png" >
    			<img src="images/c.png" >
    			<img src="images/e.png" >
    			<img src="images/f.png" >
    		</div>
    	</div >
    	<div id="main">		<!-- 4  左中右-->
    		<div id="left">		<!--  4左   咨询-->
    			<img src="images/游戏资料.png" width="262ox" height="50px">
    			<ul>
    				<li><a href="https://pvp.qq.com/web201605/newsDetail.shtml?G_biz=18&tid=518558">打野位置能拿MVP的不传之秘!<a>&nbsp;2021-05-09</li>
    				<li><a href="https://pvp.qq.com/web201605/newsDetail.shtml?G_biz=18&tid=519143">新版梦奇铭文出装玩法全解析<a>&nbsp;2021-05-09</li>
    				<li><a href="https://pvp.qq.com/web201605/newsDetail.shtml?G_biz=18&tid=519427">如何理解斩杀线与控血概念?<a>&nbsp;2021-05-09</li>
    				<li><a href="https://pvp.qq.com/web201605/newsDetail.shtml?G_Biz=18&tid=512793">李白刮痧,操作太难,试试兰陵王<a>&nbsp;2021-05-09</li>
    				<li><a href="https://pvp.qq.com/v/detail.shtml?G_Biz=18&tid=719852&e_code=pvpweb.dpvlist.r4">“红烧流”庄周<a>&nbsp;2021-05-09</li>
    				<li><a href="https://pvp.qq.com/web201605/newsDetail.shtml?G_Biz=18&tid=362130">你强任你强,墨子东皇加张良<a>&nbsp;2021-05-09</li>
    			</ul>
    		</div>
    		<div id="center">	<!-- 4中  图片滚动-->
    			<marquee onmouseover="this.stop()" onmouseout="this.start()">
    				<img src="images/滚1.png" border="0" width="400px" height="230px">
    				<img src="images/滚2.jpg" border="0" width="400px" height="230px">
    				<img src="images/滚3.jpg" border="0" width="400px" height="230px">
    				<img src="images/滚4.jpg" border="0" width="400px" height="230px">
    				<img src="images/滚5.png" border="0" width="400px" height="230px">
    			</marquee>
    		</div>
    		<div id="right">		<!-- 4右 登录-->
    			<img id="ri" src="images/欢迎登录.png" width="250" height="50px"><br/>
    			<form action="" id="fo">
    				<table align="center" class="register">
    					<tr>
    						<td>用户名</td>
    						<td><input type="text" id="user01" maxlength="11" placeholder="请输入您的用户名" required/></td>
    						<td ><input type="submit" value="登录"></td>
    					</tr>
    
    					<tr id="fot">
    						<td>密码</td>
    						<td><input type="password" id="password01" maxlength="16" placeholder="请输入密码......" required/></td>	<td><input  type="reset"></td>
    					</tr>
    				</table>
    			</form> 
    			<div class="wjmmzczh">
    				<a href="#" >忘记密码</a>
    				<a href="#" id="zc">注册账号</a>
    			</div>
    		</div>
    	</div>	
    	<div id="comment">		<!-- 5 留言区-->
    		<h2 >留言板</h2>
    		<hr size="2px" color="#b5b5b5" width="990px" align="left">
    		<form>
    			<table align="center">
    				<tr>
    					<td>用户名:</td>
    					<td><input type="text"/></td>
    					<td>Wechat:</td>
    					<td><input type="text"/></td>
    					<td>留言时间:</td>
    					<td><input type="text"/></td>
    				</tr>
    				<tr>
    					<td >留言内容:</td>
    					<td colspan="5"><textarea id="txt" cols="100" rows="3" placeholder="评论的时候,请遵纪守法并注意语言文明"></textarea></td>
                  
    				</tr>
    
    				<tr >
    					<td colspan="2"><input type="submit" value="提交留言"></th>
    					<td colspan="2"><input type="reset" value="重置内容"></th>
    				</tr>
    			</table>
    		</form>
    	</div>
    
    	<div id="footer" >		<!-- 6 版权区-->
    		<p class="p1">Copyright&nbsp;&copy;&nbsp;2021&nbsp;<span>i&nbsp;an</span>,All&nbsp;rights&nbsp;reserved.</p>
    		<p class="p2">2021,版权所有&nbsp;&nbsp;85CP备13385453</p>
    	</div>
     </div>
      
     </body>
    </html>
    
    

    首页CSS

    /*index.css*/
    *{
    	
    	font-family:楷体; /*全文字体*/
    }
    #container{
    	margin:0 auto;			/*   内外边距去除,字体大小为12px */
    	padding:0 auto;font-size:12px;
    }
    #header{			/*1 头部*/
    	width:990px;
    	height:80px;
    }
    #logo{	/*  1左上 logo */
    	width:300px;
    	height:80px;
    	float:left;
    	background:#FFFFFF url("../images/王者荣耀logo.png") no-repeat left bottom;
    	
    }
    #select_search{			/*	 1右	  搜索*/
    	width:690px;
    	height:80px;
    	font-size:20px
    	background:#FFFFFF;
    	float:left;
    }
    #nav{				/*		2  导航栏  */
    	clear:both;
    	width:990px;
    	height:40px;
    	font-size:18px;
    	background-image:url("../images/导航背景.png")
    }
    #nav a:hover{
    	color:#Bf0000;
    	text-decoration:none;
    }
    #nav td{
    	width:165px;
    	height:40px;
    	text-align:center;
    	vertical-align:middle; 
    }
    table{
    	line-height:1.5em
    }
    #bao{					/*  3图片轮播  */
    	width: 990px;
    	height: 500px;
    	overflow: hidden;
    }
    #photo {			
    	width: 5940px;
    	animation: switch 15s ease-out infinite;
    }
    #photo > img {
    	float: left;
    	width: 990px;
    	height: 500px;
    }
    @keyframes switch {
    	0%, 5% {
    		margin-left: 0;
    	}
    	20%, 30% {
    		margin-left: -990px;
    	}
    	40%, 55% {
    		margin-left: -1980px;
    	}
    	60%, 75% {
    		margin-left: -2970px;
    	}
    	85%, 100% {
    		margin-left: -3960px;
    	}
    }
    
    #main{				/* 4   */
    	width:990px;
    	height:230px;
    	border-bottom:5px ridge #DEDEDE;
    	float:left;
    	clear:both
    }
    #left{		/*4左*/
    	width:260px;
    	height:230px;
    	background:#EEFFDD;
    	float:left;
    	background-image:url("../images/left背景.png")
    	/*border-right:10px solid #FFFFFF*/
    }
    a:link,a:visited,a:active{
    	text-decoration:none;
    }
    a:link,a:visited,a:active{
    	color:#828282;
    }
    ul{
    	list-style:none;
    	padding-left:10px;
    	line-height:1.8em
    }
    #left li{
    	border-bottom:1px dotted #009900;
    }
    #left a:hover{
    	color:#Bf0000;
    	text-decoration:underline
    }
    #center{		/*4中*/
    	width:480px;
    	height:230px;
    	float:left;
    	/*border-right:5px solid #FFFFFF;*/
    	background-image:url("../images/滚底.png")
    }
    #right{		/*4右  登录部分*/
    	width:250px;
    	height:230px;
    	background:#EEFFDD;
    	float:left;
    	background-image:url("../images/right背景.png")
    }
    .register{
    	flex: 40%;
    	padding-top: 20px; 
    }
    .wjmmzczh{
    	padding-left: 50px;
    	padding-top: 20px;
    }
    #zczh{
    	padding-left: 50px;
    }
    #biaodan{
    	padding-top: 20px;
    }
    h2{
    	font-size:30px;
    	font-family:宋体;
    	font-style:bolder;
    	color:#ffff00;
    	margin:0
    }
    #comment{		/*5  评论区*/
    	clear:both;
    	width:990px;
    	height:210px;
    	background-image:url("../images/留言底.jpg");
    	float:left
    }
    input{ 
    	vertical-align: middle;
    } /*垂直居中*/
    #footer{			/*6 尾部*/
    	clear:both;
    	width:990px;
    	height: 60px;
    	background: #330033;
    	text-align: center;
    	line-height: 10px;
    	float:left
    }
    #footer p{ 
    	color: #ffff00;
    	font-size: 15px;
    	opacity: 0.7; 
    }
    .p1{ 
    	margin: 0;
    	padding: 15px 0 5px 0;
    }
    .p2{ 
    	margin: 0;
    	padding: 5px 0;
    }
    #footer span{
    	color: #aaffff;
    }
    
    

    首页登录表单JS

    window.onload=function(){
        if(document.getElementById("fo") != null){
            document.getElementById("fo").onsubmit=function(){
                var yhm = document.getElementById("user01");
                var mm = document.getElementById("password01");
    
                if(!(/^1\d{10}$/.test(yhm.value))){          /*用正则表达式,检查输入的用户名格式是否为以1开头的11位数*/
                    alert("输入用户名格式错误,请重新输入以1开头的11位数用户名!");
                    return false;
                }
    
                if (mm.value != 12345) {
                    alert("密码输入错误,请重新输入!");
                    return false;
                }
               /* return ture;*/
            }
        }
    }
    
    
    
    

    首页评论区表单JS

    /*留言板块*/
    
    function checkData(){    /*checkData()的JS脚本函数,以便我们在将表单数据提交到服务器前,能对表单中填写的部分数据的合法性进行必要的检验*/
    		var n = document.getElementById("n").value;/*var obj = document.getElementById(页面元素id)*/
    		var x = document.getElementById("x").value;
    		var t = document.getElementById("t").value;
    		var txt = document.getElementById("txt").value;
    		if(!n)
    		{
    			alert("请输入用户名!");
    			return false;
    		}
    		else if(!x)
    		{
    			alert("请输入wechat!");
    			return false;
    		}
    		else if(!t)
    		{
    			alert("请输入留言时间");
    			return false;
    		}
    		else if(!txt)
    		{
    			alert("请输入留言内容");
    			return false;
    		}
    		
    		return true;
    }
    function check(){
    		var r = checkData(); 
    		return r;
    }
    

    在这里插入图片描述

    做得不太好,请多多包涵菜鸟,球球了,
    图片素材来自网络,侵删

    要源码,三连蟹蟹

    要源码,三连蟹蟹

    要源码,三连蟹蟹

    想直接拿就在这里

    资源

    展开全文
  • 这个是一个已经做好了的HTML网页,采用了表格技术和CSS技术,在页面风格和设计上都有很不错的地方!!!
  • 网页课程设计报告

    2020-12-29 13:13:15
    网页课程设计报告 二、设计与实现 (一)需求分析 首先我认为设计个人博客是确认自己的风格,找到自己想写的内容,其次就是把自己需要的素材整理一下,图片、文字、图标都需要整理一番了解网页设计制作过程;了解和...

    网页课程设计报告
    二、设计与实现
    (一)需求分析
    首先我认为设计个人博客是确认自己的风格,找到自己想写的内容,其次就是把自己需要的素材整理一下,图片、文字、图标都需要整理一番了解网页设计制作过程;了解和熟悉网页设计的基础知识和实现技巧;通过实践,经历Dreamweaver开发的全过程和受到一次综合训练,以便能较全面地理解、掌握和综合运用所学的知识;通过设计达到掌握网页设计、制作的技巧;结合具体的开发案例,理解并初步掌握运用Dreamweaver可视化开发工具进行网页开发的方法;根据题目的要求,给出网页设计方案,可以按要求,利用合适图文素材
    设计制作符合要求的网页设计作品;熟练掌握Photoshop、Dreamweaver等软件的的操作和应用;增强动手实践能力,进一步加强自身综合素质。
    (二)概念结构设计
    看到这个风格的网页,首先做的就是需要页面布局,在我看来,主页应该分为三个部分;第二部分要分为四个小部分。而子页则需要四部分,第二部分和第三部分需要三个小部分,我用浮动来实现。有些图片需要处理就用Photoshop。学习网页设计需要耐心,如果没有耐心,就学不好网页设计,应为当你碰到一个问题时,如果不能立刻得到问题的答案,你可能需要很长时间去解决,我就碰到过一个问题,用了很长时间才解决。学习网页设计需要坚持不断的学习,因为设计网页的软件在不断的更新,因此我们要不断的学习。
    (三)项目实现
    首先用div布局页面,在主页我设置了打开的界面是用我非常喜欢的一张手捧樱花的照片。还有一句我喜欢的一句话多么美丽的世界啊。这句话虽然很简单但是透露着对世界的热情,和对生活充满期待的心情,就好似永远活得很开心快乐。在HTML5引入CSS样式表,通过CSS来控制网页的样式是网页更加的美观。利用border-radius设置圆形的图片,再通过盒子设置大小。还有一些我平时的兴趣爱好,我的喜欢旅游,第一个部分便是我的爱好,在第一部分我用了a标记链接到子页。子页主要是写的一些我很喜欢的旅游城市,有北京、上海、重庆。介绍了一下我了解的这些城市,我还写了一些我认为能代表这个城市的小吃,不仅有好吃的小吃还有好玩的景点。像北京的长城、故宫、天安门等地方都是著名的景点,是能代表北京的一些旅游景点。主页就是还有照片,这张图片是我从网页上找的,用img标记把照片放在网页上。主页中的居中我是用的align:center,我觉得这个方法挺方便的,开始我没想到用这样的方法,便用的定位position,先让父容器定位,再让孩子定位,用left把文字放到中间。我发现这样特别麻烦,用CSS也没找到好的方法,于是便用的align:center;最下面的我用CSS把背景调成天蓝色,这个颜色也是我特别喜欢的一个颜色。还有一些字也是我喜欢的,并且用的白色,就像天空一样的颜色蓝天和白云。子页当中的颜色也是天蓝色,这样就感觉是一个博客,不会太突兀,并且下面的页脚也是和主页一样的,背景色和白色的子。
    利用CSS来控制这一部分一个在左边,两个在右边,浮动来实现就可以。这一个写的是一个我很喜欢的城市北京,用图片和文字来介绍我们的首都,还有一些著名的景点和小吃。

    三、总结
    1.心得体会
    这次的网页课程设计,我学会了很多,比如页面布局,原来我是div嵌套用的不熟练,找不到技巧,而这一次我明白了在用div的时候的嵌套是很重要的,要是没嵌套对,效果是完全不一的,这就会导致你的效果图乱成一团。还有就是通过这次网页课程设计激发学习兴趣,调动学习的自觉性,自己动脑、动手,动口,运用网络资源,结合教材及周芳老师的指导,通过自身的实践,创作出积聚个人风格、个性的个人博客网页。总体来说,整个学期的学习过程,我学会了很多知识,在此次网页设计 ,我充分利用了这次设计的机会,全心全意投入到网页世界,去不断的学习,去不断的探索;同时去不断的充实,去不断的完善自我,在网络的天空下逐渐的美化自己的人生!做好页面,并不是一件容易的事,它包括个人博客主页的选题、内容采集整理、图片的处理、页面的排版设置、背景及其整套网页的色调等很多东西。本次课程设计不是很好,页面过于简单,创新意识薄弱,这是我需要提高的地方。需要学的地方还有很多,需要有耐心、坚持,不断的学习,综合运用多种知识,才能设计出好的web页面。总体来说,通过这次的对网页课程设计,有收获也有遗憾、不足的地方,但我想,我已经迈入了网页设计的大门,只要我再认真努力的去学习,去提高,凭借我对网页设计的热情和执着,我将来设计出的网页会更加专业,更完善。
    2.遇到的问题与解决的措施
    在主页的设计中,一直想加一些背景图片,我尝试加了几个,但是效果不是很好,主要是背景图片和主题的风格不是很搭,是我没找到合适的主题的背景图。有的盒子老是不在自己的位置上,我找原因,原来是盒子的结构没有控制好,弄好之后再用浮动就好了。设计过程中,我发现在“素材”这个方面花的时间特别多,而且也容易卡在这里。当我已经构思出一幅大致的网页效果图,并准备开始设计的时候,我会发现很难找到符合题材的素材,然后我会开始漫无目的的在网上搜索这些素材,最后找了很久依然没有结果,白白浪费了很多的时间。
    经过我的分析和思考,我总结出以下的经验:一定要注意平时的收集整理。例如浏览网页的时候要多留意,如果看见好看的素材,就把它下载到电脑里或者把网址收藏好,并且要分好类别,这样,当构思好大致的网页效果图并且要开始网页设计的时候,你脑海里可能会立马涌现出曾经看到某些素材和你构思的网页效果图比较接近,这样,就不用再花太多的时间去找素材了,也不用担心网页设计卡在素材这里了!我搜集的素材也没有完全用到,只是当时觉得好看,还挺符合我自己的主题就先从网上先下载下来了,浪费了不少时间,我认为要先明白自己需要什么样的素材再去下载,这样才可以,不能一看到自己喜欢的就下载。
    3.建议或者展望
    进入大学学习计算机已经快两年了。经过这段时间的不断学习积累,我也初步认识计算机科学的许多方面。自从进入琴院以来,我学到了不少专业知识,我也逐渐成长起来了,每天的学习会让自己得到专业知识,虽然有时会颓废,但是学习的时候应该要好好学习。不能每天都玩手机,看视频。这样以后的自己会后悔的,要对得起自己。大二这学期的网页课程设计课是对整个学期的理论知识的实践和拓展。目前我们学习掌握到web前端技术知识有HTML,CSS等,这些知识的掌握足以使我们开发简单无逻辑的普通静态网页。能够开发简单的静态网页也是为后续web开发学习的铺垫。HTML和CSS的灵活运用就是靠长期的实践和积累。高稳定性,高带宽低时延的5G移动网络带来了新的一场革命,我们已经能够触摸到物联网的轮廓。在5G移动网络支持下万物互联将变为现实。在这种新型技术实现的背景下,前端技术又充当怎样的角色,我不是很清楚,web前端开发人员又要如和提升自己以应对物联网的到来呢,这都值的思考。即使我们不能知道具体的应用,但我们能却定这个方向是发展的趋势并且是不可逆的。我希望在以后的学习中自己更加努力。在老师和指导下,我相信自己的专业知识和专业能力会更加好的。

    展开全文
  • 网页设计课程设计报告

    万次阅读 多人点赞 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课程设计

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

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

    å¨ææ£ç´¢çé¢

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

    å¾ä¹¦åæçé¢

    展开全文
  • 期末作业要求制作八个页面,初学只会做些垃圾,只能去模仿一下网上的,这次就照着守望先锋的官网进行制作,如图, 导航页面 首页 内容不多,还有一些内容没截图进来。...因为临近考试,其他科目有点悬,所以就没把...
  • 本次课程设计内容为仿微信网页Web即时聊天系统。 实现Web的多对多即时的文本消息聊天功能。 实现Web的表情的发送、接收和显示功能。 实现Web的图片的发送、接收和显示功能。 实现本地消息的存储,在离线的...
  • web课程设计

    千次阅读 2019-06-10 13:04:01
    一、课程设计要求 1、在导航条中添加一个后台管理系统。 2、后台页面分成左右两个框,左边显示一个树形菜单,右边根据菜单选择相应的交互页面。 3、实现对用户、产品分类、产品、订单等的后台管理。 4、具体页面...
  • 关于HTML期末网页制作,大作业A+水平 ~游戏网页作业...此次课程设计的题目是网页规划与设计(html+css+js+image+video+audio)确定每个页面将使用的页面布局技术(如结合使用CSS及表格、DIV、框架等技术),完成
  • web课程设计总结

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

    千次阅读 多人点赞 2019-09-27 10:38:01
     上学期学了一门HTML5+CSS3的课程,也叫Web前端技术,期末的课程设计是写一个个人主页,能够在浏览器中打开的静态网页。通过一学期的学习,虽然系统学习过一遍,但是综合起来实践还是有些难度的。不过很开心的是在...
  • 网页设计 WEB程序设计 网站源码 网页课程设计 网页设计作品源码 网站整站源码 web程序设计
  • Web网页登录设计

    千次阅读 2017-02-24 19:01:00
    web网页登陆 登陆网页的简单功能的实现 输入用户名和密码与数据库当中的用户名和密码匹配上,则登陆成功。 首先我们要先配置好web制作所需要的软件,在mysql数据库当中建立表,建立用户名和密码 在...
  • 一个小型的html的班级网站,美化的相当不错.包括综合案例源代码,可以作为网页设计的期末考评作业
  • Java web课程设计-购物系统

    万次阅读 多人点赞 2019-08-21 22:49:26
    Java web课程设计是为了是计算机学院的学子深入学习java web应用开发设置的一门实验性的动手性的实践课程。是计算机科学与技术、 网络工程、信息安全、物联网工程、软件工程等专业集中实践的教学环节,是将关jav...
  • web前端课程设计,jquery+js+css+html,实现基本前台所有界面,
  • web前端课程设计——K.X的博客

    千次阅读 2019-12-23 16:56:45
    这个课程设计也算对自己一学期课程的总结吧。 课程设计运用单页面技术、vue-router(路由)、定义全局变量、bootstrap4界面设计以及Vue-html5-edito富文本编辑器 功能:可实现查看博客详情、增加博客,编辑博客,...
  • web网站设计课程设计报告(实训报告)

    热门讨论 2010-01-05 19:25:42
    这个东西交作业很好不错哦 web网站设计 设计报告 实训报告 个人网站设计实训报告 web网站设计实训报告
  • web大作业,个人主页。包含完整代码,以及规范文档。是自己用作web网页制作的期中作业。
  • web课程设计:网上商城系统

    千次阅读 2021-03-09 13:10:22
    web课程设计:网上商城系统 项目详情: 课程设计:网上商城系统 2019.6-2019.7 1.1 选题目的及意义 网上购物系统构建初始目标主要是面对广大消费者,网上商店成本较低,而且运营简单方便,不需要太多人力来管理,...
  • 校园班级网页设计制作网页作品介绍作品首页截图网页代码预览作品来源 网页作品介绍 班级网页设计HTML静态网页设计作业使用dreamweaver制作,采用DIV+CSS布局,共5页,首页使用CSS排版比较丰富,色彩鲜明有活力。顶部...
  • HTML我的家乡杭州网页设计作业源码(div+css)~ HTML+CSS+JS网页设计期末课程大作业 ~ web前端开发技术 ~ web课程设计网页规划与设计 ~HTML期末大作业 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大...
  • 网页设计课程主页

    2016-09-07 22:05:42
    网页设计与制作(HTML+CSS)》是面向计算机相关专业的一门专业基础课,涉及计算机基础、互联网等内容,通过本课程的学习,学生能够了解网页web发展历史及其未来方向,熟悉网页设计流程、掌握网络中常见的网页布局...
  • web课程设计——手机销售网

    千次阅读 多人点赞 2019-06-12 01:53:59
    一、实验要求 使用JSP技术建立一个简单的手机销售网。 采用MVC模式实现各个模块,数据库使用MySQL数据库 系统后台开发 1、 在导航条中添加一个后台...4、 具体界面自行设计 二、开发环境&技术 Myecplise10...
  • 16级 Web前端设计课程主页

    千次阅读 2016-09-07 22:02:35
    课程着重介绍Web前端设计中涉及到的HTML语言、CSS+DIV和JavaScript,掌握CSS的布局和定位的方法,掌握CSS网站元素的设计,系统地讲解CSS样式的基础理论和实际运用技术,并结合实例来讲解层叠样式表与层布局相结合...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 23,256
精华内容 9,302
关键字:

web网页课程设计