首页手记我的毕业设计之个人网站首页实现

我的毕业设计之个人网站首页实现

标签：

Html/CSS Photoshop

大学时我做的毕业设计是个人网站，主要通过asp.net实现的，结合了ps切图，主要涉及以下页面如图：

数据库用的是sql2008记得当时安装visio stiudo和数据库将近用了7个G内存，安装就安了一个多小时，这次首先分享下我是如何设计我网站首页的，大家可以先看下我的首页如图：

先说下我的大致思路，首先确定自己的网站方向，我的方向主要是展示我个人生活记录之类的，所以我分了四类

1、个人简介
2、我的日志
3、我的相册
4、留言页面
5、联系我们

确定后，考虑下首页布局，这里我建议用ps切图结合html实现，这样就省去因为div层布局导致错位出现的问题了。以下是这页面的代码


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>我的网站</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>

<body>
<div id="container">
  <div id="top">
     <div id="logo"><a href="#"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/logo.jpg" /></a></div>
  </div>
  <div id="banner">
    <div id="menu">
        <ul>
         <li><a href="gerenjianjie.html" class="checked">个人简介-</a></li>
         <li><a href="dairy.html">我的日志</a></li>
         <li><a href="music.html">我的音乐</a></li>
         <li><a href="photos.html">我的相册</a></li>
         <li><a  href="Add.aspx">留言页面</a></li>
         <li><a href="lianxi.html">联系我们</a></li>
        </ul>
      </div>
  </div>
  <div id="main">
    <div id="left">
       <div id="lefttop">&nbsp;</div>
       <div class="span">关于本站</div>
       <p>欢迎访问，在茫茫虚拟空间中见到您的光临是我的荣幸。虽然本站默默无闻，也许会让您扫兴而归，但还是期望自己的悲天悯人之情，引起您的共鸣；对动物的恻隐之心，激起您的同感；工具软件的倾情奉送，让您有所惊喜；音画素材的借花献佛，为您提供方便。并期望在您悠然而去的时候，能够人去留名，雁过留声。 <a href="xiangxi.html">详细>></a></p>
       <div id="spiders">&nbsp;</div>
       <div class="span" style="padding-top:2px;">站内公告</div>
       <p style="text-indent:2em;">请大家遵守文明秩序，不要在站内发布或者留言有违社会公德和法律的语言希望大家子本网站内浏览愉快，本网站如有不详之处请见谅！..... <a href="details.html">详细>></a></p>
       <div id="connect" style="margin-top:15px;"><a href="#"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/connect_bg.jpg" height="100"/></a></div>
       <div class="clear">&nbsp;</div>
    </div>
    <div id="right">
       <div id="consult">
          <div class="img"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/pic_01.jpg" /></div>
          <ul>
             <li><a href="#">四月十五号之前向毕业老师提交一稿</a></li>
            <li><a href="#">4月初辞职回来参加专业考试</a></li>
            <li><a href="#">4月中旬和同学出去郊游</a></li>
            <li><a href="#">参加专接本报名</a></li>
            <li><a href="#">与本专业同学一起参加录指纹</a></li>
            <li>5月5号向专业老师提交二稿</li>
            <li>5月六号大三学生返校签字确认学分</li>
            <li>5月下旬将组织各级专业答辩</li></ul></div>
       <div id="blog">
           <div class="title"><a href="#">精华博客</a></div>
           <div class="title"><a href="#">最新链接</a></div>
           <div class="img"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/pic_02.jpg" /></div>
           <ul>
              <li><a href="#">51Job最新招聘信息</a></li>
              <li><a href="#">关于三星和苹果的官司</a></li>
              <li><a href="#">毕业生离校时间</a></li>
              <li><a href="#">现社会紧缺人才</a></li>
              <li><a href="#">2013年就业率调查</a></li>
              <li><a href="#">上海地铁规划图</a></li>
           </ul>
           <div class="img" style="padding-left:10px;"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/pic_03.gif" /></div>
           <ul>
              <li><a href="#">51aspx.com</a></li>
              <li><a href="#">计算机网址大全</a></li>
              <li><a href="#">百科知识大全</a></li>
              <li><a href="#">建筑网址大全</a></li>
              <li><a href="#">经典ps教学网</a></li>
              <li><a href="#">建筑资讯网</a></li>
           </ul>
       </div>
      <div class="clear">&nbsp;</div>
    </div>
    <div class="clear">&nbsp;</div>
  </div>
  <div id="copyright">
     <ul>
        <li><a href="xiangxi.html">网站简介</a></li>
        <li>|</li>
        <li><a href="lianxi.html">联系我们</a></li>
        <li>|</li>
        <li><a href="#">招聘信息</a></li>
        <li>|</li>
        <li><a href="#">友情链接</a></li>
        <li>|</li>
        <li><a href="#">网站排名</a></li>
        <li>|</li>
        <li><a href="default.html">回到首页</a></li>
        <li>|</li>
        <li><a href="#">关于更多</a></li>
        <li>|</li>
        <li></li>
     </ul>
     <p style="padding:5px 0 0 180px; float:left;">Copyright&copy; 2012-2013 MypavilionCC Corporation, All Rights Reserved</p>
  </div>
</div>
<div id="footer"></div>
</body>
</html>

有些事需要结合ps图片实现的，这就是从点击‘进入’后我的网站首页实现，大家可以自己尝试下，有问题的可以在下方评论进行交流，我会再看到的第一时间回答大家的，有不足之处请大家多多指教！至于后面的点击进去的页面，包括注册、登录，博客交流互动后续我会在手记里一一发布写出来，请大家持续关注我的手记：）

点击查看更多内容