MENDESAIN WEB DENGAN ADOBE DREAMWEAVER CS3 DAN FIREWORKS CS3
Disusun Oleh
ARIEF FAHMI FACHRUDDIN
04
X TIK II
PROGRAM MULTEMEDIA
SMK NEGRI I GONDANG
2008/2009
KATA PENGANTAR
Puji syukur kami panjatkan pada Allah SWT yang telah memberikan karunian, hidayah, serta inayahnya dalam menyelesaikan karya tulis ini dengan judul “Mendesain Web dengan Adobe Dreamweaver CS3 dan Fireworks CS3”
Penyusunan karya tulis ini merupakan salah satu syarat guna memperoleh nilai Web Desain.
Ucapan terima kasih atas penyusunan karya tulis ini saya sampaikan kepada:
1. Bapak P. SUHANTO, S.pd. M. Pd selaku kepala sekolah SMK Negri I GONDANG.
2. Bapak INDARTO S.pd sebagai guru pembimmbing.
3. Ibu KUSDARINI, S. Pd selaku wali kelas X Teknologi Informasi Komonikasi II.
4. Bapak/Ibu tercinta yang telah mendukung.
5. Teman-teman seperjuangan.
Kami sebagai pihak penyusun karya tulis berharap semoga semua yang telah kami persembahkan semoga bermanfaat bagi para pembaca semua. Untuk semua pembaca mohon saran dan kritik semuanya.
Mantingan, 28 Februari 2009
PENULIS
BAB I PENDAHULUAN
Pada makalah ini akan saya bahas bagaimana cara mendesain web dengan “dreamweaver CS3 dan Fireworks CS3”. Dreamweaver adalah sebuah HTMl editor profesional untuk mendesain web secara visual dan mengelola situs atau halaman web. Dreanweaver CS3 memiliki kemampuan untuk mendesain web, menyuting kode serta pembuatan aplikasi web, antara lain: JPS, PHP, ASP dan ColdFusion.
Sedangkan Adobe Fireworks CS3 adalah suatu program pilihan yang mendukung pengolahan dan pembuatan grafik dan dapat terintergrasi dengan baik pada halaman Web. Dapat pula diartikan bahwa program ini merupakan program aplikasi yang dapat digunakan untuk membuat, mengedit dan mengoptimalkan grafik untuk Web secara cepat.
1. Cara Menjalankan Dreamweaver CS3
Dreamweaver CS3 memiliki peningkatan kemampuan toolbar yang dapat digunakan untuk memodifikasi tampilan toolba atau menambahkan fungsi baru. Selain user interface baru dan kemampuan untuk menyuting kode dengan lebih baik, Dreamweaver CS3 juga dapat melakukan print kode pada jendela Code View, selain itu juga memiliki fasilitas Code Hints yang membantu dalam urusan tag-tag, serta Tag Inspector yang sangat berguna untukmenangani tag-tag HTML. Untuk menjalankan Adobe Dreamweaver CS3 klik tombol StartAll ProgramsAdobe Dreamweaver CS3.
2. Ruang kerja Dreamweaver CS3
Komponen-komponen yang disediakan oleh ruang kerja Dreamweaver CS3 antara lain adalah Insert Bar, Document Toolbar, Jendela DokumeN, Panel Group, Tag selectore, Property Inspector, dan Site Panel. Ruang kerja Dreamweaver CS3 tampak seperti pada gambar 1.2.
Insert Bar, berisi tombol-tombol untuk menyisipkan berbagai macam objek seperti: tabel dan layer ke dalam dokumen. Insert Bar terdiri dari beberapa kategori sesuai dengan jenis objek yang disisipkan.
Document Toolbar, berisi tombol-tombol dan menu pop-up yang menyediakan tampilan berbeda dari jendela dokumen. Anda bisa mengatur tampilan jendela dokument dalam bentuk Design View atau Code View atau keduanya. Anda dapat memberikan judul jendela dokumen pada bagian Title.
Coding Window, berisi kode-kode HTML dan tempat untuk menuliskan kode-kode pemrograman, misalnya PHP atau ASP.
Panel Group, adalah kumpulan panel yang saling berkaitan satu sama lainnya yang dikelompokkan dibawah satu judul.
Property Inspector, digunakan untuk melihat dan mengubah berbagai properti objek atau teks.
Jendela Dokumen, berfungsi untuk menampilkan dokumen di mana Anda sekarang bekerja.
Ruler, digunakan untuk memudahkan pengukuran saat Anda mendesain suatu halaman web.
Site Panel, digunakan untuk mengatur file-file dan folder-folder yang membentuk situs Web Anda.
3. Cara Menjalankan Adobe Fireworks CS3
Sama halnya dengan Adobe Dreamweaver CS3 yang dijalankan dengan cara sebagai berikut: StartAll ProgramsAdobe Fireworks CS3. Ruang kerja fireworks CS3 seperti gambar ………….
4. Ruang Kerja Frieworks CS3
Saya jelaskan pengertian dari gambar……….. diatas:
Toolbar, Fireworks CS3 dilengkapi dua buah toolbar, yaitu Main dan Modify. Anda dapat menampilkan maupun menyembunyikan kedua toolbar ini dengan mengklik menu Window Toolbar kemudian pilih Main dan Modify.
Panel Tools, grup tombol yang digunakan untuk mengedit image. Panel Tools dibagi menjadi enam grup, yaitu select, bitmap, vektor, web, colors dan view.
Property Inspector, merupakaan sebuah panel yang berfungsi untuk menampilkan informasi properti pada objek yang terpilih. Selain itu, Property Inspector juga menampilkan tatanan dari objek yangterpilih.
Secara default, letak dari panel Property Inspectore ini berada di bagian bawah jendela kerja. Anda dapat mengatur letak panel Property Inspector tersebut dengan menggeser gripper (terletak di bagian kiri atas panel) ke tempat lain.
Group Panel, terdiri dari beberapa panel terdapat dibagian sebelah kanan. Panel-panel tersebut dapat dikelompokkan dalam sat group. Group panel yang digunakan sebagai fungsi editing ini terdiri dari 4 buah panel, antara lain Optimize, Assets, Layer, dan Frames and History.
BAB II
PEMBAHASAN
1. BEKERJA DENGAN ADOBE DREAMWEAVER CS3
Setelah kita mengetahui konsep ruang kerja Dreamweaver, anda sudah bisa mulai untuk membuat sebuah situs web. Situs lokal adalah keseluruhan file yang digunakan untuk membangun situs web sendiri yang diletakkaan folder pada drive lokal.
A. Bekerja dengan Situs Lokal
Saat bekerja dan membuat situs web, anda perlu mendefinisikan situs dalam kotak dialo Site Definition. Dalam proses pedefinisian, ada dua cara yang dapat dikerjakaan, yaitu dengan menggunakkan pilihan Basic atau Advance. Pilihan Basic akan memberi kemudahan bagi anda dalam menyiapkan situs. Kalau anda sudah paham betul gunakan Advance.
Adapun langkah-langkah untuk membuat site baru adalah:
Pilih perintah menu SiteNew Sites.
Tampilah kotak dialog Site Definition, anda dapat mengisi nama situs anda di kotak teks dengan cara mengklik, contoh nama: Webku.
Klik Next untuk masuk pada kotak dialog berikutnya.
Pada langkah ini Anda diminta untuk memilih dokumen tempat Anda bekerja nanti. Jika dipilih No, I want to use….., maka Anda dapat memilih situs statis tanpa memiliki halaman dinamis, sedangkan bila pilih yes, I want to use untuk memilih dokumen dinamis.
Klik Next untuk melanjutkan ke langkah berikutnya
Read full story
Disusun Oleh
ARIEF FAHMI FACHRUDDIN
04
X TIK II
PROGRAM MULTEMEDIA
SMK NEGRI I GONDANG
2008/2009
KATA PENGANTAR
Puji syukur kami panjatkan pada Allah SWT yang telah memberikan karunian, hidayah, serta inayahnya dalam menyelesaikan karya tulis ini dengan judul “Mendesain Web dengan Adobe Dreamweaver CS3 dan Fireworks CS3”
Penyusunan karya tulis ini merupakan salah satu syarat guna memperoleh nilai Web Desain.
Ucapan terima kasih atas penyusunan karya tulis ini saya sampaikan kepada:
1. Bapak P. SUHANTO, S.pd. M. Pd selaku kepala sekolah SMK Negri I GONDANG.
2. Bapak INDARTO S.pd sebagai guru pembimmbing.
3. Ibu KUSDARINI, S. Pd selaku wali kelas X Teknologi Informasi Komonikasi II.
4. Bapak/Ibu tercinta yang telah mendukung.
5. Teman-teman seperjuangan.
Kami sebagai pihak penyusun karya tulis berharap semoga semua yang telah kami persembahkan semoga bermanfaat bagi para pembaca semua. Untuk semua pembaca mohon saran dan kritik semuanya.
Mantingan, 28 Februari 2009
PENULIS
BAB I PENDAHULUAN
Pada makalah ini akan saya bahas bagaimana cara mendesain web dengan “dreamweaver CS3 dan Fireworks CS3”. Dreamweaver adalah sebuah HTMl editor profesional untuk mendesain web secara visual dan mengelola situs atau halaman web. Dreanweaver CS3 memiliki kemampuan untuk mendesain web, menyuting kode serta pembuatan aplikasi web, antara lain: JPS, PHP, ASP dan ColdFusion.
Sedangkan Adobe Fireworks CS3 adalah suatu program pilihan yang mendukung pengolahan dan pembuatan grafik dan dapat terintergrasi dengan baik pada halaman Web. Dapat pula diartikan bahwa program ini merupakan program aplikasi yang dapat digunakan untuk membuat, mengedit dan mengoptimalkan grafik untuk Web secara cepat.
1. Cara Menjalankan Dreamweaver CS3
Dreamweaver CS3 memiliki peningkatan kemampuan toolbar yang dapat digunakan untuk memodifikasi tampilan toolba atau menambahkan fungsi baru. Selain user interface baru dan kemampuan untuk menyuting kode dengan lebih baik, Dreamweaver CS3 juga dapat melakukan print kode pada jendela Code View, selain itu juga memiliki fasilitas Code Hints yang membantu dalam urusan tag-tag, serta Tag Inspector yang sangat berguna untukmenangani tag-tag HTML. Untuk menjalankan Adobe Dreamweaver CS3 klik tombol StartAll ProgramsAdobe Dreamweaver CS3.
2. Ruang kerja Dreamweaver CS3
Komponen-komponen yang disediakan oleh ruang kerja Dreamweaver CS3 antara lain adalah Insert Bar, Document Toolbar, Jendela DokumeN, Panel Group, Tag selectore, Property Inspector, dan Site Panel. Ruang kerja Dreamweaver CS3 tampak seperti pada gambar 1.2.
Insert Bar, berisi tombol-tombol untuk menyisipkan berbagai macam objek seperti: tabel dan layer ke dalam dokumen. Insert Bar terdiri dari beberapa kategori sesuai dengan jenis objek yang disisipkan.
Document Toolbar, berisi tombol-tombol dan menu pop-up yang menyediakan tampilan berbeda dari jendela dokumen. Anda bisa mengatur tampilan jendela dokument dalam bentuk Design View atau Code View atau keduanya. Anda dapat memberikan judul jendela dokumen pada bagian Title.
Coding Window, berisi kode-kode HTML dan tempat untuk menuliskan kode-kode pemrograman, misalnya PHP atau ASP.
Panel Group, adalah kumpulan panel yang saling berkaitan satu sama lainnya yang dikelompokkan dibawah satu judul.
Property Inspector, digunakan untuk melihat dan mengubah berbagai properti objek atau teks.
Jendela Dokumen, berfungsi untuk menampilkan dokumen di mana Anda sekarang bekerja.
Ruler, digunakan untuk memudahkan pengukuran saat Anda mendesain suatu halaman web.
Site Panel, digunakan untuk mengatur file-file dan folder-folder yang membentuk situs Web Anda.
3. Cara Menjalankan Adobe Fireworks CS3
Sama halnya dengan Adobe Dreamweaver CS3 yang dijalankan dengan cara sebagai berikut: StartAll ProgramsAdobe Fireworks CS3. Ruang kerja fireworks CS3 seperti gambar ………….
4. Ruang Kerja Frieworks CS3
Saya jelaskan pengertian dari gambar……….. diatas:
Toolbar, Fireworks CS3 dilengkapi dua buah toolbar, yaitu Main dan Modify. Anda dapat menampilkan maupun menyembunyikan kedua toolbar ini dengan mengklik menu Window Toolbar kemudian pilih Main dan Modify.
Panel Tools, grup tombol yang digunakan untuk mengedit image. Panel Tools dibagi menjadi enam grup, yaitu select, bitmap, vektor, web, colors dan view.
Property Inspector, merupakaan sebuah panel yang berfungsi untuk menampilkan informasi properti pada objek yang terpilih. Selain itu, Property Inspector juga menampilkan tatanan dari objek yangterpilih.
Secara default, letak dari panel Property Inspectore ini berada di bagian bawah jendela kerja. Anda dapat mengatur letak panel Property Inspector tersebut dengan menggeser gripper (terletak di bagian kiri atas panel) ke tempat lain.
Group Panel, terdiri dari beberapa panel terdapat dibagian sebelah kanan. Panel-panel tersebut dapat dikelompokkan dalam sat group. Group panel yang digunakan sebagai fungsi editing ini terdiri dari 4 buah panel, antara lain Optimize, Assets, Layer, dan Frames and History.
BAB II
PEMBAHASAN
1. BEKERJA DENGAN ADOBE DREAMWEAVER CS3
Setelah kita mengetahui konsep ruang kerja Dreamweaver, anda sudah bisa mulai untuk membuat sebuah situs web. Situs lokal adalah keseluruhan file yang digunakan untuk membangun situs web sendiri yang diletakkaan folder pada drive lokal.
A. Bekerja dengan Situs Lokal
Saat bekerja dan membuat situs web, anda perlu mendefinisikan situs dalam kotak dialo Site Definition. Dalam proses pedefinisian, ada dua cara yang dapat dikerjakaan, yaitu dengan menggunakkan pilihan Basic atau Advance. Pilihan Basic akan memberi kemudahan bagi anda dalam menyiapkan situs. Kalau anda sudah paham betul gunakan Advance.
Adapun langkah-langkah untuk membuat site baru adalah:
Pilih perintah menu SiteNew Sites.
Tampilah kotak dialog Site Definition, anda dapat mengisi nama situs anda di kotak teks dengan cara mengklik, contoh nama: Webku.
Klik Next untuk masuk pada kotak dialog berikutnya.
Pada langkah ini Anda diminta untuk memilih dokumen tempat Anda bekerja nanti. Jika dipilih No, I want to use….., maka Anda dapat memilih situs statis tanpa memiliki halaman dinamis, sedangkan bila pilih yes, I want to use untuk memilih dokumen dinamis.
Klik Next untuk melanjutkan ke langkah berikutnya
.jpg)
