网站制作初步第四部分布局

网站制作初步第四部分布局

第一课：表格

第一节：介绍

使用表格有利于你更好地对网页进行布局，表格就是一些你通过HTML代码创建出来的矩形格，在表格中你可以放置图片、文字或任何你想放置的内容。

表格的优点在于它的灵活性，你可以将表格展开至全部页面，也可以只占用其中的部分空间，选择权全部由你掌握。

了解表格的第一步是你应该知道可以将表格都制成哪些形式，它们是正方形还是矩形？请看下列：

这	是
一个	表格

你还可以把表格变得更加古怪些：

这	是
一个	古怪的
一个	表格

在你开始之前就明白你可以创建出哪种表格，可以帮助你在后面的工作中节省大量时间。

第二节：表格线和框

表格由三个基本标志符组成，它们是：

表格<table>

表格线(table row)<tr>

表格框(table cell)<td>

这里你也许会问为什么表格框(table cell)不是用<tc>做为标志符，而是用<td>呢？其实我并不想告诉你实情，因为那会把问题搞得更复杂。但我想你肯定不会罢休，好吧，告诉你，表格框的实际意义应该是表格数据(table data)，这就是为什么使用<td>做标志符的原因。

你需要记住的是<td>标志符总是在<tr>标志符内，而<tr>标志符则在<table>标志符内，它们是所属的关系。

好了，不要光讲枯燥的概念了，下一节我们就来制作一个表格，来看一看具体情况。

第三节：创建第一个表格

让我们创建一个前面我曾经演示过的表格，请输入下列代码：

<tr>

</tr>

<tr>

</tr>

</table>

这时实际显示效果如下：

Cell 1	Cell 2
Cell 3	Cell 4

你会发现第一个表格线包含cell 1和cell 2，而第二个表格线包含cell 3和cell 4。表格线都是水平的。对于表格中的文字信息，在本例中即cell 1, cell 2等则被<td>和</td>标志符包含在内。

为了看到表格，我们需要添加额外的表格边框信息，简单地情况是让表格边框显示出来即可，当然你也可以设置具体的边框宽度数字，如<table border=5>。而如果你不希望让人们看到表格边框，则可以写为<table border=0>使边框消失。

第四节：表格分栏(colspan)

你可以将一个表格水平分为两栏单元格，如下例：

为了实现这一点，你需要使用"colspan"指令，即在<td>标志符中添加colspan=2的代码，它的意思是让表格单元分为两栏。

<tr>

</tr>

<tr>

</tr>

</table>

实际效果就是这个样子：

Cell 1
Cell 3	Cell 4

第五节：表格分行(rowspan)

你也可以创建下面这样的表格：

Cell 1	Cell 2
	Cell 3

实现这一点的方法是在<td>标志符中添加rowspan=2的代码：

<tr>

</tr>

<tr>

</tr>

</table>

当然，如果上一节的知识你已经掌握，应该明白rowspan=2的意思是分为两行。请记住行(row)是水平方向的，而栏(column)则是垂直方向的。因此如果你想把一个表格单元沿水平方向扩展，那么就需要使用colspan，而如果想让表格垂直扩展，则应该使用rowspan。

第六节：表格排列

下面关于表格的内容则更加有趣。

你可以把放置在表格单元中的文字按一定的排列方式进行排列

例如： align=right 将所有内容居表格右侧

align=left 将所有内容居表格右侧

align=center 将所有内容居表格中央

但稍等一下，别忘了我们还可以让表格中的内容沿垂直方向排列，即可以将它们置于表格顶部、中部和底部，我们使用"valign"来进行控制(vertical—垂直的、竖向的 align）：

valign=top 将所有内容居表格顶部

valign=bottom 将所有内容居表格底部

valign=middle 将所有内容居表格中部

第七节：表格单元间隔

上一节我们学习了对表格的排列，那么你可以还希望能够对表格单元的间隔进行调整，有两个标志符就是进行此方面的控制，有时大家可能会把这两个概念混淆，它们是cellspacing和cellpadding。

这两个标志符都会在表格单元间留出空隙，但方式则有所不同，加大cellspacing值会把表格的边框加宽，从而加大表格单元格之间的空间，而cellpadding则以一种隐含的方式加大表格单元格之间的空间，，从而使单元格远离表格四角。

例如：

具体编写代码的方式为：

请记住，spacing将扩大边框的大小，而padding增大边框周围的空间。

第八节：更多技巧

下面是一些利用表格的更多方法和技巧：

你可以告诉浏览器希望让表格有多宽，方法是在<table>标志符中添加相应信息，一种是指定具体的像素值(像素指的是计算机屏幕上的一个点)，也可以指定表格占屏幕的百分比大小，例如你可以用<table width="50%">来表示让表格的大小始终保持为浏览者浏览器窗口大小的一半，或者使用<table width="300">来表示表格始终占据300个像素的大小，300个像素基本上是4英寸。

另外你还可以向表格中添加颜色，就象给网页添加背景颜色一样，方法是使用"bgcolor"这条指令。例如，如果你想让表格的背景为×××，你可以输入下列代码<table bgcolor="orange">。是不是很简单呀。

好了，学会了表格的知识，在今后你遇到排版页面的问题时，你就会发现表格的巨大用途了。

小结：

<tr>

<td rowspan="" colspan="">单元格内容</td>

</tr>

</table>

第二课：分祯

第一节：介绍

你曾经见到过那种将一个网页分隔成几部分的情况吗？当你点击某一侧的按钮，该侧的内容并不改变，而另一侧的内容则做变动。或者是当你拖动滚动条时，在网页顶端的广告横幅不动，而其下面的网页内容随着你的向下拖动而运动。这些都是一种网页形式，它们被称为“分祯”。

在本课中，我们将向你介绍分祯的知识，并告诉你如何自己创建带有分祯的网页，首先说明的一点，那就是分祯制作非常简单。

第二节：一顿美味野餐

网页的框架形式在某种程度上象是野餐时一个盛满美味食品的果盘，就是那种被分为几个格的盘子，这种盘子在野餐中很常用，你可以把沙拉放入一个格子中，另外的格子放些甜点，当然你还可以在其它格子里任意放些自己喜欢的食品。就象下面这个样子：

当你和家人一起去野外游玩，在吃野餐时，你来到丰盛的食品桌前，看着各种各样美味的食品你的食欲自然是大增。你看到了烤鸡，你选了一块放在盘子中间最大的格子中，然后你看到了妈妈亲手制作的沙拉，这是你最爱吃的，自然不能少了它，所以你选了些放入盘中的一个格子里。接着你看到了果冻，也选了几块放入盘中。好了，挑选完食品后你就可以尽情地享受这顿美餐了。

你也发现了，每份食品之间都是相互隔离互不接触的，在网页上制作框架结构也是为了使网页中的内容各自独立，便于安排网页的布局。

第三节：创建分祯

我们还是拿野餐举例。在我们创建的这个框架网页上，首先需要给它起个文件名，即"picnicplate.html"，这页文件并不对网页的颜色或文字内容进行控制，它只是告诉浏览器其它的几个子网页均归属它来控制。

在这个主框架下，你将建立三个子网页，分别为"chicken.html", "pastasalad.html"和"jellocubes.html"。主网页picnicplate.html为三个子网页均留出了相应的空间，在把三个子网页统一放置进来时，即要让它们与主页面有联系，又要各自独立，从而使你能够非常方便地控制各页。

每个框架子网页都是以〈frameset〉标志符做为开始，而代替了普通网页中的标志符。frameset告诉网页如何进行分隔，你可以按条（即左右结构）来分隔网页，也可以按栏（即上下结构）来分隔网页，但不能将两种分隔方式混合使用。另外你还可以在子框架中再建立该框架的子框架，这样一级套一级，可以实现对网页的更高管理。对于框架内套接子框架这个问题，我们将在后面的内容中再做详细介绍。

对于我们这个野餐的框架网页，我们首先按照分条的方式进行编排，这样网页就被分隔为左右两部分。左方将是"chicken.html"这个网页，而右方则是"pastasalad.html"和"jellocubes.html"，如下图：

第四节：分祯的大小

接下来我们需要对各祯的大小进行调整，我们可以使用各祯占据整个屏幕的百分比或分祯的实际像素值来控制框架的大小。在本例中，既然烤鸡是我最喜爱的食品，就让这个祯占据2/3的屏幕大小，而只把1/3的剩余空间留给其它两个祯。这样分祯的整体结构代码为：

〈frameset cols="66%,34%"〉

这样我们的两个栏左边的占据66%的屏幕空间(也就是2/3左右大小)，而右栏为34%的屏幕空间(也就是1/3左右大小)，在编写代码时请注意两个比例数字之间要用逗号隔开，而且两个数字的总和必须为100。

第五节：设置分祯

在我们设置好整体的框架结构后，就可以在里面继续分隔子框架。每一个框架都由〈frame〉标志符做为起始标志，在这个〈frame〉标志符内我们可以设置很多内容，但这里我们只想探讨两个环节，即框架资源和框架名称。框架资源非常重要，因为它要告诉浏览器应把哪个HTML网页文件放入该框架中，而框架名称的重要性在于当你将此框架与其它框架进行关联时，需要使用名称进行联系。

根据习惯我们按从左至右，从上到下的顺序对框架进行命名，那么picnicplate.html网页的框架代码为：

〈frame src="chicken.html" name="chicken"〉

在这里，"src"代表HTML网页的资源，而"chicken"是这个框架的名称，这就是说把"chicken.html"这个网页放入chicken框架中。

这样，本祯的代码则变为：

第六节：添加子分祯

接下来我们要对第二个分祯(右侧分祯)进行处理，将它分为两个子分祯，并呈上下结构，分为放置pastasalad.html和jellocubes.html两个网页。

子分祯的代码编写要指出如何对右侧分祯进行划分，与前面的步骤相同，我们可以采用百分比或具体的像素值来确定两个子分祯的大小。既然上一次我们采取的是百分比方法，为了让大家有更多的练习机会，在这里我们使用具体的像素值确定分祯大小。

请注意由于各用户的显示屏幕大小不同，因此你不能给所有的分祯确定具体的像素数值，因为这样就可能导致显示出现问题。你要做的是只设置一个分祯的大小，而将另一个分祯设置为占用所有剩余空间，这样就可以解决不同显示屏幕大小的问题了。在本例中，我们将pastasalad.html这个网页占用的分祯空间设置为2英寸，即100像素，而将其余的空间留给jellocubes.html这个页面。这样分祯代码为：

在这里"*"代表占用剩余空间的意思。而且浏览器也清楚"100"指的是像素值，而不是百分比，因为该数字后没有百分号。因此pastasalad.html的分祯高度为100像素，而下面的分祯则根据显示屏幕的不同随机改变。

第七节：最终分祯结果

好了，设置好两个子分祯占据的空间后，仍然与前面所讲的一样，需要为该分祯定义资源和名称，即：

这样，整个野餐盘分祯就制作完毕，我们来看一看该分祯的整个源代码：

<html>

</frameset>

</html>

在三个分祯中，各自对应的网页chicken.html, pastasalad.html和jellocubes.html就象普通网页一样可以有图片、链接、文字信息等，但在分祯的控制下，整个网页则显得非常整齐。

第三课：计数器、留言板及其它

第一节：计数器

好了，你已经制作出一个自己的网站，它有背景、有图片、有文字内容，但你是否发现它还缺少一些东西呢？接下来我们就为这个网页添加更多的功能。你想不想让自己的网页拥有一个浏览计数器？或是留言板？或者是更加复杂强大的聊天室？这些特殊的功能可以为你的网站添色不少，使它更趋个性化。

计数器是一个非常有用和受欢迎的工具，它可以统计访问此网站的人数，每当有新访客进入你的网站，计数器就会显示出目前已经有多少人访问过此网站。关于计数器的设置，你可以选择各种形状、颜色和大小，而且互联网上有许多网站都向个人网站制作者提供免费的计数器，例如国外的网站有BoingDragon, JCount Counters和LookSmart's BeSeen等。

如果你想获得这种服务，只需填写一个表格，将你的个人信息(如电子邮件地址、姓名、网站的地址和名称等)填写完整，有的计数器还能够提供更高的功能，例如你可以设置希望计数器以何种计算单位来统计，是按百位计、千位计，还是百万位计等。你只要按照要求将需要填写的内容全部填写完整，这些服务网站就会为你提供计数器。你需要做的是将网站提供给你的一段HTML代码添加至自己编写的网页中，这样你的网页就拥有一个实时监控访客的计数器了。如果当一位新访客来到你的网站，发现计数器上的数字已经是好几位数，那么肯定会非常佩服你这位网站制作者的。

第一节：计数器

第二节：留言板

你想了解访客对你的网站的评价吗？那么就申请一个留言板吧。

留言板可以允许访问你的网站的浏览者填写一些自己想发表的意见，而且可以留下他们的姓名和电子邮件地址，每位留言者的留言都会按照一定的顺序排列，以便其它的访问者观看并相互交流。留言板也是使你和广大网友交流交友的好场所，特别是如果访问者也正在学习制作网页，你们还可以交流制作网页的经验。就象免费计数器一样，互联网上提供免费留言板的网站也很多，如Guestbooks.net, Guestbook Depot和BeSeen等。你要做的也是填写完整一些信息，便可获得一段HTML代码，当你把这段代码填入网页中便可以拥有这项功能了。

第三节：聊天室和邮递列表

在网上大家都非常喜欢聊天，那么在你的网站上增加一个聊天室自然会受到不少网友的欢迎，但需要提醒你的是，设置聊天室与提供计数器和留言板有所不同，可能需要你对网络知识和计算机知识有较深的了解，才能将聊天室设置得很方便快捷。不过所幸的是，有些象BeSeen这样的网站为初学者提供了一个简易的聊天室，从申请到设置都非常简单。你只要到该网站进入申请状态，填写好表格，选择聊天室的种类，不过几分钟的操作你就可以通过电子邮件接收到该网站为你提供的设置聊天室的详细方法。虽然该说明较长，但却非常简单易懂。

如果你对聊天室这样的强大功能仍不满足，你还可以试试为网友提供邮递列表。你可以选择任意主题，将一些你的想法或搜集到的信息通过电子邮件系统提供给订阅邮递列表服务的网友。你可以前往eGroups这样的提供邮递列表服务的网站进行申请，选择一个讨论类别。不过有的服务商需要在邮件列表中刊登广告，因此你可以在自己的主页上说明如果订户不希望接收广告，可以每月支付5美元来停止接收到不想要的广告信息。而且在提供邮件列表服务时，你可以掌握控制权，因为假设你不喜欢某个人，你完全可以不给他提供这个邮递列表服务。

第四节：测试和表单

你想让自己的网站与众不同吗？那么你可以试试从BeSeen网站申请一个小测验服务，向所有来访者就某方面内容提出问题，来考查一下大家的智力水平。另外你也可以针对某件事让大家进行评选，例如“超人”和“蝙蝠侠”哪个水平更高？“后街男孩”的哪首歌曲你最喜欢？等。申请这种功能的要求与留言板和计数器等的申请基本相同。

另外你还可以设置一些表单，实现下拉菜单、滚动内容框等功能，而且你还可以在网页中留出一个信息框，让网友将自己的评论或感想写进去，这时当他们点击发送按钮时，信息将通过电子邮件的方式发送给你。你可以到Tripod这样的网站，这里有各种各样的表单，你可以选择非常简捷普通的表单，也可以选择颇为花哨的表单来炫耀自己的水平。这个网站在你进行表单功能的申请时也是逐步给与提示的，因此在申请过程中你不会遇到什么麻烦。而且该网站还列出了各种表单的形式，并加以简单解释。除此之外，如果你对自己希望获得的表单有特殊要求，还可以填写一个反馈信息单，将你的要求发送给该网站，这样网站会尽快把你需要的功能提供给你。

第五节：免费电子信箱

如果上述功能都不能让你心动，也许这个东西会令你满意，那就是为所有人提供免费的电子信箱。例如BeSeen网站就允许你提供个性化电子信箱服务，其申请和设置的过程都非常简单。

好了，上面就是所有关于网页制作的介绍。经过这几部分的介绍，你会发现制作网页并不象想象中那样难，那么我希望你能够认真学习本文向你介绍的网页制作基础知识，并将这些知识运用到实际应用中，我想你肯定会制作出漂亮实用的网页，到时别忘了通知我一声，我也要前去访问一番呀。

转载于:https://blog.51cto.com/100114/13339

网站制作初步第四部分布局相关推荐

收藏网站制作常用经典css.div.布局.设计实例打包下载
点击下载:8好玩的导航菜单.动态感比较强lavalamp_0[1].1.0.rar 点击下载:box盒子-.rar 点击下载:cctv-鼠标滑过图片渐变效果.rar 点击下载:css-menu导航.r ...
收藏网站制作常用经典css.div.布局.设计实例打包下载(下方有其他链接)
http://www.aa25.cn/234.shtml 转载于:https://www.cnblogs.com/asia/archive/2009/05/20/1467772.html
网站制作中常用的一些网页布局
打开一个网站,首先呈现在眼前的就是网站的布局,同时好的网页布局也可以让访客更容易在网站上找到他们所需要的信息,所以网站制作初学者应该对网页布局的相关知识有所了解. 一.网页布局类型网页布局大致可分为 ...
HTML5期末大作业：生活服务网站设计——生活服务同城商城(33页) 大学生简单个人静态HTML网页设计作品 DIV布局个人介绍网页模板代码 DW学生个人网站制作成品下载
HTML5期末大作业:生活服务网站设计--生活服务同城商城(33页) 大学生简单个人静态HTML网页设计作品 DIV布局个人介绍网页模板代码 DW学生个人网站制作成品下载常见网页设计作业题材有个人 ...
HTML5期末大作业：仿英雄联盟网站设计——仿英雄联盟LOL首页(11页) 大学生简单个人静态HTML网页设计作品 DIV布局个人介绍网页模板代码 DW学生个人网站制作成品下载
HTML5期末大作业:仿英雄联盟网站设计--仿英雄联盟LOL首页(11页) 大学生简单个人静态HTML网页设计作品 DIV布局个人介绍网页模板代码 DW学生个人网站制作成品下载常见网页设计作业题材有 ...
HTML+CSS静态页面网页设计作业——布偶猫(7页)带留言板大学生简单个人静态HTML网页设计作品 DIV布局动物网页模板代码 DW学生个人网站制作成品下载
HTML5期末大作业:布偶猫网站设计--布偶猫(7页)带留言板大学生简单个人静态HTML网页设计作品 DIV布局动物网页模板代码 DW学生个人网站制作成品下载常见网页设计作业题材有个人. 美食. ...
HTML5期末大作业：布偶猫网站设计——布偶猫(7页)带留言板大学生简单个人静态HTML网页设计作品 DIV布局动物网页模板代码 DW学生个人网站制作成品下载
HTML5期末大作业:布偶猫网站设计--布偶猫(7页)带留言板大学生简单个人静态HTML网页设计作品 DIV布局动物网页模板代码 DW学生个人网站制作成品下载常见网页设计作业题材有个人. 美食. ...
海外多语言国际婚恋相亲网站开发制作，第四篇
第一篇:https://blog.csdn.net/weixin_43144260/article/details/113852613 第二篇:https://blog.csdn.net/weixin ...
HTML5期末大作业：食品超市网站设计——食品超市-功能齐全(31页) 大学生简单个人静态HTML网页设计作品 DIV布局个人介绍网页模板代码 DW学生个人网站制作成品下载
HTML5期末大作业:食品超市网站设计--食品超市-功能齐全(31页) 大学生简单个人静态HTML网页设计作品 DIV布局个人介绍网页模板代码 DW学生个人网站制作成品下载常见网页设计作业题材有个 ...

网站制作初步第四部分布局

网站制作初步第四部分布局相关推荐

最新文章

热门文章

网站制作初步 第四部分 布局

网站制作初步 第四部分 布局相关推荐

最新文章

热门文章

网站制作初步第四部分布局

网站制作初步第四部分布局相关推荐