Asas susun atur reka bentuk web_Pertukaran pengalaman

Seperti yang anda lihat sekarang, reka bentuk reka letak halaman web menjadi semakin penting. Pelawat tidak lagi mahu melihat tapak yang hanya memfokuskan pada kandungan. Walaupun kandungan penting, halaman atau tapak hanya disukai apabila susun atur dan kandungannya berjaya disepadukan. Walau apa pun, anda tidak akan dapat mengekalkan pelawat yang terlalu "pilih kasih".

1. Konsep asas susun atur halaman web

Pada mulanya, apabila halaman web dibentangkan di hadapan anda, ia seperti sekeping kertas kosong, yang memerlukan anda menggunakan bakat reka bentuk anda sesuka hati. Pada mulanya, anda perlu memahami bahawa walaupun anda boleh mengawal semua yang anda boleh kawal, jika anda tahu apa itu standard konvensional atau tabiat menyemak imbas kebanyakan pelawat, maka anda boleh membina sesuatu Tambah ini sendiri. Anda sudah tentu boleh membuat reka bentuk anda sendiri, tetapi jika anda seorang pemula, sebaiknya memahami konsep asas susun atur web.

1. Saiz halaman:

Memandangkan saiz halaman berkaitan dengan saiz dan resolusi monitor, had halaman web ialah anda tidak boleh menembusi skop monitor, dan penyemak imbas juga akan mengambil banyak ruang, dan julat halaman yang tinggal untuk anda menjadi lebih kecil dan lebih kecil. Secara amnya, apabila resolusi ialah 800x600, saiz paparan halaman ialah: 780x428 piksel apabila resolusi ialah 640x480, saiz paparan halaman ialah: 620X311 piksel apabila resolusi ialah 1024X768, saiz paparan halaman adalah : 1007x600. Dari data di atas dapat dilihat bahawa semakin tinggi resolusi, semakin besar saiz halaman.

Bar alat penyemak imbas juga mempengaruhi saiz halaman. Secara amnya, bar alat penyemak imbas semasa boleh dibatalkan atau ditambah, jadi saiz halaman berbeza apabila anda memaparkan semua bar alat dan apabila anda menutup semua bar alat.

Dalam proses reka bentuk web, menyeret halaman ke bawah adalah satu-satunya cara untuk menambah lebih banyak kandungan (saiz) pada halaman web. Tetapi saya ingin mengingatkan semua orang bahawa melainkan anda pasti bahawa kandungan tapak boleh menarik orang untuk menyeret, jangan biarkan pelawat menyeret halaman lebih daripada tiga skrin. Jika anda perlu memaparkan lebih daripada tiga skrin kandungan pada halaman yang sama, lebih baik anda membuat pautan dalaman pada halaman tersebut untuk memudahkan pelawat menyemak imbas.

2. Bentuk keseluruhan:

Apakah bentuk itu ialah imej objek yang dicipta. Ini merujuk kepada imej keseluruhan halaman Imej ini hendaklah keseluruhan, dan sambungan grafik dan teks hendaklah berlapis dan teratur. Walaupun kedua-dua monitor dan penyemak imbas adalah segi empat tepat, untuk bentuk halaman, anda boleh menggunakan sepenuhnya bentuk lain dalam alam semula jadi dan gabungannya: segi empat tepat, bulatan, segitiga, rombus, dsb.

Untuk bentuk yang berbeza, ia mewakili makna yang berbeza. Sebagai contoh, segi empat tepat mewakili formaliti dan peraturan Anda telah perasan bahawa banyak halaman web ICP dan kerajaan menggunakan segi empat tepat sebagai bentuk keseluruhan jalur melambangkan kelembutan, perpaduan, kemesraan, keselamatan, dll. Banyak tapak fesyen suka menggunakan bulatan sebagai keseluruhannya; bentuk halaman; Segitiga mewakili kekuatan, kewibawaan, kekukuhan, pencerobohan, dll. Untuk menunjukkan kewibawaannya, banyak tapak web komersial yang besar sering menggunakan segi tiga sebagai bentuk keseluruhan halaman; sesetengah tapak temu janji sering menggunakan berlian sebagai bentuk keseluruhan halaman. Walaupun bentuk yang berbeza mempunyai makna yang berbeza, kebanyakan pengeluaran halaman web semasa direka dengan menggabungkan berbilang grafik, di mana grafik tertentu mungkin menyumbang bahagian yang lebih besar daripada komposisi.

3. Pengepala:

Pengepala juga boleh dipanggil pengepala Fungsi pengepala adalah untuk menentukan tema halaman. Sebagai contoh, kebanyakan nama tapak dipaparkan dalam pengepala. Dengan cara ini, pelawat boleh mengetahui dengan cepat tentang tapak tersebut. Pengepala adalah kunci kepada keseluruhan reka bentuk halaman Ia akan melibatkan lebih banyak reka bentuk di bawah dan penyelarasan keseluruhan halaman. Gambar nama tapak, logo syarikat dan iklan sepanduk selalunya diletakkan pada pengepala halaman.

4. Teks:

Teks muncul dalam baris atau blok (perenggan) pada halaman dan peletakannya menentukan keterlihatan keseluruhan reka letak halaman. Pada masa lalu, disebabkan oleh keterbatasan teknologi pengeluaran halaman, fleksibiliti penempatan teks adalah sangat kecil, namun dengan peningkatan DHTML, teks boleh diletakkan di mana-mana pada halaman mengikut keperluan anda sendiri.

5. Pengaki:

Pengaki menggemakan pengepala. Pengepala ialah tempat tema tapak diletakkan, dan pengaki ialah tempat maklumat pengeluar atau syarikat diletakkan. Anda boleh melihat bahawa banyak maklumat pengeluaran diletakkan dalam pengaki.

6. Gambar

Gambar dan teks ialah dua elemen utama halaman web, tetapi ia amat diperlukan. Cara mengendalikan kedudukan gambar dan teks telah menjadi kunci kepada susun atur keseluruhan halaman. Dan pemikiran susun atur anda juga akan ditunjukkan di sini.

7. Multimedia

Selain teks dan gambar, terdapat juga bunyi, animasi, video dan media lain. Walaupun mereka tidak sering digunakan, dengan kebangkitan halaman web dinamik, mereka akan menjadi lebih penting dalam susun atur halaman web.

2. Kaedah reka letak halaman web

Terdapat dua kaedah susun atur halaman web, yang pertama ialah susun atur kertas; Perkara berikut diperkenalkan secara berasingan:

1. Kaedah susun atur kertas

Ramai pereka web tidak suka melukis lakaran susun atur halaman terlebih dahulu, tetapi secara langsung mereka bentuk susun atur dan menambah kandungan dalam web pereka bentuk. Pendekatan tanpa draf ini tidak akan membenarkan anda mereka bentuk halaman web yang sangat baik. Oleh itu, apabila anda mula membuat halaman web, anda mesti terlebih dahulu melukis lakaran susun atur halaman anda di atas kertas.

Sediakan beberapa helai kertas putih dan pensel Anda ingin mereka bentuk laman web yang bergaya.

* Pemilihan saiz:

Pada masa ini, resolusi 800X600 secara amnya ialah mod penyemakan imbas konvensional. Jadi untuk menjaga kebanyakan pelawat, saiz halaman anda hendaklah berdasarkan resolusi 800X600.

*Pilihan bentuk:

Mula-mula lukis segi empat tepat melambangkan tetingkap penyemak imbas pada kertas putih Segi empat tepat ini akan menjadi skop reka letak anda. Pilih bentuk sebagai tema keseluruhan halaman Kami memilih bulatan kerana ia mewakili kelembutan dan lebih sesuai dengan fesyen Kemudian lukiskannya secara rawak dalam bingkai segi empat tepat. Jika anda melukisnya seperti ini, anda akan mendapati bahawa ia sangat kemas. Malah, jika anda ingin mereka bentuk susun atur yang sempurna dari awal, ia akan menjadi lebih sukar, dan anda perlu mencari bentuk khas yang tersembunyi dalam grafik yang kelihatan tidak kemas ini. Juga ambil perhatian bahawa anda tidak perlu risau sama ada reka letak yang anda reka boleh dilaksanakan. Malah, sebarang susun atur yang anda boleh fikirkan boleh direalisasikan dengan teknologi HTML hari ini.

Dengan mengambil kira lengkok cekung di sebelah kiri, untuk mencapai keseimbangan, kami menambah segi empat tepat (ia juga boleh menjadi segmen garisan) di sebelah kanan halaman.

*Tambah pengepala halaman:

jpg ialah bentuk reka letak yang kami dapat daripada .jpg dan 2.jpg, jadi kami harus menambah pengepala halaman. Secara amnya, pengepala halaman terletak di bahagian atas halaman, jadi kami menambah pengepala halaman untuk .jpg Untuk mengimbangi lengkok di sebelah kiri dan segi empat tepat di sebelah kanan, kami menambah pengepala halaman segi empat tepat dan biarkan halaman itu. pengepala bersilang dengan lengkok di sebelah kiri.

*Tambah teks:

Tambahkan teks dan grafik pada bahagian kosong halaman. Oleh kerana terdapat segi empat tepat di sebelah kanan halaman sebagai kerajang, teks yang diletakkan di kawasan kosong tidak akan kelihatan terkeluar kerana arka di sebelah kiri.

*Tambah gambar:

Gambar adalah media yang diperlukan untuk mencantikkan halaman dan menggambarkan kandungannya. Tambahkan imej di sini jika sesuai.

Selepas langkah di atas, susun atur umum halaman fesyen akan muncul. Sudah tentu, ia bukan hasil akhir, tetapi rujukan penting untuk pengeluaran masa depan anda.

2. Kaedah susun atur perisian

Jika anda tidak suka menggunakan kertas untuk melukis niat reka letak anda, maka anda juga boleh menggunakan perisian untuk menyelesaikan tugasan ini. Perisian ini ialah Photoshop. Fungsi penyuntingan imej Photoshop adalah lebih berguna apabila digunakan untuk mereka bentuk susun atur halaman web. Tidak seperti menggunakan kertas untuk mereka bentuk susun atur, Photoshop boleh dengan mudah menggunakan warna, grafik dan menggunakan fungsi lapisan untuk mereka bentuk idea susun atur yang tidak boleh dicapai dengan kertas.

3. Teknologi susun atur halaman web

1. Penggunaan Lembaran Gaya Lata

Dalam standard HTML4.0 baharu, CSS (Cascading Style Sheet) telah dicadangkan teks dan imej dengan ketepatan yang lengkap. CSS mungkin kelihatan agak rumit untuk pemula, tetapi ia sememangnya kaedah susun atur yang baik. Idea yang anda tidak pernah dapat sedar boleh direalisasikan dengan CSS. Pada masa ini di banyak tapak, penggunaan helaian gaya berlatarkan adalah gambaran yang sangat baik bagi tapak. Anda boleh menemui banyak pengenalan dan kaedah penggunaan CSS dalam talian. Sudah tentu, piawaian WEB yang semakin popular (XHTML+CSS) sangat menyokong pengasingan kandungan dan pembentangan, dan berfungsi sebagai peralihan untuk XML pertukaran data generasi seterusnya (iaitu, XHTML).

2. Susun atur jadual

Susun atur jadual nampaknya telah menjadi standard Jika anda menyemak imbas mana-mana tapak, ia mesti dibentangkan dalam jadual. Kelebihan susun atur jadual ialah ia boleh mengendalikan objek yang berbeza tanpa perlu risau tentang pengaruh antara objek yang berbeza. Selain itu, jadual lebih mudah untuk meletakkan imej dan teks daripada menggunakan CSS. Satu-satunya kelemahan susun atur jadual ialah kelajuan muat turun halaman terjejas apabila anda menggunakan terlalu banyak jadual. Untuk susun atur jadual, anda hanya boleh mencari halaman utama tapak, menyimpannya sebagai fail HTML, dan membukanya dengan alat penyunting halaman web (perisian WYSIWYG diperlukan).

　3. Reka letak bingkai

Saya tidak tahu mengapa, tetapi halaman dengan struktur bingkai telah mula tidak disukai oleh ramai orang, mungkin kerana keserasiannya. Tetapi dari perspektif susun atur, struktur bingkai ialah kaedah susun atur yang baik. Sama seperti susun atur jadual, ia meletakkan objek yang berbeza pada halaman yang berbeza untuk diproses Kerana bingkai boleh membatalkan sempadan, ia biasanya tidak menjejaskan penampilan keseluruhan.

Panduan susun atur yang saya akan perkenalkan hari ini bukan semua teknik susun atur halaman web Dalam erti kata lain, saya ingin membimbing anda tentang cara meletakkan gambar dan teks dengan betul semasa membuat halaman web, dan cara untuk mempunyai reka bentuk yang melompat.