Cara membuat WebSite Profesional bagian2

Cara Membuat Dasar2Web Site Profosional  Ke 2(Dilengkapi dengan Gambar).

Sallam Pembaca

Pada posting kali ini saya akan melanjutkan cara membuat Web site profesional bagian ke 2 melanjutkan artikel sebelumnya dengan judul yang sama bagian 1.

Lanjutan desain ini kita akan memakai Program Macromedia Dreamweaver 08.Dengan Program ini kita langsung bisa membuat tag html.

Mari kita buka file rancangan kita sebelumnya di Drive My document Folder Rancangan web: My document=>rancangan web.  Klik open. Akan Nampak  2file. Tediri dari  1. Image dan

 2. Indext html seperti gambar berikut.

1.Gambar isi folder rancangan web.

Selanjutnya  kita akan membuka file Indext html mengunakan Adobe Dreamweaver. Karena kita akan membuat content sesuai Tombol navigasi ( .aktipkan program  Macromedia Dreamwaver anda).

Kalau di computer anda belum terinstal program ini, silahkan doewnload dulu versi trialnya. Dan Install di computer yang anda pakai.

Setelah Program Macromedia Dream Weaver anda aktipkan akan tampil halaman sbb.

2.Gambar tampilan Macrimedia Dreamweaver

Agar lebih mudah  Amati layar kerja Dreamweaver. Dan letak menu2 nya juga palet /jendela property /action/time line.sbb

3.Gambar layout:Menu Bar, Menu INSERT/  Tab Layout,Jendela Properti,jendela Action

Kalau salah satu jendela yang mahu anda gunakan belum tampak,kliklah menu Window di menu bar dan carilah jendela yang anda perlukan di layar sub menu di bawah menu Window. Dan klik lah sub menu tsb.

Selanjutnya Klik File=>open

Buka /pilih file indext html di folder rancangan web.  Lalu klik open    (My Document=>folder Rancangan Web=>indext html )

Akan tampil Image sbb ,dilayar kerja Dream Weaver anda.

4.Gambar Tampilan Indext Html

Kliklah tab layout di atas untuk menampilkan bidang2 slice dan ukuran2nya. Untuk melihat ukuran kotak2 slice ,Anda juga bisa klik icon kuning di sebelah kanan kolom (bg ) ,yang ada di bagian bawah jendela property.setelah anda klik brows, akan tampil gambar image2 seperti gambar dibawah.(gambar 5a)

5.lihat gambar jendela Properti berikut

5a.gambar bagian2 image hasil slice(gmbr 5a)

Sekarang Kita akan Mulai membuat Conten untuk Tombol Menu Home.Kita akan menghapus bidang gambar yang kosong .untuk membuat text Home html.Kenapa bidang kosong harus di hapus.? Karena bidang kosong ini berisi mode Image.yang hanya bisa di edit dengan Photoshop.

6.Gambar bidang kosong yang akan di hapus dulu dan diganti table.

Klik di bidang kosong. Dan Amati di jendela property.

Ternyata bidang kosong itu berisi image 016 gif  dengan size  W=   706  dan   H=540 ( mungkin ukuran dan nomer slice di rancangan anda berbeda karena pembuatan ukuran slice hanya dengan perkiraan,dan urutanya juga bisa berbeda antara saya dan anda).

Catat size tersebut. Setelah bidang tsb di delete anda harus memasukan size ini kembali di property.. Selanjutnya  dalam keadaan area tsb aktip, hapus bidang gambar tsb dengan menekan tombol delete di key board anda.

Bidang yang terhapus tadi gantilah dengan table.dengan klik Insert=> table…

di kotak isian , Isilah :  row=1…,Colomi=1…, width =80 percent

Silahkan tulis content anda di kolom table yang ditandai garis titik2 merah. untuk halaman

indext html nantinya file ini akan di link dari tombol navigasi HOME

Contoh lihat gambar sbb.

7.gambar 

Sebagai  contoh ketiklah seperti Text d ibawah ini. atur jenis font yang anda sukai juga atur size dan warna nya (pangaturan font ada di jendela Property).

Selamat datang di situs kami.

Terima kasih telah berkunjung di web info ini. Web ini selain sebagai media imformasi juga menyediakan panduan2 atau tutorial,yang di kemas di dalam ebook2, maupun artikel bebas yang di tulis di halaman info…….dst dst dst.

Setelah artikel/ conten ini selesai simpan di folder "rancangan web" dengan nama file “indext html” dengan klik save.

Selanjutnya klik File-> save As. Namai File copy ini Dengan  nama “Product html”.halaman ini  digunakan untuk membuat content yang ber judul Product Kami ...memakai copy dari halaman content sebelumnya (yaitu indext html)..

Hapuslah text Selamat datang  gantilah dengan Tulisan Product kami lihat contoh di bawah ini

PRODUCT KAMI

Selain artikel2 yang saya tulis di b=halaman info, kami juga telah menulis pandiuan2 dalam bentuk ebook yang bisa anda download setelah anda masuk member…dst,dst

……

Setelah selesai simpan file ini di folder " rancangan web” dengan nama “Product .html”

Dengan cara yang sama,:Selanjutnya klik File-> save As. Namai File copy ini Dengan  nama “Pandua.html”.halaman ini  untuk membuat content yang ber judul “Panduan” memakai copy dari halaman content sebelumnya (yaitu product. html)..

Panduan Bisnis bagi pemula

Panduan ini di tujukan bagi pemula yang ingin tahu tentang peluang2 di Internet dan ingin memanfaatkan peluang2 tsb.………..dst ..dst

Setelah conten tsb selesai simpan filenya  di folder “ Rancangan web“dengan nama”panduan.html”

Dengan cara yang Sama buat juga Content file:Info Bisnis ,member, contact dan Detail product.

Sekarang tiba saatnya kita mengatur link sesuai tombol2 Navigasi atau tombol2 tambahan bila di perlukan.Buka File “Indext .html” anda perhatikan caranya:

Klik di tombol “HOME” sampai tombol ini tepilih dengan tanda ada kotak dan titik2 bujur sangkar kecil disekelilingnya. Setelah itu per hatikan kolom  link di jendela property.

8a.Gambar jendela Properti a.

 8b.Gambarjandela properti b

Dikolom Link,..Tulis saja indext.html. Cara lain ialah:klik icon kuning di samping  kolom link. Setelah ada tampilan pilihan klik brows. akan tampil gambar2 image sbb.

9.gambar2 Image hasil slice.

Lalu pilihlah Image HOME lalu klik ok . di kotak link akan otomatis terisi Indext.html.

Dengan cara yang sama klik tombol navigasi PRODUCT. Isikan text “product. Html” di kotak link dalam jendela Properti. Selanjutnya buatlah link2 semua tombol navigasi yang ada , seperti cara2 diatas. Setelah itu bisa anda coba di browser anda. ) Open memakai Google chrome atau Internet Explorer.

Sekian dulu teman2, tutorial di postingan kali ini. Silahkan mencoba. mudah2an bermanfaat.

Tunggu tutorial selanjutnya bagaimana (Cara membuat Form Kontak,Form Login. Juga pengenalan script PHP,juga Data basis..di Mysql).

Sallam Gumilar.H