Cara Membuat Website Menggunakan DreamWeaver

Indonesian Level Seven
8:15:44 AM
3


Saya akan kasih tutroial cara Membuat Website Versi Mr.R4R Sekian Banyak posting membuat Website di mbah google :v Oke langsung ajah kita prakteknya :v

 Bahan-bahannya :
  • Pc / Laptop kalo tidak punya Pc / laptop bagaimana  praktek-nya :v
  • Dreamweaver  Versi apa ajah boleh
  • Download Xampp Version apa saja saya sarankan Versi 1.8.2
  • Secangkir Kopi Biar gak ngantuk :v
  • Beli Cemilan biar gak laper
Oke langsung ajah kita menuju ke TKP,
Langkah Pertama :

 nyalakan dulu Xampp-nya, jika sudah kita ke tahap berikut-nya



Langkah kedua:


Buat Folder Baru di C:\xampp\htdocs\ 


contoh kasih nama folder-nya Mr.R4R

       Langkah ketiga :

       buat folder lagi di Mr.R4R
              -set
              -css
              -img
Seperti Gambar di atas
       Langkah Keempat buka DreamWeaver-nya dan pilih PHP



     Masukan Script dibawah ini

 <html>  
    <head>  
    <title>Mr.R4R</title>  
    <link rel="stylesheet" type="text/css" href="set/css/reset.css" />  
    </head>  
    <style type="text/css">  
 body {  
  font-family:Arial, Helvetica, sans-serif;  
  font-size:14px;  
  }  
  h1 {  
   font-size: 89px;  
   font-family: 'Open Sans', serif;  
   line-height: 75px;  
   padding: 10px;  
 }  
 h1 a:hover {  
   text-decoration: none;  
   color:red;  
 }  
 h2 {  
   font-family: Helvetica;  
   font-size: 18px;  
   padding: 10px;  
 }  
  #canvas {  
  width:960px;  
  margin:0 auto;  
  border:1px solid silver;  
   box-shadow:0 0 45px #666;}  
 #header {  
  font-size:20px;  
  padding:20px;  
  }  
 #isi {  
  min-height:400px;  
  padding:20px;  
  background-image: url("set/img/isi.jpg");  
 background-attachment: fixed;}  
 #footer {  
  text-align:center;  
  padding:20px;  
  background-color:#000;  
  color:#fff;  
  }  
  #menu {  
  background-color:#000;  
  color:#fff;}  
 #menu ul{  
  list-style:none;  
  margin:0;  
  padding:0;}  
 #menu ul li.utama {  
  display:inline-table;}  
 #menu ul li:hover {  
  background-color:#F00;}  
 #menu ul li a{  
  display:block;  
  text-decoration:none;  
  line-height:40px;  
  padding:0 10px;  
  color:#fff;}  
 .utama ul {  
  display:none;  
  position:absolute;  
  z-index:2;  
  }  
 .utama:hover ul{  
  display:block;  
  }  
  .utama ul li {  
  display:block;  
  background-color:#000;  
  width:140px;}  
 a {  
  text-decoration:none;  
  color:#000;}  
 </style>  
 <body>  
 <div id="canvas">  
 <div id="header">  
 <h1><a href="index.html">Mr.R4R</a></h1>  
   <h2>IL7T <span>-</span> Indonesia Level Seven Team</h2>  
       </div>  
 <div id="menu">  
 <ul>  
  <li class="utama"><a href="index.php">Home</a></li>  
     <li class="utama"><a href="http://indonesianlevelseventeam.blogspot.com" target="_blank">contact</a></li>  
      </ul>  
   </div>  
 <div id="isi">  
   < /div>  
   <div id="footer">Copyright By Mr.RAR</div>  
   </div>  
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>  
   </body>  
   </html>

maaf Scriptnya agak berantakan, lalu Save dengan nama index.php dan lihat hasilnya

    Disini terilihat Header dan description jarak-nya agak jauh 
      biar terihat bagus pilih menu FIle --> New --> Pilih css atau Ctrl + N pilih css
        dan masukan Script css dibawah ini
      @charset "utf-8";
      /* CSS Document */
      /*Style untuk reset*/
      a ,
      abbr ,
      acronym ,
      address ,
      applet ,
      article ,
      aside ,
      audio ,
      b ,
      big ,
      blockquote ,
      body ,
      canvas ,
      caption ,
      center ,
      cite ,
      code ,
      command ,
      datalist ,
      dd ,
      del ,
      details ,
      dfn ,
      div ,
      dl ,
      dt ,
      em ,
      embed ,
      fieldset ,
      figcaption ,
      figure ,
      font ,
      footer ,
      form ,
      h1 ,
      h2 ,
      h3 ,
      h4 ,
      h5 ,
      h6 ,
      header ,
      hgroup ,
      html ,
      i ,
      iframe ,
      img ,
      ins ,
      kbd ,
      keygen ,
      label ,
      legend ,
      li ,
      meter ,
      nav ,
      object ,
      ol ,
      output ,
      p ,
      pre ,
      progress ,
      q ,
      s ,
      samp ,
      section ,
      small ,
      source ,
      span ,
      strike ,
      strong ,
      sub ,
      sup ,
      table ,
      tbody ,
      tdvideo ,
      tfoot ,
      th ,
      thead ,
      tr ,
      tt ,
      u ,
      ul ,
      var {
          background: 0 0;
          border: 0;
          font-size: 100%;
          margin: 0;
          padding: 0;
          vertical-align: baseline;
      }
Langkah ke lima:

    Save dengan nama reset.css tempat penyimpan-nya di reset --> css dan liat hasil-nya
Terlhat rapih-kan jarak antara header dan description
   Sekian tutorial dari Mr.R4R terima kasih
   Author: Mr.R4R

    Mau copas? hargain yang bikin gan :)