Kamis, 13 Mei 2010

Web Deshing Layout

di 02.45
Diposting oleh Bagas Lukmanul Hidayatullah
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

0 komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)