中职 Dreamweaver CC网页设计与制作(3版)模块3(课件) .pptx
《中职 Dreamweaver CC网页设计与制作(3版)模块3(课件) .pptx》由会员分享,可在线阅读,更多相关《中职 Dreamweaver CC网页设计与制作(3版)模块3(课件) .pptx(64页珍藏版)》请在淘文阁 - 分享文档赚钱的网站上搜索。
1、中职 Dreamweaver CC网页设计与制作(3版)模块3(课件)工信版Dreamweaver CC网页设计与制作(3版)01模块1 网页基础知识03模块3 网页布局05模块5 网站的测试与发布02模块2 初级应用04模块4 高级应用06模块6 综合应用任务描述 通过布局“奋扬青春”网页,学会使用表格布局页面的方法和技巧。任务8 奋扬青春 表格布局页面任务解析在本任务中,需要完成以下操作:1.掌握表格的创建方法和表格、单元格的属性设置;2.掌握嵌套表格的创建方法和属性的设置。3.学会使用表格布局页面的方法和技巧。具体操作:(1)将素材中的renwu8文件夹复制到D盘根目录。运行Dreamw
2、eaver CC,新建站点“奋扬青春”,站点文件夹为D:renwu8,在站点根目录下新建网页文件index.html;打开“页面属性”对话框,在“外观(css)”分类选项卡中设置背景颜色为#ccc,左、上边距为0;在“链接”分类选项卡中设置链接颜色为黑色,变换图像链接颜色为红色,已访问链接颜色为绿色,始终无下划线,页面属性设置如图3-1所示。图3-1 页面属性设置具体操作:(2)选择“插入表格(table)”命令,设置表格大小为1行2列,表格宽度为1200像素,其他项为0,如图3-1所示,单击“确定”按钮插入表格。(3)单击表格的边框线,选中整个表格,在“表格”属性面板中设置“对齐”为“居中对
3、齐”,如图3-3所示。图3-2“表格”对话框 图3-3“表格”属性面板具体操作:(4)将光标定位到表格第1个单元格中,在属性面板中设置宽度为1000,选择“插入图像”命令,在打开的“选择图像源文件”对话框中选择“renwu8_01.gif”文件,单击“确定”按钮插入图像,如图3-4所示。图3-4 第一个表格效果(5)将光标定位到第2列单元格,在“代码”视图中为单元格添加背景图像“renwu8_02.gif”;代码如图3-5所示。再次光标定位该单元格,选择“插入表格”命令,设置表格大小为4行1列,表格宽度为100%,其他项为0,单击“确定”按钮插入嵌套表格tab1;分别设置嵌套单元格的第1、2、
4、3、4行行高为38、40、40、40,如图3-6所示。图3-5 第2列单元格的背景图像代码 图3-6 第2列单元格的嵌套表格具体操作:(6)光标定位到嵌套表格的第2行单元格,选择输入法“软键盘”中的“特殊字符”项,在单元格中输入,然后在单元格中输入文字“设为首页”;同样的方法,在第3行和第4行输入“联系我们”和“加入收藏”,效果如图3-7所示。图3-7 表格效果1(7)将光标定位到表格的后面或下一行,选择“插入表格”命令,设置表格大小为1行1列,表格宽度为1200像素,其他项为0,单击“确定”按钮,插入表格。在表格属性面板中设置对齐为居中对齐,单元格属性面板中设置高为41,如图3-8所示。图3
5、-8 表格效果2具体操作:(7)将光标定位到第二个表格,在“代码”视图中为表格添加背景图像“renwu8_03.gif”,代码如图3-9所示。再次光标定位该表格,选择“插入表格”命令,设置表格大小为1行9列,表格宽度为100%,其他项为0,单击“确定”按钮,插入嵌套表格tab2;分别设置嵌套表格的第1列列宽373,第9列列宽为113,第2列到第8列平均分配列宽为102,高均为41;如图3-10所示。图3-9 第2个表格代码 图3-10 第2个表格的嵌套表格设置(8)在第二个表格的嵌套表格中的第2列到第8列,分别输入文本“部门简介,规章制度,教育管理,资助工作,咨询服务,心理服务和宿舍管理”;创
6、建CSS样式表ys01,定义ys01样式表的字体为黑体、大小为16px、颜色为白色、加粗、居中显示,分别为7个单元格的文本内容套用ys01样式,如图3-11所示。图3-11 第2个表格效果具体操作:(9)将光标定位到第2个表格的后面或下一行,选择“插入表格”命令,设置表格大小为1行3列,表格宽度为1200像素,其他项为0,单击“确定”按钮插入表格。在表格属性面板中设置对齐为居中对齐,单元格属性面板中设置高为542,第三个表格的布局图和参数如图3-12所示。图3-12 第3个表格的布局参数值具体操作:(10)分别设置第三个表格的第1列和第3列列宽为100,第2列列宽为1000。选择表格切换为扩展
7、模式,光标定位在第2列单元格中,插入为4行2列,表格宽度为100%,其他项为0的嵌套表格tab3,分别设置第1行高为207,第2行高位40,第3行高为160,第4行高为45,第1列列宽为390,第2列列宽为610,合并第1行单元格;光标定位在tab3的第3行第1列单元格,插入1行3列,表格宽度为100%,其他项为0的嵌套表格tab3-1,设置tab3-1的高为160,第1列和第3列列宽分别为4%;在tab3的下方,插入1行2列,表格宽度为100%,其他项为0的嵌套表格tab4,设置tab4的高为90,第1列单元格宽为355;单击“插入”面板“布局”类别中的“标准”按钮,切换表格为标准模式。扩展
8、模式如图3-13所示,标准模式如图3-14所示。图3-13 第3个表格的扩展模式图 图3-14 第3个表格的标准模式具体操作:(11)为第3个表格部分单元格插入图片。第三个表格第1列和第3列插入图片“renwu8_04.gif”和“renwu8_06.gif”;第2列嵌套表格tab3的第1行插入图片“renwu8_05.gif”,第2行第1列和第2列分别插入图片“renwu8_07.gif”和“renwu8_08.gif”,第4行第1列和第2列分别插入图片“renwu8_11.gif”和“renwu8_12.gif”;第5列嵌套表格tab4的第2列插入图片“renwu8_14.gif”,如图3
9、-15所示。图3-15 第三个表格插入图片的效果具体操作:(12)在“代码”视图中,为第3个表格部分单元格设置背景图像。tab3的第3行第1列单元格的背景图像设置为renwu8_09.gif,第2列单元格的背景图像设置为图片“renwu8_10.gif”;tab4的第1列单元格的背景图像设置为“renwu8_13.gif”,如图3-16所示。图3-16 第三个表格插入图片和背景图像的效果具体操作:(13)为第3个表格部分单元格添加文字。将text文件夹下的“通知通告.doc”内容复制到tab3-1的第2列单元格中。创建CSS样式表ys02,定义ys02样式表的字体大小为12px、行高为20px
10、,选中通知通告文本内容套用ys02样式;同样的方法复制和设置“学生动态”的”文本内容;在“下载专区”中手动输入文本内容“困难学生补助申请书、学生会干部竞聘申请书、缓交学费申请表”按效果图进行分段和缩进,并套用ys02样式,如图3-17所示。图3-17 添加文字后的第三个表格效果具体操作:(14)为“学生动态”和“下载专区”文字设置空链接,创建滑动文字变色效果。选中“学生动态”中的第一行文字,在属性面板的链接框中输入“#”。同样的办法为其它各行文字创建空链接。(15)在第3个表格下方,插入1行1列,表格宽度为1200像素,其他项为0的表格,在表格属性面板中设置对齐为居中对齐,单元格属性面板中设置
11、高为60,水平居中对齐;在”代码“视图为表格设置背景图像为“renwu8_15.gif”,将光标定位单元格中,输入文本内容“版权所有|站点地图|友情链接、建议使用1280*800分辨率”,并套用ys02样式表,如图3-18所示。图3-18 index.html效果图表格布局此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处 网页设计中,宽度不是绝对固定的。网页尺寸由两个因素决定的:一是显示器屏幕,二是浏览器软件。网页的宽度约等于屏幕大小减去22px,如1024px宽的屏幕,其网页宽度不大于1002px,一般设定为950px或960px。为了使网页更加美观大方,
12、在制作网页时,需要先对网页的轮廓进行规划,将文字、图片等网页元素进行精确定位,这就需要用到网页的布局。表格布局是目前最常见的网页布局方式之一,它灵活方便、简单易学,熟练地使用表格布局是网页制作的基本要求。此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处添加你的信息此处 表格由行和列组成,每行或每列又由单元格组成,如图3-19所示,当将某行或某列设为标题行或标题列后,默认情况下,标题单元格中的内容将自动加粗并居中显示。标号所示的是单元格间距,指的是单元格和单元格之间的距离。标号所示的是单元格边距(也称为填充),指的是单元格中的内容与单元格边框之间的距离。图3-19 表格的结构
13、表格的组成图3-20“表格”对话框此处添加你的信息此处(1)创建表格 在“文档”窗口中,将光标定位到要插入表格的位置,执行以下操作之一,打开“表格”对话框,如图3-20所示。选择菜单“插入表格(table)”命令。单击“插入”面板“html”标签中的“表格(table)”按钮。按【Ctrl+Alt+T】组合键。创建表格图3-21 嵌套表格此处添加你的信息此处 创建嵌套表格就是在已有表格的某单元格中插入新的表格,如图3-21所示。使用表格的嵌套可以使大量的网页元素进行复杂定位,从而整齐地展示在浏览者面前,在一些综合性网站中都会普通使用。若要在当前表格的单元格中插入嵌套表格,可以直接拖动“插入”面
14、板“常用”类别中的“表格”按钮 到相应的单元格中,或者将光标定位到该单元格中,使用前面新建表格的方法插入表格。创建表格(1)选择整个表格单击表格的边框线。将光标定位到表格中,在标签选择器中单击标签。将鼠标指针移到表格的左上角,或边框线附近的敏感区域,当鼠标指针的右下角出现表格的缩略图时,单击鼠标左键。将光标定位到表格中,按两次【Ctrl+A】组合键。(2)选择行直接用鼠标拖动选中该行中的所有单元格。将光标定位到要选择行的某个单元格中,在标签选择器中单击标签。将鼠标指向要选择行的左边缘,当鼠标指针变为右箭头“”时,单击鼠标左键。(3)选择列直接用鼠标拖动选中该列中的所有单元格。将鼠标指向要选择列
15、的上边缘,当鼠标指针变为下箭头“”时,单击鼠标左键。光标定位到单元格中,在对应列的“列标题”菜单中选择“选择列”命令。选择表格元素(4)选择单元格 要选择单个单元格,可采用以下方法。按住【Ctrl】键在单元格内单击。在单元格内单击并向相邻的单元格拖动鼠标。将光标定位到单元格内,单击标签选择器上的标签。将光标定位到单元格内,按【Ctrl+A】组合键。要选择多个单元格,可采用以下方法。直接用鼠标从第一个单元格拖到最后一个单元格。将光标定位到第一个单元格内,按住【Shift】键单击最后一个单元格,可以选择矩形区域内的所有单元格,如图3-27所示。按住【Ctrl】键依次单击要选择的单元格,可以选择不连
16、续的单元格,再次单击可取消其选择。选择表格元素 图3-29“表格”属性面板“表格”:用来输入表格的名字。“行”和“列”:用来指定表格中行、列的数目,还可以通过修改此值,达到添加或删除表格中行或列的目的。“宽”:以像素为单位或按百分比指定表格宽度。“填充(cellpad)”:指的是单元格边距,即单元格的内容和单元格边框之间的像素数。间距(cellspace)”:指的是单元格间距,即相邻单元格之间的像素数。“对齐(align)”:用于设置表格相对于同一段落中其他元素(例如文本和图像)的显示位置。“边框(border)”:指定表格边框的宽度(单位为像素),若表格仅用于页面布局可将值设为0。“清除列宽
17、”按钮:从表格中删除所有明确指定的列宽。“清除行高”按钮:从表格中删除所有明确指定的行高。“将表格宽度转换成像素”按钮:将表格中每列的宽度和整个表格的宽度设置为以像素为单位的当前宽度。“将表格宽度转换成百分比”按钮:将表格中每列的宽度和整个表格的宽度设置为按百分比表示的宽度。设置表格属性 图3-30“单元格”属性面板“合并单元格”:将所选的单元格、行或列合并为一个单元格。“拆分单元格”:将一个单元格拆分成多个单元格。“水平”和“垂直”:设置单元格中的内容在水平和垂直方向上的对齐方式。“宽”和“高”:用来设置所选单元格的宽度和高度,可以在文本框中输入以像素为单位的数字,也可以输入按表格宽度或高度
18、的百分比指定的以百分号“%”结尾的数字。“不换行”复选框:如果选中了该复选框,当单元格中的文本超过单元格的宽度时,单元格会自动加宽以容纳所有文本;如果没有选中该复选框,当单元格内的数据超过单元格的宽度时,会自动换行。“标题”复选框:如果选中该复选框,则选择的单元格被设置为表格标题单元格。“背景颜色”:设置所选单元格的背景颜色。设置单元格属性(1)调整表格的大小选中表格后,表格边框会出现3个控制柄,鼠标指向控制柄呈双向箭头时拖动鼠标,可调整整个表格的大小。选中表格后,在表格属性面板的“宽”文本框中输入数值以精确指定表格的宽度。当调整整个表格的大小时,表格中所有单元格将按比例更改大小。如果表格的某
19、单元格指定了明确的宽度或高度,则调整表格大小时不会更改这些单元格指定的宽度或高度。(2)调整行高和列宽用鼠标拖动要更改行或列的边框线。改变行高,可上下拖动该行的下边框线,如图3-33所示;改变列宽,可左右拖动该列的右边框线,如图3-34所示。表格的基本操作 图3-33 改变行高及效果图 图3-34 改变列宽及效果图(3)插入行或列选中行或列,右键选择菜单“表格-插入行(插入列)”命令,如图3-35所示,可在所选行的上方插入一新行或所选列的左方插入一新列。选中行或列,右键选择菜单“表格插入行或列”命令,弹出“插入行或列”对话框,如图3-36所示,设置插入的行(列)数及位置,单击“确定”按钮,可以
20、插入多行或多列。打开某列的“列标题”菜单,选择“左侧插入列”或“右侧插入列”,可在当前列的左侧或右侧插入一新列,如图3-37所示。表格的基本操作 图3-35 插入行或列 图3-36“插入行或列”对话框(4)删除行或列选中要删除的行或列,右键选择菜单“表格-删除行(删除列)命令。选中要删除的行或列,直接按【Del】键。(5)合并和拆分单元格 选择要进行合并的单元格,具体操作步骤如下。右键菜单中选择“表格合并单元格”命令。单击属性面板上的“合并单元格”按钮。按【Ctrl+Alt+M】组合键。拆分单元格是将一个单元格分成多个单元格,具体操作步骤如下。右键菜单中选择“表格拆分单元格”命令。单击属性面板
21、上的“拆分单元格”按钮。按【Ctrl+Alt+S】组合键。表格的基本操作图3-37“列标题”右键菜单图3-38“拆分单元格”对话框 Dreamweaver中有两种表格模式,分别为标准模式和扩展表格模式,如图3-40所示。标准模式是表格默认的视图模式,表格及其内容的绝大部分操作适合在该模式下进行。在扩展表格模式下,Dreamweaver会临时向文档中的所有表格添加单元格边距和间距,并且增加表格的边框,可使编辑操作更加直观。使用这种模式,可以方便选择表格中的内容或精确的定位插入点。扩展表格模式 图3-40 标准模式和扩展表格模式提醒:要进入扩展表格模式,可以右键选择菜单“表格扩展表格模式”命令。在
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 中职 Dreamweaver CC网页设计与制作3版模块3课件 CC 网页 设计 制作 模块 课件
限制150内