《商务网站前台设计课程实训任务书18.docx》由会员分享，可在线阅读，更多相关《商务网站前台设计课程实训任务书18.docx（7页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、商务网站前台设计课程实训任务书18实训名称能源科技一首页布局学时2指导教师王班班级姓名实训目的：熟练掌握网页整体的div布局。实训任务：完成能源科技首页面布局。实训指导：代码部分：(1)样式总体格式，体现网页头部 部分 .aa ; ; ;.bb ; 1 ;(2) css样式基本格式例如：.aa )ill冒号：冒号后面是具体参数值；分号：分号将两个命令分割开来。(4)样式应用width：宽度height:高度background:背景颜色float: left 左浮动css样式区间的注释书写格式：例如：/*字符间距2像素*/(5) div布局区间的注释书写格式：例如：!-br/软回车进入下一行-
2、操作步骤详解：1、将首页效果图在ps软件中打开，用标尺测量网页整体大小，确定为高944px,宽 955px）保州博轩醛源科技有服公司KV1NOU BOMVAA CMBCV VtMIIOOV CO.ITO）保州博轩醛源科技有服公司KV1NOU BOMVAA CMBCV VtMIIOOV CO.ITOMAU)KO 中3户农为切力 宜呈力0必坚毅若实7-，uuL1: 944.00 L2：技术中。/吸管工具 储颜色取样器工具 mm标尺工具 昂注释工具未标题1 100% （图层 1, RGB/8） * * 种产Jpg 50%（RGB/8,i *2、切片制作将首页效果图在ps软件中打开，完成切片制作XTM
3、f0516-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*9
4、92 区：460*993 区：955*264 区：819*2505 区:819*4106 区：819*757 区：955*836、打开dw软件，新建一个页面，保存在站点内，命名为index.html,进行保 存，然后修改网页标题234567891011七欢迎光临能源科技网站/七1七le7、建立第一个div整体框架8 9 div class=nkjn|1011121314 15 16 178、加入7个内部框架373839404142434445464748495051divdivdivdiv class=nbannerr,X/div class=nzhutirrx/divclass=rfyql
5、j r,X/div clas= r,dibur,X/div9、对应css样式代码如下2627282930313233343536373839404142434445464748 4950515253545567.kjwidth:955px;8height:944px;9background-color: tFCF;10margin:0 auto;1112 touwdth: 955px;13height: 99px;14logo15width: 495px;16height: 99px;17background-color: #0C3;18float: left;191 J20.lxdh21wi
6、dth: 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;%10、预览效果实训结果（截图说明）