Advertisement
  1. Code
  2. HTML & CSS

Coding sebuah Website yang indah dari awal

Scroll to top
Read Time: 44 min

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

Sebagai sekuel tutorial populer, "Desain indah Website dari menggaruk", kami akan mengkonversi desain yang indah kami ke sebuah website HTML/CSS yang valid. Meskipun kami digunakan 960. gs template, kami tidak akan menggunakan CSS framework-nya untuk membangun situs. Sebaliknya, kita akan pengkodean ini desain dari awal!

Hal ini selalu penting untuk membuat kuat dan bersih markup pertama, mengapa itu? Salah satu alasan adalah karena, jika kita perlu mengubah desain kami atau mengatur ulang beberapa hal dalam situs web kami, kita hanya perlu untuk membuat perubahan ke file CSS kami dan tidak pernah menyentuh markup kami.


Pengenalan

Hari ini kita akan belajar bagaimana mempersiapkan desain ini coding dan akan kode itu untuk yang valid (X) HTML/CSS, lintas situs web browser. Kami akan mencakup hanya homepage situs web, dan jika Anda tertarik untuk berlatih lebih, desain tersedia di Themeforest.net. Ini adalah tutorial sangat rinci; sehingga Anda lebih baik mempersiapkan diri Anda dengan secangkir teh dan beberapa biskuit yang besar. Kami mulai di 3,2,1...


Langkah 1 - mengatur folder


Sebelum kita mulai proyek baru kami, kita perlu membuat folder baru mana kita dapat menyimpan semua data kami. Saya biasanya membuat satu folder untuk setiap proyek yang dinamai website saya saya merancang. Di dalam, saya membuat sebuah set folder untuk berbagai keperluan seperti "file", "PSD", "HTML", "pdf" dll... Kita akan membutuhkan hanya satu folder sekarang dan Anda dapat menyebutnya "HTML". Di dalam folder itu, buat 3 buah folder lain dan nama mereka "css", "js" dan "gambar". Kemudian buka folder "css" dan Buat folder lain dan menyebutnya hanya "i" (yang adalah singkatan dari gambar). Mengapa kita lakukan itu? Yah... alasan saya melakukannya adalah karena saya ingin memisahkan gambar-gambar saya konten dari mereka yang menciptakan layout web saya. Hal ini dapat berguna jika saya pernah perlu bergerak saya folder pada server, maka jalan untuk gambar-gambar saya tidak akan terpengaruh, dan aku tidak perlu memodifikasi file CSS saya lagi untuk memperbaikinya.


Langkah 2 - menganalisis desain

Jadi, kita sudah selesai dengan mengatur folder kami. Sekarang kita dapat mengambil melihat lebih dekat desain kami. Mengambil screenshot dari Desain Website yang indah dan mencoba untuk berpikir "di balik layar", seperti yang kulakukan. Setiap elemen dari situs web kami masa depan akan perlu kode dan dibungkus dalam HTML tag. Kita juga harus tetap diingat bahwa ini akan menjadi sebuah template bahwa seseorang akan menggunakan nanti dan memodifikasinya untuk kebutuhan mereka, jadi kita perlu untuk membuatnya mungkin bagi pengguna. Kita perlu memastikan bahwa jika pengguna ingin untuk menempatkan logo lebih besar satu ini, pengganti (div) mana goes logo diperluas. Juga bagian lain dari situs perlu peregangan dengan konten. Inilah sebabnya mengapa kita akan memiliki mungkin beberapa tambahan pengganti (div) untuk mencapai hal ini. Jika Anda kode situs untuk klien Anda mungkin tidak mengiris itu dengan cara ini karena itu mungkin akan tetap seperti. Mari kita pergi langkah demi langkah dan melihat unsur-unsur yang masuk tag yang.

Pertama, latar belakang. Kita perlu untuk menembus bagian atas dua bagian yang lebih kecil: atas _top mana bidang logo dan Cari pergi, dan atas _bottom mana navigasi diletakkan. Lebih lanjut, ada besar kepala pemegang, isi, dan footer. Perhatikan bahwa ada kotak tambahan untuk footer nav. Hal ini karena kita ingin footer harus diperluas juga karena seseorang mungkin ingin memiliki 10 posting terbaru atau komentar bukan hanya 3, seperti saya merancang. Dengan cara ini footer konten akan mendorong navigasi footer selanjutnya turun dan ada akan selalu menjadi lebih banyak ruang untuk konten tambahan.


Sekarang antarmuka. Logo biasanya dibungkus dalam H1 tag, jadi kita akan melakukan hal yang sama di sini. Formulir pencarian akan dibungkus dalam tag "bentuk", yang akan diberikan sebuah gambar latar belakang seperti yang terlihat pada gambar. Sebelum kita melanjutkan saya menyarankan bahwa kita melihat mana kita dapat menggunakan semua judul kami 6 (H1 untuk H6). H1 dilakukan, kita katakan itu akan logo kami karena itu adalah yang paling penting dan selalu datang pertama. H2 adalah judul kedua paling penting dan kita akan menggunakannya untuk membungkus gambar baris tag kami. Jangan khawatir kami akan memberikan alternatif teks untuk pembaca layar meskipun. Saya memutuskan bahwa ketiga judul dapat digunakan untuk menampilkan layanan Deskripsi atau tag garis kami. Jadi mari kita melakukannya. Karena apa yang klien katakan tentang kita adalah sangat penting. Aku memutuskan bahwa itu harus pergi di dalam H4 tag dan tidak hanya satu paragraph, bahkan jika kelihatannya seperti teks ayat. H5 digunakan untuk kami footer judul dan H6 kontes Blog terbaru. OK, jadi kami H pergi, kita bisa melanjutkan. Seperti yang Anda lihat setiap unsur yang memiliki satu kalimat atau lebih dimasukkan ke dalam sebuah paragraf dan link tentu
"" 's. Daftar Bullet, seperti yang ada di isi utama, adalah daftar unordered sederhana "ul" di mana peluru pada "li" diganti dengan gambar kustom. Juga, Semua navigasi, atas, tengah dan bawah ditempatkan di dalam daftar unordered - hanya ditata berbeda.


Jika Anda membayar perhatian, Anda akan melihat bahwa saya telah menggunakan hanya 5 elemen/tag HTML untuk membuat tata letak kami. Sebagai contoh, saya telah meletakkan tombol "Sign up" secara langsung di dalam tag "" karena link setelah semua, tidak peduli jika memiliki grafis tombol di balik itu. Tidak ada alasan untuk membuat div dengan grafis tombol kami terlebih dahulu dan kemudian menempatkan link dalam "". Ketika kami selesai dengan analisis kami kami dapat membuka Photoshop dan mempersiapkan PSD kami untuk mengiris.


Ingat bahwa kita berbicara tentang bagaimana untuk membuatnya lebih mudah bagi seseorang untuk memodifikasi kemudian, baik yang merupakan salah satu cara untuk melakukannya.

Dalam tutorial ini, kita akan menggunakan alat Slice untuk memotong gambar tata letak kami. Ya, Anda mendengar saya benar, alat Slice. Saya menggunakannya hanya ketika saya membuat template yang untuk orang lain atau untuk dijual di Themeforest karena tidak semua orang memiliki kemampuan untuk mengubah gambar logo mereka atau grafis lainnya dan menggantinya tanpa melanggar tata letak. Pada dasarnya semua orang juga perlu membuat beberapa modifikasi dalam CSS file (mengubah dimensi dll.).

Ingat bahwa kita berbicara tentang bagaimana untuk membuatnya lebih mudah bagi seseorang untuk memodifikasi kemudian, baik yang merupakan salah satu cara untuk melakukannya.

Jika Anda merasa seperti Anda tidak perlu melakukan itu maka hanya melewatkan langkah ini.
Karena kita memiliki banyak grafis kami, kita perlu untuk memisahkan mereka untuk membuatnya lebih mudah bagi kita untuk mengiris. Saya biasanya menyembunyikan semua konten dan tombol dll dan meninggalkan hanya latar belakang dan simpan file sebagai backgrounds.psd. Sama berlaku untuk tombol dll hanya tanpa latar belakang. Jadi, sekarang kita memiliki dua file psd. Satu dengan latar belakang dan satu dengan tombol, peluru heading dll...


background.PSD


Content.PSD


Langkah 4 - mengiris gambar

Sekarang kita dapat mulai mengiris tata letak kami. Kami memiliki "background.psd" dan "content.psd". Pertama kita akan mulai dengan "background.psd". Seperti dikatakan sebelumnya, Anda dapat memotong grafis Anda dari sebuah file psd tunggal, seperti yang saya lakukan kadang-kadang, tapi kali ini sangat penting untuk memilikinya terpisah sehingga lebih mudah untuk klien kami untuk membuat modifikasi kemudian.

Buka "background.psd" file. Dari alat panel di sebelah kiri, memilih Slice alat.



Langkah 5


Dengan alat Slice dipilih, menarik sepotong dari atas dokumen ke garis depan (navigasi bagian). Membuat potongan tentang 20px lebar. Catatan: kadang-kadang itu lebih baik untuk membuat gambar latar belakang berulang lebih luas. Alasan untuk ini adalah karena browser kita akan mengulangi gambar untuk membuat latar belakang, dan browser render mesin perlu menghitung lebar latar belakang dan menambahkan gambar untuk membuat latar belakang penuh. Jika gambar kami akan 1px, bayangkan berapa banyak perhitungan yang perlu dilakukan dan tentu saja penggunaan CPU Anda akan naik sedikit lebih. Setelah mengatakan bahwa, itu lebih bijaksana untuk membuat gambar latar belakang lebih luas dengan ukuran file mungkin lebih besar (hanya beberapa kilobyte) untuk menyelamatkan kita penggunaan CPU.


Tarik potongan hanya di dekat garis abu-abu gelap karena ini adalah tempat kami latar belakang navigasi dimulai. Perhatikan bagaimana kami selalu meninggalkan warna solid di bagian bawah setiap seiris. Hal ini karena dengan cara ini kita membuat daerah ini diperluas. Kemudian kami akan menambah warna latar belakang pengganti ini diulang gambar dan jika konten kami akan lebih besar situs kami tidak akan merusak!


Langkah 6


Kita tidak perlu menggambar di Iris setiap kali, kita hanya dapat menyalin dan mengubah ukuran yang sudah ada. Tahan Shift + seret potongan dari lebih bawah. Menyesuaikan ketinggian hanya! Membuatnya sehingga bagian bawah potongan cahaya abu-abu warna solid.


Langkah 7


Latar belakang header adalah satu-satunya bagian yang akan tinggal tetap tinggi. Itu adalah bagaimana kita akan mengiris gambar latar belakang ini. Salin potongan dari lagi dan menyesuaikan ketinggian sesuai bagian header seluruh biru, termasuk bayangan kecil.


Langkah 8


Latar belakang konten utama tidak perlu menjadi irisan dalam ketinggian penuh. Kita perlu melihat untuk warna solid terakhir yang muncul di gradien, dan itu adalah #ffffff (putih). Menggunakan Color picker alat untuk menemukan bahwa bagian dari gradien dan menyesuaikan ketinggian potongan ke titik itu.



Langkah 9


Footer. Menyalin potongan dari atas, pergeseran itu turun dan menyesuaikan ketinggian untuk menyesuaikan latar belakang abu-abu gelap footer.


Langkah 10


Sekarang kami telah meninggalkan hanya kecil bawah navigasi latar belakang untuk memotong. Sekali lagi, menyalin potongan dari atas dan menyesuaikan ketinggian sampai Anda mencapai akhir dokumen.


Langkah 11


Kita belum selesai dengan latar belakang. Kami memiliki gambar bingkai dan efek cahaya yang tersisa. Untuk mengiris bingkai foto, kita perlu untuk menonaktifkan semua lapisan latar belakang sehingga kami akhirnya memiliki hanya frame. Kemudian menarik sepotong dan memperbesar. Menyesuaikan potongan sehingga seluruh gambar ditempatkan di dalam irisan.


Langkah 12


Berikut adalah bagaimana efek cahaya akan terlihat seperti ketika semua latar belakang lapisan dimatikan. Pastikan bahwa Anda tinggal di dalam 960 grid ketika membuat irisan. Atas cahaya (1) dan bawah cahaya (3) akan diekspor sebagai Transparan PNGs, dan bagian tengah (2) sebagai JPEG. Kita bisa memiliki efek keseluruhan cahaya dengan latar belakang iris dan disimpan sebagai JPEG tapi aku lebih suka untuk melakukannya dengan cara ini.



Langkah 13

Sekarang buka Anda "content.psd" file, seperti yang kita akan sekarang harus memotong kami tombol, Gambar, navigasi dll.


Membuat irisan hanya dengan cara yang sama Anda telah melakukan itu sebelumnya. Pastikan untuk memperbesar banyak justru membuat sepotong untuk setiap objek. Ini adalah cara seharusnya terlihat.


Anda dapat selalu mengaktifkan latar belakang untuk mendapatkan kontras yang lebih baik ketika mengiris.


Langkah 14


Memperbesar 100% dua tombol di bagian header untuk melihat di mana bayangan berakhir dan menarik sepotong di sekitarnya. Hal ini penting untuk menjadi sangat tepat di sini karena kita tidak ingin kami bayangan untuk memotong di suatu tempat. Itu akan terlihat canggung dalam browser.


Langkah 15


Waktu untuk ekspor irisan kami sebagai Transparan PNGs. Pergi ke File > Simpan untuk Web. Dari drop-down memilih PNG 24.


Langkah 16


Sekarang, terus Shift dan pilih semua irisan, kami telah menciptakan seperti kita tidak akan untuk mengekspor hanya mereka. Mungkin Anda akan perlu untuk memilih PNG 24 dari tarik-turun lagi. Klik Simpan. Ketika jendela dialog terbuka, pilih Simpan dipilih irisan saja, dari drop down di bagian bawah jendela. Pastikan untuk menentukan folder mana untuk ekspor gambar.


Langkah 17


Kami menggunakan teknik pintu geser untuk tombol navigasi kami. Jika Anda ingin mempelajari lebih lanjut tentang hal itu, pastikan bahwa Anda mengunjungi artikel ini di A List Apart. Kita perlu memastikan bahwa kita memiliki bagian cukup lama kiri dari tombol kami untuk menyesuaikan kata terpanjang di menu (portofolio). Inilah sebabnya kita harus memperluas: hover /: negara aktif kami desain sesuai kata itu. Hal ini selalu lebih baik untuk membuat beberapa piksel lebih luas daripada memiliki itu diiris lagi jika tidak sesuai.


Langkah 18


Untuk navigasi tab kami, kami akan menggunakan CSS Sprite. Untuk lebih lanjut tentang CSS Sprite, membaca persis bagaimana untuk menggunakan CSS Sprite. Kita perlu membuat satu tombol untuk keadaan aktif dan tidak aktif. Hal ini dilakukan agar kita dapat memindahkan tab aktif di atas yang aktif dan mengiris setiap tab dengan kedua negara.


Ini adalah bagaimana satu tab irisan harus seperti. Pastikan untuk meninggalkan celah 1px antara tabs.


Langkah 19 - gambar penamaan


Saatnya untuk memberikan gambar diekspor kami nama-nama bermakna. Saya telah membuat screenshot dari semua gambar-gambar saya dan nama-nama mereka sehingga Anda dapat cukup ikuti contoh saya. Gambar-gambar ini semua ditempatkan di dalam "CSS / aku" folder karena mereka adalah bagian dari tata letak situs web kami. Gambar lain seperti footer "iklan" atau "Feature kerja" gambar ditempatkan di dalam folder "/ gambar", yang ada dalam akar.


Langkah 20 - mempersiapkan HTML dan CSS template

Kami siap untuk menutup Photoshop dan mulailah berkreasi desain yang indah ini. Sebelum melakukan ini, mari kita membuat persiapan kecil bekerja. Ini hanya langkah opsional, Anda dapat mengabaikan hal itu jika Anda suka. Saya biasanya sudah menyiapkan file HTML dan CSS untuk setiap proyek. Setelah Anda melakukannya terlalu Anda hanya akan perlu untuk menyalinnya ke folder kerja Anda. Saya ingin memiliki saya file HTML kosong seperti ini:

1
 
2
 
3
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
4
<html xmlns="http://www.w3.org/1999/xhtml"> 
5
<head> 
6
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
7
<meta name="description" content="#" /> 
8
<meta http-equiv="cahe-control" content="cache" /> 
9
<meta http-equiv="Content-Language" content="en" /> 
10
<meta http-equiv="Copyright" content="Copyright #" /> 
11
<meta name="keywords" content="PLEASE ENTER YOUR KEYWORDS HERE" /> 
12
<meta name="robots" content="index" /> 
13
<meta content="all/follow" name="robots" /> 
14
<meta content="general" name="rating" /> 
15
<meta content="7days" name="revisit" /> 
16
 
17
<!--CSS --> 
18
<link href="css/main.css" rel="stylesheet" type="text/css" media="screen" /> 
19
 
20
<!--JAVASCRIPT --> 
21
 
22
<!--PAGE TITLE --> 
23
<title>BVD - Beautiful Website Design</title> 
24
</head>  
25
 
26
<!--BEGIN BODY --> 
27
<body> 
28
 
29
</body> 
30
</html>

Dan di dalam CSS file, aku ingin menulis sesuatu tentang website saya coding, jadi itu akan terlihat seperti ini:

1
 
2
 
3
/*  CSS Document for BVD */ 
4
/* 
5
 
6
 
7
Title:  		main.css 
8
Browser(s): 	All  
9
 
10
Author: 		Marko Prljic (http://www.markoprljic.iz.hr) 
11
Created: 		11.05.2009 
12
 
13
*/

Langkah 21 - Markup

Hal pertama yang pertama. Kita akan mulai dengan markup kami. Seperti dikatakan dalam pendahuluan, sangat penting untuk menciptakan markup yang kuat dan bersih. Inilah sebabnya mengapa kita memiliki pertama dianalisis desain kami, membuat beberapa catatan dan berpikir tentang struktur markup kita sebelum kita mulai pengkodean. Saya sarankan Anda melakukan hal ini setiap kali sebelum Anda mulai pengkodean setiap proyek. Jika situs akan kemudian diadopsi pada beberapa jenis CMS kemudian ianya juga ide yang baik untuk duduk di sebelah pengembang Anda dan pergi melalui markup lagi dan akhirnya membuat beberapa perubahan jika diperlukan. Karena kita tidak mengadopsi ini untuk CMS apapun, kita hanya dapat bertahan dengan catatan kami dari langkah 2.


Langkah 22

Mari kita mulai dengan latar belakang. Untuk melakukan hal ini kita perlu membuat pengganti untuk konten kami. Letakkan kode ini di dalam tubuh.

1
 
2
 
3
<div id="top_content"> 
4
    <div class="center" id="top_light1"> 
5
    	   
6
    </div> 
7
</div> 
8
<div id="nav_content"> 
9
    <div class="center" id="top_light2"> 
10
    	 
11
    </div> 
12
</div> 
13
<div id="header"> 
14
    <div class="center" id="top_light3"> 
15
    	 
16
    </div> 
17
</div> 
18
<div id="main_content"> 
19
    <div class="center1" id="top_light4"> 
20
         
21
    </div><!--end center 1 --> 
22
</div><!-- end main content--> 
23
<div id="footer"> 
24
    <div class="center" id="top_light5"> 
25
         
26
    </div> 
27
</div> 
28
<div id="footer_nav"> 
29
	<div class="center"> 
30
     
31
    </div> 
32
</div>

Ingat bagaimana kami iris gambar dari PSD file? Pertama kami iris latar belakang atas, maka latar belakang navigasi, maka latar belakang konten utama dll. Sekarang ketika kita membuat markup kami, kami akan melakukannya dalam urutan yang sama seperti kami iris gambar kami. Jadi saya menciptakan "top_content" div pertama, kemudian "nav_content", kemudian "main_content", "footer_content" dan "footer_nav". Anda akan melihat bahwa saya telah segera membuat beberapa tambahan div disebut "pusat". Alasan saya melakukannya adalah karena ini divs "pusat" pemegang konten kami benar, sehingga untuk berbicara. Div "top_content" digunakan untuk menampilkan gambar latar belakang berulang dan akan ditetapkan 100% lebar melalui CSS file. Kita perlu menciptakan div tambahan yang akan berpusat sehingga konten kami juga muncul berpusat di dalam browser.


Langkah 23

Sekarang kami telah membuat semua penampung utama kami untuk konten. Langkah berikutnya adalah untuk pergi satu per satu dan mulai meletakkan beberapa kode untuk unsur-unsur lain. Di dalam "top_content" div kami memiliki logo dan field input Cari. Mari kita membuat mereka.

1
 
2
 
3
<div id="top_content"> 
4
    <div class="center" id="top_light1"> 
5
    	<h2><a href="#">BVD-Beautiful Website Design</a></h2> 
6
        <form id="search" action="" method="post"> 
7
        	<fieldset> 
8
            	<label for="search">Search</label> 
9
                <input  name="search" type="text" id="search" tabindex="1" /> 
10
           </fieldset> 
11
        </form>     
12
    </div> 
13
</div> 
14
<div id="nav_content"> 
15
    <div class="center" id="top_light2"> 
16
    	<ul id="nav"> 
17
        	<li><a href="#"><span>home</span></a></li> 
18
            <li><a href="#"><span>about</span><</a></li> 
19
            <li><a href="#"><span>service</span></a></li> 
20
            <li><a href="#"><span>portfolio</span></a></li> 
21
            <li><a href="#"><span>blog</span></a></li> 
22
            <li><a href="#"><span>contact</span></a></li> 
23
            <li><a href="#"><span>pricing</span></a></li> 
24
        </ul> 
25
        <p ><a href="#">Log in</a> <span >or</span></p><a href="#">Sign up</a> 
26
    </div> 
27
</div> 
28
<div id="header"> 
29
    <div class="center" id="top_light3"> 
30
    	 <h2>We make beautiful websites at affordable prices </h2> 
31
         <p>Because web design is our passion and that’s what we do </p> 
32
	 <p><strong>Gratuitous octopus </strong> niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium.  </p> 
33
         <a href="#">Get a qoute </a> <a href="#">View portfolio </a> 
34
         <img src="images/header_images.png" alt="featured work" width="471" height="370" /> 
35
    </div> 
36
</div> 
37
<div id="main_content"> 
38
    <div class="center1" id="top_light4"> 
39
     
40
    	<!-- Leave room for the slider here, we will do this later--> 
41
         
42
        <div id="testimonials"> 
43
            <div id="testimonials_inner"> 
44
                <p >BVD is the best agency I’ve ever worked with...</p> 
45
                <h4>"These guys are simply awesome. I sent them my brief, they answered within few hours and one week later they delivered me the best design ever!"</h4> 
46
                <p ><span>said</span> <strong>John Doe</strong> <span>of</span></p><a href="#">Awesomeness</a> 
47
                <a href="#">SEE WHAT OTHERS ARE SAYING</a> 
48
            </div> 
49
        </div> 
50
    </div> 
51
</div> 
52
<div id="footer"> 
53
    <div class="center" id="top_light5"> 
54
        <div class="column"> 
55
        	 
56
        </div> 
57
        <div class="column"> 
58
        	 
59
        </div> 
60
        <div class="column"> 
61
        	 
62
        </div> 
63
        <div class="column"> 
64
        	 
65
        </div> 
66
    </div> 
67
</div> 
68
<div id="footer_nav"> 
69
	<div class="center"> 
70
    	<a class="footer_logo" href="#">BVD</a><p>Copyright 2009. All rights reserved. Valid (X)HTML / CSS.</p> 
71
    	<ul> 
72
            <li><a href="#">home</a></li> 
73
            <li><a href="#">about</a></li> 
74
            <li><a href="#">service</a></li> 
75
            <li><a href="#">portfolio</a></li> 
76
            <li><a href="#">blog</a></li> 
77
            <li><a href="#">contact</a></li> 
78
            <li><a href="#">pricing</a></li> 
79
             
80
        </ul> 
81
    </div> 
82
</div>

Pertama kita harus membuat "H1" dan membungkus logo kami dalam (kita akan melakukan ini dengan CSS kemudian). Kemudian kita memiliki field input pencarian kami. Kita perlu untuk membuat bentuk karena kami akan menambahkan gambar latar belakang untuk itu. Berikutnya datang navigasi. Ini adalah daftar unordered sederhana yang kita akan gaya dengan CSS kemudian. Perhatikan bahwa saya telah menambahkan tambahan "span" di dalam "li" 's. Hal ini karena kami akan menggunakan teknik pintu geser dan memerlukan span elemen untuk mencapai efek. Setelah navigasi kami memiliki kami Login atau tanda tombol. Karena kedua akan menjadi link aku telah menempatkan mereka di dalam "".

Header terbuat dari pos, beberapa paragraf, dua tombol dan satu gambar yang besar.

"main_content" akan menyertakan jQuery slider, tetapi untuk sekarang aku meninggalkan itu kosong dan menciptakan hanya bagian testimonial. Aku tidak sangat baik dengan jQuery untuk menulis saya sendiri script dan markup, jadi saya mungkin akan menggunakan salah satu script tersedia gratis dan membuat hanya beberapa modifikasi agar sesuai kebutuhan kita.

Testimonial klien terbuat dari dua divs. Kami memiliki batas 4 untuk menciptakan dan ini dimungkinkan dengan divs dua ini. Div luar akan memiliki perbatasan 1px, warna latar belakang, dan padding yang diterapkan, dan batin div juga akan memiliki 1px perbatasan dan latar belakang warna. Dengan cara ini, kita dapat membuat efek.

Semua yang tersisa sekarang adalah footer. Kami akan membuat kolom kosong dan mengisi mereka kemudian pergi. Saya menyarankan kita harus melihat bagaimana website kami terlihat di dalam browser.


Langkah 24

Ini adalah bagaimana situs kami terlihat saat ini. Masih ada tidak ada CSS styling diterapkan sehingga browser menulisnya secara default. Dengan cara ini kita bisa juga melihat bagaimana pembaca layar lainnya akan menafsirkan situs kami, karena pembaca layar tidak memiliki CSS atau JS diaktifkan. Situs kami perlu diakses dan ini adalah salah satu cara untuk menguji itu.


Dan sekarang untuk melihat bagaimana ini akan terlihat seperti pada ponsel.


Bagus!


Langkah 25 - bagian menyenangkan (CSS)

Sudah waktunya untuk memberikan situs kami lebih gaya! Kami telah menetapkan basis, kami memiliki bersih markup, hampir semua unsur dari website kami di sini. Kami akan menyentuh markup lagi karena kita perlu menambahkan beberapa tambahan kelas dan id's untuk beberapa elemen sehingga kita bisa gaya mereka. Aku akan pergi dari atas ke bawah lagi dan sekali dan beberapa saat melakukan pengujian dan hadir Anda dengan screenshot. Mari kita membawa it on!


Langkah 26

Buka main.css file. Tambahkan beberapa dasar CSS reset gaya dan definisi tubuh, seperti ini:

1
 
2
 
3
* { 
4
	margin: 0 auto 0 auto; /* GLOBAL RESET */ 
5
	padding: 0; 
6
} 
7
body{ 
8
	margin:0; 
9
	font-size: 62.5%;  
10
	font-family: Arial, Sans-Serif; /*change font*/ 
11
	line-height: 150%;  
12
	color:#4b4d4a; /*change font color*/ 
13
	background: #fff; /*background color*/ 
14
} 
15
 
16
div, p, ul, img{ 
17
	padding:0px; margin:0px; border:none; 
18
} 
19
ul{ 
20
	list-style-type:none; 
21
}

Langkah 27

Selanjutnya kita akan gaya pos kami dan menambahkan beberapa perbaikan browser.

1
 
2
a { outline:none; /* Remove Firefox's dotted borders */ text-decoration:none; color:#d05606; padding:0; margin:0;} 
3
a img { border:none;} /* Remove IE's blue borders */ 
4
 
5
 
6
h1 {font-size: 2.4em;} 
7
h2 {font-size: 2.2em;} 
8
h3 {font-size: 3.2em;} 
9
h4 {font-size: 1.6em;} 
10
h5 {font-size: 1.8em;} 
11
h6 {font-size: 1.2em;}

Langkah 28

Saya biasanya menyatakan beberapa tambahan kelas hanya dalam kasus saya membutuhkannya. Terutama mereka adalah untuk teks format, mengambang elemen dan margin dan padding.

1
 
2
.hr{ border-bottom:1px solid #CCCCCC; border-left:none; border-right:none; border-top:none; margin:10px 0 20px 0; } 
3
.left{ float:left;} 
4
.left_margin_right{ float:left; margin:0 10px 0 0; font-size:1.2em;} 
5
.left_margin_right_top{ float:left; margin:4px 10px 0 0;} 
6
.right{ float:right;} 
7
.right_margin_top{ float:right; margin:40px 0 0 0;} 
8
.right_margin_right{ float:right; margin:0 20px 0 0;} 
9
 
10
p  {font-size: 1.2em; padding:0; line-height:1.4em;} 
11
.gray {color: #666; font-size:1em; font-style:normal;} 
12
.fat{font-weight:bold;} 
13
.small  {font-size: 1.1em; padding:0; line-height:1.4em;} 
14
.big {font-size: 1.8em; padding:0; line-height:1.2em; color:#f1f1f1; margin:0 0 22px 0;} 
15
.white {font-size: 1.2em; padding:0 10px 0 0; line-height:1.4em; color:#fff;} 
16
.title{ font-size:1.1em; font-style:italic; color:#227ab0;} 
17
.stroke { border:1px solid #fff;}

Langkah 29 - latar belakang

Sekarang kita akan memberikan warna tata letak kami. Mari kita memilih div semua luar dan melampirkan gambar latar belakang yang berulang-ulang kepada mereka.

1
 
2
#top_content{ background:#dddddd url(i/bg_top.jpg) top center repeat-x; height:81px;} 
3
 
4
#nav_content{ background:#e4e4e3; height:52px;} 
5
 
6
#header{ background:#268abe url(i/bg_header.jpg) top center repeat-x; height:418px;} 
7
 
8
#main_content{ background:#fff url(i/bg_cont.jpg) top center repeat-x; padding:0 0 50px 0;} 
9
 
10
#footer{ background:#4b4d4a url(i/bg_footer.jpg) top center repeat-x; height:368px;} 
11
 
12
#footer_nav{ background:#dcdcda url(i/bg_footer_nav.jpg) top center repeat-x; height:32px; padding:15px 0 0 0;} 
13
 
14
.center{ width:960px; height:100%; margin:0 auto; padding:0;}

Sekarang mari kita lihat bagaimana ini terlihat seperti dalam browser.



Langkah 30

Kami memiliki set latar belakang kami, sekarang kita hanya perlu tempat hamparan efek cahaya dalam setiap div. Untuk melakukan ini, kita akan menciptakan satu set id dengan transparan png's set sebagai latar belakang.

1
 
2
#top_light1{ background:transparent url(i/bg_top_overlay.png) top center no-repeat; } 
3
#top_light2{ background:transparent url(i/bg_nav_overlay.png) top center no-repeat; } 
4
#top_light3{ background:transparent url(i/bg_header_overlay.jpg) top center no-repeat; } 
5
#top_light4{ background:transparent url(i/bg_cont_overlay.png) top center no-repeat; } 
6
#top_light5{ background:transparent url(i/bg_footer_overlay.png) top center no-repeat; }

Untuk menghindari menambahkan tambahan div di markup kami kami hanya akan menambah id untuk div. sudah didefinisikan Untuk itu kita perlu mengubah markup kami hanya sedikit.

1
 
2
<div class="center" id="top_light1"></div>

Setelah memodifikasi semua .center div, mari kita melihat dulu perubahan.



Langkah 31

Sekarang kami telah menetapkan basis dan kita bisa pergi langkah demi langkah styling semua elemen. Pertama datang bentuk logo dan Cari. Untuk yang hanya menambahkan kode CSS:

1
 
2
h1 a { float:left; margin:20px 0 15px 0; display:block; width:350px; height:46px; background: transparent url(../images/logo.png) no-repeat; text-indent:-9999px; overflow:hidden;} 
3
 
4
#searchform {float: right; margin:30px 0 15px 0; background: transparent url(i/bg_search.png) no-repeat;} 
5
fieldset.search { 
6
	border: none; 
7
	width: 146px; 
8
	 
9
	} 
10
.search input, .search button { 
11
	border: none; 
12
	float: left; 
13
} 
14
.search input.box { 
15
	color: #a4a3a3; 
16
	font-size: 1.2em; 
17
	width: 109px; 
18
	height: 17px; 
19
	padding: 5px; 
20
	vertical-align:middle; 
21
	margin: 0; 
22
	background:none; 
23
	outline: none; 
24
} 
25
.search input.box:focus { 
26
	background: none; 
27
	outline: none; 
28
} 
29
.search button.btn { 
30
	width: 27px; 
31
	height: 27px; 
32
	cursor: pointer; 
33
	text-indent: -9999px; 
34
	background: url(i/bg_search.png) no-repeat top right; 
35
} 
36
.search button.btn:hover { 
37
	background: url(i/bg_search.png) no-repeat bottom right; 
38
}

Pertama kita menyatakan judul "h" diikuti "a" tag. Kami menentukan lebar dan tinggi dan latar belakang gambar (yang kami gambar logo). Karena "" adalah elemen inline kita perlu untuk mengubahnya menjadi sebuah blok elemen tingkat dan kami melakukannya dengan menambahkan "display: block;" properti. "teks-indentasi:-9999px;" digunakan untuk memindahkan teks dari layar sehingga hanya gambar terlihat. "overflow: hidden;" menghilangkan titik-titik perbatasan besar di sekitar link dan membuatnya lebar dan tinggi yang sama seperti yang dinyatakan sebelumnya. Dengan bentuk pencarian kami melakukan sedikit trik. Kami memberikan kami "bentuk" gambar latar belakang (seluruh bidang dengan tombol). Kemudian kami berkata bahwa field input kami akan 109px lebar dan 17px tinggi. Sebenarnya gambar 27px tinggi tapi karena kita menambahkan 5px padding kita perlu mengurangi 10px lebar dan 10px dari ketinggian (5px dari setiap sisi) Field input. Ini adalah sesuatu yang kita akan melakukan banyak kemudian jadi cobalah untuk mengingat ini. Selanjutnya kita menambahkan tombol, memberikan gambar latar belakang yang sama, tapi membuatnya hanya 27px lebar dan 27px tinggi, seperti tombol "Pergi" itu sendiri. Selain itu kami menyatakan: hover negara tombol.


Langkah 32 - navigasi

Navigasi dibuat dengan teknik pintu geser. Aku tidak akan menjelaskan bahwa teknik secara rinci sehingga Anda harus membaca artikel ini pertama kali. Berikut adalah kode untuk navigasi kami.

1
 
2
/*NAVIGATION*/ 
3
 
4
.nav ul {margin:10px 0 0 0; padding: 0; list-style: none; float:left; } 
5
.nav ul li{float: left; display: block; margin: 0 10px 0 0; padding: 0;} 
6
.nav ul li a.button { 
7
/* Sliding right image */ 
8
display: block; 
9
float: left; 
10
height: 27px; /* CHANGE THIS VALUE ACCORDING TO IMAGE HEIGHT */ 
11
margin-right: 6px; 
12
padding-right: 14px; /* CHENGE THIS VALUE ACCORDING TO RIGHT IMAGE WIDTH */ 
13
/* FONT PROPERTIES */ 
14
text-decoration: none; 
15
color: #848484; 
16
font-size:1.2em; 
17
font-family: Arial, Helvetica, sans-serif; 
18
font-weight:normal; 
19
text-transform:uppercase; 
20
} 
21
.nav ul li a.button span { 
22
/* Background left image */  
23
 
24
display: block; 
25
line-height: 27px; /* CHANGE THIS VALUE ACCORDING TO BUTTONG HEIGHT */ 
26
padding:0 0 0 15px; 
27
}  
28
 
29
.nav ul li a.button:hover { 
30
/* Sliding right image */ 
31
background: transparent url(i/button_nav_right.png) no-repeat scroll top right;  
32
display: block; 
33
float: left; 
34
height: 27px; /* CHANGE THIS VALUE ACCORDING TO IMAGE HEIGHT */ 
35
margin-right: 6px; 
36
padding-right: 14px; /* CHENGE THIS VALUE ACCORDING TO RIGHT IMAGE WIDTH */ 
37
/* FONT PROPERTIES */ 
38
text-decoration: none; 
39
color: #7b3500; 
40
font-size:1.2em; 
41
font-family: Arial, Helvetica, sans-serif; 
42
font-weight:normal; 
43
text-transform:uppercase; 
44
} 
45
.nav ul li a.button:hover span { 
46
/* Background left image */  
47
background: transparent url(i/button_nav_left.png) no-repeat;  
48
display: block; 
49
line-height: 27px; /* CHANGE THIS VALUE ACCORDING TO BUTTONG HEIGHT */ 
50
padding:0 0 0 15px; 
51
} 
52
 
53
.nav ul li.selected a { 
54
/* Sliding right image */ 
55
background: transparent url(i/button_nav_right.png) no-repeat scroll top right;  
56
display: block; 
57
float: left; 
58
height: 27px; /* CHANGE THIS VALUE ACCORDING TO IMAGE HEIGHT */ 
59
margin-right: 6px; 
60
padding-right: 14px; /* CHENGE THIS VALUE ACCORDING TO RIGHT IMAGE WIDTH */ 
61
/* FONT PROPERTIES */ 
62
text-decoration: none; 
63
color: #7b3500; 
64
font-size:1.2em; 
65
font-family: Arial, Helvetica, sans-serif; 
66
font-weight:normal; 
67
text-transform:uppercase; 
68
} 
69
.nav ul li.selected a span { 
70
/* Background left image */  
71
background: transparent url(i/button_nav_left.png) no-repeat;  
72
display: block; 
73
line-height: 27px; /* CHANGE THIS VALUE ACCORDING TO BUTTONG HEIGHT */ 
74
padding:0 0 0 15px; 
75
}

Sebelum Anda menguji ini dalam membuat browser Anda untuk membuat perubahan kecil ke markup.

1
 
2
<div id="nav_content"> 
3
    <div class="center" id="top_light2"> 
4
    <div class="nav"> 
5
    	<ul id="nav"> 
6
        	<li><a href="#"><span>home</span></a></li> 
7
            <li><a href="#"><span>about</span><</a></li> 
8
            <li><a href="#"><span>service</span></a></li> 
9
            <li><a href="#"><span>portfolio</span></a></li> 
10
            <li><a href="#"><span>blog</span></a></li> 
11
            <li><a href="#"><span>contact</span></a></li> 
12
            <li><a href="#"><span>pricing</span></a></li> 
13
        </ul> 
14
    </div> 
15
        <a class="signup" href="#">Sign up</a><p class="login" ><a class="fat" href="#">Log in</a> <span class="gray" >or</span></p> 
16
    </div> 
17
</div>

Langkah 33

Di sebelah kanan navigasi kita memiliki tombol "Sign up" kita perlu untuk gaya. Paste kode ini di file CSS Anda.

1
 
2
.signup { float:right; width:87px; height:30px; display:block; margin:10px 0 0 0; background:transparent url(i/button_signup.png) no-repeat; text-indent:-9999px; overflow:hidden;} 
3
.login {float:right; margin:15px 10px 0 0;}

Kita mengapung kedua elemen ke kanan dan memberi mereka margin atas dan kanan sehingga mereka berpusat dan pindah dari satu sama lain.


Langkah 34 - Header

Di sini kita harus mengubah markup lagi sedikit, tapi itu semua datang ke bawah untuk menambah kelas unsur yang ada dan mungkin menambahkan sesuatu yang baru. Saya telah dibagi header menjadi dua bagian, sisi kiri dan sisi kanan. Untuk itu saya membuat dua kelas baru dalam CSS file:

1
 
2
.left_column { width:469px; float:left; padding:55px 0 40px 0;} 
3
.right_column { width:470px; float:left; padding:50px 0 0 0;}

Kolom kiri akan digunakan untuk berisi baris tag, paragraf dan tombol, dan kolom kanan tidak akan digunakan di sini sebagai kita memiliki gambar besar di sebelah kanan yang cukup besar untuk menyatukan header. Kolom ini akan digunakan dalam main_content. Berikut adalah markup header baru kami:

1
 
2
<div id="header"> 
3
    <div class="center" id="top_light3"> 
4
    	<div class="left_column"> 
5
             <h2>We make beautiful websites at affordable prices </h2> 
6
             <p>Because web design is our passion and that’s what we do </p> 
7
         <p><strong>Gratuitous octopus </strong> niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium.  </p> 
8
             <a href="#">Get a qoute </a> <a href="#">View portfolio </a> 
9
         </div> 
10
         <img src="images/header_images.png" alt="featured work" width="471" height="370" /> 
11
    </div> 
12
</div>

Dan CSS:

1
 
2
.tagline{ width:436px; height:97px; background:transparent url(../images/tagline.png) no-repeat; text-indent:-9999px; overflow:hidden;} 
3
.getquote {float:left; margin:42px 0 0 -4px; display:block; width:168px; height:45px; background: transparent url(i/button_quote.png) no-repeat; text-indent:-9999px; overflow:hidden;} 
4
.portfolio {float:left; margin:42px 0 0 10px; display:block; width:168px; height:45px; background: transparent url(i/button_portfolio.png) no-repeat; text-indent:-9999px; overflow:hidden;}

Ini adalah bagaimana situs kami harus terlihat seperti sekarang.



Langkah 35 - konten utama

Ingat bahwa kita meninggalkan konten utama ketika kita menulis markup? Yah, alasan mengapa saya melakukan ini adalah karena kita akan menggunakan slider dari Chris Coyier artikel bangunan Blogroll lebih baik: dinamis menyenangkan dengan SimplePie dan jQuery. Sekarang, membaca artikel ini jika Anda tertarik dalam seluruh proses menciptakan slider ini. Aku tidak benar-benar tertarik dengan konten dinamis yang dihasilkan dengan PHP jadi saya download kode sumber dan disalin di sini. Saya membuat beberapa modifikasi file HTML, CSS dan JS untuk mendapatkan efek yang sama tetapi dengan desain saya sendiri. Untuk melakukan sama pertama masukkan kode ini di kepala dokumen:

1
 
2
 <script src='js/jquery-1.2.6.min.js' type='text/javascript'> </script> 
3
 <script src="js/jquery-easing.1.2.js" type='text/javascript'> </script> 
4
 <script src="js/jquery-easing-compatibility.1.2.js" type='text/javascript'> </script> 
5
 <script src="js/coda-slider.1.1.1.js" type='text/javascript'> </script>

Selanjutnya tambahkan kode ini di pusat div yang ada di dalam main_content:

1
 
2
         <div id="blogSliderWrap"> 
3
           <div id="blogSlider"> 
4
                <div class="innerWrap"> 
5
                    <div class="panelContainer"> 
6
                         
7
                        <div class="panel" title="Web design"> 
8
                            <div class="wrapper"> 
9
                        		<div class="left_column"> 
10
                                    <div class="featured"> 
11
                                    	<img src="images/featured_0.jpg" alt="featured work" />                                    </div> 
12
                                    <p class="small"><span class="title">Freelance designer</span> - January 2009</p> 
13
                                </div> 
14
                                <div class="right_column"> 
15
                                	<h2>We make the best websites!</h2> 
16
                                    <p class="big">Because web design is our passion and <br />that’s what we do.</p> 
17
                                    <ul class="listing"><!-- left list--> 
18
                                        <li>Adobe Photoshop</li> 
19
                                        <li>Adobe Illustrator</li> 
20
                                        <li>Adobe Flash</li> 
21
                                        <li>Adobe Fireworks</li> 
22
                                    </ul> 
23
                                    <ul class="listing"><!-- right list--> 
24
                                    	<li>Adobe Dreamweaver</li> 
25
                                        <li>Adobe Swift 3D</li> 
26
                                        <li>Adobe Photography</li> 
27
                                    </ul> 
28
                                    <p class="description">Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. </p> 
29
                                </div> 
30
                            </div> 
31
                        </div> 
32
         
33
                        <div class="panel" title="Marketing"> 
34
                            <div class="wrapper"> 
35
                        		<div class="left_column"> 
36
                                    <div class="featured"> 
37
                                    	<img src="images/featured_0.jpg" alt="featured work" />                                    </div> 
38
                                    <p class="small"><span class="title">Freelance designer</span> - January 2009</p> 
39
                                </div> 
40
                                <div class="right_column"> 
41
                                	<h2>We make the best websites!</h2> 
42
                                    <p class="big">Because web design is our passion and <br />that’s what we do.</p> 
43
                                    <ul class="listing"><!-- left list--> 
44
                                        <li>Adobe Photoshop</li> 
45
                                        <li>Adobe Illustrator</li> 
46
                                        <li>Adobe Flash</li> 
47
                                        <li>Adobe Fireworks</li> 
48
                                    </ul> 
49
                                    <ul class="listing"><!-- right list--> 
50
                                    	<li>Adobe Dreamweaver</li> 
51
                                        <li>Adobe Swift 3D</li> 
52
                                        <li>Adobe Photography</li> 
53
                                    </ul> 
54
                                    <p class="description">Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. </p> 
55
                                </div> 
56
                            </div> 
57
                        </div> 
58
                     
59
                        <div class="panel" title="Consulting"> 
60
                            <div class="wrapper"> 
61
                        		<div class="left_column"> 
62
                                    <div class="featured"> 
63
                                    	<img src="images/featured_2.jpg" alt="featured work" />                                    </div> 
64
                                    <p class="small"><span class="title">Freelance designer</span> - January 2009</p> 
65
                                </div> 
66
                                <div class="right_column"> 
67
                                	<h2>We make the best websites!</h2> 
68
                                    <p class="big">Because web design is our passion and <br />that’s what we do.</p> 
69
                                    <ul class="listing"><!-- left list--> 
70
                                        <li>Adobe Photoshop</li> 
71
                                        <li>Adobe Illustrator</li> 
72
                                        <li>Adobe Flash</li> 
73
                                        <li>Adobe Fireworks</li> 
74
                                    </ul> 
75
                                    <ul class="listing"><!-- right list--> 
76
                                    	<li>Adobe Dreamweaver</li> 
77
                                        <li>Adobe Swift 3D</li> 
78
                                        <li>Adobe Photography</li> 
79
                                    </ul> 
80
                                    <p class="description">Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. </p> 
81
                                </div> 
82
                            </div> 
83
                        </div> 
84
                     
85
                        <div class="panel" title="Support"> 
86
                            <div class="wrapper"> 
87
                        		<div class="left_column"> 
88
                                    <div class="featured"> 
89
                                    	<img src="images/featured_3.jpg" alt="featured work" />                                    </div> 
90
                                    <p class="small"><span class="title">Freelance designer</span> - January 2009</p> 
91
                                </div> 
92
                                <div class="right_column"> 
93
                                	<h2>We make the best websites!</h2> 
94
                                    <p class="big">Because web design is our passion and <br />that’s what we do.</p> 
95
                                    <ul class="listing"><!-- left list--> 
96
                                        <li>Adobe Photoshop</li> 
97
                                        <li>Adobe Illustrator</li> 
98
                                        <li>Adobe Flash</li> 
99
                                        <li>Adobe Fireworks</li> 
100
                                    </ul> 
101
                                    <ul class="listing"><!-- right list--> 
102
                                    	<li>Adobe Dreamweaver</li> 
103
                                        <li>Adobe Swift 3D</li> 
104
                                        <li>Adobe Photography</li> 
105
                                    </ul> 
106
                                    <p class="description">Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. </p> 
107
                                </div> 
108
                            </div> 
109
                        </div> 
110
                    </div><!--end panel container --> 
111
                </div><!-- end inner wrap--> 
112
            </div><!--end blog slider --> 
113
		</div> 
114
        <!--end blog slider wrap -->

Saya menemukan bahwa saya sebagian besar diperlukan untuk mengubah dimensi dan path ke gambar dari file CSS Chris asli untuk slider. Slider baru CSS:

1
 
2
/* 
3
	WIDGET STRUCTURE 
4
*/ 
5
#blogSliderWrap 					{ width: 1167px; margin: 0 auto; padding:50px 0 30px 0; 
6
									  background: url(i/bg_tabs.png) 35px 57px no-repeat; 
7
									  position: relative; } 
8
#blogSlider 						{ margin: 0 auto; width: 960px; } 
9
.stripViewer 						{ position: relative; overflow: hidden; clear: both; } 
10
.stripViewer .panelContainer 		{ position: relative; left: 0px; top: 0px; } 
11
.stripViewer .panelContainer .panel { float: left; position: relative; width: 960px; } 
12
.stripNav 							{ position: relative; top: 0; left:114px; z-index: 99; } 
13
.wrapper 							{ padding: 10px; } 
14
.innerWrap 							{ width: 960px; overflow: hidden; } 
15
 
16
 
17
/*  
18
	MAIN TABBED NAVIGATION 
19
*/ 
20
.stripNav ul li 					{ float: left; } 
21
 
22
.stripNav li a 						{ /* Generic "CSS image replacement" */ 
23
									  display: block; height: 69px; text-indent: -9999px; } 
24
/* The below class names are auto-generated by the JavaScript */ 
25
.stripNav li.tab1 a { background: url(i/tab_1.png) top center no-repeat; width: 231px; } 
26
.stripNav li.tab2 a { background: url(i/tab_2.png) top center no-repeat; width: 240px; } 
27
.stripNav li.tab3 a { background: url(i/tab_3.png) top center no-repeat; width: 240px; } 
28
.stripNav li.tab4 a { background: url(i/tab_4.png) top center no-repeat; width: 230px; } 
29
 
30
.stripNav li a:hover,  
31
.stripNav li a:active,  
32
.stripNav li a:focus 				{ /* Restore focus styling that we removed when we removed outlines */ 
33
									  background-position: top center; } 
34
 
35
/* It is neccessary to repeat the image paths here */ 
36
.stripNav li.tab1 a.current { background: url(i/tab_1.png) bottom center no-repeat; } 
37
.stripNav li.tab2 a.current { background: url(i/tab_2.png) bottom center no-repeat; } 
38
.stripNav li.tab3 a.current { background: url(i/tab_3.png) bottom center no-repeat; } 
39
.stripNav li.tab4 a.current { background: url(i/tab_4.png) bottom center no-repeat; }

Selanjutnya kami telah diperbarui "right_column" dengan beberapa kelas baru jadi kita perlu gaya CSS:

1
 
2
.right_column .description{ float:left; width:100%;} 
3
.featured { width:407px; height:237px; padding:17px 0 0 13px; background:transparent url(i/bg_image.png) no-repeat;} 
4
 
5
ul.listing{ float:left; padding:12px 80px 28px 10px; margin:0;} 
6
ul.listing li{ list-style-image: none; background-image:url(i/ico_li.png); background-repeat: no-repeat; background-position: left center; padding:0 0 2px 25px; margin:0 0 5px 0; font-size:1.2em;}

".featured" adalah div di sebelah kiri di mana citra Terpilih kita pergi. Kami mengatur latar belakang menjadi bingkai gambar dan digunakan "padding" properti ke pusat konten di dalam. "ul.listing" adalah unordered list (daftar peluru) ada di sebelah kanan. Ini adalah melayang kiri dan memiliki beberapa padding untuk memisahkan dari sekitar konten. Selanjutnya kami mengganti default peluru pada "ul.listing li" dengan kami kustom peluru gambar (biru) menggunakan "daftar-gaya-gambar: none; background-Image:URL(i/ico_li.PNG); ". Dengan "latar belakang-posisi: meninggalkan pusat;" kita selaras peluru ke kiri dan terpusat dengan teks. Akhirnya Tambahkan beberapa padding untuk memberikan segala sesuatu lebih banyak ruang. ".right_column .description" adalah kelas untuk ayat yang muncul di bawah daftar dua peluru. Itu hanya memberitahu paragraf menjadi 100% lebar sehingga tidak membungkus daftar, karena mereka mengambang kiri.

Dan akhirnya file JS. Aku hanya menghapus kode yang tidak perlu bahwa kita tidak menggunakan di sini. Coda-slider.1.1.1.js file tampilan baru seperti ini:

1
 
2
jQuery(function(){ 
3
	jQuery("div.csw").prepend("<p class='loading'>Loading...<br /><img src='http://tutsplus.s3.amazonaws.com/tutspremium/web-development/013_BeautifulWebsiteFromScratchCoding/images/ajax-loader.gif' alt='loading...'/ ></p>"); 
4
}); 
5
var j = 0; 
6
jQuery.fn.codaSlider = function(settings) { 
7
	 settings = jQuery.extend({ 
8
     easeFunc: "expoinout", 
9
     easeTime: 750, 
10
     toolTip: false 
11
  }, settings); 
12
	return this.each(function(){ 
13
		var container = jQuery(this); 
14
		// Remove the preloader gif... 
15
		container.find("p.loading").remove(); 
16
		// Self-explanatory... 
17
		container.removeClass("csw").addClass("stripViewer"); 
18
		// Get the width of a panel, set from CSS... 
19
		var panelWidth = container.find("div.panel").width(); 
20
		// panelCount gives us a count of the panels in the container... 
21
		var panelCount = container.find("div.panel").size(); 
22
		// Calculate the width of all the panels when lined up end-to-end... 
23
		var stripViewerWidth = panelWidth*panelCount; 
24
		// Use the above width to specify the CSS width for the panelContainer element... 
25
		container.find("div.panelContainer").css("width" , stripViewerWidth); 
26
		// Set the navWidth as a multiple of panelCount to account for margin-right on each li 
27
		var navWidth = 240; 
28
		 
29
		// Specify the current panel. 
30
		// If the loaded URL has a hash (cross-linking), we're going to use that hash to give the slider a specific starting position... 
31
		if (location.hash && parseInt(location.hash.slice(1)) <= panelCount) { 
32
			var cPanel = parseInt(location.hash.slice(1)); 
33
			var cnt = - (panelWidth*(cPanel - 1)); 
34
			jQuery(this).find("div.panelContainer").css({ left: cnt }); 
35
		// Otherwise, we'll just set the current panel to 1... 
36
		} else {  
37
			var cPanel = 1; 
38
		}; 
39
		 
40
		// Create appropriate nav 
41
		container.each(function(i) { 
42
			 
43
			 
44
			// Create the Tabs 
45
			jQuery(this).before("<div class='stripNav' id='stripNav" + j + "'><ul><\/ul><\/div>"); 
46
			jQuery(this).find("div.panel").each(function(n) { 
47
						jQuery("div#stripNav" + j + " ul").append("<li class='tab" + (n+1) + "'><a href='#" + (n+1) + "'>" + jQuery(this).attr("title") + "<\/a><\/li>");												 
48
			}); 
49
			 
50
			// Tab nav 
51
			jQuery("div#stripNav" + j + " a").each(function(z) { 
52
				// Figure out the navWidth by adding up the width of each li 
53
				navWidth += jQuery(this).parent().width(); 
54
				// What happens when a nav link is clicked 
55
				jQuery(this).bind("click", function() { 
56
					jQuery(this).addClass("current").parent().parent().find("a").not(jQuery(this)).removeClass("current"); // wow! 
57
					var cnt = - (panelWidth*z); 
58
					cPanel = z + 1; 
59
					jQuery(this).parent().parent().parent().next().find("div.panelContainer").animate({ left: cnt}, settings.easeTime, settings.easeFunc); 
60
				}); 
61
			}); 
62
			 
63
			 
64
			// Same-page cross-linking 
65
			jQuery("a.cross-link").click(function(){ 
66
				jQuery(this).parents().find(".stripNav ul li a:eq(" + (parseInt(jQuery(this).attr("href").slice(1)) - 1) + ")").trigger('click'); 
67
			});	 
68
			 
69
			// Set the width of the nav using the navWidth figure we calculated earlier. This is so the nav can be centred above the slider 
70
			jQuery("div#stripNav" + j).css("width" , navWidth); 
71
			 
72
			// Specify which tab is initially set to "current". Depends on if the loaded URL had a hash or not (cross-linking). 
73
			if (location.hash && parseInt(location.hash.slice(1)) <= panelCount) { 
74
				jQuery("div#stripNav" + j + " a:eq(" + (location.hash.slice(1) - 1) + ")").addClass("current"); 
75
			} else { 
76
				jQuery("div#stripNav" + j + " a:eq(0)").addClass("current"); 
77
			} 
78
			 
79
		}); 
80
		 
81
		j++; 
82
  }); 
83
};

Langkah 36

Setelah kami telah membuat semua perubahan ini kita hanya perlu untuk memasukkan sedikit kecil kode dalam "kepala" dari kami dokumen untuk memicu slider. Setelah itu kita dapat menguji halaman kami.

1
 
2
<script type='text/javascript'> 
3
		$(function () { 
4
			$("#blogSlider").codaSlider(); 
5
		}); 
6
	</script>

Ini adalah bagaimana kawasan konten utama sekarang harus terlihat. Kita masih perlu untuk gaya bagian testimonial.



Langkah 37

Kotak testimonial terdiri dari 2 divs individu. Div luar diberikan latar belakang warna dan 1px padat perbatasan. Dalam kotak juga diberikan warna latar belakang, perbatasan 1px, dan margin 10px. Margin ini memastikan bahwa kotak batin akan 10px kecil pada semua sisi kemudian div luar, menciptakan efek perbatasan lemak dari div. luar Mari kita lihat CSS.

1
 
2
#testimonials { margin:0 auto; width:960px; background:#f2f2f2; border:1px solid #e0e0df;} 
3
#testimonials_inner { margin:10px; padding:20px; width:900px; background:#f8f7f7; border:1px solid #ececec;}

"margin: 0 auto;" digunakan untuk pusat kotak testimonial dalam main_content. "padding: 20px;" untuk batin div digunakan untuk jarak konten dari perbatasan. Perhatikan bagaimana lebar kotak batin mengecil? Hal ini disebabkan oleh menambahkan margin dan padding. Setiap kali kita menambahkan padding untuk elemen, kita perlu rendah lebar atau tinggi unsur yang tergantung pada mana padding diberikan.


Langkah 38

Sekarang kita memiliki gaya isi dari kotak testimonial. Saya telah membuat beberapa tambahan kelas untuk setiap bagian dari konten dan tampak seperti ini:

1
 
2
#testimonials_inner p.intro{ color:#d05606; font-weight:bold; font-size:1.4em;} 
3
#testimonials_inner h4{ padding:20px 0; font-family:"Times New Roman", Times, serif; font-size:2.6em; color:#666; font-weight:normal; font-style:italic; line-height:1.4em;} 
4
#testimonials_inner a.all { display:block; width:192px; background:#f2f2f2; border:1px solid #e0e0e0; color:#6c6c6c; font-size:1.2em; padding:5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;} 
5
#testimonials_inner a.all:hover { display:block; width:192px; background:#fff; border:1px solid #e0e0e0; color:#6c6c6c; font-size:1.2em; padding:5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;} 
6
#testimonials_inner p.sig{ float:right; padding:0 20px 0 0;} 
7
#testimonials_inner p.sig span{ font-size:1.1em; font-style:italic; color:#666;} 
8
#testimonials_inner a.logo {float:right; width:162px; height:16px; display:block; background: transparent url(../images/logo_testimonials.png) no-repeat; text-indent:-9999px; overflow:hidden;}

Pertama saya menyatakan ayat warna font, ukuran dan berat. Kemudian testimonial dibungkus dalam tag "h4" karena aku merasa bahwa itu adalah bagian penting dari konten dan harus emphased dengan cara ini. Kita bisa dibungkus itu dalam tag "p" juga. Kelas ".all" digunakan untuk tombol "Lihat lebih banyak testimonial". Anda akan melihat bahwa saya menggunakan beberapa properti CSS3, seperti sudut-sudut membulat. Kebanyakan browser mendukung itu kecuali IE tentu saja. IE akan menulisnya sebagai kotak persegi. Kita bisa hidup dengan itu:). Hal terakhir untuk gaya adalah tanda tangan dan logo klien, yang akan menjadi link ke homepage-nya. Aku harus mengatur ulang markup sedikit untuk mendapatkan tombol"lain" dan "tanda tangan" menampilkan dalam urutan yang benar, jadi ini adalah bagaimana markup baru terlihat seperti:

1
 
2
<div id="testimonials"> 
3
            <div id="testimonials_inner"> 
4
                <p >BVD is the best agency I’ve ever worked with...</p> 
5
                <h4>"These guys are simply awesome. I sent them my brief, they answered within few hours and one week later they delivered me the best design ever!"</h4> 
6
                <a class="logo" href="#">Awesomeness</a><p class="sig"><span>said</span> <strong>John Doe</strong> <span>of</span></p> 
7
		<a class="all" href="#">SEE WHAT OTHERS ARE SAYING</a> 
8
            </div> 
9
</div>

Langkah 39

Kita hampir selesai dengan tata letak ini. Semua yang tersisa adalah daerah footer. Mari kita lihat bagaimana kami markup untuk footer terlihat seperti.

1
 
2
<div id="footer"> 
3
    <div class="center" id="top_light5"> 
4
        <div class="column"> 
5
        	 
6
        </div> 
7
        <div class="column"> 
8
        	 
9
        </div> 
10
        <div class="column"> 
11
        	 
12
        </div> 
13
        <div class="column"> 
14
        	 
15
        </div> 
16
    </div> 
17
</div> 
18
<div id="footer_nav"> 
19
	<div class="center"> 
20
    	<a class="footer_logo" href="#">BVD</a><p>Copyright 2009. All rights reserved. Valid (X)HTML / CSS.</p> 
21
    	<ul> 
22
            <li><a href="#">home</a></li> 
23
            <li><a href="#">about</a></li> 
24
            <li><a href="#">service</a></li> 
25
            <li><a href="#">portfolio</a></li> 
26
            <li><a href="#">blog</a></li> 
27
            <li><a href="#">contact</a></li> 
28
            <li><a href="#">pricing</a></li> 
29
             
30
        </ul> 
31
    </div> 
32
</div>

Sekarang kita perlu mengisi setiap kolom dengan beberapa konten. Mari kita lakukan ini.

1
 
2
<div id="footer"> 
3
    <div class="center" id="top_light5"> 
4
        <div class="column"> 
5
        	<h5>latest blog entries</h5> 
6
            <div class="hr"></div> 
7
            <p class="date">12.06</p><h6><a href="#">Some heading goes here</a></h6> 
8
            <p class="lead">Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium.</p> 
9
            <p class="date">12.06</p><h6><a href="#">Some heading goes here</a></h6> 
10
            <p class="lead">Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium.</p> 
11
            <p class="date">12.06</p><h6><a href="#">Some heading goes here</a></h6> 
12
            <p class="lead">Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium.</p> 
13
        </div> 
14
        <div class="column"> 
15
        	<h5>recent comments</h5> 
16
            <div class="hr"></div> 
17
            <div class="recent_comment"> 
18
                <p><span class="fat">Ben</span> said:</p> 
19
                <a class="comment" href="#">Gratuitous octopus niacin, sodium glutimate. </a> 
20
            </div> 
21
            <div class="recent_comment"> 
22
                <p><span class="fat">Joe Santos</span> said:</p> 
23
                <a class="comment" href="#">Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. </a> 
24
            </div> 
25
            <div class="recent_comment"> 
26
                <p><span class="fat">Marko</span> said:</p> 
27
                <a class="comment" href="#">Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate. </a> 
28
            </div> 
29
        </div> 
30
        <div class="column"> 
31
        	<h5>adverstising</h5> 
32
            <div class="hr"></div> 
33
            <a class="ad_odd" href="#"> 
34
            	<img width="86" height="86" class="stroke" src="images/ad1.jpg" alt="advertising" /> 
35
            </a> 
36
            <a class="ad" href="#"> 
37
            	<img width="86" height="86" class="stroke" src="images/ad2.jpg" alt="advertising" /> 
38
            </a> 
39
            <a class="ad_odd" href="#"> 
40
            	<img width="86" height="86" class="stroke" src="images/ad3.jpg" alt="advertising" /> 
41
            </a> 
42
            <a class="ad" href="#"> 
43
            	<img width="86" height="86" class="stroke" src="images/ad4.jpg" alt="advertising" /> 
44
            </a> 
45
        </div> 
46
        <div class="column_odd"> 
47
        	<h5>twitter stuff</h5> 
48
            <div class="hr"></div> 
49
            <div id="tweeter"> 
50
            	<a class="from" href="#">wisefalco</a>: 
51
                <p>@<a href="#">simnor</a>Haha, this is really funny ( <a href="#">http://tinyurl.com/cnfd2</a> )</p> 
52
                <p class="posted">5 minutes ago from web</p> 
53
            	<a class="follow" href="#">Follow us on Twitter</a> 
54
            </div> 
55
        </div> 
56
    </div> 
57
</div>

Pertama kami menambahkan semua judul di setiap kolom yang diikuti oleh garis horizontal. Entri "Terbaru Blog" terbuat dari teks tanggal, judul, dan memimpin. Tanggal yang akan ditampilkan dengan latar belakang gambar (icon), dan judul adalah link ke artikel lengkap. Saya telah menambahkan beberapa tambahan kelas paragraf dan link sehingga saya bisa gaya mereka dengan CSS kemudian. Komentar terbaru dilakukan cara yang hampir sama. Perbedaannya adalah bahwa setiap komentar dibungkus dalam div. "recent_comment" Iklan gambar memiliki perbatasan lemak, jadi saya membuat mereka dengan cara yang sama seperti yang saya lakukan kotak testimonial. Anda harus melihat div satu iklan yang memiliki kelas "ad_odd" dan lain hanya "iklan". Hal ini karena saya sudah diberikan yang berbeda margin untuk setiap menambahkan sehingga mereka tetap selaras dan sama spasi. Hal terakhir yang perlu diperhatikan adalah kelas kolom terakhir "column_odd". Alasan untuk melakukan hal ini adalah sama dengan iklan sebelumnya. Kita akan melihat bahwa dalam CSS segera. Kotak kericau memiliki gambar latar belakang yang sederhana dengan padding diterapkan.


Langkah 40

Mari kita lihat bagaimana CSS untuk footer terlihat.

1
 
2
 
3
.column { width:225px; padding:0 15px 0 0; margin:30px 0; float:left; color:#f0f0f0;} 
4
.column h5{ font-size:1.4em; font-weight:bold; letter-spacing:-1px; text-transform:uppercase;} 
5
.column h6 { margin:0 0 10px 0;} 
6
.column h6 a { margin:0 0 10px 0; color:#fafafa;} 
7
.column h6 a:hover { margin:0 0 10px 0; color:#d05606;} 
8
.column .date{ float:left; width:34px; height:17px; padding:0 0 0 5px; margin:0 10px 0 0; background:transparent url(i/ico_date.png) no-repeat; font-size:1.1em; font-weight:bold;} 
9
.column p {font-size:1.1em;} 
10
.column p.lead {font-size:1.1em; margin:0 0 20px 0;} 
11
 
12
.column_odd { width:235px; padding:0; margin:30px 0; float:left; color:#f0f0f0;} 
13
.column_odd p {font-size:1.1em;} 
14
.column_odd h5{ font-size:1.4em; font-weight:bold; letter-spacing:-1px; text-transform:uppercase;} 
15
.column_odd #tweeter { width:181px; height:185px; padding:18px 20px 18px 20px; background: transparent url(i/bg_twitter.png) no-repeat; position:relative; font-size:1.4em; color:#333; font-family:"Times New Roman", Times, serif; font-style:italic;} 
16
.column_odd #tweeter a.from { font-weight:bold;} 
17
.column_odd #tweeter a.follow { position:absolute; bottom:60px; left:0; color:#fff; font-family:Arial, Helvetica, sans-serif; text-decoration:underline; font-size:0.8em; font-style:italic;} 
18
.column_odd #tweeter a.follow:hover { position:absolute; bottom:60px; left:0; color:#d05606; font-family:Arial, Helvetica, sans-serif; text-decoration:underline; font-size:0.8em; font-style:italic;} 
19
.column_odd #tweeter p.posted { font-size:0.8em; margin:5px 0 0 0; color: #999;} 
20
 
21
.column .ad{ float:left; display:block; width:88px; height:88px; border:1px solid #fff; padding:5px; margin:0; background:#eaeaea;} 
22
.column .ad_odd { float:left; display:block; width:88px; height:88px; border:1px solid #fff; padding:5px; margin:0 15px 15px 0; background:#eaeaea;} 
23
 
24
.column .recent_comment { background:transparent url(i/ico_comment.png) top left no-repeat; padding:0 0 0 40px; margin:0 0 20px 0; font-size:1.2em;} 
25
.column a.comment { display:block; font-size:0.9em; margin:5px 0 0 0; color:#f0f0f0;} 
26
.column a.comment:hover {display:block; font-size:0.9em; margin:5px 0 0 0; color:#d05606;}

Lebar ".column" dihitung berdasarkan grid dan padding kita ditambahkan ke masing-masing. "margin: 30px 0;" memberi kolom 30px ruang dari atas dan bawah dan 0px dari kiri dan kanan. Seperti yang katakan sebelumnya ".date" memiliki sebuah gambar latar belakang yang diterapkan ke (jeruk ikon). "h5" judul kolom dan "h6" judul entri Blog terbaru. Kita juga didefinisikan: hover negara untuk "h6". "column_odd" adalah satu dengan kotak kericau. Perhatikan bahwa ".column" memiliki padding tepat set 15px, sedangkan "column_odd" memiliki padding 0px set. Dengan cara ini, kita mendapatkan mereka semua baik selaras dalam grid kami. Kericau div terletak relatif karena, dengan cara ini, kita dapat dengan mudah benar-benar posisi "Ikuti kami di Twitter" link akan ditampilkan di luar balon Twitter. Kita bisa melakukan ini sebaliknya, tapi saya pikir ini akan menjadi solusi terbaik di sini.


Langkah 41

Navigasi bawah adalah tugas yang mudah sekarang. Kita perlu lakukan adalah menambahkan logo dan beberapa pemberitahuan hak cipta dan navigasi berulang kecil yang dibungkus dalam unordered list. Kami memiliki kami markup yang siap, sekarang kita perlu CSS untuk itu. Berikut adalah kode CSS:

1
 
2
#footer_nav .center a.footer_logo{ float: left; display:block; width:25px; height:16px; background: transparent url(../images/logo_footer.png) no-repeat; text-indent:-9999px; overflow:hidden;} 
3
#footer_nav .center p { float:left; font-size:1.1em; color:#848484; padding:0 0 0 20px; } 
4
#footer_nav .center ul { float:right;} 
5
#footer_nav .center ul li{ float:left; margin:0 20px 0 0; } 
6
#footer_nav .center ul li a { font-size:1.1em; text-transform:uppercase; color:#848484;} 
7
#footer_nav .center ul li a:hover { color:#505457;} 
8
#footer_nav .center ul li a:active { color:#505457;}

Langkah 42 - apa tentang IE?

Ya, kita perlu untuk memperbaiki beberapa masalah pada IE7 dan IE6. Untuk melakukan ini, kita perlu melihat unsur-unsur yang tidak ditampilkan dengan benar di kedua browser pertama. Aku tidak akan menjelaskan banyak cara memperbaiki bug di IE, tetapi saya hanya bisa mengatakan bahwa itu terutama datang ke bawah untuk menyesuaikan margin dan padding. Ada juga beberapa sumber daya umum IE bug dan bagaimana untuk memperbaikinya:

Pertama meletakkan sedikit kode di dalam kepala dokumen kami.

1
 
2
<!--[if IE 6]><link rel="stylesheet" href="css/ie6.css" type="text/css" ><![endif]--> 
3
<!--[if IE 7]><link rel="stylesheet" href="css/ie7.css" type="text/css" ><![endif]-->

Langkah 43

Membuat ie6.css dan ie7.css dan menyimpannya di dalam folder "css" dimana main.css juga disimpan. Untuk ie7.css paste kode ini:

1
 
2
div { overflow:hidden;}  
3
 
4
.signup { float:right; width:87px; height:30px; display:block; margin:-25px 0 0 0; background:transparent url(i/button_signup.png) no-repeat; text-indent:-9999px; overflow:hidden;} 
5
.login {float:right; margin:-15px 10px 0 0;} 
6
 
7
.description{ float:left; width:100%;} 
8
 
9
ul.listing{ float:left; margin:12px 60px 28px 10px; padding:0;} 
10
ul.listing li{ list-style-image: none; background-image:url(i/ico_li.png); background-repeat: no-repeat; background-position: left center; padding:0 0 2px 25px; margin:0 0 5px 0; font-size:1.2em;} 
11
 
12
.column .ad{ float:left; display:block;  width:88px; height:88px; border:1px solid #fff; padding:5px; margin:0 0 15px 0; background:#eaeaea;} 
13
.column .ad_odd { float:left; display:block;  width:88px; height:88px; border:1px solid #fff; padding:5px; margin:0 15px 0 0; background:#eaeaea; clear:left;} 
14
 
15
#searchform {float: right; margin:30px 0 0 460px; padding:0; background: url(i/bg_search.png) no-repeat;} 
16
 
17
 
18
 #blogSliderWrap {   
19
background: none;   
20
width: 1167px;   
21
position: relative;   
22
overflow: hidden;   
23
background:transparent url(i/bg_tabs.png) no-repeat 30px 58px; 
24
}   
25
 
26
 
27
   
28
#blogSlider {   
29
background: none;   
30
width: 960px;   
31
position:relative; 
32
padding: 0;   
33
margin: 0; 
34
margin-left:115px; 
35
 } 
36
  
37
.stripNav {   
38
 margin: 0;   
39
 top: 0px;  
40
}   
41
 
42
.signup { 
43
	margin-top:10px; 
44
} 
45
 
46
.login { 
47
	margin-top:14px; 
48
} 
49
 
50
.column_odd #tweeter a.follow { 
51
	margin-top:400px; 
52
	float:left; 
53
}

Dan ini adalah ie7.css:

1
 
2
div { overflow:hidden;}  
3
 
4
.signup { float:right; width:87px; height:30px; display:block; margin:-25px 0 0 0; background:transparent url(i/button_signup.png) no-repeat; text-indent:-9999px; overflow:hidden;} 
5
.login {float:right; margin:-15px 10px 0 0;} 
6
 
7
.description{ float:left; width:100%;} 
8
 
9
ul.listing{ float:left; margin:12px 60px 28px 10px; padding:0;} 
10
ul.listing li{ list-style-image: none; background-image:url(i/ico_li.png); background-repeat: no-repeat; background-position: left center; padding:0 0 2px 25px; margin:0 0 5px 0; font-size:1.2em;} 
11
 
12
.column .ad{ float:left; display:block;  width:88px; height:88px; border:1px solid #fff; padding:5px; margin:0 0 15px 0; background:#eaeaea;} 
13
.column .ad_odd { float:left; display:block;  width:88px; height:88px; border:1px solid #fff; padding:5px; margin:0 15px 0 0; background:#eaeaea; clear:left;} 
14
 
15
#searchform {float: right; margin:30px 0 0 460px; padding:0; background: url(i/bg_search.png) no-repeat;}

Langkah 44 - apa tentang transparansi dalam IE6?

Kami memiliki obat untuk itu terlalu ;). Ada beberapa IE6 PNG memperbaiki skrip yang tersedia di internet tapi saya ingin menggunakan "DD terlambat" PNG fix. Ini jarang mengacaukan IE6 dan mudah untuk menerapkan. Pertama pergi ke website ini dan download script. Untuk membuat pekerjaan yang kita perlu komentar bersyarat lain di kepala dokumen kami.

1
 
2
<!--[if IE 6]> 

3
<script src="js/DD_belatedPNG_0.0.7a.js" type="text/javascript"></script> 

4
 <script src="js/png_fix_elements.js" type="text/javascript"></script> 

5
<![endif]-->

Selanjutnya membuka "png_fix_elements.js" dan mengedit dalam. Anda perlu menentukan semua id dan Class unsur-unsur yang memiliki PNG transparan diterapkan untuk itu.

1
 
2
DD_belatedPNG.fix 
3
('#top_light1,h1 a,#top_light2,.tagline,.right_margin_top,.getquote,.portfolio,#blogSliderWrap,#top_light5,.column .date,.column .recent_comment,#footer_nav .center a.footer_logo,.stripNav li.tab1 a.current,.stripNav li.tab2 a.current,.stripNav li.tab3 a.current,.stripNav li.tab4 a.current,#top_light4,.stripNav li.tab1 a,.stripNav li.tab2 a,.stripNav li.tab3 a,.stripNav li.tab4 a,.featured, #footer .center .column_odd #tweeter');

That's it!

Wow, itu sudah lama dan kelelahan tutorial di mana Anda belajar bagaimana kode sebuah website dari nol. Kami menyentuh hampir setiap topik dalam proses ini. Dari mengatur folder, menganalisis Desain, mendefinisikan struktur markup, mempersiapkan PSD, mengiris gambar dan pengkodean. Saya harap Anda telah menikmati seperti yang saya lakukan.

Jika Anda tertarik dalam pengkodean situs penuh, desain tersedia di Themeforest.net

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
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.