前面的网站运行环境篇已经和大家讲了很多,相信小伙伴们早已经按耐不住，挽起袖子大干一场了。可网页设计的该怎么开始呢，第一步该做什么？别急，今天小编就带着小伙伴们写一个简单的html实例。静态网页现阶段主要采用DIV+CSS+Javascript来实现,下面就这三方面来引导大家入门。
第一步:打开DREAMWEAVER,新建html类型页面
第二步:在代码窗口中编辑
刚新建完成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>
第三步:写代码
网站标题写在<title></title>之间。我们写上"我的第一个网页"
CSS代码写在<head></head>之间，<title></title>的下方。css代码为：
<style type="text/css">
div{
width:200px;
height:50px;
background-color:#36F;
text-align:center;
line-height:50px;
color:#FFF;
}
</style>
javascript代码写在<head></head>之间，<title></title>的下方。javascript代码为：
<script type="text/javascript">
window.onload=function(){
var odiv=document.getElementById("webym");
odiv.onclick=function(){
alert("www.webym.net欢迎您");
}
}
</script>
在body里写入主体内容：
<div id="webym">网页设计教程欢迎您</div>
第四步:保存文件，用浏览器打开文件，查看效果
选择文件--保存或者用快捷键(CTRL+S)
至此大功告成!这段代码是一个非常好的入门体验。如果你想学习更多WEB设计前端设计,动态网页编写等等,请查看本网的网站制作教程!祝君成功!
声明:如需转载，请注明来源于www.webym.net并保留原文链接：http://www.webym.net/jiaocheng/11.html
