Membuat Web Personal dari Foto dengan Photoshop( Lanjutan )

Catatan ini merupakan lanjutan dari catatan saya sebelumnya Membuat template Web Personal dari Foto dengan Photoshop...Bagi saudara yang ingin melanjutkan membaca catatan ini alangkah lebih baiknya membaca catatan saya sebelumnya yang saya sebut diatas.

Pada catatan ini saya akan menjelaskan bagaimana memfungsikan semua menu dan mengisi conten  dengan menu yang telah kita buat pada tutorial sebelumnya.

Sebelum melangkah lebih mundur eh lebih jauh dalam catatan ini terlebih dahulu saudara harus menginstal aplikasi PSPad untuk editor kode program. Jika saudara belum punya silahkan downlond atau saudara cari sama si mbahnya google juga boleh, aplikasi ini di jamin gratis dan ringan untuk digunakan .

Okay mengintip sedikit pada catatan sebelumnya, pada catatan sebelumnya kita telah menyimpan hasil akhirnya pada sebuah folder yang diberi nama folder Myweb, di dalam folder ini terdapat  satu folder dengan namaimages dan satu file dengan nama index.html, didalam folder images terdapat potongan-potongan gambar yang telah kita seleksi menggunakan slice tool (penjelasan pada catatan sebelumnya), sedngkan file index.html berisi script yang memanggil potongan-potongan gambar didalam folder images untuk ditampilkan dihalaman browser kesayangan anda, dan pada catatan ini kita akan bermain-main pada file index.html.

Langsung saja jalankan aplikasi PSPad yang sudah terinstal dikomputer saudara dan mari kita lanjutkan pada langkah-langkah berikut ini :

Langkah pertama :

1. Buka file index.html dengan browser kesayangan saudara ( disini saya menggunakan firefox ), pada browser terlihat tampilan website disebelah kiri, disini kita akan mengarahkan tampilan web ke tengah browser, caranya bagaimana....? ikuti cara ke2
2. Buka file index.html dengan aplikasi PSPad, caranya : pada pojok kanan atas aplikasi PSPad click File -> Open terus cari file index.html di dalam folder ygang saudara simpan terus click tombol open (mudah bukan...hehe). Terus dalam script < table id=... width=... height=... border=... cellpadding=... cellspasing=...> tambahkan dengan align=center, sehingga menjadi < table id=... width=... height=... border=... cellpadding=... cellspasing=... align=center> seperti contoh gambar berikut :
   
                                         
3. Buka kembali file index yang di browser saudara dan refresh, sekarang tampilan web saudara sudah berada di tengah, selanjutnya untuk kita melangkah lagi..

Langkah Kedua bagian Menu :

1. Ada 4 menu yang akan kita link kan dengan masing-masing file, yaitu menu HOME dengan file index.html, PROFILE dengan profile.html, GALERY FOTO dengan galery.html dan LINK dengan link.html...loh file profile.html, galery.html dan link.html nya dmn...sabaaarrr kita kasih link dulu semua menunya, ikuti cara kedua :
2. Buka file index.html dengan PSPad terus cari script yang memanggil nama potongan gambar dari tiap menu ( silahkan lihat potongan gambar dalam folder images jika ngung-bingung ), terus tambah kan script berikut sebelum script image < a href=index.html> untuk menu Home, < a href=profile.html>untuk menu Profile, < a href=galery.html> untuk menu Galery Foto dan < a href=link.html> untuk menu Link dan tiap akhir script image tambahkan dengan < /a> sehingga scriptnya menjadi :

Script Menu HOME	< a href=index.html> < img src=images/index_04.gif width=... height=...  alt="" > < /a>
Script Menu PROFILE	< a href=profile.html> < img src=images/index_05.gif width=... height=...  alt="" > < /a>
Script Menu GALERY FOTO	< a href=galery.html> < img src=images/index_06.gif width=... height=...  alt="" > < /a>
Script Menu LINK	< a href=link.html> < img src=images/index_07.gif width=... height=...  alt="" > < /a>
Ket: Tulisan yang di cetak merah yang ditambahkan, fungsinya untuk membuat link pada masing-masing menu.

3. Selanjutnya Buka file index.html dengan browser firefox, ow ow oww tampilan layout jadi hancur berantakan seperti gambar berikut, jangan takut kita akan atur kembali :
   
4. Tambahkan border=0 seperti pada tabel di bawah, 

Script Menu HOME	< a href=index.html> < img src=images/index_04.gif width=... height=...  alt="" border=0> < /a>
Script Menu PROFILE	< a href=profile.html> < img src=images/index_05.gif width=... height=...  alt="" border=0> < /a>
Script Menu GALERY FOTO	< a href=galery.html> < img src=images/index_06.gif width=... height=...  alt="" border=0> < /a>
Script Menu LINK	< a href=link.html> < img src=images/index_07.gif width=... height=...  alt="" border=0> < /a>
Ket: Tulisan yang di cetak biru yang ditambahkan, fungsinya untuk menghilangkan border pada gambar.

5. Setelah saudara menambahkan script tersebut buka kembali file index saudara dengan browser firefox dan lihat hasilnya.

6. Selanjutnya kita membuat file profile.html, galery.html dan link.html, caranya : buka file index.html dengan PSPad, terus Save As file index.html ini dengan nama profile.html dan lakukan sekali lagi Save As dengan nama galery.html dan terakhir Save As dengan nama link.html, tempat Save As file harus dalam folder MyWeb Sehingga sekarang kita memiliki 4 file html seperti gmbar berikut:  
   
7. okelahlah kalaw begitu kita lanjut lagi....^_*

Langkah Ketiga, bagian Content :

1. Pada bagian content kita akan modif sedikit tag html dengan menambahkan Cascading Styles Sheet (CSS), caranya Buka file index.html dengan PSPad kemudian tambahkan CSS dalam tabel dibawah diantara tag < head> seperti dalam tabel berikut :

< html> < head> < title>My-Web< /title> < style type="text/css"> #content {  background:url(images/index_10.gif);     padding:0;     border:0;     width:499px;     height:386px; } #content #dalam{     background: none;     width: 450px;     height: 350px;     margin-left: 30px;     } .content-text{     font: 12px Comic;     background:none;     margin-left: 30px;     color: Gray;     } .img2{     float: left;     margin: 0 5px 5px 0;     border: 4px solid gray;     } < /style> < /head>

Ket : bagian background: url(images/index_10.gif); memanggil potongan gambar pada bagian content

2. Selanjutnya pada bagian tag html yang memanggil potongan gambar untuk content ganti dengan tag CSS berikut, seperti dalam tabel :

< tr>    < td colspan="5">       < div id=content>          < div id=dalam>< span class=content-text>     < p> ISI Content < /p> < /span>< /div>< /div> < /td>     < /tr>

Ket : yang dicetak biru tempat mengisi  content.

3. Kemudian isi bagian Content, diisi pada bagian Isi content yang ditulis biru pada tabel diatas seperti tabel di bawah ini mengisi bagian content file index.html...

< p>Welcome to Avril Lavigne website, and its dedicated to her smoldering lips, big blue eyes and pale skin which make for an enticing package, one that will only get better with age. < /p>

4. Buka file index.html dengan browser firefox saudara, kita telah berhasil mengisi content index, berhasil...berhasil...berhasiiil....
5. Selanjutnya Untuk mengisi content Profile, Saudara tinggal ikuti Langkah Ketiga cara 1 sampai 2 atau copy-kan aje script tersebut dalam file profil.html. Di bagian content Profil kita akan menampilkan sebuah foto dihalaman web Profile, sebelum lanjut maju kedepan buat dulu sebuah folder didalam folder Myweb dengan nama folder img dan simpan didalam folder tersebut sebuah foto dengan nama avril.jpg, tag menampilkan foto dan isi content untuk profile lihat tabel berikut:
6.  

< p>< img class=img2 src="img/avril.jpg" mce_src="img/avril.jpg" width="105" height="140">             Avril Lavigne dilahirkan disebuah kota kecil,             Napanee, Ontario. Kemampuan Avril dalam bernyanyi telah diketahui sejak ia berumur 2 tahun,              Keluarga Avril pindah ke Napanee saat dia berumur 5 tahun. Pada tahun 1998,             Avril memenangkan kompetisi bernyanyi dalam tour resmi penyanyi Kanada, Shania Twain.             Avril menyanyikan lagu Shania yang berjudul What Made You Say That.< br />

Ket : Bagian yang dicetak biru untuk memanggil gambar dengan nama avril.jpg yang berada di dalam folder img dan ditampilkan di halaman profile web.

7. Selanjutnya untuk content galery foto saudara tinggal mengikuti langkah ketiga cara 5 diatas, sebelumnya saudara harus menambahkan beberapa foto kedalam folder img untuk ditampilkan di halaman galeri foto, tag untuk memanggilnya lihat dalam tabel berikut :

< p>< img class=img2 src="img/avril2.jpg" width="105" height="140">        < img class=img2 src="img/avril3.jpg" width="105" height="140">       < img class=img2 src="img/avril4.jpg" width="105" height="140">< /p>

Ket: tulisan yang saya cetak biru tebal merupakan nama file foto

8. Selanjutnya untuk content link, ikuti cara 5 diatas, dan isi contentnya seperti dalam tabel berikut :

< p>Link Music : < /p> < a href=http://www.stafaband.info target=_blank>Stafaband  < /a>

Ket: tulisan yang warna biru adalah link ke webnya stafaband.com, dan tulisan yang saya cetak tebal biru adalah link yang ditampilkan di halaman web.

9. Sekarang saudara tinggal jalankan webnya di browser dan click masing-masing menu untuk melihat hasilnya...horeee webnya dah jadi...hehehee 

Okay saudara...selesai sudah pembuatan Web Personal ini, saudara bisa download hasil akhir dari pembuatan web ini di menu download pada website ini dengan nama project website personal. Untuk masing-masing halaman webnya silahkan lihat di bawah ini :

1. Halaman HOME 
   
2. Halaman PROFILE  
   
3. Halaman GALERY FOTO 
   
4. Halaman LINK 
   

Catatan : Pembuatan Web ini merupakan salah satu cara merancang web dengan TABEL, selain menggunakan tabel ada cara lain dengan menggunakan DIV ( full script CSS ). Ada Kelebihan dan kekurangan dalam membangun web dengan menggunakan TABEL dan DIV ini, semakin saudara banyak belajar membangun web dengan menggunakan 2 cara ini semakin tau kekurangan dan kelebihannya...makanya kalau ingin pintar...ya belajar...hahaha..kayak iklan aj...Di lain waktu saya akan menuliskan tutorial membangun web dengan menggunaka CSS ini. Maaf kalau dalam penyampaian dalam catatan ini agak beribet...maklum baru belajar....kekkekekeee 

SemangArt Belajar...:)