这个,就我知道的说一下,网页主要需要使用HTML,CSS,JavaScript,PHP以及其它。所以如果想写网页还是需要学这些吧。C语言应该是不能做网页。当然有了编程基础学这些也快吧。HTML和CSS可以控制网页上显示什么和显示的格式。JavaScript是客户端的脚本语言,PHP是用于写服务器端的。
比如举个例子
<html xmins="http://www.w3.org/1999/xhtml" xml:lang="en"><head>
<meta http-equiv="Content-Type" content="text/html charset=gb2312">
<title>用户登录</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script language="javascript">
function InputCheck(form1)
{
if(form1.username.value=="")
{
alert('请输入您的账号')
form1.username.focus()
return(false)
}
if(form1.password.value=="")
{
alert('请输入您的密码')
form1.password.focus()
return(false)
}
}
</script>
</head>
<title>用户登录</title>是HTML,作用是在浏览器的标签显示“用户登录”。<link rel="stylesheet" type="text/css" href="styles.css" />也是HTML,作用是链接了一个CSS,就是styles.css,用于控制网页的格式。<script language="javascript">开始的那一段代码是JavaScript,作用是在客户端检查用户输入的账号和密码是否为空,如果为空,就提示“请输入”。
PHP用于在服务器端和数据库交互,数据库可以是MySQL,SQLServer等。因为如果做网页,储存一些用户的信息等最好还是用数据库吧。
希望你能大体明白吧,当然如果制作一个网页的界面可以使用一些软件,如Dreamweaver等,应该能做出比较漂亮的界面。
数据库设计
先准备两张表,pic表保存的是图片信息,包括图片对应的名称、路径以及图片“赞”总数,pic_ip则记录用户点击赞后的IP数据。
CREATE TABLE IF NOT EXISTS `pic` (`id` int(11) NOT NULL AUTO_INCREMENT,
`pic_name` varchar(60) NOT NULL,
`pic_url` varchar(60) NOT NULL,
`love` int(11) NOT NULL DEFAULT '0',
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8
CREATE TABLE IF NOT EXISTS `pic_ip` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`pic_id` int(11) NOT NULL,
`ip` varchar(40) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8
index.php
在index.php中,我们通过PHP读取pic表中的图片信息并展示出来,结合CSS,提升页面展示效果。
<?phpinclude_once("connect.php")
$sql = mysql_query("select * from pic")
while($row=mysql_fetch_array($sql)){
$pic_id = $row['id']
$pic_name = $row['pic_name']
$pic_url = $row['pic_url']
$love = $row['love']
?>
<li><img src="images/<?php echo $pic_url?>" alt="<?php echo $pic_name?>"><p><a href="#"
title="赞"class="img_on" rel="<?php echo $pic_id?>"><?php echo $love?></a></p></li>
<?php }?>
CSS中,我们将定义鼠标滑向和离开红心按钮的动态效果,并定位按钮的位置。
.list{width:760px margin:20px auto}.list li{float:left width:360px height:280px margin:10px position:relative}
.list li p{position:absolute top:0 left:0 width:360px height:24px line-height:24px
background:#000 opacity:.8filter:alpha(opacity=80)}
.list li p a{padding-left:30px height:24px background:url(images/heart.png) no-repeat
4px -1pxcolor:#fff font-weight:bold font-size:14px}
.list li p a:hover{background-position:4px -25pxtext-decoration:none}
jQuery代码
当用户点击自己喜欢的图片上的红心按钮时,向后台love.php发送ajax请求,请求响应成功后,更新原有的数值
$(function(){$("p a").click(function(){
var love = $(this)
var id = love.attr("rel") //对应id
love.fadeOut(300) //渐隐效果
$.ajax({
type:"POST",
url:"love.php",
data:"id="+id,
cache:false, //不缓存此页面
success:function(data){
love.html(data)
love.fadeIn(300) //渐显效果
}
})
return false
})
})
love.php
后台love.php接收前端的ajax请求,根据提交的图片id值,查找IP表中是否已有该用户ip的点击记录,如果有则告诉用户已“赞过了”,反之,则进行一下 *** 作:
1、更新图片表中对应的图片love字段值,将数值加1。
2、将该用户IP信息写入到pic_ip表中,用以防止用户重复点击。
3、获取更新后的赞值,即赞该图片的用户总数,并将该总数输出给前端页面。
include_once("connect.php") //连接数据库
$ip = get_client_ip() //获取用户IP
$id = $_POST['id']
if(!isset($id) || empty($id)) exit
$ip_sql=mysql_query("select ip from pic_ip where pic_id='$id' and ip='$ip'")
$count=mysql_num_rows($ip_sql)
if($count==0){ //如果没有记录
$sql = "update pic set love=love+1 where id='$id'" //更新数据
mysql_query( $sql)
$sql_in = "insert into pic_ip (pic_id,ip) values ('$id','$ip')" //写入数据
mysql_query( $sql_in)
$result = mysql_query("select love from pic where id='$id'")
$row = mysql_fetch_array($result)
$love = $row['love'] //获取赞数值
echo $love
}else{
echo "赞过了.."
}
我上传的附件中 数据库SQL 你可以直接建立test 数据库UTF8编码的,然后把SQL文件导入进去。修改一下connect.php中数据库的连接信息即可。
不现实,必须用到后台语言,例如php等,不然你没办法记录用户点击的数量用Cookie的会只有当前浏览器可用,而且清除cookie点赞数清0
用Session在关闭的时候会清空
只能用PHP语言,可以不用数据库,就是使用文件记录点赞数量。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)