注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

米欧光影工作室

No matter what you want to express……

 
 
 

日志

 
 
关于我

{ note: ‘不会编程的设计狮不是好科研狗’ }

网易考拉推荐

用dw完成网站  

2013-04-28 15:22:20|  分类: html |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

简介:
项目1:绿色食品(企业型) 绿
项目2:电商网站 红色
项目3:炫酷网站 黑

项目1实现:
1.FW做出背景图;
2.建立站点;
3.建立文件夹,index.html,css文件,js文件。
4.写css文件,
body{margin:0; padding:0; font-size:"宋体"; color:#606060; background:url(../images/bg.jpg); }
5.做logo,和导航。png 8能兼容所有浏览器,索引透明和alpha透明有什么区别?
logo建议做成链接,单击返回首页。
body中<div class="top"><a href="#"><img src="images/logo.png" width=168 height=76 alt="绿色食品网" /></a></div>
css中 
.top{ width:975px; height:99px; margin:0 aotu; padding:20px 0 0 5px;}



做导航
透明的背景:
导航的结构,左中右3块,中间一个URL。
<div class="nav">
<span class="navLeft"></span>
<ul></ul>
<span class="navRight"></span>
</div>

css中
.nav{width:980px; height:57px; margin:0 auto;}
.navLeft{ display:block; width:17px; height:57px; background:url(../images/nav_left.jpg) norepeat; float:left;}
.navRight{ display:block; width:17px; height:57px; background:url(../images/nav_right.jpg) norepeat; float:left;}

【代码简化】另一种写法是,先写公共样式,然后再分别制定自己的样式。
.nav{width:980px; height:57px; margin:0 auto;}
.nav span{display:block; width:17px; height:57px; float:left}
.navLeft{background:url(../images/nav_left.jpg) norepeat; }
.navRight{background:url(../images/nav_right.jpg) norepeat; }


接着写ul中的内容
.nav ul{width:946px; height:57px; float:left; background-color:#fff; }  //这个背景色仅仅是为了检查定位是否正确;

.nav ul{width:946px; height:57px; float:left; background:url(../css/nav_center.jpg) repeat-x; } 


接着写导航栏的li:
<div class="nav">
<span class="navLeft"></span>
<ul>
<li><a href="#">网站首页</a></li>
<li><a href="#">产品介绍</a></li>
<li><a href="#">网站首页</a></li>
<li><a href="#">网站首页</a></li>
<li><a href="#">网站首页</a></li>
<li><a href="#">网站首页</a></li>
<li><a href="#">网站首页</a></li>
<li><a href="#">网站首页</a></li>
<li class="nobg"><a href="#">ENGLISH</a></li>
</ul>
<span class="navRight"></span>
</div>

css中
.nav ul li{width:105px; height:33px; line-height:33px; float:left; text-align:center; background:url(../images/nav_line.jpg) no-repeat right top;}
.nav ul li.nobg{ background:none; }//必须深度指明nobg,否则级别不够用,不起作用

.nav ul li a或者
.nav a:link, .nav a:visited{ font-size:14px; color:#fff; font-weight:bold; text-decoration:none;}
.nav a:hover{ text-decoration:underline;}


制作banner
中间的大图,可以做成flash图像,或者banner
首先制作大图:
在nav下面写结构
<div class="banner"><image src="images/banner.jpg" width="980" height="382" /></div>

css中
.banner{width:980px; height:382px; margin:0 auto; }



首页中间部分上半部分:
fw切圆角,
<div class="content"> </div>


css中
/*content*/
.content{width:980px; margin:6 auto 0;  background:url(../images/bg1.jpg) no-repeat top center #fff;  overflow:hidden;
padding-top:10px; }//url与图像都设置,没有图像的地方都显示为颜色;不给固定高,则内容有多高,就有多高


在content总添加ul,上半部分列表部分
<div class="content">
<ul class="top"></ul>
 </div>

css为
.content ul.top{width:980px; height:91px; border-bottom:1px solid #e0e0e0; 
padding-left:10px;} //为了后面的li



切图,切出背景,li的高度为235*84:
导出为bg2,li中间分为两部分,上半部分好像不好,有点高。
li之间有宽度的,padding-left为7,235+7=242, 242*4=968px; 
.content .top li{ width:209px; height;64px; margin-right:7px; float:left; backrgound:url(../images/bg2) no-repeat; padding:10px 13px;}


<div class="content">
<ul class="top">
<li>
<p class="one"><img src="images/tu_1.jpg" width="95" height="26" alt="有机蔬菜" /></p>
<p class="two">主要通过自然降水、施用农家肥人工除草等传统的农...</p>
 </li>
<li>
<p class="one"><img src="images/tu_2.jpg" width="95" height="26" alt="有机蔬菜" /></p>
<p class="two">主要通过自然降水、施用农家肥人工除草等传统的农...</p>
 </li>
<li>
<p class="one"><img src="images/tu_3.jpg" width="95" height="26" alt="有机蔬菜" /></p>
<p class="two">主要通过自然降水、施用农家肥人工除草等传统的农...</p>
 </li>
<li>
<p class="one"><img src="images/tu_4.jpg" width="95" height="26" alt="有机蔬菜" /></p>
<p class="two">主要通过自然降水、施用农家肥人工除草等传统的农...</p>
 </li>
</ul>
 </div>

css中
 p.one{ height:26px;}
 p.two{ padding-left:36px;  color:#999b;  line-height:18px; }




页面中间下半部分结构分析与制作
切一个1像素宽的渐变,得到目标路径。

在content中的ul下面写。
.bottom{width:980px; height:209px; background:url() ; }












refer
[1] 网易公开课:带你轻松掌握DW建立企业
[4]
  评论这张
 
阅读(206)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017