Tutorial Dreamweaver


Tutorial Dreamweaver membuat laman webSeperti yang anda ketahui, laman web ini adalah mengenai cara membuat laman web. Anda boleh mempelajari pelbagai cara menggunakan WordPress, Joomla atau Drupal. Kami bahkan mempunyai panduan untuk menggunakan HTML tulen seperti pada masa lalu (jelas dengan HTML5, versi terbaru). Dalam tutorial Dreamweaver ini untuk pemula, anda akan belajar yang lain.


Bagi mereka yang tidak tahu, Dreamweaver adalah aplikasi yang membolehkan anda merancang, membuat kod dan mengurus laman web. Apa yang menarik tentang Dreamweaver ialah ia menawarkan kemungkinan untuk menulis kod serta membuat laman web menggunakan antara muka visual.

Dalam tutorial Dreamweaver ini, anda akan mempelajari semua yang perlu anda ketahui untuk mula membuat laman web dengan Dreamweaver. Anda akan mengetahui program dan apa yang dapat dilakukannya, ciri khas dan cara mengaturnya. Selepas itu, anda akan menemui panduan langkah demi langkah bagaimana membuat laman web mudah dengan Dreamweaver, menjadikannya mudah alih dan kemudian memuat naiknya ke pelayan anda.

Ini akan menjadi perjalanan panjang. Namun, anda akan kagum dengan seberapa cepat anda memasuki program yang sangat intuitif ini.

Contents

Apa itu Dreamweaver dan Apa Yang Boleh Dilakukannya?

Di permukaan, Dreamweaver adalah IDE (Integrated Development Environment). Ini bermaksud ia adalah perisian yang menggabungkan pelbagai alat untuk memudahkan reka bentuk dan pembangunan web.

Yang menjadikannya istimewa ialah ia berada di antara CMS (di mana anda mengawal segala-galanya mengenai laman web anda melalui antara muka visual) dan penyunting kod yang murni. Inilah cara bahagian yang berbeza berfungsi.

Buat Laman Web melalui Antaramuka Reka Bentuk Visual

Kotak alat reka bentuk visual pada dasarnya membolehkan anda membina laman web dengan tetikus anda. Ini membolehkan anda meletakkan elemen laman web dengan cara anda membuat susun atur di Word. Pada dasarnya, anda melihat laman web anda seperti yang anda lihat di penyemak imbas tetapi juga mempunyai kemampuan untuk memanipulasinya.

Ini sangat berguna kerana ia membolehkan anda membina kerangka laman web dengan cepat dan tanpa perlu menulis satu baris kod. Sebaliknya, Dreamweaver secara automatik akan membuat kod yang diperlukan untuk anda. Dengan cara itu, secara teorinya, anda dapat mengumpulkan keseluruhan laman web dengan tangan dan memuat naiknya ke pelayan anda.

Sebaliknya, jika anda mampu mengekod, Dreamweaver mempunyai semua alat yang diperlukan untuk itu juga.

Berfungsi sebagai Penyunting Kod Lengkap

Bahagian kedua Dreamweaver adalah penyunting kod yang lengkap. Ia dilengkapi dengan semua fungsi standard, termasuk:

  • Penyorotan sintaks – Itu bermaksud Dreamweaver menyoroti elemen yang berbeza (seperti operator, pemboleh ubah, dll.) Dalam warna yang berbeza agar kod lebih mudah dibaca dan diperbetulkan.
  • Penyelesaian Kod – Penyelesaian kod berfungsi dengan cara yang sama seperti pelengkapan automatik di telefon anda. Mula menaip dan editor akan memberikan cadangan untuk apa yang anda cuba tulis. Dengan begitu, anda tidak perlu menaip semuanya.
  • Kod runtuh – Runtuhan kod adalah ciri lain untuk menjadikan kod lebih mudah dibaca. Ini membolehkan anda mengecilkan bahagian kod anda secara visual apabila anda tidak memerlukannya. Dengan cara itu, anda tidak perlu menatal keseluruhan fail tetapi hanya dapat menangani bahagian yang perlu anda kerjakan.

Dreamweaver menyokong bahasa yang paling penting untuk reka bentuk web (HTML5, CSS, JavaScript, PHP) dan banyak lagi.

Bahagian terbaik: jika anda mengubah apa-apa dalam kod anda, Dreamweaver secara automatik akan memaparkannya di bahagian visual juga. Dengan cara itu, anda dapat melihatnya tanpa perlu memuat naik fail anda ke pelayan atau menghidupkan penyemak imbas.

Terdapat banyak lagi ciri dan anda akan melihat banyak daripadanya beraksi dalam tutorial Dreamweaver yang akan datang untuk pemula.

Proses Penyediaan Dreamweaver dan Perancangan Laman Web (Langkah-demi-Langkah)

Sebagai langkah pertama, anda perlu memperoleh Dreamweaver dari laman web Adobe rasmi.

Anda boleh mendapatkan percubaan percuma di sini atau dari pelanggan Creative Cloud anda.

tutorial dreamweaver untuk harga pemula

Langkah 1. Muat turun dan Pasang

Apabila anda mendapat program dari laman web rasmi, muat turun fail pemasangan, laksanakan dan ikuti arahannya.

Sekiranya anda sudah menggunakan Creative Cloud (seperti kami), anda hanya boleh mengklik Cuba di dalam klien. Kemudian, apabila program selesai dipasang, klik Mulakan Percubaan.

Langkah 2. Permulaan Pertama

Semasa mula-mula memulakan Dreamweaver, anda akan melihat skrin ini.

dreamweaver permulaan pertama

Sekiranya anda tidak pernah menggunakan program ini sebelumnya, pilih Tidak, saya baru. Apabila anda melakukannya, Dreamweaver memimpin anda melalui wizard persediaan. Langkah pertama adalah memilih sama ada menggunakan ruang kerja untuk pemaju atau ruang kerja standard.

panduan onboarding dreamweaver memilih ruang kerja

Oleh kerana ini adalah tutorial pemula Dreamweaver, pilih versi standard. Selepas itu, anda boleh memilih tema warna untuk ruang kerja anda dari empat pilihan yang berbeza.

panduan onboarding dreamweaver memilih skema warna

Langkah terakhir adalah memilih sama ada memulakan dengan fail sampel, projek baru atau sedia ada atau menonton tutorial.

panduan onboarding dreamweaver langkah terakhir

Pilih untuk memulakan dengan folder baru atau sedia ada dan anda selesai dengan proses penyediaan. Syabas!

Sekarang mari kita mulakan projek dan pelajari cara membuat laman web dengan Dreamweaver.

Langkah 3. Mulakan Laman Baru

Langkah pertama adalah membuat laman web baru. Untuk itu, pergi ke Laman> Laman Baru. Ini akan membawa anda ke skrin ini:

buat laman web baru di dreamweaver

Langkah pertama adalah memberi nama kepada laman web anda. Kemudian, anda perlu memilih tempat menyimpannya. Ini terpulang kepada anda, tetapi biasanya masuk akal untuk menyimpan semua projek di satu tempat untuk kesederhanaan.

Anda juga mempunyai kemungkinan untuk mengaitkan projek baru anda dengan repositori Git. Ini boleh menjadi idea yang baik kerana ia memberi anda kawalan versi tetapi anda boleh melangkauinya buat masa ini.

Kami akan menangani semua perkara di bawah Pelayan di sebelah kiri kemudian. Sama dengan Pemprosesan CSS, yang hanya penting semasa anda menggunakan perkara semacam itu.

Yang penting bagi kita adalah Maklumat Tempatan bawah Tetapan lanjutan.

aktifkan folder gambar lalai di dreamweaver

Pastikan untuk mengklik ikon folder di sebelah kanan yang tertera Folder Imej Lalai. Kemudian, pergi ke direktori laman web anda yang baru dibuat, buka, buat folder baru yang dipanggil gambar dan pilih sebagai folder lalai anda. Dengan cara itu, Dreamweaver akan menyimpan gambar yang berkaitan dengan laman web anda secara automatik di sana.

Itu sahaja buat masa ini, klik Jimat untuk kembali ke ruang kerja anda.

Langkah 4. Buat Fail Laman Utama Anda

Sekarang setelah anda membuat laman web projek, inilah masanya untuk fail pertama. Kami akan bermula dengan laman utama.

Sekiranya Dreamweaver tidak menawarkan pilihan itu sendiri, pergi ke Fail> Baru. Anda boleh membuat fail yang sama sekali baru atau menggunakan templat yang ada. Program ini disertakan dengan beberapa daripadanya (lihat Templat Permulaan). Sekarang, kami akan membuat yang baru.

buat fail baru di dreamweaver

HTML ditetapkan secara lalai dan anda boleh membiarkannya sebagaimana adanya. Untuk tajuk dokumen, masukkan indeks.html dan memilih untuk Buat. Ini akan membawa anda pada skrin berikut.

projek segar di dreamweaver

Ini adalah topi yang kami nyatakan pada awalnya: paparan langsung seperti apa laman web anda (kosong, pada masa ini) dan kod di belakangnya. Anda juga akan melihat bahawa Dreamweaver secara automatik telah membuat beberapa markup HTML asas yang boleh anda bina. Mari kita buat sekarang, adakah kita?

Langkah 5. Buat Header

Untuk memasukkan elemen ke dalam halaman, pertama anda perlu memilih lokasinya. Sama ada klik pada halaman kosong (Dreamweaver secara automatik akan memilih elemen jika anda melakukannya) atau letakkan kursor pada elemen yang sama di bahagian kod skrin.

Selepas itu, anda perlu pergi ke Masukkan tab di sudut kanan atas. Ini memberi anda senarai elemen HTML dan laman web biasa yang boleh anda tambahkan ke halaman anda. Tatal ke bawah sehingga anda dapat melihat Kepala sebagai pilihan.

masukkan elemen pengepala di dreamweaver

Klik mudah memasukkannya ke halaman. Anda juga melihatnya muncul di dalam dokumen HTML.

header kelihatan dalam antara muka visual dan editor kod

Ringkas, betul?

Sekarang anda akan mengubah teks di dalam tajuk dan juga mengubahnya menjadi tajuk. Untuk kedua – tandakan teks pertama di penyunting kod di bahagian bawah.

tandakan teks tajuk di dreamweaver

Selepas itu, kembali ke Masukkan, klik pada anak panah di sebelah Tajuk dan pilih H1. Ini membungkus tajuk halaman menjadi tag HTML H1. Untuk maklumat lebih lanjut mengenai tag tajuk, baca artikel ini.

Selepas itu, anda juga boleh memasukkan tajuk untuk halaman anda. Di laman web sebenar anda, anda akan memilih sesuatu yang deskriptif dengan kata kunci dan bukan hanya Selamat Datang di Laman Web Ujian Saya seperti dalam contoh.

menukar tajuk dalam dreamweaver

Baiklah, anda baru sahaja membuat tajuk halaman! Pada masa ini ia masih kelihatan sedikit kasar, jadi mari kita ubah melalui CSS seterusnya.

Langkah 6. Buat Fail CSS

Sekiranya anda tidak terbiasa dengannya, CSS adalah bahagian yang menyediakan semua gaya di laman web. Ia membolehkan anda menentukan warna, dimensi elemen, jenis dan saiz fon dan banyak lagi. Kami ingin menggunakan markup untuk merambah tajuk halaman kami dan juga belajar bagaimana mengubah CSS di Dreamweaver.

Secara teorinya, anda boleh menambahkan CSS tepat di dalam dokumen HTML. Terdapat pilihan yang jauh lebih elegan daripada apa yang akan kita lakukan, iaitu membuat fail khusus untuk semua gaya CSS di seluruh laman web.

Langkah pertama adalah memberikan tajuk atau id CSS kepada tajuk baru anda. Semasa proses itu, Dreamweaver juga akan meminta anda membuat fail helaian gaya. Pergi ke menu DOM di bahagian kanan bawah skrin yang menyenaraikan keseluruhan struktur laman web anda. Pastikan tajuk anda dipilih.

Dalam paparan langsung, anda sekarang akan melihatnya bertanda biru dengan label kecil dan tanda tambah di bahagian bawah.

tambah fail css di dreamweaver

Klik tanda tambah dan taipkan #kepala di padang yang terbuka. Hashtag bermaksud anda menetapkan id berbanding kelas. Tekan enter. Di menu pembukaan, bukannya Tentukan dalam halaman pilih Buat fail CSS baru. Dalam pop timbul, pilih Semak imbas dan arahkan ke folder laman web anda. Kemudian taip gaya.css (yang merupakan nama standard untuk helaian gaya) ke dalam Nama fail padang dan memukul Jimat.

buat helaian gaya di dreamweaver

Apabila anda sekarang memilih Okey, fail baru akan muncul di bahagian atas paparan langsung anda. Anda boleh melihat dan mengeditnya dari sana. Ia juga akan dihubungkan dengan bahagian HTML bahagian halaman anda.

helaian gaya ditambahkan ke laman web

Peluang yang luar biasa! Sekarang anda sudah bersedia untuk mengubah gaya halaman anda.

Langkah 7. Buat Pemilih CSS untuk Tajuk Halaman

Perkara pertama yang anda mahu lakukan ialah menukar fon tajuk anda dan juga memusatkannya. Untuk itu, pertama anda perlu membuat pemilih CSS baru. Pemilih adalah nama elemen di halaman kami yang boleh anda tetapkan sifatnya, seperti warna, saiz, dan banyak lagi.

Tandakan tajuk H1 anda dalam paparan DOM di sebelah kanan bawah (seperti yang anda lakukan dengan tajuk sebelumnya). Kemudian, di atas itu, pilih Pereka CSS.

sediakan gaya untuk elemen tajuk

Untuk membuat pemilih CSS, klik pada baris di mana tertulis Spemilih dan kemudian klik pada simbol tambah. Ini akan secara automatik mencadangkan pemilih yang anda namakan #header h1.

buat pemilih css di dreamweaver

Tekan enter untuk membuatnya. Selesai!

Nota ringkas: untuk semua yang baru menggunakan CSS, pemilih ini bermaksud bahawa anda menyasarkan elemen bernama h1 dalam unsur yang disebut #kepala. Dengan cara itu, apa sahaja yang anda masukkan sebagai CSS hanya diterapkan pada teks bertulis sahaja dan bukan keseluruhan elemen tajuk.

Langkah 8. Tukar Fon Tajuk

Sekarang anda mempunyai pemilih, anda boleh menetapkan sifatnya. Sekiranya anda mengetahui jalan keluar CSS, anda hanya boleh memasukkan markup ke gaya.css dan program itu akan menjaganya secara automatik.

Bagi pengguna yang kurang berpengalaman, Dreamweaver juga menjadikannya sangat mudah. Kekal di Pereka CSS menu dan nyahtandakan kotak di mana tertera Tunjukkan Set. Apabila anda melakukannya, ia akan membuka banyak pilihan tambahan.

aktifkan pilihan css di dreamweaver

Dengan butang baru, anda boleh memilih banyak sifat CSS dari bidang susun atur, teks, sempadan, dan latar belakang. The Lebih banyak lagi butang memberi anda pilihan untuk memasukkan peraturan anda sendiri.

Untuk menukar jenis fon, klik pada Teks pilihan di bahagian atas (sebagai alternatif, tatal ke bawah). Pada pilihan yang akan datang, arahkan kursor keluarga fon dan klik pada fon lalai.

ubah keluarga fon di dreamweaver

Ini akan memberi anda sejumlah pilihan untuk font biasa termasuk fallback mereka (sekiranya penyemak imbas pengguna tidak dapat menunjukkan fon utama). Anda mungkin mahu mengklik Urus Fon di bahagian bawah untuk masuk ke menu ini:

fon web tepi adobe

Di sini, anda dapat memilih fon percuma dari Adobe Perkhidmatan Font Web Edge. Cari fon dengan nama atau gunakan banyak pilihan penapis di sebelah kiri untuk mempersempit pilihan anda sehingga anda menemui sesuatu.

Klik pada mana-mana jenis huruf menandakannya untuk dimasukkan ke dalam Dreamweaver. Setelah melakukannya, anda boleh menggunakannya secara langsung atau pergi ke Tumpukan Fon Tersuai untuk menentukan fon pengganti anda sendiri.

buat timbunan fon tersuai di dreamweaver

Buat masa ini, tekan sahaja Selesai dan kemudian klik pada fon lalai lagi. Kali ini pilih fon tersuai yang anda pilih dan voilá – perubahan dilakukan termasuk semua pengekodan yang diperlukan.

fon berubah dalam dreamweaver

Sekiranya anda klik pada gaya.css fail di bahagian atas, anda akan melihat bahawa semua markup telah ditambahkan juga.

helaian gaya yang dikemas kini di dreamweaver

Langkah 9. Pusatkan Tajuk dan Tukar Ukurannya

Teksnya masih kelihatan lebih baik. Tugas seterusnya adalah memusatkannya dan meningkatkan saiz fon. Untuk itu, anda juga boleh menggunakan ciri lain yang dipanggil Edit Pantas.

Untuk menggunakannya, pergi ke paparan kod dan klik kanan bahagian yang ingin anda edit. Dalam kes ini, ia berada di

kurungan.

buka menu suntingan cepat di dreamweaver

Di sini, pilih Edit Pantas di bahagian atas. Ini akan membuka CSS yang berkaitan dengan elemen ini di bawahnya. Sekarang anda boleh memasukkan sifat tambahan tanpa perlu mencari keseluruhan fail helaian gaya (yang boleh sangat panjang). Untuk memusatkan teks dan membuatnya lebih besar, tambahkan kod berikut padanya.

saiz fon: 42px;
text-align: tengah;

Semasa menaip, Dreamweaver juga akan membuat cadangan untuk apa yang anda cuba masukkan, menjadikannya lebih mudah. Itulah ciri penyelesaian kod yang disebutkan sebelumnya.

Apabila anda selesai, ia akan kelihatan seperti ini:

ubah css melalui suntingan cepat di dreamweaver

Perhatikan bahawa teks telah berubah dalam paparan langsung. Sekarang, tekan Esc untuk cepat, edit dan terus ke helaian gaya. Anda akan mendapati bahawa CSS baru telah ditambahkan di tempat yang sesuai.

Cukup sejuk, betul?

Ngomong-ngomong, jika anda tidak pasti tentang maksud harta CSS, cukup klik kanan dan pilih Dokumen Pantas (atau tekan Ctrl + K). Dreamweaver kemudian akan memberi anda penjelasan.

dokumen cepat dreamweaver

Langkah 10. Tambahkan Lebih Banyak Kandungan

Dengan apa yang telah anda pelajari sejauh ini, anda kini boleh membina laman web yang tidak sempurna. Demi tutorial Dreamweaver ini, kami telah melakukan perkara berikut:

  • Fon lalai yang ditentukan untuk tajuk dan perenggan
  • Menambah bar navigasi dan membuat pautan ke laman utama di dalamnya
  • Menambah kotak div untuk kandungan dengan dua kotak lagi di dalamnya
  • Digerakkan salah satu dari mereka ke kiri dan satu ke kanan dengan terapung harta benda
  • Hadkan lebarnya kepada peratusan sehingga mereka dapat menyelaraskan secara mendatar
  • Menambah tajuk tajuk dan teks palsu di sebelah kiri termasuk senarai yang tidak tersusun
  • Membuat borang (gunakan menu lungsur di bawah Masukkan), dua medan teks dan butang hantar
  • Menambah jarak di sekitar elemen melalui margin CSS dan padding
  • Dengan syarat warna dan sempadan latar belakang
  • Membuat footer dan mesej hak cipta

Inilah hasilnya:

laman web dengan reka bentuk canggih

Kod untuk Contoh:

Oleh kerana ini agak maju dan tidak semua orang tahu bagaimana melakukannya, anda boleh mendapatkan HTML dan CSS di bawah ini supaya anda dapat menyusunnya sendiri. Pertama HTML:





indeks.html

 



Rumah

Contoh Tajuk untuk Kandungan Utama

Lorem ipsum dolor duduk amet, consectetur adipiscing elit. Pellentesque scelerisque id est sit amet ornare. Suspendisse eget elit mi. Dalam imperdiet auctor leo vitae hambar.

  • Etiam tempus urna condimentum libero varius
  • Ut komodo risus finibus
  • Duis odio lacus, elementum eget sem finibus
  • Mollis honissim enim.
  • Kemudahan molisie suscipit odio vel Facisis

Curabitur vestibulum, lorem a tincidunt dapibus, erat sem rhoncus nisl, non dapibus quam mi ac ligula. Vestibulum id auctor eros, nec porttitor odio. Nunc efficitur turpis sed nulla vestibulum viverra. Maecenas iaculis mi ornare, dapibus lectus in, fasilisis nisl.

Contoh Ajakan Bertindak!

Lorem ipsum dolor duduk amet, consectetur adipiscing elit. Pellentesque scelerisque id est sit amet ornare. Suspendisse eget elit mi.

Hak Cipta © 2017 Laman Web Imajiner Saya

Dan kemudian CSS:

@charset "utf-8";

badan {
warna latar: # F5F5F5;
margin-top: 0px;
margin-kanan: 0px;
margin-bottom: 0px;
margin-kiri: 0px;
}

hlm,
a,
ul,
ol,
li,
label,
masukan {
font-keluarga: muli, sans-serif;
gaya fon: biasa;
berat huruf: 300;
saiz fon: 17px;
}

h1, h2, h3, h4, h5 {
font-keluarga: karla, sans-serif;
gaya fon: biasa;
berat huruf: 400;
text-transform: huruf besar;
}

#kepala {
padding-top: 25 piksel;
padding-bottom: 25px;
warna latar: #FFFFFF;
sempadan-bawah: 4px pepejal # EB232F;
}

#header h1 {
font-family: aguafina-script;
gaya fon: biasa;
berat huruf: 400;
saiz fon: 42px;
text-align: tengah;
margin-top: 0px;
margin-bottom: 0px;
text-transform: tiada;
}

#navigasi {
margin-right: automatik;
margin-kiri: automatik;
lebar maksimum: 1140 piksel;
margin-top: 10px;
margin-bottom: 10px;
}

#navigasi a {
warna: # EB232F;
}

.utama {
paparan: blok;
margin atas: 15 piksel;
margin-right: automatik;
margin-kiri: automatik;
margin-bottom: 15 piksel;
jelas: kedua-duanya;
limpahan: automatik;
lebar maksimum: 1140 piksel;
}

.utama # utama-kanan {
terapung: betul;
lebar: 37.5%;
paparan: blok;
}

.utama # utama-kiri {
terapung: kiri;
lebar: 57%;
paparan: blok;
padding-right: 20px;
}

.utama # utama-kanan .cta {
text-align: tengah;
}

.main # main-kanan .form {
lebar: 92%;
margin-right: automatik;
margin-kiri: automatik;
}

# utama-kanan. bentuk div {
margin-bottom: 10px;
}

# main-kanan .form .label {

}

# main-kanan .form .textfield {
lebar: 100%;

}

.butang utama # utama-kanan {
text-align: tengah;
padding-top: 7px;
padding-bottom: 7px;
margin-kiri: automatik;
margin-right: automatik;
kedudukan: saudara;
paparan: blok;
padding-right: 36px;
padding-kiri: 36px;
sempadan: tidak ada;
warna latar: # EB232F;
warna: #FFFFFF;
kursor: penunjuk;
}

.pengaki {
paparan: blok;
padding-top: 25 piksel;
padding-bottom: 25px;
text-align: tengah;
}

Kami ingin menggunakannya sebagai contoh untuk menunjukkan kepada anda langkah seterusnya. Walaupun kelihatan rumit, kami menggabungkannya dengan cara yang sama seperti yang kami tunjukkan sebelumnya.

Langkah 11. Pratonton dalam Penyemak Imbas dan Peranti Mudah Alih

Bagaimana kita melakukan semua ini? Baiklah, pertama sekali, kami sedikit lebih berpengalaman dalam membina laman web daripada yang mungkin anda miliki. Oleh itu, kita sudah mempunyai langkah dalam memikirkan bagaimana membuat laman web yang betul.

Kedua, kami menggunakan ciri yang sangat berguna yang membantu saya mempercepat proses: Pratonton penyemak imbas. Dreamweaver membolehkan anda melihat halaman web anda dalam masa nyata dalam penyemak imbas dan juga pada peranti mudah alih.

Untuk memulakan, klik butang pratonton masa nyata di sudut kanan bawah.

aktifkan menu pratonton di dreamweaver

Ini akan membuka pilihan pratonton.

pilihan pratonton masa nyata di dreamweaver

Klik pada salah satu nama penyemak imbas akan membuka projek laman web anda di dalamnya. Anda juga dapat mengimbas kod QR dengan telefon atau tablet anda (misalnya dengan Kuantum Firefox) atau taipkan alamat yang dipaparkan ke dalam penyemak imbas anda untuk memulakan pratonton langsung pada peranti anda.

Perlu diketahui, bahawa anda perlu memasukkan ID dan kata laluan Adobe anda untuk itu. Anda semestinya memperolehnya dari mendaftar ke Dreamweaver.

Bahagian terbaik: Segala perubahan yang anda buat di Dreamweaver secara automatik akan muncul di penyemak imbas pada masa yang sama anda buat.

Bagaimana ini membantu saya mengumpulkan laman web dengan lebih pantas? Pertama sekali, bergantung pada ukuran skrin anda, paparan di penyemak imbas mungkin lebih dekat dengan yang asli daripada yang anda lihat di Dreamweaver.

Kedua, memeriksa laman web dalam penyemak imbas membolehkan saya menggunakan alat pembangun untuk menguji perubahan.

alat pembangun dalam penyemak imbas

Mereka sangat serupa dengan yang anda lihat di Dreamweaver. Mereka lebih dikenali oleh kami sehingga kami dapat bekerja lebih cepat dengan mereka dan hanya menyalin dan menampal kod ke dalam helaian gaya kami.

Melihat versi telefon menunjukkan bahawa masih banyak yang perlu dilakukan.

pratonton masa nyata mudah alih di dreamweaver

Ini membawa kita ke titik seterusnya.

Langkah 12. Tambahkan Pertanyaan Media

Untuk menjadikan laman web anda berfungsi di semua peranti, anda perlu menambahkan pertanyaan media yang disebut. Ini adalah pernyataan CSS bersyarat yang memberitahu penyemak imbas untuk menerapkan gaya hanya di atas atau di bawah ukuran skrin tertentu atau pada peranti tertentu. Dengan cara itu, anda boleh mengubah susun atur pada skrin yang lebih kecil.

Setakat ini, anda hanya menentukan gaya global. Itu bermaksud gaya yang diterapkan ke seluruh laman web. Sekarang anda akan belajar bagaimana menambahkan gaya bersyarat untuk skrin yang lebih kecil.

Pertama, pergi ke Pereka CSS. Pastikan fail yang ingin anda tambah kod dipilih di bawah Sumber. Tekan tanda tambah di bawah @media.

Ini memberi anda panel pilihan ini:

menu pertanyaan media di dreamweaver

Anda boleh menentukan syarat untuk pertanyaan media, misalnya peranti yang mereka gunakan, orientasi, resolusi dan banyak lagi. Anda juga boleh menambah beberapa syarat dengan tanda tambah.

Yang lebih penting untuk contoh kita ialah lebar maksimum tetapan. Dengan itu, anda dapat menentukan CSS khusus yang hanya akan berlaku pada ukuran layar maksimum tertentu.

Katakan anda mahu memperbaikinya di telefon terlebih dahulu, jadi anda taip lebar maksimum daripada 375 piksel. Apabila anda melakukannya, anda dapat melihat kod CSS di bahagian bawah.

buat pertanyaan media di dreamweaver

Apa yang juga akan berlaku semasa anda mengklik Okey adakah garis hijau muncul di bahagian atas skrin. Ini secara visual mewakili pertanyaan media. Klik dan skrin secara automatik melonjak ke ukuran itu.

buat pertanyaan media di dreamweaver

Langkah 13. Tambahkan CSS Bersyarat

Untuk memperbetulkan reka bentuk untuk mudah alih, perkara pertama yang perlu kita lakukan ialah menghilangkan kod yang menjadikan kedua elemen di laman web ini saling mengatur satu sama lain. Tidak ada cukup ruang untuk itu.

Anda boleh melakukan ini dengan cara yang sama seperti memanipulasi CSS sebelumnya, hanya kali ini anda mengaktifkan pertanyaan media semasa anda melakukannya.

Pertama sekali – arahkan ke elemen dalam paparan DOM anda. Dari situ buat pemilih CSS baru untuknya. Kemudian, tetapkannya lebar ke automatik, terapung ke tiada (untuk menghentikannya dari kiri) dan tambahkan beberapa padding ke sisi sehingga kandungannya tidak bersempadan di tepi skrin.

reka bentuk mudah alih yang diperbetulkan

Nampak lebih baik, bukan? Dengan cara yang sama, anda boleh mengubah CSS semua elemen lain di halaman agar semuanya kelihatan betul.

Itu pada dasarnya untuk pertanyaan media. Anda boleh menggunakan kaedah yang sama untuk menyesuaikan susun atur ke tablet dan ukuran lain.

Petua profesional: Jangan mengoptimumkan peranti tertentu dan saiznya, sebaliknya buat pertanyaan media bergantung pada susun aturnya. Ini bermaksud bermain dengan ukuran skrin dan menambahkan pertanyaan pada titik ketika tata letak tidak kelihatan lagi bagus.

Satu perkara lagi: Anda juga boleh membuat pertanyaan media dengan lebih mudah dengan menggunakan ukuran peranti yang telah ditetapkan di sudut bawah dan mengklik simbol tambah di atas apabila anda menemui titik di mana anda ingin menambahkannya.

buat pertanyaan media melalui jalan pintas di dreamweaver

Langkah 14. Muat naik Laman web anda ke Pelayan

Kami mengesyorkan menggunakan Bluehost (pautan afiliasi) untuk menjadi tuan rumah laman Dreamweaver anda.

Setelah selesai dengan bahagian reka bentuk, anda sudah cukup bersedia untuk memuat naik laman web ke pelayan anda. Seperti yang telah disebutkan di awal, Dreamweaver juga menjadikannya sangat mudah.

Pertama, pergi ke Laman> Urus Laman. Pilih laman web semasa anda dari menu dan pilih Edit di kiri bawah. Pada tetingkap berikut, klik pada Pelayan.

konfigurasi pelayan jauh di dreamweaver

Masukkan semua data penting untuk disambungkan ke pelayan FTP anda. Nama terpulang kepada anda, selebihnya (alamat FTP, nama pengguna, kata laluan) berasal dari penyedia hosting anda. Jangan lupa tentukan direktori mana yang akan diletakkan fail dan alamat web dari laman web anda yang sebenar! Bahagian terakhir adalah penting agar Dreamweaver dapat membuat pautan dalaman yang berkaitan dengan laman web.

Di bawah Mahir anda mempunyai beberapa pilihan lagi (sama ada memuat naik fail secara automatik semasa menyimpan). Anda biasanya dapat menyimpan barang-barang sebagaimana adanya. Pukul Jimat dua kali dan anda selesai.

Sekarang pergi ke Fail panel (sama ada di sebelah kanan atas atau melalui Tetingkap> Fail) dan klik pada simbol kiri paling jauh untuk menyambung ke pelayan anda:

muat naik laman web ke pelayan jauh di dreamweaver

Setelah sambungan dibuat, pilih fail yang ingin anda muat naik dan klik anak panah yang menunjuk ke atas untuk melakukannya. Setelah selesai, laman web anda akan tersedia dari alamat web anda.

Bagus! Anda baru sahaja membina dan memuat naik laman web mudah dengan Dreamweaver!

Tutorial Dreamweaver – Kata Akhir

Dreamweaver adalah program hebat untuk membina laman web. Ia menggabungkan antara muka pengguna yang intuitif dengan penyunting kod lengkap. Melalui gabungan ini, memudahkan pengguna pemula, perantaraan dan pengguna lanjutan untuk membina laman web berkualiti tinggi.

Dalam tutorial Dreamweaver ini untuk pemula, kami telah memperkenalkan anda kepada Dreamweaver dan kemampuannya. Kami telah menunjukkan kepada anda cara mengatur program dan memulakan laman web pertama anda. Anda telah belajar bagaimana membuat struktur HTML asas dan menggayakannya dengan CSS. Kami juga membincangkan cara membuat laman web bergerak pantas dan memuat naiknya ke pelayan anda.

Sekarang anda mempunyai pemahaman yang kukuh tentang bagaimana Dreamweaver berfungsi dan bagaimana anda boleh menggunakannya untuk membuat laman web. Sekarang terserah anda untuk menyelam lebih dalam dan mengetahui langkah-langkah seterusnya.

Jangan lupa: Dreamweaver adalah salah satu cara untuk membuat laman web. Terdapat banyak lagi dan anda boleh mendapatkan banyak maklumat mengenai perkara ini di sini. Semoga berjaya!

Adakah anda pernah menggunakan Dreamweaver sebelum ini? Apa pendapat anda? Ada yang perlu ditambahkan di atas? Beritahu kami di bahagian komen di bawah!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me