网站主页制作教程(制作网页的基本步骤)

网站主页制作教程(制作网页的基本步骤)

在《零基础学网站制作系列教程-01》里,我跟大家分享了做一个网站的基本步骤,以及一个线上网站,需要用到的网站域名,网站空间,网站程序等素材,而从今天开始,我将跟大家分享,做网站需要用到的一些工具与网站程序,网站模板,网页布局,web标准,HTML方面的一些基础知识。主要是针对一些没有基础的小伙伴,对于有基础的小伙伴们,请直接跳过。

01、网站制作工具

做一个网站,其实有很多工具可以将其实现出来,但是在这里我将重点讲几个在我会使用到的工具。

第一,FTP上传下载工具,这个我们在上篇文章里已经接触到了这个工具,我就不再重复,需要下载安装的话,请到《零基础学网站制作系列教程-01》里面去获取。FTP工具,也比较简单,基本拿来就学使用。

链接:https://pan.baidu.com/s/1nNqOmzN5VgUc1gA76xN55A

提取码:vxys

链接:https://pan.baidu.com/s/1OH8ZqcP1QGsHfmsMRmuagQ

提取码:wwab

关于这个破解版的安装教程,如果不会的话,我后面再单独写一篇文章来讲,这篇教程里就不详细讲解了。

这三个工具,就是我们后面使用频率比较高的工具,当然,做网站还有很多小工具会使用到,像IEtester,beyondcompare,这些我们目前用不到,我们就先不说了,等到用到的时候,我们再讲,但是,我们可以稍微了解一下。

IEtester主要是在测试时,用来测试IE兼容性的,因为IE软件版本比较多,为了网站在各种IE版本下测试方便,而使用的一个小工具。

beyondcompare是一个代码比较软件,这个在大型项目,还有网页代码比较多的时候会用到。

讲完了工具,接下来,就是网站程序了,这个也是做一个网站,非常重要的部分了,这个部分就好像我们平时做饭一样,我们不仅需要准备米,我们还需要知道怎么将米变成饭,而前面的工具内容,它就好像我们做饭用的电饭煲这个工具,所以接下来这个过程就是怎么把米做成饭的一个过程,当然也不难。

在讲这个过程之前,我们还需要再了解一下与其相关的几个问题。前面我们一直在讲建站程序,那到底什么是建站程序呢?

02、建站程序

其实,建站程序,有很多种,比方我们自己写的网站源码,也可以成为建站程序,还有一些开源的网站源码也是建站程序,例如,dedecms(也叫织梦CMS),wordpress(国外的一个博客系统),ecshop(一个购物商场系统),discuz,(一个论坛系统),这些都可以称之为建站程序,而且这些程序里,有付费,也有免费之分,像ecshop这个网站程序系统里面就有付费的部分,而其他几个基本都是免费的。

而建站程序也一样,安装完后,我们每个人的程序都是一样的,也就是说,我们每个安装了这个建站程序的网站,都是一样的风格,但是我们为了凸显出自己网站的风格与调性,所以,我们还需要对其进行修改。

而在一个建站程序里,基本都会有很多风格可以选择,这个就是我们接下来要说到的,网站模板。

03、网站模板

网站模板,就是一个网站的风格,类似我们现在手机里皮肤风格,一个网站,只能用一个网站程序,但是你可以实现多种网站风格,也就是说,你可以用多种网站模板。

在开始网站制作之前,你只要想好了用哪个网站程序来实现自己的网站,然后就可以在网上先找一些免费的网站模板来进行学习,等到自己学得差不多了。

其实,你自己就可以写一些网站模板了,比方,你打算用dedecms这个网站程序来制作自己的网站,那你就可以先去学习一些dedecms做网站的相关知识,这个也比较有针对性,学习起来更加容易上手,兴趣也会大点。

讲完了网站程序,网站模板,我们再来说一下网站里的网页,每个网站都是由不同的网页组合而成。网页又分为静态网页与动态网页。

04、静态网页与动态网页

简单讲,静态网页就是没有后台数据库交互的网页,我们都把它成为静态网页,这个是相对于动态网页而言的,所以,动态网页就是有后台数据库交互的网页。

像我的www.yangxiaoer.net这个站点里的网页都是静态页面,而且每一个页面的文件都是以xxxx.html,或者xxxx.html这样的文件格式出现。

而动态网页的文件后缀名,就比较多了,主要是根据开发网站后台的语言来的,例如,xxxx.php,xxxx.asp,xxxx.jsp等,而点后面的文件名,就是表示这个网站后台是用这个语言来开发的。像xxxx.php这个就是表示网站的后台程序是用php语言开发的。

05、静态链接,伪静态链接与动态链接

当我们在打开一个网站时,我们会先输入它的链接网址,这个链接网址也叫做统一资源定位符,英文名,URL(UniformResourceLocator)。

而在我们的网站里,通常会有三种网站链接类型,静态链接,伪静态链接,动态链接。

例如,http://www.yangxiaoer.net/contact.html,这个就是一个静态链接。当我们访问静态页面时,并不需要通过操作数据库,而是直接提取的静态网页,因此,访问速度相对较快并且服务器的负载很小。

我们使用伪静态链接就是为了方便搜索引擎收录与抓取我们的网站页面,能够让别人通过搜索引擎快速找到我们,这个也是在SEO优化的时候,会经常使用的一种手段。

06、从一个网页的诞生来学习HTML与CSS知识

在前面我们已经讲了,网站都是由一个一个的网页组成,而网页就是由一个一个的HTML文件,所以,学习网站制作,其实就是学习怎么写HTML文件,当每个HTML文件写完以后,我们通过一个<a>标签就可以把各文件链接起来,于是就组成了一个网站。

01)、什么是HTML

HTML就是一种超文本标记语言,英文全称HyperTextMark-upLanguage。

学习网站制作一定要学会HTML的基本知识,不然没有办法开始后面的工作。

02)、第一个网页的诞生

第二步,写下下面这些代码:

<!DOCTYPEhtml>

<head>

<meta charset=”utf-8″>

<title>首页,我是第一个网页</title>

<head>

<body>

<div>我是第一个网页</div>

</body>

<html>

直接双击这个文件,就会在浏览器打开,看到这个网页,而这个页面里的<body>……</body>的中间部分只有一内容:我是第一个网页。

所以,我们在浏览器里看到的内容,也是这个内容。

到目前为止,这第一个网页,就算完成了。

是不是也非常简单?

但是我们想在这个网页里加各种特效,颜色,图片等内容的话,其实都是在我们的<body>……</body>这个中间完成。

打开这个网址,我就得到了以下页面内容:

到目前为止,这个线上网页的制作步骤就算完成了。

是不是很简单?如果你还不知道怎么去实现这个过程的话,建议你再回头去看看《零基础学网站制作系列教程-01》里面的内容。

今天内容,如果有什么不明白的地方,可以在留言区给我留言,一起交流学习。

发表评论

登录后才能评论