教你如何制作一个简单的学生网页

学生网页要求不能太高,老师在安排作业的时候会降低难度,一般是初学者的水平就可以了,我们在这里讲一讲如何简单制作一个学生静态网页,能够顺利通过考试。

准备工具 dreamwear 这是学习网页必备的软件。

安装完成后打开软件,点击新建一个html网页

教你如何制作一个简单的学生网页(图1)

新建之后是我们的网页代码  上面切换到代码视图,会看到一些软件本身自带的代码
 

<!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>


我们先讲一讲<head></head><body></body> 这些是什么

这些是标签,一个网站要呈现不同的效果与样式,需要这些标签来保持区分,我们在body标签(body标签为正文,就是说网站看到的内容需要放在body标签内部才行)内部打上文字“这是一个网页”

然后通过文件 > 保存 可以保存到电脑上,名称自己取,保存好了之后找到这个文件并双击打开,或者拖动到浏览器打开。

这样一个网页就打开了,上面显示的内容正是我们上面输入到body的内容,body以外的内容则全部被隐藏了。


后面我们再讲,如何对文字进行修改样式与效果。

 

转自:http://www.ijianweb.com/home/Article/view.html?aid=973

<!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> <link href="css/style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/js/myfocus-2.0.1.min.js"></script> <script type="text/javascript"> myFocus.set({ id:'demo', pattern:'mF_liquid'}); </script> </head> <body> <div id="top"> <div id="top_text"> <ul> <li><a href="#">联系我们</a></li> <li><a href="#">加入收藏</a></li> <li><a href="#">设为首页</a></li> </ul> </div> </div> <div id="middle"> <div id="logo"> <div id="logo_left"> <img src="images/logo.jpg" alt="" width="200" height="80" /> </div> <div id="logo_right"> <img src="images/tel.jpg" width="28" height="28" /> 24小时服务热线 <span>123-456-7890</span> </div> <br class="clear_float"> </div> <div id="nav"> <div id="nav_left"> <img src="images/nav_left.jpg" width="10" height="40" /> </div> <div id="nav_middle"> <ul> <li><a href="#">首页</a></li> <li><a href="#">关于幕课</a></li> <li><a href="#">新闻动态</a></li> <li><a href="#">课程中心</a></li> <li><a href="#">在线课程</a></li> <li><a href="#">人才招聘</a></li> </ul> <div id="gezi"> <form> <input type="text" /> </form> </div> </div> <div id="nav_right"> <img src="images/nav_right.jpg" width="10" height="40" /> </div> </div> <div id="demo" class="ad"> <div class="pic"> <ul> <li><a href="#"><img src="images/ad2.jpg" thumb="" alt="" text="详细描述2" /></a></li> <li><a href="#"><img src="images/ad3.jpg" thumb="" alt="" text="详细描述3" /></a></li> <li><a href="#"><img src="images/ad4.jpg" thumb="" alt="" text="详细描述4" /></a></li> <li><a href="#"><img src="images/ad3.jpg" thumb="" alt="" text="详细描述5" /></a></li> </ul> </div>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值