用表格制作网页

2017-04-17

你知道表格能做成网页吗?如果你知道,那你又知不知道怎么做呢?下面是小编为你整理的用表格制作网页,希望对你有用!

利用表格制作网页

实验目标

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

实验过程

《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,但将网页内连结到的文件改成绝对定义有些网页浏览器容许在打印网页前预览,并可选择印底色与否,甚至放大、缩小。

更多相关阅读

最新发布的文章