PS设计教程网欢迎你!

Photoshop设计Wordpress博客模版以及切片(2)

文章来源于 ximumu.cn,感谢作者 情非得已 给我们带来经精彩的文章!
设计教程/PS教程/其他教程2009-11-05
继续添加代码--建一个DIV容器来装所有的图层. bodydiv id=page !--Insert the layout here-- /div !--End of page--/body 头部代码: div id=header div id=headerimg Page title /div div id=top_nav ul liHome/li

继续添加代码--建一个DIV容器来装所有的图层.

<body> <div id="page">
  <!--Insert the layout here-->

 </div> <!--End of "page"--></body>

头部代码:

<div id="header">
 <div id="headerimg">
  Page title
 </div>
 <div id="top_nav">
  <ul>
   <li>Home</li>
   <li>About</li>
  </ul>
 </div>
</div> <!--End of "header"-->

主内容层代码:

<div id="content">

   <div class="blogcontent">
   <div class="post">
   <div class="post_title">
   <h2><a href="#">Sample Post</a></h2>

   <small>November 2nd, 2008 | by admin | <a href="#">Lorem ipsum</a>| <a href="#">Category 1</a>| <a href="#">Uncategorized</a></small>

   </div> <!--End of "post title"-->
   <!--Comments-->
   <div class="postmetadata">
   <a href="#">2</a>

   </div>
   <br class="space" />

   <div class="entry">
   <p>
   <a href="#">

   <img class="alignleft" title="pic-02" src="images/jpgs/pic-01.jpg" border="0"    </a>

   But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human. No one rejects, dislikes, or avoids <a href="#">pleasure</a> itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful.
   </p>

   <a href="#" class="more-link">Read more &raquo;</a>
 </div> <!--End of "entry"-->

   </div> <!--End of "post"-->
   </div> <!--End of "blogcontent"-->
 <div id="sidebar">

   <ul>
   <li class="categories">
   <h2>Categories</h2>
   <ul>
   <li><a href="#">Lorem ipsum</a> (2)</li>

   <li><a href="#">Category 2</a> (1)</li>
   <li><a href="#">Sample category 3</a> (15)</li>
   </ul>

   </li>

   <li class="archives">
   <h2>Archives</h2>
   <ul>
   <li><a href="#">November 2008</a> (2)</li>
   </ul>

   </li>
 <li class="linkcat">
   <h2>Blogroll</h2>
   <ul class='blogroll'>
   <li><a href="http://wordpress.org/development/">Development Blog</a></li>
   <li><a href="http://wordpress.org/extend/themes/">Themes</a></li>
   <li><a href="http://planet.wordpress.org/">WordPress Planet</a></li>
   </ul>
   </li>
   </ul> <!--End of sidebar's list-->
   <div id="search">
   <form>
   <label class="hidden">Search for:</label>
   <div>
   <input type="text" value="" name="s" id="s" />
   <input type="submit" id="searchsubmit" value="Search" />
   </div>
   </form>
   </div> <!--End of "search"-->
   </div> <!--End of "sidebar"-->
 <div class="bottom_sidebar">
   <a href="#">RSS feed</a>
   </div>
   </div> <!--End of "content"-->

footer代码:

<br style="clear: both;" />

 <div id="footer">
 <div class="column1">
 Author
 <br />
 <a href="#">Author's link</a><br />
 <a href="#">License</a>
 <div class="bottom">
 Slogan
 </div>
 </div>
 <div class="column2">
   <h2>Recent posts</h2>
   <ul>
   <li><a href="#">Sample post</a></li>
   <li><a href="#">Lorem Ipsum Dolor Sit Amet</a></li>
   </ul>
   </div>

   <div class="column2">
   <h2>Pages</h2>
   <ul>
   <li><a href="#" title="About">About</a></li>

   <li><a href="#" title="About">About</a></li>
   </ul>
   </div>
   </div>

 

Step6--测试
当我们把代码编好了,下一步要做是测试在浏览器中的效果,在这里我用的是firefox的最高版本.效果如图:

Photoshop设计Wordpress博客模版以及切片

版权所有PS设计教程网公安备案:苏公网安备 32058302001023号工信部备案:沪ICP备09005587号
aaa