Dasar – dasar Mendesign Website Dengan Microsoft FrontPage 2003

Uzuma Doneza Here.. setelah melakukan editing foto, saya kembali lagi di dunia kegelapan dengan membawa oleh-oleh untuk penggemar setia Nightwalker Team. dengan secangkir kopi dan rokok saya berfikir tutorial apa yang akan saya beri untuk Nightwalker tercinta ini. dan Pada Suatu malam hari saya melihat sesosok bufferdie "Muka Kusut" + "rada Pusing" dengan amat serius membaca kode-kode php, html, jquery,dkk. dihadapan Laptop tercintanya, saya mendapatkan ide bagaimana jika saya berbagi pengalaman mendesign web dengan menggunakan Microsoft FrontPage 2003.
so dalam tutorial ini saya akan menjelaskan dasar - dasar mendesign website dengan Microsoft FrontPage tersebut.

1. Oke yang kita lakukan sekarang adalah buka Program Microsoft FrontPage Anda.
dan pilih table- layout tables and cells
pada Layout Tables and cells box anda bisa memilih langsung di bagian "Table Layout" dan anda juga bisa membuat Layout sendiri dengan cara memilih gambar seperti dibawah ini.

Pada Bagian Yang berwarna "Merah" (pada Gambar) = itu digunakan untuk membuat Layout Table, dan bagian bewarna biru digunakan untuk membuat layout cell. Jadi sebelum kita membuat layout cell untuk web kita, kita diharuskan untuk membuat layout table terlebih dahulu.
Oke tapi dalam tutorial ini saya mengambil layout dari "Table Layout" aja supaya gag terlalu banyak ngejelasinnya. :)
Pilih layout sesuai selera anda karena "Pria Punya Selera" disini saya memilih layout seperti gambar dibawah ini.

klik pada layout kita dan pada bagian seperti gambar dibawah ini merupakan ukuran dari layout cells kita (warna Biru).

oke disini saya akan membuat web yang amat sederhana,
pilih satu cells dari layout kita trus klik kanan - cell formatting. saya ingin menggunakan borders dalam tutorial ini.

color: merupakan warna border.
Gambar dibawah Apply itu merupakan bagian yang ingin kita kasih border
saya menggunakan warna ijo pada tutorial ini.
setelah membuat border warna ijo saya ingin membuat background dalam web ini menjadi warna hitam.
yaitu dengan cara:
Format - Background
pada bagian background saya memilih warna hitam sesuai dengan "kegelapan" dan warna "kopi" tercinta Nightwalker.haha
haha, layoutnya udah mulai kebentuk.

oke bukan web klo gag ada "button"
nih cara buat nambahin button di layout kita.
Insert - Interactive Button
pilih button sesuka hati anda dikarenakan "gratis"
dan Pada bagian "Text" merupakan nama dari button anda.

dalam tutorial ini saya menggunakan "Frame" dalam layout saya, mengapa saya menggunakan frame, dikarenakan saya pengen webnya gag berat.
oke pilih cells dari layout anda untuk tempat "frame" anda.
dan pilih
"insert - inline Frame"
dan tinggal kamu resize adjah ukurannya sesukamu..

selelah itu kamu pilih "new page" pada button di InlineFrame
karena frame itu membuat halaman baru jadi background framenya bewarna "putih" sedangkan frame pada web kita "hitam"
jadi cara gantinya sama seperti tadi : klik Framenya Pilih "Format-Background"
OUpss Lupa..
Save aja dulu Layout yang udah dibikin, caranya sperti biasa2nya..hwakwak...
setelah itu bikin New File Lagii..
"File-New"
isii tu tulisan apa aja dah..
.ganti backgroundnya lagi cara "sama"
setelah selesaii save dengan nama "Home" - (nama gag Wajib kayak ntu)

Sekarang kita link halaman home dilayout kita.
pilih button (klik kanan- Hyperlink)

oke Minum Kopi dulu ,,
dan pilih "home.htm" tempat kita menyimpan Halaman home tadi.

perhatikan gambar diatas , setelah mencari tempat home.htm tadi, kita pilih Target Frame dan pilih "I1" itu menyatakan bahwa home.htm akan ditampilkan pada Inline Frame Kita tadii.. :) setelahitu, save dan kamu coba tes hasil web kamu di broser atau preview bagian bawah kiri pd Ms. Front page..
coba klik button “Home” secara otomatis dia akan menampilkan home.htm di Frame
yang kita bikin tadi.
Maaf Previewnya gag dibikin kebetulan saya bikinnya jam 3.00 so bawaan ngantuk,
rokok dan kopi udah abis mana warung gag ada yang buka. Saya kelupaan buat
Screenshot hasilnya, mana hasilnya udah gw apuzz lagii..wkkwkkw
oh iya ini kamu bisa tambahin pada bagian headernya gambar , kamu liat ukuran cells
kamu tadi dan bikin gambar sesuaii cellsnya tadii ya... :)..
sedikit info

no.1 = tampilan design web kita
no.2 = tampilan design dan kode html kita
no.3 = tampilan kode html kita
no.4 = untuk melihat hasil web kita yang telah dibuat. :)
oke saya rasa itu aja dulu oleh - oleh dari saya untuk night walker team kebetulan
kemaren malem begadang ampe pagi sama omz bufferdie dan besoknya pergi ampe
malem, trus bikin tutorial ini jam 3.00 pagi.
Jadi kalo gag jelas tinggal tanya aja, maaf tutorialnya gag terlalu detail...
Hilangkan rasa lelah dan tataplah masa depan yang cerah..
A bad plan is Better than no plan at all...
Uzuma doneza


EmoticonEmoticon