Grundlagen des Webdesign-Layouts_Erfahrungsaustausch

Comme vous pouvez le constater maintenant, la conception de la mise en page des pages Web devient de plus en plus importante. Les visiteurs ne veulent plus voir un site qui se concentre uniquement sur le contenu. Bien que le contenu soit important, une page ou un site n’est apprécié que lorsque sa mise en page et son contenu sont correctement intégrés. De toute façon vous ne parviendrez pas à fidéliser les visiteurs trop « pointilleux ».

1. Le concept de base de la mise en page d'une page Web

Au début, lorsque la page Web est présentée devant vous, elle est comme une feuille de papier vierge, ce qui vous oblige à utiliser vos talents de design à volonté. Au début, vous devez comprendre que même si vous pouvez contrôler tout ce que vous pouvez contrôler, si vous savez ce qu'est une norme conventionnelle ou les habitudes de navigation de la plupart des visiteurs, vous pouvez alors vous appuyer sur cela pour ajouter quelque chose qui vous est propre. Vous pouvez bien sûr créer vos propres designs, mais si vous êtes débutant, il est préférable de comprendre les concepts de base de la mise en page Web.

1. Taille de la page :

Étant donné que la taille de la page est liée à la taille et à la résolution du moniteur, la limitation de la page Web est que vous ne pouvez pas dépasser la portée du moniteur, et le navigateur prendra également beaucoup de place et la plage de pages qui vous reste deviendra de plus en plus petite. Généralement, lorsque la résolution est de 800x600, la taille d'affichage de la page est : 780x428 pixels ; lorsque la résolution est de 640x480, la taille d'affichage de la page est : 620X311 pixels, lorsque la résolution est de 1024X768, la taille d'affichage de la page est de : : 1007x600. Il ressort des données ci-dessus que plus la résolution est élevée, plus la taille de la page est grande.

La barre d'outils du navigateur affecte également la taille de la page. Généralement, les barres d'outils des navigateurs actuels peuvent être annulées ou ajoutées, donc la taille de la page est différente lorsque vous affichez toutes les barres d'outils et lorsque vous fermez toutes les barres d'outils.

Dans le processus de conception Web, faire glisser la page vers le bas est le seul moyen d'ajouter plus de contenu (taille) à la page Web. Mais je voudrais rappeler à tous qu'à moins d'être sûr que le contenu du site peut inciter les gens à faire glisser, ne laissez pas les visiteurs faire glisser la page sur plus de trois écrans. Si vous devez afficher plus de trois écrans de contenu sur une même page, mieux vaut créer des liens internes à la page pour faciliter la navigation des visiteurs.

2. Forme globale :

Qu'est-ce que la forme ? La forme est l'image d'un objet créé. Il s'agit de l'image globale de la page. Cette image doit former un tout et la connexion des graphiques et du texte doit être superposée et ordonnée. Bien que les moniteurs et les navigateurs soient rectangulaires, pour la forme de la page, vous pouvez utiliser pleinement d'autres formes de la nature et leurs combinaisons : rectangle, cercle, triangle, losange, etc.

Pour différentes formes, ils représentent différentes significations. Par exemple, le rectangle représente la formalité et les règles. Vous avez remarqué que de nombreuses pages Web du PCI et du gouvernement utilisent des rectangles comme forme générale ; les bandes circulaires représentent la douceur, l'unité, la chaleur, la sécurité, etc. De nombreux sites de mode aiment utiliser des cercles comme forme générale. forme de la page ; le triangle représente la force, l'autorité, la solidité, l'agressivité, etc. Afin de montrer son autorité, de nombreux grands sites Web commerciaux utilisent souvent des triangles car la forme générale de la page représente l'équilibre, la coordination, l'équité et ; certains sites de rencontres utilisent souvent le diamant comme forme générale de la page. Bien que différentes formes aient des significations différentes, la plupart des productions de pages Web actuelles sont conçues en combinant plusieurs graphiques, dans lesquels un certain graphique peut représenter une plus grande proportion de la composition.

3. En-tête :

L'en-tête peut également être appelé en-tête. La fonction de l'en-tête est de définir le thème de la page. Par exemple, la majeure partie du nom d'un site est affichée dans l'en-tête. De cette façon, les visiteurs peuvent rapidement savoir de quoi parle le site. L'en-tête est la clé de la conception entière de la page. Il impliquera davantage de conceptions ci-dessous et la coordination de la page entière. Des images du nom du site, du logo de l'entreprise et des bannières publicitaires sont souvent placées sur l'en-tête de la page.

4. Texte :

Le texte apparaît sous forme de lignes ou de blocs (paragraphes) sur la page, et leur emplacement détermine la visibilité de l'ensemble de la mise en page. Dans le passé, en raison des limites de la technologie de production de pages, la flexibilité de placement du texte était très limitée. Cependant, avec l'essor du DHTML, le texte peut être placé n'importe où sur la page selon vos propres besoins.

5. Pied de page :

Le pied de page fait écho à l'en-tête. L'en-tête est l'endroit où le thème du site est placé et le pied de page est l'endroit où sont placées les informations sur le producteur ou l'entreprise. Vous pouvez voir qu’une grande partie des informations de production sont placées dans le pied de page.

6. Images

Les images et le texte sont les deux éléments majeurs d'une page Web, mais ils sont indispensables. La façon de gérer la position des images et du texte est devenue la clé de la mise en page de la page entière. Et votre réflexion en matière de mise en page se reflétera également ici.

7. Multimédia

En plus des textes et des images, il existe également des sons, des animations, des vidéos et d'autres médias. Bien qu’ils ne soient pas souvent utilisés, avec l’essor des pages Web dynamiques, ils deviendront plus importants dans la mise en page des pages Web.

2. Méthode de mise en page des pages 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.

Der Layout-Leitfaden, den ich heute vorstellen werde, umfasst nicht alle Webseiten-Layout-Techniken. In gewisser Weise möchte ich Ihnen zeigen, wie Sie beim Erstellen von Webseiten Bilder und Texte richtig platzieren und wie Sie ein springendes Design erzielen.