网页设计

千次阅读 2019-04-04 18:25:25

网页设计 (制作工具Adobephotosh) （作者:罗天绪撰写时间：4月2日）首先打开Adobephotosh（简称）Ps，要2018版的Ps,然后打开进入主界面，在顶部的第一个文件哪里点击文件，然后在文件哪里点击新建就出了个页面也...

网页设计
(制作工具Adobephotosh)
（作者:罗天绪撰写时间：4月2日）
首先打开Adobephotosh（简称）Ps，要2018版的Ps,然后打开进入主界面，在顶部的第一个文件哪里点击文件，然后在文件哪里点击新建就出了个页面也可以快捷键（ctrl+N）在哪里创立一个需要的一个图层。然后在做设计网页之前上网找一些需要的图片和一些素材来进行排版和设计。
我设计的这个网页是食品的网页。
在这里插入图片描述

这是一个由多种食品组成的网站，其中这个网站包含了那些食品呢？比如蛋糕，牛排，咖啡，披萨，等等一系列的食品。在这个网站我们是采用了8种颜色搭成的一个版面，然后
图片中间距离是2厘米，然后在打上一些文字就基本完成了。
下面说一下这个网站的颜色配置，这个网站的主题色是草莓红，白色，，标题色是黑色，淡橙色，红色，辅助色是棕色，中灰色，提示色是红色。
文字搭配，这个网站用的文字都是微软雅黑，主题用的是14.7号，12号，第二版面，
用的是30号，和11号，后面这些用的是18.35号，23号，27.68号，18.99号，10号。

收起

展开全文

79套网页设计模版
千次下载 热门讨论 2012-03-27 16:04:16
79套网页设计模版
收起
网页设计作业简单的个人网页设计
热门讨论 2009-12-03 13:52:01
简单的个人网页设计简单的个人网页设计简单的个人网页设计简单的个人网页设计简单的个人网页设计简单的个人网页设计简单的个人网页设计简单的个人网页设计
收起

网页设计案例马拉松宣传网页设计

千次阅读 多人点赞 2020-02-02 23:02:59

本篇博客介绍一个典型而有效的网页设计案例，这个案例用到了HTML，HTML5，CSS，CSS3，JavaScript。囊括了主页设计，联系方式页面设计，旋转唱片音乐页面，图片库页面，幻灯片设计，表单页面等等，同时布局方法具有...

博客简介
本篇博客介绍一个典型而有效的网页设计案例，这个案例用到了HTML，HTML5，CSS，CSS3，JavaScript。囊括了主页设计，联系方式页面设计，  旋转唱片音乐页面，图片库页面，幻灯片设计，表单页面等等，最后提供了源码下载。源码地址

资源结构
页面结构
导航栏设计
幻灯片
网页内部导航
图片库
旋转唱片音乐页面
增强表格
联系方式页面
压缩代码

样例展示
可能会有广告，请直接跳过看下面的代码


                        
                        网页设计——一张介绍马拉松keep训练的网页
                    


资源结构
整个图片，audio，video，HTML，以及CSS ，JavaScript文件的布局如下：


HTML的文件设置
我们设想，整个网页由多个结构相似的页面组成，通过页面上部的导航栏链接起来。那么为什么不 给所有的页面设计一个模板 呢？设置好模板之后，每个页面只需要在当前模板的基础上稍加改动就能达到我们想要的效果。这样整个模板的重用性将会大大提高，也给后期的维护带来便利




CSS文件设置
令人眼花缭乱的CSS文件如何设置？关键在于你的文件布局是否有利于后期的维护，如果布局不合理，那么CSS的设置将会是一个让人头疼的问题，这里我们的处理办法是：按照布局layout，颜色color，排版typography归为三个文件进行处理，最后在basic.css文件中综合起来：
@import url(color.css);
@import url(layout.css);
@import url(typography.css);


JScript文件设置
关于JavaScript文件，我们一般是尽可能的少，尽可能的让JavaScript综合在一个文件里。为什么？因为一些jS函数是能够重用的，我们尽量将所有的JS放在一个文件中，方便函数重用。当然在特殊情况下我们可以创建格外的JS文件：


资源文件设置
我们将照片，音频，视频分别放在images，audioes，videoes文件中：


页面结构
关于页面结构，我们主要关注的是template模板页面的布局，这个布局很大程度上决定了我们整个网页的布局：
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Are you ready for the marathon?</title>
	<link rel="stylesheet" type="text/css" href="styles/basic.css">
</head>
<body id="about1">
<header id="about2">
	<img src="images/logo.jpg" width="640">
	<nav>
		<ul>
			<li><a href="Home.html"> Home</a></li>
			<li><a href="About.html"> About</a></li>
			<li><a href="Photos.html"> Photos</a> </li>   
			<li><a href="Music.html"> Music</a> </li>
			<li><a href="Schedule.html"> Schedule</a> </li>
			<li><a href="Contact.html"> Contact</a> </li>
		</ul>
	</nav>
</header>
<article>
	<h1>Are you ready for the marathon?</h1>
	<p>
		There is no doubt that Kipchog is a hero, in fact we can be heroes too. If you want to run a marathon like him, you'll be ready for a marathon. 
		But how to preper for a marathon？
		It is difficult for a novice who has just entered the marathon to be fully prepared, so let's introduce it in a few simple ways. 
	</p>
	<h1>tips</h1>
		<ul id="tip">
			<li><a href="#equipment">equipment</a></li>
			<li><a href="#training">training</a></li>
			<li><a href="#food">food</a></li>
		</ul>		

	<h2>training</h2>
	<p>Behind every top athlete is endless training. After basic preparation, you have to start hard training. 
	Training is not an endless repetition of a process, but a scientific and effective arrangement of implementation time. </p>

</article>
	<script src="scriptes/global.js"></script>
</body>
</html>

这里我们主要是按照如下布局来设置的：




导航栏设计
导航栏布局
导航栏的设计一般是采用的无序列表，列表内部嵌套a标签超链接，我们给超链接设置样式，并且设置display样式为block来实现,同时设置a标签的内外边距可以有较好的展示效果：
HTML：
	<nav>
		<ul>
			<li><a href="Home.html"> Home</a></li>
			<li><a href="About.html"> About</a></li>
			<li><a href="Photos.html"> Photos</a> </li>   
			<li><a href="Music.html"> Music</a> </li>
			<li><a href="Schedule.html"> Schedule</a> </li>
			<li><a href="Contact.html"> Contact</a> </li>
		</ul>
	</nav>

CSS：
header nav{
	border:0.1em solid;
	border-top: 0;
	padding-left: 10%;
	border-radius: 3px;
}
header nav ul{
	width: 100%;
	overflow: hidden;
	border-left: 0.1em solid;
}
header nav li{
	display: inline;
	border-radius: 3px;
}
header nav li a{
	display: block;
	float: left;
	padding: 0.7em 2em;
	border-right: 0.1em solid;
}
header nav{
	font-family: "Lucida Grande","Helvetica","Arial",sans-serif;
}
header nav a{
	text-decoration: none;
	font-weight: bold;
}

当前页面的导航栏选项点亮
我们想要实现这样一个效果，我们点击链接，到达相应的链接网页。我们想要看到当前所在网页的导航栏选项处于高亮的状态。这样的效果很好实现，只需要获取当前网页的链接，历遍nav中的超链接，对比，如果相同则将其class属性设置为高亮的类here，用
window.location.href.indexOf(url)

获取当前网页，并且进行对比。
function prepareSlidshow()
{
	if(!document.getElementById) return false;
	if(!document.getElementsByTagName) return false;
	var slideShow=document.createElement("div");
	slideShow.setAttribute("id","slideShow");
	
	var preview=document.createElement("img");
	preview.setAttribute("src","images/test.jpg");
	preview.setAttribute("alt","Choose a picture");
	preview.setAttribute("id","preview");
	slideShow.appendChild(preview);

	var gallery=document.getElementById("gallery");//找到插入位置
	insertAfter(slideShow,gallery);

	preview.style.position="absolute";
	preview.style.left="0px";
	preview.style.top="0px";
	var move=0;
	loop("preview",move,2000,20);
}
function hightLightPage()
{
	if(!document.getElementsByTagName) return false;
	if(!document.getElementById) return false;
	var header=document.getElementsByTagName("header");
	if(header.length==0) return false;
	var vans=header[0].getElementsByTagName("ul");
	if(vans.length==0) return false;
	var links=vans[0].getElementsByTagName("a");
	for(var i=0;i<links.length;i++)
	{
		var url=links[i].getAttribute("href");
		if(window.location.href.indexOf(url)!=-1)
		{
			links[i].className="here";
		}
	}
}

幻灯片设计
和很多网站类似（比如说淘宝，京东）有一个幻灯片的展示区域，我们实现的思路有很多，可以直接用canvas画布设置动画来实现，也可以将几张图片拼接成一张横向的长图，然后设计一个loop函数来递归地移动这张图片，到达边界后又移回起点：
function loop(id,move,time,movetime)//动画
{
	if(move<=-2000) move=0;//边界
	else move-=400;
	moveElement(id,move,0,movetime);
	//loop(id,move,time,movetime);
	var repeat="loop('"+id+"',"+move+","+time+","+movetime+")";
	t=setTimeout(repeat,time);
}
function moveElement(elementId,final_x,final_y,interval)
{
	if(!document.getElementById) return false;
	if(!document.getElementById(elementId)) return false;
	var elem=document.getElementById(elementId);
	var x=parseInt(elem.style.left);
	var y=parseInt(elem.style.top);
	if(elem.timer) clearTimeout(elem.timer);
	if(x==final_x&&y==final_y) return true;//边界条件
	var dis_x,dis_y;
	dis_x=Math.ceil((final_x-x)/10);//向上取整
	x+=dis_x;
	//round向下取整
	dis_y=Math.ceil((final_y-y)/10);//向上取整
	y+=dis_y;
	elem.style.left=x+"px";
	elem.style.top=y+"px";
	var repeat="moveElement('"+elementId+"',"+final_x+","+final_y+","+interval+")";
	elem.timer=setTimeout(repeat,interval);//定时器设置，递归调用
}


网页内部导航
比如说CSDN博客的文章，右侧有一个内部导航栏，点击一个标题我们就能跳转到网页中的相应段落，网页内部导航是一种常见的导航形式，对于长篇幅的页面十分重要，如何实现？

在网页内部设置一个超链接列表
给每一个标题设置一个id
将超链接列表的超链接href设置为相应的“”#”+id

	<h1>tips</h1>
		<ul id="tip">
			<li><a href="#equipment">equipment</a></li>
			<li><a href="#training">training</a></li>
			<li><a href="#food">food</a></li>
		</ul>		
	<section id="equipment">
		<h2>Equipment</h2>
		<p>As the king of running shoes, Asics is undoubtedly the best choice.</p>
	</section>

	<section id="training">
		<h2>training</h2>
		<p>Behind every top athlete is endless training. After basic preparation</p>
	</section>

	<section id="food">
		<h2>Food</h2>
		<p>Take care of rest and recovery to avoid pain.</p>
	</section>



section标签不是必要的，我们完全可以将id设置在h1内部.< section > 只是标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
图片库
可以将所有图片直接统一放在网页里，但是这样加载网页就会十分缓慢。我们也可以为每一张图片设计一个像网页，就不存在加载缓慢的问题，但是这对于设计人员来说是繁琐的，这个时候我们可以考虑创建一个图片库：

把整个图片库的浏览链接集中放在图片库主页里，只在用户点击了这个主页的链接时才把相应的链接发送给他，图片库里阻断click的方法值得回味，这里我直接贴出代码，因为在前面我已经介绍过了，直接参考我之前的博客即可：

图片库经典案例
图片库改进版
图片库最终版

function prepareGallery()
{
	if(!document.getElementsByTagName) return false;
	if(!document.getElementById) return false;
	if(!document.getElementById("photoGallery")) return false;
	var gallery=document.getElementById("photoGallery");
	var links=gallery.getElementsByTagName("a");
	for(var i=0;i<links.length;i++)
	{
		links[i].onclick=function()
		{
			return !showPic(this);//调用showPic函数
		}
		links[i].onkeypress=links[i].onclick;
	}                                                         
}
function showPic(element){
	if(!document.getElementById("placeholder")) return false;
	var source=element.getAttribute("href");//获取元素节点的src属性值
	var placeholder=document.getElementById("placeholder");//查找placeholder元素节点
	if(placeholder.nodeName!="IMG") return false;//nodeName总是返回大写字母
	placeholder.setAttribute("src",source);//设置placeholder的src属性值为
	if(document.getElementById("description"))
	{
		var description=document.getElementById("description");//获取元素
		var text=element.getAttribute("title")?element.getAttribute("title"):"";
		//查找成功则获取title，否则获取空串,这样不会因为无法访问title而导致图片也无法加载
		if (description.firstChild.nodeType==3) description.firstChild.nodeValue=text;//当节点类型为3的时候，添加
	}
	return true;
}
function preparePlaceHolder()
{
	if(!document.createTextNode) return false;
	if(!document.createElement) return false;
	if(!document.getElementById) return false;
	if(!document.getElementById("photoGallery")) return false;
	var placeholder=document.createElement("img");
	placeholder.setAttribute("id","placeholder");
	placeholder.setAttribute("src","images/background6.jpg");
	placeholder.setAttribute("alt","This is my photoGallery");
	placeholder.setAttribute("height","400");
	placeholder.setAttribute("width","629");
	var description=document.createElement("p");
	description.setAttribute("id","description");
	var txt=document.createTextNode("Choose an image");
	description.appendChild(txt);
	var photoGallery=document.getElementById("photoGallery");
	//photoGallery.parentNode.insertBefore(placeholder,photoGallery);
	//photoGallery.parentNode.insertBefore(description,photoGallery);
	insertAfter(placeholder,photoGallery);
	insertAfter(description,placeholder);
}


旋转唱片音乐页面

用audio插入音频
设置div插入照片，设置边框为圆形
设置CSS动画
设置监听，当点击播放时，设置div的class为animation2，点击暂停设置div的class为animation2
更为详细的展示可以参见唱片旋转播放效果

CSS 设置动画关键帧，设置两个class对应停止和永动旋转：
.animation1{	
	width: 200px;
	height: 200px;
	border:1px solid white;
	border-radius: 100px;
	overflow: hidden;
	float: left;
	animation:frame 6s  linear paused;
}
.animation2{	
	width: 200px;
	height: 200px;
	border:1px solid white;
	border-radius: 100px;
	overflow: hidden;
	float: left;
	animation:frame 6s  linear infinite;
}
.animation1 img,.animation2 img{
	width: 200px;
	height: 200px;

}
@keyframes frame{
	0% {transform:rotate(0deg); }
	20%{transform: rotate(72deg);}
	40%{transform: rotate(144deg);}
	60%{transform: rotate(216deg);}
	80%{transform: rotate(288deg);}
	100%{transform: rotate(360deg);}
}

Jscript：
function addLoadEvent(func)
{
	var oldonload=window.onload;
	if(typeof window.onload!='function')//未被绑定
	{
		window.onload=func;
	}
	else
	{
		window.onload=function()//匿名函数添加
		{
			oldonload();
			func();
		}
	}
}
//唱片的旋转
function player(audio,pic)
{
	if(audio.paused)//当前状态
	{
		pic.setAttribute("class","animation1");
	}
	else
	{
		pic.setAttribute("class","animation2");
	}
}
function playe_Pause()
{
	if(!document.getElementsByTagName) return false;
	var audioes=document.getElementsByTagName("audio");
	var pictures=document.getElementsByTagName('article')[0].getElementsByTagName("img");
	if(!audioes||!pictures) return false;

	audioes[0].addEventListener("pause",function(){
		player(audioes[0],pictures[0].parentNode);
	});
	audioes[0].addEventListener("play",function(){
		player(audioes[0],pictures[0].parentNode);
	});			
	audioes[1].addEventListener("pause",function(){
		player(audioes[1],pictures[1].parentNode);
	});
	audioes[1].addEventListener("play",function(){
		player(audioes[1],pictures[1].parentNode);
	});		
	audioes[2].addEventListener("pause",function(){
		player(audioes[2],pictures[2].parentNode);
	});
	audioes[2].addEventListener("play",function(){
		player(audioes[2],pictures[2].parentNode);
	});	
	audioes[3].addEventListener("pause",function(){
		player(audioes[3],pictures[3].parentNode);
	});
	audioes[3].addEventListener("play",function(){
		player(audioes[3],pictures[3].parentNode);
	});		
	audioes[4].addEventListener("pause",function(){
		player(audioes[4],pictures[4].parentNode);
	});
	audioes[4].addEventListener("play",function(){
		player(audioes[4],pictures[4].parentNode);
	});	
	audioes[5].addEventListener("pause",function(){
		player(audioes[5],pictures[5].parentNode);
	});
	audioes[5].addEventListener("play",function(){
		player(audioes[5],pictures[5].parentNode);
	});		
	audioes[6].addEventListener("pause",function(){
		player(audioes[6],pictures[6].parentNode);
	});
	audioes[6].addEventListener("play",function(){
		player(audioes[6],pictures[6].parentNode);
	});				
	
}
addLoadEvent(playe_Pause);


增强表格
关于表单的增强，我们主要是设置表单的奇偶行的颜色以及鼠标悬停时的高光。完全可以采用CSS实现，但是这里我们采用的是JavaScript，可以给所有的表格都设置这样的样式：

历遍表格的tr行，如果是奇数行更新className为’odd’
历遍表格的tr行，如果是偶数行更新className为’even’
历遍表格的tr行，设置监听，如果鼠标悬停，则先保存当前oldclass，更新为新的styleover。如果鼠标移出，则将oldclass设置回去。

function tripeTables()
{
	if(!document.getElementsByTagName) return false;
	var tables=document.getElementsByTagName("table");

	for(var i=0;i<tables.length;i++)
	{
		var rows=tables[i].getElementsByTagName("tr");//取得所有列
		for(var j=0;j<rows.length;j++)
		{
			if(j%2) rows[j].setAttribute("class",'odd');
				else rows[j].setAttribute("class",'even')
		}
	}
}
function HightRows()
{
	if(!document.getElementsByTagName) return false;
	var rows=document.getElementsByTagName("tr");
	var oldClass;
	for(var i=0;i<rows.length;i++)
	{
		rows[i].onmouseover=function()
		{
			oldClass=this.getAttribute("class");
			this.setAttribute("class","styleover")
		}
		rows[i].onmouseout=function()
		{
			this.className=oldClass;
		}
	}
}
addLoadEvent(tripeTables);
addLoadEvent(HightRows);


联系方式页面
联系方式页面的设计时绝对必要的，为了让用户能够很方便的反馈，获取联系方式，我们可以用form表单完成，得益于HTML5中表单的新属性，给我们提供了很多便捷的标签。在开始设置之前，我们可以简单地用标签设置标记：
创建标记

post输入框，输入Name信息
email输入框，输入联系邮件
textarea输入框，输入文本
submit提按钮，提交当前页面
label可以在点击name时获取焦点
placeholder占位符可以在文本框里显示对应的提示消息

	<form method="post" action="submit.html">
	<fieldset>
		<p>
			<label for="name">Name:</label>
			<input type="post" id="name" name="name" placeholder="Your name" required="required">
		</p>
		<p>
			<label for="email">Email:</label>
			<input type="email" id="email" name="email" placeholder="Your email address" required="required"> 
		</p>
		<p>
			<label for="message">Message:</label>
			<textarea cols="45" rows="7" id="message" name="message" require="require" placeholder="Write your message here."></textarea>
		</p>
		<input  id="submit" type="submit" value="Send">
	</fieldset>
	</form>

设置样式
必要的CSS样式，设置如下
label{
	display: block;
}
fieldset{
	border:0;
}
input{
	height: 18px;
	border-radius: 5px;
	padding: 8px;
	border:1px solid white;
	line-height: 18px;
}
textarea{
	border-radius: 5px;
}
#submit{
	background-color: #9370DB;
	font-weight: bold;
	width: 65px;
	height: 40px;
	border-radius: 5px;
	padding: 8px;
	border:1px solid white;
	line-height: 18px;
}
input:hover{
	transform: scale(1.1);
}


表单验证
我们可以用JavaScript设置一个验证函数，进行简单的格式处理一般验证是否填入，邮件格式是否正确，我们完全可以设置两个函数来验证ifFilll和isEmail但是得益于：

具有require属性的表格不能为空
email表单会自动检验是email格式

HTML5的新标签帮我们更加完善地解决了这些问题，我们不需要过度的预处理，切记JScript脚本写得不好不如没有编写脚本验证



提交表单
关于表单的提交，此处设置了一个新的页面submit.html，当用户提交成功后页面就会自动跳转到submit页面，显示感谢信息：

< form method=“post” action=“submit.html” >设置form标签的action属性，提交表单后将会跳转到相应页面
建立一个新的页面submit.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Are you ready for the marathon?</title>
	<link rel="stylesheet" type="text/css" href="styles/basic.css">
</head>
<body id="contact1">
<header id="contact2">
	<img src="images/logo.jpg" width="640">
	<nav>
		<ul>
			<li><a href="Home.html"> Home</a></li>
			<li><a href="About.html"> About</a></li>
			<li><a href="Photos.html"> Photos</a> </li>   
			<li><a href="Music.html"> Music</a> </li>
			<li><a href="Schedule.html"> Schedule</a> </li>
			<li><a href="Contact.html"> Contact</a> </li>
		</ul>
	</nav>
</header>
<article>
	<h1>Thanks!</h1>
	<br>
	<br>
	<h4>Thanks for contacting us.We will get back to you as soon as we can.</h4>
	<br>
	<br>
	<br>
	<br>
</article>
	<script src="scriptes/global.js"></script>
</body>
</html>


压缩代码
关于代码压缩我们不再赘述，我们在谷歌的Closure Compiler上粘贴代码就能得到压缩的代码了，为了减少用户的网页加载时间，增强体验感，压缩代码不可忽略，十分重要。
最后我们的网页就设置完成了，虽然说还有很多地方需要改进，比如说最后表单的提交可以用Ajax技术进行优化，界面设计可以更加完美，但是这张网页还是十分具有价值和启发意义，希望所有的Web爱好者，都能在Web开发这条路上越走越宽，越走越远，永远保持一颗积极进取，不断开拓的心。

                        
                        网页设计——一张介绍马拉松keep训练的网页

收起

展开全文

网页设计课程设计报告

万次阅读 多人点赞 2019-03-01 21:45:11

学号课程设计课程名称 网页设计 题目鑫晨之家特效网站设计专业软件工程 ...


			学号
			
			
			 
			
		


 

 

 

 

 

 

 

课    程   设   计

 

课程名称    网页设计   

                  

 


			题       目
			
			
			    鑫晨之家特效网站设计    
			
		

			专       业
			
			
			         软件工程               
			
		

			班       级
			
			
			         1173班             
			
		

			姓       名
			
			
			                                    
			
		

			成       绩
			
			
			_____________________________
			
		

			指 导 老 师
			
			
			                                                  

			 
			
		
 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

             2019年 1 月 6日至 2019 年 1 月 13 日

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

 

课 程 设 计 任 务 书

 

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

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

 

一、课程设计目的与任务

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

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

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

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

企业LOGO、网站的主要栏目和概况介绍
	产品介绍
	图片
	动画
	网页除用到框架外，还使用CSS样式
	网页美观、页面内容丰富
三、学时分配进度安排


			序号
			
			
			设计内容
			
			
			所用时间
			
		

			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 测试运行

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

运行网页后自动运行爱心飘落特效和图片轮播特效以及短视频播放。
	点击右上角的按钮可显示和隐藏背景切换的可选图片区域，点击可选图片区域里面的图片可以网页背景切换成对应的图片。
	点击由下划线的文字可进入对应的网页页面。
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分
			
			
			 
			
		

			   

			最终评定等级为：

			                          指导老师签字：               

			 

			                                               年    月    日

收起

展开全文

期末网页设计 作业大学生高中生 网页设计作业成品下载
千次下载 热门讨论 2012-06-09 09:20:39
期末网页设计 作业大学生高中生 网页设计作业成品下载dreamweaver/frontpage网页设计制作大作业，期末考试网页作业下载。
收起
咖啡网页设计作品简单DIV学生网页设计成品 HTML网页学生网页制作模板下载
2020-11-19 21:09:47
咖啡网页设计作品网页制作介绍网页首页效果网页下载方式网页制作介绍咖啡主题大学生网页设计作品，共10个页面，无任何复杂技术及特效，页面宽度1200px，顶部导航使用CSS制作了鼠标经过白色效果制作很简单，页面配...
```
咖啡网页设计作品
网页制作介绍
网页首页效果
网页下载方式

网页制作介绍
咖啡主题大学生网页设计作品，共10个页面，无任何复杂技术及特效，页面宽度1200px，顶部导航使用CSS制作了鼠标经过白色效果制作很简单，页面配图漂亮，内容丰富全面。
网页首页效果

网页下载方式
www.stu-works.com/html/meishi/159.html
```
收起
展开全文
html css
HTML网页设计结课作业——19张精美网页！
万次阅读 多人点赞 2019-12-19 18:16:36
什么高数啊、线代啊、C语言、网页设计等，简直让人头大。你还在为网页设计老师的作业要求感到头大？网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本...
收起
HTML CSS JavaScript
教你玩转HTML(html5)h5网页设计，网站开发
万人学习 2015-07-17 12:31:36
教你玩转HTML(html5)h5网页设计，网站开
收起
ps 网页设计
千次阅读 2019-04-08 15:13:42
网页设计 网页设计一般分为三种大类：功能型网页设计，形象性网页设计，信息型网页设计。设计网页的目的不同，应选择不同的网页策划与设计方案。 2.网页设计的目标，是通过使用合理的颜色，字体，图片，样式进行页面...
收起
学生电影网页设计作品影视主题学生网页制作简单网页设计作业静态影视介绍网页模板
千次阅读 2020-11-19 21:11:47
学生电影八佰网页设计作品制作网页介绍网页演示网页下载方式网页介绍电影学生网页设计作品使用DIV CSS布局制作，包含影片信息、剧情简介、角色介绍、幕后制作、观影评价 5个页面，整个作品比较完善，细节处理到位...
收起
html css
6天快速掌握网页设计
千人学习 2019-06-28 09:57:49
本套课程主要讲解了电商网页设计、企业网站设计规范、视觉设计技法，建站公司页面设计及实战练习。
收起
ui设计 ui自动化 element ui
后台网页设计
2019-05-17 17:09:16
后台网页设计最主要分好步骤去实施，后台网页设计的步骤有很多比如：原型图设计、用户体验设计、网页设计、流程设计……都是制作后台网页该有的设计，那么我就来讲一讲原型图设计、用户体验设计吧！原型图设计也是...
收起
网页设计1
千次阅读 2019-11-30 17:50:12
HTML与CSS网页设计概述 Web基本概念一.认识网页 1.Web中文译为“网页”。 2.网站的源文件是一个纯文本文件。而浏览器平常看到的图片，视频等，都是这些文本组成的代码被浏览器渲染后的结果。 3.网站是多个网页...
收起
故宫学生网页设计作品 dreamweaver作业静态HTML网页设计模板旅游景点网页作业制作
千次阅读 2020-11-18 10:51:30
学生北京故宫旅游网页设计作品作品介绍作品演示作品下载作品介绍本学生网站作业成品主题为北京故宫网页设计，采用DIV CSS布局制作，共5个页面，主要内容包括故宫简介、建筑形制、建筑布局、馆藏文物、参观信息方面...
收起
html css web设计
校园网页设计成品学校班级网页制作模板大学生静态HTML网页源码 dreamweaver网页作业简单网页课程成品
千次阅读 多人点赞 2020-11-19 17:26:22
校园班级网页设计制作网页作品介绍作品首页截图网页代码预览作品来源网页作品介绍班级网页设计HTML静态网页设计作业使用dreamweaver制作，采用DIV+CSS布局，共5页，首页使用CSS排版比较丰富，色彩鲜明有活力。顶部...
收起
html css
网页设计小记
2017-04-28 10:17:33
网页设计 网页设计之SEO 网页设计之网站结构草图如何制作网站内容网站设计指导一、网页设计SEO 文件名采用小写字母使用正确的扩展名用短横线分隔单词二、网页设计之网站结构草图内容战略用户体验（UX）设计...
收起
结构
网页设计流程
千次阅读 2019-03-02 11:27:20
网页设计可以有两种方式实现，一种是传统的表格布局方式，另一种就是通过css布局方式。 1。表格布局方式就是画网页。使用Photoshop或fireworks等工具画图，切图，最后输出为html页面，这种设计方式不考虑代码质量...
收起
JavaScript网页设计300例
热门讨论 2014-07-28 13:50:12
JavaScript网页设计300例
收起
js代码
Dreamweaver网页设计作业下载
千次下载 热门讨论 2010-04-11 22:57:19
我们寝室四个人的四份做好的网页设计作业！成品四个！Dreamweaver做的！全部是满分作业哦~~！传上来大家看看！
收起
html网页设计大作业
热门讨论 2018-01-04 16:36:21
html网页设计大作业，关于植物，包含7个页面，css文件
收起
2020版网页设计教程零基础全套（设计师必备）
千人学习 2020-01-16 14:31:40
本套课程是一套特别全面的网页设计教程，可以让你快速掌握网页设计知识及流程。学完掌握知识点：1.互联网认知及思维；2.基本概念（HTTP、FTP传输协议，域名）；3.屏幕分辨率及内容宽度；4.网页结构（页眉、内容、...
收起
ui设计 ui自动化 element ui
web课程设计网页设计源代码
热门讨论 2011-09-01 22:21:54
利用web网页设计技术（html+css+javascript）进行网站开发，含源代码，以及网页所用的图片，可做课程设计参考
收起
初级学会响应式网页设计
千人学习 2017-01-24 17:15:49
编程世界里也可以步步封装，网页设计/网站制作也将会越来越简单。技术不难，只要你能找到适合你的框架，如wordpress用来建网站，jquery用来写特效，而这套课程的主角是网页设计之Bootstrap前端框架。
收起
简单个人网页设计作业静态HTML个人博客主页 DW个人网站模板下载大学生简单个人网页...学生个人网页设计作业
千次阅读 多人点赞 2020-11-14 14:50:16
学生简单静态个人主页网页设计作品作品介绍知识点应用作品简介绍网页演示网页首页演示源码文件展示网页代码预览作品修改作品下载作品介绍知识点应用背景音乐、背景图片、留言表单、鼠标经过作品简介绍学生个人...
收起
html css
99套经典网页设计模版 网页设计模板学习网页制作
千次阅读 2014-06-27 23:18:16
99套经典网页设计模版 网页设计模板学习网页制作下载地址：http://download.csdn.net/detail/mekeji99886/7562211
收起
网页设计速成之Dreamweaver
万人学习 2015-02-05 17:48:04
本课程由有着多年网页设计经验的谢青老师精心打造，课程从基础讲起，讲述页面中的标签、页面中的布局与框架、HTML样式表、页面中的表单、经典项目实战等内容。课程内容丰富全面，非常适合初级学习者。
收起
网站设计与制作数字钟的设计与制作 lc滤波器设计与制作
响应式网页设计
千次阅读 2019-05-24 15:49:36
什么是响应式网页设计？响应式网页设计使您的网页在所有设备上都很好看。响应式网页设计仅使用HTML和CSS。响应式网页设计不是程序或JavaScript。为所有用户设计最佳体验可以使用许多不同的设备查看网页：...
收起
html5 css3

题目	鑫晨之家特效网站设计
专业	软件工程
班级	1173班
姓名
成绩	_____________________________
指导老师

序号	设计内容	所用时间
1	下发任务书，集中讲解课程设计原理与方法。系统需求分析、架构及界面设计	1天
2	网页设计	1天
3	网页设计	1天
4	调试及撰写报告	1天
5	答辩	1天
合计		1周

评分依据	评分成绩
1、学习态度认真、遵守纪律	10
2、设计分析合理性	10
3、设计方案正确性、可行性	20
4、设计结果正确性	30
5、设计报告的规范性	10
6、实践环节的独立性与主动性	10
7、设计验收	10
总分	100分

周次	星期一	星期二	星期三	星期四	星期五
第18周	第1-4节		第3-6节		第3-4节
地点	现教221		现教221		现教221

课程设计题目
课程设计学生答辩或质疑记录：问题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分
最终评定等级为：指导老师签字：年月日

网页设计

79套网页设计模版

网页设计作业简单的个人网页设计

网页设计案例 马拉松宣传网页设计

博客简介

样例展示

资源结构

HTML的文件设置

CSS文件设置

JScript文件设置

资源文件设置

页面结构

导航栏设计

导航栏布局

当前页面的导航栏选项点亮

幻灯片设计

网页内部导航

图片库

旋转唱片音乐页面

增强表格

联系方式页面

创建标记

设置样式

表单验证

提交表单

压缩代码

网页设计课程设计报告

1 设计题目

2 开发环境

3 开发工具

4 完成时间

5 设计思想

5.1 网页设计思想

5.2 设计方案

6 设计过程及设计步骤

6.1 网页结构设计

6.2 CSS样式设计

6.3 爱心飘落效果设计

6.4 背景切换效果设计

6.5 轮播图效果设计

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

7 测试运行

8 评价与修订

9设计体会

期末网页设计 作业 大学生 高中生 网页设计作业成品下载

咖啡网页设计作品 简单DIV学生网页设计成品 HTML网页学生网页制作模板下载

咖啡网页设计作品

网页制作介绍

网页首页效果

网页下载方式

HTML网页设计结课作业——19张精美网页！

教你玩转HTML(html5)h5网页设计，网站开发

ps 网页设计

学生电影网页设计作品 影视主题学生网页制作 简单网页设计作业 静态影视介绍网页模板

6天快速掌握网页设计

后台网页设计

网页设计1

故宫学生网页设计作品 dreamweaver作业静态HTML网页设计模板 旅游景点网页作业制作

校园网页设计成品 学校班级网页制作模板 大学生静态HTML网页源码 dreamweaver网页作业 简单网页课程成品

网页设计小记

网页设计流程

JavaScript网页设计300例

Dreamweaver网页设计作业下载

html网页设计大作业

2020版网页设计教程零基础全套（设计师必备）

web课程设计网页设计源代码

初级学会响应式网页设计

简单个人网页设计作业 静态HTML个人博客主页 DW个人网站模板下载 大学生简单个人网页...学生个人网页设计作业

99套经典网页设计模版 网页设计模板 学习网页制作

网页设计速成之Dreamweaver

响应式网页设计

网页设计

Markdown 标记语言

P1005 [NOIP2007 提高组] 矩阵取数游戏（区间dp+__int128）

做菜 : 玉米排骨汤

PPT大神之路高清教程

小程序的全栈开发新时代

【黑苹果EFI】联想昭阳E40-80的自制EFI，Opencore 0.6.6

ASHRAE_Extended_Environmental_Envelope_Final_Aug_1_2008.pdf

使用dockerfile-maven-plugin将java项目打包并推送到阿里云私服

网页设计案例马拉松宣传网页设计

期末网页设计作业大学生高中生网页设计作业成品下载

咖啡网页设计作品简单DIV学生网页设计成品 HTML网页学生网页制作模板下载

学生电影网页设计作品影视主题学生网页制作简单网页设计作业静态影视介绍网页模板

故宫学生网页设计作品 dreamweaver作业静态HTML网页设计模板旅游景点网页作业制作

校园网页设计成品学校班级网页制作模板大学生静态HTML网页源码 dreamweaver网页作业简单网页课程成品

简单个人网页设计作业静态HTML个人博客主页 DW个人网站模板下载大学生简单个人网页...学生个人网页设计作业

99套经典网页设计模版网页设计模板学习网页制作