在之前的三篇里,所谈论的都是学习web编程入门的必修课题而已,如果坚持走这条路,请尊重自己的选择,不要后悔!
web编程的前提:第一需要全面了解html标签。第二需要全面了解css。第三全面了解javascript脚本。第四才是后台代码程序的编写。
先讨论下存放目录。
/根目录(web)
/web/index.html
/web/css/index.css
/web/js/index.js
/web/images/图片文件
一、第一个web页面
使用编辑工具 Dreamweaver,创建一个静态页面(index.html)。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
</body>
</html>
与HTML5 比较下
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
</body>
</html>
二、第一个css文件
dreamweaver 或者其他的工具新建css样式文件,保存为index.css
@charset "utf-8";
body{margin:0px; padding:0px; color:#535353;font-size:14px; font-family:黑体,宋体,Arial;}
*{margin:0 auto; padding:0; font-family:黑体;}
/*
a标签定义的顺序 link、visited、hover、active
*/
a:link { color: #000; text-decoration: none;}
a:visited { text-decoration: none; color: #000;}
a:hover { text-decoration: none; color: #FF0000;}
a:active { text-decoration: none; color: #666;}
.clear{clear:both;}
ul{ list-style-type:none; padding:0px;}
ul li{ float:left; display:block; width:auto;}
img{border:0px;}
dl{ height:auto;}
dl,dt,dd{display:block; float:left;}
三、第一个js脚本文件
dreamweaver 或者其他的工具新建 js脚本文件,保存为index.js
如果使用第三方库,请引用。基本上用jquery,2008年之前都是自己手写,现在都忘光了。
$(function(){
alert("前端脚本弹窗");
});
四、如何引用css,js文件
在index.html文件的head标签中引用。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" rel="Stylesheet" href="/css/index.css" />
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/index.js"></script>
<title>首页</title>
</head>
<body>
布局内容
</body>
</html>
五、后台代码的编写
初学者可以在index.html页面中编写后端代码,根据选择编程语言不同,改动文件后缀。
如果懂得分离,可以将index.html做为模板使用,这个就不在基础范围内讲解。
最后:
如果需要了解学习html、css、js请看
web客户端编程 没太多时间写,只写了基础学习