[新手入门系列教程]二、如何建立属于自己的一个网站。

前端开发 7571 Views 1 Comments

上一节是理论知识,主要讲的互联网概念也只是个大概,以后的要动手了,请大家跟着我做。一步一步来,学习之后,入门肯定没问题。

首先在我们电脑目录下建立一个我的网站的文件夹。延续上节课所学知识。让大家清楚一个网站形成和制作的概念

[新手入门系列教程]二、如何建立属于自己的一个网站。

这两款款软件是大部分网站开发者用到的。当然也有另外的。比如.NET的VS。首先我告诉大家这两款软件都是干什么的。 绿色那个简称DW。一般用来写网站代码 。蓝色那个简称ps,一般用来处理图片。还有个是flash,做动画的,我不会所以就不讲了。呵呵。

[新手入门系列教程]二、如何建立属于自己的一个网站。

先打开DW,这个就是DW的界面。其他的不多说。

我们先找到 创建新项目 那里。这里大家注意下下面有很多选项。其实就是不同的程序语言。这个过目下就行了。先选择HTML

[新手入门系列教程]二、如何建立属于自己的一个网站。

选择HTML后,先不管什么就 CLTR+S 保存!(以后做网站也要记得,每做一步就保存下,养成习惯,记得有次在公司写了一堆代码,没保存,然后停电了,然后我哭。教训。) 保存在我们刚建立的那个目录下面。然后注意有个文件名。我们取名叫    首页.html

[新手入门系列教程]二、如何建立属于自己的一个网站。

然后看我们目录下是不是多了一个这个文件呢?

[新手入门系列教程]二、如何建立属于自己的一个网站。

然后双击打开这个HTML。你会发现什么都没有。是空白的 对。因为我们什么都没有做。就像一张白纸

[新手入门系列教程]二、如何建立属于自己的一个网站。

再回到DW里。我们发现这个

<title>无标题文档</title> 是一样的。所以得出结论。 <title>和</title> 之间。是放网站的标题的。 我们要研究一样新东西的时候。 首先得看一下他的原理。 我在这里不可能以后每样东西都教你们怎么去做。但是得让你们明白学习的一个具体流程和思考方式。

[新手入门系列教程]二、如何建立属于自己的一个网站。

我们查看下本博客的源文件吧。查看源文件。看看本博客的标题。或者你任意找个网站,然后查看源文件。。。

发现了吗?多动手。多参考。

[新手入门系列教程]二、如何建立属于自己的一个网站。

回归正题。我们把DW里<title>这后面改成 我的第一个网站。

[新手入门系列教程]二、如何建立属于自己的一个网站。

然后回到网页界面按F5刷新。发现变了么?

[新手入门系列教程]二、如何建立属于自己的一个网站。

其他的代码现在先不去细讲,因为话说我现在都不会默写。我是靠着DW工具的提示代码做。但是我们要理解他的作用。先说

这之间放的是网站标题

中间放的是网站的内容

这两个标签就OK。

然后再看下代码

我的第一个网站

下面这句

这句话的话你只要知道一个地方就可以了。

charset=gb2312" 。

也就是编码的意思。 charset最常见就2种。一用UTF8,一种GBK。

GBK也差不多就是gb2312. 是什么意思呢?

GBK也就是咋们中国用用而已。而UTF8是国际编码。不过这里我只是提一提。大家有个概念。具体的干什么的暂时不用了解

有时候会遇到乱码,那就有可能是编码的问题了。

下面来说下布局。布局是什么意思呢?

就像大家以前读书做黑板报。要把界面分成多少块。

当然网页里布局也是这个意思

布局的样式和模式都没有限制。可以自由发挥。

目前布局的程序有2种。

一种是Table 一种是DIV。

但是TABLE是DW软件里功能自带有的。我们先从最基本开始。后面再讲DIV

我们点下上面我红框出来那个图标。出来一个表格的界面

行数我输入1。列数输入5

[新手入门系列教程]二、如何建立属于自己的一个网站。

上面的代码就自动多出来了。下面也出现了样子。

其实下面就是网页的效果

[新手入门系列教程]二、如何建立属于自己的一个网站。

然后鼠标移动到下面框框。输入自己想要的文字。会发现代码里也自动加了。

[新手入门系列教程]二、如何建立属于自己的一个网站。

我们把table的宽度调整为800,然后保存。再去看下网页。

发现了么?

网页里开始有东西了。。。

[新手入门系列教程]二、如何建立属于自己的一个网站。

我们再同样方法插入一个行1列2的框

[新手入门系列教程]二、如何建立属于自己的一个网站。

我们把鼠标移动到那个框最右下角。发现这个框原来是可以拖动的。。我们就按下鼠标。拖出一个自己喜欢的形状吧

[新手入门系列教程]二、如何建立属于自己的一个网站。

我们现在拉出了一个自己想要的形状

[新手入门系列教程]二、如何建立属于自己的一个网站。

然后在框框里打上自己想打的文字

[新手入门系列教程]二、如何建立属于自己的一个网站。

然后我们的第一个页面就完成啦。

有人觉得这不像个网站。但是我告诉你。你看到是这样子。别人通过IP看你这也是这个样子。

为什么不像站呢?

因为别的网站内容很多。而且很多图片装饰什么的。那些都是需要花大量精力来做的。但其实就这最基础的。

你这也叫网站。

不,这只是一个网页~

那么我看别人的网站里点这个可以跳到别的页面里去是怎么弄的呢?

不急。一步步来

[新手入门系列教程]二、如何建立属于自己的一个网站。

回到DW,文件。新建

[新手入门系列教程]二、如何建立属于自己的一个网站。

按之前同样的方法。建立好4个html文件

[新手入门系列教程]二、如何建立属于自己的一个网站。

我们把首页拿鼠标全选起来。然后点下面属性。

在连接那里选择_self

_self的意思就是不要弹出新的窗口。就是直接跳转过去

[新手入门系列教程]二、如何建立属于自己的一个网站。

突然我们好象发现什么事了?

我们每一步操作。都会自动产生代码。

那么我们一想。如果我是直接输入代码

效果会不会一样呢?

这是一个过程,慢慢的要转变,丢掉可视化工具,直接手打代码。

[新手入门系列教程]二、如何建立属于自己的一个网站。

那么除了首页还有下面四个页面呢,也用同样的方法加上连接,那么我们在首页点击相应的就会连接到内页面了。
大家也可以尝试直接改代码,就是把首页 换成 相应的。
现在把所有连接都加好后代码是这样的
[新手入门系列教程]二、如何建立属于自己的一个网站。
然后点下是不是跳转到相应的页面呢?
[新手入门系列教程]二、如何建立属于自己的一个网站。
本节课结束了。

课后题:(主要培养自己的动手和思考能力)
1.在关于本人里加入自己的介绍,并且文字颜色为红色(对字体的控制)
2.在我的日志里放入10条列表的日志(对TABLE列表的控制。 )
3.在相册里放入自己的一张照片(学习如何插入图片,提示:把图片放在同一文件夹目录里)
4.在所有其他页面也把导航菜单加进去。

1、[新手入门系列教程]一、互联网的基础概念。

2、[新手入门系列教程]二、如何建立属于自己的一个网站。

3、[新手入门系列教程]三、发布网站和配置服务器环境

转载请注明:一只羊博客 » [新手入门系列教程]二、如何建立属于自己的一个网站。

分享到:
(0)

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

网友最新评论 (1)

  1. jason2012-12-12 16:19 回复