商务网站前台设计课程实训任务书18.docx
商务网站前台设计课程实训任务书18实训名称能源科技一首页布局学时2指导教师王班班级姓名实训目的：熟练掌握网页整体的div布局。实训任务：完成能源科技首页面布局。实训指导：代码部分：(1)样式总体格式，体现网页头部<head> </head>部分 <style type="text/css”>.aa ; ; ;.bb ; 1 ;</style>(2) css样式基本格式例如：.aa )ill冒号：冒号后面是具体参数值；分号：分号将两个命令分割开来。(4)样式应用width：宽度height:高度background:背景颜色float: left 左浮动css样式区间的注释书写格式：例如：/*字符间距2像素*/(5) div布局区间的注释书写格式：例如：<!-br/软回车进入下一行-操作步骤详解：1、将首页效果图在ps软件中打开，用标尺测量网页整体大小，确定为高944px,宽 955px）保州博轩醛源科技有服公司KV1NOU BOMVAA CMBCV Vt<MIIO<OV CO.ITO）保州博轩醛源科技有服公司KV1NOU BOMVAA CMBCV Vt<MIIO<OV CO.ITOMAU»)KO 中3户农为切力 »宜呈力®0必坚毅若实7-，uuL1: 944.00 L2：技术中。/吸管工具 储颜色取样器工具 mm标尺工具 昂注释工具未标题1 © 100% （图层 1, RGB/8） * * 种产Jpg © 50%（RGB/8,i *2、切片制作将首页效果图在ps软件中打开，完成切片制作XTMf0516-83896868KTaisjE卬 因4公N-介ifi因间因住州博”3口!蒯殿公司从电拈+11尸乱 W«. VI*.鼻f6fM疗-，*Bnnri仪 畏及Ku产a在幅ar)M，金耳柳$及石 4美优石化j.化工.aa及以伦曼工 业”公幻。叔冷工成立以金赳烧一 MWBtft坚毅务实减信创前1保第博轩醛源科技有DR公司武就以不但防为技示r?Atc 以鼻Q4状为SO 以3户索冷加力 中安宝机?证形成images素材库如下ny_373、建立能源科技公司站点，新建index首页并保存4、进行整体布局策划，分成以下结构。5、标尺测量每个区域：宽度*高度，并且用不同的背景颜色加以区分。1 区：495*992 区：460*993 区：955*264 区：819*2505 区:819*4106 区：819*757 区：955*836、打开dw软件，新建一个页面，保存在站点内，命名为index.html,进行保 存，然后修改网页标题234567891011<!DOCTYPE html PUBLIC n-/W3C/DTDXHTML 1.0 Transitional/ENnr,http: /www. w3 . org/TR/xhtmll/DTD/xhtml 1-transitional.dtdn><html xmlns=r,http: /www. w3 . org/1999/xhtmln><head><meta http-equiv=rfContent-Type11content=ntext/htrrJ.; charset=:utf-3r, / >七欢迎光临能源科技网站/七1七le><body></body></htnil>7、建立第一个div整体框架8 <body>9 <div class=nkjn|1011121314 </div>15 </body>16 </html>178、加入7个内部框架373839404142434445464748495051<body><div class=r,kj n><div class=r,tourr><div class=r,logonX/div><div class=r,lxdhn></div></div><div<div<div<div<divclass=ndhr,></div> class=nbannerr,X/div> class=nzhutirrx/div>class=rfyql j r,X/div> clas= r,dibur,X/div></div></body></html>9、对应css样式代码如下2627282930313233343536373839404142434445464748 495051525354556<style type=r,text/cssn>7.kjwidth:955px;8height:944px;9background-color: tFCF;10margin:0 auto;1112 touw±dth: 955px;13height: 99px;14logo15width: 495px;16height: 99px;17background-color: #0C3;18float: left;191 > J20.lxdh21width: 460px;22height: 99px;23background-color: #0C9;24float: left;25.dh(width: 955px;height: 26px;background-color: #F33;.bannerwidth: 819px;height: 250px;background-color: #FC3; margin:0 auto;.zhutiwidth: 819px;height: 410px;background-color: #909;margin:0 auto;)yqijwidth: 819px;height: 75px;background-color: #6FC;margin:0 auto;.dibuwidth: 955px;height:83px;background-color: #960;%</style>10、预览效果实训结果（截图说明）
