Web Design Layout Plus Implementasi jQuery Tab Content

Welcome back friend! This tutorial explains how to create an interactive layout. A combination of designing web layout using Photoshop and Editing with HTML + CSS. Then implement it using jQuery Ajax when loading PHP Content

All you need is:

-Photoshop
-HTML+CSS
-jQuery Ajax
-PHP

Part I Designing Website Layout

Open your Photoshop, make the canvas size like this:

Select the Rectangle Marquee Tool, create a header object like this:

Apply multiple layer styles:

Look at the results

Now create a white line using single row marquee tool, between gradient and drop shadow. fill line make white color

Use the rounded rectangle tool to create a navigation button, use the radius as you wish

apply layer style

All gradients are in the tutorial na download package

Press [CTRL + Click] on the navigation button layer, to make a selection around the button.

Select Elliptical Marquee Tool selection and option option: Intersect with selection. Makes an oval selection above the previous selection

You will get the selection results like this

Click [CTRL + D] to Deselect
Transform vertical na object, by pressing [CTRL + T] -> Flip Vertical
Select menu Filter> Blur> Gaussian Blur. Add a 2 px radius.
and change the layer’s blending to Overlay

Give the na text button too

You can group all navigation layers into a group, and duplicate the groups into groups

Almost done with the layout, add the icon and text objects as the web title

Finally, make a footer in a simple way, like a header

Review the final layout results

Part II Slicing Images

So we’re going to take certain pictures only, take part with the slicing tool that will be needed to create CSS code.
First is the navigation slice

Pilih File > Save for Web and Device

Remember: choose Selected Slice, dowank

Then continue to the next slice, like bg-header, bg-footer and logo
So you will get some of the images needed in coding na CSS

Part III Make HTML+CSS Code

By making your website load when opened in a browser, Less Table is one of the best ways 🙂
I like this part the most, open Dreamweaver, create a CSS file
So this is the CSS code:

  <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"> </div>
<div class="spacer"> </div>
<div class="spacer"> </div>
<div class="spacer"> </div>
<div class="spacer"> </div>
<div class="spacer"> </div>
<div class="spacer"> </div>
</div>
</div>
</div>
<div id="footerMainPan">
<div id="footerPan">
© 2008 Web Design Ajax jQuery.
<a href="http://www.psdremi.co.cc" target="_blank">
PSDREMI.CO.CC
</a>
</div>
</div>

I think that’s the code na, I’m sure you will be familiar 🙂

Part IV Adding jQuery Ajax Scripts to Load Contents

You know jQuery right? if not, read the introduction to jQuery dlo yak on the web na 🙂
In this section we need the jQuery script library, while plugins are not needed.
Just give this line in the HTML na, when loading the jQuery Javascript Library na

 & amp; lt; script src = "jquery-1.2.6.js" type = "text / javascript" & amp; gt; & amp; lt; / script & amp; gt; [/ javascript]

and give the javascripts code to create a function to load external content on contentPan Div
<pre>[javascript]<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*/

and the following code is required to call data content

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

php-loader.php is a PHP file whose task is to provide values in HTML form, these values will be requested by jQuery Ajax to be loaded into contentPan Div

<?
$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>";
}
?>

I use sleep (2) to simulate loading content which is quite long
As if everything is complete, you just need to upload it to the web server so that PHP works. ni screen shoot na

I also input this tutorial in English at PSDREMI.CO.CC and Good-tutorials.Com
Best Regard, dr.emi

24 thoughts on “Web Design Layout Plus Implementasi jQuery Tab Content”

  1. Menggunakan jQuery lebih mudah dari pada musti megatur HTTPResponse Pada Ajax basic. Karena di dalam jQuery beberapa kelebihan nya sudah cukup untuk menghandle keperluan mendasar, kaya preloader, tab navigasi, implementasi frame, animasi dll.

  2. mas emi,,
    klo cara ngegunain library jquery nya gmn ?
    soalna gue bingung liat script libraryna..
    mohon petunjuknya yah

  3. Dr emi!!! SAya kesulitan dibagian membuat bayangan putih dibwh button…
    Uda saya [CTRL+CLick] Layer lalu saya select pake OVAL SElection tapi bagian yg saya seleksi tidak menjadi putih..
    Apa sebabnya???
    Mohon tutorialnya diperjelas..
    Thx

  4. dr.emi….
    dirimuw cerdas sekali !!! tutorialnya lengkap,jelas,komplit,n bermanfaat banget !!!
    makaci udah bagi iLmuna dr.emi yg baik hati ^^v

  5. mas aq nih pemula mau coba bikin website pribadi…sangat terbantu dengan tutorialnya tapi saya masih sangat awam dengan bahasa2 pemrograman yang sangat asing..bila berkenan mas di tutorianya di sertakan pengertian selengkapnya(kamus)kata maksudnya ..contohnya apa itu PHP,Dreamwever,CSS,HTML,Jquery ajax apa fungsinya,bagaiamana mendapatkan aplikasinya,dll…thanks mas

    1. hmmm gini zen, ini tutorialnya ADVANCE, jadi asumsi guwe saat membuatnya adalah user telah memahami penggunaan dan pengertian apa itu PHP,Dreamwever,CSS,HTML,Jquery ajax. Untuk belajar dari awal, ada baiknya kamu searching dulu di Google, semua pengertian dan penjelasan apa dan untuk apa PHP,Dreamwever,CSS,HTML,Jquery ajax itu ada smua.
      kamu bisa pelajari dari awal dulu tentang istilah2 itu baru mempelajari tutorial ini 🙂
      thanks

  6. mas dremi, saya ingin membuat website yang bentuknya dan fungsinya seperti oneNote pada office 2007, apa yang harus saya lakukan. tolong tutorialnya… oh ya… mohon penjelesan tentang js ajax php sebab sya kesulitan mencari softwarenya..

  7. keren banget artikelnya terutama coding nya tapi saya masih newbie dalam JQuery jadi mohon di posting artikel yang lebih mendasar tentang JQuery…^_^
    terima kasih infonya, silakan mampir yaa ke sini dan jika mau artikel menarik lainnya silakan berkunjung ke sini yaaa…

  8. Mas, terus terang saya masih bingung apa itu yg namanya jQuery, coz blm pernah blajar 😀
    tapi saya kmrn liat menu dock apple bisa dipakai di dreamweaver dengan memakai jqDock, plugin nya jQuery ya, source nya ada di http://www.wizzud.com/jqDock/
    nah yg saya mau tanyai ketika saya dah download tu file, saya bingung masukin gambar menu nya di dreamweaver agar bisa kaya menu apple/jqDock ini..trima kasih atas jawabannya, saya sangat mengharapkan jawaban nya krn ini untuk tugas akhir saya :D.

Leave a Reply

Your email address will not be published. Required fields are marked *