Adobe Brackets penggunaan mudah grafik tutorial_HTML/Xhtml_penghasilan halaman web

Adobe Brackets ialah sumber terbuka, persekitaran pembangunan bersepadu yang ringkas dan berkuasa untuk HTML, CSS dan JavaScript. Ia menyokong penambahan pemalam untuk menyediakan pemalam fungsi tambahan yang tersedia pada masa ini termasuk sokongan untuk menambah penyahpepijatan, pelayar-. awalan CSS tertentu, anotasi JSDoc, dsb. Editor di bawah memperkenalkan secara ringkas penggunaan dan tetapan Kurungan:

Nama perisian:

Adobe Brackets v1.4 versi pemasangan rasmi Bahasa Inggeris

Saiz perisian:

32MB

Masa kemas kini:

2015-08-04

　1. Tetapan projek

1. Open Brackets Keseluruhan antara muka adalah sangat mudah Bar menu atas hanya menyediakan fail > Di sebelah kiri ialah pepohon fail bagi struktur organisasi projek Gunakan Ctrl/Cmd Shift H untuk memanggil keluar dan menutup pepohon fail. Bahagian kanan ialah kawasan penyuntingan, bahagian atas ialah bar alat, bahagian tengah ialah kawasan dokumen, dan bahagian bawah ialah kawasan segera.

　

2. Buka projek Gunakan perintah Fail > Buka Folder untuk membuka folder projek Nama projek pepohon fail di sebelah kiri dikemas kini kepada nama folder projek dan pepohon fail dikemas kini kepada pepohon fail projek semasa.

　

Klik kiri pada nama projek untuk muncul menu penyuntingan projek Menu pengeditan akan memaparkan projek sejarah dan arahan penyuntingan projek.

　

Perintah Buka Folder: Buka projek baharu.

Arahan Tetapan Projek: Tetapkan alamat web projek semasa, yang akan digunakan semasa penyahpepijatan halaman dan pratonton.

Menetapkan keperluan: Ia mestilah alamat web bermula dengan http://.

　

Seperti yang ditunjukkan di atas, apabila ditetapkan kepada http://127.0.0.1/demo/slide, halaman yang sepadan akan dibuka melalui alamat web semasa pratonton penyemak imbas.

　

Jika tiada tetapan, halaman akan dibuka melalui alamat surat pemacu fail.

　

　2. Penyuntingan fail

Klik index.html dalam pepohon fail untuk membuka dokumen index.html di kawasan utama.

　

1. Brackest akan menyemak sama ada dokumen mematuhi spesifikasi HTML Seperti yang ditunjukkan dalam rajah di bawah, terdapat blok gaya pada baris 20 yang perlu diletakkan di nod kepala.

　

2. Letakkan kursor pada nama label kelas atau atribut id, dan tekan Ctrl/Cmd E ("Edit") atau keluar dari pengeditan. Brackets akan mencari semua fail CSS di bawah projek, dan kemudian membuka editor terbenam yang dibenamkan dalam fail HTML, membolehkan anda mengubah suai kod CSS dengan cepat.

Apabila teg kelas/id semasa mempunyai berbilang takrifan gaya, tetingkap pengeditan menyediakan butang suis untuk menukar gaya paparan Anda juga boleh menggunakan kekunci anak panah Alt Atas/Bawah untuk menukar.

Perlu diingat bahawa Brackets akan mengesan dokumen HTML semasa dan semua fail CSS di bawah projek untuk mencari gaya kelas/id, walaupun beberapa fail CSS tidak dirujuk dalam dokumen HTML semasa.

　3. Kurungan juga menyokong pratonton/pengeditan pantas definisi objek JS. Letakkan kursor pada nama fungsi js dan tekan Ctrl/Cmd E ("Edit") atau keluar dari pengeditan.

4. Kurungan mempunyai pemilih warna terbina dalam, menyediakan bentuk pengekodan warna RGBa, HEX dan HSLa. Letakkan kursor pada kod warna dan tekan Ctrl/Cmd E ("Edit").

　3. Pratonton segera

Kurung menyediakan pratonton masa nyata halaman web. Apabila menggunakan fungsi ini, Brackets memanggil penyemak imbas Chrome untuk membuka halaman semasa Selepas itu, selepas mengubah suai html, css dan javascript dan menyimpannya, kandungan yang diubah suai akan segera dibalas ke halaman dalam penyemak imbas, tanpa perlu untuk. muat semula halaman secara manual. Ini adalah salah satu sorotan terbesar Brackets dengan dua monitor yang diberkati dan chrome boleh dipaparkan pada skrin berpecah, membolehkan pratonton segera pengubahsuaian tanpa perlu menukar editor/pelayar dan menyegarkan halaman.

Beberapa had fungsi pratonton segera semasa:

　Ia hanya berfungsi dengan penyemak imbas Chrome sebagai penyemak imbas sasaran, anda mesti memasang Chrome.

Ia bergantung pada ciri penyahpepijatan jauh dalam Chrome, yang didayakan dengan bendera baris arahan. Pada Mac, jika anda sudah menggunakan Chrome dan melancarkan Pratonton Segera, Brackets akan bertanya kepada anda sama ada anda mahu memulakan semula Chrome untuk mendayakan penyahpepijatan jauh.

Hanya satu fail HTML boleh dipratonton pada masa yang sama - jika anda bertukar ke fail HTML yang lain, Brackets akan menutup pratonton asal.

　4. Beberapa kekunci pintasan

　Ctrl/Cmd Shift H boleh memanggil keluar dan menutup pepohon fail

　Ctrl/Cmd E Pratonton pantas/edit gaya css/fungsi javascript

　Ctrl/Cmd /- besarkan atau kecilkan saiz fon kawasan penyuntingan

　Ctrl/Cmd 0 tetapkan semula saiz fon kawasan penyuntingan

　Ctrl/Cmd Alt P membuka fungsi pratonton segera

　Ctrl/Cmd / komen baris

　Ctrl/Cmd Alt / Sekat ulasan

Nota: Apabila mengulas pada kod css dan kod html, anda hanya boleh menggunakan kekunci pintasan ulasan blok