当前位置:网站首页 / 建站知识 / 网站制作知识

如何让网站制作代码真的活起来?

来源:未知时间:2015-04-07 12:28点击:

如何让网站制作代码真的活起来?这个标题什么意思?是我们要赋予网站制作代码以生命。只是看懂了或者了解了那根本就不是学会了。听大师讲调色技巧把照片化腐朽为神奇您都听懂了,换张照片你能保证自己就能独立玩得转么?动手,动手才是硬道理。从这一章开始我们要一起动手写一个页面,希望大家不要光看着,要一起动手做起来。

我们要做的页面也很简单,大概就是那种最土的官网的样式,上面一条导航,下面一个通屏的大海报,然后下面并排三个格子,格子里写上一些内容,在下面是一个都是导航啊、联系我们啊、二维码啊之类的页尾。我不做示意图了,我想大家都明白的。反正我新装的系统也没装作图软件呢,就别难为我了。

我们先来规划一下文件结构:

index.html
images
post.jpg
css
styles.css

初步规划就是酱紫,每个文件是做什么的大家一看就明白,也不多说,开始做起来。新建 index.html 文件,在其中写上如下内容:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的第一个页面</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
这里准备慢慢填写网页的内容
</body>
</html>

然后在 css 文件夹里新建 style.css 文件,在里面写上:

/* 这是我写的第一个 CSS 文件,想想还有点小激动呢 */

就是下图这个样子:

Notepad++ 同时显示两个文件

你说怎么实现 Notepad++ 这样两个文件同时显示?你在一个已经打开的文件的标签上右键,然后移动到另一视图就可以了。然后我们分析一下页面结构,大致可以分为四块:导航、海报、格子、页尾。我们一部分一部分去写。