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

Mendesain dan Membuat Codingan Website yang Mulus Dari Nol - Bagian II

by
Difficulty:IntermediateLength:LongLanguages:

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

Dengan adanya internet yang menjadi lebih dan lebih populer setiap menit, situs web yang tampak hebat adalah sesuatu yang harus dimiliki. Kamu jelas bisa membayar seorang desainer web untuk merancang satu untukmu, tetapi tidakkah akan benar-benar keren untuk merancang dan membuat codingannya sendiri? "Sulit", kamu mungkin akan berkata; tetapi sebenarnya tidak terlalu sulit setelah kamu belajar cara melakukannya!

Di bagian kedua dari tutorial ini, kita akan membuat kode desain kita ke dalam tata letak xHTML, CSS, dan JavaScript/jQuery yang lintas-browser standar. Jalankan Coda, atau editor pilihanmu ... ini adalah waktu coding!


Langkah Pertama - Apa Yang Akan Kita Buat

Kamu mungkin berpikir bahwa kita hanya akan menggunakan tata letak yang dirancang sebelumnya sebagai semacam dasar dan kemudian kode desain yang jauh lebih kompleks untuk membuat semuanya lebih mudah bagi kita, tetapi bukan itu masalahnya! Di akhir tutorial ini, beginilah tata letakmu akan terlihat seperti di browser:

Catatan bahwa ini bukanlah sebuah versi Photoshop tetapi hasil aktual di Firefox. Itu diambil menggunakan Screengrab! Plugin, jadi ini adalah persis apa yang akan Anda lihat setelah selesai.

Beberapa pertimbangan tentang desain:

  • Slideshow sepenuhnya bekerja dengan memperlancar transisi
  • Judul tidak gambar
  • CSS tidak valid dengan spesifikasi 2.1 dan 3.0
  • Memvalidasi xHTML dengan ketat Doctype 1.0

Langkah kedua-persyaratan

Meskipun saya akan mencoba untuk menjadi jelas dan ringkas mungkin selama tutorial ini, mengatakan bahwa seorang pemula dapat mengikuti dan memahami ini akan menjadi angan-angan. Tentu, salinan & paste adalah mungkin, tapi untuk memahami semua penjelasan, Anda harus memiliki pengetahuan tentang teknik web:

  • Padat pengetahuan tentang HTML dan CSS sangat dianjurkan, tetapi Anda mungkin akan mengelola untuk mengikuti tahu hanya dasar serta
  • Gagasan tentang bagaimana bekerja JavaScript dan jQuery lebih tepatnya, penting

Jika Anda tidak tahu apa-apa tentang hal-hal yang Anda selalu dapat pergi ke depan dan belajar mereka. Berikut adalah beberapa link yang berguna untuk melakukannya:

Langkah tiga-mendirikan lingkungan pengembang kami

Dalam bagian ini tutorial, saya akan hanya mencoba untuk menjelaskan cara saya melakukan hal-hal ketika aku sedang coding situs web. Hal yang pertama dan mungkin paling penting adalah tentang alat Anda. Apa aplikasi yang Anda akan menggunakan kode, debug, untuk menguji?

Dalam kasus saya, Dreamweaver adalah pilihan untuk kode. "Oh Astaga, hanya pengembang WYSIWYG web lain", Anda mungkin berpikir, tapi jawabannya adalah tidak, saya tidak menggunakan modus WYSIWYG. Saya menggunakan Dreamweaver karena aku hanya mencintai fitur auto-completion dan penyorotan sintaks. Jika Anda tidak merasa seperti membayar 799$ untuk aplikasi Namun, ada sejumlah besar kode editor luar sana secara gratis atau untuk seluruh banyak kurang. Aku sedang berpikir tentang Coda, teks Mate, Espresso atau mengedit CSS untuk Mac OS X, dan Aptana Studio, Notepad ++ atau E Text Editor untuk Windows. Anda jelas hanya bisa menggunakan Notepad atau mengedit teks, tetapi mengapa begitu ketika begitu banyak alat-alat besar tersedia free?

Hal berikutnya yang kita perlu memilih adalah pengembangan browser. Kita memerlukan browser dengan alat-alat debugging yang besar. Meskipun saya pengguna Opera hard-core di kehidupan sehari-hari, saya menggunakan Firefox selama siklus pengembangan saya karena alat yang luar biasa: Firebug. Tentu saja, Opera memiliki Dragonfly, dan Safari 4 dikirim dengan beberapa alat besar juga, tetapi Firebug masih satu langkah ke depan, dan ini membuat saya memilih Firefox sebagai browser pembangunan saya. Anda harus memastikan untuk menggunakan standar-compliant browser dalam setiap kasus. Dengan kata lain, tidak menggunakan Internet Explorer sebagai lingkungan pengujian utama Anda. Meskipun pilihan saya adalah Firefox untuk pengujian selama siklus pengembangan, saya memiliki semua browser terbaru yang diinstal di komputer saya untuk memeriksa bahwa semuanya bekerja dengan baik pada mereka semua. Desain saya karena itu diuji di Firefox 3 +, Opera 9.5 +, Safari 3 +, Chrome 1 + dan Internet Explorer 7 +. Dengan cara ini, mereka harus ditampilkan dengan benar untuk sekitar 95% dari pengguna internet. * Catatan Editor: angka ini akan bervariasi tergantung pada target audiens situs.

Oke, sekarang bahwa kita memiliki alat untuk bekerja dengan, kita juga perlu struktur direktori. Untuk menjaga hal-hal yang jelas, aku telah memutuskan untuk membuat baru "situs" di server lokal hanya dengan membuat folder baru di www / folder. Saya menggunakan WAMP sebagai localhost saya. Dalam situs ini, kita perlu membuat tiga folder, js, css, dan img /. Saya kira nama cukup jelas.

Sekarang bahwa kita memiliki lingkungan kita mengatur, kita dapat mulai coding!

Langkah 4-xHTML

Saya telah menyebutkan itu, tapi dalam tutorial ini, kita akan pastikan untuk membangun valid xHTML. Apa maksudnya?

Sebagian besar halaman di World Wide Web yang ditulis dalam bahasa komputer (seperti HTML) yang memungkinkan Web penulis untuk struktur teks, menambahkan konten multimedia, dan menentukan apa penampilan, atau gaya, hasilnya seharusnya.

Untuk setiap bahasa, ini memiliki tata bahasa, kosa kata dan sintaks, dan setiap dokumen yang ditulis dengan bahasa komputer ini seharusnya mengikuti aturan ini. [...]

Namun, sama seperti teks-teks dalam bahasa alami dapat memasukkan ejaan atau tata bahasa kesalahan, dokumen-dokumen yang menggunakan bahasa Markup (untuk berbagai alasan) mungkin tidak mengikuti aturan-aturan ini. [...]

Dengan konsep-konsep ini dalam pikiran, kita dapat mendefinisikan "markup validasi" sebagai proses pengecekan dokumen Web terhadap tata bahasa (umumnya DTD) mengaku menggunakan.

Layanan validasi W3C

Tetapi mengapa repot-repot memvalidasi halaman? Well, ada beberapa keuntungan, yang pertama adalah SEO. Crawler Google's memberikan peringkat yang lebih baik ke halaman yang berlaku. Yang kedua adalah aksesibilitas. Orang-orang yang menggunakan pembaca layar tidak dapat melihat situs Anda dengan benar jika markup Anda tidak valid. Terakhir tetapi tidak paling, kemampuan untuk menghasilkan kode yang berlaku adalah sesuatu yang menunjukkan bahwa Anda tidak coder minggu sederhana.

Yang harus kita lakukan sekarang adalah berpikir sedikit tentang bagaimana kita akan menyusun desain kami, tag mana yang akan kami gunakan, ID yang akan kami berikan kepada mereka, dll. Inilah yang saya temukan:

Sekarang bahwa kita tahu apa yang akan kita untuk memproduksi, mari kita mulai dengan mendefinisikan dasar-dasar dokumen kami!

Dasar-dasar

Aku sudah memberitahu Anda bahwa kami akan menggunakan xHTML ketat. Ini berarti kita harus menjaga logika struktur kita dipisahkan dari logika tata letak kami. Untuk memberitahu browser apa "bahasa" yang kita gunakan, kita perlu mendefinisikan DTD atau dokumen jenis definisi yang disebut. XHTML 1.0 ketat Doctype terlihat seperti ini:

Kode ini harus meletakkan pertama dalam semua file HTML Anda. Kurangnya definisi seperti itu akan menghasilkan validasi yang gagal.

Selanjutnya, kita hanya perlu mendefinisikan dasar-dasar halaman kami: kepala dan tubuh. Anda akan menginginkan tag judul di bagian kepala Anda untuk menampilkan nama yang benar di bilah judul browser, bukan sesuatu seperti 'Tanpa Judul 1'. Saya memutuskan untuk menempatkan beberapa meta-tag serta untuk SEO, meskipun kita semua tahu mereka tidak begitu berguna hari ini.

Setelah ini selesai, kita dapat mulai pengkodean konten yang sebenarnya.

Status Bar

Ingat bagaimana saya membuat Anda membuat sejumlah kelompok layer dan mengubah nama mereka untuk sesuatu yang tercermin fungsi mereka? Sekarang Anda akan mengerti mengapa. Lihatlah palet lapisan ini:

Dapatkah Anda melihat apa yang saya maksud sekarang? Memang, ini memberikan struktur HTML kita: kita punya pembungkus folder bernama Status Bar, di mana kita memiliki subfolder. Folder tersebut mewakili blok elemen halaman kami! Namun, ini tidak mudah. Pengalaman menunjukkan bahwa kita perlu beberapa lebih banyak blok pembungkus untuk pusat isi dari bar dan masih memiliki bar latar belakang mengambil 100% lebar. Kita juga perlu pembungkus di sekeliling pesan pembuka dan tindakan bar untuk membuat bidang Cari mengapung di sebelah kanan. Ini adalah apa yang kode akan terlihat seperti:

Tag Div dengan ID status-bar adalah blok pembungkus kami, seperti yang mungkin Anda pahami. Blok status-bar-konten yang diperlukan untuk pusat isi dari bar ini. Anda juga harus memperhatikan ayat Tag di dalam tag bentuk. Hal ini diperlukan untuk xHTML 1.0 ketat untuk memvalidasi. Hal terakhir yang penting berpikir dalam potongan kode ini adalah kenyataan bahwa kita tidak mengganti tag paragraf kami dengan divs. Ini adalah apa yang sebut desainer web semantik pengkodean. Sebuah paragraf harus selalu dibungkus dalam

Tag untuk menekankan fakta bahwa itu adalah teks terbaca. Hal ini juga membuat hal lebih mudah bagi pembaca layar untuk membaca.

Hebat! Itu saja untuk status bar. Tidak begitu rumit, ya? Kuncinya adalah untuk melanjutkan logis dari hirarki lapisan dalam PSD kami untuk membangun markup kami dengan cara yang benar. Hanya perlu diingat untuk menjaga HTML semantik. Gunakan tag paragraf paragraf, blockquotes untuk kutipan jelas, dan seterusnya.

Header

Kita perlu melihat lapisan palet untuk memiliki gagasan tentang bagaimana untuk membangunnya. Ini adalah apa yang kami punya untuk header:

Sekarang mari kita menerjemahkan struktur ini ke dalam kode. Kita akan membutuhkan pembungkus, logo blok dan blok teks dua: satu untuk header, satu untuk subjudul. Namun, dalam kasus ini kami tidak akan menggunakan tag paragraf. Mengapa tidak? Yah hanya karena kita dapat lebih semantik dari itu, menggunakan tag header. Karena teks header adalah judul pertama dalam dokumen kami, kami akan membungkusnya dengan tag h1. Subjudul akan menjadi sebuah h2 tag mengingat ini adalah judul kedua dalam dokumen kami.

Satu hal yang kita lakukan di sini adalah menambahkan link ke halaman rumah pada logo. Ini adalah konvensi yang cukup banyak setiap perancang web digunakan. Hal ini juga terkenal dari para pengguna, jadi tidak menawarkan link tersebut dapat menyebabkan beberapa kebingungan dengan pembaca Anda. Selain itu, ada tidak lebih mengatakan tentang hal ini bagian dari desain, jadi mari kita hanya melanjutkan ke bagian konten.

Tab

Sebelum memulai dengan tab yang sebenarnya, kita harus menambahkan div pembungkus dengan id yang kandungan mengandung Tab, bungkus halaman, dan kedua kericau dan modul blog. Setelah itu selesai, kita akan memiliki untuk berpikir sedikit tentang menu dan bagaimana itu akan terstruktur. Cara terbaik untuk kode menu mungkin adalah daftar unordered, meskipun kita ingin horizontal menu. Mengapa daftar? Daftar baik baik untuk menampilkan barang-barang dengan nilai yang sama, tanpa menekankan beberapa dan tidak lain. Ini adalah persis apa yang kita inginkan. Dalam setiap item daftar, kami jelas menambahkan tag anchor. Link anchor ini tidak link ke sesuatu yang nyata; href atribut hanya sama dengan #home untuk tutorial kami.

Anda harus menyadari bahwa kita tidak membungkus tab kami dalam div dengan id dari tab, hanya karena ul tag artinya ini bagi kita sudah. Anda harus selalu mencoba untuk menghapus blok tidak perlu div sebanyak mungkin untuk membuat halaman lebih cepat dan bersih. Anda mungkin juga bertanya kepada diri sendiri apa &lt; dan &gt; singkatan. Baik itu singkatan "lebih rendah daripada", dan gt "lebih besar dari" dan mereka hanya HTML nilai untuk < dan >.

Jangan khawatir terlalu banyak tentang fakta bahwa menu horizontal tab kami adalah daftar vertikal untuk saat ini; kami akan memastikan bahwa itu akan terlihat sesuai saat kita menulis CSS kami.

Wrapper

"wrapper" adalah apa yang saya sebut kotak dengan slide dan pesan pembuka. Kami akan membuat div dengan ID "halaman-pembungkus" untuk memastikan bahwa kotak akan didefinisikan dengan benar. Div ini jelas yang bersarang di div konten terlalu.

Sekarang kita perlu kode Bagian slideshow. Kami akan membuat sebuah wadah dengan ID dari "slideshow". Dalam hal ini, kita menciptakan div disebut "slide" yang akan berisi semua gambar yang kita inginkan untuk siklus melalui. Ada juga link di sekitar mereka untuk mengarahkan pembaca ke bagian portofolio situs. Div dengan ID dari "slideshow-perintah" mengandung perintah sebelumnya dan berikutnya, dan judul saat ini slide.

Penting di sini adalah cara kami menambahkan semua gambar slide kami dalam wadah untuk membuat geser lebih mudah. Namun, kita perlu memiliki seluncuran default. Dalam kasus ini, saya telah menambahkan kelas "default-slide" untuk jangkar yang mengandung gambar default. Untuk membuat styling lebih mudah, cukup tambahkan kelas 'jempol' ke gambar-gambar itu juga. Beberapa kelas dapat disetel ke satu elemen dengan memisahkannya dengan spasi. Atribut alt pada gambar adalah wajib untuk kode yang valid. Ini juga penting untuk tayangan slide kami karena ini adalah tempat kami akan mengambil judul slide.

Langkah berikutnya dari ini "halaman-pembungkus" adalah pesan ditampilkan dan informasi kontak. Satu ini akan cukup mudah. Kita perlu judul, yang akan menjadi h3 karena itu adalah judul ketiga kami pada halaman, tag ayat yang mengandung pesan itu sendiri, dan tag ayat yang mengandung info kontak.

Hanya melihat bagaimana kita menempatkan span tag sekitar nomor telepon dan alamat mampu untuk gaya mereka secara terpisah. Jangan lupa bahwa baris baru dalam kode Anda tidak memiliki pengaruh apapun pada teks yang dicetak di layar. Kita dapat menggunakan ini untuk membuat kode kami indah dan indent paragraf dengan benar.

Setelah ini dilakukan, saatnya untuk sedikit istirahat untuk melihat apa yang telah kami lakukan. Ini adalah seluruh kode sejauh ini:

Anda dapat mengecek validasinya sekarang di http://validator.w3.org/ dan melihat bahwa itu sah. Baik, kita dapat melanjutkan dengan pengkodean modul.

Modul Blog

Kode cukup sederhana di sini. Kita harus menambahkan div yang berisi dengan ID dari "blog" dan kelas "modul" mampu untuk gaya dua modul bersama-sama karena mereka cukup banyak yang sama. Judul akan h4 sedangkan judul akan h5. Ini akan membuat garis yang jelas dengan hirarki padat dalam dokumen kami. Hal terakhir yang harus dipertimbangkan di sini adalah beberapa baris dari setiap entri. Kita akan menaruhnya di blockquotes tag. Mengapa? Baik meskipun tidak kutipan yang tepat, hal ini masih teks yang diambil dari bagian lain dari situs web, sehingga benar-benar tepat untuk menggunakan blockquotes di sini. Kami juga hanya menempatkan 'Read More' link dibungkus dalam ayat tag untuk membuat hal-hal yang berlaku.

Anda akan melihat bahwa kami telah menambahkan tag paragraf dalam blockquotes. Ini adalah sesuatu yang wajib untuk lulus validasi. Bukannya menambahkan id untuk semua elemen catatan, kami menambahkan kelas, untuk dapat menempatkan mereka beberapa kali. Anda akan karena itu melihat ayat dengan ID dari "meta" atau blockquote dengan kelas "konten" misalnya. Setiap entri yang terbungkus div sendiri serta hanya untuk membuat jarak lebih mudah.

Modul Twitter

Modul Twitter akan mirip dengan modul blog, jadi aku akan pergi selama ini lebih cepat. Hanya ingat bahwa struktur di belakang HTML kita coding yang diberikan oleh lapisan palet kami. Dalam kasus ini, sebagai contoh, ini adalah kelompok lapisan modul kericau apa yang tampak seperti:

Kita karena itu akan perlu bungkus bar header, dan wadah untuk setiap menciak, tetapi juga blok berisi tombol. Ini adalah apa yang kode akan terlihat seperti:

Tidak mengejutkan di sini, kita masih menggunakan blockquotes untuk isi menciak. Kami juga terhubung ke halaman twitter melalui h5. Kami juga menggunakan sintaks yang sama untuk "Mendapatkan lebih Tweets" link seperti yang kami lakukan untuk link Read More.

Footer

Bagian terakhir dari dokumen HTML kami akan menjadi footer. Itu akan menjadi sangat mudah untuk membangun. Kita hanya perlu bungkus dengan ID dari "footer", lain div yang berisi gambar dan ayat untuk nama pemberitahuan dan perusahaan kami hukum.

Ada benar-benar apa-apa terlalu mewah. Hanya melihat bahwa kami menggantikan simbol hak cipta dengan © karena itu tidak tampil dengan benar sebaliknya.

Jadi

 Oke, percaya baik atau tidak, tapi kami benar-benar selesai dengan markup kami. Anda telah menyadari bahwa sebenarnya tidak terlalu sulit untuk menghasilkan kode HTML yang benar dan valid hanya dengan mengikuti beberapa grup lapisan. Kuncinya adalah untuk melanjutkan logis dan perlahan-lahan, untuk memastikan untuk tidak kehilangan apa-apa.

Ini adalah kode yang kami buat:

Anda dapat mengecek validasinya sekali lagi dan melihat bahwa itu adalah berhasil memeriksa sebagai xHTML 1.0 ketat!

Langkah lima-CSS

Bahasa Cascading Style Sheet adalah satu dengan sintaks yang sangat mudah dan karena itu sangat mudah dipelajari. Namun, terutama disebabkan inkonsistensi browser, itu dapat benar-benar sulit untuk menguasai. Kami akan mencoba untuk menjaga CSS sesederhana dan sesederhana mungkin, sambil tetap berusaha membuatnya bekerja pada semua browser modern. Untuk melakukan ini, ada satu konsep yang kita butuhkan untuk menguasai. Aku sedang berbicara tentang model kotak.

Model kotak adalah cara kotak ditampilkan dalam halaman web Anda. Tapi satu gambar mungkin lebih baik daripada penjelasan panjang.

Ini adalah model kotak standar W3C. Apa yang penting untuk memahami di sini adalah bahwa sebenarnya lebar kotak adalah tidak yang didefinisikan oleh properti lebar, tapi penambahan lebar, padding dan perbatasan. Jadi mari kita mengatakan bahwa kita memiliki sebuah kotak dengan lebar diatur ke 200px, 25px padding pada kedua sisi dan batas yang 5px tebal di sekitar kotak ini. Lebar ditampilkan sebenarnya kotak akan 260px dan tidak 200px seperti yang kita ingin menjadi. Tapi itu baik-baik, jika kita ingin kotak yang ketat 200px lebar, kita hanya perlu mengatur properti lebar untuk 140px dan kita sudah siap. Yang penting adalah hanya untuk mengetahui bagaimana ini benar-benar bekerja. Ini akan menghindari banyak sakit kepala kemudian.

Oke, sekarang bahwa Anda sudah familiar dengan konsep model kotak W3C, kita bisa memulai coding desain kami.

CSS Reset

Aku sedang berbicara tentang browser inkonsistensi sebelum. Mereka termasuk beberapa pengaturan browser margin 10px untuk setiap blok, beberapa pengaturan untuk 15px dan lebih dari isu-isu tersebut. Ini jelas dapat menyebabkan beberapa masalah saat melakukan pengkodean karena kita tentu tidak akan me-reset semua properti dalam kode kita. Untuk memecahkan masalah ini dan karena itu membantu kami menghasilkan situs pixel sempurna, kita akan ingin menggunakan CSS Reset. Ada banyak dari mereka yang tersedia luar sana, tetapi menurut pendapat jujur saya, Eric Meyer adalah masih yang terbaik. Aku hanya suka cara me-reset pretty much semua dan memungkinkan kita kontrol penuh atas tata letak kami. Anda bisa mendapatkannya di sini: http://meyerweb.com/eric/tools/css/reset/. Aku telah memutuskan untuk menempatkan ini dalam file CSS-nya sendiri disebut reset.css dan saya kemudian meletakkannya di folder CSS template kami.

Aku hanya memutuskan untuk menghapus konten tersebut: none; garis karena itu membuat CSS validasi gagal. * Editor's note: ingat orang, validasi harus bekerja untuk Anda, bukan melawan. Tidak apa-apa jika halaman Anda tidak memvalidasi jika Anda tahu persis mengapa. Karena aku tahu aku tidak akan perlu menyisipkan dan menghapus, saya menghapus resets tersebut juga, hanya untuk membuat hal ini sedikit lebih ringan.

Jika Anda memuat ulang index.html file di browser Anda, Anda akan melihat bahwa tidak ada yang berubah. Hal ini disebabkan oleh fakta bahwa kita namun tidak link ke stylesheet dalam keluar HTML. Kami tidak akan menambahkan sebuah link tag di luar kepala seksi meskipun. Sebaliknya, kita hanya akan memanggil reset.css file dari kami stylesheet utama yang menggunakan perintah @import ketika kita mulai membangun itu.

Tipografi

Saya biasanya membagi CSS dalam dua bagian. Salah satu yang mengendalikan tata letak halaman, ini adalah stylesheet utama saya, dan mengendalikan tipografi. Ini termasuk teks menyelaraskan, warna font, ukuran font, Surat spasi, tinggi baris dan sebagainya. Ini adalah hal yang baik untuk dilakukan karena hal itu memungkinkan Anda fleksibilitas yang lebih besar dalam proses pengkodean. Katakanlah Anda ingin mengubah ukuran font h1 48px bukan 36px, juga bukan mulai menggali di style.css Anda yang mungkin beberapa ratus jalur panjang, Anda hanya dapat membuka tipografi stylesheet, menemukan gaya yang terkait dengan h1 tag, mengubah font ukuran dan Anda selesai!

Ketika coding stylesheet tipografi kami, kami tata letak Photoshop akan sangat berguna. Kita bisa ambil Type alat (T) di Photoshop, dan mulai menyoroti teks berbeda blok desain kami. Dengan cara itu, kita dapat melihat bahwa h1 akan memiliki ukuran font 48px, warna #4d4d4d, dan font ditetapkan ke berbagai Pro. Titik terakhir ini akan menyebabkan beberapa masalah. Segudang Pro adalah tidak font web standar, sehingga kita tidak bisa menentukan font-family dimulai dengan segudang Pro dan berpikir bahwa semua orang akan melihat desain kami cara mereka seharusnya. Kami akan memecahkan masalah ini kemudian menggunakan beberapa teknik web yang lebih maju, tetapi untuk sekarang, kita hanya akan mendefinisikan sebuah font-family properti dengan segudang Pro termasuk, dan beberapa font lain mundur dalam kasus pembaca tidak memiliki segudang Pro diinstal pada komputer nya.

Jika kita terus seperti ini, memindai melalui kami PSD untuk mendapatkan semua informasi font, kita dapat melihat bahwa kami h3 Tag harus memiliki ukuran font 24px, bahwa tag h5 kami memiliki warna #6eb9cc dan seterusnya. Jika kita melanjutkan secara logis, ini adalah apa yang akan kita datang dengan:

Saya tidak berpikir ada sangat banyak saya perlu menjelaskan. Ini adalah hanya styling penampilan yang sangat dasar. Catatan bahwa aku mendefinisikan styling untuk standar ayat tag dan tag anchor standar sebelum memulai untuk menentukan tampilan teks lebih spesifik blok seperti paragraf meta misalnya. Ini adalah bagian dari konsep "Jangan ulangi Yourself" coding. Font fallback saya memutuskan untuk menggunakan adalah Helvatica dan Arial, mereka tidak besar pengganti untuk segudang, tapi kami akan mungkin tidak membutuhkan mereka tetap seperti aku akan menjelaskan nanti. Ini adalah hanya untuk memastikan.

Satu hal yang aku ingin bicara tentang adalah gaya pengkodean di sini. Tentu saja, indentasi penting bagi pembacaan kode, tapi tidak hanya. Pada pandangan pertama, Anda mungkin berpikir kode saya terlihat sedikit berantakan, tapi jika Anda melihat hal itu lebih hati-hati, Anda akan melihat bahwa saya mengikuti sintaks yang sangat ketat. Titik pertama sintaks ini adalah agar properti berdasarkan abjad. Ini sangat membantu menemukan properti ketika Anda ingin mengedit kemudian. Berikut adalah fakta bahwa aku membuat saya styling pada satu satu baris jika saya tidak menggunakan lebih dari tiga properti untuk elemen dan bahwa itu bukanlah Style standar dinyatakan seperti untuk p tag. Sementara dapat dikatakan Apakah itu dapat dibaca atau tidak, ini secara drastis mengurangi ukuran file. Menurut pendapat saya, hal ini tidak sulit untuk membaca meskipun Deklarasi terus satu satu baris. Bahkan membuat CSS lebih ringkas dan lebih mudah untuk dijelajahi.

Hal yang paling penting dengan gaya coding Anda adalah konsistensi. Jika Anda tidak ingin menggunakan Deklarasi satu baris, hanya tidak. Anda perlu untuk merasa nyaman dengan cara Anda kode. Saya tidak mengatakan cara saya adalah yang terbaik; Saya hanya suka seperti itu. Saya mendorong Anda namun untuk menemukan gaya Anda sendiri ke kode lebih cepat!

Menyiapkan stylesheet utama kami

Ketika kami selesai dengan reset, saya mengatakan Anda tidak dapat memasukkannya ke dalam file HTML secara langsung menggunakan sebuah link tag karena kami akan menyebutnya dari stylesheet utama kami. Anda dapat dengan jelas memasukkan semua file CSS Anda secara langsung dalam kode HTML, tetapi saya memutuskan untuk tidak, karena itu membuat bagian kepala lebih rapi.

Kita harus membuat stylesheet master kami. Saya biasanya memanggil style.css tersebut, tetapi Anda dapat menyebutnya main.css, master.css, screen.css atau apa pun. Dalam stylesheet ini, kita akan perlu memasukkan pertama reset kami, maka kami tipografi stylesheet. Untuk melakukannya, saya menggunakan aturan impor. Baris pertama Anda dalam style.css file akan terlihat seperti ini:

Dengan beberapa baris tersebut, kami menyertakan dua stylesheet kami di file style.css, dan kami hanya perlu memanggil satu file di bagian kepala kami.

Jika kita melihat pada halaman web kami sekarang, ini adalah apa yang kita akan melihat:

Saya harus setuju dengan Anda jika Anda akan mengatakan bahwa itu tidak terlihat mengagumkan untuk saat ini, tapi Anda masih dapat melihat beberapa rincian yang tampak persis seperti yang kita ingin mereka seperti meta paragraf atau bahkan logo. Oke, sekarang setelah master stylesheet disiapkan, kita bisa mulai menata halaman secara nyata!

Tubuh

Kita hanya perlu untuk mengatur beberapa gaya dasar untuk tag badan. Ini termasuk centering desain menggunakan margin: auto, pengaturan warna latar belakang, dan menetapkan lebar sampai 100%.

Status Bar

Seperti biasa, kita akan mulai dari atas dan mendesain jalan ke bawah ke footer. Saya suka coding desain saya dibagi dalam blok. Saya mulai dengan header misalnya, kemudian istirahat, desain konten dan sebagainya. Ini membantu memotivasi saya. Ini juga melibatkan benar-benar menyelesaikan area sebelum memulai lain.

Jadi, sebelum kami memulai pengkodean CSS sebenarnya dari bilah status, mari luangkan waktu dan lihat gambar apa yang kita butuhkan untuk itu. Yang pertama adalah gambar latar belakang, yang merupakan gradien sederhana yang akan diulang pada sumbu x. Yang kedua adalah latar untuk bilah tindakan: persegi panjang bulat. Kami jelas telah menggunakan properti border-radius di sini, tetapi saya memutuskan untuk menggunakan gambar untuk membuatnya sempurna piksel melalui semua browser. Gambar terakhir yang kita butuhkan untuk status bar kami adalah latar belakang untuk kotak pencarian.

Mari mulai dengan gambar latar belakang. Seperti yang sudah saya katakan, kami akan mengulang gambar ini pada sumbu x, jadi kami hanya membutuhkan gambar dengan lebar 1 piksel. Ini akan secara drastis mengurangi ukurannya. Jadi mulailah dengan meraih Marquee Tool Kolom Tunggal di Photoshop, pergi ke grup layer Status Bar / Box, sembunyikan layer 'Border', dan gabungkan layer 'Background' dan 'Shadow' bersama-sama. Setelah ini selesai, pilih sepotong lapisan yang baru-baru ini dibuat ini dengan alat pilihan Anda, salin, dan tempelkan di dokumen baru. Dokumen ini harus 1 * 50 piksel. Karena beberapa quirks model kotak, kami perlu mengurangi ketinggian ini menjadi 40 piksel. Potong saja 10 piksel teratas dan simpan untuk Web * Perangkat (Alt Shift Ctrl S) di PNG 24, dan beri status-bar-bg.png. Simpan Untuk Web * Perangkat menawarkan alat kompresi hebat untuk membuat ukuran file sekecil mungkin. Ini sangat penting ketika bekerja dengan web, dan itulah mengapa Anda harus selalu menggunakan alat itu.

Sekarang, tindakan bar latar belakang; buka grup lapisan "Tindakan Bar", dan pilih lapisan yang disebut "Bentuk". Pilih seluruh dokumen (Ctrl + A), Salin lapisan, dan paste di dokumen baru. Anda perlu meraster ulang bentuk vektor untuk menyalinnya dengan benar. Jangan lupa untuk mengatur atas lapisan opacity 55% lagi. Simpan ini untuk Web & perangkat lagi, dan menyebutnya tindakan-bar-bg.png.

Langkah terakhir untuk mengubah desain menjadi gambar adalah Bidang Pencarian. Cukup buka grup layer 'Search Field', sembunyikan layer 'Search', dan gabungkan kaca pembesar dan bentuknya bersama. Sekali lagi, pilih seluruh dokumen dengan Ctrl + A, dan menyalinnya ke dokumen baru. Simpan sebagai search-field.png.

Oke, sekarang bahwa kita selesai dengan gambar, kita dapat mulai pengkodean. Hal pertama yang ingin kami lakukan adalah menyiapkan wadah. Mengatur lebar dan tinggi, serta gambar latar belakang dan perbatasan.

Gaya alur untuk perbatasan memberi kita ini terlihat bagus yang kita sedang berjuang untuk mendapatkan di Photoshop. Kami telah menetapkan lebar 40 piksel meskipun latar belakang kami adalah 50 piksel karena model kotak.

Kemudian kami ingin memastikan bahwa isi dari bar ini berpusat. Masalahnya di sini adalah bahwa kita ingin latar belakang untuk mengambil 100% dari lebar sementara konten harus dipusatkan. Ini sebabnya kami menggunakan pembungkus div yang berisi cukup banyak semuanya kami taruh di bar status kami. Kami harus menerapkan lebar 800px untuk itu serta beberapa margin.

Untuk menempatkan dua bagian ini bar status, kiri dan kanan, dengan benar, kami menetapkan sifat lebar dan float.

Sekarang kita perlu menata status-bar-perintah untuk membuat bar tindakan mengambang di tengah-tengah bilah status. Kami juga menempatkan gambar latar belakang yang tepat ke bilah status. Paddings dan margin yang jelas juga digunakan untuk membuat benda terlihat dengan cara mereka seharusnya. Pertahankan model kotak dalam pikiran saat mengatur properti tersebut! Itulah alasan mengapa kami menetapkan tinggi bilah tindakan menjadi 14 piksel bukan 30 piksel; kami mendapat 8px padding.

Kami menambahkan "|" s untuk memisahkan link dalam tindakan bar. Saya memilih untuk melakukannya karena lebih semantik benar. Memang, pipa telah benar-benar tidak ada hubungannya dengan konten kami, sehingga menempatkan mereka dalam HTML tidak benar-benar akan benar. Perhatikan pemilih terakhir yang cukup kompleks yang memilih tautan terakhir dan menambahkan sebuah pipa setelah itu serta sebelum itu.

Titik terakhir akan styling kolom pencarian dan menambahkan gambar latar belakang untuk itu. Kita perlu menyetel ulang beberapa gaya default browser yang ditambahkan ke input, dan kita juga perlu untuk menyembunyikan tombol kirim. Ini mungkin bukan hal terbaik untuk dilakukan ketika kita berbicara tentang aksesibilitas, tapi tetap saja, saya memilih untuk membuat desain sebelum mengakses yang satu ini.

Inilah yang seharusnya kita miliki sekarang:

Itu tampak sangat mirip dengan PSD kami, bukan? Yah itulah yang kami inginkan! Sekarang mari kita lanjutkan dengan header.

The Header

Header ini cukup mendasar sehingga benar-benar akan cukup mudah untuk kode.

Hal pertama yang perlu kita lakukan adalah mempersiapkan gambar kita. Hanya menavigasi ke "Header" lapisan grup, dan menggabungkan lapisan "Gambar" dan "Bentuk" lapisan bersama-sama. Sekarang pilih dokumen dengan Ctrl + A, dan akhirnya Salin dan paste di dokumen baru. File harus 1600 * 250px.

Kami punya masalah sekarang meskipun. Kami tidak ingin gambar header untuk mengulang sendiri atas header jika resolusi layar pembaca lebih luas daripada 1600px. Oleh karena itu kita perlu untuk memudar keluar tepi dengan menambahkan lapisan masker, dan membuat kiri dan kanan tepi memudar untuk transparansi. Namun, transparansi pada gambar besar tersebut dapat sangat panjang untuk beban, jadi aku hanya mengisi latar belakang dengan #6eb9cc.

Gambar ini sangat besar, jadi kita perlu memadatkannya agar lebih cepat dimuat. Saya telah memilih untuk menyimpannya di PNG 8 dengan hanya 256 warna. Ini akan mengurangi ukuran dengan hampir 80% dibandingkan dengan PNG 24, yang sangat besar!  Panggil file ini header-image.png.

Oke, untuk sekarang kode. Kami ingin gambar header untuk berpusat di "header" div. Tapi untuk membiarkan mulai menampilkan desain kami dengan benar, kita perlu menerapkan warna latar belakang serta sehingga hal ini dapat memudar dengan baik. Kami juga mengatur perbatasan. Daripada menggunakan alur, saya menggunakan gaya ridge, yang justru sebaliknya, karena menempatkan warna mulai di bagian atas dan bukan di bawah, yang adalah apa yang kita inginkan dalam kasus ini. Saya hanya menerapkan styling beberapa logo juga untuk menempatkannya dengan benar.

Itulah sebenarnya yang harus kita lakukan dengan header kami. Kita sekarang dapat memeriksa hasil dalam browser:

Kotak Konten

Kita harus istirahat sedikit aturan semantik kami di sini. Memang, untuk memberikan bayangan atas dan bawah div konten, kita perlu menciptakan ke kosong divs di markup kami: satu dengan ID dari "konten-atas-bayangan" dan yang lain dengan ID dari "konten-bawah-bayangan". Mereka div pertama harus ditempatkan antara div konten header div dan yang lain harus ditempatkan antara konten dan footer. Aku tahu kita bisa menggunakan CSS 3 beberapa latar belakang untuk memecahkan masalah ini, tapi masalahnya adalah bahwa beberapa latar belakang tidak belum didukung oleh banyak browser, jadi kita akan hanya menempel dengan teknik ini untuk saat ini.

Sebelum kami kode kita perlu mengambil keluar gambar. Hanya pergi ke "Konten" / "Box" lapisan kelompok, dan menggabungkan bentuk latar belakang dengan lapisan dua bayangan. Kemudian gunakan satu kolom Marquee Tool dan pilih sepotong 1px latar belakang. Salin dan paste di dokumen baru. Sekarang menggunakan alat tanaman dan tanaman 20px atas gambar. Simpan ini untuk Web & perangkat sebagai PNG 24, dan menyebutnya konten-atas-shadow.png. Kemudian mengedit-> mengubah-> Putar 180, dan menyimpannya lagi, kali ini sebagai konten-bawah-shadow.png.

Untuk divcontent, kami hanya menambahkan beberapa tata letak kotak dasar seperti padding dan lebar, tetapi bagian yang menarik di sini adalah dua wadah 'content-shadow'. Kami jelas menetapkan tinggi dan lebar, dan gambar latar belakang, yang diulang pada sumbu-x. Hal ini menghasilkan ilusi bayangan. Saya juga hanya menerapkan yang jelas: keduanya; untuk konten-bawah-bayangan, karena aku tahu modul saya akan mengapung dan bahwa itu tidak akan bekerja sebaliknya.

Hanya melihat bahwa kami menetapkan posisi: relatif; div. konten Ini akan berguna nantinya ketika kami akan menempatkan kami tab menu navigasi.

Baik, sekarang bahwa kita selesai dengan menyelesaikan kotak ini, kita dapat mulai styling konten!

Wrapper Halaman

Daripada memulai dengan styling menu, kita akan pastikan wrapper halaman kami ditampilkan dengan benar pertama.

Untuk mulai dengan, kita akan menambahkan beberapa kotak dasar styling untuk pembungkus halaman. Kita mendefinisikan lebar, tinggi, padding dan margin seperti yang kami memilih untuk melakukan dalam PSD kami, sambil menjaga W3C kotak model dalam pikiran (ya, itu adalah masih menghantui kita!), dan kami menambahkan latar belakang warna putih dan perbatasan. Karena kita akan menggunakan properti mengambang untuk menampilkan tab menu navigasi, kita perlu jelas: keduanya; di sini, dan karena kita menggunakan ketinggian memperbaiki, kami juga ingin menyembunyikan setiap meluap agar tidak melanggar tata letak kami. Overflow seharusnya tidak terjadi, tetapi kita tidak pernah tahu.

Kita sekarang ingin desain kotak slideshow kami. Ini adalah benar-benar dasar styling. Berkat model kotak, kita dapat menggunakan properti perbatasan untuk menampilkan pemisah vertikal yang kita inginkan antara tampilan slide dan pesan.

Sekarang kami ingin memastikan bahwa kami hanya menampilkan satu thumbnail ketika halaman load, karena jalan itu kode saat menampilkan semua jempol tiga pada saat yang sama, yang benar-benar pecah desain kami. Kita jelas tidak membiarkan JavaScript kami memperbaikinya bagi kita, tetapi hal ini hanya tidak dapat diterima untuk menjadikannya mustahil bagi orang-orang tanpa JS yang diaktifkan untuk melihat halaman kami. Setelah menambahkan beberapa styling untuk masing-masing thumbnail, kami karena itu menyembunyikan seluruh thumbnail, dan kemudian hanya menampilkan satu dengan kelas "default-slide".

Setelah kami melakukan hal ini, langkah terakhir adalah untuk gaya perintah slideshow. Kita perlu untuk memotong beberapa gambar dari PSD. Anda mulai mendapatkan digunakan untuk proses, jadi hanya menavigasi "Konten" / "Wrapper" / "Slideshow" / "Perintah" lapisan kelompok, dan rasterize semua lapisan. Kemudian salin panah kiri, panah kanan dan latar belakang untuk dokumen baru, dan menyimpannya sebagai perintah-sebelumnya-slide.png, perintah-next-slide.png, dan perintah-bg.png masing-masing.

Kita kemudian perlu memasukkan mereka ke dalam template kami. Aku pertama mendefinisikan tata letak kotak, dengan gambar latar belakang yang, lebar dan tinggi dan juga posisi: relatif; untuk dapat pusat di bawah thumbnail.

Kami kemudian dapat menggunakan gambar dasar penggantian teknik untuk membuat kami sebelumnya dan berikutnya perintah-perintah yang terlihat bagus.

Akhirnya, margin-atas pada judul diperlukan untuk pusat vertikal.

Oke besar, slideshow kami sekarang ditampilkan dengan benar. Kami hanya ingin gaya pesan dan kami akan dilakukan dengan pembungkus. Styling akan cukup mudah karena sebagian besar dibuat dalam typography.css file.

Kami adalah pertama mendirikan beberapa kotak styling untuk membuat pesan memiliki margin kiri 15px, dan kami juga menerapkan margin-bawah judul untuk membuat hal-hal yang bernapas.

Bagian tersulit dari ini akan styling informasi kontak. Sebelum kita mulai, pastikan untuk menyimpan telepon dan ikon E-mail dalam dua berkas terpisah dan memanggil mereka icon.png telepon dan alamat-icon.png masing-masing. Saya merasa bahwa Anda mungkin tahu bagaimana untuk melakukannya sekarang jadi saya rasa perlu menjelaskan sekali lagi.

Kami akan menerapkan gambar mereka dengan gambar latar belakang, tetapi mampu melakukannya, kita perlu menggunakan rentang Tag sebagai blok, maka display: block; pada tag span. Sisanya sederhana, kami menambahkan gambar latar belakang setiap span, membuat satu mengapung yang tersisa, dan menggunakan paddings untuk indent teks dari ikon.

Jika kita melihat desain sekarang ini adalah apa yang kita akan melihat:

Masih tidak terlihat besar hanya belum, tapi kami benar-benar mulai mendapatkan suatu tempat. Langkah berikutnya akan untuk membuatnya terlihat lebih baik!

Menu navigasi

Ini akan menjadi kacang yang sulit untuk memecahkan. Ini adalah menu yang cukup kompleks kita menggunakan di sini, dan fakta bahwa itu berbaris ke kanan tidak membuat segalanya lebih mudah. Namun, fakta bahwa kami sudah merancang menu di Photoshop akan jelas membantu kita sedikit.

Sprite

Kita akan menggunakan sesuatu yang disebut CSS Sprite. Daripada menggunakan gambar untuk setiap link, kami hanya akan menggabungkan mereka semua ke dalam satu gambar besar, disebut sprite. Teknik ini memiliki banyak keuntungan. Alih-alih memuat gambar sekitar dua puluh, termasuk hover dan Serikat aktif, kita hanya perlu memuat satu. Ini dapat secara drastis mengurangi waktu loading dan juga baik untuk server Anda.

Jadi, bagaimana kita melakukan sebuah sprite? Mulailah dengan membuat dokumen baru yang 425 * 115px. Kemudian drag dan drop menu tab dari kami PSD file ini. Menghapus semua spasi yang tidak perlu dengan Ctrl + T dan akhirnya menghapus hover dan negara aktif yang kita menempatkan ke rumah dan portofolio untuk membuat desain kami terlihat nyata. Baris ini hanya berisi tombol default kita: Kapan mereka tidak melayang tidak aktif. Ini adalah apa yang akan terlihat seperti:

Kemudian menduplikasi lapisan kelompok ini dua kali, dan menempatkan mereka dengan 5px ruang. Baris kedua akan menjadi negara kita hovered, sehingga warna font harus #6eb9cc. Yang ketiga adalah status aktif, jadi font harus tebal. Ini adalah apa yang tampak seperti sekali sprite kami selesai:

Anda jelas harus membuat latar belakang Anda transparan. Aku hanya menambahkan latar belakang putih untuk membuatnya lebih mudah dibaca sebagai screenshot.

Setelah ini selesai, Simpan untuk Web dan perangkat di PNG 24, dan menyebutnya tab-sprite.png.

Hal yang penting untuk diingat ketika merancang sprite untuk menjaga lebar setiap elemen konstan, dan untuk menyelaraskan mereka baik untuk pastikan untuk menggunakan latar belakang-posisi kemudian tanpa masalah.

Oke, kita sekarang memiliki keluar sprite. Anda mungkin bertanya-tanya bagaimana kita akan menerapkan ke daftar unordered kami yang benar-benar tidak terlihat seperti horisontal tab menu navigasi. Jawabannya adalah untuk datang.

Sebelum kita benar-benar mulai menggunakan gambar latar belakang kami, kami hanya ingin menempatkan menu kanan. Ini adalah dimana posisi relatif pada konten datang berguna. Dengan menggunakan posisi mutlak pada tab, kita sekarang dapat menempatkan itu mengacu pada para orangtua dan tidak jendela. Ini berarti bahwa (0, 0) koordinat tidak akan kiri jendela, tetapi "konten" atas! Ini memberikan banyak fleksibilitas dalam pengkodean kami.

Setelah menempatkan daftar, kita sekarang perlu untuk gaya poin-poin. Oleh mengambang mereka ke kiri, kami membuat item yang ditampilkan pada satu baris tunggal. Setelah menambahkan properti lebar dan tinggi juga, kami menetapkan gambar latar belakang ke file sprite kami. Ini berarti bahwa setiap elemen dari daftar menu yang tidak diurutkan akan berbagi latar belakang yang sama, dan ini adalah kehalusan CSS Sprite.

Kami juga menggunakan pengganti gambar untuk menghapus link teks mentah dan membuat link diklik melalui tab seluruh.

Benar, langkah berikutnya akan untuk gaya setiap tab. Kita perlu menerapkan posisi latar belakang biasa, maka hover latar belakang posisi dan posisi akhirnya aktif dan saat ini. Ini adalah misalnya apa yang tampak seperti untuk tab "sebelumnya":

Hanya jangan khawatir terlalu banyak tentang lebar kita menetapkan untuk itu, itu hanya karena tab "sebelumnya" lebih luas daripada standar tab. Kita tidak perlu repot-repot dengan ini dengan tab lain.
Hanya melakukannya untuk setiap tab, dan jangan lupa untuk mengganti nilai-nilai piksel dengan orang-orang benar. Anda dapat menggunakan alat Photoshop penguasa (I) untuk membantu Anda. Ini adalah kode lengkap apa yang tampak seperti:

Nah itu semua untuk tab! Ini adalah apa yang tampak seperti sekarang template kami:

Modul Blog

Kita akan mulai dengan dasar-dasar seperti biasa. Beberapa styling tata letak jelas memberikan kita sesuatu seperti ini:

Setelah ini, kita akan hanya gaya header bar. Kita perlu membuat membuat gambar untuk digunakan sebagai latar belakang di sini. Hanya pergi ke grup tepat lapisan, menyembunyikan lapisan teks, dan menggabungkan ikon dan bentuk. Simpan ini sebagai blog-header-bar.png.

Kita dapat menambahkan gambar latar belakang ini setelah kami telah mengatur tinggi, lebar, padding dan margin:

Langkah berikutnya akan untuk gaya masing-masing entri. Karena sebagian besar pekerjaan dilakukan di typography.css, kita tidak perlu dilakukan sangat banyak di sini, hanya menambahkan beberapa margin dan paddings pada dasarnya.

Langkah terakhir adalah untuk gaya "Read More" link. Karena kami akan menggunakan tiga negara untuk tombol ini (biasa, hover dan aktif) kita akan menggunakan sebuah sprite di sini juga. Hanya drag kelompok kanan lapisan dalam dokumen baru, dan duplikat ini dua kali. Aku meninggalkan 10px antara masing-masing negara. Untuk hover negara, saya hanya mengubah warna teks untuk #6eb9cc, dan untuk negara aktif, saya hanya terbalik Overlay gradien maupun Stroke untuk membuat efek 3D ketika mengklik di atasnya. Seperti inilah sprite saya:

Saya disimpan sebagai Baca-lebih-button.png. Untuk menerapkan ini, kita pada dasarnya akan melakukan seperti yang kita lakukan untuk tab. Kita juga perlu untuk membuat float tombol yang tepat dan memiliki beberapa margin.

Kami adalah sekarang dilakukan kami modul blog! Mari kita melihat apa yang tampak seperti.

Modul Twitter

Ini adalah hampir sama sebagai modul blog, jadi aku hanya akan pergi melalui ini lebih cepat.

Saya kira tidak perlu untuk menjelaskan bagaimana yang harus Anda lakukan untuk mendapatkan latar belakang header bar. Hanya ingat untuk menyembunyikan teks sebelum penggabungan. Panggilan ini gambar kericau-header-bar.png.

Kami menambahkan beberapa margin dan lebar ke kotak, dan kemudian menambahkan baris header latar belakang seperti yang kita lakukan untuk blog.

Setelah itu, kami hanya gaya setiap menciak. Hanya melihat bahwa kami membuat mengapung gambar agar muncul di sebelah kiri dari nama. Margin dan paddings diatur menggunakan model kotak.

Alasan kami memposisikan h4 seperti yang kami lakukan adalah karena default line-height segudang Pro sedikit tidak konvensional. Jangan khawatir namun jika Anda tidak ingin memiliki kode Anda diisi dengan posisi: relatif, itu adalah hanya detail kecil kita memperbaiki di sini.

Untuk mendapatkan lebih banyak Tweets tombol, hanya mengganti teks dalam sprite Read More Anda dan menyimpannya lagi, kali ini sebagai get-lebih-tweets-button.png. Setelah itu, kami menggunakan persis teknik yang sama kita gunakan untuk tombol Read More.

Dengan menyelesaikan modul Twitter ini, kita juga menyelesaikan Style konten! Aku tahu itu benar-benar lama, tapi hanya melihat apa yang kami produksi. Saya percaya itu worth it!

Itu benar-benar mulai terlihat mengagumkan!

Footer

Footer kami terbuat dari dua bagian. Yang pertama adalah gambar, dan yang lain adalah bagian teks.

Untuk alasan yang sama kita harus mengedit gambar header sedikit, kita perlu membuat tepi gambar footer memudar untuk #6eb9cc juga. Hanya menyalin gambar pada dokumen baru, dan menggunakan alat gradien (G) untuk melakukannya. Simpan ini di PNG 8 dan menyebutnya gambar-footer.

Untuk menambahkan ini ke dokumen kami, kami akan menggunakan kode ini hampir persis sama seperti yang kita gunakan untuk header.

Akhirnya, untuk teks footer, kami menambahkan gambar konten-atas-shadow.png sudah dibuat sebagai gambar latar belakang untuk menciptakan efek bayangan. Kami juga jelas menetapkan tinggi, lebar dan padding beberapa.

Dilakukan dengan CSS

Dan itu; kita sekarang selesai dengan CSS! Itu cukup sulit bukan? Hal penting untuk diingat ketika coding tata letak yang akan melanjutkan secara logis, selalu mengingat model kotak. Setelah Anda tahu apa yang Anda lakukan dengan itu, Anda akan kode lebih efisien dan Anda tidak perlu berjuang yang banyak dengan lintas-browser bug. Ini adalah apa yang tampak seperti halaman kami di Firefox:

Saya dapat meyakinkan Anda bahwa Halaman ini tampak persis sama di IE 8, Safari 3 dan 4, Chrome 1 dan 2, Firefox 3 dan Opera 9.5! Namun jika kita sekarang melihat bagaimana tampilannya di IE 7, kita akan melihat beberapa cacat. Jika Anda tidak memiliki IE 7 pada komputer Anda, hanya menjalankan IE 8 dalam modus kompatibilitas dan Anda akan melihat halaman seperti Anda akan di IE 7.

Isu-isu tersebut adalah contohnya:

  • Status bar terlalu tipis
  • Tindakan bar tidak diposisikan dengan benar, dan kurangnya: sebelum membuat padding gila
  • Wrapper halaman tidak diposisikan dengan benar
  • Judul tayangan slide tidak diposisikan dengan benar.

Ini mungkin tampak seperti banyak, tetapi sebenarnya tidak. Mereka dapat dengan mudah diperbaiki dengan menggunakan baik! penting hack atau komentar bersyarat. Aku tidak suka CSS Hacks, jadi aku akan tetap dengan stylesheet bersyarat. Tetapi merasa bebas untuk menggunakan teknik apapun yang Anda inginkan.

Memperbaiki masalah IE

Saya mengatakan kami akan menggunakan komentar bersyarat. Apa yang mereka? Yah mereka adalah hanyalah sebuah cara untuk menargetkan Microsoft browser dan menggunakan tag tertentu atau kelompok tag yang kita hanya ditampilkan di IE. Browser yang lain hanya akan menafsirkan ini sebagai komentar dan karena itu tidak akan menampilkan tag. Dalam kasus kami, kami akan menempatkan sebuah link tag ke stylesheet eksternal dalam komentar ini.

Setelah stylesheet ini disertakan, kita bisa mulai memperbaiki beberapa masalah yang kita hadapi. Membuat stylesheet baru yang disebut ie7.css, dan menyimpannya dalam folder css kami.

Hal pertama yang perlu kita lakukan adalah untuk memperbaiki ketinggian status bar. Tidak terlalu rumit, hanya mengatur ketinggian yang baru, dan pastikan bahwa latar belakang melekat ke bawah karena tidak 50px tinggi tapi hanya 40.

Kita kemudian harus memperbaiki masalah yang kita alami karena fakta bahwa IE 7 tidak mendukung format pseudo: sebelum dan: setelah. Bukan menambahkan pipa dengan gambar latar belakang atau sesuatu ke link dalam tindakan bar, kami hanya ruang link sedikit lebih, dan pusat mereka. Kita juga harus memperbaiki kenyataan bahwa IE tidak memahami bagaimana benar mengapung item yang tidak terletak dalam wadah dalam kode sumber. Ini dapat dilakukan menggunakan posisi mutlak, dan memperbaiki margin-kiri.

Setelah ini, kita memiliki masalah dengan posisi halaman pembungkus. Tidak terlalu rumit untuk memecahkan sini, hanya menggunakan model kotak untuk keuntungan Anda. Kami juga menggunakan selektor ini untuk menghapus spasi berlebih di bagian bawah div. konten

IE tampaknya tidak menampilkan judul slide kami dengan benar, karena kami telah menetapkan posisi relatif untuk itu. Hanya mengubah ini untuk mutlak, dan reset sifat atas dan kiri.

Akhirnya, hal itu terjadi bahwa IE ganda padding antara judul entri dan konten dalam modul blog. Kita bisa memperbaiki ini dengan menetapkan setengah nilai untuk itu.

Oke, Anda sekarang dapat memeriksa desain kami di IE 7 dan melihat bahwa itu bekerja dengan baik juga!

Langkah enam-JavaScript

Ini tidak akan menjadi sangat rumit. Kami akan menggunakan jQuery, jQuery Cycle Plugin dan Cufón. Saya akan menjelaskan mengapa dan di mana Anda dapat men-download sebagai kita pergi.

Saya menggunakan JavaScript di sini mengikuti filosofi peningkatan progresif. Jelas, tampilan slide tidak bekerja sekarang jika kita tidak memiliki JavaScript diaktifkan, tapi itu bisa dengan mudah jika kita hanya ditambahkan beberapa PHP ke halaman dan mengubah link berikutnya dan sebelumnya. Namun, ini bukanlah tentang tutorial sehingga saya tidak akan menutupi itu. Hanya perlu diingat bahwa hanya akan memakan 5 baris kode PHP untuk membuatnya bekerja. Jadi itu adalah untuk slide yang semakin ditingkatkan. Kami juga merapikan font judul dengan kode JavaScript. Hal ini memungkinkan kita untuk menggunakan font apapun yang kita inginkan bahkan jika pembaca tidak memilikinya diinstal di komputer. Jika pembaca tidak memiliki JavaScript diaktifkan, satu-satunya hal yang akan terjadi adalah bahwa ia akan melihat font mundur.

jQuery

Kami tidak akan menggunakan seluruh kuasa jQuery dalam tutorial ini. Namun, itu membuat segalanya lebih mudah bagi kita, jadi kita akan memasukkannya ke proyek kami meskipun 19 kilobyte tambahan.

Anda bisa download minified dan YUI dikompresi versi jQuery selama di situs web resmi mereka (http://jquery.com/) hanya dengan mencentang kotak "Produksi" dan mengklik tombol "Download" besar. Hubungi jquery.js file ini dan menempatkannya dalam folder JS kami.

Untuk menggunakan kekuatan jQuery dalam template kami, kita jelas perlu menyebutnya. Anda harus menempatkan kode di bagian kepala.

Hanya itu; jQuery sekarang beban dengan halaman dan memungkinkan kita untuk menggunakan semua properti dan metode!

Cufón

Aku sedang berbicara tentang sebuah font smoothing kode JavaScript sebelum, tapi itu tidak benar-benar itu. Cufón Mari kita menggunakan font apapun yang kita inginkan dalam desain kami tanpa pembaca memiliki itu harus diinstal.

Aku tidak akan mencakup dasar-dasar menggunakan Cufón sejak Jeffrey cara sudah melakukan pekerjaan luar biasa ini di sini: http://net.tutsplus.com/videos/screencasts/the-easiest-way-to-use-any-font-you-wish/.

Hanya men-download Cufón dari situs ini: http://cufon.shoqolate.com/generate/, dan menggunakan online font converter untuk mengkonversi font segudang Pro untuk JS file. Jika Anda tidak yakin bagaimana untuk melakukannya, periksa Jeff tutorial!

Simpan Cufón file dalam JS folder dan menyebutnya cufon.js, dan font file myriadpro.font.js.

Setelah mereka berada di direktori yang benar, kita perlu untuk memanggil mereka dari file index.html kami. Menambahkan tag script di bagian head dari dokumen markup kami, dan menggunakan para src atribut untuk memanggil file. Jangan lupa bahwa script tag yang tidak otomatis menutup. Anda tidak dapat menggunakan sintaks<script></script> Melakukannya akan mengakibatkan validasi gagal. Anda harus menggunakan sintaks <script></script> meskipun tag kosong.

Jika Anda memuat ulang halaman, Anda akan melihat bahwa... tidak ada yang benar-benar terjadi. Hal ini karena kita perlu menelepon Cufón teks pengganti dan menentukan mana tag yang harus diurai.

Buka tag script baru, Namun alih-alih memanggil file JS eksternal, kita hanya akan menulis kode kita langsung dalam file HTML kami. Kita dapat melakukan ini karena kami menggunakan satu satu baris kode. Kode Anda harus lebih lama Namun, Anda harus menempatkan ini di file eksternal. Metode untuk memicu penggantian Cufon.replace() dan dibutuhkan tag yang harus diganti sebagai argumen. Karena kita sudah disebut jQuery, kita juga dapat menggunakan mesin CSS Selector untuk menangkap Tag tepat.

Anda dapat menempatkan dalam HTML kode akan terlihat seperti ini:

Kami hanya menargetkan tag judul, dan Cufón membuat keajaiban terjadi. Reload halaman dan Anda dapat melihat bagaimana Cufón lancar diganti semua tag kami h dengan gambar dibangun dengan cepat!

Apa yang terjadi jika pembaca tidak memiliki JavaScript diaktifkan? Nah font yang digunakan adalah yang ditentukan dalam keluar CSS! Jika pembaca memiliki segudang Pro, itu akan digunakan, meskipun itu tidak licin, dan jika tidak, salah satu font fallback kami digunakan. Ini adalah keindahan peningkatan progresif.

Slideshow

Langkah terakhir kami akan tentang membuat slideshow hidup. Untuk melakukannya, kita akan menggunakan sangat berguna jQuery plugin yang disebut jQuery Cycle Plugin. Anda bisa mendapatkannya di sini: http://malsup.com/jquery/cycle/lite/. Kami tidak akan menggunakan setiap transisi yang rumit, sehingga versi Lite akan bekerja dengan baik. Hal yang besar tentang hal itu adalah bahwa itu adalah hanya 3kb!

Pastikan Anda men-download versi kompresi YUI plugin, maka tempat itu dalam folder JS kami dan menyebutnya cycle.js. Kemudian kita jelas perlu untuk menyebutnya dari HTML kita. Tempatkan panggilan ke plugin Cycle di bawah panggilan ke jQuery untuk memastikan plugin akan ditambahkan ke perpustakaan!

Kami kemudian perlu mengaktifkan efek menggunakan beberapa kode JavaScript. Di sinilah kita dapat menentukan beberapa opsi seperti perintah Sebelumnya dan Berikutnya, penundaan dll. Kami akan menempatkan kode ini di file baru bernama slideshow.js di folder JS jelas, yang kemudian akan kami panggil dari HTML kami.

Sebelum memulai pengkodean, kita perlu memutuskan apa yang ingin kita lakukan pada slide kita. Perilaku default adalah mengambil setiap elemen dari wadah yang ditentukan, lalu membuatnya bergeser, menyembunyikan yang lain. Ini bagus karena kami menempatkan semua gambar rangkai slide kami dalam sebuah wadah dengan sebuah id “Slides”. Bagaimana kita menginginkannya berperilaku? Nah, setiap 5 detik, itu harus berubah slide, tetapi juga harus berubah slide jika kita klik pada tombol Previous atau Next. Kami juga ingin tampilan slide berhenti jika kami mengarahkan mouse ke atasnya. Ini bagus karena memberi orang waktu untuk mengklik jika mereka tertarik pada slide saat ini.

Untungnya, semua ini sangat mudah dilakukan menggunakan plugin Cycle. Setelah DOM siap, jQuery mengambil penampung slide, dan memulai tayangan slide menggunakan metode siklus (). Kemudian dengan menggunakan objek anonim yang kita berikan sebagai argumen, kita dapat mengatur perilaku ke yang kita inginkan.

Seperti inilah tampilan kode Anda:

Untuk apa sifat-sifat itu? Baik sebelumnya dan selanjutnya jelas ID dari perintah Sebelumnya dan Berikutnya, penundaan adalah waktu antara setiap slide dalam milidetik, dan jika jeda diatur ke 1, maka slide akan berhenti di hover.

Jika kami memuat ulang halaman, kami dapat melihat gambar bergeser dengan baik, dan perintah sebelumnya dan selanjutnya berfungsi dengan baik! Namun, judulnya tidak bisa ditawar sama. Kami dapat memecahkan masalah kecil ini dengan memanggil fungsi sebelum meluncur masing-masing. Fungsi ini hanya akan mendapatkan atribut alt dan atribut href slide berikutnya untuk dapat mengganti h4 dan tautan dengan benar. Inilah yang tampak seperti fungsi:

Namun, ini tidak akan berfungsi kecuali kami menetapkan bahwa fungsi ini harus dipanggil sebelum setiap perubahan slide.

Untuk melakukannya, kita hanya perlu menentukan properti 'sebelum' dalam objek konfigurasi anonim kami. Properti ini harus disetel ke nama fungsi. Anda tidak boleh menggunakan tanda kutip di sekitar nama fungsi.

Seperti inilah kode kerja lengkapnya:

Hebat, jika sekarang kami memuat ulang halaman, kami akan melihat tayangan slide kami berfungsi seperti yang kami inginkan, dan ini hanya dengan beberapa baris kode! Itulah kekuatan jQuery dan pluginnya.

Langkah Tujuh - Pikiran Akhir

Kami sekarang telah mengkodekan seluruh tata letak situs web kami menggunakan xHTML 1.0, CSS 2.1, dan JavaScript berdasarkan pada template yang kami rancang di Bagian I. Anda dapat memeriksa setiap file dari proyek dan melihat bahwa mereka 100% valid! Hal ini penting untuk diingat karena dapat sangat meningkatkan aksesibilitas dan kualitas keseluruhan pengkodean Anda.

Saya sangat berharap Anda telah menikmati rangkaian tutorial ini, bahwa Anda telah mempelajari beberapa teknik baru, dan bahwa Anda sekarang dapat membuat template web yang luar biasa sendiri! Saya akan senang melihat apa yang berhasil Anda lakukan di komentar.

  • Ikuti kami di Twitter, atau berlangganan RSS Feed NETTUTS untuk lebih banyak tuts pengembangan web harian dan artikel.


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.