表格宽度文本框输入.ppt

《网页设计与制作》教学课件 第7章：网页的布局 主要教学环节 五、知识讲解与操作示范 一、课程引导 二、明确知识技能目标 三、展示网页浏览效果 四、分析操作任务 六、课堂模仿实践 七、疑难解析 八、归纳总结 九、布置习题 （一）课程引导 　　　 在第5单元中我们学会了如何在网页中输入文本，在第 6单元中我们学会了如何在网页中插入图像。通常网页中都包含了大量的文字和图片。 　　　请浏览【网易】的主页。 　　　网易的主页中包含了大量的文字和图片，通过浏览我们发现这些文字和图片布局合理，搭配协调。这些文字和图片是通过什么方法布局的？ 　　　 本次课我们来学习使用表格布局网页的方法。 （二）明确知识技能目标 （1）学会添加表格、设置表格属性。 （2）掌握设置表格中行和列属性的方法。 （3）掌握拆分单元格，合并单元格的方法。 （4）掌握在表格中输入文字并定位的方法。 （5）掌握在表格中插入图像并定位的方法。 （三）展示网页浏览效果 1．预览网页 2．网页布局与组成分析 （1）本网页为普通的上下型版式结构，上面为一幅图片，下面为左右型结构，包括多幅图片和几段文字。 （2）本网页使用了表格对图片、文字进行合理布局。 （四）分析操作任务 （1）在“长沙世界之窗”网站文件夹中“ 04表格布局”中创建命名为“04.html”的网页，网页的标题为“长沙世界之窗的国际街”。 （2）插入1张3行4列的表格，宽度设置为750像素。 （3）拆分单元格，合并单元格。 （4）设置表格以及行、列、单元格的属性。 （5）为单元格设置背景图像。 （6）在表格的不同单元格中插入多幅图像。 （7）在表格的单元格中输入文字。 （五）知识讲解与操作示范（1） 第一步：创建站点或切换站点 　　启动 Dreamweaver 8，切换到“长沙世界之窗”站点。如果该站点不存在，则新建一个名为“长沙世界之窗”的站点。 第二步：创建子文件夹，准备素材 　　在站点下创建子文件夹 “04表格布局”，在“04表格布局”文件夹中创建子文件夹“image”，并将所需图像复制到该文件夹下。 （五）知识讲解与操作示范（2） 第三步：新建网页且保存 　　在 Dreamweaver 8 主窗口中，单击菜单【文件】→【新建】，打开“新建文档”对话框，在“常规”选项卡中，“类别”列表框中选择“基本页”，“基本页”列表框中选择 “HTML”，单击【创建】按钮，该站点下一个名为“Untitled-1”文档便创建。单击标准工具栏上的【保存】按钮，打开“另存为”对话框，保存位置为 “04表格布局”，文件名为“04.html”，单击【保存】按钮，保存该网页文档。 第四步：设置网页的标题 　　在文档工具栏的“标题”文本框直接输入文档标题“长沙世界之窗的国际街”即可 。 （五）知识讲解与操作示范（3） 第五步：插入表格 　　1．打开网页04.html，将光标置于网页文档04.html第一行的最左端，在 Dreamweaver 8 主窗口中，单击菜单【插入】→【表格】 　　 2．对“表格”对话框中的各个参数进行设置 （1）在“行数”文本框中输入“3”，在“列数”文本框中输入“4”； （2）在“表格宽度”文本框输入“100”，其后的下拉列表框中选择宽度的单位为“百分比”； （3）“边框粗细”先设置为“1”，以后再设置为“0”； （4）“单元格边距设置为2，单元格间距设置为3； （5）设置完成后单击【确定】按钮，一个3行4列的表格就插入到页面了 。 （五）知识讲解与操作示范（4） 第六步：选择表格和表格元素 　　在进行表格操作之前，我们必须首先选定被操作的对象， 对于表格而言，可以选定整个表格、单行、单列、多行、多 列、连续或不连续的单元格。 （五）知识讲解与操作示范（5） 第七步：设置表格及单元格的属性 　　（1）在“宽”文本框中输入“750”，其右侧的单位选择“像素”； 　 （2）“边框”文本框中输入“1”，“填充”文本框中输入“2”； 　　（3）“间距”文本框中输入“0”，对齐方式选择“居中对齐”； 　　（4）“边框颜色”文本框中输入“#000000”； （5）表格的”对齐“方式设置为”居中对齐“； 　　（6）其他表格属性保存原有设置或默认值不变 ，设置结果如下图所示。 （五）知识讲解与操作示范（6） 第八步：调整表格的结构 　　　将图中“A”、“B”、“C”、“D”四个单元格合并， 将图中“I”、“J”、“K”、“L”四个单元格合并。 　　　　 （五）知识讲解与操作示范（7） 第九步：插入嵌套表格 　　在图中的“E”单元格中插入一张7行1列的表格， 在“G”单元格中插入一张5行3列的表格，为表格单元 格“G”设置背景图像。将单元格“G”的”垂直“对齐方式