MAKALAH MODUL ADOBE DREAMWEAVER CREATIVE SUITE 5

Transkripsi

1 MAKALAH Makalah Ini Disusun Untuk Memenuhi Tugas Mata Pelajaran Pemrograman Web Design. Guru Pengampu : Yenny Oktafitriana Arbi, S.Pd Agus Giyanto, A.Md MODUL ADOBE DREAMWEAVER CREATIVE SUITE 5 Disusun Oleh : Ipul Aripin (14) Siti Alfiatuz Zuhriyah (24) SMK NEGERI 1 BLORA JAWA TENGAH PROGRAM KEJURUAN MULTIMEDIA 2015 SMKN 1 BLORA, Multi Media 2015 Page 1

2 A. PENDAHULUAN. Dreamweaver merupakan perangkat lunak yang ditujukan untuk membuat suatu situs web. Versi pertama dirilis pada tahun 1997, dan sejak itu Dreamweaver menjadi web editor yang banyak digunakan oleh para web developer. Hal itu antara lain karena kemudahan dalam penggunaannya, kelengkapan fiturnya dan juga dukungannya terhadap teknologi terkini. Dreamweaver merupakan salah satu perangkat lunak yang dikembangkan oleh Macromedia Inc. Dan sekarang resmi Milik Adobe. Dreamweaver ini banyak digunakan oleh para pengembang web karena fitur-fiturnya yang menarik dan kemudahan untuk menggunakannya. a. Keunggulan : 1. Kemampuannya membuat halaman web yang terlihat konsisten. Adobe Dreamweaver sudah terinstall beberapa template yang elegan dan menarik. Tentunya ini memudahkan anda yang ingin belajar membuat sebuah web namun anda belum mampu membuat design web sendiri. Jika anda ingin membuat lebih dari 10 halaman web dengan didasarkan design template tertentu maka web anda akan memiliki gaya halaman web yang sama dan terlihat konsisten dari halaman perhalaman. 2. Kemudahan dan efisiensi dalam penggunaan Program ini tidak hanya dirancang untuk anda yang sudah mahir dan mengerti bahasa pemrograma. Bagi anda yang belum mengerti bahasa pemrograman, anda bisa membuat halaman web dengan hanya cara mengklik atau drag and drop menggunakan mouse serta anda juga bisa melihat halaman html-nya selama proses desain berlangsung. Atau yang lebih dikenal dengan sebutan WYSIWYG (What You See Is What You Get) Selain itu dreamweaver memiliki kemampuan memperlihatkan 3 proses yang berbeda, yaitu : Code View : Berfungsi untuk hanya menampilkan script html saja. Desain View : Berfungsi menampilkan kode-kode html yang anda tulis menjadi sebuah design/template yang nantinya akan ditampilkan di browser. Split View : Berfungsi menampilkan gabungan antara Code View dan Desain View pada saat bersamaan.jadi anda bisa langsung melihat perubahan pada saat anda mengubah htmlnya. 3. Mudah untuk mengupload melalui FTP Dreamweaver sudah dilengkapi dengan fitur FTP jadi setelah anda selesai membangun sebuah web, anda bisa langsung menguploadnya melalui FTP. FTP (singkatan dari File Transfer Protocol) adalah sebuah protokol Internet yang berjalan di dalam lapisan aplikasi yang merupakan standar untuk pentransferan berkas (file) komputer antar mesin-mesin dalam sebuah internetwork. SMKN 1 BLORA, Multi Media 2015 Page 2

3 Ilustrasi FTP 4. Dapat dikustom Dreamweaver dapat disesuaikan dengan kebutuhan yang anda perlukan. Menu, tab, perintah, font dan warna semua kode dapat disesuaikan dengan preferensi pribadi. Hal ini dapat secara efektif memudahkan proses desain web. Selain itu dreamweaver didukung banyak plug-in yang membantu anda dalam proses desain. b. Kekurangan : 1. Harga Software yang Cukup Mahal. Mungkin salah satu kekurangan dari Dreamweaver ini adalah dari segi harga. Dreamweaver CS5 dibandrol oleh Adobe sekitar $399. Harga yang mungkin terjangkau oleh kalangan tertentu saja. c. Perbedaan Dengan Versi Sebelumnya : Terdapat beberapa perbedaan antara Dreamweaver CS5 dengan versi sebelumnya yaitu CS4, CS5 antara lain : 1. fitur. Dreamweaver CS5 memiliki fitur-fitur baru untuk memudahkan para web developer untuk membuat web yang lebih baik. Fitur tambahan tersebut sangat berguna bagi para pengguna software ini. 2. kompatibilitas Dreamweaver CS5 selain memiliki fitur tambahan, tak lupa pula memiliki kompabilitas yang lebih baik dari versi sebelumnya, diantaranya adalah kompabilitas untuk membuat dynamical web. SMKN 1 BLORA, Multi Media 2015 Page 3

4 B. LEMBAR KERJA DREAMWEAVER Berikut adalah lembar kerja (jobsheet) pada dreamweaver CS5 1. Menu Bar Menu bar pada Adobe Dreamweaver yaitu File, Edit, View, Insert, Modify, Format, Commands, Site, Window, dan Help. Setiap menu mempunyai beberapa submenu sesuai dengan kategorinya, selain itu juga mempunyai fungsi yang berbeda-beda. 2. Document Window Document windows menampilkan dokument dari halaman web yang aktif, atau dokumen yang sedang diedit. Pada Document Window terdapat Title Bar yang menampilkan judul halaman, fasilitas Zoom, Document Toolbar, dan Tag Selector. SMKN 1 BLORA, Multi Media 2015 Page 4

5 3. Document Toolbar Dokumen Toolbar berisi tombol-tombol yang digunakan untuk mengatur layar kerja dokumen pada dengan cepat, diantaranya show Code view, Show Code and Design views, dan Show Design view. 4. Tag Selector Tag selector berfungsi untuk menampilkan tag HTML dari objek yang terseleksi. Kita dapat meng-klik <body> untuk memilih keseluruhan elemen dokumen. Tag Selector ini terdapat pada Document Window, dan terletak di bawah sebelah kiri. 5. Panel Groups Panel groups merupakan salah satu fasilitas yang terdapat pada Adobe Dreamweaver yang berfungsi untuk membantu dalam mengedit suatu halaman web. Panel Groups terletak di sebelah kanan layar kerja dan terdiri dari beberapa panel. Untuk menampilkan panel, klik ganda pada nama panel tersebut. SMKN 1 BLORA, Multi Media 2015 Page 5

6 C. TOOL berikut adalah tool yang ada di Dreamweaver CS5 beserta fingsinya : Pada tab ini terdapat tool yang digunakan untuk membuat dan menyisipkan objek ke dalam halaman web, seperti membuat hyperlink, tabel, gambar, media, dan lain sebagainya. Berikut keterangan fungsi dari tool-tool yang terdapat pada tab Common: Tool Nama Fungsi Hyperlink Untuk membuat link pada objek Link Named Anchor Horizontal Rule Untuk memberikan link ke Untuk memberikan nama anchor Untuk menyisipkan garis secara horizontal Table Untuk membuat table Insert Div Tag Images Untuk menyispkan Tag Div Untuk menyisipkan gambar Media Untuk menyisipkan media, seperti file flash(swf,flv,dll) Widget Untuk menyispkan komponen web Date Untuk menyisipkan tanggal Server-Side Include Untuk menyisipkan file dokumen Server-Side Comment Untuk menyisipkan komentar pada script HTML Head Script Untuk menambah elemen pada head section dalam dokumen, seperti Meta, keyword, Description Untuk menyisipkan JavaScript Templates Untuk membuat template Tag Chooser Untuk menyisipkan tag seperti tag HTML, ASP.NET, PHP, JSP, dan lain-lain SMKN 1 BLORA, Multi Media 2015 Page 6

7 Tab Layout Tab ini berisikan tool-tool yang berfungsi untuk membuat layout halaman web, seperti membuat tabel, frame dan lain sebagainya. Berikut keterangan fungsi dari tool-tool pada tab layout: Tool Nama Fungsi Insert Div Tag Untuk menyisipkan Div Tag Draw AP Div Untuk membuat layer Spry Menu Bar Untuk membuat tombol menu pada halaman web Spry Tabbed Panels Untuk membuat panel tab pada halaman web Spry Accordion Spry Collapsible Panel Table Untuk membuat panel accordion Untuk membuat tab yang didalamnya terdapat isi dokumen dan ditampilkan ke bawah Untuk membuat tabel Insert Row Above Untuk menyisipkan baris pada tabel bagian atas Insert Row Below Untuk menyisipkan baris pada tabel bagian bawah Insert Column to the Left Untuk menyisipkan kolom tabel sebelah kiri Insert Column to the Right Untuk menyisipkan kolom tabel sebelah kanan IFrame Frames Untuk menyisipkan iframe pada halaman web Untuk membuat frame Tab Forms Tab ini membuat tampilan website menjadi lebih interaktif karena pengguna dapat memberikan input pada sistem atau website dengan menggunakan tool yang ada dalam tab Forms. Berikut keterangan fungsi dari tool-tool yang ada pada tab Forms: Tool Nama Fungsi Form Untuk membuat form Text Field Untuk membuat text field pada form SMKN 1 BLORA, Multi Media 2015 Page 7

8 Hidden Field Textarea Checkbox Checkbox Group Radio Button Radio Group List/Menu Jump Menu Image Field File Field Button Label Fieldset Spry Validation Text Field Spry Validation Textarea Spry Validation Checkbox Spry Validation Select Spry Validation Password Untuk membuat hidden field pada form Untuk membuat Textarea pada form Untuk membuat satu checkbox pada form Untuk membuat lebih satu checkbox pada form Untuk membuat radio button pada form Untuk membuat radio button secara group pada form Untuk membuat daftar atau menu pada form Untuk membuat jump menu pad form Untuk memasukkan gambar pada form Untuk membuat pencarian file Untuk membuat tombol Submit atau Reset pada form Untuk membuat label pada form Untuk membuat fieldset Untuk membuat text field model spry Untuk membuat Textarea model spry Untuk membuat checkbox model spry Untuk membuat daftar atau menu model spry Untuk membuat password field Tab Data Tab data pada dreamweaver berfungsi untuk memasukkan object dat model spry dan elemenelemen dinamis lainnya seperti Recordset, Repeated Regions, Insert Record, Update Record, Delete Record, dan lain sebagainya. SMKN 1 BLORA, Multi Media 2015 Page 8

9 Tab Spry Tab Spry berisikan tombol-tombol untuk membuat halaman-halaman Spry, termasuk object data spry. Spry merupakan library JavaScript yang dapat digunakan untuk mendesain halaman web, seperti membuat menu bar, textarea, text field, dan lain sebagainya dengan hasil yang lebih menarik. Tab InContext Editing Pada tab InContext Editing terdapat tombol-tombol yang berfungsi untuk membuat Repeating Region, Editable Region, dan Manage Available CSS Clases. Repeating dan Editable Region digunakan untuk membuat template halaman web. Tab Text Tab Text berfungsi untuk mengatur format teks, paragraf, maupun karakter teks lainnya. Berikut keterangan fungsi dari tool-tool yang ada pada tab Text: Tool Nama Fungsi Bold Untuk membuat teks menjadi tebal Italic Strong Emphasis Paragraph Block Quote Untuk membuat teks menjadi miring Untuk membuat teks menjadi tebal Untuk membuat teks menjadi miring Untuk mengatur paragraf Untuk menandai teks seperti catatan penting SMKN 1 BLORA, Multi Media 2015 Page 9

10 Preformatted Text Untuk membentuk paragraf seperti pada script Heading 1 Untuk membentuk teks dalam format heading 1 Heading 2 Untuk membentuk teks dalam format heading 2 Heading 3 Untuk membentuk teks dalam format heading 3 Unordered List Ordered List List Item Definition List Definition Term Definition Description Abbreviation Acronym Characters Untuk membuat daftar dalam kondisi simbol Untuk membuat daftar dalam format simbol Untuk memasukkan daftar Untuk mendefinisikan sesuatu Untuk memasukkan definition term Untuk memberikan penjelasan pada teks Untuk memberikan penjelasan mengenai singkatan pada teks yang ditunjuk Untuk membuat akronim Untuk menyisipkan karakter tertentu pada teks, seperti ganti baris, copyright dan lain-lain SMKN 1 BLORA, Multi Media 2015 Page 10

11 D. MENU & SUBMENU 1. file Menu dan submenu di atas berfungsi untuk mengelola segala yang berhubungan dengan management file, seperti membuka, menyimpan, export maupun import file. SMKN 1 BLORA, Multi Media 2015 Page 11

12 2. edit Menu dan submenu edit berguna untuk memodifikasi file pada Dreamweaver CS5. Menu ini biasa digunakan untuk mng-copy paste suatu file. SMKN 1 BLORA, Multi Media 2015 Page 12

13 3. view Menu dan Submenu view biasa digunakan untuk mengatur bagaimana seorang user mengatur tampilan dokumen pada Dreamweaver CS5, dengan view, kita bisa menmperbesar maupun tampilan dokumen. Selain itu kita juga dapat memunculkan ruler dan grid yang berfungsi sebagai penggaris, sehingga hasil pekerjaan menjadi lebih rapi. SMKN 1 BLORA, Multi Media 2015 Page 13

14 4. insert Menu dan Submenu insert berfungsi untuk memasukkan object pada Dreamweaver CS5. Dengan menu ini kita bisa memasukkan objek seperti gambar, tabel, maupun form dengan mudah pada dokumen Dreamweaver CS5. SMKN 1 BLORA, Multi Media 2015 Page 14

15 5. Modify Modify biasanya digunakan untuk memodifikasikan dokumen yang telah di insert sebelumnya. Sangat memudahkan pengguna untuk dpat memodifkasikan hlaman web tersebut. SMKN 1 BLORA, Multi Media 2015 Page 15

16 6. Format Format ini digunakan untuk mengedit font huruf atau perataan nya atau warna huruf. Ini eken mempermudah pengguna dalam pemilihan font atau yang lainnya. SMKN 1 BLORA, Multi Media 2015 Page 16

17 7. Commands SMKN 1 BLORA, Multi Media 2015 Page 17

18 8. Site Site digunakan untuk membuka situs seperti membuat situs baru atau memanage situs tersebut. Sehingga memudahkan pengguna dalam membuka situs yang ada di computer. SMKN 1 BLORA, Multi Media 2015 Page 18

19 9. Window Window sebagai jendela gunanya agar pengguna dapat mengetahui tools yang sedang aktif/digunakan. Atau pengguna dapat menambahkan tools yang akan digunakan. SMKN 1 BLORA, Multi Media 2015 Page 19

20 10. Help Seperti yang kita tahu, Help biasnya digunakan untuk membantu menemukan kesalahan atau bantuan lain dari Dreamweaver. SMKN 1 BLORA, Multi Media 2015 Page 20