Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. HTML & CSS
Code

Membina Clone Twitter Dari Scratch: Reka Bentuk

by
Difficulty:BeginnerLength:LongLanguages:

Malay (Melayu) translation by Fodal Fadul (you can also view the original English article)

Artikel ini mewakili yang pertama dalam usaha kumpulan baru oleh kakitangan Nettuts +, yang merangkumi proses perancangan dan membina aplikasi web dari awal - dalam pelbagai bahasa! Kami akan menggunakan klon Twitter fiksyen, yang dikenali sebagai Ribbit, sebagai asas untuk siri ini.

Dalam tutorial ini, kita perlu memberi tumpuan kepada UI. Kami akan memanfaatkan LESS Preprocessor yang popular untuk menjadikan CSS kami sebagai terkawal mungkin.


Mukadimah

Pastikan memuat turun aset untuk tutorial ini, jika bekerja bersama-sama.

Tutorial ini dibahagikan kepada lima bahagian utama, yang menerangkan cara menghiasi pelbagai halaman susun atur Ribbit. Saya akan merujuk elemen HTML menggunakan pemilih CSS untuk memudahkannya difahami. Tetapi sebelum menyelam ke dalam susun atur, mari bincangkan secara ringkas bersarang.

Bersarang

Dalam CSS, rujukan elemen bersarang boleh menyebabkan pemilih yang panjang. Sebagai contoh:

Dan ia boleh tumbuh lebih besar! Dengan LESS, anda boleh sarang satu elemen yang lain, menjadikannya lebih mudah untuk dibaca:


Pembolehubah dan Mixin

Buat fail baru dan namakannya, style.less. Apabila menggunakan mana-mana preprocessor gaya, ia adalah idea yang baik untuk menyimpan warna dan saiz penting dalam pembolehubah; anda boleh dengan mudah menyesuaikan nilai mereka tanpa mencari fail, mencari nilai harta yang perlu anda ubah. Kami akan menggunakan beberapa pemboleh ubah untuk warna teks, warna sempadan, dan lebar kandungan:

Sekarang, mari buat dua campuran. Yang pertama akan mencipta ilusi teks anti alias, dan yang kedua akan membolehkan kecerunan silang pelayar. Yang pertama agak mudah:

Caranya adalah untuk membuat bayangan di bawah teks dengan warna yang sama dan penyebaran satu piksel, menjadikan pelayar memaparkan warna yang indah di sekeliling teks.

Sekarang untuk kecerunan; ini lebih rumit daripada teks anti alias kerana setiap pelayar melaksanakan kecerunan secara berbeza. Sebaik sahaja kami telah memberi pampasan untuk pelbagai prefiks vendor, berikut adalah kod:

Setiap pelayar mempunyai awalan: -moz- untuk Firefox, -webkit- untuk Chrome, dll. Baris terakhir menggunakan versi yang disyorkan W3C untuk kecerunan. Sekiranya penyemak imbas menyokongnya, ia akan mengatasi sifat-sifat sebelumnya kerana ia merupakan perisytiharan harta latar belakang terakhir dalam peraturan. Fungsi gradien linier menerima lapan parameter: empat pasang nilai peratus warna. Ia mewujudkan kecerunan dengan empat langkah warna.


Gaya Global

Mari gaya seterusnya beberapa elemen global, seperti untuk butang dan pautan. Kami mahu semua elemen menggunakan fon Helvetica atau Arial dengan warna teks yang ditentukan sebelum ini:

Body

Tubuh cukup mudah; kita memerlukan latar belakang putih dengan corak berasaskan imej. Tidak ada margin dan padding:

Inputs

Kami juga akan menyediakan gaya lalai untuk semua elemen <input/>  dalam halaman:

Kami menetapkan saiz lalai dan padding, dan kami menggunakan pemboleh ubah warna sempadan untuk mengalih keluar garis biru yang menjengkelkan apabila elemen fokus. Anda harus melihat sedikit gula kurang: kami boleh menambah CSS pseudo-kelas (dan kelas normal juga) menggunakan & aksara (rujukan induk), seperti yang ditunjukkan di sini:

Ini menyebabkan input mempunyai latar belakang kuning cahaya, apabila tertumpu.

Submits

Mengemukakan butang akan menggunakan kedua-dua mixin yang ditakrifkan sebelumnya dan radius sempadan untuk mencipta kesan yang bagus:

Links

Pautan harus mempunyai warna yang berbeza daripada teks biasa. Kami juga menggariskan mereka di atas hover:


Templat Asas

Kami akan mulakan dengan bahagian susun atur yang tetap sama di setiap halaman. Berikut ialah kod HTML, yang akan saya jelaskan di bawah:

Kami bermula dengan definisi doktor dan kepala dokument biasa. Anda boleh menggunakan perpustakaan kurang.js dan masukkan style.less dalam peringkat pembangunan (seperti yang saya lakukan dalam kod ini). Kemudian, anda boleh menyusun fail LESS ke dalam CSS, jika anda tidak mahu menggunakan kurang.js. Seperti yang mungkin anda perhatikan sekarang, susun atur dibahagikan kepada tiga bahagian: header, kandungan, dan footer. Anda harus menyimpan HTML ini untuk melihat jika anda menggayakan semuanya dengan betul.

Header

Mari kita mengatasi tajuk. Ia mengandungi logo Ribbit dan dua perkataan: 'Clone Twitter'. Ia dibalut dengan pembalut, lebarnya dikawal oleh variabel pembolehubah kandungan. Terdapat beberapa pembalut dalam susun atur, dan semuanya adalah lebar kandungan lebar dengan margin auto:

Pengepala itu sendiri adalah tinggi 85px dan lebar halaman:

Selepas lebar, tambahkan gaya div.wrapper dengan padding menegak:

Jadi header harus kelihatan seperti:

Imej dalam pembalut perlu 10px lebih rendah, supaya dapat dipusatkan dengan baik:

Juga, fon dalam elemen mestilah lebih besar daripada saiz lalai:

Berikut adalah cara reka bentuk kita harus melihat pada ketika ini.

Header in basic template.

Content

Tidak banyak yang boleh kita lakukan dengan kandungan pada masa ini. Kami akan menambah beberapa margin ke bawah dan ketinggian minimum; susun atur akan kelihatan funky jika tidak cukup tinggi:

Di dalamnya, pembalut perlu mempunyai margin menegak dengan margin mendatar automatik:

Footer

Seperti tajuk, footer adalah sama untuk semua halaman. Kami akan menggunakan imej latar belakang dan saiz fon yang lebih kecil. Kami juga perlu membersihkan: kedua-duanya, kerana kami akan menggunakan terapung dalam kandungan. Tanpa membersihkan, footer tidak akan menyesuaikan mengikut kandungan:

Sekarang mari tambahkan beberapa padding ke pembalut, dan imej di dalamnya perlu terapung ke kanan:

Berikut adalah footer kami:


Laman Utama

Halaman ini memaparkan untuk pengguna yang tidak masuk ke Ribbit. Oleh itu, ia perlu mengemukakan borang login dalam header dan borang pendaftaran, dengan imej katak besar dalam kandungan. Mari kita mulakan dengan template asas.

Peti Masuk

Tambah borang login ini ke div.wrapper header, selepas elemen :

Input ini sudah ditata, tetapi kita perlu menambah margin dan membuat paparan bentuk sebagai sebaris. Tambahkan ini selepas span dalam div.wrapper header:

Daftar Borang

Berikut adalah HTML untuk borang pendaftaran:

Tambah HTML ini dalam div.wrapper kandungan. Kami mahu imej itu mempunyai sudut-sudut yang bulat dan diapungkan ke kiri (tambah ini selepas margin dalam div.wrapper kandungan):

Sekarang, kita boleh gaya borang pendaftaran. Ia juga akan menjadi panel yang akan kita gunakan kemudian; itulah sebabnya kami akan gaya .panel:

Buat masa ini, kami hanya akan menaip panel hak. Ia sempit dan melekat pada sebelah kanan panel. Sememangnya, masukkan yang berikut ke dalam div.panel:

Juga, kita perlu menjaga tajuk dan kandungan panel. Kami menggunakan <h1/> elemenuntuk header dan elemen <p/> untuk kandungan. Perhatikan bahawa anda boleh menggunakan * wildcard di dalam elemen lain:

Berikut adalah cara gaya div.panel patut dilihat:

Dan di sini ialah tangkapan skrin bagaimana halaman ini harus dilihat, setakat ini (klik untuk melihat saiz penuh):

Home page preview


Halaman Buddies

Halaman Pembaca harus dipaparkan apabila pengguna log masuk. Ia akan memaparkan senarai 'Ribbits' terakhir, bersama dengan beberapa statistik akaun anda. Sekali lagi, mulakan dengan template asas. Halaman ini, bersama dengan halaman lain, akan memaparkan butang log keluar sebagai ganti borang login dalam tajuk:

Butang telah disusun, jadi kami hanya perlu memasukkannya ke sebelah kanan bekas dan tambah beberapa margin:

Oleh kerana pemilih peraturan ini adalah ID elemen, anda boleh meletakkannya di luar elemen atau dalam div.wrapper header. Pilihan ini, tetapi ingat, jika anda memilih untuk meletakkannya di dalam elemen lain, CSS yang dikompilasi akan mempunyai pemilih yang lebih panjang (header div.wrapper btnLogOut).

'Buat Peti Ribbit'

Pertama, tambahkan kod panel ini kepada div.wrapper kandungan:

Kelas kanan telah digambarkan sebelum ini, tetapi kita perlu menambah beberapa gaya untuk elemen <textarea/>. Kami akan memberikan saiz dan sempadan yang sesuai:

Tambah ini dalam definisi gaya panel kanan.

Maklumat Pengguna

Sekarang, mari fokus pada panel, yang mengandungi maklumat akaun pengguna. Kami akan menampung sementara itu dengan beberapa kandungan rawak untuk melihat gaya:

Ia mungkin kelihatan rumit, tetapi strukturnya agak mudah, apabila anda melepaskan kandungan:

Tidak kira, kami mempunyai panel lain; jadi kita perlu menyusunnya terlebih dahulu:

Anda mungkin tahu di mana untuk meletakkan kod ini (notis bagaimana anda boleh melakukan operasi aritmetik dalam LESS). Panel ini mengandungi div.ribbitWrapper. Jadi, tambahkan kod berikut:

Terdapat dua elemen dalam elemen <span/> ini, masing-masing dengan warna dan saiz fon yang berbeza. Mereka mempunyai kelas nama dan .time:

Kita juga harus meletakkan imej avatar berhampiran sempadan kiri. Tambah kod berikut:

Juga, teks Ribbit perlu anti alias, wajar dan berpindah ke kanan. Kod ini akan meletakkan teks di sebelah avatar, yang bertentangan di bawahnya:

Dalam perenggan ini terdapat unsur dengan garis menegak, memisahkan secara visual. Kesan ini dicapai dengan menggunakan sempadan, padding, dan margin:

Ribbits Buddies

Panel ini menyenaraikan reben terkini dari orang yang pengguna mengikutinya. Masukkan perkara berikut selepas panel maklumat pengguna:

Terdapat beberapa contoh riben untuk melihat bagaimana rupanya. Kami akan menambah beberapa sempadan untuk memisahkan mereka secara visual. Tambah kod ini dalam div.ribbitWrapper:

Gaya ini menambah sempadan bawah, sambil mengalih keluar sempadan pada div.ribbitWrapper yang terakhir; sempadan sudah ada di panel.

Inilah caranya melihat halaman ini:

Buddies page preview


Public Ribbits Page

Halaman 'Kira-kira Awam' akan menyenaraikan riben profil terkini yang tidak ditandai sebagai peribadi, supaya pengguna dapat melihat ribut mereka yang mereka tidak mempunyai dalam senarai rakan mereka. Yang menghairankan, tidak ada lagi gaya, tetapi kita perlu menambah sentuhan HTML. Satu-satunya perbezaan di antara halaman ini dan halaman sebelumnya ialah yang satu ini tidak mempunyai panel maklumat pengguna, tetapi ia akan mempunyai kandungan lain di laman akhir. Oleh itu, jangan ragu untuk menyalin kod halaman teman, tetapi alih keluar panel ini:

Juga tukar tajuk panel kepada 'Pita Awam.' Berikut adalah pratonton halaman ini:


Halaman Profil Awam

Pada halaman ini, pengguna dapat melihat senarai profil yang tidak ditandakan sebagai peribadi. Terdapat juga kotak carian untuk mencari profil lain. Kami akan memulakan dengan template asas.

Carian Profil

Kotak carian akan menggunakan panel kanan dengan elemen <input/> di dalam:

Senarai Profail

Berikut adalah beberapa profil contoh untuk senarai profil, supaya anda dapat melihat bagaimana rupanya dalam penyemak imbas. Dalam pelajaran masa depan, kami akan menggantikannya dengan sewajarnya.

Halaman ini sepatutnya kelihatan seperti:


Menyusun CSS

Merujuk elemen bersarang boleh menyebabkan pemilih yang panjang.

Seperti yang saya nyatakan sebelum ini, untuk pengeluaran, anda boleh menyusun LESS Anda kepada CSS (dan saya mengesyorkan anda berbuat demikian atas sebab-sebab prestasi). Terdapat beberapa penyusun dalam talian yang tersedia:

Bersama dengan beberapa penyusun yang berdiri sendiri:

  • Crunch! (yang merupakan editor LESS)
  • WinLess (ciri kompilasi auto apabila fail kurang berubah)
  • SimpLESS (termasuk pengurangan CSS)

Jika mana-mana penyusun ini tidak berfungsi untuk anda, Google untuk lebih banyak lagi; ada banyak! Anda juga boleh menggunakan lessc dari laman LESS, tetapi lebih mudah untuk mengkompilasi fail LESS Anda dengan penyusun lain. Sudah tentu, tidak ada salahnya menggunakan perpustakaan less.js untuk menyusun susun atur secara dinamik; pelayar baru cache CSS yang dihasilkan.


Kesimpulan

Seperti yang anda lihat, LESS adalah alat yang berkuasa yang menjadikannya lebih mudah dan lebih cepat daripada CSS biasa untuk gaya susun atur yang indah.

Tetapi ini hanya permulaan. Bersedia untuk melaksanakan back-end Ribbit dalam kebanyakan bahasa dan platform dalam set tutorial seterusnya!

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.