Makalah Desain web menggunakan dreamweaver 8

  • 39,038 views
Uploaded on

Berisi Tentang Cara Mendesain Web Sederhana Dengan Menggunakan Aplikasi Dreamweaver 8

Berisi Tentang Cara Mendesain Web Sederhana Dengan Menggunakan Aplikasi Dreamweaver 8

More in: Education , Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
39,038
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
197
Comments
1
Likes
56

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Desain Web Menggunakan Dreamweaver 1BAB IPENDAHULUAN1.1 Latar BelakangPerkembangan teknologi informasi pada saat ini khususnya dalam penyampaianinformasi sangat pesat perkembangannya. Hal ini telah menjadi bagian dari kehidupankita sehari-hari, misalnya penggunaan internet sebagai media untuk mendapatkaninformasi. Fungsi komputer sekarang ini bukan hanya untuk melakukan pekerjaan yangbersifat terbatas, seperti mengerjakan tugas kantor, tetapi dengan komputer kita bisamendapatkan informasi yang luas dan berwawasan dari seluruh pelosok penjuru duniadengan menggunakan jasa internet.Penyampaian dan penyebarluasan informasi dengan menggunakan fasilitas jasainternet dan www (world wide web) yang sedang banyak diminati, mulai dari kalanganpelajar, mahasiswa sampai kepada perusahaan yang bergerak dibidang bisnis maupunlainnya. Sekarang ini website bukan lagi sesuatu hal yang asing/tabu. Banyak sekali dinaspemerintahan, sekolah-sekolah, kantor-kantor, instansi- instansi bahkan personal yangmemiliki website, bahkan ada yang bergerak dibidang pembuatan website dan bentuklainnya.Bermacam-macam langkah yang digunakan profesi web untuk membuat suatuhomepage, salah satu tool yang banyak digunakan untuk mendesain sebuah web adalahMacromedia Dreamwever. Macromedia Dreamweaver adalah sebuah HTML editorprofesional untuk mendesain secara visual dan mengelola situs web maupun halamanweb. Bilamana kita menyukai untuk berurusan dengan kode-kode HTML secara manualatau lebih menyukai bekerja dengan lingkungan secara visual dalam melakukan editing,Dreamweaver mambuatnya menjadi lebih mudah dengan menyediakan tool-tool yangsangat berguna dalam peningkatan kemampuan dan pengalaman kita dalam mendesainweb.Selain itu Dreamweaver juga dilengkapi kemampuan manajemen situs, yangmemudahkan kita mengelola keseluruhan elemen yang ada dalam situs. Kita juga dapatmelakukan evaluasi situs dengan melakukan pengecekan broken link, kompatibilitasbrowser, maupun perkiraan waktu download halaman web.
  • 2. Desain Web Menggunakan Dreamweaver 21.2 Tujuan PenelitianAdapun tujuan yang ingin dicapai adalah sebagai berikut:1. Menghasilkan rancangan sistem informasi berbasis web2. Menghasilkan software untuk menampilkan sistem informasi yang berbasis web.1.3 Manfaat PenelitianAdapun manfaat yang dapat diambil dari penelitian ini adalah sebagai berikut:1. Memberikan kemudahan bagi pihak-pihak yang terkait untuk mendapatkaninformasi.2. Membantu meningkatkan mutu pendidikan.3. Manfaat bagi peneliti sendiri dapat menambah pengetahuan tentang sisteminformasi berbasis web dengan menggunakan Macromedia Dreamweaver.
  • 3. Desain Web Menggunakan Dreamweaver 3BAB IIPEMBAHASAN2.1.Macromedia Dreamwever 8Macromedia Dreamweaver 8 adalah sebuah editor HTML professional untukperancangan (design), pengkodean (coding), dan pengembangan situs web, halaman webdanaplikasi web.Versi terbaru macromedia dreamweaver di tahun 2005 adalah macromedia diameter 8yang merupakan penyempurnaan dari versi sebelumnya dan tentu saja semakin mudahdalam penggunaanya. Fasilitas terbaru dari micromedia dreamweaver 8 adalah zoom tooldan guides, panel CSS yang baru, code collapse, Coding toolbar, dan insert flash video.Tidak jauh berbeda dari versi sebelumnya, macromedia dreamweaver 8 mendukungpemrograman Client Side yang terkenal, yaitu Javasript dengan penggunaan yang sangatmudah. Macromedia Dreamweaver 8 juga mendukung pemrograman Script Server Side,seperti Personal Home Page (PHP), Active Server Pages (ASP), ASP.NET, Coldfusiondan Java Server Page (JSP).Universitas Sumatera UtaraMacromedia Dreamweaver 8 merupakan software yang dikenal sebagai software webauthoringtool, yaitu software yang didesain untuk desain dan layout halaman web.Macromedia Dreamweaver 8 telah mengalami banyak perbaikan dan peningkatan dariversi sebelumnya. Macromedia Dreamweaver 8 memiliki user interface yang lebih baikdari versi 4 karena adanya peningkatan kemampuan toolbar sehingga dapat memakaitoolbar yang sudah ada atau menambahkan fungsi baru.Dreamweaver memiliki keunggulan dibandingkan program sejenis lainnya,keunggulan Dreamweaver adalah sebagai berikut : Dreamweaver mempunyai ruang kerja, fasilitas, dan kemampuan yang mampumeningkatkan produktifitas dan efektifitas dalam desain maupun suatu situs web. Fasilitas penyuntingan secara visual dari Dreamweaver memungkinkan untukmenambah desain dan fungsionalitas halaman-halaman Web. Pada Dreamweaver 8 terdapat beberapa kemampuan bukan hanya sebagaisoftware untuk mendesain web saja, tetapi juga untuk menyunting kode sertapembuatan aplikasi Web, antara lain JPS, PHP, ASP, dan ColdFusion. Lebih mudah dan cepat dalam mendesain web karena tidak perlu harusmenuliskan tag-tag html.
  • 4. Desain Web Menggunakan Dreamweaver 42.2 Algoritma Mendesain Web Menggunakan Dreamwever1. Di Photoshop buat header dengan ukuran 745 x 150 px. Header yang dibuatmemuat: Judul, Jenis, Slogan, Logo perusahaan. Simpan dengan nama header.jpg2. Pilih HTML setelah Anda mengeklik menu Dreamwever 8.Gambar 2.2 Tampilan awal Dreamweaver3. Tambahkan title halaman web, sesuai slogan perusahaan Anda dan simpan fileAnda dengan nama: index.htmlGambar 2.3 Simpan file dan title4. Pilih align: center pada bagian Properties yang terdapat di bawah stage.5. Insert ► Table (Ctrl+Alt+T), dan isikan sesuai dengan gambar berikut. Setelahitu klik OK.
  • 5. Desain Web Menggunakan Dreamweaver 56. Insert ► Table (Ctrl+Alt+T), dan isikan sesuai dengan gambar berikut. Setelahitu klik OK.7. Letakkan kursor pada baris pertama. Tekan Insert ► Image (Ctrl+Alt+I).Setelah itu masukkan file header Anda. Klik OK jika sudah selesai.8. Letakkan kursor Anda pada baris kedua. Insert ► Table dan isikan sesuai dengandata berikut.
  • 6. Desain Web Menggunakan Dreamweaver 69. Atur sedemikian rupa sehingga kolom pertama memiliki width 24%.10. Letakkan kursor pada baris kedua kolom kedua. Insert ► Table dan atur sepertigambar berikut.11. Letakkan kursor pada kolom ketiga, pilih align: right, kemudian pilih submenuForm. Tambahkan Text Field pada kolom tersebut.12. Atur pada kotak dialog Input Tag Accesbility Attributes. Setelah itu klik OK.13. Posisikan kursor di kolom sebelah kiri. Tambahkan Button dan atur sepertigambar berikut. Klik OK jika sudah selesai.
  • 7. Desain Web Menggunakan Dreamweaver 714. Ganti Button name: Cari dan Value: Cari pada bagian Properties di bawahstage.15. Pada baris kedua kolom pertama, ketikkan teks: Menu dengan alignment: Center;beri warna teks: #FFFFFF dan background warna: #999999. Atur denan font:Arial dan size: 12.16. Atur juga pada baris kedua sesuai dengan langkah 15. Berikut ini tampilan padabaris kedua.
  • 8. Desain Web Menggunakan Dreamweaver 817. Letakkan kursor pada baris ketiga. Insert ► Table dan aturlah seperti gambarberikut.18. Buatlah kolom pertama dengan lebar 24%.19. Letakkan kursor Anda pada baris ketiga kolom pertama. Insert ► Table danaturlah seperti gambar berikut.20. Buatlah lebar kolom pertama secara proporsional, seperti gambar berikut. Aturalign: center pada kolom pertama.21. Buat file di Photoshop dengan ukuran: 8 x 8 px dan berilah warna: #99999.Simpan file tersebut dengan nama: dot.jpg. Insert ► Image, masukkan filedot.jpg pada kolom pertama baris 1 sampai dengan baris 9. Selanjutnya ketikkanmenu-menu pada kolom kedua dan atur dengan font: Arial, size: 12.
  • 9. Desain Web Menggunakan Dreamweaver 922. Pada baris ketiga kolom kedua isikan konten seperti berikut. Jangan lupa untukmengatur Vert: Top.23. Pada baris ketiga isikan dengan konten seperti. Copyright © …………. Buatlahsesuai dengan kreasi, warna dan fontasinya.24. Selanjutnya buat link pada menu pilihan. Blok teks yang ingin diberi link danketikkan sesuai dengan nama menu, misalnya: Home ► index.html; Profil►profil.html dan seterusnya.Gambar Cara membuat link
  • 10. Desain Web Menggunakan Dreamweaver 10Gambar Cara membuat link dengan mem-blok teks25. Save As file Anda sebanyak 8 kali dengan nama: profil.html; produk.html,bukutamu.html dan seterusnya sesuai dengan daftar menu di atas, sehinggasaat ini ada 9 file dengan desain yang sama. Buka kembali file-file yang telahdibuat dan gantilah kontennya yang terdapat pada baris ketiga kolom kedua.26. Tekan F12 untuk preview hasil halaman web yang telah dibuat.Tampilan WEB yang dibuat
  • 11. Desain Web Menggunakan Dreamweaver 11BAB IIIPENUTUP3.2 KesimpulanKesimpulanya adalah:- Macromedia Dreamweaver adalah sebuah HTML editor profesional untukmendesain secara visual dan mengelola situs web maupun halaman web.- Dengan macromedia dreamweaver kita dapat membuat tampilan homepage(website)dengan mudah.- Kita dengan mudah membuat web tanpa harus menghapal seluruh script HTML,karena Dreamweaver akan membuat script HTMLnya dengan sendirinya.3.2 Saran- Untuk kemajuan teknologi komputer khususnya dibidang Website maka diharapkanagar perkembangan web kedepan mampu mengubah pola fikir dan menjadikanmasyarakat Indonesia menjadi manusia yang kreatif dan inovatif.- Diharapkan dengan adanya website dapat dimanfaat sesuai dengan kegunaansebenarnya yang mampu mempercerdas bangsa bukannya unutk menghancurkanmoral moral bangsa.
  • 12. Desain Web Menggunakan Dreamweaver 12DAFTAR PUSTAKAhttp://slametriyanto.net/membuat-web-dengan-dreamweaver/http://dreamweavermenu.com/belajar-mengedit-web-menggunakan-dreamweaver.htmlhttp://learning.unla.ac.id/ft/praktikum/sim_tutorial/dreamweaver/dreamweavermx.pdf