Website

Tutorial_Web Design Layout Plus Implementasi jQuery Tab Content


Web Design Layout Plus jQuery Tab Content

Welcome back friend ! tutorial ini menjelaskan bagaimana membuat sebuah layout yang interaktif. Penggabungan dari designing web layout menggunakan photoshop dan Editing dengan HTML+CSS. Kemudian mengimplementasikannya menggunakan jQuery Ajax saat meload PHP Content

Yang lu perlukan adalah:

-Photoshop

-HTML+CSS

-jQuery Ajax

-PHP

Part I Designing Website Layout

Buka Photoshop lu, bikin ukuran kanvas kaya gini:

Pilih Rectangle Marquee Tool, bikin objek header ke gini:

Apply beberapa layer style :

Liat dlu hasilna

Sekarang bikin garis berwarna putih make single row marquee tool, antara gradien dan drop shadow. fill line make warna putih

Gunakan rounded rectangle tool bwat mbikin navigation button, gunakan radius sesuai keinginan lu

apply layer style

Semua gradien ada dalam paket download tutorial na

Pencet [CTRL+Click] pada layer navigation button, bwat mbikin seleksi sekitar button.

Pilih seleksi Eliptical Marquee Tool dengan option option : Intersect with selection. Truzzz buat seleksi oval diatas seleksi sebelumna

Lu bakalan dapet hasil seleksi ke gini

Pencet [CTRL+D] bwat Deselect

Tros transform objek na vertikal, dengan mencet [CTRL+T] -> Flip Vertical

Pilih menu Filter > Blur > Gaussian Blur. Kasiin 2 px radius.

dan ubah blending layerna menjadi Overlay

Kasi text button na juga

Lu bisa group ksmua layer navigasi ke dalam satu group, dan duplikat gorup na mnjadi beberapa group

Hampir selesai layoutna, kasiin objek icon dan text sebagai title web na

Terakhir bikinin footer dengan cara sederhana kaya mbikin header

Review dlo hasil akhir layout na

Part II Slicing Images

Bagian ini kita bakalan ambil gambar tertentu saja, ambil bagian na dengan slicing tool yang nantina bakalan diperlukan bwat bikin code CSS na

Pertama adlah slice navigasi

Pilih File > Save for Web and Device

Inget ye: pilihna nyang Selected Slice dowank

Selanjutna terusin ke slice berikutna, kaya bg-header, bg-footer dan logo

Jadi lu bakalan dapet beberapa images yang dibutuhkan dalam coding CSS na

Part III Make HTML+CSS Code

Bwat mbikin web lu knceng di load saat dibuka di browser, Less Table adaalh salah satu cra terbaik🙂

Gw paling suka bagian ini, buka Dreamweaver lu, bikin file CSS

Nah ini code CSS na:

  html,body{
  margin:0;
  padding:0;
  border:0;
  /* \*/
  height:100%;
  /* Last height declaration hidden from Mac IE 5.x */
  }
  body {
  background:#ffffff url(images/bg-header.gif) 0 0 repeat-x;
  color:#000000;
  min-width:960px;
  }
  #mainPan {
  width:960px;
  position:relative;
  margin:0 auto;
  }
  #bodyPan {
  width:960px;
  margin:0 auto;
  }
  #headerPan {
  width:960px;
  height:127px;
  margin:0px;
  padding:0px;
  }
  #headerPan img.logo {
  border:0px;
  width:148px;
  height:69px;
  margin-left:20px;
  margin-top:10px;
  }
  /* MENU TAB NAVIGATION */
  #tabs {
  line-height:normal;
  top: 25px;
  right:10px;
  position:absolute;
  }
  #tabs ul {
  margin:0;
  padding:10px 10px 0 50px;
  list-style:none;
  }
  #tabs li {
  display:inline;
  margin:0;
  padding:0;
  }
  #tabs a {
  font-size:12px;
  font-family:Arial, Helvetica, sans-serif;
  color:#ffffff;
  float:left;
  background:url(images/bg-navigasi.gif) no-repeat left top;
  margin:0;
  padding-top:10px;
  text-decoration:none;
  width:137px;
  height:59px;
  text-align:center; /*for IE + FF right here*/
  }
  #tabs a:hover {
  font-size:12px;
  font-family:Arial, Helvetica, sans-serif;
  color: #FFCC00;
  }
  .spacer {
  margin-bottom:20px;
  }
  /* CONTENT */
  #contenPan {
  font-size:11px;
  color:#666666;
  font-family:Arial, Helvetica, sans-serif;
  width:960px;
  margin:0px;
  }
  #contenPan h2 {
  font-size:14px;
  font-family:Arial, Helvetica, sans-serif;
  color:#006699;
  }
  #contenPan a {
  color:#0066CC;
  text-decoration:none;
  }
  #contenPan a:hover {
  color: #FF0000;
  text-decoration:none;
  }
  /* FOOTER */
  #footerMainPan {
  position:relative;
  clear: both;
  width:100%;
  height:138px; /*for FF add 10px;*/
  overflow:hidden;
  background:url(images/bg-footer.gif) 30px center repeat-x;
  text-align:center;
  }
  #footerPan {
  padding-top:50px;
  font-family:Arial, Helvetica, sans-serif;
  font-size:14px;
  color: #666666;
  width:960px;
  height:88px;
  background: url(images/cutter.gif) right top no-repeat;
  margin:0px;
  }
  #footerPan a {
  color: #0099FF; text-decoration:none;
  }
  #footerPan a:hover {
  color: #333399; text-decoration:none;
  }

save dan kasi nama style.css

sekarang kite bakalan mbikin index.html

dan ini code ma:

Heloo....

This is main Content [link]
 
 
 
 
 
 
 
© 2008 Web Design Ajax jQuery. PSDREMI.CO.CC

Gw rasa cuma sgitu code na, gw yakin lu bakalan familiar kok🙂

Part IV Adding jQuery Ajax Scripts to Load Contents

Lu pada tau jQuery kan ? kalo belom, baca pengenalan tentang jQuery dlo yak di web na🙂

Pada bagian ini kita butuh jQuery script library, sedangkan plugin ga diperlukan.

Cuma kasi baris ini di HTML na, bwat ngeload jQuery Javascript Library na

dan kasi code javascripts bwat mbikin fungsi untuk meload external content pada contentPan Div

$(function(){
$("#ajax_display").ajaxStart(function(){
$(this).html('



');
});
$("#ajax_display").ajaxSuccess(function(){
$(this).html('');
});
$("#ajax_display").ajaxError(function(url){
alert('jQuery ajax is error ');
});
});
function loadContent(id) {
$("#contenPan").hide();
$("#contenPan").load("php-loader.php?cPub="+id+"", '', callback);
}
function callback() {
$("#contenPan").show();
}
$(document).ready(loadContent(id));

Simple line:

  $(this).html('



');

  /*this line will load the ajax-loader.gif while progress on request*/

dan code berikut ini diperlukan bwat memanngil data content

  function loadContent(id) {
  $("#contenPan").hide();
  $("#contenPan").load("php-loader.php?cPub="+id+"", '', callback);
  }
  function callback() {
  $("#contenPan").show();
  }

php-loader.php adalah file PHP yang bertugas memberikan value dalam bentuk HTML, value ini akan direquest oleh jQuery Ajax untuk di load ke contentPan Div

Kalo lu liat pada akhir variable GET na berupa variable cPub, maka kita bakalan bikin file PHP yang menggunakan kondisi pemilihan variable GET, ni code na:

<?
$allCount = 60; //just to simulation for data ready
if($_GET['cPub'] == 2)
{
echo "

Photoshop

"; echo " "; for($i=0;$i<=$allCount;$i++) { echo "This is Photoshop Content. "; } echo " "; sleep(2); } elseif($_GET['cPub'] == 3) { echo "

CSS

"; echo " "; for($i=0;$i<=$allCount;$i++) { echo "This is CSS Content. "; } echo " "; sleep(2); } elseif($_GET['cPub'] == 4) { echo "

PHP

"; echo " "; for($i=0;$i<=$allCount;$i++) { echo "This is PHP Content. "; } echo " "; sleep(2); } elseif($_GET['cPub'] == 5) { echo "

AJAX

"; echo " "; for($i=0;$i<=$allCount;$i++) { echo "This is AJAX Content. "; } echo " "; sleep(2); } else { echo "

Home

"; echo " this is a link "; echo " "; for($i=0;$i<=$allCount;$i++) { echo "Welcome back friend ! this tutorial explain about how to designing web layout with Photoshop+CSS and then using Ajax jQuery to implementad how to Load PHP Content. "; } echo " "; } ?>

Gw pake sleep(2) bwat mensimulasikan loading content yang cukup lama

Kayakna smua udah lengkap, tinggal lu upload ke webserver biar PHP na bekerja. ni screen shoot na

Lu pada nyang mau liat demo online previewna ada disini

Online Preview

Kalo mao download bwat belajar lebih lanjut, silakan aja

Download PSD and Code

Tutorial ini gw input juga dalam bahasa inggris di PSDREMI.CO.CC dan Good-tutorials.Com

Best Regard, dr.emi

© Copyright 2008 www.dremi.info

Original Post: Web Design Layout Plus Implementasi jQuery Tab Content Category: Web Layout

About the Author: dr.emi is a free man to distribute anything that he was founded. As a Webmaster He was publishing www.dremi.info to create one community that loves free idealism. Very specialy in Design Category. Welcome to love it!

About barifbrave

Bismillah, Rising Star Moslem Legend, Amin

Discussion

5 thoughts on “Tutorial_Web Design Layout Plus Implementasi jQuery Tab Content

  1. sip mas tapi aq masih pusing………………..hahahah…..mumet…

    Posted by bagus riyanto blog`s | May 7, 2010, 9:42 am
  2. mas..koq link online preview n download PSD and code-nya ga ada sih? bisa minta tolong kirimin ke imel ku ga mas aku masih belajar nih..

    Posted by jesha | December 13, 2010, 2:39 am
  3. assalamualaikum,..
    tutorialnya cukup membantu sekali bang,
    oh ya bang gue donwload PSD dan CODE nya ko ga ada sih linknya.
    bisa tolong kirimin ke email gue bang,
    thank,.
    wassalam…

    Posted by desta | March 20, 2011, 12:02 pm
  4. waalaikumsalam. terima kasih atas apresiasinya. coba abang minta ke “dremi.info” sj. karena saya minta dari beliau

    Posted by barifbrave | March 21, 2011, 10:29 am

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Kategori Tulisan

Arsip per Bulan

Masukkan alamat e-mail Anda untuk berlangganan blog ini dan menerima pemberitahuan tulisan-tulisan baru melalui e-mail.

Join 1,985 other followers

%d bloggers like this: