Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Skeleton
Webdesign

Struktur bangunan HTML halaman dengan kerangka

by
Difficulty:IntermediateLength:MediumLanguages:
This post is part of a series called From PSD to HTML With the Skeleton Boilerplate.
Adding Styles to Our Skeleton Page Build

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

Final product image
What You'll Be Creating

Dalam tutorial ini kami akan berfokus pada pengkodean tata letak PSD, menggunakan boilerplate kerangka responsif. Ada banyak tutorial tentang bagaimana kode desain yang menggunakan HTML dan CSS, sering dengan dash tambahan JavaScript, tetapi tujuan utama dari tutorial ini adalah untuk mendapatkan hal-hal yang dibangun menggunakan versi terbaru dari kerangka kerangka (2.0.4). Ada beberapa perbaikan besar sejak kami terakhir tertutup itu!

Pertama-tama, izinkan saya memperkenalkan kerangka, maka kita akan melompat ke coding.

Apakah kerangka Boilerplate?

Kerangka adalah gagasan dari Dave Gamache. Ini adalah dua belas kolom, fluida grid, dengan lebar standar 960px, dasar tipografi dan minimum gaya untuk elemen HTML umum seperti tombol, link, input dan textareas.

Kekuatannya terletak pada kenyataan bahwa itu adalah kerangka CSS cahaya. Hanya dalam 400 baris kode, Skeleton dirancang untuk menjadi titik awal, bukan kerangka penuh yang dipenuhi desain UI seperti Bootstrap, Foundation vs Semantic UI. 

Mengapa menggunakan kerangka?

Karena itu mudah digunakan, dan itu adalah awal yang baik untuk membangun kerangka responsif Anda sendiri.

Jadi apa baru?

Dave Gamache memperkenalkan dan diperbarui beberapa fitur dalam kerangka v2.0:

Mulai 

Selama tutorial ini kita akan mengkodekan desain yang ditunjukkan di atas, dibuat oleh Samir Timzguieda.  Sepanjang jalan kita akan: 

  1. Download kerangka dan menulis kita sendiri HTML markup
  2. Menarik gambar dari PSD dan menulis CSS
  3. Menambahkan rasa JavaScript di atas yang akan menambah interaktivitas beberapa

Mari kita mulai dengan men-download kerangka kerangka dari www.getskeleton.com dan meraih PSD dari file source. 

Sketsa dan perencanaan

Anda dapat memilih pendekatan yang berbeda, tapi saya ingin memulai dengan membuat sketsa tata letak untuk memvisualisasikan setiap bagian. Ada banyak bagian di seluruh tata letak:

  • Pahlawan
  • Pengenalan
  • Kreativitas
  • Pekerjaan
  • Tolong
  • Klien
  • Tentang
  • Video
  • Mengapa kami
  • Kutipan
  • Menghubungi
  • Kontak
  • Footer

Ini adalah hasil saya membuat sketsa untuk struktur HTML yang diinginkan:

Bagian

Untuk setiap bagian kita akan membuat wrapper (atau band) wadah yang akan mengisi seluruh jendela lebar, dengan nama bagian sebagai nama kelas. Di dalamnya kita mengambil keuntungan dari kerangka dengan membangun grid untuk membuat baris pembungkus dan kontainer. HTML untuk setiap bagian akan varian ini:

Sekarang saatnya untuk mengambil setiap bagian dan menambahkan markup. Jangan khawatir tentang gaya, Gambar, font dan seterusnya, untuk sekarang kita berkonsentrasi pada struktur HTML murni. 

Menu

Untuk menu, kita perlu menambahkan ikon "hamburger" dan daftar unordered penuh dengan link internal. Setiap link akan mengarah ke bagian tertentu.

Catatan: keen bermata antara Anda mungkin mengenali fa fa-bar kelas pada <i>elemen untuk ikon navigasi.  Ini khas dari ikon Font Awesome, yang kami akan menerapkan nanti dalam proses. 

Pahlawan

Bagian pahlawan, seperti yang terlihat dalam PSD, terdiri dari satu gambar yang membentang, judul dan subjudul. Untuk gambar latar belakang kami akan menambahkan sebuah wadah yang berbeda, untuk judul, kita akan menggunakan h1 dan subjudul h2.  Di sini, Anda lihat, saya menggunakan u-lebar penuh, kelas kerangka utilitas baru. 

Pengenalan

Pengenalan berisi dua elemen; judul dan subjudul. Kami menyiapkan html untuk mendukung perbatasan dengan judul, dengan menambahkan kelas pemisah, yang akan menambah perbatasan-bawah dan jarak beberapa. 

Kreativitas

Kreativitas memiliki latar belakang lebar penuh dan tombol. Anda juga dapat melihat kelas yang berpusat di h4; kelas utilitas yang kita akan membuat dalam tutorial berikutnya untuk membantu kita unsur-unsur pusat pada sumbu vertikal dan horisontal. 

Pekerjaan

Ini adalah bagian terbesar di situs web dan berisi dua baris tambahan; satu untuk kerja filter link dan satu untuk item pekerjaan.

Filter bekerja berisi daftar unordered penuh dengan link yang akan menyaring item pekerjaan.

Item pekerjaan sendiri akan menjadi empat kolom lebar, yang berisi gambar kerja, bekerja judul dan deskripsi pekerjaan.

Anda juga dapat melihat bahwa saya menggunakan utilitas kelas lain, vertikal-berpusat, yang akan pusat item pada sumbu vertikal.  Deskripsi untuk setiap item pekerjaan juga memiliki perbatasan di bagian bawah. Untuk mencapai hal ini, kita akan menggunakan kembali golongan pemisah yang terlihat sebelumnya, sambil menambahkan class tambahan untuk tambahan gaya, warna dan ukuran. 

Tolong

Bagian Bantuan memiliki struktur html yang sama sebagai bagian kreativitas, tetapi kami sedang membedakan mereka dengan menambahkan nama kelas yang berbeda.

Klien

Bagian ini berisi daftar unordered dengan gambar klien. Saya menggunakan placehold.it untuk menghasilkan gambar pengganti.

Tentang

Disini kita memiliki dua baris yang berbeda, satu untuk teks pengantar dan satu untuk orang-orang.

Pengenalan baris berisi judul dan subjudul, seperti yang kita lihat sebelumnya dalam bagian pendahuluan.

Daftar orang yang daftar unordered yang mengandung empat item, orang terakhir untuk mempekerjakan tujuan. Setiap item daftar tiga kolom lebar dan berisi gambar, link, nama dan posisi individu.

Video

Bagian video berisi hanya satu tombol dan gambar latar belakang yang membentang. Dalam tutorial mendatang, kami akan membuat jendela modal menunjuk ke sebuah video Youtube.

Mengapa kami

Bergerak di, "Mengapa kita" bagian terbuat dari dua bagian individu; satu untuk pengenalan singkat dan yang lain untuk saat ini layanan.

Bagian pengantar adalah dua belas kolom lebar dan berisi judul terbungkus<h3>dan teks untuk deskripsi singkat terbungkus<h4>.</h4></h3> Seperti yang Anda lihat di bawah, judul juga memiliki pemisah kelas untuk menciptakan efek perbatasan yang disebutkan sebelumnya.

Dalam bagian layanan, setiap item daftar berisi gambar dan keterangan.

Kutipan

Bagian ini mewarisi struktur html yang sama sebagai bagian kreativitas, tetapi dengan teks yang berbeda untuk tombol terpusat.

Menghubungi

Hanya beberapa lebih untuk pergi! Bagian ini menawarkan sebuah alur cerita singkat untuk formulir. Hal ini dibangun dengan struktur html yang akan mungkin terlihat cukup akrab dengan sekarang, dengan judul dan deskripsi memiliki pemisah antara mereka.

Kontak

Formulir kontak bagian terdiri dari dua kolom, satu untuk lokasi meta dan link profil sosial dan satu yang mengandung bentuk yang membantu pengguna untuk menghubungi perusahaan.

Sekali lagi saya menggunakan markup untuk mendukung Font mengagumkan, yang kita akan mengintegrasikan dalam tutorial berikutnya.

Kolom pertama adalah empat kolom lebar dan yang kedua adalah delapan kolom lebar. Di sini Anda dapat benar-benar melihat kekuatan kerangka kerja kerangka, karena kami menggunakan kolom dan baris bersarang.  Bentuknya memiliki ukuran berbeda di dalamnya; dua input pertama adalah enam kolom lebar di dalam pembungkus yang delapan kolom lebar. 

Footer 

Footer kami berisi beberapa teks yang dibungkus dalam dua belas kolom kontainer. 

Itu saja untuk saat ini! 

Tutorial ini telah menunjukkan dengan tepat apa itu Skeleton: kami menggunakan markupnya untuk menyempurnakan struktur halaman web.  Dalam tutorial mendatang, kami akan mengambil struktur itu dan menambahkan beberapa gaya untuk memberikan tampilan yang benar-benar unik.  Sampai jumpa! 

Advertisement
Advertisement
Advertisement
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.