Dreamweaver CS6 For Dummies Cheat Sheet - dummies

Oleh Janine Warner

Jika anda baru dalam reka bentuk web atau telah membuat halaman HTML selama bertahun-tahun, Adobe Dreamweaver CS6 adalah alat yang ideal untuk membina laman web anda. Dalam versi CS6, anda dapat melihat skrin selamat datang baru dan sokongan untuk yang terbaru dalam Cascading Style Sheets (CSS3) dan HTML5. Dreamweaver adalah program yang popular di kalangan pereka web profesional, serta orang yang ingin membina laman web untuk hobi mereka, kelab, keluarga, dan perniagaan kecil.

Skrin Selamat Datang Adobe Dreamweaver CS6

Antara muka grafik yang mudah digunakan oleh Dreamweaver dan senarai ciri yang kuat menjadikannya pilihan yang popular di kalangan pereka web profesional, serta penggemar. Dengan setiap versi baharu, Dreamweaver CS6 menawarkan ciri-ciri baru, tetapi anda masih dapat mencari skrin selamat datang yang biasa untuk membantu anda memulakannya.

Dreamweaver CS6: Menambah Shadows Teks dengan CSS3

Dalam Dreamweaver CS6, anda boleh meningkatkan reka bentuk anda dan memberikan kedalaman laman anda dengan lebih mendalam dengan menambah bayang-bayang teks dengan peraturan CSS3, teknologi web terkini. Menambah bayang-bayang teks menjadikan kata-kata anda lebih mudah dibaca, terutamanya jika reka bentuk anda mempunyai latar belakang yang kompleks atau jika latar belakang dan warna teks anda kurang jelas.

kredit: Paul Gual, istockphoto. com

Dreamweaver CS6 termasuk sokongan untuk bayang-bayang teks CSS3 apabila anda menggunakan panel Properties dalam panel CSS Styles. Anda boleh membuat gaya kelas atau ID dengan bayang-bayang teks, dan anda boleh menambah bayang teks kepada elemen HTML sedia ada dengan mendefinisikan gaya tag, seperti gaya tajuk 1 yang digunakan dalam imej.

Kod CSS3 yang mencipta bayangan teks ialah

h1 {teks-bayangan: 2px 2px 3px # 000;}

Nombor dalam kod tersebut menyatakan bahawa bayang teks perlu melanjutkan 2 piksel ke kanan dan 2 piksel di bawah teks dengan blur 3 piksel. Di samping itu, bayangan dibuat dengan warna hitam, ditentukan oleh kod warna heksadesimal yang disingkat # 000.

Apabila membuat peraturan untuk bayang-bayang teks anda boleh menentukan sehingga empat nilai:

• Mendatar dan menegak: Dua nilai nombor pertama yang diperlukan dan nyatakan offset melintang dan menegak - jarak bayangan jatuh meliputi di bawah teks (mendatar) dan di sebelah kanan teks (menegak).

• Rim Blur: Nilai ketiga menentukan jumlah kabur dalam bayang-bayang. Jika anda tidak menyertakan radius kabur, lalai adalah 0, yang menjadikan bayangan muncul sebagai warna pepejal.

• Warna: Nilai keempat menentukan warna bayangan dan boleh ditakrifkan menggunakan kod warna heksadesimal atau kod warna RGBa.

Anda boleh menambah bayangan teks menggunakan anak tetingkap Harta di bahagian bawah panel CSS Styles, seperti yang ditunjukkan dalam imej.Untuk berbuat demikian, ikuti langkah berikut:

1. Klik pautan Add Property di sebelah kiri CSS Styles Property pane.

2. Masukkan nama peraturan gaya CSS3, bayangan teks, atau pilih aturan gaya dari senarai juntai bawah.

   Selepas nama muncul di sebelah kiri, anak panah kecil muncul di sebelah kanan.

3. Klik untuk memilih anak panah di sebelah kanan bayang-bayang teks.

   Kotak muncul.

4. Masukkan X dan Y offset, jejari blur, dan warna.

Laman web dan Sumber untuk Pereka Web

Pereka web berpengalaman - sama ada mereka menggunakan Adobe Dreamweaver atau perisian reka bentuk web lain - sering merujuk kepada sumber dalam talian untuk mengikuti kemahiran mereka dan menambah ciri khas ke laman web mereka. Senarai ini memudahkan anda mencari beberapa laman web dan sumber dalam talian yang dapat membantu anda dengan projek reka bentuk web anda.

• YouTube

  • Vimeo

  • SoundCloud

  • Program Blogging dan CMS

• Blogger

  • Joomla

  • MovableType

  • TypePad

  • Tumblr > WordPress

  • Perkhidmatan Perkongsian Media Sosial

  • Tambah Ini

• Lockerz Kongsi

  • Perkhidmatan pelaporan lalu lintas:

  • Google Analytics

• Yahoo! Web Analytics

  • HubSpot

  • Pelayar web yang popular:

  • Apple Safari

• Google Chrome

  • Microsoft Internet Explorer

  • Mozilla Firefox

  • Opera

  • Lab Browser

  • BrowserShots

• Cross Browser Testing

  • Browser Sandbox from Spoon (formerly Xenocode)

  • Dreamweaver, CSS, dan sumber rekaan web:

  • Dreamweaver Developer Center

  • Training Design Web at DigitalFamily. com

• Penukaran W3 Sumber HTML5 dan CSS3

  • Senarai Senarai