你有试过自己写一个网页吗？听上去难，其实操作起来很简单，不夸张地说——有手就行。来试试看吧。
一. 对网页设计的基本了解1. 网站
1）一个网站由若干个网页构成，这些网页是用超级链接有逻辑地联系起来的。
2）网站由网址来识别和存取。
3）网页需要上传到网络空间中，才能供浏览者访问网站中的内容。
即，一个网站需要有域名（网址）、网页、网络空间三部分。
2. 网页编辑工具
1）语言
我们可以使用HTML来编写网页，HTML文件就是增加了标记的普通文本文件。
可以简单地使用记事本来编写一个网页，只需将文件后缀名改为html，然后用浏览器打开。
现在编写网页的语言其实由三部分构成：HTML,CSS,JavaScript。
1）HTML：早期编写网站的语言。
2）CSS：负责网站内容的表现形式。是在HTML原来的功能中分离出来的，这种分离可以使维护站点外观更容易，也让文档代码更简练，网页加载快。
3）JavaScript：负责动态部分。 使网页更加生动活泼，增加和用户的互动。
2）软件
前面已经讲到，可以简单地使用记事本来编辑网页。
这里在提出两款编辑软件：EditPlus，Dreamweaver。它们的能力是递增的。
EditPlus:
EditPlus相比记事本的优点是，可以带有html语言的语法高亮，而且可以在这个编辑页面中直接预览网页（点击左上角部分的小地球图标）。
二. 第一个网页
前面已经提到，html语言文件就是增加了标记的普通文本。
那么首先，我们就要了解标记的作用：
一些简单的标记，可以让文本在网页中以另一种形式呈现出来。
1. 实操——用记事本写个朴素的网页
简单起见，接下来就使用记事本来编写我们的网页。
首先，新建一个文本文件（txt），给它起个随便的名字。
然后用记事本打开它，输入以上内容，记得保存。
重命名文件，将文件后缀名改为html。
（
的意思是换行）
接着选择打开方式为某个浏览器（系统默认的浏览器就可以），就可以显示出我们刚刚编写的网页了。
是不是感觉朴素地有点过头了？没关系，第一次嘛。
2. 代码讲解
这是我们的第一个网页。
这里我们用到了三个基本的标签：、
和
。
其中标志着我们html文件的开始，则表示正文内容的开始。而和分别代表着对应部分的结束。和之间的一行文本，则是我们要展现的内容。而
则是换行，我们经常用这个标签来调整网页的上下距离。
3. 更丰富一点
增加一些其它的标签，让我们的网页更加生动一点。
第一个网页
这是我们的第一个网页！
可以简单留作一个纪念。
但我们的征途，是星辰大海！
标签 | 功能 |
| 标识文件的语言标准，这里指的是html5 |
| </p></td><td><p data-track="98">网页的标题，即浏览器中页面的名字</p></td></tr><tr><td><p data-track="99"><h1></p></td><td><p data-track="100">一级标题</p></td></tr><tr><td><p data-track="101"><p></p></td><td><p data-track="102">一个段落的开始</p></td></tr></tbody></table></div></div><p>/div></p><p>p data-track="103">在<body>标记中，还可以控制一些全局的呈现效果：</p><br/><br/><p>/p></p><p>div></p><div><div><table><colgroup><col/><col/></colgroup><tbody><tr><td><p data-track="104"><strong>标识符</strong></p></td><td><p data-track="109">控制内容</p></td></tr><tr><td><p data-track="105">background</p></td><td><p data-track="108">背景图片（需要在html文件相同目录下，加入相应的图片文件）</p></td></tr><tr><td><p data-track="106">text</p></td><td><p data-track="110">文本内容的颜色</p></td></tr><tr><td><p data-track="107">leftmargin</p></td><td><p data-track="111">两边间距大小</p></td></tr></tbody></table></div><p>/div></p></div><p data-track="112">下面是新的网页：</p>
</div>
<div class="pagIng">
<a href="/anyouwz/23758.html">一个简单的标准 HTML 设计参考</a>
<a href="/anyouwz/23760.html">前端入门——先从制作一个简单的html5网页开始</a></div>
</div>
</div>
</div>
<script type="text/javascript">
$(function(){
$(".zSubnav li").hover(function(){
$(this).stop().animate({top:"-10"},300)
},function(){
$(this).stop().animate({top:"0"},300)
})
});
$('.fonts a').click(function (){
$('.fonts a').removeClass('active');
$(this).addClass('active');
switch( $(this).index() ){
case 0:
$('.detailCont').css({fontSize:14});
return false;
case 1:
$('.detailCont').css({fontSize:15});
return false;
case 2:
$('.detailCont').css({fontSize:16});
return false;
}
});
</script>
<!-- 底部 -->
<div class="zFooter">
<div class="wrap1200 clearfix">
<div class="cont fl">
<h3>地址 · <span>ADDRESS</span></h3>
<p>地址：建邺区新城科技园嘉陵江东街18号2层</p>
<p>邮箱：309474043@qq.Com</p>
<a class="fukuan tr" href="/anyoucase/">点击查看更多案例</a>
</div>
<div class="tel fl">
<h3>联系 · <span>CALL TEL</span></h3>
<p class="p1">400-8793-956</p>
<p class="p2">售后专线：025-65016872</p>
<p>业务QQ:309474043 售后QQ:1850555641</p>
</div>
<div class="code fr"><img src="/img/wx.jpg"></div>
<div class="clearfix"></div>
<div class="box" style="line-height: 25px;">
<div class="hot fl" style="width: 40%;height: auto;">
<a href="http://www.anyouy.cn/" title="南京网站建设">南京网站建设</a><em>|</em><a href="http://www.anyouy.cn/" title="南京小程序开发">南京小程序开发</a><em>|</em><a href="http://www.anyouy.cn/" title="南京网站开发">南京网站开发</a>
</div>
<div> <p class="copy">©南京安优网络科技有限公司 版权所有 <a href="https://beian.miit.gov.cn" target="_blank">苏ICP备12071769号-4</a> <a href="/sitemap">网站地图</a></p>
</div>
</div>
<div class="clearfix"></div>
<div class="links">
<span>友情链接：</span>
<em>|</em>
<a href="http://www.ayxcx.cn/" title="南京小程序开发">南京小程序开发</a> |
<a href="http://www.zhilenet.com" title="网站建设">网站建设</a> |
</div>
</div>
</div>
<script src="/img/wow.min.js"></script>
<script>$(function(){new WOW().init();})</script>
<script type="text/javascript">
//导航
$(window).scroll(function(){
if($(window).scrollTop()>=100){
$(".zHeader").addClass("on");
}else{
$(".zHeader").removeClass("on");
}
})
//签约
jQuery(".zSigning").slide({titCell:".hd ul",mainCell:".bd ul",autoPage:true,effect:"leftLoop",autoPlay:true,vis:4,scroll:4});
//访问统计
window.onload = function() {
$.ajax({url:"/Api/Hitstall/index",});
}
</script>
<div class="tqfloat">
<ul>
<li class="hidden style1"><a class="tit" target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=309474043&site=qq&menu=yes">业务咨询</a></li>
<li class="hidden style1"><a class="tit" target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=309474043&site=qq&menu=yes">技术支持</a></li>
<li class="hidden style2"><p>联系电话</p><div class="tel">4008-793-956</div></li>
<li class="hidden style1"><a class="tit" target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=309474043&site=qq&menu=yes">投诉留言</a></li>
<li class="hidden gotop"><a class="tit" href="javascript:;"></a></li>
</ul>
</div>
<script type="text/javascript">
$(function(){
$(".tqfloat li.style2").hover(function(){
var _this = $(this);
_this.removeClass("hidden").stop().animate({left : - 184}, 400)
}, function(){
var _this = $(this);
_this.stop().animate({left : 0}, 400, function(){
_this.addClass("hidden")
})
})
$(".tqfloat li.style1").hover(function(){
$(this).removeClass("hidden").stop().animate({marginLeft : - 10}, 400)
}, function(){
var _this = $(this);
_this.stop().animate({marginLeft : 0}, 400, function(){
_this.addClass("hidden")
})
})
$(".gotop").click(function(){
$("html,body").stop().animate({scrollTop: "0"},600)
})
$(".subnav li").hover(function(){
$(this).stop().animate({top:"-10"},300)
},function(){
$(this).stop().animate({top:"0"},300)
})
});
</script>
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?1c94697d8167ffaf76dd51252f3ad1a7";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
<div class="jszx" style="display:none">
<div class="jxin"><img src="/img/xt_bg.jpg" alt="" /></div>
<div class="jszxdd">
<h1>零风险合作体验</h1>
<p>侧重以结果为服务导向，不满意退还所有费用，最大限度降低客户的合作风险<br>安优网络从不青睐于向客户虚夸我们的能力<br>如果量身定制的作品让您满意我们相信合作的基础会更加夯实。</p>
<p><a href="tel:400-8793-956">400-8793-956</a></p>
<span><a href="http://wpa.qq.com/msgrd?v=3&uin=309474043&site=qq&menu=yes" target="_blank">在线咨询</a></span><span><a href="javascript:vido(0)" class="jszx1">稍后再说</a></span> </div>
</div>
<script language="javascript">
setTimeout(function (){$(".jszx").show()},3000)//表示1000毫秒后执行第一次显示层
$(function(){
$(".jszx3,.jszx1").click(function(){
$(".jszx").hide();//点击关闭层
//每3000毫秒执行一次显示当前层
$(this).stop().fadeTo(955000, 1, function(){
$(".jszx").show();
});
});
});
</script>
</body>
</html>
|
