• 网络学院
  • 新手学堂
  • 操作系统
  • 网络技术
  • 软件应用
  • 办公软件
  • 编程技术
  • 网站架设
  • 数据库类
  • 平面设计
  • 多媒体类
  • 游戏资讯
  • 教学论文
  • 认证考试
主页制作ABC---XYZ
广告位
  站点:
  • 首 页
  • 最新软件
  • 最新文章
  • 国内软件
  • 国外软件
  • 汉化软件
  • 源码下载
  • 字体下载
主页制作ABC---XYZ
软件发布 主页制作ABC---XYZ
网络软件 系统工具 应用软件 联络聊天 图形图像 多媒体类 行业软件 游戏娱乐 编程开发 安全相关 教育教学 数码软件
热门软件: QQ 瑞星 pplive e话通 木马克星 千千静听 office2000 五笔字根 Photoshop 视频分割
返回首页 | 文章首页 | 网站架设 | HTML/CSS | 主页制作ABC---XYZ

主页制作ABC---XYZ

 

添加时间: 2005-6-9 6:20:24  作者: 网络收集  阅读次数:72   来源: http://d9soft.com

 

 

       

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

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

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

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

   例如将这篇文章保存成index.htm文件,之后用IE浏览器可以很方便的进行阅读!然而真正完成这项工作之后你也许会发现浏览器虽然能够显示文件的内容,可是段落全没有了,密密麻麻一大堆字显示在眼前,这是什么原因?原因很简单,浏览器在读入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〉是文件的内容,所有要显示在浏览器中的内容都要输入到这里,之后只要对内容进行排版就可以了。

   仍然是上面的文件,将〈p〉这里是正文内容〈/p〉更改成〈p align=center〉这里是正文内容〈/p〉保存浏览,可以发现这段话跑到浏览器正中央了,在将〈body〉更改成〈body bgcolor=blue〉能够发现整个页面的背景变成了深蓝色。就是这么简单!多么复杂、精美的一个页面,也不过是修改修改这里、美化美化那里来实现的。

   正如上面所说,HTML格式可以包含动画、图片、Flash等等,这些也都是靠标记实现的,但是内容实在太多了,整整一本《HTML3.2样本手册》都不能全面述说清楚,更何况一篇教程呢?我这里就是抛砖引玉,让不了解HTML文件的朋友对此有一个基本认识,至于灵活应用,要在自己的反复实践、不断摸索中慢慢掌握。

 

 

 

上下文章:

 

上一篇文章: HTML的基本元素 下一篇文章: Html的几个小技巧

相关文章:

  • 用Painter制作手绘风格女孩教程
  • 让电脑裸奔 制作百毒不侵的系统
  • 制作“百毒不侵”的Windows系统
  • Photoshop用苹果选区制作可爱签名
  • Photoshop轻松制作树叶上的露珠

相关软件:

  • 多媒体课件制作快手 8.6.27
  • 影楼电子相册制作系统 2008 V7.0 个人版
  • 影楼电子相册制作系统 2008 V7.0 白金版
  • 名片制作专家 V6.2.10
  • IE主页保护精灵 V2.5
  • 影楼电子相册制作系统 2008 V6.8 家庭版

 

 

快速导航

  • 网络学院
  • 精品汇聚
  • 字体下载
  • 教程下载
  • ASP源码
  • PHP源码
  • Net源码
  • JSP 源码

网站架设分类导航

  • DreamWeaver
  • HTML/CSS
  • Flash
  • Firework
  • FrontPage
  • 建站指南

本类经典文章推荐

  • 总结:CSS在IE与Firefox下的兼容性
  • 经典:CSS应用常见问题大总结
  • 网站设计的标准时代
  • 用层模拟下拉列表框
  • 苏沈小雨样式表中文手册系列
  • 用CSS控制网页总体风格
  • WEB界面设计五种特征
  • 深入透析样式表滤镜(上)
  • HTML的基本元素
  • 网页中多层效果的灵活使用

HTML/CSS阅读排行

  • 用层模拟下拉列表框
  • 突破网页文字无法复制局限
  • 流程图软件Visio作“高难度”网页
  • 苏沈小雨样式表中文手册系列
  • WEB界面设计五种特征
  • 用CSS控制网页总体风格
  • 制作精美圆角表格两种方法
  • 网站设计的标准时代
  • 网页中多层效果的灵活使用
  • CSS实现的文字竖排效果

网站架设阅读总排行

  • 用层模拟下拉列表框
  • 教你如何用Dreamweaver制作电子相...
  • 用Dreamweaver插件制作动态下拉菜...
  • 突破网页文字无法复制局限
  • 如何设计首页???(解答)
  • Dreamweaver基础技巧-布局阶段
  • 流程图软件Visio作“高难度”网页
  • 网页制作隐藏对象巧利用
  • 站点-网页布局设计基础
  • 动态QQ表情DIY Fireworks轻松搞定

广告位置

字母检索 A B C D E F G H I J K L M N O P Q R S T U V W X Y Z 回到顶部

关于我们 | 版权声明 | 免责条款 | 广告联系 | 软件发布 | 下载帮助 | 下载排行 | 网站地图 | 特别鸣谢 | 友情连接

copyright; 2005-2008 D9soft.com 第九软件网 版权所有