Nagayaaffiliate.com Tutorial Mini Site

  • Uploaded by: Sahid
  • 0
  • 0
  • May 2020
  • PDF

This document was uploaded by user and they confirmed that they have the permission to share it. If you are author or own the copyright of this book, please report to us by using this DMCA report form. Report DMCA


Overview

Download & View Nagayaaffiliate.com Tutorial Mini Site as PDF for free.

More details

  • Words: 3,468
  • Pages: 27
Panduan Membuat SITUS MINI

Bagaimana Anda Membuat Situs Mini dan Menjadikannya Mesin Uang Anda di Internet Yang Bekerja Otomatis Oleh : Nur Sahid CEO : www.NagayaAffiliate.com

Tutorial Singkat, Padat dan Mudah Dipraktekkan

Panduan Membuat Website Mini

License : - FREE E-BOOK “Ebook ini GRATIS untuk setiap Customer yang membeli script Nagaya Affiliate for Minisite di www.NagayaAffiliate.com” Bila anda mendapatkan Ebook ini bukan dari situs di atas, silakan register di www.register.master-bisnis.com

www.master-bisnis.com - Rahasia Sang Jutawan INTERNET

1

Panduan Membuat Website Mini

2

DAFTAR ISI DAFTAR ISI ............................................................................................... 2 BAB 1 PENGANTAR ..................................................................................... 3 A. Apa Itu Situs Mini (Minisite) ........................................................... 3 B. Keuntungan Memiliki Situs Mini ....................................................... 3 C. Persiapan Awal Pembuatan Website Mini ........................................... 3 BAB 2 LANGKAH AWAL ................................................................................ 4 A. Sketsa Kasar ............................................................................. 4 B. Sketsa Kertas ke Sketsa Komputer ................................................... 5 BAB 3 MARI KITA MULAI............................................................................... 6 A. Membuat Tabel ......................................................................... 6 B. Merapatkan Kolom ...................................................................... 8 C. Menggabungkan Beberapa Kolom ..................................................... 8 D. Center Alignment ....................................................................... 9 E. Menghilangkan Tampilan Garis ....................................................... 9 F. Membuat Menu Utama ............................................................... 10 G. Background Menu ..................................................................... 10 H. Penyesuaian Warna Teks dengan Background .................................... 11 I. Hyperlink............................................................................... 12 J. Menulis Hak Cipta ..................................................................... 12 K. Menyimpan Hasil Kerja............................................................... 13 L. Lebar Desain Website ................................................................ 13 M. Mengatur Judul Website ............................................................. 13 N. Mengatur Desain Web Dengan CSS ................................................. 14 O. Membuat Border Tebal pada Bagian Sisi Luar Tabel ............................. 17 P. Membuat Heading dan Sub Heading ................................................ 17 BAB 4 MEMBUAT HEADER ........................................................................... 19 A. EDITING HEADER DENGAN PHOTOSHOP ............................................ 19 B. SAVE AS WEBPAGE .................................................................... 19 C. MENYISIPKAN KE TEMPLATE ......................................................... 20 BAB 5 TESTING WEBSITE............................................................................ 22 A. Testing ................................................................................. 22 B. Upload File ............................................................................ 22 C. Website Mini = Duit = Pasif Income ................................................ 23 BAB 6 PENUTUP...................................................................................... 25

www.master-bisnis.com - Rahasia Sang Jutawan INTERNET

Panduan Membuat Website Mini

3

BAB 1 PENGANTAR A. Apa Itu Situs Mini (Minisite) Situs mini (minisite) adalah situs sederhana yang biasanya hanya berisi 5 halaman seperti : halaman pembuka, contact, about, produk, order. Biasanya untuk situs pribadi/ perusahaan yang ditulis dengan HTML murni atau menggunakan frontpage. Situs ini biasanya hanya bersifat statis dan satu arah. Maksudnya : pengunjung website yang bersangkutan tidak bisa berinteraksi dengan pemiliknya. Sedangkan situs yang dinamis adalah situs yang bisa melakukan interaksi antara pemilik situs dan pengunjungnya, misalnya situs-situs yang menggunakan tehnologi CMS. Selain itu ukuran situs mini sangat hemat, sehingga anda bisa menyimpan rancangan situs mini anda ke dalam disket.

B. Keuntungan Memiliki Situs Mini 1. Tidak perlu investasi yang mahal-mahal 2. Bisa digunakan untuk promosi jati diri anda, misalnya anda mengonlinekan diri anda sendiri melalui situs mini yang berisi profile anda, keahlian dan sebagainya. 3. Bisa menghasilkan duit.

C. Persiapan Awal Pembuatan Website Mini Ada beberapa hal yang harus anda persiapkan sebelum mulai melakukan praktek membuat situs mini : 1. Tidak harus menjadi ahli dalam menguasai tag-tag HTML 2. Software web authoring WYSIWYG, seperti Microsoft Frontpage, NVU, atau Dreamweaver. Dalam praktek kali ini saya menggunakan Frontpage. Semoga anda sudah memilikinya, tapi kalo belum silakan cari teman anda yang memiliki CD Microsoft Office XP installer. Silakan install Microsoft Frontpage-nya saja. 3. Server Mini “DongKRAK” for Windows untuk melakukan ujicoba. Silakan cari di Google dengan keyword “Download Dongkrak server” 4. Program Photoshop. 5. Harus pake Komputer.

www.master-bisnis.com - Rahasia Sang Jutawan INTERNET

Panduan Membuat Website Mini

4

BAB 2 LANGKAH AWAL

A. Sketsa Kasar Sebelum mulai membuat satu buah situs mini, sebaiknya siapkan kertas untuk melakukan corat-coret desain awal. Tapi … Anda tidak perlu melakukannya. Saya sudah mencoretnya di e-book ini. He… he… Perhatikan gambar di bawah ini :

Gambar di atas adalah bentuk desain sederhana dari sebuah website mini dan anehnya lagi bentuk desain model seperti inilah yang banyak dipakai oleh para marketer saat ini. Dalam gambar di atas saya menyediakan 4 blok, yaitu : 1) blok header yang biasa berisi gambar-gambar penarik perhatian; 2) blok menu, yang berisi link-link untuk menuju halaman lain; 3) blok body, tempatnya isi (content) dari website; 4) blok Footer, biasanya berisi informasi hak cipta, hit counter dan informasi update.

www.master-bisnis.com - Rahasia Sang Jutawan INTERNET

Panduan Membuat Website Mini

5

B. Sketsa Kertas ke Sketsa Komputer Cara termudah mengaplikasikan sketsa di atas, dengan menggunakan sistem tabel. Tabel yang dibutuhkan seperti ini :

Blok Header Blok Menu

Blok Body

Blok Footer

Perhatikan gambar di bawah ini :

Contoh situs www.Instan.Master-Bisnis.com yang menggunakan desain ini.

www.master-bisnis.com - Rahasia Sang Jutawan INTERNET

Panduan Membuat Website Mini

BAB 3 MARI KITA MULAI A. Membuat Tabel Akh… kamu! Dari tadi teori melulu … kapan prakteknya …. Ooops! Sabar jek, sekarang juga nyook kita mulai prakteknya… 1. Duduk dengan posisi yang benar, kalo salah duduk ntra selesai praktek anda mumet bin puyeng …. 2. Baca basmalah (baca: bismillahirrahmaanirrahiem) dulu (untuk muslim). 3. Buka program Microsoft Fronpage di menu Program.

Gambar 3.1 Layar Microsoft FrontPage 4. Saat anda membuak frontpage langsung tersedia file kosong, nah selanjutnya anda membuat satu buah table. Tetapi sebelumnya perhatikan kembali tabel yang telah saya buat di atas. Ooops… lihat aja di bawah ini biar gak sakit lehernya…

www.master-bisnis.com - Rahasia Sang Jutawan INTERNET

6

Panduan Membuat Website Mini

7

Dua buah baris atas-bawah

Dua buah kolom kiri-kanan

Saya menyisipkan dua buah kolom di sisi kiri dan kanan body dan dua buat baris pada bagian atas dan bawah body. Tujuannya untuk memperindah saat menuliskan konten pada bagian body, biar gak terlalu merapa ke sisi kiri-kanan atau atas-bawah. Membuat Tabel 5. Pilih menu Insert >> Table >> Insert Table.

6. Masukkan 6 baris (row) dan 3 kolom (column). Klik OK. 7. Selanjutnya tandai masing-masing kolom dengan HEADER, MENU, BODY dan FOOTER untuk memudahkan desain selanjutnya.

www.master-bisnis.com - Rahasia Sang Jutawan INTERNET

Panduan Membuat Website Mini

8

B. Merapatkan Kolom 8. Selanjutnya anda harus menggeser kolom kiri-kanan hingga mencapai ukuran 20 point. Caranya: drag garis pingir dari sel yang ingin anda rapatkan. Perhatikan gambar di bawah ini :

Gambar a. Merapatkan kolom sebelah kiri

Gambar b. Merapatkan kolom sebelah kanan

Gambar c. Hasil Akhir

C. Menggabungkan Beberapa Kolom 9. Berikutnya… Anda harus menggabungkan beberapa sell. Seperti bagian header, menu dan footer. 10. Caranya gimana bung! Ooops!!! …. Tenang jeck. Coba gabungkan (baca: blok 3 sel pada bagian HEADER). Lihat gambar lagi ackh….

Memblok HEADER

11. Selanjutnya klik menu Table >> Merge Cell

www.master-bisnis.com - Rahasia Sang Jutawan INTERNET

Panduan Membuat Website Mini

9

Hasil Penggabungan

12. Lakukan hal yang sama untuk bagian MENU dan FOOTER. 13. OK… Saya anggap komiu sudah menyelesaikannya. Hasilnya seperti gambar di bawah ini:

D. Center Alignment 14. Selanjutnya untuk memperindah penampilannya kela, Anda harus menengahkan (bener gak yaa bahasanya neh!) HEADER, MENU dan FOOTER. Caranya: Arahkan pointer pada bagian HEADER, kemudian klik toolbar center [ Lakukan hal yang sama untuk MENU dan FOOTER.

]

E. Menghilangkan Tampilan Garis 15. Masih di depan computer khan ?? 16. Sekarang sampean kudu menghilangkan (bukan menghapus) tampilan border (garis pinggir) yang pada bagian BODY. Ini bertujuan agar ketika diload oleh browser, garisnya tidak nongol. Jadi lebih enak dilihat mata.

Garis yang harus di non tampilkan

www.master-bisnis.com - Rahasia Sang Jutawan INTERNET

Panduan Membuat Website Mini

10

17. Silakan blok seluruh bagian BODY. Liat gambar mas biar jelas!

18. Silakan klik pada toolbar table, lalu sorot dan carilah (non aktifkan) “inside horizontal border” dan “inside vertical border”.

Non aktifkan bagian ini

Hasil Pekerjaan Anda Hingga Saat ini

F. Membuat Menu Utama Nahh… sekarang praktek membuat menu utama plus memperindahnya. 19. Hilangkan tulisan MENU dan gantilah dengan teks di bawah ini : Home | Order | Portofolio | Contact | Login

G. Background Menu Saya suka dengan warna HIJAU, jadi pada praktek kali ini anda boleh berbeda pendapat dengan saya soal warna. SETUJU … Tapi…. Kalo mau lancer-lancar saja praktikumnya… Ya… Anda harus taklid dengan saya. OK. 20. Klik kanan pada bagian MENU, terus pilih “Cell Properties..”. Pada kotak yang muncul, carilah bagian background, lalu pilih warga green (hijau). Terus akhiri dengan klik OK. Perhatikan gambarnya lagi ….

www.master-bisnis.com - Rahasia Sang Jutawan INTERNET

Panduan Membuat Website Mini

21. Berikan warna yang sama pula pada bagian FOOTER.

H. Penyesuaian Warna Teks dengan Background Anda sekarang memiliki desain MENU dengan warna latar Green. Tapi gak matching dengan warna teksnya saat ini. Warna yang sepadan untuk latar hijau harus lebih terang. Disini hanya ada dua pilihan, putih atau kuning. Keputusan saya : ambil yang kuning aja lah… 22. Blok seluruh teks menu, kemudian pilih toolbar “Font Color” kemudian pilih warna yellow (kuning). Jangan lupa memberi efek tebal (Bold) biar lebih matching.

www.master-bisnis.com - Rahasia Sang Jutawan INTERNET

11

Panduan Membuat Website Mini

23. Terus berilah jenis font Tahoma, dengan ukuran 10pt.

I. Hyperlink Hyperlink adalah cara meloncat ke halaman atau situs atau ke alamat email dalam dokumen HTML. 24. Silakan blok menu “Home”. INGAT! Home saja yach… garisnya gak ikut. 25. Kemudian tekan CTRL+K. Kemudian isikan pada bagian Address : index.html

26. Selanjutnya untuk menu yang lain berilah link menuju halaman sbb: - Order => order.html - Porto folio => porto-folio.html - Contact => contact.html - Login => login.html

J. Menulis Hak Cipta Anda tentu tidak mau kan.. hasil karya anda diakui orang lain. Nah kalo gak mau jangan lupa tulis pada bagian FOOTER peringatan Hak Cipta 27. Silakan ganti tulisan FOOTER dengan : Copyright 2009 www.NamaSitusAnda.com. Hak Cipta Dilindungi Undang-Undang HAKI

www.master-bisnis.com - Rahasia Sang Jutawan INTERNET

12

Panduan Membuat Website Mini 28. Jangan lupa berilah font: Tahoma, size: 9pt, warna: kuning

K. Menyimpan Hasil Kerja Hayooo cepatan disimpan… Ntar mati lampu… Nyesel lhooooo 29. Tekan CTRL+S. Berilah nama index.html

L. Lebar Desain Website Di dunia persilatan desain web, dikenal dua pendekar, yaitu lebar tetap (fix width) dan lebar ikut layar. 30. Saya memilih lebar yang tetap dan saya putuskan untuk membuat desain web dengan lebar 750 pixel. Caranya klik kanan pada table, pilih “Table Properties...”

31. Isikan angka 750 pada bagian “specify width” dan klik opsi “in pixels”. Jangan lupa pada bagian alignment pilih center. Ini bertujuan agar desain web anda tampil di tengah-tengah layar. Klik tombol “OK” 32. Lihat gambar di atas…

M. Mengatur Judul Website Pernahkan anda perhatikan setiap anda mengunjungi sebuah website, pada bagian atas browser muncul judul yang berbeda tiap website. Andapun bisa memberikan judul website untuk webmini anda. Caranya : 33. Klik kanan pada halaman, kemudian pilih “Page Properties…”. Pada bagian title ketikkan teks : Website Mini Yang Pertama Kubuat 34. Klik OK.

www.master-bisnis.com - Rahasia Sang Jutawan INTERNET

13

Panduan Membuat Website Mini

Merubah Judul (title) website.

N. Mengatur Desain Web Dengan CSS Perhatikan pada bagian MENU. Setelah anda memasukkan hyperlink, otomatis teks berubah menjadi warna biru. Jelas warna ini tidak cocok untuk background warna hijau. Cara paling efetif adalah dengan mendefinisikan dalam Style Sheet. Khusus bagian menu, saya berencana sebagai berikut : - Link tetap tampil dengan warna kuning. - Jika link dilalui mouse (disebut: hover) muncul garis bawah. - Jika link aktif (disebut: active) berubah menjadi warna putih - Jika link second alias sudah pernah diklik (disebut: visited) menjadi berwarna putih bergaris bawah. Untuk bagian BODY, saya mau : - Paragraf maupun tabel, memakai font Tahoma dengan ukuran 11pt, dengan warna font black - Pengaturan link pada bagian body sebagai berikut : o Link berwarna biru o hover: berwarna hijau bergaris bawah o visited: berwarna merah 35. Caranya: buka mode HTML. Perhatikan pada baris kode… Oops!!! JANGAN KEBURU PUYENG YAA…. 36. Perhatikan terdapat kode (disebut TAG) seperti di bawah ini: Website Mini Yang Pertama Kubuat

37. Silakan tekan ENTER setelah tag

www.master-bisnis.com - Rahasia Sang Jutawan INTERNET

14

Panduan Membuat Website Mini 38. Kemudian ketik kode-kode sebagai berikut: <style type="text/css"> body { height: 100%; background-color: #0000; } p { font-family:"Tahoma"; font-size:11px; color:#000000 } a { color: #0000FF; font-size : 11px; font-family : Tahoma; font-weight: none; text-decoration : none; } a:link { color: #0000FF; font-size : 11px; font-family : Tahoma; font-weight: none; text-decoration : underline; } a:hover { color: #008000; font-size : 11px; font-family : Tahoma; font-weight: none; text-decoration : underline; } a:visited { color: #FF0000; font-size : 11px; font-family : Tahoma; font-weight: bold; text-decoration : underline; } a:active { color: #FF0000; font-size : 11px; font-family : Tahoma; font-weight: bold; text-decoration : underline; } .menu { color: #FF0000; font-size : 11px; font-family : Tahoma; } a.menu:link { color: #FFFF00; font-size : 11px; font-family : Tahoma; font-weight: none; text-decoration : none;

www.master-bisnis.com - Rahasia Sang Jutawan INTERNET

15

Panduan Membuat Website Mini

} a.menu:hover { color: #FFFF00; font-size : 11px; font-family : Tahoma; font-weight: none; text-decoration : underline; } a.menu:visited { color: #FFFFFF; font-size : 11px; font-family : Tahoma; font-weight: bold; text-decoration : underline; } a.menu:active { color: #FFFFFF; font-size : 11px; font-family : Tahoma; font-weight: bold; text-decoration : underline; }

39. Selanjutnya pada bagian MENU, silakan sisipkan kode sebagai berikut: [Kode ini terdiri atas kode pembuka dan kode penutup].

Related Documents

Mini Tutorial
November 2019 19
Mini Tutorial Gis
June 2020 15
Site
November 2019 39
Site
May 2020 30

More Documents from ""