《网站建设技术9.网站首页底部制作》由会员分享，可在线阅读，更多相关《网站建设技术9.网站首页底部制作（8页珍藏版）》请在金锄头文库上搜索。
1、浙江金融职业学院教案首周次：6日期：页课时序：21 22课题项目1实战建站任务1制作网站首页9网站首页底部制作教学目的 要求能够制作网站首页底部； 能够用FIREFOX浏览器调试网站首页底部效果。重 点1、用DIV+CSS设计制作网站首页底部。难点1、用DIV+CSS设计制作网站首页底部。教学过程设计 及时间分配一、复习并引入新课(10)复习网站首页特价商品制作过程，展示已经做好的网站首页底部效果，引入 本次课内容。二、讲授新课(65)1、在PHOTOSHOP观察分析网站首页底部效果2、在DREAMWEAVERS计制作网站首页底部(1) 规划布局网站首页底部企业信息；(2) 制作网站首页底部友
2、情链接；(3) 制作网站首页底部版权信息。3、保存全部并在FIREFOX中测试效果二、总结布置作业(5)在自己的电脑上制作网站首页底部。教学场所教学方法专业机房；讲授法、演示教学法使用 教具多媒体、电子教室、PC机作 业在自己的电脑上制作网站首页底部。课后记授课教师：郑春瑛基本内容任务1制作网站首页9网站首页底部制作一、教学目标终极目标：1.能够制作网站首页底部；2.能够用FIREFOX浏览器调试网站首页底部效果。促成教学目标：1.理解代码编写中注释和规范格式的重要性；2.掌握用DIV+CSS制作网页及用 FIREFOX调试网页的方法；3. 了解dldtdd的样式设计方法。二、工作任务（一）在
3、PHOTOSHOP察分析网站首页底部效果（二）在DREAMWEAVE设计制作网站首页底部1. 规划布局网站首页底部企业信息；2. 制作网站首页底部友情链接；3. 制作网站首页底部版权信息。（三）保存全部并在FIREFOX测试效果三、具体内容（一） 在PHOTOSHOP观察分析网站首页底部效果新手上路村就方式送货方武买卖提示退换货联素我们用户渭示恋tt方式-扛回空耳怪司fllfr金卡申谱盘加劃裤翊-寄TiHA换悄岳拚审ivuff春*蕈菸用雪搭贰砂-Z525SE2S5 技;T支挣；启倉两 iilSiit ； MKEOTH（二）在DREAMWEAVE设计制作网站首页底部1. 规划布局网站首页底部企业
4、信息；2. 制作网站首页底部友情链接；3. 制作网站首页底部版权信息。网站首页底部参考代码如下:div al a-33wB3iSi 手上蹈 y / dthrer- n#HF llfflP：1 SS. iBcddxa tirer=*ffl/o-c/dd?31v clas3=lqirKX_rlghtx/divS6更播友 fflit接=：讯nx 甞an claa ss nwz g制 W 8?号；L30i7020- 枝*盍持；计if 机 I? tnfcsp . 4nbp- -:! ! flOflOfil网站首页底部参考CSS代码： qyxx clear: both;wj.dh: 980px
5、；di splay： blocic;overflow： hidden；background-image: url (ima(je3/index_117 , jpg); background-repeat: repea-x;rcargin-right: auto; qtsToe口;if cla s s = wq7KJC_le2： 新手上路o/ acdlddXi he f-n ax/Si 手上 S&W / drcddxa hre t二車 m 金卡申 i吿弋 / ax/ddST-t.5fCddXa hrslfi|.(30m dl 4float: left；heigJic: auto;widch: 1
6、45px； paddina-lelt: :10px;di splay: block;font-size:color： #61626;overflow: hidden; paddmg-cap: Opx; iraroin-top : 15px : ir.&rgin-right: Opx;irazrginbottcam: Opjc;.qyxx dl dd a:Link font-size: 32px;color: #61C2CC;texc-decciatlQ: none;|. qyxx dl dt font-size: 18px;color:4955f;margin-bottom: Spx;qyxx
7、 dl dd padding-bc ttGir.: Spx;background-linage: url (images/index_124 jpg: background-repeat: no-repeav； backgraund-pasicion: Opx center; padding-left: lOpx;marginleft: 20px;.qyxx b background-image: url (irages/ndex_l 19 jpg); float;: lefc;height: 113px;width: 3px;background-repeat: no-repeat;disp
8、lay: block;JP9）；jpg);.qyjuc . qyxx left I : -=】(i加二nd己 background-zepeat: no-repeat;display: tlock；irargin： Of3: padding: Opx; float: lefe/ height： widCh: 7px;y. qyxx rgnt background-lmag: ur1(image3/Index 121 tack ground-rep cat; : na-repei;displey: block;float: rigiit.:height: 113rx;width:;-yqij .
9、yglj -yqlj top .wz fant-size; 12px; color: #050505;iLargin-rop : 5ex; height: 12pxj float: left;display: block； n;axgin-lev ;匸盂；|- yqj .yqlj_cop * yqlj_sq fontsize: 12px;color: #6c6cSe;display： black; float： right;height: 15px； nwigin-top： px;margin-lef: 5px; overflow: hidden;wid匸h: 50px; margin-rig
10、ht: lOpx; yqlj yqlj_op .yqlj_gd font-sise： -2px;color： #6c6c6e； display： block;float: right; height i 12px;TTrgm-匸cif：: 4px; margin-right: 15px;width： lOOpx;. yql j top a: hover fone-size: 12px； color: #6c6ce： taxt-dacoration:yqLj_tap a:link 亡dn匚一已j_E亡；12px; color: #6c6c6e; text-Secoration! none; fl
11、oat:丄ef ZZZ lfont-sizei 12px;color: #9S9;display: block; margin-top: Spx; nargin-right: auto; rrargin-left: ail匸; rexc-align: center;（三） 保存全部并在FIREFOX测试效果复习思考 题、作业题思考练习题：1. 制作网站首页底部部分时是如何布局设计各部分的？2. 制作网站首页底部时需要注意什么？作业：练习用HTMLDIV+CS来设计布局网页。下次课 预习 要点任务1制作网站首页10.网站首页测试实施 情况及 分析注：教案按授课次数或单元填写。重复课可不另填写教案。允许特色设计。
