Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. HTML & CSS

Cara Mendesain dan Mengekodekan Situs Web yang Fleksibel

by
Read Time:29 minsLanguages:

Indonesian (Bahasa Indonesia) translation by poipoi (you can also view the original English article)

Dalam tutorial ini, kita akan merancang dan coding sederhana blog-gaya-halaman web. Kami akan membayar perhatian khusus untuk membuat desain yang fleksibel dan dapat diakses dengan menggunakan bersih dan sederhana XHTML dan CSS. Tutorial ini ditujukan untuk pemula, dan siapapun yang ingin meningkatkan aksesibilitas web mereka desain.


Tutorial Detail

  • Kesulitan: Mudah
  • Perkiraan Waktu Penyelesaian: 1.5-2 jam

Langkah 1

Jadi contoh halaman web ini akan didasarkan pada sebuah blog sederhana tema, dengan blog WordPress-seperti struktur yang mirip dengan yang dari nettuts homepage. Itu akan terlihat seperti ini:

Idenya di sini adalah tidak untuk anda untuk mereproduksi contoh saya, tapi bagi anda untuk dapat mengikuti dan menerapkan teknik-teknik desain anda sendiri, mudah-mudahan belajar satu atau dua hal tentang konsep dasar.

Langkah 2 - Photoshop

Kita akan terus Photoshop digunakan di sini untuk minimal, Biasanya saya mockup seluruh desain di Photoshop sebelum coding, tapi di sini saya hanya akan menghasilkan dasar tata letak, dan khawatir tentang konten nanti. Ini adalah contoh alur kerja yang berbeda, itu akan membuat lebih masuk akal seperti yang kita pergi bersama.

Catatan: Beberapa pembaca bertanya tentang menggunakan GIMP. Saya belum menggunakannya secara pribadi, tapi saya yakin anda dapat menyelesaikan langkah-langkah berikut di GIMP dengan mudah, karena semua kita adalah menggunakan bentuk-bentuk dasar dan gradien.

Tata Letak Halaman

Saya memutuskan untuk membuat halaman 900px lebar, jadi saya dokumen lebar 1000px dan 1200px lama (tidak tahu mengapa aku memberi diriku begitu sedikit ruang, membuat anda lebih luas jika anda suka). Tempat panduan di 50px dan 950px untuk mendapatkan 900px luas. Kita akan memiliki area konten dan sidebar, dan area konten akan menjadi 600px luas, sehingga tempat yang lain panduan di 650px.

Latar belakang

Latar belakang header hanya tiga persegi panjang untuk bagian atas link, header utama, dan area navigasi. Saya menggunakan lapisan bentuk dan menambahkan gradien pada layer styles. Ada juga 1px perbatasan antara bagian atas bar dan area header, dan di antara header dan navigasi daerah.

Footer latar belakang lain adalah gradien, tapi kali ini dengan 2px perbatasan di bagian atas.

222
333
444
555

Selanjutnya tambahkan latar belakang untuk sidebar, saya memilih #d8ddd1.

666

Jenis Alat

Selanjutnya kita Ambil type tool (T) dan menambahkan logo dan tagline, dan beberapa dasar navigasi link. Font:

Judul Blog:

  • Font: Myriad Pro
  • Ukuran: 48pt
  • Color: #ffffff (putih)

Deskripsi Blog:

  • Font: Myriad Pro
  • Size: 24pt
  • Color: #ffffff

Navigasi Utama Link:

  • Jenis Huruf: Arial
  • Size: 18pt
  • Warna: #2b2b2b

"selamat datang, tamu" dan "tinggal diperbarui":

  • Jenis Huruf: Arial
  • Size: 12pt
  • Warna: #fffff

"login, Sign Up" dan "berlangganan via...":

  • Warna: #a5bf8d
  • Gaya: underline
777

Kandungan

Kita hanya akan memiliki satu sampel "post" di Photoshop mockup, karena saya menemukan bekerja dengan tipe di Photoshop adalah rasa sakit yang nyata, tapi kita akan pergi ke detail lebih lanjut tentang styling konten bagian kemudian. Font yang saya gunakan untuk dummy post adalah:

Judul Posting:

  • Jenis Huruf: Arial
  • Size: 24pt
  • Warna: #3c3f40
  • Style: Bold

Tanggal, kategori dan penulis info:

  • Size: 11pt

Paragraf:

  • Size: 12pt
888

Oke, kita sudah cukup banyak dilakukan dengan mockup. Semua yang perlu kita lakukan sekarang adalah iris dan menyimpan untuk web.

Pilih slice tool (C) dan memotong kurus irisan dari masing-masing latar belakang persegi panjang: bar bagian atas, area header, navigasi, dan footer. Tidak termasuk perbatasan, kita akan menambahkan mereka dalam dengan CSS. Coba zoom in benar-benar dekat untuk memastikan anda mendapatkan bagian yang tepat. Irisan saya dipotong sekitar 5px lebar, tapi lebar yang tidak terlalu penting pada saat ini.

999
101010

Pilih 'File/Save for web dan perangkat...' Tahan tombol "shift" dan klik untuk memilih masing-masing sepotong. Dari dropdown menu "preset" pilih "format jpeg . Hapus centang "convert ke sRGB"" (saya menemukan bahwa konversi menumpulkan warna). Semua pengaturan lain yang harus dibiarkan default. Klik "Save." Di jendela popup, pastikan "dipilih iris" akan ditampilkan di "iris" dropdown menu, dan klik simpan.

GIMP pengguna: saya tidak yakin jika gimp memiliki alat seperti irisan, tapi Anda hanya perlu membuat persegi panjang pilihan, menyelamatkan mereka untuk memisahkan dokumen, tanaman mereka turun, dan menyimpannya sebagai dioptimalkan jpegs.

Untuk lebih mendalam melihat mengiris dan menyimpan proses, lihat tutorial Saya sebelumnya.

Langkah 3 - Pengaturan HTML

Jika anda tidak terbiasa dengan proses pengorganisasian file dan folder untuk halaman web, sekali lagi, lihat tutorial saya yang lain terkait di atas.

Membuka kode favorit anda editor, dan membuat file baru yang disebut index.html.
Kita akan mencoba untuk menggunakan beberapa tag div mungkin untuk menjaga kami markup bermakna dan semantik. Bahwa menjadi kata, untuk mempertahankan fleksibel, resizable tata letak, kita perlu menyertakan beberapa elemen dalam beberapa divs. Lebih pada nanti.

Semua elemen di halaman kami akan terdapat dalam dua divs, yang disebut "utama" dan "footer". Dalam "utama" div, kita akan memiliki sebuah div untuk top bar, header, dan area konten. Footer akan mengandung batin div untuk menulis konten.

Top Bar

Latar belakang bar biru di bagian atas membentang lebar seluruh halaman, tetapi dua area teks harus dalam 900px halaman. Untuk mencapai hal ini, kita perlu isi yang terkandung di dalam div lain, yang akan memiliki kelas "wadah".
Di dalam bar di bagian atas, kita akan memiliki dua paragraf, satu untuk login, satu untuk pilihan berlangganan. Karena mereka akan melayang, masing-masing perlu diberikan id yang unik. Sebenarnya, jika kita ingin menjadi benar-benar semantik, kita bisa kode ini dua paragraf sebagai sebuah unordered list dengan dua item daftar. Mencoba kedua-duanya, lihat jika anda dapat membuatnya bekerja.

Langkah 5 - Header

Kita menghadapi masalah yang sama di sini seperti yang kita lakukan dengan langkah terakhir, gambar latar belakang kebutuhan untuk meregangkan keluar tanpa batas. Mengandung kandungan, kita perlu menempatkannya dalam div lain. Sejak header juga akan kami berpusat, 900px halaman luas, kita dapat kembali menggunakan "wadah" kelas. Judul blog akan dibungkus dalam tag<h1>dan deskripsi/tagline akan menjadi sebuah paragraf dengan id yang unik.

Navigasi

Juga di dalam header menu navigasi, yang akan dibungkus dalam sebuah unordered list dengan id dari "menu", yang semuanya akan dibungkus dalam div lain dengan id "navigasi".
Karena kami ingin menu navigasi menjadi terpusat, kita dapat menambahkan "wadah" untuk kelas ul juga.

Kita menulis link navigasi dalam huruf kecil di sini, tapi di file CSS kita akan mengubah mereka ke huruf besar. Anda bisa menuliskannya di ibukota di sini, tapi saya caps lock rusak, dan ini cara membuat pembersih markup.

Langkah 6 - Konten

Area konten tidak memiliki background gambar atau warna, sehingga kita tidak perlu melampirkan tambahan div. Ke pusat itu, kami dapat memberikan konten div class dari "wadah". Di dalam kandungan div, kita memiliki dua divs, satu untuk posting blog, dan satu untuk sidebar

Ketika merancang sebuah blog, kita harus memperhitungkan fakta bahwa konten akan berubah, dan mungkin termasuk sejumlah elemen, termasuk daftar, gambar, kutipan, judul dan menekankan teks. Untuk mempersiapkan diri, kita perlu gaya setiap elemen yang mungkin muncul., jadi kami konten sampel harus mencakup Semuanya. Hal ini kadang-kadang disebut "Sandbox metode." Untuk mendapatkan konten dummy, saya sarankan mengunjungi HTML Ipsum.

Kami akan memisahkan konten contoh kami menjadi beberapa pos yang berbeda, dengan judul yang dibungkus<h2>tag. Setiap posting juga akan memiliki informasi standar tentang tanggal, penulis, dll, yang terkandung dalam tag <small>. 

Langkah 7 - Sidebar

Dalam khas blog, sidebar memegang berbagai widget yang menampilkan link ke halaman lain atau artikel, dan masing-masing widget ini biasanya unordered daftar tag anchor. Di sini, kita akan memiliki "kategori", "posting terbaru" dan "arsip" widget. Jadi kami sidebar div akan berisi tiga daftar, masing-masing dengan judul yang dibungkus dalam sebuah <h3> tag.

Langkah 8 - Footer

Footer akan bekerja seperti yang di atas bar, header, dan navigasi yang bekerja dengan luar div untuk terus mengulangi latar belakang, dan batin div centre konten dan menampungnya dalam 900px dari halaman kami. Untuk melakukan ini, kita hanya perlu menambahkan "wadah" kelas kita "konten footer" div.

Kami footer akan memiliki tiga kolom: info hak cipta, link, dan pilihan berlangganan. Masing-masing akan berada sendiri div.

Oke, kita sudah selesai markup kami! Mari kita lihat dalam browser (saya menggunakan Safari 4, yang mengagumkan, dengan cara)

111111

Itu tidak terlihat seperti banyak, tapi itu memiliki semua konten kami yang ditata secara logis, cara mudah dibaca. Sangat penting bahwa un-gaya halaman web yang mengandung semua informasi yang dibutuhkan untuk pembaca untuk dapat memahami dan menavigasi halaman dengan mudah. Hal ini memastikan bahwa siapa pun browsing dengan CSS tamu dengan kebutuhan khusus, atau menggunakan berupa browser (seperti screen reader untuk tunanetra orang), masih akan dapat mengakses dan memahami konten. Menjaga ini dalam pikiran juga akan memastikan tata letak yang logis, yang akan lebih mudah untuk memodifikasi nanti.

Langkah 9 - CSS

Sekarang datang bagian yang menyenangkan: memberikan halaman kami beberapa gaya. Siapkan diri anda - untuk mencapai tata letak yang kita inginkan, kita akan harus menghadapi beberapa membingungkan CSS sedikit sakit kepala. Saya akan mencoba untuk menjelaskan konsep yang mendasari yang menyebabkan masalah ini, sehingga anda tidak hanya akan belajar bagaimana untuk memecahkan mereka, tetapi juga mendapatkan pemahaman yang lebih baik tentang bagaimana CSS bekerja dan bagaimana untuk menangani setiap masalah yang mungkin anda datang melawan. Mari kita mulai!

Membuat dokumen baru "gaya.css" dan link ke dalam kepala dari dokumen html anda:

Langkah 10 - Dasar bersih-Bersih

Pertama, kita perlu tahu apa yang kita kerjakan, yang berarti menyingkirkan browser default gaya.

Kita akan menggunakan css reset untuk menyingkirkan orang-orang sial margin dan gaya:

Kami juga memiliki font yang salah untuk seluruh halaman, memungkinkan memperbaikinya:

Langkah berikutnya adalah agak rapi: ingat bagaimana kita menambahkan "wadah" class untuk semua div yang memiliki konten teks? Sudah waktunya untuk mendapatkan wadah berisi konten kami! Seperti yang saya katakan sebelumnya, kita akan membuat halaman kami 900px lebar, dan kita perlu keluar konten yang akan dipusatkan.

Dan hanya seperti itu, kami memiliki bagus lebar 900px, berpusat pada halaman web.

Langkah 11 - Mulai di bagian Atas

Kita akan mulai di bagian atas dengan kecil kebiruan bar yang berisi berlangganan dan login link. Oke, hal pertama yang kita perhatikan tentang kami dua paragraf di atas adalah bahwa mereka seharusnya berada di samping satu sama lain, bukan di atas. Untuk melakukan ini, kita perlu untuk mengapung unsur-unsur.

Bagaimana mengapung kerja

Ketika kita melihat halaman web di browser, kita melihat sekelompok elemen-elemen yang berbeda lebar dan tinggi. Browser, namun, hanya melihat sekelompok kotak ditumpuk di atas satu sama lain, dengan masing-masing elemen mengambil seluruh lebar dari wadah. Halaman web yang sangat sederhana "aliran": masing-masing elemen didorong ke bawah halaman oleh unsur di atas itu.
Untuk mendapatkan dua unsur untuk duduk di samping satu sama lain, kita perlu untuk membawa mereka keluar dari normal "aliran" dari halaman.

Ketika suatu elemen melayang, beberapa hal akan terjadi: terjebak ke sisi halaman (atau elemen lain) dan itu akan dihapus dari aliran normal dari elemen - bahwa, bukannya mengambil seluruh lebar halaman, itu hanya memakan ruang itu langsung menempati, yang memungkinkan unsur-unsur di bawah ini untuk bergerak ke samping.

Mari kita coba dengan kami dua paragraf:

Kita lihat di browser, dan kami memiliki masalah! H1 logo telah pindah sendiri antara dua melayang item. Ketika anda mengapung unsur-unsur, itu seperti anda mengatakan kepada mereka untuk "melanggar aturan", satu-satunya masalah adalah, ketika anda membiarkan beberapa unsur-unsur yang melanggar aturan, elemen lainnya mulai melakukan itu juga! Apa yang kita butuhkan adalah cara untuk memberitahu browser bahwa dua paragraf, dan dua paragraf SAJA, diperbolehkan untuk melanggar aturan, jadi setelah melayang elemen, aliran normal dipulihkan. Untuk melakukan ini, kita perlu menambahkan aturan untuk orang tua div dua melayang elemen, yang memungkinkan dua paragraf yang di dalamnya mengapung tanpa mempengaruhi sisa halaman.

121212

Untuk melakukan ini, kita perlu menambahkan properti untuk mengandung div "overflow" dan atur nilainya menjadi "tersembunyi".

Itu tidak terlalu penting untuk memahami apa yang meluap, atau di mana ia bersembunyi, asalkan anda memahami bahwa overflow: hidden aturan kontrol perilaku mengapung di dalam div. Sekarang, saya tidak ingin membingungkan atau menakut-nakuti siapa pun, tetapi teknik ini tidak selalu bekerja di semua browser. Ia bekerja di sini, tapi selalu test di IE untuk desain anda sendiri. Ada sejumlah teknik lain yang patut dicatat, semua dari mereka memiliki keuntungan mereka. Peter-Paul Koch menjelaskan metode yang serupa dengan yang saya gunakan di sini dalam artikelnya Kliring mengapung. Steve Smith menggambarkan metode dari "Mengambang (Hampir) apa-Apa" dalam posting-nya Kliring Mengapung: FnE Metode. Juga, itu sedikit lebih dari sebuah teknik canggih, tapi Tony Aslett telah merintis agak cerdik dan licik teknik, yang dijelaskan dalam artikel Cara yang Jelas Mengapung Tanpa Markup Struktural. Memilih metode yang terbaik bagi anda, dan ingat untuk menguji browser!

Satu hal yang lebih penting tentang mengapung adalah bahwa anda harus selalu menentukan lebar. CSS anda masih akan memvalidasi jika anda tidak (anda akan mendapatkan peringatan) tapi praktek terbaik dan anda kadang-kadang berakhir dengan hasil yang tak terduga di beberapa browser jika tidak.

Karena kami ingin tata letak untuk dapat dengan mudah resizable, kita tidak akan menggunakan nilai pixel, kita akan menggunakan persentase sebaliknya. Kita mungkin juga membiarkan masing-masing elemen mengambil 50% dari lebar. Karena kami telah memberikan begitu banyak ruang, berlangganan ayat telah pindah ke kiri. Kita bisa mendapatkannya untuk tetap ke kanan lagi dengan menentukan text-align: right.

Penataan paragraf

Sebelum menambahkan gambar latar belakang, saya suka gaya font sehingga saya dapat melihat berapa banyak ruang yang saya harus berurusan dengan.

Ukuran Font menggunakan ems

Kami ingin membuat halaman web kami dapat diakses dan fleksibel mungkin, untuk mencapai sebanyak mungkin penonton, kan? Itu termasuk memungkinkan pembaca untuk mengubah ukuran teks untuk ukuran yang nyaman. Sekarang, browser yang berbeda berurusan dengan Resize dengan cara yang berbeda, tetapi seperti biasa, adalah masalah peramban IE menang. Di Internet Explorer, jika teks anda atur ukuran dalam piksel, anda tidak dapat mengubah ukurannya, sehingga pembaca anda terjebak dengan apa pun ukuran font yang telah anda tentukan. Itu sangat tidak bagus, terutama untuk pembaca yang miskin visi. Untuk memperbaiki masalah ini, kita perlu menggunakan unit yang berbeda - ems.

Ems adalah ukuran relatif dari unit - itu berarti lebar "m" pada apapun font-size ditentukan. Ukuran default yang ditetapkan oleh browser adalah 16px, jadi 1em akan sama font-size 16px.

Untuk membuat halaman web kami sepenuhnya scalable, kita dapat mengkonversi semua ukuran font untuk ems. Cara mudah untuk melakukan ini adalah dengan aplikasi web Em Kalkulator (bekerja terbaik di FireFox).

Namun, untuk menghindari melakukan apapun membingungkan matematika, ada cara yang lebih mudah. Sejak ems adalah relatif terhadap default font-size halaman, jika kita mengubah default, yang mereka nilai akan berbeda.

Untuk membuat matematika lebih mudah, kita dapat memberikan diri kita sebuah basis 10, dengan pengaturan default font untuk 10px bukan 16. Untuk melakukan ini, kita hanya menentukan dalam file CSS yang kita inginkan font kita untuk menjadi 62,5% dari default.

Sekarang kita hanya perlu membagi masing-masing jenis huruf ukuran dalam piksel sebesar 10, dan kami memiliki mereka nilai. Untuk memulai, ukuran font untuk kami dua tag di bagian atas halaman adalah 12px, yang bekerja untuk 1.2 ems.

Diupgrade latar belakang

Selanjutnya, kita tambahkan dalam mengulangi gambar latar belakang kita irisan dari kami PSD:

Kita perlu menambahkan sedikit bantalan untuk bagian atas dan bawah paragraf untuk membuat gambar bentangan ke ketinggian penuh. Untuk mendapatkan nilai yang tepat, kita perlu kembali ke PSD dan mengukur tinggi dari bar dengan alat penguasa: tambang ternyata 26px tinggi. Karena teks kita adalah 12px tinggi, total padding akan 26-12 atau 14px. Ini berarti kita menambahkan 7px padding ke atas, dan 7px ke bawah. (Nilai-nilai ini kadang-kadang satu atau dua pixel, tapi ini adalah tempat yang baik untuk memulai, hanya perlu memeriksa di browser anda)

Kita juga bisa mendapatkan div untuk meregangkan ke ketinggian penuh dengan menentukan ketinggian 26px, tetapi anda harus selalu menghindari menentukan tinggi untuk elemen anda sebanyak mungkin, untuk memungkinkan untuk fleksibilitas maksimum. Jika anda membatasi elemen anda ke ketinggian tertentu, anda tidak memungkinkan untuk teks yang lebih besar atau konten tambahan.

Check it out, itu terlihat seperti kami PSD. Tapi di sini adalah di mana hal-hal yang rumit: coba re-sizing teks di browser anda. Ketika kita meningkatkan ukuran teks, rasio perubahan, kita kehilangan bantalan bawah, dan teks yang akhirnya meluap di luar latar belakang. Untuk membuat lebih "indestructible" situs web, kita perlu untuk mendapatkan latar belakang untuk meregangkan sebagai teks tumbuh atau karena lebih banyak konten yang ditambahkan, sehingga selalu ada 7px padding di bagian atas dan bawah, tidak peduli seberapa besar teks. Sejak kami gambar latar belakang hanya 26px tinggi, kita perlu memiliki sesuatu yang lain untuk meregangkan keluar lebih lanjut. Apa yang kita lakukan pada dasarnya adalah menempatkan warna yang solid di belakang gambar, sehingga ketika teks akan lebih besar dan gambar tidak dapat berisi warna di balik itu menunjukkan melalui. Warna di bagian bawah kami gradien #08413c. Jadi mari kita menambahkan bahwa untuk latar belakang kita. Untuk menentukan bahwa kita ingin gambar untuk selalu menempel ke bagian atas dari elemen, sehingga warna yang membentang dari bawah, kita tambahkan background-position value setelah url gambar.

Sekarang coba mengubah ukuran teks: latar belakang tumbuh dengan itu, dan itu terlihat cukup banyak yang sama seperti itu akan lebih besar. Hal ini juga memungkinkan kita tahu bahwa jika kita ingin menambahkan baris kedua dari konten di kemudian hari, kita tidak perlu mengubah apa pun di css kita. Kemampuan suatu unsur untuk memperluas lebih atau teks yang lebih besar sering diabaikan dalam pengembangan web, dan ini menyebabkan halaman untuk memecah ketika teks diubah ukurannya. Hanya check out my University Homepage, mencoba membuat teks satu langkah yang lebih besar, dan anda kehilangan link navigasi!

Satu hal lagi, kita hanya perlu menambahkan bahwa 1px border ke bagian bawah dari bar kami:

Jadi di sini adalah di mana kita berada di sejauh ini:

131313

Langkah 12 - Header

Karena kita akan membuat teks kita nama blog dan deskripsi putih, mari kita tambahkan di latar belakang pertama. Kita mungkin tidak perlu gambar ini untuk meregangkan keluar, tetapi hanya dalam kasus, kami akan ulangi proses yang sama untuk menambahkan warna latar belakang dan posisi:

Sekarang mari kita melakukan yang gaya font:

Baiklah, jadi sekarang kita perlu untuk mendapatkan deskripsi kami keluar di samping logo kami. Hal ini dapat dicapai dengan mengambang, tapi aku mencoba dan berlari ke dalam masalah dengan menentukan lebar, dan saya berhasil mendapatkan hasil yang jauh lebih baik menggunakan posisi absolut. Plus itu memberi saya kesempatan untuk menjelaskan konsep penting!

Posisi Absolut

Jika kita ingin posisi elemen di luar "aliran" dari halaman tanpa menggunakan pelampung, kita dapat menggunakan posisi absolut, yang pada dasarnya memungkinkan anda untuk posisi elemen di mana saja di dalam div terlepas dari unsur-unsur lain di dalam div. Ini berarti bahwa ketika anda menentukan posisi, mengatakan, left: 10px, itu akan posisi elemen 10px ke kiri dari sisi div, apakah atau tidak ada unsur lain di sana.
Pertama, dalam rangka untuk benar-benar posisi elemen, kita perlu mengatur posisi orang tua div relatif, karena mutlak diposisikan elemen diposisikan relatif terhadap orang tua div.

Sekarang kita dapat mengatur posisi absolut dari keterangan kami. Ketika posisi: absolut yang digunakan, kita dapat menentukan posisinya di segi kiri, kanan, atas dan bawah, dengan menggunakan piksel, persentase atau ems. Pertama, top - deskripsi hampir persis 50% dari bagian atas header, sehingga memungkinkan menentukan bahwa:

Sekarang kita perlu mendorong keluar ke kanan, dengan memberikan nilai untuk meninggalkan:
jika kita menggunakan piksel, kemudian ketika teks diubah ukurannya, hal ini akan mendapatkan lebih dekat ke h1, dan akhirnya tumpang tindih, sehingga memo metode tersebut. Kami mendapatkan masalah yang sama dengan persentase, hanya tidak secara dramatis. Hal terbaik untuk dilakukan adalah posisi dengan ems, yang seperti yang anda ingat semakin besar ukuran teks akan lebih besar, sehingga ruang antara h1 dan keterangan akan tetap ketika teks diubah ukurannya.

Dan itu tampak hebat!

141414

Langkah 13 - Navigasi

Mari kita membersihkan ini menu navigasi, dan menyingkirkan dari daftar gaya dan dekorasi teks, dan menambahkan gaya font.

Untuk mendapatkan link kami untuk berbaris secara horizontal, kita akan menetapkan daftar item untuk float: left, sehingga setiap item daftar "terjebak" untuk yang satu ke kiri.

Kita tentu saja berakhir dengan masalah yang sama seperti dengan semua mengapung, tapi semua kita harus lakukan adalah tambahkan overflow: hidden ke navigasi div, dan kita baik-baik untuk pergi.

Daftar masing-masing item adalah tentang 45px terpisah, sehingga memungkinkan menambahkan 45px padding ke kanan dari masing-masing item.

Catatan: Semua nilai-nilai padding dapat ditulis singkatan seperti:

Singkatan untuk padding (dan margin) adalah nilai-nilai untuk atas-kanan-bawah-kiri semua dalam satu baris. Saya menemukan cara terbaik untuk mengingat urutan adalah untuk memikirkan arah kompas: n-e-s-w.

Selanjutnya, kita tambahkan gambar latar belakang, menggunakan teknik yang sama seperti sebelumnya untuk memastikan latar belakang kami membentang ketika teks telah diubah:

Untuk menemukan nilai padding, sekali lagi hanya mengukur ketinggian bar (saya adalah 40px) dan mengurangi ukuran teks (18px) untuk mendapatkan total padding, dan membagi dua: 40-18=22px.

Untuk memindahkan menu navigasi turun sedikit, hal termudah untuk melakukannya adalah hanya menambahkan margin untuk bagian bawah merek div.

Dan akhirnya, 1px border di bagian atas bar:

Itu saja! Kita sudah selesai dengan header! Mari kita lihat:

151515

Langkah 14 - Konten

Hal pertama yang perlu kita lakukan di sini adalah untuk membuat dua kolom - satu untuk posting, satu untuk sidebar. Sekarang ini harus sederhana: hanya mengapung satu ke kiri, yang satu ke kanan.

Dan... tidak Ada yang terjadi. Setidaknya terlihat seperti itu, gulir ke bawah dan anda akan menemukan sidebar anda terjebak ke sisi kanan bawah posting. Sebelum sidebar dapat bergerak di samping posting, kita perlu untuk menentukan berapa banyak ruang yang posting div dapat memakan waktu, dan menentukan lebar untuk sidebar. Sekali lagi, kita akan menggunakan persentase, bukan piksel, sehingga jika teks adalah ukurannya, sidebar tetap di sisi.

Dan kita perlu untuk menyembunyikan luapan dari kami yang berisi div:

161616

Besar, kami memiliki sedikit bagus dua-kolom layout!

Langkah 15 - Styling Posting

Karena kita menggunakan CSS reset, konten yang kami posting bagian tidak memiliki gaya sama sekali, dan kita perlu untuk pergi melalui tugas membosankan styling setiap elemen yang mungkin. Alur kerja saya adalah sedikit berbeda untuk ini daripada dengan sisa halaman, karena saya tidak benar-benar mengacu pada dokumen Photoshop. Saya menemukan styling font di Photoshop menjadi rasa sakit yang nyata, jadi biasanya aku melewatkan hal itu. Untuk mendapatkan gaya untuk posting saya, saya pergi melalui proses trial dan error. Aku biasanya mulai dengan pengaturan yang mirip dengan browser default gaya, yang dapat anda temukan di Link Ini, dan men-tweak mereka sesuai dengan keinginan saya. Aku tidak akan pergi melalui seluruh proses langkah demi langkah, tapi ini adalah apa yang saya datang dengan di akhir:

Yang harus terlihat seperti ini:

171717

Sekarang ada sekitar 35px di bagian atas posting kami bagian, tapi kami tag h2 sudah memiliki margin 7px di atas, sehingga memungkinkan menambah margin 28px ke atas posting div.

Dan itulah tentang hal itu untuk bagian posting. Pada sidebar!

Langkah 16 - Sidebar

Pertama, mari kita menambahkan bahwa warna latar belakang:

Dan memperbaiki gaya font:

Kita juga perlu mendorong sidebar ke bawah oleh 25px (35px - 10px margin di atas tag h3). Kali ini, bagaimanapun, kita tidak dapat menggunakan margin-top property ini, karena ini akan memindahkan seluruh sidebar, termasuk latar belakang, ke bawah halaman. Kami ingin latar belakang untuk mulai tepat di bawah bar navigasi, tapi konten untuk memulai 35px di bawah itu, jadi kita perlu untuk menggunakan padding-top property. Kita juga perlu padding di bagian kiri, kanan dan bawah, dan 25px kedengarannya benar, sehingga kita dapat menyatakan hal itu semua dalam satu padding nilai:

Tapi oh tidak! Sidebar kami tidak lagi di samping! Hal ini dikarenakan kami menambahkan padding pada sisi sidebar. Ketika anda menambahkan padding pada elemen, anda benar-benar membuatnya lebih besar. Kami hanya membuat sidebar kami 50px lebih luas, jadi sekarang lebar melayang unsur-unsur menambahkan hingga lebih dari 100%. Untuk memperbaiki hal ini, mari kita terlebih dahulu mengkonversi kami 25px padding untuk persentase dari 900px. Ia bekerja keluar untuk sekitar 2,7%, tapi aku pembulatan hingga 3%.

Catatan: ini adalah satu lagi singkatan nilai, itu berarti bahwa bagian atas dan bawah keduanya 25px, dan yang kiri dan kanan yang kedua 3%.

Kami sidebar sekarang 33+6% lebar, sehingga masih terlalu lebar, tapi semua yang perlu kita lakukan sekarang adalah mengurangi 6% dari 33%

Saya pikir sidebar tampak sedikit lebar pada saat ini, jadi saya dikurangi menjadi 25%.

Hal yang penting untuk diingat adalah bahwa semua padding, margin, dan bahkan perbatasan nilai tambah untuk lebar elemen, sehingga anda perlu untuk menyesuaikan lebar properti untuk mengimbangi setiap kali anda menambahkan padding, margin atau batas.

Dan di sana kita pergi, tidak peduli seberapa besar anda membuat teks, kita sidebar tetap di sisi, dan rasio antara daerah pos dan sidebar tetap sama. Itu terlalu polos sidebar, tapi aku tidak akan repot-repot styling lagi, hanya karena tidak benar-benar penting untuk tujuan dari tutorial ini.

181818

Langkah 17 - Footer

Pertama-tama mari kita membuat font yang lebih besar dan menambahkan beberapa gaya:

Selanjutnya kita dapat menambahkan latar belakang gambar:

Dan karena kita ingin menjadi mampu meregangkan, kita dapat menambahkan warna pada bagian bawah gradien latar belakang kami nilai seperti yang kita lakukan sebelumnya:

Selanjutnya menambahkan bahwa 2px perbatasan di atas:

Mari menambahkan margin dan padding ke atas dan bawah:

Berikutnya, kita akan membuat tiga kolom dengan mengambang. Mengambang tiga unsur yang bekerja cukup banyak yang sama seperti mengambang dua, kita akan mengapung masing-masing kolom ke kiri. Kita perlu mendeklarasikan lebar dari masing-masing elemen yang sedang melayang, menggunakan nilai-nilai persentase untuk memungkinkan untuk ekspansi.

Hanya ingat bahwa kita harus mengatur meluap ke tersembunyi di induk div.

Pada titik ini, saya memutuskan bahwa ini akan benar-benar terlihat lebih baik jika link dan RSS div datang pertama, dan info hak cipta berada di kanan, jadi saya mengubah urutan divs, dan mengatur hak cipta div untuk float: right, dan selaras teks ke kanan juga.

191919

Dan ada yang kita miliki, kita melakukan coding dan styling halaman kami!

Langkah 18 - Accesibility pengujian

Througout tutorial, saya telah menguji halaman saya di Safari 4. Sejak Safari 4 ini mungkin yang paling standar-compliant dan browser modern, ini akan menampilkan halaman web yang paling bisa ditebak. Jika saja semua orang menggunakan browser standar-compliant... Sayangnya, masih ada orang-orang di luar sana menggunakan browser usang, dan kita perlu mempersiapkan untuk itu.

Mari kita mulai dengan yang paling bermasalah browser pertama: Internet Explorer 6. Saya menggunakan mac, dan belum menemukan cara yang efektif (gratis) cara untuk menguji halaman web di Internet Explorer. Jika ada yang membaca ini tahu semacam magis teknik, tolong, biarkan aku tahu. Lagian, waktu untuk mengangkut keluar ol' keluarga Dell. Untuk menginstal beberapa versi Internet Explorer sekaligus, google "Multiple IE" dan men-download .file zip.

Anehnya, hal itu berjalan dengan baik di IE6! IE7 apa-apa juga. Teks resizeable! Saya juga diuji halaman ini di Firefox, Opera dan Camino. Saya mengalami kesulitan menginstal Google Chrome di PC, jadi saya tidak bisa memberitahu anda apakah itu bekerja, tapi saya pikir itu harus, bceause kesederhanaan markup dan gaya.

Kesimpulan

Itu saja! Mudah-mudahan anda telah belajar satu atau dua hal tentang coding fleksibel situs web. Check it out di setiap browser, membuat teks lebih besar, lebih kecil, dan kami menyesuaikan tata letak baik-baik saja. Menonaktifkan CSS, dan itu masih masuk akal! Saya berharap anda bisa melihat bagaimana mudahnya untuk membuat website anda kurang keliru! Halaman ini adalah sangat sederhana, tanpa banyak tantangan rumit. Ketika layout anda mendapatkan lebih rumit, itu akan menjadi sedikit lebih sulit untuk mempertahankan fleksibilitas.


Advertisement
Did you find this post useful?
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.