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:

  <style type="text/css">
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;
}
</style>

save dan kasi nama style.css

sekarang kite bakalan mbikin index.html

dan ini code ma:

<div id="mainPan">
<div id="bodyPan">

<div id="headerPan">
<img src="images/logo.gif" class="logo" />
<div id="tabs">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Photoshop</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">AJAX</a></li>
</ul>
</div>
</div>

<div id="contenPan">
<h2>Heloo....</h2>
<p>This is main Content <a href="#">[link]</a></p>
<div class="spacer">&nbsp;</div>
<div class="spacer">&nbsp;</div>
<div class="spacer">&nbsp;</div>
<div class="spacer">&nbsp;</div>
<div class="spacer">&nbsp;</div>
<div class="spacer">&nbsp;</div>
<div class="spacer">&nbsp;</div>
</div>

</div>

</div>
<div id="footerMainPan">
<div id="footerPan">
&copy; 2008 Web Design Ajax jQuery.
<a href="http://www.psdremi.co.cc" target="_blank">
PSDREMI.CO.CC
</a>
</div>
</div>

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

<script src="jquery-1.2.6.js" type="text/javascript"></script>

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

<script type="text/javascript">
$(function(){
$("#ajax_display").ajaxStart(function(){
$(this).html('<p><img src="images/ajax-loader.gif" /></p>');
});
$("#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));
</script>

Simple line:

  $(this).html('<p><img src="images/ajax-loader.gif" /></p>');

/*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 "<h2>Photoshop</h2>";
echo "<p align=justify><img src='images/psdremi-logo130.gif' width='130' height=44'>";
for($i=0;$i<=$allCount;$i++)
{
echo "This is Photoshop Content. ";
}
echo "</p>";
sleep(2);
}
elseif($_GET['cPub'] == 3)
{
echo "<h2>CSS</h2>";
echo "<p align=justify><img src='images/psdremi-logo130.gif' width='130' height=44'>";
for($i=0;$i<=$allCount;$i++)
{
echo "This is CSS Content. ";
}
echo "</p>";
sleep(2);
}
elseif($_GET['cPub'] == 4)
{
echo "<h2>PHP</h2>";
echo "<p align=justify><img src='images/psdremi-logo130.gif' width='130' height=44'>";
for($i=0;$i<=$allCount;$i++)
{
echo "This is PHP Content. ";
}
echo "</p>";
sleep(2);
}
elseif($_GET['cPub'] == 5)
{
echo "<h2>AJAX</h2>";
echo "<p align=justify><img src='images/psdremi-logo130.gif' width='130' height=44'>";
for($i=0;$i<=$allCount;$i++)
{
echo "This is AJAX Content. ";
}
echo "</p>";
sleep(2);
}
else
{
echo "<h2>Home</h2>";
echo "<p><a href=''>this is a link</a></p>";
echo "<p align=justify><img src='images/psdremi-logo130.gif' width='130' height=44'>";
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 "</p>";
}
?>

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

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

Best Regard, dr.emi

Share on Facebook

Popularity: 58% [?]

You may also like

• Building Administrator Manager for Table Relation Using PHP and jQuery
• Design Form Smooth Shadow [dr.emi]
• Membuat Box Style Link Cantik ala dr.emi dengan CSS
• Beautifull Form dr.emi with CSS
• Web 2.0 Layout With CSS Part-4
• Web Base Controller System with NirCMD
• dreFileBrowser v.1.0 – Make a beautifull File Browser with jQuery File Tree and EditArea
• CSS for Rounded Box Style
• Semantic Code untuk mengoptimize HTML Web 2.0
• 59 CSS Tab Design Sample