页面教程1 大家好,首先谢谢大家选择加入我们文澜网络技术部页面组，我知道有很多同学之前可能都没有接触过页面制作，不过放心，我们是零基础的，我们会慢慢教大家，只要大家认真学习，我相信你们会做得很好的。好了，下面就是在你们第二次面试——机试之前的教程，也是对于页面的一些基本知识和名词的了解，可能一开始比较难理解，要花费你们一点时间，不过我相信当你们学到知识后，都觉得是值得的。好了，废话就不多说，下面就是一些你们在第二次机试前需要学习的东西。 在开始前，我们先来了解一些关于页面和html的知识吧~~ 首先，编写页面，你们需要用到的，是每个人电脑里面都原本有的工具——记事本。我们知道，每个文件都有各自的后缀名用以保存。而记事本的后缀名就是.txt ，那么我们要编写页面的时候，需要将这个后缀名进行修改。具体操作是： 1． 先进行文本文档的创建 2． 创建后如果你是使用的计算机上已经显示出了文件的后缀名.txt：那么你需要做的仅仅只是重命名将txt改成html即可。 3． 如果你使用的计算机上还没有显示出文件的后缀名： 双击我的电脑，在最上面的菜单栏中找到“工具”选项卡，单击，在下拉菜单中选择文件夹选项，在查看选项卡下的高级设置中，找到隐藏已知文件类型的扩展名，将前面的勾取消，将txt改成html即可。 好了，在完成了页面文件的创建之后，单机右键，在打开方式中选择用记事本打开。 在正式写页面之前，我就为大家对页面中的一些基本概念进行解释吧~~ 网页(web page)，是网站中的一「页」，通常是HTML格式（文件扩展名为.html或.htm或.asp或.aspx或.php或.jsp等）。网页要使用网页浏览器来阅读。 文字与图片是构成一个网页的两个最基本的元素。你可以简单的理解为：文字，就是网页的内容；图片，就是网页的美观。除此之外，网页的元素还包括动画、音乐、程序等等。 在网页上点击鼠标右键，选择“查看源文件”，就可以通过记事本看到网页的实际内容。可以发现，网页实际上只是一个纯文本文件，它通过各式各样的标记对页面上的文字、图片、格、声音等元素进行描述（例如字体、颜色、大小），而浏览器则对这些标记进行解释并生成页面，于是就得到你现在所看到的画面。为什么在源文件看不到任何图片？网页文件中存放的只是图片的链接位置，而图片文件与网页文件是互相独立存放的，甚至可以不在同一台计算机上。 HTML（HyperText Mark-up Language）即超文本标记语言或超文本链接标示语言，是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。 HTML文本是由HTML命令组成的描述性文本，它的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。 另外，HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。也许你听说过许多可以编辑网页的软件,事实上,你不需要用任何专门的软件来建立HTML页面；你所需要的只是一个文字处理器（如Office Word\记事本\写字板\Gedit\OpenOffice.org等等）以及HTML的工作常识。其实你很快就会发现,基础的HTML语言其实非常容易哦，它不过是组合成一个文本文件的一系列标签而已。 好了~大家看了这么多这么长的基本概念后，大概对页面也有一些了解了吧？那么接下来，就一齐看一个简单一点的页面吧。（p.s 还是从实例上比较容易理解嘛~） //《声明标签》（基本上，每个页面都是从DOCTYPE开始的，用于声明文档的类型，而且需要注意的是，在他之前不能有任何内容包括换行符和空格） //----------------------------------------    《 开始标签》   //--------------------------------------                 《头部标签》   //-------------------------------------- //----------------------------------------                                       

欢迎光临我的主页

                      
                                           

---

                                               《文件主体》                        这是我第一次做主页                                                                                                             //--------------------------------------- //---------------------------------------     《结尾标签》 是HTML文档的头部标签, 在浏览器窗口中，头部信息是不被显示在正文中的,在此标签中可以插入其它标记, 用以说明文件的标题和整个文件的一些公共属性。若不需头部信息则可省略此标记，良好的习惯是不省略。     是嵌套在头部标签中的，标签之间的文本是文档标题，它被显示在浏览器窗口的标题栏。 正文则夹在和之间－－即所有页面的内容所在。页面上显示的任何东西都包含在这两个标签之中。 那么可能就会有人问了，那个正文中夹在<>之间的那些很多不同的单词是什么呢，那个在页面中我们称之为标签，它是用来分割和标记文本的元素，以形成文本的布局、文字的格式及五彩缤纷的画面。属性是标签里的选项。在页面中有各种各样的标签，每个标签都有不同的含义，正是这些标签构成我们的页面。 HTML的标签分单标签和成对标签两种。成对标签是由首标签<标签名> 和尾标签组成的，成对标签的作用域只作用于这对标签中的文档。单独标签的格式为<标签名 />，单独标签在相应的位置插入元素就可以了(单独标签比较少见，常用的单独标签有

---

等)。大多数标签都有自己的一些属性, 属性要写在首标签内，属性用于进一步改变显示的效果, 各属性之间无先后次序，属性是可选的，属性也可以省略而采用默认值;其格式如下： <标签名 属性1 属性2 属性3 … >内容     作为一般的原则，大多数属性值不用加双引号。但是包括空格、％号，＃号等特殊字符的属性值必须加入双引号。为了好的习惯，提倡全部对属性值加双引号。下面举一个例子吧~ 字体设置 HTML代码和标签，属性都有很多，大家可以看一些我在下面为你们推荐的网站： http://www.w3school.com.cn/h.asp 选择当中的HTML选项就可以了。 首先你们的重点是标签、属性、链接、表格。 · 在简单介绍完HTML之后，我来给大家讲解一些关于CSS的知识吧~ 也许你们会有疑问，什么是css呢？ 1CSS是Cascading Style Sheets(层叠样式表)的简称. 　　 2CSS语言是一种标记语言,它不需要编译,可以直接由浏览器解释执行(属于浏览器解释型语言). 　　 3在标准网页设计中CSS负责网页内容(XHTML)的表现. 　　 4CSS文件也可以说是一个文本文件,它包含了一些CSS标记,CSS文件必须使用css为文件名后缀. 　　 5可以通过简单的更改CSS文件,改变网页的整体表现形式,可以减少我们的工作量,所以她是每一个网页设计人员的必修课. 6CSS是由W3C的CSS工作组产生和维护的. 这些都是比较官方，比较规范的解释了，下面我就简单的讲解一下究竟CSS在页面设计中的作用吧。还记得我在前面给大家的介绍关于标签的知识么？每一个标签都可以带有自己的属性值，属性是可选的，也可以省略而采用默认值。CSS的作用，就是不再使每一个标签的属性值在标签中定义，而是将之提取出来，单独写在另外的地方，二者最后产生的页面效果是完全一样的~ 举个简单的例子，如果我下面每段文字都将要选用格式为宋体，字体为红色，大小为25的文字。在css中，你只需要写一次这种格式，以后就可以选用了。而如果不用CSS的话，你的每个中都将要定义一模一样的文字格式，而且看起来也很多很乱。 所以我们一般会采用CSS+HTML的方式进行页面的编写。而关于CSS，其实也是和HTML一样有很多属性和代码的，这些你们也可以在上面我给你们推荐的网站上进行查看。 我下面要为大家讲解一下如何将css加入网页当中。一共有3个方式 1.链入外部样式表文件 (Linking to a Style Sheet) 　　你可以先建立外部样式表文件（.css），然后使用HTML的link对象。示例如下： 　　 　　 　　 　　 2.定义内部样式块对象 (Embedding a Style Block) 　　你可以在你的HTML文档的和标记之间插入一个块对象。 定义方式请参阅样式表语法。示例如下： 　　 　　 　　 　　 　　 　　请注意，这里将style对象的type属性设置为"text/css"，是允许不支持这类型的浏览器忽略样式表单。 3.内联定义 (Inline Styles) 　　内联定义即是在对象的标记内使用对象的style属性定义适用其的样式表属性。这种定义方式非常不常用，而且和直接在HTML标签中添加属性值没什么区别，因此就不加介绍了。 最后要说明的是，如果你在不同的地方都对同一段文字进行属性设置，是拥有定义优先权的，而最接近目标的样式定义优先权越高。高优先权样式将继承低优先权样式的未重叠定义但覆盖重叠的定义。（p.s,说这个只是想大家对优先级有个基本的印象，因为这个比较复杂，我们会在以后的教程给大家继续讲解，现在可以先放一下。） P.S 关于css的部分可能对于新接触的有点难理解，你们尽量看一看，到时候能掌握就加分，没有的也能用别的方法做出来。 最后，要为大家讲解的是关于页面方面的布局。（这个是对于一个页面做得好不好比较重要的） 我们平常看到的网页都是精密设计好的，这种板块设计称为布局。那么怎么样用代码实现呢？我们可以把一个个板块理解成一个个框框，我们填塞的内容就是在这一个个框框里面。最基本的布局又叫三段式布局，样图如下： 那么这样把页面一分为三再分别添加内容的代码是怎样的呢？ 我们把三个框框叫做“div” 现在直接告诉大家怎么实现这三段式的划分： 在页面的BODY中插入

这样的代码，就构成了三段式的划分，每一块的内容分别填写在每一个

与

之间。当然同样可以用之前学过的表格呈现，你们可以按照自己的习惯来。 如果采用这种方式的话，做出来的页面会比较好看，不会把东西都放的很混乱，这样也方便自己进行编写或者进行修改。不过上面的这个例子只是一种比较简单的，比较常用的布局，还有很多其他不同的布局，这个比较复杂，大家以后在进行学习，首先了解这个简单的先。不过有兴趣的也可以自己在http://www.w3school.com.cn 这个网站上看看。（不过这个我们的机试暂时不会太难，不过会的当然会加分啦） 基本上内容就是这么多了。而具体能把页面做成什么样子，就需要靠大家的自我学习能力了~~ 基本上机试中涉及的问题我都给大家进行了讲解了，还有一点就是上面我给你们提供的网站里面有很多讲解是非常好的，还有很多例子的讲解，你们如果在学习中遇到了什么问题都可以在上面查一查~~ 加油学习噢各位~~期待大家的精彩表现，技术部等着你~~~~~~~~