时间:2021-05-08
在浏览网页的时候可以发现,很多用于网站排版的表格都是经过美化处理的,这些表格不仅起了布局排版的作用,而且在很大程度上美化了网页,使网页看起来更加漂亮、新颖。
效果说明
利用表格美化页面的方式有很多种。本例制作出来的带有层次感的表格如图 8-1 所示。
创作思想
利用表格美化页面并不需要很多的制作技巧。例如本例只需要进行简单的表格嵌套(即在表格中插入表格),即可达到美化效果。
操作步骤
( 1 )新建一个页面文件,然后在编辑区域中插入一个 2 × 1 的表格,并设置表格的基本属性参数,如图 8-2 所示。
( 2 )设置表格。将光标置于第一行的单元格中,再将单元格的背景颜色设置为 # 69A 538 ,并应用同样的方法将第二行单元格的背景颜色设置为 #8FCB 5A 。设置完成后将光标至于第一行的单元格中,然后在此单元格中插入一个 1 × 5 的表格,并设置表格的基本属性参数,如图 8-3 所示。
( 3 )录入文字并设置单元格。在新插入的表格的所有单元格中输入文字,然后选中所有单元格,设置单元格的相关属性,如图 8-4 所示。
( 4 )改变其中一个单元格的文字颜色和背景颜色,使其突出显示,如图 8-5 所示。
( 5 )保存页面文件并按 F12 键进行预览,此时即可得到带有层次感的表格效果。至此,本实例操作完毕。读者可参考随书光盘中本实例素材文件夹里的 mhtable.htm 文件,查看制作的结果是否正确。表格是网页中必不可少的元素之一,美化表格也就顺理成章,成为决定网页美观与否的关键。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
【网页制作教程网】Dreamweaver静态网页的制作步骤是什么?如何制作html5手机页面?下面就和小编一起来看看吧! Dreamweaver静态网页的
dreamweaver不仅可以做静态网页,还可以做动态网页,在网页制作中,常常会有相同类型的网页,对此常常用表格来进行布局。但有时有表格布局并不能实现网页的需求
【dw网页教程】如何用Dreamweaver保存创建的网页?如何使用Dreamweaver制作网页?Dreamweaver制作静态网页有哪些步骤?下面就和小
通过利用背景颜色与间距制作细边的表格教程的介绍,大家在Dreamweaver中插入一个表格,若设置其“边框(Border)”为1,预览时
DreamWeaver中输入的文字,想要换换,我们可以使用p段落标签,也可以使用br换行标签,都能够使文字主动换行,下面我们就来看看实例教程。软件名称:Adob