Create Your Own WebSite With Marcomedia Dreamweaver

Pertama-tama saya berterimakasih kepada Mr. Paul Trani dan lynda.com
atas video turtorialnya
Oke let's do it..


yang kamu butuhkan hanya

1. Marcomedia Dreamweaver 8 (ini yang ane pake kalau dalam video
turtorial yang ane lihat pake cs 5) Download
Here
2. Folder penyimpanan file2 website kita
3. dan hanya kesabaran dan ketekunan [You must be registered and logged in to see this image.]


First buat baru HTML, sebelumnya kita harus
tau tentang HTML itu apa , CSS itu apa dll.

Selanjutnya kita isikan page kosong itu dengan conten apa saja...
Misal :


Pendahuluan

Spoiler:

Copy terus Go to Dreamweaver pilih menu edit > klik paste special
disana ada 4 pilihan kita pilih yang ke 3 tanpa styles
akan terlihat seperti ini

[You must be registered and logged in to see this link.]

(agan bisa ganti addres twitter sama email)

Selanjutnya kita mark/tandai PENDAHULUAN untuk menjadi Heading 1 caranya
lihat ke properties dan pilih formatnya menjadi Heading 1, sama dengan
untuk kata PENUTUPAN kita jadikan Heading 2 untuk memudahkan pembaca
untuk membacanya [You must be registered and logged in to see this image.], sementara kata yang
ada di bawahnya itu jadi paragraph. setelah itu kita ganti Title pagenya
menjadi "CyberBlizs Site" tapi terserah aja :D, oke kita save pagenya
kita namai pagenya menjadi index.html karna page tersebut akan menjadi
Home Page kita :) savenya di Folder penyimpanan file2 website agan.

Setelah itu kita akan buat CSS , sebelumnya apa itu CSS ( Cascading
Style Sheets ), css adalah bahasa yang digunakan untuk menggambarkan
desaindari sebuah dokumen html. utntuk selengkapnya agan bisa search di
mbah google [You must be registered and logged in to see this image.]

Oke selanjutnya Create New CSS, klik Page
Properties kita pilih fontnya saya pakai "Arial, Helvectica,dll"
kemudian kita pilih Text Colornya kita pilih Dark Grey #33333 dan
kemudian kita pilih juga Background Colornya kita pilih #FFFFCC.(#FFFFCC)

Setelah itu klik tab
Heading, Heading 1 pilih ukuran font 24 Color #006666 Heading 2 pilih ukuran font 16 Color #009966. Kemudian pilih tab
Links, Link Colour= #009966
Visited Colour= #006666 Rollover
Links= #00CC99 Active
Links= #FF0000 Underline
Style= Show Underline only on rollover.
akan terlihan seperti ini

[You must be registered and logged in to see this link.]


oke kita akan tes dalam browser sebelumnya save terlebih dahulum, pilih
tab File > Preview in Browser > terserah agan mau pilih yang
mana..[You must be registered and logged in to see this image.] dan lihatlah hasilnya
bagus ga?? belum dong masih ada yang kurang [You must be registered and logged in to see this image.]



Selanjutnya Modifty CSS,
kurang bagus ya web agan?? ayo kita modif
css kita :D. lihat ke CSS properties klik All terus kita doble klik
a:hover kemudian pilih colornya menjadi #FFFFF putih terus jangan
centang Underline, oke terus ke tab background pilih background colornya
jadi #009966 terus klik
ok, kemudian klik CSS a:active terus ganti color menjadi #FFFFF terus
ke tab background pilih background colornya jadi #FF0000 dan kemudian lihat lah web anda di
Preview in Browser sama aja kan?? lihat dulu dengan link agan.. terus
coba tandai terus klik berubahkan :D

Selanjutnya Customizing specific content
using CSS Class, kemudian di tab CSS kita buat New CSS Rules
disana ada 3 pilihan kita pilih Class dan namanya "highlight" klik ok
dan akan muncul menu cssnya, Font Syle : Italic Color
: #FF6600 Font Weight : Bold, oke kita tandai kata "jika ada hal – hal
yang disalahgunakan setelah membaca e-book ini penulis tidak bertanggung
jawab" di properties kita pilih Classnya highlight yang kita tadi buat.

Selanjutnya Creating a CSS Based-layout,
oke panjang juga thread ini semoga yang bacanya ga pusing yaa , oke
langsung klik tab Windows > Insert > Layout terus pilih Draw Layer
kemudian buat di isi pagenya terus klik kotak di atas kanannya Layer,
kan ada di Properties ganti nama Layer1 jadi content terus tandai semua
kata2 ke content dengan cara di drag..

[You must be registered and logged in to see this link.]

nah kita lihat di Browser save terlebih dahulu.. lihat sesudahnya lebih
rapihkan?? tapi sebelah kanannya ga rapih ya? ayo kita rapihkan :D

Selanjutnya Modifity #content, double klik
#content pada CSS menu oke pilih tab Box kita change marginnya jangan
check list Margin, Top= 100 Right= Auto Bottom= 0 Left= Auto. kemudian
pilih tab Positioning terus Positionnya Hapus aja jadi kosong aja terus
klik OK.. oke kita preview di browser lihat sesudahnya kita resize
browser kita kelihatan lebih rapihkan ??

Terakhir Create Footer, kita akan membuat
footer ya untuk info atau copyrightnya turtorial yang satu ini ane yang
buat :D langsung aja kita akan buat new css, terus pilih class beri nama
footer oke yang ini agan kreasiin sendiri2 kalau udah klik ok terus
agan ketik di bawah content contoh " Copyright © CyberBlizs | Templates
by Irfan Fauzi " terus propertis classnya pilih footer jadi deh :D

Sumber:
[You must be registered and logged in to see this link.]