Membuat Halaman Profile

  • View
    45

  • Download
    2

Embed Size (px)

DESCRIPTION

petunjuk membuat profil

Transcript

Membuat website di dreamweaver CS3Kemarin aku sudah kasih download template website yang simple, bagi yang belum download silahkan download disini.Setelah anda mendownload file tersebut, extrak filenya kedalam komputer anda, terserah anda mengextraknya dimana. Kemudian dalam hasil extrak terdapat folder images, disana ada beberapa file yang sudah aku pecah sebagai bahan pembuatan website di dreamweaver.Copy folder images tersebut kemudian paste kedalam folderD:\website\xampp\htdocs\websiteku.comSekali lagi aku ingatkan sebelum memulai tutorial membuat website di dreamweaver cs3 ini sebaiknya anda melakukan setting site di dreamweaver cs3 tutorialnya bisa di lihat disini.Membuat website di dreamweaver cs3 tidak sesulit yang orang bayangkan, kita hanya perlu memahami sedikit kode dan beberapa tool yang sudah di sediakan oleh adobe dreamweaver, membuat website di dreamweaver anda hanya akan bermain klik mengklik dan sedikit sekali mengetikkan kode.Kemarin ada seorang teman yang ingin bela!ar mebuat website di dreamweaver, dia bertanya kepada aku..Membuat website di Dreamweaver harus menginstall XAMPP?"aku rasa membuat website di dreamweaver tidak perlu jika anda membuat website berbasis html, anda cukup menaruh filenya dimana saja yang anda suka#$ntuk membuat website di dreamweaver yang pertama yang perlu kita lakukan adalah membuat file index.php. %ebsite yang akan kita buat memiliki bagian &1. Header2. Menu navigasi3. Konten4. Sidebar5. Footer'angsung sa!a kita akan membuat website di dreamweaver,buka program Adobe Dreamweaver anda,Create new pilih phpSimpan file tersebut, tekan CTR ! S simpan dengan nama inde"#php dalam folder tempat anda menginstal XAMPPD:\website\xampp\htdocs\websiteku.com(erikutnya anda membuat file baru, tekan CTR ! $ pada %lan& Page pilih CSS kemudian klik 'reate( simpan dengan nama st)le#'ss dalam folder yang sama dengan file inde"#phpKembai ke file index.php, klik tab inde"#php pada document toolbar, kemudian klik Code, tambahkan script berikut di atas tag *+head,1

Script tersebut berfungsi menghubungkan file CSS dengan inde"#phpMengatur Body WebsiteMasih dalam file index.php, klik i'on $ew CSS Rule yang ada di bagian kanan, !ika di layar anda tidak terdapat CSS Stylenya anda bisa menekan Shift ! -.. untuk menampilkan tab CSS St)le.Setelah muncul %indow )ew CSS *ule, isi pengaturan sebagai berikut & Selector Type : Advanced (Ids, pseudo-class selectors) Selector : body e!ine in : style.css+ika sudah klik ok. Maka akan muncul !endela CSS Rule Definition for bod) in st)le#'ss( isikan pengaturan sebagai berikut &1. Type " Font : #rial$ Helvetica$ sans%seri!$ size:13 pixel, color : #2. !ac"#round" &ac'ground color : ())))))3. !ox $ *idt+ : ,-- pi.el+ika sudah klik /0( simpan file index.php dan style.css anda tekan CTR ! SMengatur Link WebsiteSekarang kita akan mengatur warna, ukuran, dan style 'ink secara default.Klik icon $ew CSS Rule, isi pengaturannya sebagai berikut & Selector Type : Advanced (Ids, pseudo-class selectors) Selector : a e!ine in : style.cssSetelah muncul CSS Rule Definition for a in st)le#'ss( isikan pengaturannya sebagai berikut &T)pe1 )olor : #%%& /ada 'ecoration centang (one+ika sudah klik ok.Selan!utnya kita akan mengatur css link pada saat hover atau pada saat cursor berada di atas link. Klik kembali icon $ew CSS Rule, isi pengaturannya sebagai berikut & Selector Type : Advanced (Ids, pseudo-class selectors) Selector : a:)over e!ine in : style.cssSetelah muncul CSS Rule Definition for a in st)le#'ss( isikan pengaturannya sebagai berikut &T)pe1 /ada 'ecoration centang *nderline 0i'a anda ingin 1enguba+ *arna lin' pada saat +over 'li' icon 'ota' yang ada di sebela+ tulisan color, 'e1udian pili+ *arnanya.+ika sudah klik ok.Memuat Header WebsiteSetelah tadi kita mengatur bagian body dan link website, sekarang saatnya mengatur bagian header dari website.,ilih file index.php, kemudian ketikkan script berikut dan letakkan di bawah tag *bod),1

Sekarang kita akan mengatur CSS untuk headernya, caranya sama seperti mengatur CSS pada body. Klik icon $ew CSS Rule, isi pengaturannya sebagai berikut & Selector Type : Advanced (Ids, pseudo-class selectors) Selector : #)eader e!ine in : style.cssSetelah muncul CSS Rule Definition for 2header in st)le#'ss( isikan pengaturannya sebagai berikuT)pe1 Si2e : 12 pi.el )olor : (FFFFFF%a'&ground1 &ac'ground i1age : 'li' bro*se pili+ )eader.+p# dala1 !older i,a#es 3epeat : no-repeat%o" 1 4idt+ : -& pixel Float : .e%t Heig+t : 11 pixel /adding : centang sa,e %or all, 'e1udian isi'an / pixel+ika sudah klik -K, kemudian simpan file st)le#'ss anda. $ntuk melihat preview website anda tekan -.3Selan!utnya kita akan memasukkan logo website dan des&ripsi website kedalam header, caranya &li& 'ursor anda setelah *div id45header5, kemudian klik insert 4 , image 4 , logo#6pg$sahakan logo yang anda buat tingginya . weight tidak lebih dari 78pi"el( !ika logo anda melebihi dari /0 pixel, anda dapat merubah ukurannya dengan cara &melalui 1esign 2iew, &li& gambar logo anda kemudian pada panel Propert) yang secara default berada di bagian bawah, pada 9 + 9eight isi&an 78Masih tetap pada Panel Propert), pada in& klik icon folder yang ada di sebelah kiri tulisan 3dit, kemudian pilih file inde"#php. 4ni berfungsi pada saat logo di klik akan mengarah ke halaman index atau halaman depan website anda.,ada bagian border isikan 0, dan pada Alt ketikkan logo websiteku atau nama website nama anda.1ibawah code1

ketikkan1eskripsi website anda disiniganti tulisan deskripsi website anda disini dengan deskripsi.pen!elasan website anda.Simpan file inde"#php dan st)le#'ss tekan CTR ! S, kemudian lihat previewnya te&an -.3 atau refresh browser anda te&an -:.Memuat Menu Navigasi WebsiteSetelah kita membuat 5eader, selan!utnya kita akan membuat navigasi website yang berada di bagian bawah header. )avigasi isi akan berisi link 6 link yang akan mengarah ke halaman tertentu seperti profile, gallery, atau contact.,ilih file index.php, kemudian ketikkan script berikut dan letakkan di atas *+bod),1

Sekarang kita akan mengatur CSS untuk navigasiny. Klik icon $ew CSS Rule, isi pengaturannya sebagai berikut & Selector Type : Advanced (Ids, pseudo-class selectors) Selector : #navi#asi e!ine in : style.cssSeleah muncul CSS Rule Definition for 2navigasi in st)le#'ss( isikan pengaturannya sebagai berikut &%a'&ground1 &ac'ground i1age : 'li' bro*se pili+ b#-nav.+p# dala1 !older i,a#es 3epeat : no-repeat%o" 1 4idt+ : -& pixel Float : .e%t Heig+t : 30 pixel /ada bagian paddin# +ilang'an centang sa,e %or all, le!t :/ pixel dan rig+t: / pixel /ada bagian ,ar#in centang sa,e %or all isi'anpixel+ika sudah klik ok, simpan file inde"#php dan st)le#'ss.Selan!utnya pada 1esign 2iew, klik di dalam Menu $avigasi kemudian klik ;nsert , TableSetelah muncul !endela Table( isikan pengaturannya sebagai berikut & 3o*s : 1 )olu1ns : 4 Table 4idt+ 'osong'an sa5a &order T+ic'ness 'osong'an 6 delete sa5a. )ell /adding : 5 )ell Spacing : 5+ika sudah klik ok.Selan!utnya didalam kolom table ketikkan menu website anda, perhatikan gambar berikutSekarang kita akan memberikan link pada menu tersebut, caranya blok tulisan 9ome 78 pada panel property cari kolom in& klik i'on folder kemudian pilih file inde"#php, lakukan hal yang sama pada menu lainnya, tetapi pada kolom link isikan sa!a 2 karena kita belum mempunyai filenya.$ntuk halaman profile dan yang lainnya akan kita bahas pada artikel berikutnya.Sekarang kita akan mengubah warna link dari menu navigasi dengan mengatur CSS nya, caranya klik tulisan 9ome 78 klik icon $ew CSS Rule, isi pengaturannya sebagai berikut & Selector Type : Advanced (Ids, pseudo-class selectors) Selector : #navi#asi a e!ine in : style.cssSeleah muncul CSS Rule Definition for 2navigasi a in st)le#'ss( isikan pengaturannya sebagai berikut &T)pe1 )olor : (FFFFFF 7'ode *arna puti)8+ika sudah klik ok. Simpan file index.php dan style.css anda tekan CTR ! S, kemudian preview tekan -.3 MemuatKonten WebsiteSekarang kita akan membuat konten website, konten ini adalah tempat berita atau artikel anda.,ilih file index.php, kemudian ketikkan script berikut dan letakkan di atas *+bod),1

Klik icon $ew CSS Rule, isi pengaturannya sebagai berikut & Selector Type : Advanced (Ids, pseudo-class selectors) Selector : #conten-1rapper e!ine in : style.cssSeleah muncul CSS Rule Definition for 2'onten

-ebsiteku

112131415191:1;1,2-2122232425292:2;2,3-3

eskripsi website anda disini

0ome'rofileerakhir simpan peker!aan anda tekan Ctrl ! S#$ntuk membuat halaman kontak caranya sama sa!a, anda tinggal buka file inde"#php kemudian Save ;s beri nama 'onta't#php Selan!utnya pada tutorial dreamweaver ini kita akan melink?an halaman 6 halaman tersebut, buka file header#php milik anda, te&an Ctrl ! / pilih header.php lalu klik -pen.,ertama blok tulisan Profile yang ada di bagian navigasi pada file header#php milik anda, kemudian pada panel Properties klik i'on folder + %rowse for -ile yang ada dalam bagian link, kemudian pilih file profile#php#'akukan langkah yang sama untuk me'ink?an halaman kontak milik anda. >erakhir simpan file header#php tekan Ctrl ! S( kembali ke tab profile profile#php tekan -.3 untuk melihat preview peker!aan anda.+ika anda masih ingat pada tutorial dreamweaver membuat file index.php yang belum di pecah, bagian navigasi masih menyatu dalam @ file, !adi ketika anda ingin memberikan link pada navigasi tersebut anda harus mengedit @ persatu file 6 file yang anda miliki, misalnyamenu navigasi pada file inde"#php( profile#php dan 'onta't#php# 4tu baru 3 file, bagaimana !ika anda memiliki ratusan file . halaman statis< repot bukan>erakhir kita akan menggabungkan file footer.php dengan file index.php, cut kode berikut &@

,aste kedalam file footer.php, dan ketikkan kode berikut tep