用表格制作网页_练习1 利用表格布局网页实例

 

　利用表格制作网页     

　　实验目标

　　该网页将利用设计页面的布局，制楚雄师院的页面简介。通过该种制作，我们可以体会到表格在布局设计中的实际运用，体会如何使用表格来控制页面中的元素对象，已达到自然，生动的配置构成元素的目的。

　　实验过程

　　《1》在dreamweaver中执行《文件》中的《新建》命令，创建一个HTML文档。然后在《文件》中保存该文档。然后在《文档》工具栏的《标题》中输入“师院首页”。然后单击《常用》工具栏的表格按钮，插入一个3行3列的表格。

<2>选中第2行表格的第2单元格。单击属性面板中的合并所选单元格按钮，将其合并。然后将指针置于第1行第1列单元格内在属性面板中将《宽》设为200，<高》设为30。

　　《3》单击《常用》工具栏中的常用图像按钮，再打开的《选择图像源文件》对话框中选中一幅图片，单击《确定》按钮，为单元的插入一幅图片。

　　《4》将鼠标指针移到第1行1列单元格内，在属性面板中将《宽》设为50，《高》设为30，单击《常用》工具栏中的图像按钮，打开《插入鼠标经过图像》对话框。

　　《5》在打开的< 插入鼠标经过图像>对话框中，单击《原始图像》后面的《浏览》按钮.。在打开的对话框中选中一幅图片，单击确定按钮，在单击《鼠标经过图像》后面的《浏览》按钮，用同样的方法选定一幅图片。

　　《6》设置完成后，单击《确定》按钮，然后同同第4,5步一样为第1行的第1,2列也分别设置鼠标经过图像。然后将鼠标指针置于第一行第三列的单元格内，在《属性》面板中，为《宽》设为100，《高》。设为50。为《背景颜色》设为#333cc。

　　《7》将鼠标指针置于表格的第3行，按前面的方法，为第3行单元格也插入一幅图片。然后将鼠标指针置于表格的下一行，单击《常用》工具栏表格图标按钮，为文档在插入一个3行3列的表格。

　　《8》将鼠标指针置于插入表格的第1行第1列中，在属性面板中将《宽》。设为120，然后将鼠标指针置于第1行第1列单元格内，按下Ctrl+Alt+t组合键，打开《表格》对话框。设置好后，单击《确定》按钮，给单元格插入嵌套表格。

　　《9》选中插入的嵌套表格在属性面板中将《对齐》设置为剧中右对齐。然后将鼠标指针置于嵌套表格第一行中，按照前面的方法，为其插入一幅图片。同样的，为其第2,3,4,5列也分别插入图片。

　　《10》在属性面板中，将第6列单元格的《高》设为50，再将鼠标指针置于第7列，为其插入一幅图片。单击《状态栏》中的《tatle》标签，选中第7步插入的3行3列的表格，在属性面板中，为《背景颜色》设置为#009966。

　　《11》将鼠标指针置于7步插入表格的第2行2列中，在属性面板中，将《垂直》设置为顶端。打开《表格》对话框，其中的设置如图11所示。设置完后，单击《确定》按钮，为单元格插入嵌套。

　　《12》在上一步插入表格的属性面板中，将对齐方式设为居中对齐，将鼠标置于该表格的第2行，按下ctrl+alt+I组合键，在打开的对话框中选择一幅图，单击确定，为单元格插入图片。在该单元格的属性面板中，单击居中对齐按钮，将图片居中。

　　《13》将光标置于下1列单元格，输入文字。在网页中右击，在弹出的快捷键菜单中执行《CSS样式》的新建命令，弹出《新建CSS规则》对话框。按照设置后，单击《确定》按钮，弹出《X1的规则定义》对话框。

　　《14》在《X1规则定义》对话框中，将《文字》设为宋体，《大小》设为12像素，，《样式》设为正常，<行高>设为26像素,其余不变.单击<确定>按钮，在编辑窗口选中输入的文字，右击，在弹出的快捷菜单中执行《CSS样式》的x1命令，为文字应用css样式。

　　《15》将鼠标指针置于第7步插入的3行2列表格的下一行，然后按下ctrl+Alt+T组合键打开《表格》对话框，设置完毕后，单击《确定》按钮，为网页插入表格。

　　《16》选中上一步插入的表格，在属性面板中，将《背景颜色》设为#99FF66。将鼠标指针设置于第1行单元格内，在属性面板中，将《水平》设为右对齐，然后为该单元格插入一幅图片。

　　《17》将鼠标指针置于定2行单元格内，在属性面板中，将《格式》设为段落，《水平》设为右对齐，然后输入师院信息。在网页中右击，在弹出的快捷键菜单中执行《css样式》的《新建》命令弹出《新建css规则》对话框。

　　《18》《新建css规则》对话框的设置如图18所示，设置好后，单击《确定》按钮。弹出《x2的规则定义》对话框，将《大小》设为19像素，《样式》设为正常，《行高》设为20像素，《颜色》设为，其余不变。设置完毕后，单击确定按钮。

　　《19》在编辑窗口选中输入的文字，右击在弹出的快捷菜单中执行《css样式》的《x2》命令，为文字应用css样式。按下ctrl+s组合保存文件，按下F12键预览在IE中。

　什么是表格

　　表格，是指按所需的内容项目画成格子，分别填写文字或数字的书面材料，便于统计查看。是人们表达解释事务性质所运用的数据传达形式，在经济领域或者统计活动中运用很是广泛。

　　在Microsoft Office 中：

　　表格：表格由一行或多行单元格组成，用于显示数字和其他项以便快速引用和分析。表格中的项被组织为行和列。

　　表格由行，列，单元格三个部分组成。

　　在现实生活中：

　　表格应用于各种软件中,有表格应用软件也有表格控件,典型的像Office word,excel, 表格是最常用的数据处理方式之一，主要用于输入、输出、显示、处理和打印数据，可以制作各种复杂的表格文档，甚至能帮助用户进行复杂的统计运算和图表化展示等。表格控件还可常用于数据库中数据的呈现和编辑、数据录入界面设计、数据交换(如与Excel交换数据)、数据报表及分发等。比如Spread,ComponentOne的FlexGrid。而随着互联网时代的发展，现在还能在网上做表格，简称“网表”或“在线表格”。

　　表格的HTML基本语法

<table>...</table> - 定义表格

<tr> - 定义表行

<th> - 定义表头

<td> - 定义表元(表格的具体数据)

　　什么是网页

　　网页是一个文件，通常是HTML格式(文件扩展名为.html或.htm)。网页通常用图像档来提供图画。网页通常要透过网页浏览器来阅读。根据W3C对于WEB PAGE的定义，网页是一个信息的集合，其内容包含一个或多个网络资源的信息，同时预期使其成为单一个URI。进一步说，一个网页其包含一个或多个嵌入于网页中的网络资源使其成为单一个URI档案(HTML)，而该URI并 不再嵌入于其他档案之中。

　　网页是构成网站的基本元素，是承载各种网站应用的平台。通俗地说，您的网站就是由网页组成的，如果您只有域名和虚拟主机而没有制作任何网页的话，您的客户仍旧无法访问您的网站。

　　网页是一个文件，他存放在世界某个角落的某一部计算机中，而这部计算机必须是与互联网相连的。网页经由网址(URL)来识别与存取，是万维网中的一“页”，是超文本标记语言格式(标准通用标记语言的一个应用，文件扩展名为.html或.htm)。网页通常用图像档来提供图画。网页要透过网页浏览器来阅读。

　　静态网页

　　静态网页，其内容是预先确定的，并存储在Web服务器或者本地计算机/服务器之上。

　　特点：

1，制作速度快，成本低

2，模板一旦确定下来，不容易修改，更新比较费时费事

3，常用于制作一些固定板式的页面。

4，通常用于文本和图像组成，常用于子页面的内容介绍。

　　动态网页

　　动态网页，是取决于由用户提供的功能，并根据存储在数据库中的网站上的数据中创建的页面。

　　储存

　　当要将网页存入自己的电脑内，网页浏览器通常提供以下的选择：

　　只储存网页的文字部分完装封装，即连同该网页(HTML)所要用到的图像、Applet和JavaScript等文件也一并封装储存只有HTML，不作任何改动;若果网页内的连结是相对连结，可能会令图片消失只有HTML，但将网页内连结到的文件改成绝对定义有些网页浏览器容许在打印网页前预览，并可选择印底色与否，甚至放大、缩小。

学习css的6个方法

　　快速学习css的6个方法

1、掌握HTML

　　要想学会CSS,首先必须掌握HTML，如果你没有学会HTML,那么你将无法有效使用CSS，因为他们是相铺相成，缺少了HTML的CSS是毫无意义的。HTML的学习是非常的重要，以至于你需要花费一半的学习时间在里面。

2、CSS概念

　　在学习CSS之前，首先要了解CSS是什么，为什么CSS是如此重要，在了解CSS基本概念后，你将能理解到网页设计中CSS扮演着什么角色。

3、CSS基本语法

　　所谓无规矩不成方圆，CSS基本语法的分为3部分：CSS选择器、CSS选择器声明、CSS的继承，这3部分是CSS的精髓，始终贯穿在编写CSS之中。在CSS语法学习中，我们会面临同一种结果却有着多种表达方式，这时要根据页面的需要采取合适的表达方式来实现。当我们对CSS有所理解时可以使用CSS缩写，这样可以精简CSS代码，降低CSS文件大小，提高网页打开速度，同时能使代码更加通俗易懂，

4、CSS兼容性

　　由于每个浏览器都有其默认的CSS，所以不同的浏览器下有着不同的显示效果。在我们开始编写CSS代码时，对CSS没有深入掌握的情况下，难免会犯下对浏览器兼容不一致的问题，这要求我们在编写CSS代码时，最好在两个不同的浏览器上进行预览，以便及时调整各个环节，通过这样不断的预览测试，发现然后解决问题来快速的掌握CSS在不同浏览器下的兼容性。

5、CSS工具

　　好的CSS工具不仅有助于帮助你学习CSS，而且还可以帮助你提高编写CSS代码的效率，当然你也可以使用Dreamweaver或者使用纯文本编辑器如记事本来编写，这取决你的习惯，正所谓萝卜白菜各有所爱。

6、利用各种渠道学习

　　学习CSS不要一味的埋头苦干，多去CSS相关的论坛和博客逛逛，要做到不耻下问，多听听前辈的讲解。还要多参考其他著名网站的CSS代码，毕竟都是些CSS高手写的代码，代表CSS代码的规范和一些前沿技术，这样对我们快速掌握各种CSS技巧并运用到实际编写中，是有很大好处的。

　　学习CSS是一个循环渐进的过程，面对学习CSS过程中可能会遇到这样那样的问题，所以心理要有准备，碰到难点时多查，多问，多实践才能发现和解决问题。有人说CSS很难，有人说CSS很容易，难与容易取决于自身的学习态度，因为学习态度决定一切

　　如何深入学习css

　　学习CSS有了一定基础后，有的人会觉得好象没有什么学的.因为知道一些基本的理论性的东西.CSS说它容易是因为它的知识点有限.说它难学就在于各浏览器对CSS的支持程度不同.

　　如何深入学习我给出以下几点见意：

1.去找机会多做一些项目，公司的，或是外包的，哪怕你没有人民币挣也要做.

　　这一条并不是多做就会好有的效果，有的人做的项目不少总是按着老的思路去做，做了很多，水平也不会有太大的提高，提高的也只能是熟练度.每一次在做的过程中要学会去思考，看看我们有没有更优化的的方法去实现同一个效果.多说一个题外话：有一个错误的观点认为HACK是不好的.想法也是错的.我们在做页面时原则是不使用HACK，但是如果在特别需求上有时还是要使用，前提是你不用HACK不行，一些人的能力有限，所以他没有办法了就用HACK，很多时候可以换个思路就可以不用HACK.多说了这一点儿.要做完项目时遇到了新的问题，一定要做笔记下来，以后忘了也可以知道在哪能查到这个问题.

2.多去BBS，这样可以多看看一些别人项目中遇到的问题.这是一个日积月累的过程，你看的东西多了.掌握的多了，因为你做的项目是有限的，不可能把所有的问题都遇到，别人遇到的你去思考，看如何解决.或看其它人如何解决这个问题的.当你在项目中遇到这个问题，你就可以不用在多费时间就几钟的事了.有经验与没有经验的区别也就是这一点，有经验的人不是天才，是他做的东西多了，一看就明白知道如何解决.而没有经验的人会现想这个问题如何解决，那可以要花好多时间的.

3.多看一些国外的好的CSS网站，CSS代码是公开的，可以很方便的看到.分析他们的页面和CSS.从好的网站你会学到很多东西，和你已有的一对比，你会发现他们的思路要比你开阔的多，也优秀的多.

　　在学的过程中都会经历过几个踏步不前的状态，每提高到了一个小阶段会觉得没有什么学的，这种情况是正常的.是因为你的学习思路受限，但在这个不前的这个时期过了之后你一定会发现你要去学的东西的，然后你又会有一个新的止升阶段.