Rudi Hartanto

Tutorial Membuat Situs Web

ilmubiner@gmail.com
http://ilmubiner.blogspot.com
Rudi Hartanto
Membuat
folder situs &
opsinya
Membuat
folder situs &
opsinya
Membuat
template
Membuat
template
Membuat
halaman web
dari template
Membuat
halaman web
dari template
Yang Dipelajari di Tutorial Ini
Rudi Hartanto
Tampilan Situs yang Akan Dibuat
Rudi Hartanto
1: Buka Dreamweaer
1. Klik
2. Klik
Rudi Hartanto
!: Buat Site Baru
1. Klik
Rudi Hartanto
": Isi #ama Site
1. si : !utorial "#$
2. klik
Rudi Hartanto
$: %ili& Teknologi
1. Klik
2. Klik
Rudi Hartanto
': %ili& Tempat Mengedit
1. Klik
2. Klik %ika ingin
mengubah folder situs
&. Klik
Rudi Hartanto
(: %ili& )oneksi ke Serer
1. Klik
2. Klik
&. Klik
Rudi Hartanto
*: Summary
1. Klik
Rudi Hartanto
+: Buat ,ile Template Baru
1. Klik
2. Klik
Rudi Hartanto
-: %ili& Blank Template
1. Klik
2. Klik
&. Klik
'. Klik
Rudi Hartanto
1.: Simpan
1. Klik
2. Klik
&. Klik
'. si
(. Klik
Rudi Hartanto
11: /asil %enyimpanan Template
Rudi Hartanto
1!: Tamba&kan 0SS 1ule Baru
1. Klik
Rudi Hartanto
1": Memili& Tag
1. Klik
2. Klik
&. )ilih
'. Klik
(. Klik
Rudi Hartanto
1$: Beri #ama dan Simpan ,ile 0SS
1. si
2. Klik
Rudi Hartanto
1': Bo2 Style
1. Klik
2. si *
&. si *
Rudi Hartanto
1(: Blo3k Style
1. Klik
2. Klik
&. )ilih
'. Klik
Rudi Hartanto
1*: Simpan ,ile 0SS
1. Klik
2. Klik
&. Klik
Rudi Hartanto
1+: Membuat /eader
1. Klik
2. Klik
&. Klik
'. Klik
Rudi Hartanto
1-: Membuat /eader 4lanj56
1. si
2. Klik
&. Klik
Rudi Hartanto
!.: Membuat /eader 4lanj56
1. Klik
2. si +,* pi-el
&. si *
'. )ilih "uto
(. Klik
.. Klik
Rudi Hartanto
!1: Membuat /eader 4lanj56
1. !ampilannya
2. /obel klik
Rudi Hartanto
!!: Membuat /eader 4lanj56
1. Klik
2. )ilih
&. si 12 pi-el
'. Klik
Rudi Hartanto
!": Membuat Di 7ogo 8 Sear3&
1. !eks diblok
2. !ekan
)astikan kursor tetap
di dalam kotak
Rudi Hartanto
!$: Membuat Di 7ogo 8 Sear3& 4lanj56
1. Klik
2. Klik
&. Klik
'. Klik
Rudi Hartanto
!': Membuat Di 7ogo 8 Sear3& 4lanj56
1. si
2. Klik
&. Klik
Rudi Hartanto
!(: Membuat Di 7ogo 8 Sear3& 4lanj56
1. Klik
2. )ilih
Rudi Hartanto
!*: Membuat Di 7ogo 8 Sear3& 4lanj56
1. Klik
2. si &. )ilih '. )ilih
(. si
.. si
+. Klik
,. Klik
Rudi Hartanto
!+: Membuat Di 7ogo 8 Sear3& 4lanj56
1. Klik
Rudi Hartanto
!-: Membuat Di 7ogo 8 Sear3& 4lanj56
1. !empatkan
kursor di sini0
lalu tekan
tombol 12!13
Rudi Hartanto
".: Membuat Di 7ogo 8 Sear3& 4lanj56
1. Klik
2. Klik
&. Klik
'. Klik
Rudi Hartanto
"1: Membuat Di 7ogo 8 Sear3& 4lanj56
1. si
2. Klik
&. Klik
Rudi Hartanto
"!: Membuat Di 7ogo 8 Sear3& 4lanj56
1. Klik
2. )ilih
Rudi Hartanto
,. Klik
"": Membuat Di 7ogo 8 Sear3& 4lanj56
1. Klik
2. si &. )ilih '. )ilih
(. si
.. si
+. Klik
Rudi Hartanto
"$: Membuat Di 7ogo 8 Sear3& 4lanj56
2. !ekan
1. !eks diblok
&. Klik '. Klik
Rudi Hartanto
"': Membuat Di 7ogo 8 Sear3& 4lanj56
1. )ilih file
2. Klik
&. si
'. Klik
Rudi Hartanto
"(: Membuat Di 7ogo 8 Sear3& 4lanj56
2. !ekan
1. !eks diblok
&. Klik
'. Klik (. Klik
Rudi Hartanto
"*: Membuat Di 7ogo 8 Sear3& 4lanj56
1. Klik di sini
2. Klik
&. Klik
'. Klik
(. si .. Klik
Rudi Hartanto
"+: Membuat Di 7ogo 8 Sear3& 4lanj56
1. Klik
2. Klik
&. Klik
'. si (. Klik
Rudi Hartanto
"-: Membuat Di 7ogo 8 Sear3& 4lanj56
1. Klik
2. 4anti
Rudi Hartanto
$.: Membuat Di Menu Bar
1. Klik
2. Klik
Rudi Hartanto
$1: Membuat Di Menu Bar 4lanj56
1. Klik di sini
2. Klik
Rudi Hartanto
$!: Membuat Di Menu Bar 4lanj56
1. Klik
2. Klik
&. Klik
Rudi Hartanto
$": Membuat Di Menu Bar 4lanj56
1. si
2. Klik
&. Klik
Rudi Hartanto
$$: Membuat Di Menu Bar 4lanj56
1. Klik
2. si &. )ilih
'. si
(. Klik
.. si semua
margin
Rudi Hartanto
$': Membuat Di Menu Bar 4lanj56
1. Klik
2. "mbil warna
bunga dengan
eye dropper di
sini
Rudi Hartanto
$(: Membuat Di Menu Bar 4lanj56
1. )ilih
2. Klik
&. Klik
Rudi Hartanto
$*: Membuat Di Menu Bar 4lanj56
1. !ambahkan teks sehingga
hasilnya seperti gambar di
bawah
Rudi Hartanto
$+: Membuat Di 0ontent
5 /engan cara yang sama membuat di6 Menu Bar
7langkah no. '* 8 '+90 buatlah di6 0ontent dengan
definisi style sbb. :
8 / : content
8 #o- ;; <idth : +,* pi-el0 =eight : &** pi-el0 $lear :
both0 )adding : ( pi-el0 Margin ;; !op : *0 >eft : auto0
3ight : auto0 #ottom *
8 #lock ;; !e-t align : left
8 #order ;; semua sisi : none0 kecuali #ottom ;; ?tyle :
solid0 <idth : 1 pi-el0 $olor : mengambil warna daun
dengan eye dropper
Rudi Hartanto
$-: Membuat Di ,ooter
5 /engan cara yang sama membuat di6 Menu Bar
7langkah no. '* 8 '+90 buatlah di6 ,ooter dengan
definisi style sbb. :
8 / : footer
8 !ype ;; ?i@e : 1* pi-el
8 #o- ;; <idth : +,* pi-el0 $lear : both0 )adding : (
pi-el0 Margin ;; !op : *0 >eft : auto0 3ight : auto0
#ottom *
8 #lock ;; !e-t align : center
5 !ambahkan teks : $opyright A 2*1' ilmu#iner.com
Rudi Hartanto
'.: Menguba& Style /1
1. Klik
Rudi Hartanto
'1: Menguba& Style /1 4lanj56
1. Klik
2. )ilih
&. Klik
'. Klik
Rudi Hartanto
'!: Menguba& Style /1 4lanj56
1. si
2. "mbil warna dari
warna daun
&. Klik
Rudi Hartanto
'"5 Membuat Style untuk ID 9menu
1. Klik
Rudi Hartanto
'$5 Membuat Style untuk ID 9menu 4lanj56
1. Klik
2. si
&. Klik
'. Klik
Rudi Hartanto
''5 Membuat Style untuk ID 9menu 4lanj56
1. )ilih
2. )ilih
&. Klik
'. Klik
Rudi Hartanto
'(: Menamba& :ditable 1egion
1. #lok teks lalu
hapus
2. Klik
&. Klik
'. Klik
Rudi Hartanto
'*: Menamba& :ditable 1egion 4lanj56
1. si 2. Klik
?ampai langkah ini0
pembuatan halaman
template selesai0 selan%utnya
adalah pembuatan halaman
web dari template
Rudi Hartanto
'+: Menamba&kan /alaman Baru untuk Site
1. Klik 2. Klik
&. Klik
'. Klik
(. Klik
.. Klik
+. ?impan
file dengan
nama :
inde-.html
Rudi Hartanto
'-: Buat /alaman;&alaman 7ain
5 !ambahkan halaman lain menggunakan langkah (,.
=alamannya antara lain :
8 ?er6ices
8 "bout Bs
8 $ontact Bs
Rudi Hartanto
(.: Membuat 7ink ke /alaman;/alaman
5 ?etelah semua halaman %adi0 baru membuat link
8 Kembali ke file template
8 Blok salah satu teks pada menu bar
8 )ada panel %roperties0 klik icon gambar <older warna
kuning
8 )ilih file yang dimaksud0 pada window yang terbuka lalu
klik CK
8 Blangi langkah yang sama untuk link lainnya
Rudi Hartanto
Tips
5 Bntuk mengubah tampilan0 ubahlah file templateD
nya. ?aat menyimpan0 pilihlah pilihan update %ika
diminta0 agar semua halaman web secara otomatis
berubah sesuai dengan templateDnya
5 ?eringDseringlah melakukan E?a6eF pada template0
halaman web0 dan $??
Rudi Hartanto
Sekian & Terima Kasih
Copyright ilmuBiner
All rights reserved