RSS

Jumat, 11 Desember 2009

Belajar Frontpage 1

Kalo anda memutuskan untuk membuat website (disarankan demikian untuk bisnis IrMa – baca disini alasannya!), dan setelah anda menulis beberapa artikel dan membeli domain plus hosting…sekarang waktunya anda membangun website anda dan mempublishnya ke dunia.

Untuk beberapa posting ke depan aku akan memberikan tutorial untuk program pembuatan website (karena aku tahunya hanya Frontpage, hanya program Frontpage aja yang aku bahas). Sekarang memang Frontpage sudah ga ada lagi dalam Microsoft Office, tapi teman-teman bisa mencari versi portabelnya di internet. Aku punya versi portabelnya (langsung dalam bentuk .exe dan bisa disimpan di flashdisk supaya ga menuh-menuhin memory), dan kalo anda memerlukan, aku bisa mengirim dalam CD asal anda ganti ongkos kirimnya ya…

Aku hanya menjelaskan basic-basicnya aja, sisanya bisa anda otak-atik sendiri.

Pertama-tama anda harus bikin table, karena website itu akan terdiri dari tabel-tabel. Caranya cari “Table” di menu bar, lalu klik “Insert” kemudian “Table”. Setelah menu terbuka, anda disuruh menentukan:

Size : Rows (banyaknya baris, untuk sementara kita isi 4), dan Columns (banyaknya kolom, kita isi 4).

Borders: biasanya aku tidak menggunakan border, jadi kita isi 0.
Background: kita biarkan saja sesuai defaultnya yaitu putih. Nanti kita bisa mengotak atik lebih lanjut.

Kalo udah, tekan tombol OK

Taraaa…anda sekarang punya table yang berisi 4 baris dan 4 kolom. Masing-masing kolom atau baris itu akan disebut “Cell”. Untuk mengedit suatu cell cukup menempatkan kursor di cell ybs atau menempatkan kursor di pinggir garis cell hingga muncul tanda , lalu kliklah, maka cell tsb akan ter-block, lalu klik kanan mouse anda, dan pilih “Cell Properties”.

Untuk mengubah lebar atau besar cell, tinggal men-drag kursor anda di garis-garis cell (sama kayak MS Excel). Untuk menentukan layout, cari “Cell Properties”, dan tentukan horizontal alignment serta vertical alignment-nya. Pilihan verticalnya adalah top (tulisan atau gambar ditempatkan di paling atas cell), center (di tengah-tengah cell), atau bottom (di paling bawah cell). Pilihan horizontal: left (rata kiri), center (di tengah) right (rata kanan).

Untuk website yang minimalis, biasanya table kolom paling kiri adalah untuk sidebar. Baris paling atas untuk header. Kolom kedua dari atas dikosongi untuk jarak yang memisahkan header dengan body. Kolom ketiga bisa langsung untuk body, atau kalo anda suka sidebar horizontal, anda bisa menempatkan sidebar itu di kolom ini, lalu bodynya di kolom 4.

Sedang kolom kedua dikosongi untuk jarak antara sidebar dan body. Kolom ketiga untuk body, dan kolom paling kanan untuk jarak saja supaya tulisan kita ga terlalu mepet ke kanan. Otak-atik dulu lebar kolom dan baris ini [scroll ke bawah buat lihat hasilnya].

Header
Sekarang kita berada di baris cell paling atas. Anda bisa membuat header sendiri (kalo aku biasanya minta tolong teman), tapi anda bisa membuat yang sederhana dengan mewarnai kolom.

Pertama-tama block seluruh cell di baris paling atas, klik kanan, pilih “Merge Cell” sehingga seluruh cell teratas menjadi satu kesatuan yang akan dipakai sebagai header. Lalu klik kanan mouse, pilih “Cell Properties”, cari “Background”, dan pilih “color” yang dikehendaki. Aku pilih warna ungu. Setelah itu tekan OK, dan cell teratas anda sekarang sudah berwarna. Tinggal menuliskan nama website anda. [scroll ke bawah untuk liat hasilnya].

Sidebar horizontal
Kalo anda ingin menambah sidebar horizontal, pergilah ke baris cell nomor 3. Misalnya anda mau menambahkan 3 menu, maka klik kanan mouse, pilih “Split Cell”, dan isi jumlah cell = 3. Tambahkan menu-menu anda di ketiga cell yang sudah terbentuk. Scroll ke bawah untuk liat hasilnya.

Body teks
Sekarang buka file artikel yang sudah anda buat di MS Word. Copy semuanya, lalu paste ke kolom ketiga, baris ke 3 atau 4 sesuai pilihan anda. Lalu jangan lupa mensetting layout cell-nya ya…

Sidebar vertical
Karena sidebar ini berisi link-link menuju ke halaman-halaman artikel anda, maka biasanya diberi warna yang berbeda dari body teks agar menarik perhatian. Di sini aku pilih warna ungu muda, sama dengan header.

Akhirnya, seperti inilah tampilan sederhana website kita yang kita bikin pake Frontpage. Ga sulit kan???

klik untuk memperbesar gambar

Selanjutnya, tunggu postingku yang akan datang, yang mengulas tentang cara memasukkan gambar, membubuhkan link dan HTML code.

5 komentar:

Unknown mengatakan...

waduh, bener2 kayak ngeles nih.

Laksamana Embun mengatakan...

Thanks mbak udah di psng.. Link mbak yg mana yg mau di psng di blog saya?

sibaho way mengatakan...

situs yang pake frontpage nih emang enteng banget ya mbak ?

Fanda Classiclit mengatakan...

@Laksamana Embun: Terserah mau yg mana. Yg ini jg boleh.

@Sibaho: Iya enteng, asal gambar jgn terlalu banyak

didi mengatakan...

salam kenal..

Posting Komentar

Catatan: Hanya anggota dari blog ini yang dapat mengirim komentar.