Tutorial Dreamweaver CSS5 1st

Mengenal Dreamweaver 1st

Pedahuluan

Merancang sebuah website tidak terlepas dari pembuatan desain tampilan web tersebut, karena desain web merupakan langkah awal dari pembuatan website. Ini adalah bagian pertama bagian Mengenal Dreamweaver 1st sebelum kita beranjak ke bagian kedua Mengenal Dreamweaver 2st. Dasar pembuatan website menggunakan bahasa HTML (HyperText Markup Language) yaitu bahasa pemrograman dalam pembuatan web.Penggunaan HTML dalam pembuatan web tidak semua orang dapat menggunakannya untuk mempermudah dalam pembuatan web ini kita dapat menggunakan aplikasi editor web yang bersifat visual.

Salah satu aplikasi untuk melakukan perancangan desain web secara visual adalah Adobe Dreamweaver. Sebelum kita lanjutkan anda dapat men - Aplikasi Download Dreamweaver CS5 terlebih dahulu. Aplikasi ini secara umum sudah sangat poluler digunakan untuk merancang desain website.Aplikasi Adobe Dreamweaver menyediakan banyak fasilitas yang dapat memudahkan user dalam menghasilkan sebuah website yang interaktif dan menarik.

Menggunakan Adobe Dreamweaver

Untuk menjalankan program Adobe dreamweaver dapat kita buka dari menu start>Program>Adobe Dreamweaver CS5, akan muncul tampilan Starter Page berikut:

• Jendela Awal Dreamweaver CS5

Gambar di atas merupakan tampilan awal ketika kita membuka program Dreamweaver CS5. Adapun fungsi dari masing masing bagian di atas adalah sbb :

1. Open recent project
Fungsi : membuka project terakhir yang dibuat dalam Macromedia Dreamweaver ini. Atau kita bisa membuka project lain dengan klik open.
2.  New Project
Fungsi : Membuat project baru. Project baru dapat dipilih apakah akan menggunakan bahasa HTML, PHP, Javascript, CSS dsb. Untuk lebih lengkapnya dapat klik more yang tersedia dalam bagian New project
3. Top Features (Videos)
Fungsi : Membuka project yang tersedia dalam dreamweaver
4. File explorer
Fungsi : Tempat menu – menu dalam dreamweaver CS5 (dijelaskan lebih rinci pada halaman selanjutnya).
5. Properties panel
Fungsi : Menu yang menyediakan fasilitas yang dapat digunakan user dreamweaver SC5 (dijelaskan lebih rinci pada halaman selanjutnya).
6. Group Panel
Fungsi : Group panel merupakan panel berfungsi untuk koneksi project ke luar, baik itu CSS, database, file file, dsb.

• Halaman Kerja Dreamweaver CS5

Pada Starter Page di atas pada CreateNew pilihlah HTML, maka tampilan dari Adobe Dreamweaver adalah sebagai berikut:

• 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.

• 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.

• 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.

• Show Code View

Mode pada layar Code hanya akan menampilkan kode-kode script dari halaman web. Di sebelah

kiri layar kerja terdapat Coding tool yang digunakan untuk mengatur kode atau script tersebut.

Untuk mengaktifkan tampilan layar Code, Kita dapat menggunakan salah satu cara berikut:

1. Pada Menu Bar klik View >Code
2. Pada Document Toolbar klik ikon Code 
   

Tampilan layar code terlihat seperti gambar berikut:

• Show Code and Design view

Mode tampilan layar ini dikenal dengan mode Split, yaitu menampilkan atau menggabungkan secara bersamaan tampilan layar code dan tampilan layar design. Untuk menampilkan dokumen halaman web dalam mode Split, dapat menggunakan salah satu cara berikut:

1. Pada Menu Bar klik View > Design
2. Pada Document Toolbar klik ikon Design 
   

Tampilan layar Code and Design terlihat seperti gambar berikut:

• 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.

• Panel Group

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

• Insert Panel

Insert Panel berfungsi untuk menyisipkan objek-objek ke dalam halaman web. Pada Insert Panel terdapat beberapa Tab diantaranya:

- Common   - Layout

- Forms        - Data

- Spry           - InContext Editing

- Text           - Favorites

Itu adalah Tutorial Dreamweaver CSS5 1st

Baca artikel lain nya tentang HTML5 dan CSS3 disini

Tutorial Dreamweaver CSS5 1st 2015-01-07T03:27:00+07:00 Rating: 4.5 Diposkan Oleh: Unknown