MAKALAH INI DISUSUN UNTUK MEMENUHI TUGAS MATA PELAJARAN PEMOGRAMAN WEB Guru Pengampu : Yenny Oktafitriana Arbi, S.Pd Agus Giyanto, A.Md MODUL DREAMWEAVER CS5 Penyusun : Dion Saputro (09) Muh. Khoirul Mustakim (17) SMK NEGERI 1 BLORA JURUSAN MULTIMEDIA 2015 1 P a g e
PENDAHULUAN Dreamweaver merupakan software aplikasi yang digunakan sebagai HTML editor profesional untuk mendesain web secara visual. yang intinya adalah bahwa anda tidak harus berurusan dengan tag-tag HTML untuk membuat sebuah situs. Selain itu Dreamweaver juga memberikan keleluasaan untuk menggunakan sebagai media penulisan bahasa pemrograman web. Dreamweaver memiliki beberapa kelebihan diantaranya: 1. Desain Your Site Visually: Dengan fitur ini kalian bisa lebih menambahkan efek visual pada web yang akan kita buat, karena Adobe Dreamweaver CS5 ini sudah men-support penggunaan CSS code dan dapat diintegrasikan dengan Adobe Fireworks untuk membuat web anda terlihat lebih attraktif. 2. Ensure Cross-Browser Compability: Terkadang halaman web yang kita buat tidak berjalan dengan baik di beberapa browser, umumnya hal itu dikarenakan bahasa/coding/script yang kita pakai tidak ter-support pada browser tersebut. Dengan Adobe Dreamweaver CS5, anda dapat menggunakan fitur Adobe BrowserLab untuk memastikan halaman web yang anda buat dapat dijalankan di berbagai browser maupun di berbagai OS sebelum di upload ke server. 3. Integrate FLV Video: Adobe Dreamweaver CS5 sudah diintegrasikan dengan baik file flv. Dengan Adobe Dreamweaver CS5 ini anda dapat langsung mengimport file flv anda, setelah itu software ini akan mengenerate secara otomatis player flv nya. Anda bisa mengintegrasikannya dengan Adobe Flash untuk membuat flv nya. Disamping kelebihan di atas, Adobe Dreamweaver CS5 memiliki kekurangan, yakni: 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. 2 P a g e
Lembar Kerja Dreamweaver CS 5 1. Menu Bar Menu bar pada adobe dreamweaver yaitu file,edit, view,insert, modify, format, commands, site, window, dan help.setiap menu mempunyai beberapa sub menu 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 yangsedang diedit. Pada Document Window terdapat Title Bar yang menampilkan judul halaman,fasilitas Zoom, Document Toolbar, dan Tag Selector. 3 P a g e
3. Document Window Document windows menampilkan dokument dari halaman web yang aktif, atau dokumen yangsedang diedit. Pada Document Window terdapat Title Bar yang menampilkan judul halaman,fasilitas Zoom, Document Toolbar, dan Tag Selector. 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 berfungsiuntuk membantu dalam mengedit suatu halaman web. Panel Groups terletak di sebelah kanan layar kerjadan terdiri dari beberapa panel. Untuk menampilkan panel, klik ganda pada nama panel tersebut. 4 P a g e
6. Property Inspector Pada Adobe Dreamweaver terdapat fasilitas Property Inspector yang berfungsi untuk mengatur ataumengedit properti objek-objek yang ada pada halaman web. Property Inspector menampilkan semuaproperti objek ( misalnya objek teks, objek gambar, objek tabel) yang terseleksi pada jendela kerja. Dalam Property Inspector, Kita dapat dengan mudah mengatur atau mengedit properti objek, yaitu denganmemasukkan nilai-nilai parameter yang disediakan. Secara umum, Property Inspector terdiri dari PageProperty, Image Property, Table Property, dan Form Property. 7. Workspace Switcher Workspace Switcher pada Adobe Dreeamweaver berfungsi untuk mengubah atau mengatur jendelakerja sesuai keinginan, sehingga memudahkan Kita dalam membuat halaman web. Tampilan yang terdapatdi dalamnya antara lain adalah mode Designer, Classic, Coder dan lain-lain. 5 P a g e
TOOLS PADA DREAMWEAVER CS 5 1 Tab Common Hyperlink E-mail Link Named Anchor Horizontal Rule Table Insert Div Tag Images Media Widget Date Server-Side Include Comment Head : Untuk membuat link pada objek : Untuk memberikan link ke e-mail : Untuk memberikan nama anchor :Untuk menyisipkan garis secara horizontal :Untuk membuat table :Untuk menyispkan Tag Div :Untuk menyisipkan gambar :Untuk menyisipkan media, seperti file flash(swf,flv,dll) :Untuk menyispkan komponen web :Untuk menyisipkan tanggal :Untuk menyisipkan file dokumen Server-Side :Untuk menyisipkan komentar pada script HTML :Untuk menambah elemen pada head section dalam dokumen, seperti Meta, keyword, Description Script Templates Tag Chooser :Untuk menyisipkan JavaScript :Untuk membuat template :Untuk menyisipkan tag seperti tag HTML, ASP.NET,PHP,JSP,dan lain-lain 6 P a g e
2. Tab Layout Insert Div Tag Draw AP Div Spry Menu Bar Spry Tabbed Panels Spry Accordion :Untuk menyisipkan Div Tag :Untuk membuat layer :Untuk membuat tombol menu pada halaman web :Untuk membuat panel tab pada halaman web :Untuk membuat panel accordion Spry Collapsible Panel :Untuk membuat tab yang didalamnya terdapat isi dokumen dan ditampilkan ke bawah Table Insert Row Above Insert Row Below Insert Column to the Left Insert Column to the Right IFrame Frames :Untuk membuat tabel :Untuk menyisipkan baris pada tabel bagian atas :Untuk menyisipkan baris pada tabel bagian bawah :Untuk menyisipkan kolom tabel sebelah kiri :Untuk menyisipkan kolom tabel sebelah kanan :Untuk menyisipkan iframe pada halaman web :Untuk membuat frame 7 P a g e
3.Tab Forms Form Text Field 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 form :Untuk membuat text field pada form :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 8 P a g e
4. 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. 5. 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. 6. 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. 9 P a g e
7. 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: Bold Italic Strong Emphasis Paragraph Block Quote Preformatted Text :Untuk membuat teks menjadi tebal :Untuk membuat teks menjadi miring :Untuk membuat teks menjadi tebal :Untuk membuat teks menjadi miring :Untuk mengatur paragraf :Untuk menandai teks seperti catatan penting :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 :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 Acronym Characters :Untuk membuat akronim :Untuk menyisipkan karakter tertentu pada teks, seperti ganti baris, copyright dan lain-lain 10 P a g e
8. Tab Favorites Tab ini berfungsi untuk menambahkan isi dari tab-tab ke dalam tab Favorites seperti Table Row, Hyperlink, Comment, Dynamic Text, dan lain sebagainya. Untuk menambahkan isi tab ke dalam tab Favorites dapat menggunakan cara berikut: dengan menekan tombol OK. bol,lanjutkan 9. CSS Style Panel CSS Styles panel merupakan fasilitas pada dreamweaver yang berfungsi untuk mengatur script CSS agar halaman web menjadi lebih menarik. CSS Styles dan terdiri dari dua mode, yaitu mode All dan mode Current. menampilkan list atau daftar stylesheet dari dokumen halaman web yang diseleksi, sedangkan panel Properties akan menampilkan isi atau atribut dari stylesheet yang diseleksi pada panel All Rules. dan panel Properties. Panel Summary for Selection menampilkan isi dari CSS, panel About menampilkan informasi lokasi dari script CSS yang diseleksi, sedangkan panel Properties menmpilkan isi atau atribut dari stylesheet yang diseleksi. 10. Files Panel Files panel pada dreamweaver merupakan fasilitas yang berfungsi untuk mengelola filefile dari dokumen web. Kita dapat dengan mudah mengelola file-file tersebut di folder, jaringan komputer, maupun secara remote. 11 P a g e
Menu dan Sub Menu Pada Dreamweaver 1. File New Open Browse in bridge Open Recent Open in frame Close Close All Shere My Screen Save Save As Save All Save All Related Files 2. Edit Undo Paste Redo Paste Cut Copy Paste Paste Special Clear Select All Select parent Tag Select Child Find and replace Find Selection Find Next 3. View Zoom In Zoom Out Magnification Fit selection Fit all Fit width Code Split code Design Code and design Split vertically Save As Tample Revert Print Code Import Export Convert Preview in Browser Check Page Validate Compre With Remote Server Desig Notes Exit Go To Link Show code Hints Code Hint Tools Ident Code Outdent Code Balance braces Repeating Entries Code Collapse Edit With External Editor Tag libraries Keyboard shortcuts Prefences Design view on left Switch views Refresh design view Refresh styles Live view Live view opstions Live view browser Live code Inspect Head content Table mode 12 P a g e
Noscript content Visual aids Style rendering Code view options 4. Insert Tag Image Image object Media Table Table objects Layout objects Form Hyperlink Email link Named ancor Date 5. Modifity Page properties Template properties Selection properties CSS style Edit Tag Quick tag editor Make link Remove link Open linked page 6. Format Indent Outdent Paragraph format Align Rulers Gird Guides Tracing image Server side include Comment HTML Template objects Recent snippets Widget Spry InContect Editing Data objects Customize favorites Get more objects Link target Table Image Frameset Arrange Convert Library Templates List Font Style CSS style Color 13 P a g e
7. Commands Stsrt recording Play recorded command Edit command list Get more command Get air extension Manage extensions Check spelling Apply source formatting Apply sourceformattingto selection Clean up XHTML Clean up word HTML Externalize javascript Remove FLV detection Optimize image Sort table 8. Site New Site Manage sites Get Chek out Put Check in Undo check out Show checked out by Locate in site Reports Site-specifik code hints Synchronize sitewide Check link sitewide Change link sitewide Advanced 9. Window Insert Properties Css styles Ap elements Business catalyst 14 P a g e
Databases Bindings Server bahaviors Components Files Assets Snippets Tag inspector Behaviors History Frames Code inspector Results Extansions Workpace layout Hide panels Application bar Casade Tile horizontally Tile vertically 1 unttled-1 10. Help Dreamweaver help Spy framework Get starled with business catalyst in contet editing Omniture Coldfusion help Reference Dreamweaver support center Dreaweaver exchange Manage extensions Css advisor Adobe online forums Product rgistation Deactivate Updates Adobe product improvement program 15 P a g e
TUTORIAL MEMBUAT TEKS BERJALAN PADA DREAMWEAVER Untuk membuat seatu web tampak lebih menarik Anda bisa memberikan efek-efek tertentu terhadap tulisan maupun gambar. Disini saya akan memberitahukan cara untuk membuat tulisan yang dapat berjalan, ikuti lagkah-langkah berikut : 1. Buka macromedia dreameweaver sampai lembar kerja yang sudah ditambahkan tabel Tulislah kata yang Anda inginkan > masuk pada lembar kerja split 16 P a g e
Tulislah <marquee>..</marquee> Kliklah toolbar preview(bola dunia) Maka akan berjalan 17 P a g e
Penutup Demikian yang dapat kami paparkan mengenai materi yang menjadi pokok bahasan dalam makalah ini,tentunya masih banyak kekurangan dan kelemahannya,karena terbatasnya pengetahuan dan kurangnya rujukan atau refrensi yang ada hubungannya dengan judul makalah ini Semoga apa yang telah kami buat ini bisa memenuhi kriteria penilaian tugas makalah dreamweaver apabila ada kesalahan ejaan ataupun penulisan kata kami mohon maaf.semoga makalah ini bermanfaat pada penulis khususnya dan pada pembaca umumnya. Sumber: http://www.academia.edu/7037681/dreamweaver_-1 http://mygalad.wordpress.com/2008/07/27/membuat-tulisan-berjalan-dreamweaver/ 18 P a g e