欢迎来到天天文库
浏览记录
ID:16537538
大小:6.01 MB
页数:30页
时间:2018-08-22
《在网页中使用表格、文字和图片实训教案》由会员上传分享,免费在线阅读,更多相关内容在教育资源-天天文库。
1、在网页中使用表格、文本和图片本节课案例效果图:一、新建站点在Dreamweaver中新建站点,站点名自定,在站点文件夹中新建文件夹images,用来存放网页需要的图片素材,新建文件index.html作为网站的首页,并开始编辑网页。(该步骤不熟悉这参考第一周实训教案)二、index.html网页的编辑1、添加网页的背景图片单击【属性检查器】中的【页面属性】在打开的窗口中,通过【浏览】设置网页的背景图像为images文件夹中的background.gif图片。如下图所示:2、使用表格对网页进行布局1)插入4行1列的表格
2、(1)在菜单【插入】中选择【表格】按钮,如下图所示:(2)在下边的窗口上进行相应的设置,如下图:注意:该表格是用来布局页面的,是控制页面中的内容在适当的位置显示的,不是我们用来填数据的表格,所以这里表格的边框粗细设置为0,这样的话表格看上去是隐藏的,不会影响页面的美观性。在这里我们为了编辑的方便可以先设置为1像素的边,最后完成网页后再修改为0。运行浏览效果为:我们会发现表格式默认居左的,接下来我们设置表格在整个网页中居中,将光标放在表格的边上单击一下选中整个表格,然后在【属性检查器】中将【对齐】方式设置为【居中对齐】
3、方式。如下图所示:接下来我们运行查看结果如下图:2)增加单元格列的划分(3)在第一行单元格中,再插入一个表格为1行2列,将光标定位在第一个单元格中,点击【插入】菜单,选择【表格】,并进行行列的设置,如下图:运行效果如下图:(4)使用同样的方法,在第3行的单元格中插入一个表格为1行3列,设置如下图所示:运行效果如下:接下来我们为了编辑过程中视觉比较清晰,我们通过拖拽的方式来拉高行高,如果是嵌套了表格的单元格,可以直接拖拉内部表格来进行高度的调整,结果如下图:3、第1行内容的插入(1)在第1行内表格的单元格中分别输入Fa
4、shion时尚生活和服饰搭配和礼仪,结果如下图:(2)文字内容的美化首先,选中Fashion,如下图:然后,在属性检查器中选中CSS,如下图:接下来我们单击颜色选择器右下角的黑色小三角,在展开的颜色面板上选择一种橙色,选择是只要单击一下即可,如下图:在单击的同时弹出CSS设置窗口,如下图:在【选择器类型】中选择“类(可应用于任何HTML元素)”,然后给出类名为.fashion,注意前边必须有点,名称开始的符号必须为字母。然后确定即可。接下来,还是保持选中该部分文字,在【属性检查器】中修改文字的大小为36,字体为Tah
5、oma,并且加粗,这时就不会弹出CSS的命名窗口,因为该修改仍然是在.fashion类上进行的,如下图:在此,如果想给dreamweaver添加新的字体,可以单击【编辑字体列表】进行添加,如下图:譬如,将黑体添加进来,就可以在右边的【可用字体】中选择黑色,然后单击中间的箭头,则字体就添加到【选择的字体】部分,然后确定即可。用同样的方法,将时尚生活设置为红色、大小16号、默认字体、加粗。(3)将“服饰搭配与礼仪”在单元格中居右首先选中“服饰搭配与礼仪”,然后选择【属性检查器】的对齐方式为右对齐,如下图:单击之后弹出如下
6、窗口:在【选择器类型】中选择“类(可应用于任何HTML元素)”,然后给出类名为.fsdp,注意前边必须有点,名称开始的符号必须为字母。然后单击确定即可。运行结果如下:4、第2行水平线的插入将光标定位在外层表格的第2行,然后单击菜单【插入】,选择【HTML】-【水平线】,即可插入水平线。运行效果如下:接下来将水平线的颜色修改为红色,单击选中水平线,将会在【属性检查器】中显示水平线的属性:我们前边在修改“时尚生活”的颜色为红色的时候,曾经创建过一个.ssh的CSS类,现在我们只需要将该CSS类应用到水平线上就可以了,我们
7、在属性“类”中单击下拉列表选择ssh即可将水平线设置为红色。如下图所示:运行结果如下:5、第3行第1个单元格内容插入将光标定位在该单元格内,拷贝文字素材.doc文件中的第一段,粘贴过来即可。单击右键-粘贴。适当的调整该单元格中表格的列宽,运行结果如下:接下来,在文字底部插入图片,注意这是需要另起一段或者换行,注意直接按Enter回车键是另起一段,按shift+Enter是另起一段,这两种方式都可以,只不过使用分段的方式图片和文字距离远一些,这里我们直接回车,然后在【插入】面板中选择【图像】进行插入。在弹出的图片选择对
8、话框中单击图片排列方式按钮,如下图所示,选择缩略图,就可以很直观的看到你要选择的图片了。单击选择图片后确认即可。通过拖拉方式修改图片的大小和单元格的宽度进行适当调整后,运行效果如下:接下来我们通过创建CSS的方式来美化该单元格中的文字,在CSS面板中,单击新建CSS规则按钮,打开新建CSS窗口,如下图:在弹出的窗口中,输入CSS的类名,然后单击
此文档下载收益归作者所有