Hirisan di Adobe Photoshop digunakan untuk membahagikan susun atur web ke bahagian untuk mengeksport imej dan menjana jadual HTML. Mereka membenarkan pereka untuk membuat kawasan segi empat tepat di sekitar komponen seperti logo atau bar navigasi, mengeksportnya dengan tetapan tersuai, dan menghasilkan susun atur berasaskan meja yang mencerminkan reka bentuk. Kegunaan umum termasuk pengeksport tajuk, footer, dan grafik latar belakang sambil mempercepatkan pembangunan. Proses ini melibatkan mengiris reka bentuk, mengeksport fail dan HTML, dan mengatur imej menggunakan sel meja. Walaupun ketinggalan zaman kerana susun atur CSS moden seperti Flexbox dan Grid, kepingan adalah penting apabila pelayar tidak mempunyai konsistensi dan CSS adalah terhad.

Hirisan adalah ciri dalam Adobe Photoshop (dan alat -alat terdahulu seperti Imageready) yang membolehkan pereka untuk membahagikan susun atur web ke bahagian yang lebih kecil dan terkawal. Bahagian -bahagian ini kemudiannya boleh dieksport sebagai imej individu atau berubah menjadi HTML dan CSS di kemudian hari.

Kembali pada akhir 90 -an dan awal 2000 -an, kepingan biasanya digunakan untuk membina susun atur web kerana CSS tidak cukup maju untuk mengendalikan kedudukan yang kompleks. Pereka akan membuat laman web penuh mockup di Photoshop, potong itu, dan pemaju akan menyebarkan kepingan tersebut bersama -sama menggunakan jadual di HTML.

Inilah caranya mereka bekerja dan mengapa orang menggunakannya:

Apa sebenarnya kepingan?

Hirisan adalah kawasan segi empat tepat yang ditakrifkan dalam alat reka bentuk yang membolehkan anda mengeksport bahagian komposisi secara berasingan. Di Photoshop, anda boleh menarik kepingan di sekitar bar navigasi, logo, kawasan kandungan, atau komponen visual.

• Anda boleh membuat kepingan pengguna secara manual atau lambang auto berdasarkan lapisan
• Setiap keping boleh mempunyai tetapan eksport sendiri -seperti JPEG, PNG, atau GIF
• Semasa mengeksport, alat ini menjana jadual HTML yang berbaris semua kepingan imej

Ini menjadikannya mudah untuk menjadikan reka bentuk visual menjadi sesuatu yang boleh dipaparkan pada penyemak imbas, walaupun pemaju tidak menulis HTML atau CSS tersuai.

Mengapa kepingan digunakan untuk susun atur web

Sebelum susun atur CSS moden (seperti Flexbox atau Grid), pemaju sangat bergantung pada jadual HTML untuk mengawal struktur halaman. Itu membuat kepingan semulajadi-mereka boleh dieksport ke dalam susun atur berasaskan meja yang mencerminkan reka bentuk asal.

Kegunaan umum termasuk:

• Mengeksport tajuk, kaki, dan sidebars sebagai imej yang berasingan
• Mengendalikan grafik latar belakang yang kompleks yang tidak dapat dikodkan dengan mudah
• Mempercepat pembangunan dengan melangkau pengekodan tangan untuk laman web asas

Ia sangat popular apabila bekerja dengan pelanggan yang mahukan hasil yang sempurna dan tidak peduli bagaimana ia dilakukan di bawah tudung.

Bagaimana susun atur berasaskan slice berfungsi dalam amalan

Sebaik sahaja seorang pereka menghiris susun atur, mereka biasanya menggunakan "Eksport" Photoshop sebagai ciri "Simpan untuk Web" yang lebih tua untuk menjana fail dan HTML.

Hasilnya kelihatan seperti ini:

• Folder yang penuh dengan fail imej kecil (butang, latar belakang, ikon)
• Fail HTML dengan <table> tag mengatur imej tersebut bersebelahan<li> Gaya sebaris atau atribut mengawal jarak dan penjajaran</li> <p> Pemaju kadang -kadang akan mengubah kod yang dihasilkan untuk membersihkannya atau menambah fungsi, tetapi susun aturnya pada dasarnya adalah kolaj imej yang dijahit bersama -sama dengan sel -sel meja.</p> <h3 id="Mereka-sudah-lapuk-sekarang-tetapi-tidak-tanpa-alasan"> Mereka sudah lapuk sekarang, tetapi tidak tanpa alasan</h3> <p> Hari ini, kepingan tidak banyak digunakan. Reka bentuk web moden bergantung pada CSS untuk susun atur, tipografi, dan tingkah laku responsif. Alat seperti Figma atau Sketch tidak lagi menawarkan kepingan lagi kerana kita tidak lagi membina halaman dengan memotong imej.</p> <p> Namun, kepingan mempunyai tempat mereka apabila penyemak imbas tidak konsisten dan CSS terhad. Selama bertahun -tahun, mereka membantu merapatkan jurang antara reka bentuk dan pembangunan -walaupun hasilnya tidak selalu semantik atau boleh diakses.</p> <p> Pada asasnya, kepingan adalah penyelesaian praktikal untuk masa ketika web tidak dibina untuk pereka.</p> </table>

Atas ialah kandungan terperinci Apakah kepingan, dan bagaimana mereka digunakan secara tradisional untuk susun atur reka bentuk web?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!