Lihat mana-mana halaman web dan anda akan melihat gabungan kandungan teks dan imejan. Kedua-dua elemen ini adalah bahan penting dalam kejayaan laman web. Kandungan teks ialah pelawat laman web yang akan dibaca dan enjin carian apa yang akan digunakan sebagai sebahagian daripada algoritma ranking mereka. Imej akan menambah minat visual ke tapak dan membantu menyerlahkan kandungan teks.
Menambah teks dan imej ke laman web adalah mudah. Teks ditambah dengan tag HTML standard seperti perenggan, tajuk, dan senarai, sementara imej diletakkan pada halaman dengan elemen . Sekalipun anda telah menambahkan imej ke laman web anda, namun anda mungkin ingin mempunyai aliran teks bersebelahan dengan gambar, dan bukannya diselaraskan di bawahnya (yang merupakan cara lalai gambar yang ditambahkan ke kod HTML akan menyebabkan dalam penyemak imbas). Secara teknikalnya, terdapat dua cara anda boleh mencapai rupa ini, sama ada dengan menggunakan CSS (disyorkan) atau dengan menambah arahan visual terus ke HTML (tidak disyorkan, kerana anda mahu mengekalkan pemisahan gaya dan struktur untuk laman web anda).
Menggunakan CSS
Cara yang betul untuk mengubah cara susun atur teks dan imej halaman dan cara gaya visual mereka muncul dalam penyemak imbas dengan CSS . Ingatlah, kerana kita bercakap mengenai perubahan visual pada halaman (membuat aliran teks di sekeliling imej), ini bermakna ia adalah domain dari Lembaran Gaya Cascading.
- Pertama, tambahkan imej anda ke halaman web anda. Ingat untuk tidak memasukkan sebarang ciri visual (seperti lebar dan ketinggian nilai) dari HTML tersebut. Ini penting, terutamanya untuk laman web yang responsif di mana saiz imej akan berbeza-beza berdasarkan penyemak imbas. Perisian tertentu, seperti Adobe Dreamweaver, akan menambahkan maklumat lebar dan ketinggian ke imej yang dimasukkan dengan alat tersebut, jadi pastikan untuk menghapus maklumat ini dari kod HTML! Walau bagaimanapun, pastikan anda memasukkan teks alt yang sesuai . Berikut ialah contoh bagaimana kod HTML anda mungkin kelihatan:
-
- Untuk tujuan penggayaan, anda juga boleh menambah kelas kepada imej. Nilai kelas ini ialah apa yang akan kita gunakan dalam fail CSS kami. Perhatikan bahawa nilai yang kami gunakan di sini adalah sewenang-wenangnya, walaupun, untuk gaya ini, kita cenderung menggunakan nilai "kiri" atau "kanan", bergantung pada cara kita mahu imej kita diselaraskan. Kami mendapati sintaks yang mudah untuk berfungsi dengan baik dan mudah bagi orang lain yang mungkin menguruskan tapak di masa hadapan untuk memahami, tetapi anda boleh memberi nilai kelas apa-apa yang anda mahukan.
-
- Dengan sendirinya, nilai kelas ini tidak akan dilakukan. Imej tidak akan diselaraskan secara automatik di sebelah kiri teks. Untuk ini, kami kini perlu beralih kepada fail CSS kami.
-
- Dalam lembaran gaya anda, anda kini boleh menambah gaya berikut:
- .dibiarkan {
- terapung: kiri;
- padding: 0 20px 20px 0;
- }
- Apa yang anda lakukan di sini adalah menggunakan sifat "float" CSS , yang akan menarik imej dari aliran dokumen biasa (cara yang biasanya dipaparkan oleh imej, dengan teks yang diselaraskan di bawahnya) dan ia akan menjajarkannya ke sebelah kiri bekasnya . Teks yang datang selepas itu dalam markup HTML dengan kini membungkusnya. Kami juga menambah beberapa nilai padding supaya teks ini tidak akan tetapi secara langsung menentang imej. Sebaliknya, ia akan mempunyai jarak yang bagus yang akan menarik secara visual dalam reka bentuk halaman. Dalam kecacatan CSS untuk padding, kami menambah 0 nilai ke bahagian atas dan kiri imej, dan 20 piksel di sebelah kiri dan bawahnya. Ingat, anda perlu menambah beberapa padding di sebelah kanan imej sejajar kiri. Imej sejajar yang betul (yang akan kita lihat sesaat) akan mempunyai padding digunakan di sebelah kiri.
- Sekiranya anda melihat halaman web anda dalam penyemak imbas, anda kini akan melihat bahawa imej anda diselaraskan ke sebelah kiri halaman dan teks yang dibungkus dengan baik di sekelilingnya. Satu lagi cara untuk mengatakan ini adalah bahawa imej itu "terapung ke kiri".
- Sekiranya anda ingin menukar imej ini untuk diselaraskan ke kanan (seperti dalam contoh foto yang mengiringi artikel ini), ia akan mudah. Pertama, anda mesti pastikan bahawa, sebagai tambahan kepada gaya yang kami tambahkan kepada CSS kami untuk nilai kelas "kiri", kami juga mempunyai satu untuk penjajaran hak. Ia akan kelihatan seperti ini:
- .right {
- terapung: betul;
- padding: 0 0 20px 20px;
- }
- Anda dapat melihat bahawa ini hampir sama dengan CSS pertama yang kami tulis. Satu-satunya perbezaan adalah nilai yang kami gunakan untuk "float" property dan nilai padding yang kami gunakan (menambah beberapa ke sebelah kiri imej kita dan bukannya kanan).
- Akhirnya, anda akan mengubah nilai kelas imej dari "kiri" ke "kanan" dalam HTML anda:
-
- Lihatlah halaman anda dalam pelayar sekarang dan imej anda harus diselaraskan ke sebelah kanan dengan teks dengan kemas dibalut di sekelilingnya. Kami cenderung menambah kedua-dua gaya ini, "kiri" dan "kanan" kepada semua gaya gaya kami supaya kami dapat menggunakan gaya visual ini seperti yang diperlukan apabila kami membuat halaman web. Kedua-dua gaya ini menjadi ciri-ciri yang bagus dan boleh diguna semula yang mana kita boleh beralih kepada setiap kali kita perlu menggunakan imej gaya dengan membungkus teks di sekelilingnya.
Menggunakan HTML Daripada CSS (dan Kenapa Anda Tidak Perlu Ini)
Walaupun ada kemungkinan untuk melakukan pembungkusan teks di sekitar imej dengan HTML, piawaian web menetapkan bahawa CSS (dan langkah-langkah yang ditunjukkan di atas) adalah cara untuk pergi supaya kita dapat mengekalkan pemisahan struktur (HTML) dan gaya (CSS). Ini sangat penting apabila anda menganggap bahawa, untuk beberapa peranti dan susun atur, teks itu mungkin tidak perlu mengalir di sekitar imej. Untuk skrin yang lebih kecil, susun atur laman web yang responsif mungkin memerlukan teks itu benar-benar menyelaraskan di bawah imej dan imej itu membentang lebar lebar skrin. Ini mudah dilakukan dengan pertanyaan media jika gaya anda berasingan dari markup HTML anda. Dalam dunia pelbagai peranti hari ini, di mana imej dan teks akan kelihatan berbeza untuk pelawat yang berbeza dan pada skrin yang berbeza, pemisahan ini adalah penting untuk kejayaan jangka panjang dan pengurusan halaman web.