资源描述
通识课之课程设计
课程名称
网页制作教程 （10019601）
设计名称
你的要求我来设计
学院(系)
机械与能源工程学院
专 业
能源与动力
学生姓名
代海斌
学号
1351986
2016-2017 学年 第 1 学期
目 录
1静态网页的页面控制 1
1.1页面效果截屏 1
1.2源代码 1
2 CSS布局 2
2.1页面效果截屏 2
2.2源代码 2
3 多媒体设计与制作 4
3.1制作过程截屏（制作中间结果放在2×2表格中,无代码） 5
4 JS控制 5
4.1页面效果截屏 .5
4.2源代码 .5
5 交互式网页中数据在页面间传递 7
5.1页面效果截屏（2个页面截屏放于1×2表格） 7
5.2源代码 .7
6交互式网页中数据在数据库中的存取 .9
6.1页面效果截屏（2个页面截屏放于1×2表格） .9
6.2源代码 .9
7虚拟网站首页设计制作 11
7.1页面效果截屏(无代码) 11
7.2网站的盈利模式与创新说明 12
10 / 12
1页面控制
1.1页面效果截屏
1.2 源代码
<html>
<head>
<title>两年来第一次计算机上的作业</title>
<head>
<body background="135.jpg">
<front size=50>这是第一个作业，我得好好做表明我端正的学习态度</front>
<img src="9.png"align=""border="" width="50" height="35" hspace="20" vspace="20"><p>
<front size=30>先弄个表格,开始第一步</front><p>
<TABLE border=1 align="center" width="80%" height="150">
<TR ALIGN="CENTER">
<Td><front size=20>我原本是山中一颗包治百病的板蓝根</front></Td>
<Td><img src="1.jpg" align="" border="1" width="120" height="75" hspace="20" vspace="20"></Td>
</TR>
<TR ALIGN="CENTER">
<Td><front size=20>我太累了，太辛苦了</front></Td>
<Td><img src="2.jpg" align="" border="1" width="120" height="75" hspace="20" vspace="20"></Td>
</TR>
</TABLE>
<marquee scrolldelay="100"><img src="8.jpg" width=150></marquee>
<marquee>这是一只 心痛的 皮卡丘</marquee>
<p><A HREF="FONT face.html" target="_top"></A>
<form action=""
method="post">
<p>备注：
<textarea name="yj" cols="200" rows="5">请输入备注</textarea>
<br>
<input type="submit" value="不发布" name="submit">
<input type="reset" value="不重置">
</form>
</body>
</html>
2 CSS布局
2.1页面效果截屏
2.2 源代码
<html>
<head>
<style type="text/css">div.container
{width:100%;margin:0px;border:1px solid red;line-height:100%;}
div.header,fiv.footer
{padding:1em;color:brown;background-color:pink;clear:left;}h1.header
{padding:0;margin:0;}
div.left
{float:left;width:800px;margin:10;padding:1em;}
div.content
{margin-left:1px solid gray;padding:1em;}
</style>
</head>
<style type="text/css">
body
{background-image:url(22.jpg);background-repeat:repeat-z}
p{text-indent:2em;color:blue;font-size:12px;}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1 class="header">听说，微软的windows系统已经发到第十版本了，可是，我还在用win7，呜啊阿。。。</h1><div>
<div class="left"><p>为了让我与时代近一点，就用windows的图片做背景吧，ps一只爱犬</p></div>
<div class="content">
<h2>此处省略一万字，未完待续啊啊啊</h2>
<p>但是，我跟你说啊，虽然我看起来土一点</p>
<p><a href="#"class="radio">其实，我是一个有背景的人，所以我不爱随波逐流，不信你点进来看看我的身世，反正点也没用</p>
</div>
<div class="footer">其实这才是我的个人主页，上面那个是逗傻子你的，聪明的你：就点击这里</div>
</div>
</body>
</html>
3 多媒体设计与制作
4 JS控制
4.1页面效果截屏
4.2源代码
<head>
<title>皮卡丘</title>
<script language="jscript" type="text/javascript">
//漂浮广告的初始位置
var x=50,y=60;
//xin为真,则向右运动,否则向左运动.
//yin为真,则向右运动,否则向左运协.
var xin=true,yin=true;
//移动的距离
var step=1;
//移动的步长
var delay=5;
function floatAD()
{
//L左边界,T右边界
var L=T=0;
//层移动的右边界
var R=window.document.body.offsetWidth-window.document.getElementById("fly").offsetWidth;
//层移动的下边界
var B=window.document.body.offsetHeight-window.document.getElementById("fly").offsetHeight;
//层移动后的左边界
window.document.getElementById("fly").style.left=x;
//层移动后的上边界
window.document.getElementById("fly").style.top=y;
//判断水平方向
x=x+step*(xin?1:-1);
//到达边界后的处理
if(x<L){xin=true;x=L;}
if(x>R){xin=false;x=R}
//判断生直方向
y=y+step*(yin?1:-1);
//到达边界后的处理
if(y<T){yin=true;y=T;}
if(y>B){yin=false;y=B;}
//隔多少时间调用一次
setTimeout("floatAD()",delay);
}
</script>
</head>
<body onload="floatAD()">
<div id="fly" style="position:absolute; left:260px; top:180px; width:295px; height:176px; z-index:1;">
<img src="8.jpg" width="295" height="176"/>
</div>
</body>
</html>
</head>
<body onload="floatAD()">
<body background="皮卡丘.jpg">
<body>
<BGSOUND src="1001.mid" autostart=true loop=infinite>
背景音乐
</BODY>
<div id="fly" style="position:absolute; left:16px; top:80px; width:150px; height:100px; z-index:1;">
<marquee scrolldelay="100"><img src="8.jpg" width=150></marquee>
<marquee>这是一只 心痛的 皮卡丘</marquee>
<p><A HREF="FONT face.html" target="_top"></A>
<form action="" method="post">
</div>
<p style="font:italic small-caps bold 36pt,GlitzyCurl">Leaf</p>
皮卡丘是一只矮矮胖胖圆乎乎的类啮齿型神奇宝贝，全身的皮毛都是黄色的。它的耳朵很长，尖端是黑色的。它有小小的嘴巴，侧面看起来像一个数字3，还有黑色的眼睛。它的脸颊上有两个红色的圆。它的尾巴是像锯齿状的闪电，与身体相接的部分也有一片棕色的皮毛。尽管它确切来说是四足动物，更多时候它是站着并用两只后脚走路[7] 。住在森林中的它们通常以树果为食。它们用小小的电击把树果从树上打下来，这样就不必爬树，还可以顺带将其烤熟
</body>
</html>
<head>
5交互式网页中数据在页面间的传递
5.1页面效果截屏
5.1源代码
<?php
if ($_GET['action']=="register") {
echo "<script>window.location.href='index.php?flag=1'</script>";
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>考勤系统</title>
<style type="text/css">
.container{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.content{
width: 1000px;
height: 400px;
margin: 80px auto;
line-height: 50px;
}
.imagecontent{
height: 400px;
width: 600px;
float: left;
}
.filed{
height: 400px;
width: 400px;
float: left;
padding-top: 20px;
}
.filed table{
border: 0 solid;
display: block;
width: 300px;
margin: 100px auto;
}
.filed input{
border-radius: 5px;
font-family: '黑体';
}
</style>
</head>
<body>
<div class="container">
<div class="content" style="clear:both;">
<div class="imagecontent">
<img src="bgimg.jpg" width="600" height="400" alt="">
</div>
<div class="filed">
<form action="?action=register" method="post">
<table>
<tr>
<td><strong>用户名</strong></td>
<td><input type="text" name="username"></td>
</tr>
<tr>
<td><strong>密 码</strong></td>
<td><input type="password" name="password"></td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="注册">
</td>
</tr>
</table>
</form>
</div>
</div>
</div>
</body>
</html>
<?php
$flag=$_GET['flag'];
echo "恭喜页面传输过来数据是：".$flag;
?>
6交互式网页中数据在数据库中的存取
6.1页面效果截屏
登录界面：
登录成功：
6.2源代码
<?php
include 'connect.php';
if (isset($_GET['me']))
{
$username=$_POST['username'];
$password=$_POST['password'];
$query = mysql_query("select * from user where username='$username' and password='$password'");
$row=mysql_fetch_array
($query,MYSQL_ASSOC);
if($row['username']=="admin")
{
$username=$row['username'];
echo "<script>window.location.href='index.php?username=$username'</script>";
}
}
?>
<!DOCTYPE html>
<!--[if !IE]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8" />
<title>登录</title>
<link href="bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="login.css" rel="stylesheet" type="text/css"/>
</head>
<body class="login">
<div class="logo">
</div>
<div class="content">
<form class="login-form" action="?me=dologin" method="post">
<h3 class="form-title">登录</h3>
<div class="form-group">
<label class="control-label visible-ie8 visible-ie9">Username</label>
<div class="input-icon">
<i class="icon-user"></i>
<input class="form-control placeholder-no-fix" type="text" name="username"/>
</div>
</div>
<div class="form-group">
<label class="control-label visible-ie8 visible-ie9">Password</label>
<div class="input-icon">
<i class="icon-lock"></i>
<input class="form-control placeholder-no-fix" type="password" name="password"/>
</div>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-info pull-right" onclick="sub()">
登录
</button>
</div>
</form>
</div>
</body>
</html>
登录成功：
<?php
echo "用户名：".$_GET['username'];
?>
7虚拟网站首页设计制作
7.1页面效果截图
7.2网站的盈利模式与创新说明
网站名：你的要求我来设计
这是一个给设计师与普通客户提供交流的一个平台，通过这个平台，客户可以将自己需要的东西，用规范性的语言描述后放到这个平台上，并悬赏设计师设计，如果有设计师接了这个单子，设计师设计完成后将产品模型数据发给客户。而此时网站起一个作用就是判断设计师的数据能不能满足客户的需要，如果满足，则交易达成，网站从中收取一笔手续中介费用。当然设计师也可以主动将自己的产品放到网上展示，如果有客户相中的话，交易达成后网站从中收取手续费用。
创新点：这个网站的创新点在于它给客户提供了一个主动权，客户要求设计师去设计自己需要的东西，而不是以往的我们都等设计师设计好了再去挑我们能用着的东西，而这样的情况很多时候客户的满意度达不到100%，让设计师根据客户的要求去生产，既能提高客户的满意度，又能节省资源，因为产品都是根据客户要求生产的，极大的降低了浪费。
展开阅读全文
浙ICP备2021020529号-1 | 浙B2-20240490 
