Apakah Anda baru untuk membangun website atau Anda seorang pengembang berpengalaman, Dreamweaver adalah salah satu alat yang sulit untuk hidup tanpa. Alih-alih menggunakan seperangkat alat dan utilitas, Anda dapat menggunakan fitur pratinjau visual, alat coding, dan alat-alat yang berhubungan dengan server Dreamweaver untuk mempercepat pembangunan.
Dalam artikel ini, saya memandu Anda melalui beberapa fitur baru dalam Dreamweaver CS6 dan memperkenalkan Anda ke alur kerja dasar untuk membuat sebuah situs web sederhana. Anda akan membangun template untuk situs Web galeri foto, termasuk halaman rumah, halaman rinci, dan sebuah bar navigasi
Langkah 1: Rencanakan website
Hal pertama yang harus dilakukan adalah menentukan halaman yang akan dimasukkan dalam website dan tema visual halaman akan digunakan untuk branding dan tata letak. Hal ini dapat cukup tugas yang luas untuk website yang kompleks, tetapi untuk tujuan tutorial ini, galeri foto akan mengikuti desain yang sangat sederhana
Pada dasarnya galeri terdiri dari tata letak tunggal yang digunakan untuk membangun sebuah halaman rumah dan detail halaman. Karena semua halaman akan mengikuti desain yang sama, itu ide yang baik untuk menggunakan template Dreamweaver.
Sebelum Anda memulai:
Langkah 2: Buat situs baru di Dreamweaver
Dreamweaver mengatur proyek oleh situs web dan menyediakan File dan Aset panel sehingga Anda dapat dengan mudah mengatur dan menyebarkan konten. Pada langkah ini, Anda akan mengatur folder website dan kemudian membuat situs baru di Dreamweaver.Sebelum Anda memulai:
- Download file proyek (ZIP, 9 MB) dan unzip arsip. Simpan file Anda diterbitkan dalam folder ini dan menggunakan aset proyek untuk mengikuti langkah-langkah dalam tutorial.
- Download file proyek selesai (ZIP, 9 MB) untuk digunakan sebagai referensi. Anda dapat mendekonstruksi file-file ini jika Anda mengalami masalah.
- Download percobaan gratis dari Dreamweaver CS6 dan menginstal aplikasi jika Anda belum melakukannya. Anda juga dapat menggunakan keanggotaan Creative Cloud untuk men-download dan menginstal produk.
- Buka Dreamweaver dan pilih Site> New Site.
- Pada kotak dialog Site Setup, masukkan Galeri Foto di Situs Nama lapangan dan klik folder di sebelah kolom Folder Situs Lokal untuk mencari folder dwcs6_project, yang termasuk dalam file proyek baru saja Anda download.
- Klik Save untuk membuat situs. Perhatikan bahwa File dan Aset panel sekarang mencerminkan isi di dalam folder proyek website. Perhatikan bahwa Anda akan menggunakan konten yang disediakan dari _Source dan Gambar folder.
- Sebelum Anda memulai, luangkan waktu untuk menjelajahi ruang kerja Dreamweaver (lihat Gambar 3). Wilayah utama perubahan layar tergantung pada apakah Anda sedang melihat tampilan Kode, Desain, Tampilan Split, atau mode Live View. Daerah ini adalah di mana Anda akan melihat pekerjaan Anda. Panel Properties di bagian bawah layar adalah konteks sensitif dan menampilkan properti untuk objek yang dipilih. File dan Aset panel memungkinkan Anda untuk mengelola file dalam website. Panel CSS Styles memungkinkan Anda untuk mengelola teks dan format gaya di seluruh situs web. Mobile Ukuran, Tablet Ukuran, dan tombol Ukuran Desktop pada bagian bawah layar dalam Design view memungkinkan Anda untuk memeriksa pekerjaan Anda pada ukuran standar.
- Tutup file HTML kosong ketika Anda selesai.
Langkah 3: Lay out template website menggunakan Fluid Tata Letak Grid
The Fluid fitur Grid Layout baru untuk Dreamweaver CS6. Ini menyediakan cara mudah untuk menggunakan CSS untuk membuat layout halaman cairan yang dapat ukuran sendiri untuk setiap layar atau perangkat. Pada langkah ini, Anda akan menciptakan landasan untuk template website:- Pilih File> New Fluid Grid Layout untuk meluncurkan kotak dialog New Document. Perhatikan bahwa Fluid Grid Layout pilihan termasuk pengaturan untuk ponsel, tablet, dan ukuran dekstop. Konsepnya adalah bahwa Anda akan lay out konten dalam kotak tag div diatur untuk mulus rentang halaman. Masing-masing dari tiga ukuran dapat menentukan tata letak CSS sendiri untuk setiap tag div. Pada langkah ini, Anda dapat mengubah jumlah kolom, spasi, dan margin untuk setiap tata letak.
- Mengubah lebar kolom dari 25% menjadi 15% dan mengubah pengaturan margin 90% untuk semua tiga ukuran (lihat Gambar 4)
- Ketika Anda mengklik tombol Create, Dreamweaver akan menghasilkan file CSS untuk menyimpan pengaturan jaringan CSS Anda saat Anda bekerja. Klik Buat dan menyimpan file CSS dengan GalleryTemplate.css nama dalam folder Aset.
- Perhatikan bahwa tampilan Desain update, dan sekarang Anda melihat layout grid dalam ukuran layar ponsel.
- Simpan file di root folder proyek dengan nama layout.html. Dreamweaver akan meminta Anda di mana Anda ingin menyalin CSS tergantung dan file JavaScript yang pergi bersama dengan halaman jaringan cairan. Anda tidak perlu melakukan apa-apa dengan file-file ini, tetapi mereka perlu dimasukkan dengan situs. Browse folder Aset dan klik Copy.
Langkah 4: Tambahkan tag div dan konten placeholder
HTML hanyalah sebuah pohon bersarang tag yang mendefinisikan hubungan konten pada halaman web. Dalam contoh ini, bagian dari HTML yang Anda lihat di browser dimulai dengan tag <body>, diikuti oleh tag <div> bersarang dan tag </ body> tag. Sebuah tag div adalah elemen organisasi yang digunakan untuk konten grup pada halaman dalam cara yang logis. Gaya CSS dapat diberikan ke setiap tag div untuk memformat teks dan menambahkan gaya tata letak seperti posisi, latar belakang, dan perbatasan.Pada langkah ini, Anda akan membuat tiga tag div sebagai baris dalam grid dan menambahkan konten placeholder:
- Pilih teks dalam tag div yang ada dan menghapusnya. Tag div ini akan terus gambar besar.
- Tempatkan kursor pada tag div dan ketik Tambah foto di sini sebagai tempat untuk template.
- Klik tombol Split pada sisi kiri atas ruang kerja untuk menampilkan baik tampilan Kode dan Design view. Ini sering lebih mudah untuk mengedit dan memperbaiki masalah-masalah di tampilan Kode.
- Tambahkan tag div lain dengan memilih tag LayoutDiv1 dalam kode atau sepanjang pemilih tag (lihat Gambar 5) dan pilih Insert> Object Tata Letak> Fluid Grid Tata Letak Div Tag. Klik OK untuk menerima pengaturan default. Memilih tag div sebelumnya sebelum memasukkan tag div berikutnya merupakan langkah penting untuk memastikan tag samping satu sama lain dalam hirarki kode.
- Hapus teks dalam tag div baru dan ketik Tambahkan teks di sini sebagai pengganti.
- Tambahkan cairan layout grid tag div lain untuk menambahkan baris lain di bawah baris teks. Tag div ini akan mengadakan serangkaian gambar thumbnail.
- Klik di dalam tag div baru dan pilih Insert> Image. Browse file image1.jpg dari folder Images / Thumb dan klik OK. Masukkan alt teks Gambar 1 ketika diminta dan klik OK. Ulangi proses ini untuk sisa sembilan gambar thumbnail. Anda juga dapat menarik gambar ke tag div dari File atau panel Aset, atau Anda dapat menambahkan gambar dengan menyalin dan menyisipkan tag <img> Kode tampilan sementara memperbarui referensi berkas.
Langkah 5: Tambahkan gaya untuk memformat tata letak
Gaya CSS memungkinkan Anda untuk memformat teks dan presentasi visual dari tata letak tag div. Memisahkan definisi format dari definisi konten dalam tag div memungkinkan untuk alur kerja desain yang fleksibel.Pada langkah ini, Anda akan memformat warna latar belakang, gaya font, div tag tata letak gaya, dan gaya gambar thumbnail untuk memformat template:
- Pilih Modify> Page Properties untuk membuka kotak dialog Page Properties. Anda dapat menggunakan Page Properties untuk menentukan pengaturan global untuk halaman.
- Update properti berikut di bawah Penampilan (CSS) kategori dan klik OK:
- Font halaman: Trebuchet MS, Arial, Helvetica, atau huruf sans-serif lain
- Ukuran: 16
- Warna teks: # FFF
- Warna latar belakang: # 333
- Tambahkan lebih banyak gaya untuk tag tubuh ke pusat-menyelaraskan semua konten dan menambahkan beberapa padding atas. Untuk melakukan ini, klik tombol All di bagian atas panel CSS Styles untuk menampilkan semua aturan style di situs tersebut. Klik aturan tubuh di bawah kontrol pohon <style>, yang menunjukkan gaya background-warna yang Anda baru saja menambahkan dalam pengaturan Page Properties.
-
Untuk menambahkan properti, klik tombol Add Property, pilih properti
dari menu, dan masukkan nilai dalam bidang yang dihasilkan. Tambahkan properti berikut:
- text-align: center
- padding-top: 20px
- Cairan jaringan tata letak halaman selalu muncul dengan orangtua tag div yang berisi semua tag div Anda yang lain.
Tambahkan gaya ke div orangtua dengan memilihnya dalam kode atau dengan
mengklik CSS tata letak panduan box terluar di Design view. Klik tombol sekarang di panel CSS Styles dan menambahkan gaya berikut:
- border: 8px padat # 000
- background-color: # 000
- Klik di manapun dalam tag div kedua untuk memilihnya. Perhatikan bahwa gaya tag div yang muncul pada panel CSS Styles. Tambahkan gaya berikut:
- padding-top: 12
- Padding-bottom: 12
- Tambahkan beberapa jarak ke gambar dengan menyesuaikan gaya marjin mereka. Klik salah satu gambar thumbnail untuk memilihnya dan klik tombol New Rule CSS di bagian bawah panel CSS Styles. Klik OK dalam Peraturan CSS kotak dialog New. Tambahkan gaya berikut dalam kategori Box di kotak dialog Definition Rule CSS dan kemudian klik OK untuk menerapkan gaya:
- margin: 5 px (sama untuk semua)
- Perhatikan bahwa aturan CSS baru muncul yang dipilih pada panel CSS Styles. Klik tombol Add Properti dan menambahkan properti berikut:
- border: solid 1px # 000
- opacity: .75
- Simpan file.
Langkah 6: Buat template Dreamweaver dengan daerah yang bisa diedit
Website ini sengaja dirancang untuk menjadi sangat sederhana dengan halaman galeri berbagi tata letak yang sama.
Daripada mengulangi semua pekerjaan untuk setiap halaman atau copy dan
paste kode, Anda dapat membuat template Dreamweaver (DWT) berkas.
Template Dreamweaver mengandung daerah yang bisa diedit dan non-diedit
yang dapat digunakan untuk menentukan pendekatan yang konsisten untuk
tata letak dan branding.
Template tetap terkait dengan setiap halaman Anda menerapkannya ke,
yang membuatnya mudah untuk menambahkan perubahan global dari satu
lokasi.
Pada langkah ini, Anda akan membuat sebuah template DWT dari file layout.html dengan daerah yang bisa diedit dan non-diedit:
Pada langkah ini, Anda akan membuat sebuah template DWT dari file layout.html dengan daerah yang bisa diedit dan non-diedit:
- Dengan file layout.html masih dalam tampilan ini, pilih File> Save As Template. Kotak dialog Save As Template muncul.
- Tambahkan deskripsi singkat dan mengubah nama file Save As ke GalleryTemplate.
- Klik tombol Save untuk membuat template. Pada panel Files, Anda dapat melihat bahwa folder baru bernama Template muncul di situs tersebut, dan file tersebut telah disimpan sebagai GalleryTemplate.dwt.
- Pilih gambar Add sini teks dan pilih Insert> Obyek Template> Editable Region. Kotak dialog New Editable Region muncul. Masukkan nama Gambar area dan klik OK.
- Pilih Tambahkan teks di sini dan ulangi langkah 4. Nama diedit wilayah Text Area.
- Simpan file.
Langkah 7: Membuat halaman website dengan menambahkan gambar dan teks
Membuat halaman galeri mudah. Yang harus Anda lakukan adalah membuat halaman baru dengan menggunakan template dan drop gambar dan teks yang disediakan ke daerah placeholder.Pada langkah ini, Anda akan membuat halaman detail menggunakan template dan aset yang disediakan:
- Pilih File> New> Page Dari Template> GalleryTemplate dan klik Create. Jelajahi halaman baru dan perhatikan bahwa hanya tiga daerah yang bisa diedit dapat diubah.
- Buat halaman rumah dengan menyimpan file dengan nama index.html. Web server secara otomatis akan menampilkan halaman index.html ketika Anda browse ke URL dari situs web.
- Menghapus teks template dalam Gambar area dan tempatkan kursor di wilayah diedit Gambar area.
- Pilih Sisipkan> Foto dan cari file HomePageImage.psd dalam folder _Source. Karena gambar adalah file Photoshop, Dreamweaver meminta mempublikasikan pengaturan pada Optimasi kotak dialog Image. Klik OK untuk menerima pengaturan default mempublikasikan dalam format JPEG dan menyimpan gambar yang dihasilkan dalam folder Foto. Jika Anda kebetulan untuk memperbarui file PSD di Photoshop, Dreamweaver secara otomatis akan memperbarui file JPEG. Masukkan alt teks Halaman saat diminta.
- Hapus teks dalam daerah diedit Text Area dan ketik Klik thumbnail untuk melihat gambar.
- Simpan file.
- Buat halaman baru yang lain dari template dan menyimpan file dengan nama page1.html.
- Menghapus teks template dalam Gambar area dan menggantinya dengan image1.jpg dari Images / folder penuh. Masukkan alt teks Gambar 1 saat diminta.
- Hapus teks dalam Text Area dan menambahkan Fotografi teks 1 di tempatnya.
- Simpan file.
- Ulangi langkah 7 sampai 10 untuk masing-masing gambar yang tersisa untuk mengubah nama file dan teks sesuai dengan jumlah gambar dalam urutan.
Langkah 8: Buat bar navigasi
Bar navigasi adalah fitur umum dalam desain website dan dapat muncul dalam berbagai bentuk.
Pada dasarnya mereka membuat hyperlink antar halaman dalam website
(atau di tempat lain), dan mereka memberikan isyarat visual sebagai
panggilan untuk bertindak.
Pada langkah ini, Anda akan mengkonversi gambar thumbnail ke sebuah bar navigasi:
Pada langkah ini, Anda akan mengkonversi gambar thumbnail ke sebuah bar navigasi:
- Kembali ke halaman GalleryTemplate.dwt (yang Anda dapat membuka dari folder Template di panel Files jika Anda perlu). Anda akan menambahkan link navigasi ke template sehingga setiap halaman menerapkan template mewarisi update.
- Klik thumbnail pertama di sebelah kiri (image1.jpg) untuk memilihnya. Klik Point ke File ikon di sebelah field Link di panel Properties dan tarik kursor ke file yang ingin Anda link ke dalam panel Files (lihat Gambar 10). Anda dapat secara manual memasukkan URL pada field Link, tetapi menggunakan Point Untuk fitur Berkas memastikan bahwa link dari template di folder Template untuk halaman target HTML benar.
- Ulangi langkah 2 untuk setiap gambar thumbnail dan file HTML.
- Simpan file dan memilih pembaruan link ketika diminta.
Langkah 9: Tambahkan transisi halaman CSS3
Transisi CSS3 memberikan tingkat baru dukungan animasi langsung ke lingkungan HTML, memungkinkan flash seperti efek menggunakan teknologi standar web.Pada langkah ini, Anda akan menambahkan CSS3 rollover transisi ke gambar thumbnail untuk menciptakan pengalaman visual menarik:
- Kembali ke halaman GalleryTemplate.dwt jika Anda tidak sudah ada.
- Pilih gambar thumbnail dan memilih Transisi Window> CSS untuk membuka panel Transisi CSS.
- Klik tombol Create New Transisi (+) untuk meluncurkan kotak dialog Transisi Baru (lihat Gambar 11).
- Mengubah parameter berikut:
- Aturan Target:. GridContainer.clearfix # LayoutDiv3 img
- Transisi On: Hover
- Durasi: .5 s
- Delay: 0s
- Timing Fungsi: Kemudahan-Out
- Efek rollover akan menambahkan sorot putih ke perbatasan gambar thumbnail, dan gambar akan menjadi benar-benar terlihat. Klik tombol Ditambah bawah wilayah Property dan mengatur gaya dan nilai-nilai berikut:
- border-color: # FFF (putih)
- opacity: 1
- Klik Buat Transisi untuk menambahkan gaya transisi ke situs.
- Simpan file.
Pada titik ini, Anda telah membuat halaman rumah dan detail halaman, dan Anda telah menambahkan sentuhan akhir ke bar navigasi dengan transisi CSS3.
New Transisi kotak dialog.
Langkah 10: Preview dan menyebarkan pekerjaan Anda
Ini adalah ide yang baik untuk melihat pekerjaan Anda sesering Anda membangun website. Dreamweaver CS6 menyediakan beberapa cara untuk melihat, termasuk menggunakan tampilan Design, menggunakan Live View, menggunakan Multiscreen Preview, dan melihat pratinjau di browser.Anda akan menemukan bahwa menggunakan Design view dan Live View adalah cara termudah untuk memeriksa pekerjaan Anda sebelum penerbitan. Meninjau di browser adalah tugas bersama yang menunjukkan pekerjaan Anda di browser default Anda. Multiscreen Preview berguna ketika memeriksa pekerjaan Anda untuk ukuran mobile dan tablet. Pada langkah ini, Anda akan mengeksplorasi pilihan Anda untuk melihat pratinjau pekerjaan Anda.
Periksa pekerjaan Anda menggunakan Live View:
- Klik tombol Live di kiri atas ruang kerja. Setelah Anda masuk ke mode ini, Anda dapat melihat pratinjau CSS3 dan HTML5 fitur di tempat kerja.
- Klik tombol Live lagi untuk kembali ke Design view.
- Simpan file.
- Pilih File> Preview Dalam Browser untuk meluncurkan halaman ini dalam browser sasaran. Anda juga dapat meluncurkan halaman menggunakan Preview / Debug Dalam tombol Browser di atas Design view.
- Mengubah ukuran jendela browser untuk melihat tata letak cairan mengubah ukuran sendiri.
Periksa pekerjaan Anda menggunakan Multiscreen Preview dengan memilih Window> Multiscreen Preview.
Sekarang website selesai, Anda harus meng-upload ke server sehingga orang berselancar di Internet dapat melihatnya. Anda dapat menggunakan alat FTP untuk mencapai hal ini, tapi panel Dreamweaver Files memiliki kemampuan FTP dibangun ke dalamnya. Dreamweaver CS6 meliputi peningkatan kinerja sehingga Anda dapat meng-upload file besar dan situs-situs besar lebih cepat dan lebih efisien dari sebelumnya.
Jelajahi menggunakan alat Dreamweaver FTP:
- Pada panel Files, klik Perluas Untuk Tampilkan Lokal Dan remote Situs tombol di kanan atas. Tombol ini memperluas panel untuk menunjukkan sistem file lokal dan remote server Anda.
- Dari menu utama, pilih Site> New Site untuk membuka kotak dialog Site Setup.
- Klik tombol Plus untuk menambahkan server baru.
- Masukkan nama server Anda, alamat FTP, username, dan password, dan klik Save.
- Klik Simpan di kotak dialog Setup Site untuk menyimpan perubahan.
- Dari sini, Anda dapat mengklik tombol Connect To remote Server untuk login ke server FTP Anda. Kemudian pilih file untuk meng-upload dan klik tombol Files Put (panah). Anda dapat menambah, menghapus, dan menyinkronkan file yang diperlukan.
- Klik Expand Untuk Tampilkan tombol (sekarang disebut Collapse) dan klik Tampilkan Site Hanya Lokal atau Remote. Kembali ke tampilan editing.
Tidak ada komentar:
Posting Komentar