现在的位置: 网页制作教程入门教程 >正文
网页基础教程

准备工作-带你写一个网页实例

发表于2014/6/19 入门教程 0条评论 ⁄ 热度 2,905℃

网页设计教程

前面的网站运行环境篇已经和大家讲了很多,相信小伙伴们早已经按耐不住,挽起袖子大干一场了。可网页设计的该怎么开始呢,第一步该做什么?别急,今天小编就带着小伙伴们写一个简单的html实例。静态网页现阶段主要采用DIV+CSS+Javascript来实现,下面就这三方面来引导大家入门。

第一步:打开DREAMWEAVER,新建html类型页面

dreamweaver新建文件

第二步:在代码窗口中编辑

刚新建完成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>

写入CSS样式

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>

写入javascript代码

在body里写入主体内容:

<div id="webym">网页设计教程欢迎您</div>

写入body内容

第四步:保存文件,用浏览器打开文件,查看效果

选择文件--保存或者用快捷键(CTRL+S)

保存文件

运行效果

至此大功告成!这段代码是一个非常好的入门体验。如果你想学习更多WEB设计前端设计,动态网页编写等等,请查看本网的网站制作教程!祝君成功!

  • 暂无评论