웹디자인 레이아웃의 기초_경험교류

지금 보시다시피 웹페이지의 레이아웃 디자인이 점점 더 중요해지고 있습니다. 방문자는 더 이상 콘텐츠에만 초점을 맞춘 사이트를 보고 싶어하지 않습니다. 콘텐츠도 중요하지만 페이지나 사이트는 레이아웃과 콘텐츠가 성공적으로 통합되었을 때만 좋아요를 받습니다. 어느 쪽이든 너무 "까다로운" 방문자를 유지할 수는 없습니다.

1. 웹 페이지 레이아웃의 기본 개념

처음에 웹 페이지가 눈앞에 나타나면 마치 빈 종이와 같아서 이를 사용해야 합니다. 당신의 디자인 재능을 마음대로. 처음에는 제어할 수 있는 모든 것을 제어할 수 있지만 기존 표준이 무엇인지 또는 대부분의 방문자의 탐색 습관을 안다면 이를 기반으로 자신만의 것을 추가할 수 있다는 점을 이해해야 합니다. 물론 자신만의 디자인을 만들 수도 있지만, 초보자라면 웹 레이아웃의 기본 개념을 이해하는 것이 가장 좋습니다.

1. 페이지 크기 :

페이지 크기는 모니터의 크기, 해상도와 관련이 있기 때문에 웹페이지의 한계는 모니터의 범위를 뚫을 수 없다는 점, 브라우저도 많은 공간을 차지하고 남은 페이지 범위는 점점 작아집니다. 일반적으로 해상도가 800x600일 때 페이지의 표시 크기는 780x428픽셀이고, 해상도가 640x480일 때 페이지의 표시 크기는 620X311픽셀입니다. : 1007x600. 위의 데이터를 보면 해상도가 높을수록 페이지 크기가 커진다는 것을 알 수 있습니다.

브라우저 툴바도 페이지 크기에 영향을 미칩니다. 일반적으로 현재 브라우저의 툴바는 취소되거나 추가될 수 있으므로 툴바를 모두 표시할 때와 툴바를 모두 닫을 때 페이지 크기가 다릅니다.

웹 디자인 과정에서 페이지를 아래로 드래그해야만 웹 페이지에 콘텐츠(크기)를 추가할 수 있습니다. 하지만 사이트의 콘텐츠가 사람들을 끌어당길 수 있다고 확신하지 않는 한 방문자가 페이지를 세 화면 이상 드래그하도록 허용하지 않는다는 점을 모든 사람에게 상기시키고 싶습니다. 동일한 페이지에 3개 이상의 콘텐츠 화면을 표시해야 하는 경우 방문자의 탐색을 용이하게 하기 위해 페이지에 내부 링크를 만드는 것이 좋습니다.

2. 전체적인 모양:

모양이란 무엇입니까? 모양은 사물이 만들어낸 이미지입니다. 이는 페이지의 전체적인 이미지를 의미하며, 이 이미지는 전체적으로 이루어져야 하며 그래픽과 텍스트의 연결이 레이어링되고 질서정연해야 합니다. 모니터와 브라우저는 모두 직사각형이지만 페이지 모양은 직사각형, 원, 삼각형, 마름모 등 자연의 다른 모양과 그 조합을 최대한 활용할 수 있습니다.

모양에 따라 의미도 다릅니다. 예를 들어, 직사각형은 형식과 규칙을 나타냅니다. 많은 ICP 및 정부 웹 페이지는 직사각형을 전체 모양으로 사용하고 원형 띠는 부드러움, 통일성, 따뜻함, 보안 등을 나타냅니다. 많은 패션 사이트는 원형을 전체 모양으로 사용하는 것을 좋아합니다. 페이지의 모양 삼각형은 힘, 권위, 견고함, 공격성 등을 나타냅니다. 다이아몬드는 균형, 조정, 공정성을 나타내기 때문에 많은 대형 상업 웹사이트에서는 삼각형을 자주 사용합니다. 일부 데이트 사이트에서는 다이아몬드를 페이지의 전체 모양으로 사용하는 경우가 많습니다. 모양에 따라 의미도 다르지만, 현재 웹페이지 제작은 대부분 여러 그래픽을 결합하여 디자인되며, 특정 그래픽이 구성에서 더 큰 비중을 차지할 수 있습니다.

3. 헤더:

헤더는 페이지의 테마를 정의하는 역할도 합니다. 예를 들어 사이트 이름의 대부분은 헤더에 표시됩니다. 이렇게 하면 방문자는 사이트의 내용을 빠르게 알 수 있습니다. 헤더는 전체 페이지 디자인의 핵심이며 아래에 더 많은 디자인과 전체 페이지의 조정이 포함됩니다. 사이트 이름, 회사 로고, 배너 광고 사진이 페이지 헤더에 배치되는 경우가 많습니다.

4. 텍스트:

텍스트는 페이지의 줄이나 블록(단락)으로 표시되며 텍스트 배치에 따라 전체 페이지 레이아웃의 가시성이 결정됩니다. 과거에는 페이지 제작 기술의 한계로 인해 텍스트 배치의 유연성이 매우 낮았습니다. 그러나 DHTML의 등장으로 사용자의 요구 사항에 따라 텍스트를 페이지 어디에나 배치할 수 있습니다.

5. 바닥글:

바닥글은 머리글과 동일합니다. 머리글은 사이트 테마를 넣는 곳이고, 바닥글은 생산자나 회사 정보를 넣는 곳입니다. 바닥글에 생산정보가 많이 들어가 있는 것을 볼 수 있습니다.

6. 그림

그림과 텍스트는 웹페이지를 구성하는 두 가지 주요 요소이지만, 없어서는 안 될 요소입니다. 그림과 텍스트의 위치를 ​​어떻게 처리하는가가 전체 페이지 레이아웃의 핵심이 되었습니다. 그리고 귀하의 레이아웃 생각도 여기에 반영됩니다.

7. 멀티미디어

텍스트와 그림 외에도 사운드, 애니메이션, 비디오 및 기타 미디어도 있습니다. 자주 활용되지는 않지만 동적 웹 페이지가 증가함에 따라 웹 페이지 레이아웃에서 더욱 중요해질 것입니다.

2. 웹페이지 레이아웃 방법

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.