HTML5+CSS3网页设计与制作单元3--表格应用与制作购物车页面-PPT课件

HTML5+CSS3网页设计与制作单元3-- 表 关于同志近三年现实表现材料材料类招标技术评分表图表与交易pdf视力表打印pdf用图表说话 pdf 格应用与制作购物车页面表格是常用的页面元素之一，过去制作网页时经常借助表格进行布局，现在表格的主要功能是有序地排列数据。本单元主要应用表格制作购物车页面。本章导读Thechapter’sintroduction目录导航渐进训练任务3-1制作电脑版购物车页面探索训练任务3-2制作触屏版购物车页面析疑解惑单元小结【任务3-1-1】在网页中插入与设置表格1．创立网页文档且保存任务实施在【文件】面板中，用右键单击文件夹“0301〞，在弹出的快捷菜单中选择菜单命令【新建文件】，如图3-3所示。此时在文件夹中会新建一个默认名称为“untitled.html〞的网页文档，将网页文档的名称重命名为所需要的名称“030101.html〞即可。在站点“易购网〞中创立文件夹“03表格应用与制作购物车页面〞，在该文件夹中创立文件夹“0301〞，并在文件夹“0301〞中创立子文件夹“CSS〞和“image〞，将所需要的图片文件拷贝到“image〞文件夹中。图3-3　【新建文件】的快捷菜单【任务3-1-1】在网页中插入与设置表格在DreamweaverCC主界面中，选择菜单命令【插入】→【表格】，弹出1个【表格】对话框。2．在网页中插入1个9行4列的表格〔1〕在【表格】对话框“行数〞文本框中输入“9〞，在“列数〞文本框中输入“4〞。〔2〕在“表格宽度〞文本框输入“700〞，在其后的下拉列表框中选择宽度的单位为“像素〞。【提示】创立表格时，宽度单位既可以是像素，也可以是百分比。如果宽度单位是像素，那么所定义的表格宽度是固定的，也是绝对数值，不会受浏览器大小变化的影响；如果宽度单位是百分比，那么所定义的表格宽度是一个相对数值，按浏览器窗口宽度的百分比来指定表格的宽度，它会随着浏览器的大小变化而进行相应的改变。【任务3-1-1】在网页中插入与设置表格2．在网页中插入1个9行4列的表格〔3〕在“边框粗细〞文本框中指定表格边框的宽度，默认值为1，单位为像素，其他参数暂保持其默认值不变。〔4〕在“标题〞文本框中输入表格的标题“ 标准 excel标准偏差excel标准偏差函数exl标准差函数国标检验抽样标准表免费下载红头文件格式标准下载 快递收费标准〞，如图3-4所示。〔5〕设置完成后单击【确定】按钮，1个9行4列的表格便插入到网页中。〔6〕保存网页中所插入的表格。图3-4　在【表格】对话框中设置所插入表格的参数【任务3-1-1】在网页中插入与设置表格3．查看9行4列表格的属性将鼠标指针指向表格边框线，出现红色外框线，鼠标指针变为形状时，单击鼠标左键即可选中整个表格。选中整个表格时，表格的【属性】面板如图3-5所示。图3-5　9行4列表格的属性设置【任务3-1-1】在网页中插入与设置表格4．设置表格第1行的属性〔1〕选择表格行将鼠标指针指向表格的第1行的左边线，当鼠标指针变成一个黑色箭头形状时，单击鼠标左键即可选中该行。〔2〕设置表格行的属性设置表格第1行的水平对齐方式为“居中对齐〞，垂直对齐方式为“居中〞，在“高〞文本框中输入“30〞，选中“标题〞复选框，其他属性保持其默认值，第1行对应的属性设置如图3-6所示。图3-6　表格标题行的属性设置【任务3-1-1】在网页中插入与设置表格5．设置表格第2行至第9行的行高将鼠标指针指向表格的第2行的左边线，当鼠标指针变成一个黑色箭头形状时，按住鼠标左键拖动鼠标到第9行，选中第2行至第9行。然后在表格【属性】面板的“高〞文本框中输入“25〞。将鼠标指针指向表格的第1列的上边线，当鼠标指针变成一个黑色箭头形状时，单击鼠标左键即可选中该列。然后在表格【属性】面板的“水平〞列表框中选择“居中对齐〞。以同样的 方法 快递客服问题件处理详细方法山木方法pdf计算方法pdf华与华方法下载八字理论方法下载 设置第2列的水平对齐方式为“左对齐〞，设置第3列和第4行的水平对齐方式为“居中对齐〞。6．设置表格各列的对齐方式【任务3-1-1】在网页中插入与设置表格7．设置表格各列的宽度将光标置于表格第1行的第1个单元格中，“宽〞文本框中输入“120〞。以同样的方法将第1行第2个单元格的宽度设置为380px，第3个单元格的宽度设置为100px。由于表格第2列的标题单元格中的文字应“居中对齐〞，所以需要对该单元格单独设置其对齐方式。将光标置于表格第1行的第2个单元格中，然后在表格【属性】面板的“水平〞列表框中选择“居中对齐〞。8．设置表格单元格的对齐方式【任务3-1-1】在网页中插入与设置表格9．合并单元格〔1〕将第1列的3、4、5这3个单元格合并按住【Ctrl】键，分别单击选中表格第1列的3、4、5这3个单元格，然后在表格的【属性】面板中单击【合并所选单元格】按钮，即可完成第1列3个单元格的合并。〔2〕将第1列的6、7、8、9这4个单元格合并将光标置于第1列第6行的单元格中，然后按住鼠标左键向下纵向拖动鼠标到第1列第9行的单元格中，即可选中第1列的4个单元格，然后选择菜单命令【修改】→【表格】→【合并单元格】，如图3-7所示，即可完成第1列4个单元格的合并。图3-7　合并单元格的菜单命令▲▲▲【任务3-1-1】在网页中插入与设置表格〔3〕将第3列的3、4两个单元格合并将光标置于第3列第3行的单元格中，然后按住鼠标左键向下纵向拖动鼠标到第3列第4行的单元格中，即可选中第3列的两个单元格，然后在选中的单元格区域单击鼠标右键，在弹出的快捷菜单中选择命令【表格】→【合并单元格】，如图3-8所示。图3-8　合并单元格的快捷菜单〔4〕将第3列的6、7、8、9这4个单元格合并将光标置于第3列第6行的单元格中，按住【Shift】键，然后在第3列第9行的单元格中单击，即可选中第3列的6、7、8、9这4个连续的单元格，在表格的【属性】面板中单击【合并所选单元格】按钮，即可完成第3列4个单元格的合并。【任务3-1-1】在网页中插入与设置表格10．在表格的单元格中输入文字在第1行的各个单元格中分别输入文字“区域划分〞“包含地区〞“首重运费〞和“超重运费〞。然后在其他单元格依次输入图3-2所示的文字。11．定义CSS代码网页030101.html中定义的CSS代码如表3-1所示。表3-1　网页030101.html中定义的CSS代码010203040506caption{font-weight:bold;margin-bottom:10px;}th,td{CSS代码行号070809101112font-size:12px;}td{height:25px;}CSS代码行号【任务3-1-1】在网页中插入与设置表格表3-1　网页030101.html中定义的CSS代码131415161718192021222324th{font-weight:bold;letter-spacing:1px;height:30px;}.table_m{width:700px;margin-bottom:10px;border-left:1pxsolid#ccc;border-bottom:1pxsolid#ccc;}CSS代码行号252627282930313233343536.table_mtd,.table_mth{border-top:1pxsolid#ccc;border-right:1pxsolid#ccc;padding:5px;}.table_mth{background:#f2f2f2;}.center{texCSS代码行号【任务3-1-1】在网页中插入与设置表格12．应用CSS样式对表格、行、单元格进行美化对网页030101.html中的表格、行、单元格应用CSS样式进行美化，对应的HTML代码如表3-2所示。01020304050607080910<tableborder="0"cellpadding="0"cellspacing="0"class="table_m"><caption>标准快递收费标准</caption><tbody><tr><thwidth="120">区域划分</th><thwidth="380">包含地区</th><thwidth="100">首重运费</th><thwidth="100">超重运费</th></tr><tr>HTML代码行号表3-2　网页030101.html对应的HTML代码【任务3-1-1】在网页中插入与设置表格11121314151617181920212223<tdclass="center">一区</td><td>广东(广州同城首重：6元)</td><tdclass="center">8元</td><tdclass="center">2元/kg</td></tr><tr><tdclass="center"rowspan="3">二区</td><td>江苏、浙江、上海</td><tdclass="center"rowspan="2">10元</td><tdclass="center">5元/kg</td></tr><tr><td>江西、湖北、安徽、广西、湖南、湖北</td>HTML代码行号表3-2　网页030101.html对应的HTML代码【任务3-1-1】在网页中插入与设置表格表3-2　网页030101.html对应的HTML代码24252627282930313233343536<tdclass="center">6元/kg</td></tr><tr><td>北京、天津</td><tdclass="center">12元</td><tdclass="center">8元/kg</td></tr><tr><tdclass="center"rowspan="4">三区</td><td>云南、贵州、四川、河南、山西、山东、河北、海南</td><tdclass="center"rowspan="4">15元</td><tdclass="center">8元/kg</td></tr>HTML代码行号【任务3-1-1】在网页中插入与设置表格3738394041424344454647484950<tr><td>青海、甘肃、宁夏</td><tdclass="center">10元/kg</td></tr><tr><td>辽宁、黑龙江、吉林</td><tdclass="center">12元/kg</td></tr><tr><td>新疆、西藏、内蒙古</td><tdclass="center">15元/kg</td></tr></tbody></table>HTML代码行号表3-2　网页030101.html对应的HTML代码【任务3-1-2】使用表格制作购物车页面任务描述①创立外部样式文件，在该样式文件中定义必要的CSS样式。②创立网页文档，该网页主体结构主要应用Div+CSS进行布局，局部结构应用了表格和段落进行布局。网页0301.html还应用了CSS样式对表格、单元格、表单控件和超链接进行美化。网页0301.html的浏览效果如图3-1所示。1．创立外部样式文件任务实施创立外部样式文件，保存在文件夹“0301\css〞中，在该样式文件中定义必要的CSS样式，对应的样式代码如表3-3所示。【任务3-1-2】使用表格制作购物车页面010203040506070809101112131415a{text-decoration:none;color:#333;}a:link,a:visited{text-decoration:none;color:#666;}a:hover{color:#2b98db;font-weight:bold;}CSS代码行号表3-3　外部样式文件main.css中的样式代码161718192021222324252627282930#user_wrapper{margin:10pxauto;width:800px;clear:both;overflow:hidden;}#steptitle{background:url("../images/bg_sl.gif");height:41px;line-height:41px;padding-left:10px;font-size:18px;font-family:"微软雅黑";font-weight:normal;CSS代码行号【任务3-1-2】使用表格制作购物车页面313233343536373839404142434445text-align:center;}#stepcontent{margin:0pxauto;}#stepcontenttable{*border-collapse:collapse;border-spacing:0;line-height:1.8;}#stepcontent.table_b{width:100%;CSS代码行号464748495051525354555657585960margin-bottom:0px;border-left:1pxsolid#ccc;border-bottom:1pxsolid#ccc;}#stepcontent.table_btd,#stepcontent.table_bth{border-top:1pxsolid#ccc;border-right:1pxsolid#ccc;padding:5px;font-size:12px;}.timg{height:60px;}CSS代码行号表3-3　外部样式文件main.css中的样式代码【任务3-1-2】使用表格制作购物车页面6162636465666768697071727374#stepcontent.table_btd{height:21px;background:#f2f2f2;line-height:150%;text-align:center;}#stepcontent.table_btdinput{text-align:center;}#stepcontenta{color:#005ba1;font-size:12px;CSS代码行号757677787980818283848586878889}#stepcontenta:hover{color:#f60;font-size:12px;text-decoration:none;}#stepcontent.fred{color:#f00;}#shopmsg{background:url("../images/bg_sl.gif");padding:10px20px;CSS代码行号表3-3　外部样式文件main.css中的样式代码【任务3-1-2】使用表格制作购物车页面616263646566676869707172737475#stepcontent.table_btd{height:21px;background:#f2f2f2;line-height:150%;text-align:center;}#stepcontent.table_btdinput{text-align:center;}#stepcontenta{color:#005ba1;font-size:12px;}CSS代码行号767778798081828384858687888990#stepcontenta:hover{color:#f60;font-size:12px;text-decoration:none;}#stepcontent.fred{color:#f00;}#shopmsg{background:url("../images/bg_sl.gif");padding:10px20px;}CSS代码行号表3-3　外部样式文件main.css中的样式代码【任务3-1-2】使用表格制作购物车页面919293949596979899100101102103104105#stepcontentp{font-size:14px;line-height:22px;margin:5px0;}#stepcontentpa{font-size:14px;}#stepcontentpa:hover{font-size:14px;}CSS代码行号106107108109110111112113114115116117118119120#stepcontent.table_btd.btndel{background:url("../images/bt.gif")no-repeat;width:62px;height:23px;display:block;color:#000;white-space:nowrap;margin:0001px;padding-top:2px;}#stepcontent.shopbtn{text-align:center;clear:both;}CSS代码行号表3-3　外部样式文件main.css中的样式代码【任务3-1-2】使用表格制作购物车页面在文件夹“0301〞中创立网页文档。2．创立网页文档〔1〕链接外部样式表切换到网页文档0301.html的【代码视图】，在标签“</head>〞的前面输入链接外部样式表的代码，如下所示：<linkhref="css/main.css"rel="stylesheet"type="text/css"/>【任务3-1-2】使用表格制作购物车页面〔2〕编写网页主体布局结构的HTML代码网页0301.html主体布局结构的HTML代码如表3-4所示。010203040506070809101112<divid="user_wrapper"><divid="steptitle"></div><divid="stepcontent"><tableclass="table_b"></table><divid="shopmsg"><p></p><pstyle="float:left"></p><pstyle="float:right"></p><divclass="shopbtn"></div></div></div></div>HTML代码行号表3-4　网页0301.html主体布局结构的HTML代码【任务3-1-2】使用表格制作购物车页面〔3〕在网页中插入表格与表单控件在网页文档0301.html中插入表格、表单控件与输入文字，对应的HTML代码如表3-5所示。010203040506070809101112<divid="user_wrapper"><divid="steptitle"><strong>我的购物车</strong></div><divid="stepcontent"><tableclass="table_b"><tbody><tr><tdwidth="11%"><strong>商品图片</strong></td><tdwidth="35%"><strong>商品名称</strong></td><tdwidth="12%"><strong>优惠价</strong></td><tdwidth="9%"><strong>数量</strong></td><tdwidth="12%"><strong>小计金额</strong></td><tdwidth="12%"><strong>税后金额</strong></td>HTML代码行号表3-5　网页0301.html对应的HTML代码【任务3-1-2】使用表格制作购物车页面13141516171819202122232425262728<tdwidth="20%"><strong>操作</strong></td></tr><tr><td><ahref="#"target="_blank"><imgsrc="images/bu/ytc0a1r.jpg"alt="图片1"class="timg"/></a></td><tdstyle="text-align:left;"><ahref="#"target="_blank"class="tdleft">三星10.5英寸平板电脑</a></td><tdclass="fred"><strong>￥3488.00</strong></td><td><inputname="shopcartlist$ctl00$amountid"value="1"size="5"/></td><tdclass="fred"><strong>￥3488.00</strong></td><tdclass="fred"><strong>￥3941.00</strong></td><td><aclass="btndel"href="">删除</a></td></tr>HTML代码行号表3-5　网页0301.html对应的HTML代码【任务3-1-2】使用表格制作购物车页面29303132333435363738394041424344<tr><td><ahref="#"target="_blank"><imgsrc="images/bu/ytc0a2r.jpg"alt="图片2"class="timg"/></a></td><tdstyle="text-align:left;"><ahref="#"target="_blank">索尼(SONY)数码相机DSC-HX50银色</a></td><tdclass="fred"><strong>￥1678.00</strong></td><td><inputname=s"hopcartlist$ctl01$amountid"value="1"size="5"/></td><tdclass="fred"><strong>￥1678.00</strong></td><tdclass="fred"><strong>￥1896.00</strong></td><td><aclass="btndel"href="">删除</a></td></tr><tr><td>HTML代码行号表3-5　网页0301.html对应的HTML代码【任务3-1-2】使用表格制作购物车页面454647484950515253545556575859<ahref="#"target="_blank"><imgsrc="images/bu/ytc0a3r.jpg"alt="图片3"class="timg"/></a></td><tdstyle="text-align:left;"><ahref="#"target="_blank">酷派(Coolpad)全网通4G</a></td><tdclass="fred"><strong>￥990.00</strong></td><td><inputname="shopcartlist$ctl02$amountid"value="1"size="5"/></td><tdclass="fred"><strong>￥990.00</strong></td><tdclass="fred"><strong>￥1118.00</strong></td><td><aclass="btndel"href="">删除</a></td></tr></tbody></table><divid="shopmsg">HTML代码行号表3-5　网页0301.html对应的HTML代码【任务3-1-2】使用表格制作购物车页面60616263646566676869707172737475<p>商品总计:<spanclass="fred">3</span>件&nbsp;&nbsp;商品总金额:<spanclass="fred">￥6156.00</span>元&nbsp;&nbsp;税后金额：<spanclass="fred">￥6955.00</span>元</p><pstyle="float:left"><pinutid="clearbtn"type="image"src="images/shopbtn1.gif"name="clearbtn"/>n<piutid="updatebtn"type="image"src="images/shopbtn2.gif"name="updatebtn"/><ahref="#"><imgsrc="images/shopbtn3.gif"alt="图片2"/></a></p><pstyle="float:right"><inputid="nextbtn"type=imagesrc="images/check_out.png"name="nextbtn"/></p><divclass="shopbtn"></div></div></div></div>HTML代码行号表3-5　网页0301.html对应的HTML代码【任务3-1-2】使用表格制作购物车页面保存网页，然后按快捷键【F12】浏览该网页，其浏览效果如图3-1所示。3．保存网页与浏览网页效果【说明】由于“购物车页面〞应用了表单控制，这里暂试着插入表单控件，表单及表单控件的使用将在单元4中详细介绍。目录导航渐进训练任务3-1制作电脑版购物车页面探索训练任务3-2制作触屏版购物车页面析疑解惑单元小结任务3-2制作触屏版购物车页面任务描述制作触屏版购物车页面，其浏览效果如图3-9所示。图3-9触屏版购物车页面0302.html的浏览效果▲▲▲任务3-2制作触屏版购物车页面任务实施1．创立文件夹在站点“易购网〞的文件夹“03表格应用与制作购物车页面〞中创立文件夹“0302〞，并在文件夹“0302〞中创立子文件夹“CSS〞和“image〞，将所需要的图片文件复制到“image〞文件夹中。任务3-2制作触屏版购物车页面2．编写CSS代码表3-6　网页0302.html中应用的样式文件base.css的CSS代码01020304050607080910body{font-family:"microsoftyahei",Verdana,Arial,Helvetica,sans-serif;font-size:1em;min-width:320px;background:#eee;}a{color:#333;CSS代码行号11121314151617181920text-decoration:none;}em,i{font-style:normal}ul,ol,li{list-style:none}CSS代码行号在文件夹“CSS〞中创立样式文件，并在该样式文件中编写样式代码，如表3-6所示。任务3-2制作触屏版购物车页面表3-6　网页0302.html中应用的样式文件base.css的CSS代码2122232425262728293031323334.f14{font-size:14px;}.mt5{margin-top:5px!important;}.a5{color:#FD7A20;}.tr{text-align:right;}CSS代码行号353637383940414243444546.price{color:#d00;}.mt10{margin-top:10px!important;}.layout{margin:010px;}CSS代码行号任务3-2制作触屏版购物车页面3．在文件夹“CSS〞中创立样式文件，并在该样式文件中编写样式代码，如表3-7所示。表3-7　网页0302.html中应用的样式文件main.css的CSS代码01020304050607080910.title-ui-a{position:relative;background:-webkit-gradient(linear,50%0%,50%100%,from(#0D9BFF),to(#0081DC));border-top:1pxsolid#4CB5FF;color:#fff;text-align:center;padding:05px;height:40px;CSS代码行号11121314151617181920line-height:40px;font-weight:700;font-size:18px;overflow:hidden;}.cart-listli{position:relative;padding:10px0;border-bottom:1pxsolid#ccc;CSS代码行号任务3-2制作触屏版购物车页面表3-7　网页0302.html中应用的样式文件main.css的CSS代码212223242526272829303132333435-webkit-box-shadow:01px0#fbfbfb;}.wbox{display:-webkit-box;}.cart-listlip{margin:7px0;}.cart-listli.pro-img{margin-right:10px;}CSS代码行号363738394041424344454647484950.cart-listli.pro-imga{display:block;height:100%;border:1pxsolid#ccc;}.cart-listli.pro-imgimg{width:130px;heigh:150px;}.wbox-flex{-webkit-box-flex:1;word-wrap:break-word;word-break:break-allCSS代码行号任务3-2制作触屏版购物车页面表3-7　网页0302.html中应用的样式文件main.css的CSS代码515253545556575859606162636465}.cart-listli.pro-name{max-height:39px;overflow:hidden;}.cart-listli.attr{color:#666;}.countArea{display:inline-block;vertical-align:middle;margin-left:-3px;}CSS代码行号666768697071727374757677787980.countArea.count-input{display:inline-block;width:36px;height:20px;line-height:20px;border:1pxsolid#ccc;text-align:center;vertical-align:top;margin:03px;font-size:16px;}.btn-ui-b{height:40px;line-height:40px;CSS代码行号任务3-2制作触屏版购物车页面表3-7　网页0302.html中应用的样式文件main.css的CSS代码81828384858687888990919293949596font-size:16px;text-shadow:-1px-1px0#D25000;border-radius:3px;color:#fff;background:-webkit-gradient(linear,0%0%,0%100%,from(#FF8F00),to(#FF6700));border:1pxsolid#FF6700;text-align:center;-webkit-box-shadow:01px0#FFAD2Binset;1}.btn-ui-c{height:40px;line-height:40px;font-size:16px;CSS代码行号979899100101102103104105106107108109110111112text-shadow:-1px-1px0#024CAB;border-radius:3px;color:#fff;background:-webkit-gradient(linear,0%0%,0%100%,from(#0D9AFE),to(#0081DC));border:1pxsolid#0284E0;text-align:center;-webkit-box-shadow:01px0#3CAEFFinset;}.btn-ui-ba,.btn-ui-ca{display:block;height:100%;color:#fff;}CSS代码行号任务3-2制作触屏版购物车页面在文件夹“0302〞中创立网页文档，切换到网页文档0302.html的【代码视图】，在标签“</head>〞的前面输入链接外部样式表的代码，如下所示：4．创立网页文档与链接外部样式表<linkrel="stylesheet"type="text/css"href="css/base.css"/><linkrel="stylesheet"type="text/css"href="css/main.css"/>任务3-2制作触屏版购物车页面网页0302.html主体布局结构的HTML代码如表3-8所示。5．编写网页主体布局结构的HTML代码。表3-8　网页0302.html主体布局结构的HTML代码010203040506070809<divclass="title-ui-a"></div><divclass="layoutf14"><ulclass="cart-list"><li><divclass="wbox"></div></li><li><divclass="wbox"></div></li>HTML代码行号101112131415161718<li><divclass="wbox"></div></li></ul><pclass="mt5tr"></p><pclass="mt5tr"></p><divclass="btn-ui-bmt10"></div><divclass="btn-ui-cmt10"></div></div>HTML代码行号任务3-2制作触屏版购物车页面在网页文档0302.html中输入所需的HTML标签与文字，插入图片与表单控件，对应的HTML代码如表3-9所示。6．输入HTML标签、文字与插入图片、表单控件表3-8　网页0302.html主体布局结构的HTML代码01020304050607080910<divclass="title-ui-a">购物车</div><divclass="layoutf14"><ulclass="cart-list"><li><divclass="wbox"><pclass="pro-img"><ahref=""title=""><migsrc="images/t01.jpg"alt=""/></a></p><divclass="wbox-flex"><pclass="pro-name"><aid="name_1"href=""title="">AepipPlhone616G金</a></p><spanclass="attr">数量：</span><divclass="countArea">HTML代码行号任务3-2制作触屏版购物车页面表3-8　网页0302.html主体布局结构的HTML代码1112131415161718192021222324<inputclass="count-input"type="text"value="1"nameu=a"qntity"id="quantity_1"/></div><p<>spanclass="attr">易购价：</span><spanclass="price">&yen;5365.00</span></p><p><spanclass="attr">城市：</span>长沙市</p><p><spanclass="attr">现货</span></p></div></div></li><li><divclass="wbox"><pclass="pro-img"><ahref=""title=""><imgsrc="images/t.0jp3g"alt=""/></a></p><divclass="wbox-flex"><pclass="pro-name"><aid="name_2"href=""title=""佳>能黑白激光打印机</a></p><spanclass="attr">数量：</span>HTML代码行号任务3-2制作触屏版购物车页面表3-8　网页0302.html主体布局结构的HTML代码2526272829303132333435363738<divclass="countArea"><inputclass="count-input"type="text"value="1"name="quantity"id="quantity_2"/></div><p><spanclass="attr"易>购价：</span><spanclass="price">&yen;979.00</span></p><p><spanclass="attr">城市：</span>长沙市</p><p><spanclass="attr">现货</span></p></div></div></li><li><divclass="wbox"><pclass="pro-img"><ahref=""title=""><imgsrc="images/t02.jpg"alt=""/></a></p><divclass="wbox-flex"><pclass="pro-name"><aid="name_3"href=""title="">先锋(Pioneer)平板电脑</a></p>HTML代码行号任务3-2制作触屏版购物车页面表3-8　网页0302.html主体布局结构的HTML代码39404142434445464748495051<spanclass="attr">数量：</span><divclass="countArea"><inputclass="count-input"type="text"value="1"nameu=a"qntity"id="quantity_3"/></div><p><spanclass="attr"易>购价：</span><spanclass="price">&yen;1799.00</span></p><p><spanclass="attr">城市：</span>长沙市</p><p><spanclass="attr">现货</span></p></div></div></li></ul><pclass="mt5tr">商品总计:<span><em>&yen;8143.00</em></span>HTML代码行号任务3-2制作触屏版购物车页面7．保存与浏览网页。表3-8　网页0302.html主体布局结构的HTML代码525354555657585960<span>-优惠：<em>&yen;0.00</em></span></p><pclass="mt5tr">应付总额(未含运费):<spanclass="price"><em>&yen;8143.00</em></span></p><divclass="btn-ui-bmt10"><ahref=""title="去结算">去结算</a></div><divclass="btn-ui-cmt10"><ahref=""title="继续购物">&lt;&lt;继续购物</a></div></div>HTML代码行号保存网页文档，在浏览器GoogleChrome中的浏览效果如图3-9所示。目录导航渐进训练任务3-1制作电脑版购物车页面探索训练任务3-2制作触屏版购物车页面析疑解惑单元小结析疑解惑【问题1】表格的组成元素有哪些？Discussiononthequestions图3-10　表格的组成元素析疑解惑【问题2】在DreamweaverCC中，向网页中插入表格的常用方法有哪几种？Discussiononthequestions①选择菜单命令【插入】→【表格】。②将光标置于已有的表格中，然后单击右键，在弹出的快捷菜单中选择所需的菜单命令。③切换到网页的【代码】视图，手工输入表格、行、单元格标签和表格内容。析疑解惑【问题3】在网页中选择表格和表格元素有哪些方法？Discussiononthequestions〔1〕选择整个表格〔2〕选择单行或者单列〔3〕选择连续的多行或多列〔4〕选择不连续的多行或多列〔5〕选择一个单元格〔6〕选择连续的单元格〔7〕选择不连续的单元格析疑解惑【问题4】通过如图3-11所示的表格【属性】面板可以设置表格的属性，解释表格【属性】面板中各项属性的含义。Discussiononthequestions图3-11表格【属性】面板析疑解惑【问题5】通过如图3-12所示的表格单元格的【属性】面板可以设置单元格的属性，解释单元格【属性】面板中各项属性的含义。Discussiononthequestions3-12表格单元格的【属性】面板析疑解惑【问题6】在网页中调整表格大小的方法有哪些？Discussiononthequestions方法一：拖动控制柄改变表格大小方法二：通过表格的【属性】面板调整表格大小方法三：改变行高或列宽方法四：改变单元格大小01OPTION02OPTION03OPTION04OPTION析疑解惑【问题7】DreamweaverCC中，修改表格的常用方法有哪些？Discussiononthequestions方法一：利用图3-13所示快捷菜单，可以选择表格、插入行或列、选择表格、合并单元格、拆分单元格、删除行或列、改变行宽或列宽。方法二：利用图3-14所示的快捷菜单，可以选择列、插入列、去除列宽。图3-13图3-14