主页制作ABC---XYZ

2016-01-29 12:41 7 1 收藏

主页制作ABC---XYZ,主页制作ABC---XYZ

【 tulaoshi.com - Html 】

   今天已经是第三个人问我如何制作网页了,按照惯例以前只要有一个人问我问题,我就会知无不讳、言无不尽,然而对于“如何制作网页”这个问题要说起来话就比较长了,区区一篇文章真是很难讲述明白。因为网页制作的相关话题太多、软件也非常庞杂,我这里不能一一列举,因而就选用了比较枯燥的HTML代码进行讲解,至于能达到多少效果,就要看各位看官自己的悟性了。

   首先说一下网页文件的基本概念。“网页文件”这个名字很不正规,它真正的名字应该叫做“超文本文件”,也就是说网页都是文本文件编写出来的,像可执行文件是二进制的,而网页文件都是文本文件。那么问什么要叫“超”文本呢?原因是文本文件不能表现出缤纷的文本效果,例如我们使用可以编辑一份五颜六色的报告、其中还可以插入图片,而纯文本就不能实现了,超文本正是能将多种文字效果体现出来的文本格式。

   很多软件都可以编辑这种网页文件,例如、Frontpage、Homepage等等,它们的机理都是相同的,都是通过软件编写HTML文件源代码,因而我们只需要使用系统提供的记事本或者任何的文本编辑软件,都可以编写出相同的HTML文件!之所以使用上述高级的软件,是因为那些软件具有高度的“傻瓜化”和“可视化”效果,我这里讲解HTML的理论,因此不对上述软件进行讲解,大家只要了解了HTML文件的格式,剩下的软件选择和使用只是个人爱好而已了。

   现在开始说HTML文件的格式:HTML文件的扩展名可以是HTM和HTML,两者之间的区别我不敢肯定,在我印象中HTML好像是MAC机器上使用的,这一点对我们来说无所谓,因为两者之间没有任何区别,用记事本创建一个扩展名位HTM或者HTML的文件,然后在其中随便输入一些文字并保存,之后用浏览器浏览这个文件就可以了。

   例如将这篇文章保存成index.htm文件,之后用浏览器可以很方便的进行阅读!然而真正完成这项工作之后你也许会发现浏览器虽然能够显示文件的内容,可是段落全没有了,密密麻麻一大堆字显示在眼前,这是什么原因?原因很简单,浏览器在读入index.htm文件后要先对其中的标记进行分析,然后按照标记生成网页,这篇文章里面没有任何HTML标记,浏览器自然不会理清格式。

   HTML的标记有一个共性:都是被尖括号包含起来的,例如下面的几个标记:〈p〉和〈/p〉、〈li〉和〈/li〉、〈table〉和〈/table〉等等,这些标记成对出现,在其中“和”的位置可以有我们自己的文字内容,不同的标记可以对文字效果进行更改,这样浏览器才能按照标记出现的位置显示不同的效果。

   将这篇文章每一个段落都用〈p〉和〈/p〉包含起来,之后保存index.htm文件,再用浏览器观看,就会发现段落已经被划分出来了!

   颜色呢?段落是被划分出来了,可是所有的文字都是黑颜色的!而且字体、自号全都一样!!这和纯文本文件没有任何区别呀?对呀,因为我还没说更改字体大小、颜色的标记〈font〉和〈/font〉呢!在index.htm文件中写入如下两行代码,然后保存看一下效果:

  〈p〉〈font size=1 color=red〉这是一行红颜色的小字〈/font〉〈/p〉
  〈p〉〈font size=4 color=blue〉这是一行兰颜色的大字〈/font〉〈/p〉

   看到了吗?在〈font〉中有“属性”size和color,大多数HTML“标记”中都有各自的“属性”,〈font〉是文字标记,而具体到其中文字大小、颜色、字体等等效果,就要通过属性来修改了。你也许会问:那HTML到底有多少标记和属性?其实这个问题我也不知道,我手里面有一本《HTML3.2样本手册》,在编写HTML代码的时候,如果忘记了某个标记可以进行查阅,而上述那些高级软件的“傻瓜化”就在这里,利用它们你不需要记忆繁多的标记和属性,只要晃动鼠标就可以了。

   说到这里你也许已经领悟了HTML文件的真谛:说白了就是用标记对一篇纯文本文件进行格式排版!下面说一下HTML文件大体的结构。

   HTML文件很灵活,也很不正规,缺少标记或者使用标记错误浏览器都能够容忍,只不过影响最终的浏览效果而已。但是正确的、完整的使用标记是没有坏处的,例如我们这里的index.htm文件中包含简体中文,而浏览器并不能自动识别文件中的文字是什么语言,这个时候就要在index.htm文件中加入“语言标记”,这样做无非是让我们的浏览器更加“听话”。

   一个标准的HTML文件应该是如下格式:

  〈HTML〉
   〈HEAD〉
   〈TITLE〉标题〈/TITLE〉
   〈/HEAD〉

   〈BODY〉
   〈P〉这里是正文内容〈/P〉
   〈/BODY〉
  〈/HTML〉

   忘记说明两点:1、标记中的内容不区分大小写,也就是说〈BODY〉和〈body〉浏览器都支持;2、空格和换行不会影响效果,例如上面的9行代码写成一行也同样可以。

   在〈head〉和〈/head〉之间是一些控制语句,例如可以控制文件的标题、使用的语言和字体样式等等;
   在〈body〉和〈/body〉是文件的

来源:https://www.tulaoshi.com/n/20160129/1487150.html

延伸阅读
本教程介绍较为合理的网站设计的流程和方法。在操作之前需要对网站的性质有一定的了解,并画好架构图。然后根据架构图慢慢用PS或其他图像软件着色及排版,需要注意好整体效果协调及颜色的搭配。大致架构做好以后再安排素材图片即可得到总体的效果,后期稍微调整一下细节即可。实际操作中不同人操作流程可能有所不同,只要能做出好的作品用什么...
作者在制作之前对产品已经非常熟悉了,从选材到构图都带有浓郁的酒文化;画面也制作的很美,细节到位,非常不错的学习案例。 最终效果 1、这些是根据关键字找寻的素材,用于我们上面的页面。 2、首先,我们把素材里地面和墙扣出来,放入画面摆好。 3、然后我们把颜色去掉,四周用画笔工具抹黑。 ...
本教程介绍高档商业网站的设计过程和方法。作者为大师级别的高手,制作当然非常讲究。画面构成简洁大气,素材安排恰到好处。色彩渲染层次感强。总体非常经典,值得学习。 最终效果 1、前期素材准备,去网上搜集一些华丽,有气派的素材图片,根据下图标志风格选择一些欧式华丽素材。 2、先将画面分成上中...
基本语法: <marquee需要移动的文字</marquee<direction=# 1.方向#=left, right 例:<marquee direction=left从右向左移动</marquee  <marquee direction=right从左向右移动</marquee       2.次数<bihavior=##=scroll, slide,&...
智能ABC窗口的实现 作者:王海军 下载源代码 高级顶层窗口是一种无标题栏、菜单、工具条的一种常居顶层的窗口,最常见的例子就是输入法窗口,比如智能ABC窗口。这类窗口的特点除了上边所说的,最重要的就是窗口移动。普通窗口移动是通过标题栏由系统自动实现的,对于这类窗口就无法依靠系统了,需要手...

经验教程

400

收藏

90
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部