Publishing and Web Design

code：
<!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" />
<title>Untitled Document</title>
<script type="text/javascript">
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}

</script>
<style type="text/css">
.arial {
    font-size: 16px;
    text-align: justify;
    color: #333;
}
.arial {
    text-align: left;
}
.san-serif {
    color: #0FF;
    font-size: 36px;
}
.san-serif {
    font-size: 24px;
    font-family: "Times New Roman", Times, serif;
}
.ttalic {
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    font-size: xx-large;
}
.arial {
    font-family: "Times New Roman", Times, serif;
    font-size: xx-large;
}
.arial {
    font-size: large;
    font-family: "Times New Roman", Times, serif;
    color: #333;
}
.arial {
    font-size: x-large;
    font-family: "Times New Roman", Times, serif;
    color: #6FF;
}
.Italic {
    font-size: xx-large;
}
.arial {
    color: #000;
}
.arial .arial strong {
    color: #333;
}
.arial strong .arial {
    color: #333;
}
.Italic {
    color: #333;
}
</style>
</head>

<body onload="MM_preloadImages('../../Documents/Unnamed Site 2/Untitled-2_18.jpg','../../Documents/Unnamed Site 2/Untitled-2_14.jpg','../../Documents/Unnamed Site 2/Untitled-2_10.jpg')">
<table width="1257" border="0" align="right">
<tr>
    <td width="1251"> </td>
</tr>
<tr>
    <td height="251"><table width="981" height="249" border="0" align="center">
      <tr>
        <td width="177" height="245"><a href="#about_me" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('about_me','','../../Documents/Unnamed Site 2/Untitled-2_05.jpg',1)"><img src="../../Documents/Unnamed Site 2/Untitled-2_03.jpg" width="177" height="47" id="about_me2" /></a></td>
        <td width="177"><a href="#portfolio" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Portfolio','','../../Documents/Unnamed Site 2/Untitled-2_18.jpg',1)"><img src="../../Documents/Unnamed Site 2/Untitled-2_17.jpg" width="177" height="47" id="Portfolio" /></a></td>
        <td width="303"><a href="#Home"><img src="../../Documents/Unnamed Site 2/logo ykpng.png" width="303" height="231" alt="logo" /></a></td>
        <td width="159"><a href="https://www.blogger.com/profile/16415162017644210290" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('blog','','../../Documents/Unnamed Site 2/Untitled-2_14.jpg',1)"><img src="../../Documents/Unnamed Site 2/Untitled-2_13.jpg" width="177" height="47" id="blog" /></a></td>
        <td width="143"><a href="#contact_me" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Contact','','../../Documents/Unnamed Site 2/Untitled-2_10.jpg',1)"><img src="../../Documents/Unnamed Site 2/Untitled-2_09.jpg" width="177" height="47" id="Contact" /></a></td>
      </tr>
    </table></td>
</tr>
    <td><table width="581" border="1">
      </table>
      <table width="1241" border="0">
        <tr>
          <th width="240" scope="col"><p><a name="Home" id="Home"></a><img src="file:///C|/Users/user/Desktop/ykweb/images/format-Recovered_27.jpg" width="148" height="152" alt="photo" /></p>
            <p class="arial">Name:Chin Yee Koon</p>
          <p class="arial">Collage:ITP</p>
          <p class="arial"> Country:Malaysia </p></th>
          <th width="975" scope="col"><img src="../../Documents/Unnamed Site 2/mv.gif" width="708" height="393" alt="slide" /></th>
        </tr>
      </table>

</tr>
<tr>
      <td height="63"> </td>
</tr>
<tr>
      <td height="702"><table width="1237" height="684" border="0">
        <tr>
          <th width="338" height="493" scope="col"><img src="../../Documents/Unnamed Site 2/photo_aboutme.jpg" width="305" height="303" alt="photoabout_me" /></th>
          <th width="883" scope="col"><p><img src="file:///C|/Users/user/Desktop/ykweb/only/images/images/welcome_23.jpg" width="526" height="83" alt="welcome" /></p>
            <p class="arial"><span class="arial"><strong><a name="about_me" id="about_me"></a>My name is Yee Koon Chin and sometimes while holiday helps my aunty to manage the business. I am 20 years old and have been happily living with my father Fong Lip Chin. I don't have a mother (because divorce) but I have a poodle does by the name of "Jemon". It is very sweet and innocent, but often is an unreasonably jealous mess.
              My interests are drawing (of course!), swimming, chatting, baking, playing online game, watching anime and reading. Although classic and techno is my favorite musical genre, my favorite musical artist (Pink Floyd) isn't a techno musician. My favorite food is Chinese food and my least favorite is mutton. In the past, I was a huge Touch Video Game fan and played both Everquest and World of Dance. I also enjoy playing console games, mostly the Final Fantasy and Management series.            </strong></span></p>
            <p class="arial"><strong><span class="arial">In secondary school, I used to always get in trouble for having sketches all over my notes. My teachers would bust me for drawing instead of paying attention. I would create characters and stories and dream of one day seeing these characters in a comic book or an anime series. I have always been eager to draw. I've spent a lot my free time in my youth drawing Disney characters. When I first saw the anime show "Vampire Knight" I was instantly captured! Taking a huge interest in the anime style, I've been teaching myself through a lot of practice and since I started commissioning I feel that I have improved a deal.</span></strong></p>
          <p class="arial"><strong><span class="arial"> I am currently in art school. I am attending Institutes Teknologi Pertama College of Designs 'Graphic Design' course from September 2013 up until September 2016.</span></strong></p></th>
        </tr>
      </table></td>
</tr>
<tr>
    <td height="21"> </td>
</tr>
<tr>
    <td height="955"><table width="1249" height="129" border="1">
    </table>
      <table width="1245" height="871" border="0">
        <tr>
          <th width="1" height="55" scope="col"> </th>
          <th width="313" scope="col"> </th>
          <th width="316" scope="col"> </th>
          <th width="262" scope="col"> </th>
          <th width="15" scope="col"> </th>
          <th width="288" scope="col"> </th>
          <th width="20" scope="col"> </th>
        </tr>
        <tr>
          <th height="329" scope="row"> </th>
          <td><a name="portfolio" id="portfolio"></a><img src="../../Documents/Unnamed Site 2/baba3 complete.jpg" width="280" height="323" alt="pic555" /></td>
          <td><img src="../../Documents/Unnamed Site 2/pic5.JPG" width="280" height="323" alt="pic5" /></td>
          <td><img src="../../Documents/Unnamed Site 2/Snapshot_20140113_32.JPG" width="243" height="325" alt="pic7" /></td>
          <td> </td>
          <td><img src="../../Documents/Unnamed Site 2/Snapshot_20140113_1_旋转.JPG" width="264" height="326" alt="pic8" /></td>
          <td> </td>
        </tr>
        <tr>
          <th height="21" scope="row"> </th>
          <td> </td>
          <td> </td>
          <td> </td>
          <td> </td>
          <td> </td>
          <td> </td>
        </tr>
        <tr>
          <th height="322" scope="row"> </th>
          <td><img src="../../Documents/Unnamed Site 2/baba4_副本.jpg" width="265" height="321" alt="pic2" /></td>
          <td><img src="../../Documents/Unnamed Site 2/computer layer clinic.jpg" width="293" height="306" alt="pic00" /></td>
          <td><img src="../../Documents/Unnamed Site 2/pic4.jpg" width="262" height="325" alt="pic4" /></td>
          <td> </td>
          <td><img src="../../Documents/Unnamed Site 2/pic6.jpg" width="264" height="323" alt="pic6" /></td>
          <td> </td>
        </tr>
        <tr>
          <th height="65" scope="row"> </th>
          <td> </td>
          <td> </td>
          <td> </td>
          <td> </td>
          <td> </td>
          <td> </td>
        </tr>
    </table></td>
</tr>
<tr>
    <td height="44"> </td>
</tr>
<tr>
    <td><table width="1254" height="291" border="0">
      <tr>
        <th width="1244" height="285" scope="col"><a name="contact_me" id="contact_me"></a><img src="../../Documents/Unnamed Site 2/logo contact.jpg" width="1027" height="160" alt="logo-con" /></th>
      </tr>
    </table>
      <table width="1254" border="0">
        <tr>
          <td width="14"> </td>
          <td width="564"><p class="Italic"><span class="Italic">You can follow my blog or <br />
            also can send e-mail to me.</span></p>
          <p class="arial"><span class="Italic">yukidesign@hotmail.com</span></p></td>
          <td width="6"> </td>
          <td width="561"><p class="Italic">You also can find me at:</p>
            <p class="san-serif"><a href="https://www.facebook.com/yaneki.chin">+Facebook</a><br />
            <a href="https://plus.google.com/u/0/103831381260720171045/posts">+Gmail</a></p></td>
          <td width="75"> </td>
        </tr>
    </table></td>
</tr>
<tr>
    <td height="52"> </td>
</tr>
<tr>
    <td><table width="1249" height="36" border="0">
      <tr>
        <td width="1149" height="30">COPTRIGHTYKPORTFOLIO2015</td>
        <td width="25"><a href="https://plus.google.com/u/0/103831381260720171045/posts"><img src="../../Documents/Unnamed Site 2/format-Recovered_47.jpg" width="25" height="26" alt="G+" /></a></td>
        <td width="23"><a href="https://www.facebook.com/yaneki.chin"><img src="../../Documents/Unnamed Site 2/format-Recovered_49.jpg" width="23" height="26" alt="fb" /></a></td>
        <td width="24"><a href="../../Documents/Unnamed Site 2/yuki-chin23"><img src="../../Documents/Unnamed Site 2/format-Recovered_52.jpg" width="24" height="25" alt="wechat" /></a></td>
      </tr>
    </table></td>
</tr>
</table>
</body>
</html>

This is the process....

1. Open the Adobe Photoshop (PSD)...

2. Press the key (ctrl+n) to choose the pre-set web and the size 1024x728 px...Press the button 'ok'....

3. Call the rule out with the key (ctrl+r) and right click make sure your rule is at the mode of pixels...

4. Draw the guard line...I use the easy way is draw a rectangle and use the rectangle to draw a guard line ..

5. Press the button of folder 3 times to create 3 groups and rename with HEADER, BODY and FOOTER...

6. Put the logo.....

P.s: can use (ctrl+t) to resize but just once time, cause the image will broke...

7. Draw a shape on the body folder....Use the shape tool (u)...(image a4)

8. Put the image on the shape to create the slide.....

9. Click right click to choose create clipping mask to create the mask fix in the shape...

10. Repeat the step 8 and 9 until your quantities...

11. Can lock on the folder name body. At the tools choose the tool is typing, the tool is symbolic a "T", if not also can use the short key on the keyboard (t).....

12. After that click the header folder and clicks 3 times on the folder symbol that is on the right bottom and rename with NAVI, NAVI HOLDER and NAVI CLICK...

14. Type word you like and choosing the colour put into the folder NAVI....

Example: I type and choose purple colour at this side...