电子商务网页设计与制作 教案项目七 设置DIV+CSS布局（任务单）.docx

工程七DIV+CSS布局设置工程编号：WYSJ-07学 时：指导老师：日 期：工程简介网页布局是根据网页规划而作出的对网页栏目、网页元素等的具体排版。网页布局有利于对网页 的总体把握。采用DIV+CSS的布局方法有很多优点，如结构清晰、可以缩短页面代码、具有强大的 字体控制和排版能力、提高易用性、表现和内容相别离，可以更好的控制页面布局等等。因此在网站 首页布局和美化时采用DIV+CSS布局是一种常用和高效的方法，也是一个建设优秀网站的基础。本工程要求利用div+css样式技术完成学院创业园网页的效果。工程目标1 .能力目标：学习完本工程后，学生应当能够依据公司工程要求完成首页DIV+CSS布局和CSS页面美化，包括：(1)学会利用“DIV+CSS”完成页面的布局，灵活运用该技术的布局思路及方法；(2)解决“DIV+CSS”的浏览器兼容问题。(3)学会使用“模板和库”进行网页的布局。2 .知识目标：(1)网页布局常用结构(2) DIV基本概概念(3) CSS的语法及使用方法(4) 度目标：(1)具有思考、探究问题的自觉性、主动性和创新性；(2)具备良好的沟通、表达能力；(3)具备良好的团队合作精神。工程内容任务一：制作创业园网站的首页任务二：DIV+CSS制作网站子页vdiv id="btl”>工程案例</div> <div align="right">您的位置:首页&gt;&gt;工程案例</div> </div></div>(5)通过“文件”新建一个CSS文件“CSS.CSS”，在该文件中设置与"gcal.html"页面中各 DIV区块对应的CSS样式属性。通过“CSS样式面板”创立body标签和“#banner”区块有关的的样 式属性，可参考如下设置：body font-family: “宋体”；font-size: 12px;color: #575757;#containerposition:relative;width:749px;text-align: center;margin-top: 5px;margin-right: auto;margin-left: auto;#logo line-height: 45px;text-align: left;#dh background-image: url(topbgl.gif);line-height: 43px;text-align: right;#bt background-image: url(602.gif);line-height: 20px;font-weight: bold;#btl position: relative;float: left;(6)切换回“gcal.html”编辑页面，在“CSS样式面板”中点选“附加样式表”按钮，弹出“链 接外部样式表对话框:在“链接外部样式表对话框”中点选“CSSCSS”样式表链接，如下图。(7)完成设置保存后，预览“#banner”区块如下图。黄工Heaven : Network Systems首页 关于思恒产品展示工程案例技术支持人才招聘（8）分析目标网页与区块，可将该区块再划分为“#tp”、两个子DIV区块，如 图所示。#left*tp#list(9)在的子区块“#tp”和中依次插入对应的文字、图片。可参考如下设置：<div id=HleftH><div id=ntpn><img src=*'images/nav3.gif* width="13" height-" 13" align="absmiddle” /> 工程案 例 </div<div id=nlistn><img src=nimages/listicon.gif, width二"6" heigh匚”6" /> 监控报警系统vbr/><img src=nimages/listicon.gif, width="6" height="6" /> 智能楼宇弱点控制系统vbr/><img src=nimages/listicon.gif1 width二"6" heigh仁“6” /> 综合布线<br/><img src=nimages/listicon.gif, width=n6n height=n6n /> 系统集成</div></div>(10)在“CSS样式面板”创立于各区块对应的CSS样式属性，保存在“CSS.CSS”文 件中。可参考如下设置：#leftfloat: left;width: 150px;line-height: 20px;text-align: left;height: 506px;border-top-width: Ipx;border-bottom-width: Ipx;border-left-width: Ipx;border-top-style: outset;border-bottom-style: outset;border-left-style: outset;border-top-color: #C4C4C4;border-bottom-color: #C4C4C4;border-left-color: #C4C4C4;)#tpcolor: #FFFFFF;background-color: #990000;)#listfloat: left;list-style-position: inside;list-style-image: url(listicon.gif);width: 150px;)(11)分析目标网页与“#main”区块，可将该区块再划分为“#tp2"、“#iframe”两个子DIV区 块，如图所不。#main#tp2#i frame(12)在“#main”的子区块“#tp2”和“#iframe”中依次插入对应的文字、图片。其中"#iframe” 是通过<iframe></ifame来导入页面“ eng_view 1 .html可参考如下设置：<div id=nmainn><div id=ntp2H><img src=,'images/icon4.gif, align=nabsmiddlen /> 工程案例</div><div id=niframenxiframe name二”eng" src=,eng_viewl .htmlH width="580” height="460” frameborder=n0n scrolling=,'nonx/iframe></div></div>(13)在“CSS样式面板”创立于“#main”各区块对应的CSS样式属性，保存在“CSS.CSS” 文件中。可参考如下设置：#mainline-height: 20px;text-align: left;position: relative;margin-left: 152px;border: Ipx outset #C4C4C4;#tp2border-bottom-width: Ipx;border-bottom-style: dashed;border-bottom-color: #c4c4c4;#iframepadding-top: 25px;）（14）分析目标网页与“#bottom"区块后制作，该区块参考设置如下：<div id="bottom”关于惠恒|人才招聘|联系我们vp杭州惠恒网络科技 版权所有（c） 2009 </p></div>对应的css样式设置参考如下：#bottomtext-align: center;padding-top: lOpx;（15）最后保存后，完成该页面的制作。效果如下图。工程案例%您的位置：首页工程案例工程案例监控报警系统工程案例工程案例丽水江滨小区智能监控系统智能楼宇弱点控制系统综合布线系统集成杭州骏龙包装监控系统工程A综合布线、网络信息、一卡通、监控报警系统>粽合布线、网络信息、监控报警采用先进的监控设备，并充分利用我司丰富的施工经蛉和完 善忧良的服务,把居民小区监控系统建成符合实际需要,经济 实用,，噪作方便,可扩展能力强,管理规范的平安防范监控系 统.关于惠恒人才招聘联系我们钱十堂生制业W区-宏力公告宏髓公告芳草集形象店开张了，吉藤书屋折上折？教师节缤贺礼?十一假期好礼大敢送，2010年8月2010年9月2010年10月2010年1月五、任务小结请写出在制作过程中遇到的问题及解决方法。六、任务执行评价:（根据任务完成的质量、及时度、报告的编写质量给出成绩（100制），作为本工程总成绩评定时的依据之一）成绩:日期： 年 月 日七、任务拓展*匈赧脚 逊班 缎遨a 蛇修首页 跖匐中叮巨名售店铺省到北眼多欣咯合行 影香戒的08年公告09年公告10年公告学院地址：杭州下沙高教园东区学林街28谓维护信箱Zgmail 310018Copyright（c）2006-2008浙江经贸职业技术学院网站管理部浙ICP备05013608号版权所有:浙江经贸职业技术学院-产学办专题网技术支持WealStudio教学形式1、学生两人一组进行讨论、分工及制作2、各任务的实施（过程中教师进行分析指导，并讲解所涉及的相关知识）3、小组交流汇报任务一 “制作创业园网站的首页”任务单任务编号：WYSJ-07-01学时：实训地点：日期：小组班级:学号:一、任务描述本任务目标通过DIV+CSS的方式，利用Dreamweaver来编辑完成使用DIV+CSS技术，完成 网页首页的制作，效果如下图。经贸大学生创业园区立面色豳食鹿食鹤眼切圆谧注册量戏构融创新型的企建当*T和未来推劫企处捺依发内的根本出珞. 坚持把用路倒新和H!念创新放在第一 位. 终力引领企业开展。构融创新型的企建当*T和未来推劫企处捺依发内的根本出珞. 坚持把用路倒新和H!念创新放在第一 位. 终力引领企业开展。专灵 新扬中2 巨/售店保2普到女脏匆般咯合6联至或的刨新铸越力做仓4朝&的领导者、导者、发现者学院地址：杭州下沙岛教园东区学林街28()号惟护信箱:«g»ail.co. :3IOOI8Copyright(c)2006 2008浙江经贸IR业技术学院网站管理部浙1CP备05013608号版权所有:淅江经贸唳业技术学院产学办分题网技术支持：IdcalSludk>任务执行流程图根据目标页进行排版构架按从上到下从左到右的顺序对各构架细化往划分出来的DIV区块中填充网页元素对各DIV区块创立对应的CSS样式保存页面预览效果三、任务分配（由学生填写）四、任务实施五、任务小结请写出在制作过程中遇到的问题及解决方法。六、任务执行评价：（根据任务完成的质量、及时度、报告的编写质量给出成绩（100制），作为本工程总成绩评定时的依据之一）成绩：日期： 年 月 日内利信息技术作为 一家滨江区典型的大学生创 业企业，迅速地在滨江高新 技术开发区开展起来，在自 身企业的快速成长过程中， 也为杭州及外地的大学生创 造了很多合适的工作机会及 优秀的工作环境。七、任务拓展banner科技企业，公司主营线上线下的多元化产品及服务，打造实体商户加盟的内 商城，自主创新研发支持线下电子支付的终端POS机，发行集支付、储值、积 、打折优惠于一体的内利卡，实现落地电子商务的新模式。内利突破传统的 费模式的框架束缚，将线上线下的消费支付缴费活动融为一体，为多元化、 渠道、多方位服务的第三方电子支付运营商。致力将全新的消费支付理念通任务二“DIV+CSS制作网站子页”任务单任务编号：WYSJ-07-02学时:实训地点：日期:小组一、任务描述姓名：班级：学号：本任务目标通过DIV+CSS的方式，利用Dreamweaver来编辑完成杭州惠恒科技的工程 案例子页面，效果如下列图所示。黄三Heaven:% Network Systems首页 关于惠恒产品展示工程案例人才招聘联系我们工程案例您的位置：首页工程案例关于惠恒|人才招聘I联系我们杭州惠恒网络科技版权所有（c ） 2009#banner#left#main#bottom(2)通过Dreamweaver新建一空白页“gcal.html”。切换到“代码页面”，按上面的版面构架图 在body中，输入最外层DIV布局，可通过“插入工具栏”中“插入DIV标签”按钮输入，如下图。“代码页面”中参考输入如下：<body><div id=ncontainerM><div id=Hbanner"></div><div id=nleftnx/div><div id=nmainH></div><div id=nbottomn></div></div></body>(3)将最初的构架划分好后，再对各个模块按从上到下，从左到右的顺序，依次再细分J#banner” 区块为网页顶部，主要存放log。、导航栏、flash广告等。因此可依次再划分4个DIV块，作为,banner” 的子DIV块，如下图。#banner#logo#dh#flash#bt并在“gcal.html”的“代码页面”中，改写相关代码如下：<body><div id="container”><div id=nbannern><div id=,'logo,x/div><div id=,dhnx/div><div id=nflashn><div><div id=nbtnx/div></div><div id=nleftnx/div><div id=nmainnx/div><div id=nbottomn></div></div></body>(4)在设定的4个子DIV区块中，依次插入logo、导航栏、flash广告和标题文字。其中<div id="bt”></div>中插入文字后，因为“工程案例”要左对齐而“您的位置:首页“工程案例”要右对齐, 可通过在“#bt”中再设置一个嵌套子DIV区块插入“工程案例”，让其浮动“左对齐”，而 原先在“#bt”中的另一段文字“您的位置:首页工程案例”右对齐。设置后，构成“#banner”区块 内容。可参考如下设置：<div id=HbannerH><div id=nlogon><img src=,images/logo.jpgn /></div><div id=ndhnximg src=nimages/DH_rl_cO.gif1 border="0" /ximg src=nimages/DH_rl_cl .gif1 border=nOn /ximg src='fimages/DH_rl_c2.gif border=nOn /ximg src=nimages/DH_rl_c3.gif* border=nOn /ximg src=nimages/DH_rl_c4.gifH border="0" /ximg srch'images/DHLrl_CS.giF border=nOn /></div><div id=nflashH><object classid=nclsid:D27CDB6E-AE6D-llcf-96B8-444553540000ncodebase=n :/download.macromedia /pub/shockwave/cabs/flash/swflash.cab#version=7,0J9,0H width二"749" height=n 143Hxparam name二"movie” value=Himages/banner.swf /xparam name="quality” value="high" /xembed src=Himages/banner.swf quality="high"pluginspage= :/ macromedia /go/getflashplayer type=Happlication/x-shockwave-flashn width="749" height=n143nx/embed></object></div><div id=,btn>