Rabu, 12 Desember 2012

Mengenal Adobe Dreamweaver cs4

Adobe Dreamweaver cs4 merupakan salah satu progam aplikasi yang digunakan untuk membuat dan membangu sebuah Website, Baik secara grafis maupun dengan menuliskan kode sumber secara langsung

Adobe Dreamweaver cs4 memudahkan pengembang Website untuk mengelola halaman halaman Website dan aset aset yang ada dalam Website itu sendiri. bail gambar (image), animasi flash, video, suara dan lain sebagainya. Selain itu Adobe Dreamweaver cs4 juga menyediakan fasilitas untuk melakukan Pemrograman Scripting seperti, ASP (Active Server Page), JSP (Java Server Page), PHP (PHP Hypertext Preprocessor), Java Scripts, Cold Fusion, CSS (Cascading Style Sheet), XML (Extensible Markup Languange), Dan Lain Sebagainya.

Sebelum melangkah lebih jauh dalam pembuatan Website dengan Adobe Dreamweaver cs4, Ada baiknya kita mengenal terlebih dahulu area kerja Adobe Dreamweaver cs4




START PAGE

Start Page adalah kotak dialog yang di tampilkan pertama kali bersamaan dengan jendela utama aplikasi Adobe Dreamweaver CS4 saat di jalankan.fungsi dari Star Page ini adalah menampilkan menu pilihan yang ada di Adobe Dreamweaver CS4,dimana user berhak memilih menu mana yang akan di pakai atau di jalankan.

Open a Recent Document

Menu ini menampilkan daftar nama dokumen yang pernah di buka dengan Adobe Dreamweaver CS4. anda dapat membuka dokumen tersebut dengan cara memilih nama dokumen yang ada. selain itu,anda juga dapat membuka dokumen yang belum pernah di buka dengan Adobe Dreamweaver CS4 dengan cara memilih menu OPEN.

Create New 

Menu ini di gunakan untuk membuat dokumen web baru.Anda dapat membuat dokumen dengan beberapa tipe yang di sediakan oleh Adobe Dreamweaver CS4, Antara lain :


HTML
Hypertext Markup Languange (HTML) adalah sebuah bahasa dasar yang di gunakan untuk merancang halaman web statis.

Coldfusion
Coldfusion adalah bahasa scripting yang di gunakan untuk pemrogaman web server.Coldfusion digunakan pada Adobe Coldfusion, BlueDragon dan lainnya.

PHP
PHP Hypertext preprocessor (PHP) merupakan bahasa pemrogaman scripting web server-side. dengan pemrogaman server-side,sebuah website akan lebih dinamis.PHP biasanya terpasang pada file HTML yang di simpan dengan ektensi *.php.



Top Features (video)

Merupakan menu pilihan link yang berupa rekaman video penggunaan fasilitas yang di sediakan Dreamweaver secara online. menu link rekaman video yang di sediakan, antara lain: Related Files, Live View, Code navigator, Dataset Wizard, Web Widgets, JavaScript Support, Dsb

Help Online

Merupakan menu pilihan untuk menampilkan bantuan tentang cara penggunaan, fitur fitur terbaru Adobe Dreamweaver CS4 dan lainnya secara online.

Don't Show Again

Kotak dialog start page akan selalu di tampilkan bersamaan dengan jendela utama Adobe DreamweaverCS4 saat aplikasi ini di jalankan. Agar kotak dialog star page tidak di tampilkan lagi, centang checkBox > Don't Show Again



Area Kerja Adobe DreamweaverCS4

adalah lingkungan yang di gunakan untuk merancang halaman web anda. Pada area kerja ini terdapat jendela utama, yaitu jendela dokumen (Document Window) yang berfungsi untuk mendesain halaman, baik dengan cara penulisan kode maupun secara visual. selain itu, juga terdapat menubar, Toolbar, dan panel panel yang membantu desain halaman web dengan mudah. Berikut penjelasan beberapa Area kerja Adobe Dreamweaver CS4 beserta kegunaannya

Menubar

Menubar adalah sebuah grup menu yang terdapat pada bagian atas aplikasi yang tersusun dari deretan text/label. Setiap menu terdiri dari submenu-submenu sesuai kategori menu masing-masing. menu menu pada Menubar ini jarang di gunakan. Biasanya fasilita pada Menubar telah diwakili dalam sebuah panel yang di miliki Adobe Dreamweaver CS4, misalnya menu insert pada menubar telah diwakili dengan panel insert pada panel group

Workspace Switcher

Workspace Switcher adalah sebuah fasilitas yang berfungsi untuk mengubah mode tampilan area kerja sesuai kebutuhan perancang web. Workspace Switcher ini berada sejajar dengan Menubar sebelah kanan Secara default, mode tampilan area kerja Adobe Dreamweaver CS4 adalah mode Desaigner. Adobe Dreamweaver CS4 memiliki mode area kerja yang banyak, diantaranya mode Coder yang hanya menampilkan kode pembuatan halaman dan Classic.

Document Title

Document Title adalah nama dokumen yang dibuka pada workspace Adobe Dreamweaver. Anda dapat menutup sebuah dokumen melalui Document Title. pada Document Title ini juga ditampilkan Path/Direktori di mana dokumen itu di simpan

Document Toolbar 

Toolbar adalah kumpulan tombol yang berfungsi memudahkan oengembang untuk mengunakan fasilitas yang disediakan Dreamweaver. Pada toolbar ini, terdapat tombol-tombol untuk mengubah mode jendela dokumen yang ditampilkan dan beberapa tombol lain.

Code
Tombol Code ini berfungsi mengubah jendela dokumen menjadi mode code. yaitu jendela dokumen yang menampilkan kode html dokumen/halaman web yang aktif. Selain itu, anda dapat mengubah jendela dokumen menjadi mode Code melalui Menubar View > Code.

Split
Tombol ini berfungsi mengubah mode jendela dokumen menjadi Split, yaitu jendela dokumen akan
menampilkan kode dokumen dan tampilan desain (grafis/visual) dokumen. Document Window akan menjadi dua bagian atas dan bawah. Bagian atas menampilkan source code, dan bagian bawah menampilkan visual/grafis dari halaman web.
DesignTombol ini berfungsi mengubah mode dokumen window menjadi mode design, yaitu Document
Window hanya akan menampilkan desain web secara visual/grafis dari halaman web.

Live Vew
Tombol ini berfungsi menampilkan desain web sebagaimana browser pada jendela dokumen mode design. Tombol ini akan menyebabkan jendela dokumen mode desain tidak dapat di edit, namun
anda tetap dapat mengubah kode html-nya.

Live Code
Tombol n akan aktif jika mode Live View dipilih, Tombol ini akan membuat kode HTML pada
jendela dokumen mode Code tidak dapat di edit. hal ini ditandai dengan perubahan warna background pada jendela dokumen.

Text Field Title
Text Field Title berfungsi untuk menambahkan judul halaman web. Title ini akan ditampilkan pada titlebar browser.

File Management
Menampilkan menu pop-up untuk mengorganisasi file-file yang dibutuhkan oleh dokumen web.

Preview/Debug in Browser
Tool ini digunakan untuk menampilkan halaman web yang aktif pada browser.

Refresh Design
Tool ini digunakan untuk me-refresh desain dokumen setelah ada perubahan kode dokumen. Hal ini akan membuat desain visual dokumen berubah sesuai perubahan pada kode HTML dokumen.
Tool Refresh dibutuhkan karena perubahan kode HTML dokumen tidak secara langsung otomatis mengubah desain dokumen.

View Option
Tool ini berupa menu pop-up yang digunakan untuk mengatur jendela dokumen, baaik tampilan kode maupun tampilan desain. Melalui menu ini, anda dapat menampilkan nomor baris kode, menampilkan isi/content dari tag head, membuat jendela desain mempunyai ukuran/rulers , berbentuk grid , Dsb

Visual Aids
Visual Aids digunakan untuk tampilan desain yang berbeda dalam mendesain halaman web.

Validate Markup
Validate Markup digunakan untuk melakukan koreksi dokumen yang aktif atau tag yang terpilih.

Check Browser compability
Tool ini digunakan untuk mengecek apakah aturan CSS yang anda gunakan kompatible dengan browser yang berbeda.


> Document window

Document Window adalah area yang digunakan untuk membuka, mengedit, menampilkan desain dokumen dan atau kode dokumen web yang aktif. jendela dokumen ini mempunyai tool-tool yang digunakan untuk menampilkan informasi pada halaman, seperti Related File And Code Navigator, Tag Selector, dan fasilitas lain, seperti Zooming, Hand Tool, Selected Tool, dan informasi lainnya.


> Panel group

Panel Group merupakan kumpulan panel berupa tab-tab pilihan yang mempunyai fungsi berbeda-beda. Panel adalah sebuah jendela untuk memudahkan pembuatan desain web dengan menampilkan informasi pendukung pada jendela informasi sehingga anda dapat mengedit dan memanfaatkan data yang ada pada area tersebut. Terdapat banyak sekali panel, diantaranya panel insert yang berfungsi untuk menambahkan komponen komponen web ke dalam desain halaman anda kemudian panel files yang berfungsi menampilkan file-file yang telah anda buat, baik file gambar, html, dan folder yang terdapat pada site yang anda definisikan. untuk menampilkan panel yang lain anda dapat menggunakan menu Windows.


> Tag Selector

Tag Selector berfungsi menampilkan tag yang di seleksi pada area desain. Anda dapay menyeleksi bagian desain dengan memilih tag yang sesuai. sebagai contoh, untuk menyeleksi semua elemen halaman, klik tag <body>


> Panel Properties

Panel Properties berfungsi menampilkan properti dari elemen halaman web yang terpilih, melalui panel ini anda dapat mengubah properti elemen tersebut, baik dengan penambahan properti CSS maupun properti dari tag HTML.


Perangkat Tambahan

Selain Adobe DreamweaverCS4, anda juga membutuhkan sebuah browser yang berfungsi menampilkan hasil desain halaman web. sementara itu, untuk membuat website yang dinamis anda membutuhkan sebuah database (misalnya MySql), sebuah server web (misalnya Apache) dan sebuah phpAdmin untuk melakukan pengolahan database dengan php. Berikut penjelasannya...

Catatan:
"Perangkat tambahan Server Web diperlukan bila anda membuat sebuah halaman website yang dinamis (Dinamic Web), tapi bila anda hanya ingin membuat halaman web statis / sederhana, maka anda tidak memerlukan aplikasi Server Web"


> Server Web

Server Web dibutuhkan untuk melakukan pemrograman yang membutuhkan teknologi server-side seperti PHP, ColdFusion, ASP, dan JSP. oleh karena itu, server web merupakan perangkat yang penting untuk melakukan uji coba pemrograman server-side yang anda buat. dengan demikian anda tidak perlu melakukan upload data ke sebuah hosting hanya untuk mengetahui hasil pemrograman untuk sisi server. Pemrograman server-side biasanya digunakan untuk mangakses database yang terdapat pada server hosting, sehingga pengembang dengan mudah mengelola content website dengan mudah tanpa mengubah halaman halaman web.
Salah satu teknologi aplikasi server web yang lengkap yang dapat anda gunakan adalah aplikasi AppServ yang merupakan kumpulan aplikasi pendukung pembangun website. pada paket AppServ versi 2.5.8 terdapat aplikasi aplikasi berikut:

> Server web Apache versi 2.2.4

> Bahasa scrip PHP versi 5.3.1

> phpMyAdmin Database Manager versi 2.9.2

> Database MySQL versi 5.0.27

0 komentar:

Poskan Komentar

Twitter Delicious Facebook Digg Stumbleupon Favorites More