收藏本站
 
设为主页
     您的位置:首页在线课堂高二级2017-2018学年度第二学期 》第三课
==※ 高二级 ※==
2017-2018学年第二学期






==※ 相关资源 ※==
 
太平洋电脑网
天极网
eNet网络学院
 
==※ 自由论坛  ※==
   
用户名:
密码:
 
忘记密码
游客请进
 
第三课 Dreamweaver之表格的妙用
 
学习目的:学习运用表格来布局和美化网页。
学习重难点根据要求插入表格及编辑表格属性。
教学方式:老师讲解、演示;学生自主探究、动手实践。

学习内容:


一、认识表格
  网页中的表格主要有两种作用:表达数据(和Excel表格的作用一样);网页布局(利用表格实现网页的精确排版和定位,还可以利用表格来美化网页)。
  将内容按特定的行、列规则进行排列就构成了表格。在Dreamweaver中,我们可以方便地创建出各种规格的表格,自由地在各个单元格中摆放好我们的内容(文字、图片等),并能对表格进行修饰,从而使网页的版面看上去比较规整和美观。

二、请点击观摩示范网站:《畅游书海》

首页:



“文学”栏目:




下面通过编辑《畅游书海》的首页,从中学习表格的用法。

(一)分析一下《畅游书海》首页的表格结构:




(二)先修改《畅游书海》首页的页面属性:(背景颜色的代码为:#C6AD95
  




(三)插入表格

单击【插入】菜单—【表格】,弹出如下对话框,根据需要设置行、列数,表格宽度等属性。



这时,如果想了解3行1列表格的HTML代码,可以选中整个表格,切换到拆分视图。切换方法和表格HTML代码如下:




插入表格后,可以借助标签选择器或者单击表格的外边框选定表格,修改表格属性,如下图,把表格居中




选中所有行(方法:点击并拖动鼠标),修改所有行的高度为50px,背景颜色为黑色,如下图:



(四)在第一行里插入一个1行5列的表格,准备用来写栏目名称,如下图:



选中新插入的表格,让它“右对齐”:



设置每个单元格的宽度为100px
在每个单元格里输入栏目名称,分别为:首页、文学、教育、生活、科普
并把文字颜色设置为白色,居中对齐。如下图:



(五)在第二行插入一张预先做好的图片,如下图:




(六)在第三行写上制作者名字、版权所有等信息。至此,首页制作完成。


※ 特别提醒:
  1、我们从网上搜集到的图片不一定直接就能用,这时,我们需要利用Photoshop做适当的修改。
  2、请使用适当尺寸的图片。 


三、拓展任务:
  自行探索,完成“文学”页面的制作。




四、课堂小结

  表格布局的实用经验
  1. 用好表格嵌套;
  2. 布局用表格边框为0;
  3. 多层表格嵌套,最外层的表格要居中;
  4. 多层表格嵌套,最外层表格的单位使用像素,而不是百分比。(内层表格可以根据需要选择像素或百分比为单位。)



* 友情提示:本文档只供本校师生上课时辅助使用,不是正规的教学设计或教案。


 

 

Copyright © 东莞中学信息技术科 All Rights Reserved
IE4.0 or later / 800*600  For The Best View