实训四-HTML基础知识之表格化网VIP免费

1/7实训四HTML基础知识之表格化网页主要内容：本周需要完成的任务：小组网站规划设计时间：xxxx-xx-xx一、网站定位（请准确详细描述网站定位及网站主题）（请准确详细分析网站的目标用户群，包括分析这些用户的需求、行为习惯、偏好、个性特点等。）二、网站风格版式设计（请根据网站定位，查阅几个（不少于3个）参考网站首页风格、版式，并给出参考网站的网站名称、网址、首页截图）（请根据参考网站风格、版式，给出你们组自己的设计风格描述，包括对风格特点的描述和色调的选择，并画出版式图）（版式图参考下图：）页头导航栏会员登录区&友情链接内容版权三、网站栏目规划四、文件目录结构五、网站功能及内容设计六、实现方式七、网站的发布及维护报告人组长：学号+姓名成员：学号+姓名学号+姓名2/7操作部分：HTML表格的制作提示：请务必做好准备工作。在硬盘上创建一个自己的文件夹，专门存放网页素材和制作的网页。如在E:/盘创建一个“myweb“文件夹。将从FTP上下载下来的”images”文件夹（专门存放图片），存放在自己的“myweb”文件夹内，以备制作网页时使用。在自己的文件夹内新建一个文本文档，保证文件的后缀名“.txt”是显示出来的。方法：文件夹【工具】菜单【文件夹选项】，【查看】选项卡中把“隐藏已知文件的扩展名”勾掉。1.双击打开记事本，在其中输入代码。

11	12
21	22

2.保存记事本，并给文件重命名为“first.html”。3.浏览网页效果，会发现数字显示了，但看不出表格的效果。4.修改代码，在表格标记中添加属性：，保存后测试。5.表格边框不明显，我们可以继续添加属性，比如改变表格边框的颜色，改变表格的默认宽度等：，保存后测试。6.大家现在应该从单词上能猜到这两个属性的作用了。除了表格标记可以加属性外，标记和

标记都有相关属性，例如：3/721 11 12 22 保存后测试。7.表格、表格中的行、每行中的单元格，都可以添加独立的背景颜色（bgcolor）和背景图片（background），请自行测试。知识链接：表格标记：⋯⋯⋯⋯⋯表格⋯⋯⋯⋯⋯一行⋯⋯⋯⋯⋯一列/一个单元格，表格的内容只能放在单元格中⋯⋯⋯⋯⋯⋯⋯一行分成几列，就出现几对td标记⋯⋯⋯⋯⋯⋯⋯表格需要几行，就出现几对tr标记 ⋯⋯ 表格标记——table常用属性：属性名描述width、height分别设置表格的宽度、高度，td也有此属性border设置表格边框线的宽度bordercolor设置表格边框线的颜色bgcolor、background分别设置表格的背景颜色或背景图片，tr、td也有此属性HTML表格的排版作用1.在前面制作的网页的基础上继续修改，先把网页改成如下效果：要点：三行三列的表格；表格宽度600(px)；表格边框宽度2(px)边框颜色#ff0000；第一行背景颜色pink；第二行背景颜色yellow；第三行背景颜色green；4/7保存后测试，看跟例子效果是否一样。2.继续修改如下。	12	13
21	22	23
31	32	33

保存后测试，能看出来表格起到的布局作用吗。3.继续修改，先把网页布局做好，例如布局效果如下。怎样实现？要点：第二行（黄背景的）第一列：要跨两行的空间，也就是第三行（绿背景）第一列（31单元格）被占用了：5/7...