Skip to main content

Cara Menggunakan Adobe Dreamweaver

Coding is the Next Big Thing! #CODETOBUILD part 1 (Februari 2025)

Coding is the Next Big Thing! #CODETOBUILD part 1 (Februari 2025)
Anonim

Adobe Dreamweaver adalah alat yang sangat kuat untuk perancang Web, karena memiliki begitu banyak hal yang dapat Anda lakukan dengannya. Tentu saja, semua hal yang dapat Anda lakukan membuatnya menantang untuk dipelajari. Cari tahu beberapa hal yang dapat dilakukan Dreamweaver, termasuk perubahan dalam versi terbaru, CS5. Dan jangan lupa untuk memeriksa hal-hal yang hilang dari Dreamweaver CS5.

Mendefinisikan Situs

  • Mulai situs web baru
  • Buat situs web
  • Siapkan hanya bagian-bagian situs yang Anda butuhkan, ketika Anda membutuhkannya * Baru di CS5
  • Siapkan remote, QA, dan server pengujian untuk alur kerja yang lebih lengkap * Baru di CS5
  • Buat dan terbitkan direktori baru
  • Ubah doctype
  • Sertakan data meta di halaman Anda

Menempatkan Situs Anda Langsung

  • Tentukan situs jarak jauh
  • File FTP ke server web
  • Gunakan sistem kontrol versi untuk memeriksa file masuk dan keluar
  • Terhubung dengan Subversion untuk kontrol versi yang lebih canggih * Baru di CS5
  • Tinggalkan catatan untuk rekan tim Anda

Membuat Halaman Web

  • Tulis halaman dalam mode WYSIWYG
  • Tulis halaman dalam HTML
  • Buat halaman baru dari template
  • Buat halaman baru dari awal
  • Buat template
  • Simpan file ke direktori situs Anda
  • Tentukan properti halaman

CSS

  • Gunakan style sheet CSS
  • Menambahkan gaya sebaris
  • Buat style sheet eksternal
  • Lampirkan lembar gaya eksternal
  • Buat kelas, ID, tag, dan pemilih CSS gabungan
  • Edit aturan CSS yang ada
  • Buat CSS untuk halaman yang dapat dicetak
  • Aktifkan dan nonaktifkan properti gaya * Baru di CS5
  • Periksa model kotak CSS secara visual * Baru di CS5

Teks

  • Ubah teks
  • Gunakan font berbeda
  • Masukkan jeda baris
  • Gunakan karakter khusus
  • Sertakan tanggal hari ini
  • Tulis komentar
  • Terapkan tag HTML ke teks
  • Tambahkan atribut HTML ke tag

Tautan

  • Tautkan teks dan gambar
  • Periksa tautan situs
  • Ubah warna tautan default (tautan, dikunjungi, arahkan, aktif)
  • Buat kiat alat pada tautan
  • Buat tautan mailto
  • Buat jangkar halaman web

Gambar

  • Tambahkan grafik ke halaman
  • Edit gambar
  • Ubah ukuran gambar
  • Tambahkan teks alt ke gambar
  • Tambahkan opsi aksesibilitas tambahan ke gambar
  • Selaraskan gambar dan teks
  • Buat gambar rollover
  • Gunakan peta gambar
  • Gunakan penelusuran gambar
  • Gunakan placeholder gambar
  • Masukkan Fireworks HTML
  • Masukkan file Photoshop

Layout

  • Gunakan template gratis yang disertakan * Tata letak starter CSS baru di CS5
  • Masukkan div untuk tata letak
  • Edit divs di panel style CSS
  • Masukkan elemen yang diposisikan secara mutlak
  • Memformat elemen yang diposisikan secara mutlak di inspektur properti
  • Gunakan penggaris, kisi, dan panduan

Daftar

  • Tambahkan daftar berpoin dan bernomor
  • Sesuaikan daftar butir dan angka

Meja

  • Buat tabel
  • Tambahkan baris dan kolom tajuk
  • Gunakan gambar transparan untuk menahan sel tabel terbuka
  • Buat lebar tetap dan lebar kolom fleksibel
  • Ubah gaya tabel perbatasan
  • Tanamkan sebuah meja dalam sebuah tabel
  • Impor data tabular

Formulir

  • Gunakan formulir mailto
  • Tentukan tindakan formulir
  • Tambahkan teks, radio, kotak centang, file, gambar, kotak pilih, dan bidang formulir tersembunyi
  • Buat formulir Anda dapat diakses dengan field fieldset dan label
  • Buat tombol kirim khusus
  • Validasi formulir dengan JavaScript (Spry)

Database dan PHP Scripting

  • Lampirkan situs Anda ke database
  • Menyiapkan situs PHP / mySQL
  • Gunakan elemen Spry untuk terhubung ke database
  • Masukkan objek data ke halaman Anda
  • Uji dan perbarui sumber atau tampilan data Spry
  • Edit situs dinamis yang kompleks dalam tampilan desain
  • Temukan semua file yang terkait secara dinamis untuk merakit situs PHP CMS (WordPress, Joomla, dan Drupal) * Baru di CS5
  • Kelas kustom mengisyaratkan untuk kode PHP, termasuk kerangka pihak ketiga seperti kerangka Zend * Baru di CS5

Bingkai

  • Bangun situs web berbingkai
  • Edit konten noframes
  • Format dan gabungkan bingkai Anda
  • Siapkan target tautan default antar bingkai

Tambahkan Interaktivitas

  • Buat album foto (Tidak lagi di CS5)
  • Tambahkan suara ke halaman web
  • Buat menu drop-down
  • Gunakan perilaku Dreamweaver untuk membuka jendela pop-up, buat menu melompat, putar suara, tukar gambar, dan banyak lagi
  • Tambahkan umpan RSS ke situs
  • Masukkan teks Flash sebagai rollover
  • Masukkan teks CSS sebagai rollover
  • Masukkan plugin lain
  • Tambahkan menu sigap, panel tab, akordeon, ujung alat, dan panel yang bisa diciutkan
  • Gunakan Widget Browser untuk menemukan widget baru untuk situs Anda, tanpa perlu tahu JavaScript

Uji Halaman Anda

  • Uji halaman Anda di Live View untuk melihat perubahan karena JavaScript dan interaktivitas * Baru di CS5
  • Validasi HTML Anda
  • Pratinjau halaman Anda di beberapa browser
  • Gunakan BrowserLab untuk melihat halaman Anda di sistem operasi lain * Baru di CS5
  • Gunakan Pusat Perangkat untuk memeriksa bagaimana tampilan laman di perangkat seluler
  • Periksa kompatibilitas browser
  • Ubah pengaturan agar sesuai dengan kebutuhan situs Anda
  • Periksa tautan situs internal
  • Uji aksesibilitas situs Anda (Tidak lagi di CS5)
  • Konversi Dokumen Word ke HTML

Sesuaikan Dreamweaver

  • Tambahkan ekstensi
  • Nonaktifkan ekstensi
  • Sesuaikan Dreamweaver dengan pintasan

Tingkatkan Efisiensi Anda

  • Gunakan pintasan keyboard built-in
  • Gunakan cuplikan kode
  • Buat dan gunakan template
  • Hasilkan halaman baru dari template khusus
  • Perbarui template
  • Sertakan satu file di lain dengan pustaka Dreamweaver
  • Perbarui item perpustakaan
  • Sertakan satu file di lain menggunakan SSI
  • Gunakan pencarian dan ganti