Hai teman-teman...!!! Kali ini saya akan memposting sebuah tutorial di website kami Pelajaran Online ini, setelah hampir berminggu-minggu tidak memposting di website ini. Alasan saya tidak memposting itu di karenakan adanya urusan yang harus di selesaikan. Nah, Judul postingan tutorial saya kali ini adalah "Bagaimana Cara Membuat Template Website Sederhana Dengan Macromedia Dreamweaver 8".
Untuk teman-teman pemula seperti saya, yang baru terjun kedunia computer, sebelum kita lanjut ke tutorial "Bagaimana Cara Membuat Template Website Sederhana Dengan Macromedia Dreamweaver 8", alangkah baiknaya kita mengenali si website itu sendiri. Langsung saja apa sih itu website?
Website adalah suatu kumpulan-kumpulan halaman yang menampilkan berbagai macam informasi teks, data, gambar diam ataupun bergerak, animasi, suara, video maupun gabungan dari semuanya, baik itu yang beersifat statis maupun yang dinamis, yang dimana membentuk suatu rangkaian bangunan yang saling berkaitan dimana masing-masing dihubungkan dengan jaringan halaman atau hyperlink.
Nah, kalo kita sudah mengenali si website itukan enak. Kan seperti pepatah tak kenal maka tak saying hehe... mungkin setelah kenal si website, tanpa basa-basi lagi kita langsung saja ke tutorial "Bagaimana Cara Membuat Template Website Sederhana Dengan Macromedia Dreamweaver 8". Yaudah ikuti langkah-langkahnya :
Langkah pertama tentu saja kita harus membuka aplikasi Macromedia Dreamweaver 8 nya.
Sebelum kita berlanjut ke proses pembuatan template website-nya, saya sarankan teman-teman untuk membuat folder websederhana dan images. untuk folder websederhana itu fungsinya untuk penyimpanan file tamplate yang akan kita buat nanti dan folder images fungsinya untuk penyimpanan desain gambar Header templatenya. oh iya saya lupa teman-teman juga harus sudah membuat gambar headernya entah itu dari aplikasi photoshop, coreldraw, flash dan lain-lain dengan resolusi 1061x140. Lalu header tersebut simpan di folder images tadi. Lihat contoh dibawah ini :
setelah membuat foldernya dan gambar headernya silahkan klik html di lembar kerja aplikasi Macromedia Dreamweaver 8 nya.
Lalu pilih design => insert => table => lalu atur settingan seperti gambar di bawah ini, lalu klik ok.
setelah klik ok, maka seperti inilah tampilan awal dari kerangka website sederhananya.
Untuk baris yang pertama itu untuk Header Web, Nah, langsung saja kita buat headernya dengan cara, letakan kursor mouse dibaris pertama => klik insert => images => lalu pilih gambar header yang sudah teman-teman buat tadi yang di simpan difolder images => isi alternate text dan long description, lalu klik ok.
Setelah itu untuk baris kedua kita akan membuat menu bar, letakan kursor dibaris kedua => klik insert => pilih table => atur settingan seperti gambar dibawah ini =>klik ok. Kemudian sesuaikan ukuran menu barnya.
Selanjutnya, kita beri nama kolom menu barnya seperti gambar dibawah (note: jika teman-teman membuat tema templatenya berbeda dengan tema template yang saya buat, teman-teman tak perlu mengikuti nama-nama menu bar yang saya buat seperti gambar dibawah, tetapi silahkan teman-teman buat sesuka hati dan sesuai kebutuhan tema website teman-teman) dan jika teman-teman ingin merubah warna teks nama menu bar, warna background dan bordernya silahkan lihar gambar di bawah ini.
Baris ke tiga kita buat dua kolom, dimana yang satu buat konten dan satunya lagi buat side bar Media Social, caranya klik split cell => atur settingan split cellnya seperti gambar dibawah ini => lalu ok
Selanjutnya kita akan membuat side bar Media social dibaris ke 3 dikolom sebelah kanan, langsung saja kolom sebelah kanan tersebut ketik nama "Social Media" => lalu setelah itu kita buat kolom untuk nama-nama social media. Caranya, klik dikolom social media tadi=> klik insert => klik table => atur settingan seperti gambar dibawah ini => klik ok.
Lalu ditiap kolom-kolom tersebut ketik nama-nama social media seperti Facebook, Twitter, Google+, Email dan Youtube. seperti gambar dibawawah ini. Dan Jika teman-teman ingin mengubah warna teks semua sosial media, warna background, dan bordernya caranya sama seperti tadi di atas.
Terakhir baris yang ke empat itu untuk footer, ya udahlah untuk footer kita isi dengan simbol CopyRight saja. Caranya, ikuti langkah-langkahnya seperti gambar dibawah ini.
dan inilah hasil dari template website sederhana yang telah kita buat tadi.
Setelah itu kita simpan, klik file => Save As => isi file name-nya dengan index.html => lalu atur posisi lokasi penyimpanannya di folder websederhana yang telah kita buat tadi => klik save.
Untuk menjalankan template website sederhana yang kita buat tadi silahkan buka dengan
mozilla firefox, lalu tekan F12.
Semoga Postingan saya kali ini bisa bermanfaat untuk teman-teman, oh iya silahkan teman-teman pemburu ilmu pengetahuan kunjungi postingan kami yang lainnya, yang pastinya mengedukasi dan bermanfaat. Ok Terima Kasih.
Untuk teman-teman pemula seperti saya, yang baru terjun kedunia computer, sebelum kita lanjut ke tutorial "Bagaimana Cara Membuat Template Website Sederhana Dengan Macromedia Dreamweaver 8", alangkah baiknaya kita mengenali si website itu sendiri. Langsung saja apa sih itu website?
Website adalah suatu kumpulan-kumpulan halaman yang menampilkan berbagai macam informasi teks, data, gambar diam ataupun bergerak, animasi, suara, video maupun gabungan dari semuanya, baik itu yang beersifat statis maupun yang dinamis, yang dimana membentuk suatu rangkaian bangunan yang saling berkaitan dimana masing-masing dihubungkan dengan jaringan halaman atau hyperlink.
Nah, kalo kita sudah mengenali si website itukan enak. Kan seperti pepatah tak kenal maka tak saying hehe... mungkin setelah kenal si website, tanpa basa-basi lagi kita langsung saja ke tutorial "Bagaimana Cara Membuat Template Website Sederhana Dengan Macromedia Dreamweaver 8". Yaudah ikuti langkah-langkahnya :
Langkah pertama tentu saja kita harus membuka aplikasi Macromedia Dreamweaver 8 nya.
Sebelum kita berlanjut ke proses pembuatan template website-nya, saya sarankan teman-teman untuk membuat folder websederhana dan images. untuk folder websederhana itu fungsinya untuk penyimpanan file tamplate yang akan kita buat nanti dan folder images fungsinya untuk penyimpanan desain gambar Header templatenya. oh iya saya lupa teman-teman juga harus sudah membuat gambar headernya entah itu dari aplikasi photoshop, coreldraw, flash dan lain-lain dengan resolusi 1061x140. Lalu header tersebut simpan di folder images tadi. Lihat contoh dibawah ini :
setelah membuat foldernya dan gambar headernya silahkan klik html di lembar kerja aplikasi Macromedia Dreamweaver 8 nya.
Lalu pilih design => insert => table => lalu atur settingan seperti gambar di bawah ini, lalu klik ok.
setelah klik ok, maka seperti inilah tampilan awal dari kerangka website sederhananya.
Untuk baris yang pertama itu untuk Header Web, Nah, langsung saja kita buat headernya dengan cara, letakan kursor mouse dibaris pertama => klik insert => images => lalu pilih gambar header yang sudah teman-teman buat tadi yang di simpan difolder images => isi alternate text dan long description, lalu klik ok.
Setelah itu untuk baris kedua kita akan membuat menu bar, letakan kursor dibaris kedua => klik insert => pilih table => atur settingan seperti gambar dibawah ini =>klik ok. Kemudian sesuaikan ukuran menu barnya.
Selanjutnya, kita beri nama kolom menu barnya seperti gambar dibawah (note: jika teman-teman membuat tema templatenya berbeda dengan tema template yang saya buat, teman-teman tak perlu mengikuti nama-nama menu bar yang saya buat seperti gambar dibawah, tetapi silahkan teman-teman buat sesuka hati dan sesuai kebutuhan tema website teman-teman) dan jika teman-teman ingin merubah warna teks nama menu bar, warna background dan bordernya silahkan lihar gambar di bawah ini.
Baris ke tiga kita buat dua kolom, dimana yang satu buat konten dan satunya lagi buat side bar Media Social, caranya klik split cell => atur settingan split cellnya seperti gambar dibawah ini => lalu ok
Selanjutnya kita akan membuat side bar Media social dibaris ke 3 dikolom sebelah kanan, langsung saja kolom sebelah kanan tersebut ketik nama "Social Media" => lalu setelah itu kita buat kolom untuk nama-nama social media. Caranya, klik dikolom social media tadi=> klik insert => klik table => atur settingan seperti gambar dibawah ini => klik ok.
Lalu ditiap kolom-kolom tersebut ketik nama-nama social media seperti Facebook, Twitter, Google+, Email dan Youtube. seperti gambar dibawawah ini. Dan Jika teman-teman ingin mengubah warna teks semua sosial media, warna background, dan bordernya caranya sama seperti tadi di atas.
Terakhir baris yang ke empat itu untuk footer, ya udahlah untuk footer kita isi dengan simbol CopyRight saja. Caranya, ikuti langkah-langkahnya seperti gambar dibawah ini.
dan inilah hasil dari template website sederhana yang telah kita buat tadi.
Setelah itu kita simpan, klik file => Save As => isi file name-nya dengan index.html => lalu atur posisi lokasi penyimpanannya di folder websederhana yang telah kita buat tadi => klik save.
Untuk menjalankan template website sederhana yang kita buat tadi silahkan buka dengan
mozilla firefox, lalu tekan F12.
Semoga Postingan saya kali ini bisa bermanfaat untuk teman-teman, oh iya silahkan teman-teman pemburu ilmu pengetahuan kunjungi postingan kami yang lainnya, yang pastinya mengedukasi dan bermanfaat. Ok Terima Kasih.
0 Komentar