Tutorial ini untuk membantu siswa mendapatkan kerja yang nyaman dengan kerangka CSS Hal ini tidak akan membangun sebuah situs manis, atau mengambil keuntungan dari setiap fitur 960.gs,. Tetapi harus memberikan informasi tentang beberapa tentang cara untuk mulai membangun halaman dengan kerangka kerja. Check out Selain kedua untuk tutorial ini menggunakan kerangka 960 untuk membangun kerangka kerja semantik CSS sendiri Anda .
- Lihat contoh kerja dari tutorial ini
- Download kode untuk tutorial ini
Persiapan
- Download dan unzip kerangka dari website http://960.gs.
- Dalam folder kode duplikat file demo.html.
- Buka file dalam editor teks pilihan Anda.
Layout memutuskan dan Menetapkan Kotak Dasar
Untuk tutorial ini akan dinbahas tentang bagaimana membangun sebuah halaman blog dasar. Dengan memiliki header, bagian atas artikel, sidebar menunjukkan artikel lain dan footer dengan beberapa informasi tentang situs tersebut.
Kotak bijaksana, aku akan pergi dengan layout 12 kolom dengan 700px bagian utama dan sidebar 200px. Untuk mencapai hal ini saya akan menggunakan grid_9 dan grid_3 bersama-sama.Hasil akhir terlihat seperti ini :
dengan kode berikut :
<>
< href="http://960.gs/">960 Grid System< /a >
< class="container_12">
<>
12 Column Grid
< /h2>
< class="grid_12">
<>
940px
< /p>
< /div>
< !—end .grid_12—>
< class="clear">
< class="grid_9">
<>
700px
< /p>
< /div>
< class="grid_3">
<>
220px
< /p>
< /div>
< class="grid_12">
<>
940px
< /p>
< /div>
< /div>
< !—end .container_12—>
Membuat Perubahan Dasar Grid Default
- Kita memiliki grid layout, lalu tambahkan beberapa id markup untuk stylesheet sendiri. Secara khusus, tambahkan sebuah header, maincontent, samping, dan footer id ke divs tepat
- Hapus CSS internal yang muncul di bagian kepala halaman demo dan tag h1 di bagian atas halaman.
- Sekarang kita memiliki cukup mendasar terlihat halaman seperti pada gambar di bawah :
- Akhirnya saya akan menambahkan beberapa teks dummy, dan menambahkan beberapa markup untuk membuat HTML lebih seperti halaman blog saya cari.
Berikut adalah situs apa yang harus seperti sekarang :
Dan markup :
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
< xmlns="http://www.w3.org/1999/xhtml" lang="en" lang="en">
<>
< equiv="content-type" content="text/html; charset=utf-8">
<>My Blog - My Name
< rel="stylesheet" type="text/css" media="all" href="css/reset.css">
< rel="stylesheet" type="text/css" media="all" href="css/text.css">
< rel="stylesheet" type="text/css" media="all" href="css/960.css">
< /head>
<>
< class="container_12">
< id="header" class="grid_12">
<>
My Blog
< /h2>
<>
Description of my blog
< /p>
< /div>
< !—end .grid_12—>
< class="clear">
< id="maincontent" class="grid_9">
<>Title of the blog post
<><>Published on Jan. 01, 2009 by Zac Gordon
<> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dui risus, interdum sit amet, adipiscing at, venenatis quis, quam. Morbi velit tortor, fermentum ac, sagittis quis, volutpat sed, magna. Curabitur eu tellus eu magna laoreet vestibulum. Fusce accumsan mollis ipsum. Morbi tempor vehicula est. Duis pharetra velit. Vestibulum blandit ultricies nibh. Nulla vehicula mauris sed sem. Aliquam mauris metus, commodo at, elementum quis, porta a, nisl. Nulla elementum fermentum massa.
<>Cras posuere, est quis adipiscing suscipit, dolor felis pulvinar lacus, ut placerat orci metus tincidunt orci. Curabitur elementum purus vitae diam. Morbi ut dui cursus augue scelerisque molestie. Suspendisse ut velit et massa interdum dictum. Praesent quam neque, fringilla eget, blandit id, sagittis id, justo. Proin pulvinar placerat leo. Etiam at mauris id justo ultricies scelerisque. Donec mattis dui ut tellus. Vivamus interdum lorem ac ante. In nisi tellus, tristique vitae, rutrum at, elementum adipiscing, risus. Integer ac est ultricies nibh pretium scelerisque. Aliquam luctus eros non eros. Vivamus mi orci, suscipit eget, imperdiet vitae, consectetur fermentum, erat.
<>Fusce dignissim sapien vitae turpis. Quisque consequat convallis sapien. Curabitur est sapien, ultrices nec, commodo a, hendrerit eu, lectus. Curabitur eu quam. Ut non risus. Sed eu tortor. Proin nisi. Aliquam congue adipiscing orci. Fusce imperdiet ullamcorper metus. Ut erat ligula, posuere a, fermentum vel, aliquet eu, lorem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque tempor nulla eu lorem. Suspendisse bibendum molestie nunc.
< /div>
< id="aside" class="grid_3">
<>Navigation
<>
<>< href="#">Home
<>< href="#">About Me
<>< href="#">Articles
<>< href="#">Contact
< /ul>
<>More Articles:
<>
<>< href="#">Article 1
<>< href="#">Article 2
<>< href="#">Article 3
<>< href="#">Article 4
< /ul>
< /div>
< id="footer" class="grid_12">
<>
Footer information like email and licensing for site
< /p>
< /div>
< /div>
< !—end .container_12—>
< /body>
< /html>
Menambahkan Beberapa Gaya Dasar ke Halaman ini
- Sekarang saya akan menciptakan sebuah style sheet baru, yang disebut blogstyle.css, dan link ke bawah dari link ke style sheet 960.
- Dalam stylesheet saya akan menambahkan sedikit warna dan beberapa gaya sederhana lain untuk markup saya. Saya tidak akan mengacaukan posisi sekalipun.
Hasil akhir akan terlihat seperti ini :
HTML di bagian kepala halaman tersebut akan terlihat seperti ini :
<>
< equiv="content-type" content="text/html; charset=utf-8">
<>My Blog - My Name
< rel="stylesheet" type="text/css" media="all" href="css/reset.css">
< rel="stylesheet" type="text/css" media="all" href="css/text.css">
< rel="stylesheet" type="text/css" media="all" href="css/960.css">
< rel="stylesheet" type="text/css" media="all" href="css/blogstyles.css">
< /head>
/* My additional styles to add to the 960.gs styles */
body {color:#333333}
#header {background-color: #D7EDEE; border-bottom: 3px #115B77 solid;}
#footer {background-color: #D7EDEE; border-top: 3px #115B77 solid; color: #666666;}
a:link {color: #115B77; text-decoration: none;}
a:visited {color:#332745; text-decoration: none;}
a:hover {text-decoration: underline}
strong {color:#222222}
Mempersiapkan Markup kami untuk Tambah CSS Positioning Kami Sendiri
Mengubah posisi dengan CSS bisa menjadi sedikit rumit dengan kerangka 960 Jika Anda menambahkan margin atau bantalan untuk kerangka kerja unsur-unsur yang memiliki gaya untuk memiliki lebar tertentu, margin,. Dan bantalan Anda dapat mengacaukan aliran seluruh grid.
Apa yang akan kita lakukan untuk mengatasi masalah ini adalah dengan menambahkan ekstra div divs bagian dalam dengan kelas 960 diterapkan pada itu. Kemudian kita dapat menerapkan margin dan bantalan ke div nested tanpa mengacaukan sistem 960.
Hal ini menambah lebih banyak markup halaman, tapi kami tahu akan ke proyek ini bahwa kerangka CSS memiliki kecenderungan untuk menambahkan ekstra, markup semantik non-halaman kami, jadi kami akan terus bergerak.
Berikut ini adalah contoh dari apa yang divisi header tampak seperti sebelumnya :
< id="header" class="grid_12">
<>
My Blog
< /h2>
<>
Description of my blog
< /p>
< /div>
Dan setelah kami menambahkan nested div. Perhatikan bahwa saya juga pindah id ke nested div.
< class="grid_12">
< id="header">
<>
My Blog
< /h2>
<>
Description of my blog
< /p>
< /div>
< /div>
Pergi dan membuat perubahan yang sama ke seluruh situs sampai Anda memiliki sesuatu yang tampak seperti kode di bawah ini :
< class="container_12">
< class="grid_12">
< id="header">
<>
My Blog
< /h2>
<>
Description of my blog
< /p>
< /div>
< /div>
< class="clear">
< class="grid_9">
< id="maincontent">
<>Title of the blog post
<><>Published on Jan. 01, 2009 by Zac Gordon
<> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dui risus, interdum sit amet, adipiscing at, venenatis quis, quam. Morbi velit tortor, fermentum ac, sagittis quis, volutpat sed, magna. Curabitur eu tellus eu magna laoreet vestibulum. Fusce accumsan mollis ipsum. Morbi tempor vehicula est. Duis pharetra velit. Vestibulum blandit ultricies nibh. Nulla vehicula mauris sed sem. Aliquam mauris metus, commodo at, elementum quis, porta a, nisl. Nulla elementum fermentum massa.
<>Cras posuere, est quis adipiscing suscipit, dolor felis pulvinar lacus, ut placerat orci metus tincidunt orci. Curabitur elementum purus vitae diam. Morbi ut dui cursus augue scelerisque molestie. Suspendisse ut velit et massa interdum dictum. Praesent quam neque, fringilla eget, blandit id, sagittis id, justo. Proin pulvinar placerat leo. Etiam at mauris id justo ultricies scelerisque. Donec mattis dui ut tellus. Vivamus interdum lorem ac ante. In nisi tellus, tristique vitae, rutrum at, elementum adipiscing, risus. Integer ac est ultricies nibh pretium scelerisque. Aliquam luctus eros non eros. Vivamus mi orci, suscipit eget, imperdiet vitae, consectetur fermentum, erat.
<>Fusce dignissim sapien vitae turpis. Quisque consequat convallis sapien. Curabitur est sapien, ultrices nec, commodo a, hendrerit eu, lectus. Curabitur eu quam. Ut non risus. Sed eu tortor. Proin nisi. Aliquam congue adipiscing orci. Fusce imperdiet ullamcorper metus. Ut erat ligula, posuere a, fermentum vel, aliquet eu, lorem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque tempor nulla eu lorem. Suspendisse bibendum molestie nunc.
< /div>
< /div>
< class="grid_3 ">
< id="aside">
<>Navigation
<>
<>< href="#">Home
<>< href="#">About Me
<>< href="#">Articles
<>< href="#">Contact
< /ul>
<>More Articles:
<>
<>< href="#">Article 1
<>< href="#">Article 2
<>< href="#">Article 3
<>< href="#">Article 4
< /ul>
< /div>
< /div>
< class="grid_12">
< id="footer">
<>
Footer information like email and licensing for site
< /p>
< /div>
< /div>
< /div>
Menambahkan Posisi ke Halaman Kami Dengan CSS
Sekarang saya akan menambahkan beberapa bantalan untuk header, maincontent, dan footer.
Style sheet diperbarui akan terlihat seperti ini:
/* My additional styles to add to the 960.gs styles */
body {color:#333333}
#maincontent, #header, #footer {padding: 0 20px;}
#header {background-color: #D7EDEE; border-bottom: 3px #115B77 solid; margin-bottom: 20px; padding-top: 10px}
#footer {background-color: #D7EDEE; border-top: 3px #115B77 solid; color: #666666; margin-top: 10px; padding-top: 10px}
a:link {color: #115B77; text-decoration: none;}
a:visited {color:#332745; text-decoration: none;}
a:hover {text-decoration: underline}
strong {color:#222222}
Dan akhir situs akan terlihat seperti ini :
Tidak ada komentar:
Posting Komentar