网站页面制作教程[纯萌新]

网站页面制作教程[纯萌新]

看起来很高大上，其实会者不难。

大约一周之前，笔者的高中同学在朋友圈招募队员参加商赛，因为同学是外校的，我不经意地评论了一句“想参加，可惜不是本校的”，没想到后来被邀请参加，于是我也便抱着学点新东西的态度同意了。我收到的任务是，制作网页页面。话不多说，先上一张结果图（当然只是页面之一），虽然不够精致，但大体的样子还是有的。这个项目是做一个线上二手商品交易平台，应该说是很常见的项目了。（样例里还是毫不留情地把我大魔电摆在了第一位）下面大致说说步骤吧。

第一阶段，摸索。

笔者之前完全没有接触过JavaScript和html，本来打算学几个库、用Python写出网站页面，后来上B站和CSDN逛了一圈，发现自己在做梦，一个周的课余时间想写出能看的页面基本做不到。于是想到，是否可以在网上寻找到模板，然后填入自己需要的信息，甚至还可以不用碰代码，岂不是美滋滋。问了一下度娘，搜出来的基本都是看着就是要花钱的网站，于是我放弃了。

到底还是要接触代码，自力更生，艰苦创业！

第二阶段，接触html。

虽然要用代码解决问题，不过众所周知，写代码最快的方式终究还是ctrl+c, ctrl+v。于是我又到各处寻找模板资源，终于在aspku.com这个网站上找到了免费的网页模板及代码。选用了HBuilder，开发环境还不错，还可以边看边改，已经非常满意了。

模板找好了，也得会用啊。一种最简单的方法是，使用搜索功能，把模板上各个标签上的文字修改成自己需要的内容，比如，假设页面标题是“标题”，那我们可以搜索“标题”二字并替换成“冯冯火火闯九州”，其他内容也是这样。如此，制作网站页面便和制作ppt没啥本质区别了，无非都是把模板上的字替换成自己的内容。笔者还是选择看了一下html的基础语法，大致知道了什么是标题、标签、菜单、定义列表、链接等等，当然想要做出更好的效果，就需要了解更多了。

第三阶段，动手开始做。

模板里其实已经做的比较清楚了。改文字的话，就直接找到对应的位置修改就好，同时也可以修改文字的其他属性，都不难实现；换图片的话，就需要找准要替换的图片在代码中的位置，下载好自己想用的图片，在代码的对应位置上修改即可，要注意文件路径的问题。在自己做某些部分的微调的时候，要注意代码的结构。其实说到这里，做起来也就so easy了吧。只不过调试的过程有点繁琐，而且每次修改都要保存后才能生效，这样便有可能产生把页面搞坏了的人间悲剧，于是可能“只不过是从头再来”了。

第四阶段，完工。

把做好的页面和长长的代码发给队友，接受队友的赞叹吧。当然了，队友会提出一些小的修改意见，在此基础上修改就是了。

代码太长，就上一小段吧。

	<!-- header -->
	<div class="header" id="home1">
		<div class="container">
			<div class="w3l_login">
				<a href="#" data-toggle="modal" data-target="#myModal88"><span class="glyphicon glyphicon-user" aria-hidden="true"></span></a>
			</div>
			<div class="w3l_logo">
				<h1><a href="index.html">冯冯火火闯九州！<span>冯冯火火闯九州！</span></a></h1>
			</div>
			<div class="search">
				<input class="search_box" type="checkbox" id="search_box">
				<label class="icon-search" for="search_box"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></label>
				<div class="search_form">
					<form action="#" method="post">
						<input type="text" name="Search" placeholder="Search...">
						<input type="submit" value="Send">
					</form>
				</div>
			</div>
			<div class="cart cart box_1"> 
				<form action="#" method="post" class="last"> 
					<input type="hidden" name="cmd" value="_cart" />
					<input type="hidden" name="display" value="1" />
					<button class="w3view-cart" type="submit" name="submit" value=""><i class="fa fa-cart-arrow-down" aria-hidden="true"></i></button>
				</form>   
			</div>  
		</div>
	</div>
	<!-- //header -->

按：本文实属是纯萌新的游戏之作，并非专业的路子。做来玩玩可以参考，真正专业开发的大佬权当看个乐吧。