Advertisement
  1. Code
  2. Front-End

Langkah Mudah Membuat Website Pertama Anda dari Desain Sekaligus Kodingnya

by
Read Time:18 minsLanguages:

Indonesian (Bahasa Indonesia) translation by ⚡ Rova Rindrata (you can also view the original English article)

Pada tutorial kali ini kita akan membuat website sederhana versi pertama kita yang dimulai dari pembuatan desain dan koding dengan tahapan yang sangat mudah. Tutorial ini dibuat dan ditujukan kepada pemula dengan harapan mereka dapat mengetahui Ini adalah minggu yang baru; mungkin sekarang saatnya untuk belajar keterampilan baru!


Langkah 1 - Apa yang Kita Buat

Kita akan mendesain dan mengkode situs web sangat sederhana ini. Desain yang spektakuler, bukan itu, tapi akan menjadi sangat efektif untuk dasar pengajaran teknik mengkode.

111

Langkah 2 - Bersiap-siap

Apa yang Anda butuhkan

Tutorial ini ditulis dengan asumsi bahwa Anda belum pernah mengkode situs web sebelumnya, atau hanya melakukannya beberapa kali. Namun demikian, untuk menyelesaikan tutorial ini, Anda akan memerlukan berikut:

  • Photoshop atau editor gambar yang serupa
  • Editor kode (lebih pada nanti)
  • Pemahaman dasar tentang bagaimana html bekerja, sintaks dan tag dasar. Untuk meningkatkan kecepatan, periksa sumber resmi di w3 Schools, di mana Anda dapat mempelajari semua kebutuhan dasar untuk tutorial ini.
  • Demikian untuk css, Anda harus memahami bagaimana penyeleksi bekerja dan menjadi akrab dengan properti-properti dasar. Sekali lagi, sumber daya terbaik di sini adalah w3 Schools
  • Browser, jelas. Saya menggunakan Firefox, dan jika Anda ingin situs Anda untuk terlihat seperti screenshot saya di setiap langkah, Anda juga harus

Tata letak

Kami membuat situs web yang sangat sederhana di sini, dengan empat elemen dasar: header, konten, sidebar dan footer, tata letak akan terlihat seperti ini:

222

Ini adalah ide yang bagus untuk merancang tata letak desain sebelum Anda mulai, baik di atas kertas atau di Photoshop, untuk merampingkan alur kerja Anda dan mengatur ide-ide Anda.


Langkah 3 - Memulai

Buka dokumen Photoshop baru, katakanlah, 1000px x 1200px. Kita bisa selalu memangkasnya nanti. Saya membuatnya cukup sempit karena saya bekerja pada sebuah laptop di sini, tetapi Anda bebas untuk menjadikannya lebih lebar jika Anda ingin lebih banyak ruang untuk bekerja.

Sekarang, saya tidak akan masuk ke perdebatan tentang resolusi layar dan lebar optimal situs web di sini. Semua yang perlu Anda ketahui adalah bahwa isi dari halaman kami akan lebar 800px, dan itu baik-baik saja. Jadi, pada dokumen 1000px kita, kita akan menyeret guide di tanda 100 dan 900px untuk mengatur lebarnya. Desain kami memiliki sidebar, dan saya telah memutuskan untuk membuat sepertiga lebar halaman. Dua pertiga dari 800 adalah sekitar 530, jadi mari kita masukkan ke dalam satu guide lagi di 630px. Kami juga akan mengatur latar belakang warna yang bagus dari #ebe8e8.

333

Langkah 4 - Header

Ambil rectangle tool dan buatlah kotak biru, besar di atas dokumen, milik saya sekitar tinggi 170px dan warnanya adalah #23b6eb. Berikutnya gambarlah bar abu-abu gelap, kurus di bagian paling atas halaman, saya menggunakan # 5d5a5a

444

Langkah 5 - Highlight

Sekarang kita akan menambahkan sedikit efek pencahayaan di area header warna biru. Membuat sebuah clipping mask di atas layer biru, kemudian ambil kuas besar, lembut (memiliki lebar 400px) dan pilih warna sedikit lebih cerah daripada latar belakang biru.

Sekarang klik ringan ujung kuas tepat di bawah bar, di sekitar bagian tengah dokumen. Jaga tetap halus, dan cobalah untuk tidak membiarkan warna yang lebih cerah mencapai tepi halaman (ini akan menjadi jelas nanti). Dan atur blending mode ke screen.

555

Langkah 6 - Bar Navigasi

Sekarang kita akan menambahkan satu bar lagi ke bawah warna biru, kita bisa membuatnya abu-abu, tapi kita akan tambahkan gradient overlay sehingga itu tidak terlalu penting.

Di panel layer styles, tambahkan gradien dari #e2e3e4 ke #bebdbd di 90degrees.

666

Langkah 7 - Footer

Selanjutnya, mari kita menggambar sebuah kotak abu-abu di bagian bawah halaman, saya memilih warna yang sedikit lebih gelap dari abu-abu dari bar di bagian atas.

777

Langkah 8 - Logo

Latar belakang

Untuk logo, kita akan menggambar persegi panjang dan menambah anchor point pada akhirnya, kemudian tarik ke samping. Untuk menyingkirkan pembulatan, option-klik pada titiknya.

888

Selanjutnya, tambahkan beberapa layer styles: gradient overlay dan stroke 1px: Gradien dari #aec457 ke #cdf399

8b8b8b
8c8c8c
8d8d8d

Teks

Sekarang untuk teks: besar dan tebal.

  • Font: Myriad Pro
  • Style: Bold
  • Ukuran: 60px
  • Warna: #36809a

Untuk memberikan beberapa kedalaman, tambahkan inner shadow:

8e8e8e
8f8f8f

Langkah 9 - Tagline

Selanjutnya saya hanya menambahkan tagline pendek:

  • Font: Arial
  • Style: Bold
  • Ukuran: 30pt
  • Warna: #e4dfdf
999

Langkah 10 - Navigasi

Tulis di tautan navigasi yang bagus dan besar, menyebarkan mereka keluar dan merata.

  • Font: Arial
  • Style: Bold
  • Ukuran: 30pt
  • Warna: #676666
111111

Langkah 11 - Konten Utama

Waktu untuk menyisipkan beberapa konten dummy. Saya menggunakan sedikit header, yang akan menjadi h2 dan yang lebih kecil akan h3 me-link ke html ipsum.

Buat kotak teks dengan lebar sekitar 2 pertiga pertama dari halaman. Gaya teks:

h2 Header:

  • Font: Arial
  • Style: Bold
  • Ukuran: 36pt
  • Warna: #0e5d7a

h3 Header:

  • Font: Arial
  • Style: Bold
  • Ukuran: 24pt
  • Warna: #444444

Paragraf:

  • Font: Arial
  • Style: Normal
  • Ukuran: 14pt
  • Warna: #595858
11a11a11a

Tanggal di bawah "update terbaru" akan dibungkus dalam tag small, font-nya sama seperti paragraf, tapi 12pt. Saya menyalin item berita dua kali, karena saya malas.

11b11b11b

Langkah 12 - Sidebar

Link

Berikutnya gambar persegi panjang kurus di atas wilayah sidebar, warna #d4d6d3, dengan stroke 1 px #bebdbd

Isi sidebar dengan beberapa lagi konten dummy, Anda bisa mendapatkan ikon gratis yang saya gunakan di sini. Font-nya adalah:

h3 Headers:

  • Font: Arial
  • Style: Normal
  • Ukuran: 24pt
  • Warna: #044055

List items:

  • Font: Arial
  • Style: Normal
  • Ukuran: 18/14pt
  • Warna: #373737
12a12a12a

Tombol

Berikutnya kita akan menambahkan tombol "join our team" di bawah link kontributor. Tombol ini hanya persegi panjang dengan gradien yang sama seperti logo, dan stroke 1px berwarna c7c7c7. Teksnya adalah:

  • Font: Arial
  • Style: Normal
  • Ukuran: 24pt
  • Warna: #434343
12b12b12b

Langkah 13 - Footer

Untuk menyelesaikan mockup, cukup tambahkan sedikit teks hak cipta dummy, atau apa pun yang Anda inginkan, untuk footer. Font-nya adalah:

  • Font: Arial
  • Style: Normal
  • Ukuran: 14pt
  • Warna: #e0e2e2
131313

Dan itu untuk desain halaman, itu tidak ada yang istimewa, tapi kesederhanaan akan membuat lebih mudah bagi anda untuk mengikuti seluruh proses.


Mengiris PSD

Sekarang bahwa kita memiliki psd lengkap yang indah, saatnya untuk memotongnya menjadi potongan-potongan yang bisa kita gunakan. Idenya di sini adalah untuk menggunakan gambar sesedikit mungkin, dan membuat mereka sekecil mungkin. Oke, jadi mari kita mulai dengan header. Kami ingin meregang di seluruh layar, tidak peduli seberapa lebarnya. Untuk melakukannya, kita akan mengambil sepotong kecil dari header, dan mengulangnya di sepanjang layar lagi dan lagi, tidak peduli seberapa lebarnya.


Langkah 14 - Slice Tool

Sekarang Anda mungkin belum pernah menggunakan slice tool sebelumnya, tapi itu benar-benar sangat sederhana. Ini hanya memungkinkan Anda memotong-motong file Anda menjadi potongan-potongan kecil mungil yang dapat diekspor untuk web.

Header

Jadi, mari kita lanjutkan dan mengambil sepotong kecil dari header kami. Klik dan seret untuk membuat potongan, seperti rectangular marquee tool. Berhati-hatilah untuk mengambil sepotong dari sisi gambar, sehingga Anda tidak mendapatkan apapun dari highlight.

14a

Sekarang kita memiliki garis kecil, kita dapat mengulanginya sepanjang sumbu-x. Area yang disorot, bagaimanapun, adalah tidak-berulang, jadi kami harus memotong semuanya. Iris bagian header antara dua guide yang menunjukkan lebar 800px kami.

14b14b14b

Footer

Kami menggunakan proses yang sama persis untuk mengiris footer, ambil bagian tipis footer.

14c14c14c

Segala Sesuatu Yang Lain

Kita hanya perlu beberapa gambar lainnya: ikon "subscribe" dan tombol "join our team".

Karena ikon dan logo berbentuk tidak teratur, kita akan menyimpannya sebagai file .png transparan, jadi kita akan kembali dan mengambil mereka secara terpisah.

Oke, jadi untuk mengiris tombol, kita dapat menggunakan teknik yang sama seperti header dan footer, tapi kali ini kita hanya membutuhkan satu irisan tipis. Ketika Anda membuat potongannya, pastikan untuk tidak menyertakan stroke 1px, (kita akan menambahkan ini kemudian) yang mungkin Anda butuhkan untuk memperbesar sampai benar-benar dekat.

14d14d14d

Langkah 15 - Ekspor untuk Web

Sekarang kita memiliki gambar-gambar semua sudah diiris, mari kita simpan sebagai jpeg dioptimalkan dan menempatkan mereka di tempat yang berguna.

Pergi ke File/Save for web and devices... Di jendela popup, tahan shift dan klik untuk memilih setiap irisan (sekali lagi, Anda mungkin ingin untuk memperbesarnya) periksa bahwa menu drop-down "preset" diatur ke JPEG-High, hapus centang "convert to srgb" dan klik "save"

15a15a15a

Di jendela berikutnya yang muncul, pilih nama dan lokasi untuk gambar Anda, saya hanya akan menyimpannya ke desktop untuk saat ini.

Pastikan itu sudah diatur untuk "images only", "default settings", dan "selected slices only."

15b15b15b

Selanjutnya, periksa lokasi dimana Anda menyimpan file Anda. Alih-alih melihat gambar individu, Anda akan menemukan sebuah folder yang diberi label "images" di mana semua gambar Anda berada. Komputer akan memberikan nomor pada masing-masing gambar, yang sangat tidak berguna. Periksa bahwa Anda memiliki gambar yang tepat, kemudian namakan mereka dengan tepat.

Sekarang, kembali ke ikon dan logo. Pastikan untuk menyembunyikan semua layer latar belakang, kemudian ambil slice tool lagi dan potong kotak-kotak kecil di sekitar masing-masing ikon dan logo.

15c
15d15d15d

Sekarang kita ke proses yang sama dengan mengekspor untuk web seperti yang kita lakukan dengan jpeg, hanya saja kali ini pastikan untuk memilih PNG-24 dari menu dropdown "preset", dan kotak "transparansi" dengan tanda kotak-kotak. Ubah nama file ini juga, dan folder gambar Anda akan terlihat seperti ini:

15e15e15e

Baiklah, itu saja, kita sudah selesai memotong psd kita, dan kita memiliki semua gambar yang kita butuhkan. Jangan menutup Photoshop dulu, kita masih akan perlu untuk memilih warna, font, dimensi, dll.


Bagian 3 - HTML

Langkah 16 - Persiapan

Baiklah, waktunya untuk menyelam ke dalam beberapa html. Hal pertama yang akan Anda butuhkan adalah beberapa jenis editor kode. Ini sering merupakan daerah preferensi pribadi,
tapi saya sarankan mulai dengan yang gratis. Untuk mac dan PC, saya sangat merekomendasikan Komodo edit sebagai editor kode. Ia memiliki banyak fitur yang ideal untuk pemula dan pengguna tingkat lanjut.
Salah satu fitur terbaik adalah syntax-checker, yang seperti spell-check di pengolah kata, yang akan mengidentifikasi dan menjelaskan kesalahan-kesalahan kecil.
Untuk PC, ada lebih banyak pilihan, tidak ada yang saya sangat akrab dengannya, tetapi memeriksa artikel Andrew Burgess 22 Editor Kode yang Rapi untuk Windows

Dalam tutorial ini, kita akan menggunakan Komodo edit, tetapi prinsip-prinsipnya sama dalam setiap editor.


Langkah 17 - Pengaturan Folder kami

Hal yang pertama kali, kita perlu menyiapkan tempat untuk menyimpan semua file yang terkait ke situs kami. Buat folder untuk situs web Anda, milik saya adalah disebut "MySite", di dalam folder ini, buat folder yang berisi gambar-gambar yang baru saja kita iris.
Namakan folder ini "images". Sekarang kita membuka editor kode, bagian ini akan sedikit berbeda tergantung pada software apa yang Anda gunakan:
Jika Anda mengikuti bersama di Komodo, pilih "create new project" dan simpan/pindahkan file .kpf ke folder "MySite". Ketika Anda membuka file, file browser di samping Komodo harus menampilkan isi dari folder.
Selanjutnya klik kanan pada file proyek, dan gulir ke "add" dan pilih "new file". Di jendela yang muncul, pilih "html(xhtml)" dan nama file "index.html".

17a17a17a
17b17b17b

Jika Anda menggunakan editor lain, prosesnya seharusnya sama, tetapi esensinya sama: Anda perlu membuat sebuah file index.html, dan perlu di dalam folder "MySite" bersamaan dengan folder gambar.


Langkah 18 - Menyiapkan File index.html Kami

Hal pertama yang perlu kita lakukan adalah mendeklarasikan doc type, encoding karakter, dan membuat tag <html>. Banyak editor akan melakukan ini untuk Anda, tetapi jika tidak, itu akan terlihat seperti ini:

di antara tag html, kita perlu bagian "head", yang berisi segala macam informasi penting tentang situs yang tidak ditampilkan di dalam body dari situs Anda.
Bagi kami, pada saat ini semua itu akan berisi judul halaman, seperti ini:

di bawah head, secara logis, kita menambahkan body, juga terkandung dalam tag <html>. Oke, sejauh ini kita memiliki:

Ini adalah dasar-dasar pengaturan halaman, Anda mungkin ingin menyimpan klip ini di suatu tempat untuk penggunaan di masa depan.
Jadi ingat ketika kita mengatakan kita akan memiliki bagian header, konten, sidebar, dan footer?
Baik, sekarang masing-masing akan berada dalamsendiri, dan akan diberikan id yang sesuai.

CATATAN: ini adalah ide yang baik, terutama ketika Anda pertama kali memulai, untuk menambahkan komentar di setiap <div>  sehingga Anda dapat melacak dari hirarki div.

Sekarang mari kita melihat psd kita lagi - ingat bagaimana kita menginginkan irisan footer dan header untuk mengulang tanpa batas ke samping?
Kita akan membutuhkan suatu cara untuk membiarkan elemen-elemen ini meregang keluar, tapi pada saat yang sama, kita membutuhkan konten utama ("content" "sidebar")
terkandung dalam lebar yang ditentukan di bagian tengah layar.

Untuk menangani ini, kita perlu div yang besar memegang elemen memperluas kami, dan div berisi konten utama.
Kita juga harus melihat bahwa teks footer di tengah juga, jadi kita perlu mengulang proses yang sama untuk footer.
Untuk melakukan ini, kita perlu membungkus beberapa div di sekitar satu yang sudah kita miliki. Kami memiliki dua bagian dasar, bagian utama dan bagian footer.
Masing-masing akan terkandung dalam satu div besar, tegar dengan lebar yang tidak ditentukan,
dan konten dari masing-masing akan dibungkus dalam div individu yang menentukan lebar dan ke tengah.

Kami ingin menggunakan aturan yang sama untuk konten main dan footer, jadi bukan (atau di samping) id tertentu, mereka akan memiliki kelas yang ditentukan,
yang berarti Anda dapat membuat satu set aturan untuk mendefinisikan semua div dengan kelas yang sama.

Jadi konten utama akan dibungkus dalam sebuah div dengan id "main" dan footer kami akan dibungkus dalam sebuah div dengan id "footer." Jika hal ini membantu memvisualisasikan strukturnya, berikut adalah diagramnya:

181818

Dan markup terlihat seperti ini:

Sekarang kami membungkus setiap bagian dalam sebuah div yang berisi, dengan kelas "container."

Saya tahu semua div pembungkus ini tampak berlebihan, tetapi mereka akan menjadi relevan ketika kita mulai men-style halaman.


Langkah 19 - Menambahkan Konten

Sekarang struktur halaman kami telah diatur, kita dapat mulai menambahkan konten, dari atas ke bawah. Berikut ini adalah garis besar dari elemen html yang akan membuat halaman kami:

19a19a19a

Header

Di atas kami memiliki header, dan di dalam header kita memiliki 3 unsur utama: logo, tagline, dan menu navigasi.
Jadi mari kita membuat sebuah div untuk header kita, dan untuk menjaga hal-hal tetap bersih, kita akan menempatkan logo dan tagline di div mereka sendiri.

Karena itu yang paling penting dari halaman, Logo akan berada di dalam tag <h1>. Kami memiliki lebih banyak pilihan untuk tagline, tergantung pada seberapa relevan untuk situs Anda. Dalam kasus ini, saya menggunakan tag <h3>.

Untuk navigasi, penerapan standar adalah menempatkan item menu dalam sebuah unordered list, dengan masing-masing item daftar yang berisi sebuah tag anchor.
Jadi kita memiliki:

CATATAN: "href" nilai di tag anchor biasanya akan menentukan ke mana link menuju, tetapi dalam kasus ini, simbol pound hanya berarti "link ke bagian atas halaman."

Konten utama

Melihat konten utama kami, kami memiliki 4 jenis gaya yang berbeda: judul besar di atas, yang lebih kecil,
dan bahkan lebih kecil untuk judul item berita, ditambah beberapa paragraf, dan tanggal kecil pada item berita.
Kita akan menyebutnya masing-masing <h2>, <h3>, <h4>, <p>, dan <small>.  Sekarang adalah hanya soal paste di konten Anda, yang tidak menyenangkan, tapi cukup mudah.

Saya telah menambahkan tag anchor dengan nilai "Read More" pada akhir dari masing-masing item berita.

Sidebar

Sekarang pada sidebar. Sidebar memiliki tiga unsur, masing-masing yang akan dibungkus div sendiri.
Masing-masing div akan mengandung header <h3>, dan unordered list, dan masing-masing item daftar akan mengandung sebuah tag anchor lagi.
Jadi langsung copy dan paste teks Anda, dan itu harus terlihat seperti ini:

Footer

Kita mungkin juga menempatkan footer sebelum memeriksa di browser, itu hanya sebentar.
Yang perlu dicatat adalah bahwa setiap simbol yang ingin Anda gunakan dalam teks Anda memiliki kode-kode khusus di html, sebagai contoh, simbol hak cipta dikodekan sebagai ©

Dan itu semua tentang markup, mari kita lihat:

19b19b19b

terlihat cukup baik, bukan? Yah, tidak, belum. Tapi itu tidak mengandung semua informasi yang kita butuhkan, dan siap untuk di-styling.


Bagian Empat - CSS

Langkah 20 - Menambahkan CSS

Sekarang, ini adalah di mana keajaiban terjadi.
Buat file baru di folder situs kami, dan namakan "style.css".
Sekarang kita perlu sebuah cara untuk memberitahu browser bahwa file css ini milik file index.html kita, jadi kita link itu dengan tag "link href". Masukkan baris kode ini ke dalam bagian <head>, di bawah judul.

Sekarang file html kita dapat mengakses file css kita, sehingga apapun perubahan yang kita buat untuk css yang akan mempengaruhi file html.


Langkah 21 - Pembersihan Dasar

Ada beberapa hal-hal buruk tentang situs kami sehingga kami dapat memperbaikinya segera: kami ingin mengubah font default, kami ingin konten yang akan lebar 800px dan ke tengah, dan kami ingin menyingkirkan semua jarak antara elemen-elemen.

Pertama, kita akan memilih font untuk semua teks dalam body halaman, yang akan ditampilkan kecuali ditentukan lainnya:

Selanjutnya, mari kita tentukan lebar dan margin dari kelas div "container" kita.

Properti margin: 0 auto adalah istilah yang berarti bahwa tidak ada margin di atas, dan bahwa hal itu akan secara otomatis berpusat ke tengah secara horizontal.
Mari kita lihat.

21a21a21a

Jauh lebih baik. Langkah berikutnya adalah akan membuat hal-hal terlihat jauh lebih buruk, tapi tetap dengan saya.

CSS reset

Semua browser default menggunakan nilai-nilai padding dan margin untuk masing-masing elemen, yang membuat halaman tanpa style terlihat bagus, tapi bagi kami mereka hanya mengganggu dari gaya kita sendiri.

Untuk menyingkirkan semua margin berantakan ini, kita akan menggunakan css reset yang sangat sederhana, yang adalah hanya aturan yang menghilangkan padding dan margin default pada elemen-elemen yang kami gunakan. Tempatkan ini di bagian atas file css:

sekarang mari kita lihat:

21b21b21b

Langkah 22 - Header

Oke, jadi segala sesuatu sudah lancar dan siap untuk kita manipulasi! Sekarang kita bisa mulai menambahkan gaya kita sendiri, sekali lagi, dari atas ke bawah.
Mari kita dapatkan bagian yang sulit keluar pertama kali: pengaturan gambar latar belakang untuk header.

Kita akan mulai dengan mengulangi slice yang kami ambil dari header. Gambar berulang akan berada dalam div "main", yang memiliki lebar tak terdefinisikan. Kita perlu membiarkan browser tahu di mana gambar berada, dan apa yang harus dilakukan dengannya (repeat, no-repeat) untuk mengatur gambar latar belakang, kami menggunakan properti "background" dan menentukan lokasi gambar atau 'url': dalam kasus kami, gambar berada dalam folder gambar, jadi kami menentukan lokasi seperti ini:

kemudian tentukan bahwa kita ingin mengulang sepanjang sumbu-x:

Periksa:

22a22a22a

mengagumkan, bukan? Coba rentangkan browser Anda, itu hanya berjalan dan terus dan terus... Tapi kami masih kehilangan highlight pada bar biru, dan karena kita memotong bagian 800px dari header, kita dapat memasukkannya ke dalam div "container" kita. Masalahnya adalah, kita memiliki dua dari itu (satu untuk div main, satu untuk footer) jadi kita perlu menentukan bahwa kita ingin div dengan class "container" yang ada di dalam div dengan id "main"
atur gambar dengan cara yang sama seperti sebelumnya, tapi kali ini kita perlu menentukan "no-repeat":

Perhatikan:

22b22b22b

hebat! highlight berada di tempat yang kita inginkan, dan menyatu ke dalam ke sisi berulang.


Langkah 23 - Pengganti Gambar Logo

Logo kami adalah cukup rumit, kan? kita menggunakan gambar latar belakang, dan font non-html dengan inner shadow. kita tidak dapat melakukannya dalam css, jadi kita harus mengganti teks dengan gambar.
"mengapa tidak hanya menempatkan gambar di tempat baris <h1>?"
anda mungkin bertanya. Nah, di internet, header <h1> pada dasarnya adalah 'nama' dari halaman Anda, dan penting, robot yang kuat (google) memindai properti ini ketika mencari kata kunci. Jika Anda tidak memiliki header <h1>, situs Anda bisa disebut kalamazoo, tapi itu tidak akan muncul di pencarian untuk kata yang tepat tersebut.
Ada berbagai teknik yang memiliki keuntungan mereka sendiri daripada satu ini, (lihat di sini, terutama teknik #8) tetapi ini adalah yang paling sederhana dan teknik yang paling tepat untuk situasi ini.

Jadi, untuk memperbaiki masalah ini, kita menggunakan teknik yang agak licik disebut "pengganti gambar" untuk menggunakan gambar yang kita inginkan, sambil tetap menggunakan header <h1> di markup kami. Pertama, mari kita tambahkan gambar sebagai latar belakang untuk div #logo.

jika Anda melihat di browser, Anda akan melihat bahwa logo kami telah terpotong setengah. Ini karena kita belum memberikan ruangan apapun, kita dapat memecahkan masalah ini dengan menetapkan dimensi gambar:

23a23a23a

Lebih baik, tapi kami masih memiliki teks <h1> original menghalangi kami, tapi kami dapat memperbaikinya! Semua yang akan kita lakukan adalah mengatur nilai text-indent menjadi sesuatu yang konyol, seperti -9999px, menjauh dari halaman, sehingga tidak ada yang akan pernah melihatnya, kecuali robot mesin pencari.

sekarang kita lihat, dan gambar logo kita dengan senang berada di tempat yang dulunya adalah teks <h1> kami. Tapi itu masih tampak sangat buruk, semuanya berdesakan di atas sana. Ketika kita ingin memindahkan item dari posisi semula pada halaman, kita bisa menggunakan semua properti padding dan margin. Kita akan mencoba semuanya untuk melihat perbedaannya

Pertama, mari kita coba menambahkan margin untuk tag h1. Kita dapat mengetahui seberapa besar dengan ruler tool di Photoshop.

23b23b23b

Oops! Kami berhasil memindahkan logo, tapi mengambil seluruh halaman dengannya! Mari kita mencoba menyesuaikan padding:

Sekarang kita lihat, dan hal itu kembali ke tempat dimana ia dimulai! Hal ini karena properti margin menggerakkan seluruh elemen, tapi padding hanya memindahkan konten dari elemen, meninggalkan latar belakang apa adanya. Jadi, jika layar kita, katakanlah, lebar 19999px, kita akan melihat kami header <h1> terbuang bergerak turun 40px, tapi ini bukanlah apa yang kita mau.

Jadi, untuk memindahkan gambar latar belakang dari logo, kita perlu untuk memindahkan div di atasnya, karena seluruh div logo adalah "konten" dari div header. mari kita mencobanya:

23c23c23c

Jauh lebih baik! Sekarang logo kami terlihat seperti di psd kita, di tempat yang tepat. Jika saja kita bisa memperbaiki tagline itu...


Langkah 24 - Tagline Mengambang

Jadi sekarang kita perlu menemukan cara untuk mengeluarkan tagline di samping logo. Masalahnya adalah, elemen html secara alami tersusun secara vertikal, mendorong satu sama lain ke atas dan ke bawah halaman.
Kami memiliki beberapa pilihan untuk memperbaiki ini, tapi saya akan menggunakan float, yang sedikit rumit, tapi secara serius berguna setelah Anda memahami mereka.

Oke, jadi apa itu float? Nah, itu rumit. Pada dasarnya, ketika Anda menyatakan elemen agar 'float', ia melekat ke sisi sebuah halaman atau elemen, dan juga membawanya keluar dari "aliran" normal dari halaman. Bingung? Biarkan saya menunjukkannya.

24a24a24a

Nah, seperti yang Anda lihat, kami berhasil mendapatkan tagline kami keluar ke samping, tapi itu membawa menu navigasi dengannya.
Saya memikirkan itu dengan cara ini: elemen yang normal (misalnya, sebuah div, atau sebuah header h1, atau sebuah gambar), bahkan jika itu benar-benar kecil, tak terlihat menempati semua ruang ke samping itu, seperti satu bar horisontal panjang besar.

24b24b24b

Inilah sebabnya semua elemen lainnya tetap di bawahnya, bukannya tetap sampingnya. Ketika Anda float elemen, Anda mengambil semua ruang tambahan di sisinya, dan membatasi hanya dengan ruang yang langsung dibutuhkan, memungkinkan elemen lainnya untuk membungkus itu.
Sekarang bahwa Anda tahu bagaimana float bekerja, bagaimana kita bisa memperbaiki situasi kita sekarang? Pertama, kita harus mengisolasi tagline menjadi float sendiri, sehingga ia juga terletak di luar "aliran" normal halaman:

Lihat di browser, dan melihat bahwa, kami membuatnya lebih buruk. Sekarang item menu membungkus di sekitar tagline kami! Apa yang kami butuhkan di sini adalah untuk mengembalikan aliran normal dokumen setelah elemen di-float. Ada beberapa cara untuk melakukan hal ini, tapi kami menggunakan metode yang paling tepat. Kembali ke file index.html Anda, dan tambahkan div baru di bawah div float kita. Bukannya menambahkan sebuah kelas atau id untuk div ini, kita akan memberikan gaya (ya itu gaya inline, tetapi hanya mungil kecil) clear: both.

Simpan ulang file html Anda dan periksa di browser: Anda akan melihat tagline di samping logo, dengan menu di bawahnya. Sekarang yang harus kita lakukan adalah membentuk tagline, dan meletakkannya di mana sebenarnya. Mari kita mulai dengan menyalin gaya font dari Photoshop:

dan kemudian menambahkan sedikit padding di bagian atas dan kiri:

lihat: sekarang kita berada di suatu tempat!

24c24c24c

Langkah 25 - Bar Navigasi

sekarang kita perlu meluruskan menu navigasi dalam satu baris. Hal yang pertama kali, meskipun, kita akan men-style font sehingga kami dapat memberi jarak dengan sesuai. Ketika Anda men-style font dari daftar tag anchor, Anda perlu menentukan tidak hanya Anda merujuk ke item daftar, tetapi untuk anchor di dalamnya. Kita menetapkan unordered list tertentu kami, sehingga kita dapat menangani dengan yang lain secara terpisah. Kita juga perlu menyingkirkan underline dan poin-poin.

Bagus, sekarang, kita perlu menemukan cara untuk mendapatkan semua link kami berjajar. Bagaimana? Lebih Banyak Float! Kita akan mengatur item-daftar agar float kiri, sehingga masing-masing item menempel ke satu di sampingnya.

Jika Anda melihat di browser, Anda akan melihat masalah yang sama yang kita miliki sebelumnya dengan item float: unsur-unsur lain yang membungkus di sekitarnya. Sama seperti sebelumnya, kita dapat menyisipkan div clearing tepat setelah unordered list.

Semua item daftar kita harus sejajar sekarang, kita hanya harus memberi jarak mereka dan memindahkan menu sedikit turun. Jadi pertama ukur jarak dari dasar logo kami ke atas teks menu, dan kita mendapatkan sekitar 55px.
item pertama adalah sekitar kiri 30px dari guide kami, jadi mari kita mengatur padding item daftar menjadi kiri 30px.

Kita masih perlu menempatkan lebih banyak ruang antara setiap item, jika kita mengukur ruang dalam psd kami, itu adalah tentang 105px, tetapi karena kita sudah memiliki 30px padding di antara masing-masing, kita hanya perlu menambahkan padding 75px ke kanan setiap item.

Dan akhirnya, kagumi pekerjaan kami:

252525

Sempurna! Menu kami sudah seperti psd. Ke konten!


Langkah 26 - Konten

Area atas

Hal pertama yang kita lakukan di sini adalah mengatur semua font, sehingga kita dapat melihat jarak yang kita miliki untuk bekerja dengannya. cukup pasang info font dari Photoshop:

Kita mendapatkan sesuatu seperti ini:

26a26a26a

Pada titik ini Anda mungkin memperhatikan bahwa kita belum mengatur warna latar belakang untuk area konten. Hal ini karena...  Saya lupa. Jadi mari kita lakukan sekarang, mari?

Baiklah, sekarang kita siap untuk menambahkan beberapa padding untuk memberi jarak semuanya.
pertama, jarak dari bagian bawah menu nav ke atas judul h2 adalah 25px:

Berikutnya, jarak dari dasar heading h2 menuju ke atas heading h3 juga sekitar 25px, jadi ulangi kode yang pada dasarnya sama:

Sekarang, jarak dari bagian bawah heading h3 menuju ke atas paragraf pertama adalah tentang 45px, tetapi jika kita mengatur padding-top ke 40px, kami juga akan berakhir dengan 40px padding antara dua paragraf. Sejak paragraf yang hanya terpisah sekitar 20px, kita perlu membagi padding ke atas dan bawah: tambahkan 20px padding ke bawah heading h3, dan 20px padding ke atas paragraf.

Periksa hasilnya:

26b26b26b

Bagian Berita

Jarak ini sedikit berbeda di bagian berita, pertama-tama, kita perlu mendorong halaman sedikit ke bawah. Ada juga padding yang terlalu banyak di bawah heading h3, jadi kita akan menghapusnya sedikit.
Kita juga perlu mengurangi padding di atas paragraf, dan menambahkan beberapa padding di antara dua item berita.

Yang terlihat seperti ini:

26c26c26c

Di sana, sekarang semua yang perlu kita lakukan adalah meletakkan sidebar ke samping, dan kita sudah selesai konten utama.


Langkah 27 - Floating Sidebar

pertama, kita perlu mengatur lebar untuk bagian konten:

Sekarang, untuk mendapatkan sidebar di luar sana, kita sekali lagi akan menggunakan float, mengatur semua area konten dan sidebar menjadi float kiri.

Jika Anda melihat di browser, Anda akan melihat bahwa teks footer kami telah membungkus sidebar. Kita tahu bagaimana untuk menangani masalah ini sekarang: kita hanya perlu menambahkan sedikit markup div clearing kami:

Baiklah, langkah berikutnya adalah untuk hanya menyalin gaya font dari psd kami untuk sidebar:

Ingat bahwa men-style font dari link di unordered list, kita perlu merujuk pada tag anchor, daripada item daftar itu sendiri.
Sekarang, jika kita melihat psd kami lagi, kita akan melihat bahwa teks untuk item daftar di widget "subscribe" sedikit lebih besar daripada di seluruh sidebar. Untuk memperbaiki ini, kita perlu menarget unordered list yang spesifik, jadi kita perlu menambahkan nilai id ke ul subscribe di markup:

Kemudian kita dapat merujuk ke dalam css kami:

27a27a27a

Sekarang kita perlu untuk men-style sidebar kami: menambahkan padding, margin, latar belakang dan border. Pertama mari kita menyingkirkan poin:

OK jadi ini masih di jalan yang salah, jadi mari kita perbaiki dengan menambahkan margin ke bagian atas dan kiri. Ketika mengukur di psd Anda, ukur sampai di mana border sidebar dimulai.

Sekarang untuk latar belakang: di bawah properti margin-top, tambahkan properti latar belakang dan border:

Selanjutnya kami akan menambahkan padding 15 px di semua sisi:

Dan kemudian menambahkan padding untuk gaya teks kita untuk memberi jarak menu kami:

27b27b27b

Sidebar kami sudah terlihat hampir sempurna, kita hanya perlu menambahkan ikon dalam bagian subscribe, dan men-style tag anchor "join us".

Oke, jadi mari kita mendapatkan ikon-ikon tersebut bekerja. Menambahkan gambar ke unordered list dapat tampak membingungkan, tetapi jika Anda mengambil hal-hal langkah demi langkah, itu masuk akal. Tapi itu adalah sedikit membosankan.
Untuk memulai, kita akan harus membuat beberapa ruang untuk ikon. Kami akan menetapkan mereka sebagai gambar latar belakang, jadi jika kita menggunakan properti padding untuk memindahkan item daftar kami sedikit, gambar tidak akan terpengaruh. Lebar ikon adalah sekitar 26px, jadi kita akan menambahkan beberapa padding kiri dari item daftar:

Sekarang kita perlu cara untuk menargetkan setiap item daftar, jadi kita akan menambahkan beberapa id di markup:

Sekarang kita menambahkan gambar latar belakang untuk masing-masing item daftar:

Pada titik ini terjadi kepada saya bahwa mungkin 18px agak terlalu besar untuk link di sini, jadi saya menguranginya menjadi kurang dramatis 16px, yang memungkinkan saya untuk menambahkan sedikit padding lebih mungil pada kiri tanpa peregangan sidebar.

27c27c27c

Sidebar kami hampir selesai! Sekarang untuk men-style tombol kami:

Kita perlu menarget tombol, jadi mari kita menambahkan kelas ke markup: (kali ini saya menggunakan kelas bukannya id, yang merupakan praktek umum, seperti secara hipotetis kita bisa menambahkan lebih banyak tombol nantinya)

Jadi mari kita memperbaiki gaya teks dan menambahkan ke potongan latar belakang yang mengulang kami:

27d

seperti yang Anda lihat, gambar latar belakang kita di sana, tapi itu hanya muncul tepat di belakang teks, kita perlu untuk memberikan ruang untuk menyebar. Pertama, mari kita memberikan margin untuk menengahkan ke sidebar:

dan beberapa padding pada masing-masing sisi sehingga tombol kami merata:

Ini adalah cara menulis singkat properti padding, dan sepenuhnya dapat diterima, dan bahkan disarankan, karena ini akan menghemat ruang. Dalam hal ini, menentukan padding 13px pada bagian atas DAN bawah, dan 23px dari padding pada kiri dan kanan.

27e

tombol terlihat bagus, tapi ups! ia berpindah ke kanan 23px, jadi mari kita mengurangi margin sedikit untuk mengkompensasinya:

Sekarang mari kita hanya memberikan beberapa ruang di bawahnya dengan menambahkan padding untuk seluruh div sidebar:

di sini properti singkatan lagi: ia berada dalam urutan ini: atas, kiri, bawah, kanan. Jadi di sini dikatakan 15px di semua sisi kecuali bagian bawah, yang harus 30px.

akhirnya, kita hanya perlu menambahkan border 1px itu ke kelas tombol:

27f

Dan yang kita miliki, sebuah sidebar!


Langkah 28 - Footer

Terakhir tapi bukan yang terburuk, footer kecil sederhana kami. Kami akan mengatur footer dengan cara yang sama seperti kita mengatur header:
Menggunakan potongan yang mengulang dalam sebuah div yang tidak ditentukan lebarnya, dan kemudian menambahkan isi di dalamnya div fixed-width, di tengah.
Ini adalah di mana div .container kami berguna, karena kita tidak perlu menentukan 800px atau margin:auto saat ini, karena itu sudah dilakukan.
Mari kita mulai dengan potongan yang mengulang:

28a28a28a

Itu sebuah awal, tapi itu benar-benar kecil. mari kita tambahkan beberapa padding, dan membuat teks putih:

28b28b28b

dan secara keseluruhan:

28c28c28c

Langkah 29 - Perubahan Kecil

Dalam sebuah browser, hal-hal terlihat sedikit berbeda dari di Photoshop, jadi kita mungkin ingin membuat beberapa perubahan kecil. Misalnya, saya ingin sedikit menambahkan padding di atas konten utama dan sidebar. Kami akan menambahkannya ke bagian bawah menu.

Saya juga memutuskan bahwa saya ingin menu agar menyelaraskan ke kiri, jadi saya akan menghapus padding-left. Sekarang item-item lebih dekat bersama-sama, karena kami memiliki padding 75px di kanan dan 30px di sebelah kiri, untuk total 105. Sekarang kita telah mengambil padding kiri, kita perlu menambahkannya ke kanan untuk membuat perbedaannnya:

Dan grand final:

292929

Jadi berikutnya... tunggu? apa? kita selesai?
Kita sudah selesai!

Sekarang hanya beberapa perawatan untuk dikhawatirkan: Validasi.


Langkah 30 - Validasi

Sekarang validasi merupakan langkah penting dalam desain situs web, saya tidak akan pergi ke alasan tak berujung di sini karena artikel ini melakukannya untuk saya. Di sini saya hanya akan berjalan melalui proses:

Validasi HTML

Pergi ke Layanan Validasi w3.org, pilih validate by file upload, dan pilih file index.html Anda, dan klik "check."
Berikutnya... Saatnya kebenaran:

MERAH (Merah berarti buruk!)

Jangan khawatir, itu tidak begitu buruk, mari kita tinjau apa yang salah:
sepertinya saya hanya memiliki satu kesalahan:

30a30a30a

Mereka menangkap saya menggunakan id tag yang sama dua kali, yang bisa menyebabkan kebingungan yang serius. Karena kami memiliki banyak gaya yang didefinisikan untuk ul dengan id "subscribe", kita hanya akan mengubah nama div: mari kita menyebutnya "feeds"
Sekarang kita perlu memeriksa bahwa kita belum mendefinisikan gaya untuk #subscribe, dan kami belum!
Agar lebih aman, mari kita reload halaman kami untuk memastikan tidak ada perubahan yang tak disengaja.
Terlihat baik! Sekarang mari kita jalankan validasi lagi:

Sukses! Halaman kami sekarang XHTML valid. Anda bahkan dapat men-download ikon jika Anda ingin menyombongkan diri.

Catatan: saya terkejut menemukan hanya satu kesalahan, jika Anda tidak begitu beruntung, baca info yang disarankan di w3 shcools, atau periksa artikel ini oleh Glen Stansberry.

Sepertinya kita sudah selesai! Ah, tapi jika saja semudah itu. Kita masih harus memvalidasi CSS kami!

Validasi CSS

Pergi ke The w3 CSS Validator dan pergi melalui proses yang sama dengan html, hanya saja kali ini pilih file style.css Anda. Memeriksa...

Kita Valid!

Namun, kami mendapatkan beberapa peringatan. Untuk tetap berada dalam rahmat yang baik dari gereja, kita tentu harus memperhatikan mereka:

30b30b30b

Itu hanya beberapa masalah kecil: kita harus menyatakan lebar untuk semua item float kita. Sekali lagi, saran ini adalah opsional, tapi itu yang terbaik untuk mendengarkan kritik yang membangun.
Membersihkan: tagline kami, item menu unordered list, dan sidebar semua harus memiliki lebar yang dinyatakan. Kami juga ingin melakukan hal ini tanpa mengubah tampilan halaman.
Pertama, tagline. Kita bisa hanya membuat perkiraan kasar pada yang satu ini, lebar 400px.

Dan reload: tidak ada perubahan, sempurna. Berikutnya, menu item daftar. ini adalah sedikit rumit: Lebar halaman kami adalah 800px, jadi itu adalah lebar total maksimum dari semua item daftar bersama-sama. Jika kita membagi dengan empat item daftar, dan mengatur lebar 200px, item-item tercampur dan terdaftar secara vertikal. Ini karena kami memiliki padding pada kedua sisi dari setiap item daftar: 30px di sebelah kiri dan 75px di sebelah kanan. Kurangi 105 itu dari 200, dan lebar sisanya 95px.

Ide yang sama dengan sidebar: mari kita pertama kita lihat lebar area konten: 510px. Sisanya pada halaman 800px kami adalah 290px, tapi pertama-tama kita perlu mengurangi semua padding pada kiri dan kanan: 290-30=260. Berikutnya kurangi margin kiri, dan kami mendapatkan 205px. Satu masalah terakhir: border 1px kita, jadi mari kita kurangi 2px lagi, dan mengatur lebar sidebar menjadi 203px. Periksa lagi, tidak ada perubahan.

Bagus sekali, jika kita memvalidasi lagi, tidak ada kesalahan, bahkan peringatan!
Halaman web kami, sejauh standar w3c yang bersangkutan, telah sempurna.


Kesimpulan

Jadi Anda sudah memilikinya, salah satu yang sangat sederhana, situs web yang dikode dengan baik. Sepanjang tutorial ini, harapan saya adalah bahwa Anda mengambil beberapa keterampilan yang berharga untuk diterapkan ke desain Anda sendiri, dan sekarang siap untuk memulai koding situs Anda sendiri.


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.