Skip to main content

Bagaimana Menulis Kod HTML di Dreamweaver - Di luar WYSIWYG

Cara Membuat Html Dengan Notepad (April 2025)

Cara Membuat Html Dengan Notepad (April 2025)
Anonim

Dreamweaver adalah editor WYSIWYG yang hebat, tetapi jika anda tidak berminat untuk menulis halaman web dalam persekitaran "apa yang anda lihat adalah apa yang anda dapatkan", anda masih boleh menggunakan Dreamweaver kerana ia juga merupakan editor teks yang hebat. Tetapi terdapat banyak ciri yang tergelincir di tepi jalan dalam editor kod Dreamweaver kerana tumpuan utama adalah pada "pandangan reka bentuk" atau bahagian editor WYSIWYG produk.

Cara Dapatkan Ke Pandangan Kod Dreamweaver

Jika anda tidak pernah menggunakan Dreamweaver sebagai editor HTML sebelum anda mungkin tidak pernah melihat tiga butang di bahagian atas halaman: "Kod," "Split," dan "Reka bentuk." Dreamweaver bermula secara lalai dalam mod "Paparan reka bentuk" atau WYSIWYG. Tetapi mudah untuk bertukar untuk melihat dan mengedit kod HTML. Cuma klik pada Kod butang. Atau, pergi ke Lihat menu dan pilih Kod.

Jika anda baru belajar bagaimana menulis HTML atau anda ingin mendapatkan gambaran bagaimana perubahan anda akan memberi kesan kepada dokumen anda, anda boleh membuka pandangan kod dan pandangan reka bentuk pada masa yang sama. Keindahan kaedah ini ialah anda boleh mengedit di kedua-dua tingkap juga. Jadi, anda boleh menulis kod untuk teg imej anda dalam HTML dan kemudian menggunakan paparan reka bentuk untuk mengalihkannya ke lokasi lain di halaman dengan seret dan lepaskan.

Untuk melihat sekaligus, sama ada:

  • Klik pada Berpecah butang (antara Kod dan Reka bentuk).
  • Di dalam Lihat menu, pilih Kod dan Rekabentuk.

Sebaik sahaja anda selesa menggunakan Dreamweaver untuk mengedit kod HTML anda, anda boleh menukar keutamaan anda untuk membuka Dreamweaver dalam paparan kod secara lalai. Cara paling mudah adalah untuk menyelamatkan paparan kod sebagai ruang kerja. Dreamweaver akan dibuka di ruang kerja yang terakhir yang anda gunakan. Jika tidak, pergi ke menu Tetingkap, dan pilih ruang kerja yang anda mahu.

Pilihan Lihat Kod

Dreamweaver sangat fleksibel kerana ia mempunyai begitu banyak cara untuk menyesuaikannya dan menjadikannya berfungsi seperti yang anda mahu. Dalam tetingkap pilihan, terdapat pewarna kod, pemformatan kod, petunjuk kod, dan pilihan menulis semula kod yang boleh anda sesuaikan. Tetapi anda juga boleh menukar beberapa pilihan khusus dalam paparan kod itu sendiri.

Sebaik sahaja anda berada dalam paparan kod, terdapat satu Lihat Pilihan butang dalam bar alat. Anda juga boleh melihat pilihan dengan pergi ke Lihat menu dan memilih Pilihan Lihat Kod. Pilihannya ialah:

  • Bungkusan Kata - membungkus kod HTML supaya anda boleh melihatnya tanpa menatal secara mendatar. Perhatikan bahawa pilihan ini tidak memasukkan sebarang balasan kereta dalam kod anda, ia hanya memaparkan kod supaya lebih mudah dibaca.
  • Nombor Talian - memaparkan nombor baris di sepanjang sisi kod. Ia menunjukkan simbol balut garisan untuk garis yang membungkus lebih lama daripada tetingkap paparan.
  • Watak Tersembunyi - memaparkan aksara khas bukan ruang kosong yang akan dipaparkan pada halaman web. Seperti titik menggantikan ruang, chevron berganda menggantikan setiap tab, dan penanda ayat atau penanda ayat menggantikan setiap baris.
  • Serlahkan Kod Tidak Sah - menyoroti HTML yang salah dalam warna kuning. Sekiranya anda memilih tag kuning, Inspektur Harta akan memberikan petunjuk tentang bagaimana untuk memperbaikinya.
  • Pewarna Syntax - menghidupkan atau mematikan pengekodan warna kod anda. Anda menukar warna pengekodan warna anda di bahagian pewarna kod keutamaan.
  • Auto Indent - membuat kod anda indent secara automatik selepas penghantaran balik jika kod di atasnya diindentikasi. Anda boleh menukar saiz inden dengan menukar saiz tab dalam bahagian pemformatan kod keutamaan.

Mengedit Kod HTML dalam Dreamweaver Code View

Adalah mudah untuk mengedit kod HTML dalam paparan kod Dreamweaver. Cuma mula menaip HTML anda. Tetapi Dreamweaver menyediakan anda dengan beberapa tambahan yang memperluaskannya di luar editor HTML asas. Apabila anda mula menuliskan tag HTML, anda menaip <. Jika anda berhenti seketika setelah itu, Dreamweaver akan menunjukkan kepada anda senarai tag HTML. Ini dipanggil petunjuk kod. Untuk mempersempit pemilihan, mula menaip huruf - Dreamweaver akan menyempitkan senarai juntai ke tag yang sesuai dengan apa yang anda ketik.

Jika anda baru kepada HTML, anda boleh menatal melalui senarai tag HTML dan memilih pelbagai orang untuk melihat apa yang mereka lakukan. Dreamweaver akan terus meminta anda untuk atribut sebaik sahaja anda menaip teg. Sebagai contoh, jika anda menaip <>, Dreamweaver akan jatuh ke bawah Tag HTML, dengan tag lain yang bermula dengan saya mengikuti. Jika anda teruskan dengan menaip surat tersebut m, Dreamweaver akan menyempitkannya ke tag.

Tetapi petunjuk kod tidak berakhir di tag. Anda boleh menggunakan petunjuk kod untuk memasukkan:

  • Atribut HTML
  • Nama kelas dan ID
  • Sifat CSS

Jika petunjuk kod tidak muncul, anda boleh memukul Ctrl-spacebar (Windows) atau Cmd-spacebar (Macintosh) untuk memaparkannya. Alasan yang paling umum mengapa petunjuk kod mungkin tidak muncul adalah jika anda beralih ke tetingkap yang lain sebelum menamatkan teg anda. Kerana Dreamweaver mengetepikan taip aksara <, jika anda meninggalkan tetingkap dan kembali, anda perlu melancarkan semula petikan kod.

Anda boleh mematikan menu petunjuk kod dengan menekan kunci melarikan diri.

Setelah anda menaip tag HTML pembuka anda, anda perlu menutupnya. Dreamweaver melakukan ini secara semulajadi. Jika anda menaip Tutup Teg pilihan yang paling sesuai dengan keperluan anda.

Jika anda tidak cukup bersedia untuk menyunting halaman anda dalam HTML tetapi anda ingin menonton kod itu seperti yang ditulis, anda perlu mencuba pemeriksa kod. Ini membuka kod HTML dalam tetingkap berasingan. Ia berfungsi sama seperti paparan kod, dan, pada hakikatnya, pada dasarnya adalah tetingkap paparan kod boleh tanggal untuk dokumen semasa.Untuk membuka pemeriksa kod, pergi ke Tetingkap menu dan pilih Inspektor Kod atau tekan F10 kekunci pada papan kekunci anda.

Dreamweaver akan memformat kod HTML namun anda mahu dipaparkan. Sebagai contoh, jika anda menggunakan 3 ruang untuk indent, tetapi tidak pernah indent tag IMG, anda boleh menentukan maklumat pemformatan dalam pilihan menulis semula kod. Kemudian anda pergi ke Perintah menu dan pilih Terapkan Pemformatan Sumber. Ini adalah cara yang baik untuk mendapatkan kod yang ditulis oleh orang lain dalam format yang anda kenal.

Ciri-ciri yang banyak coder HTML yang tidak diketahui atau tidak digunakan adalah keupayaan untuk runtuh kod HTML. Ini tidak menghilangkan tag dari dokumen itu, tetapi hanya mengeluarkannya dari pandangan supaya mereka tidak mengganggu apa yang sedang anda kerjakan. Untuk meruntuhkan kod anda:

  1. Pilih bahagian kod yang hendak disembunyikan.
  2. Di dalam Edit menu, pilih Runtuhkan Seleksi daripada Kod Runtuh sub-menu

Cara yang lebih mudah ialah memilih kod dan kemudian klik ikon runtuh kod yang muncul di longkang. Anda juga boleh klik kanan pada kod yang dipilih dan pilih Runtuhkan Seleksi.

Sekiranya anda ingin menyembunyikan segala-galanya kecuali apa yang diserlahkan, pilihlah Runtuh Seleksi Luar dalam mana-mana kaedah di atas.

Untuk mengembangkan kod yang runtuh, cukup klik dua kali padanya. Ini membuka kod dan memilihnya. Kemudian anda boleh memindahkan pilihan itu atau padamnya atau menambah tag tambahan di sekelilingnya.

Anda boleh menggunakan keruntuhan dan memperluaskan ciri sepanjang masa di halaman yang anda tidak mahu mengedit templat luaran. Anda hanya pilih kawasan kandungan yang anda ingin edit dan runtuh di luar. Kemudian tulis HTML anda. Anda masih boleh melihat halaman dalam Reka bentuk lihat atau pratontonnya dalam penyemak imbas. Kod runtuh tidak dikeluarkan dari dokumen, hanya tersembunyi dari paparan. Anda juga boleh menggunakannya semasa anda sedang menjalankan siri barang. Apabila anda telah selesai, jatuhkannya. Anda tahu anda selesai apabila tiada kod menunjukkan.