Dua bulan sekali, kita kembali beberapa pembaca kami posting favorit dari sepanjang sejarah Nettuts +.
Hari ini saya akan membawa Anda melalui seluruh proses saya mendapatkan dari Photoshop untuk menyelesaikan HTML. Kita akan membuat satu set 4 maket PSD situs web yang akhirnya akan menjadi sebuah tema WordPress. Sebuah Tutorial yang besar, jadi jika kamu dapat mengikuti setiap langkah hingga selesai, pastikan kamu memiliki peberapa jam untuk beristrahat!
Demo
Jika Anda seperti saya, Anda mungkin suka melihat hasil akhir. Anda dapat melihat empat file-file HTML akhir dengan mengikuti link ini:
Men-download file
Selain itu Anda dapat men-download full HTML/CSS/Image sumber file di sini.
Apa yang sedang kita bangun
Seperti yang Anda mungkin atau mungkin tidak tahu, aku sudah (sangat lambat) menulis buku tentang WordPress tema. Apa yang kita bangun adalah benar-benar HTML yang saya gunakan dalam buku untuk membangun tema contoh utama. Akhir set tema disebut Creatif. Anda dapat melihat 4 mockup yang ditampilkan dalam screenshot di bawah ini (klik untuk mendapatkan versi yang lebih besar).
Bagian 1 - membangun kerangka kerja dan halaman pertama
Tidak seperti sebelumnya situs membangun tutorial ini menutupi template ukuran yang layak. Jadi kita akan mengambil bagian dalam tahap ini. Pertama, kita akan buat kerangka, maka halaman pertama, kemudian halaman pengganti, kemudian skema warna alternatif.
Langkah 1 - bersiap-siap
Jadi pertama-tama kita boot editor kode kami pilihan. Saya sebenarnya menggunakan Dreamweaver biasanya (dan Textmate kadang-kadang). Saya menemukan beberapa alat yang cukup layak untuk kode dan beberapa fitur yang saya benar-benar digunakan untuk (khususnya Find + Replace dengan cepat <img> menghubungkan). Jika Anda menggunakan Dreamweaver, saya sarankan menyiapkan "Situs".
Dalam setiap kasus hal pertama yang harus dilakukan adalah membuat struktur direktori dan bersiap-siap untuk membangun. Saya biasanya memiliki direktori /images/ dan direktori /scripts/, dan kemudian semua CSS dan HTML di root.
Langkah 2 - Layout awal
Hal pertama yang akan kita lakukan adalah letak keseluruhan cepat dalam HTML dengan beberapa barebones CSS hanya untuk memastikan kita punya dasar yang kokoh. Kami juga dapat memeriksa itu di browser utama (IE7, IE6, Firefox, Safari) hanya untuk memastikan kita berada pada hal pijakan yang solid. Tidak ada yang lebih buruk daripada kembali ke awal untuk memperbaiki masalah kompatibilitas browser. Hal ini jauh lebih baik untuk melakukannya disaat melanjutkan.
Jadi kita sedang membangun mockup pertama, kita dapat melihat beberapa hal:
- Desain berpusat. Yang segera memberitahu kita kita harus bungkus dalam sebuah wadah dan kemudian pusat kontainer itu.
- Pada dasarnya desain adalah seri horisontal blok. Kadang-kadang blok memiliki dua kolom, kadang-kadang satu. Jadi kita bisa melakukannya sebagai rangkaian<div>' s. Hal ini baik karena kita dapat mencampur dan mencocokkan elemen ke halaman yang berbeda seperti yang Anda lihat kemudian.
- Kami memiliki footer yang merupakan warna yang berbeda. Ini berarti latar belakang harus warna itu, dalam kasus membentang browser pengguna. Jadi footer akan perlu duduk di sebuah wadah yang berbeda untuk hal-hal utama.
Ini adalah tata letak HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Creatif</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="main">
<div class="container">
<div id="header">
Logo / Menu
</div>
<div id="block_feature">
Featured Content
</div>
<div id="block_content">
Content
</div>
</div>
</div>
<div id="footer">
<div class="container">
Footer Stuff Goes in Here
</div>
</div>
</body>
</html> Seperti yang Anda lihat ada dua segmen: daerah #main dan daerah #footer. Di dalam setiap kita memiliki<div class="container">elemen yang akan tetap lebar dan berpusat.</div> Kemudian dalam wadah utama kita hanya memiliki urutan<div>' s. Sekarang mari kita menambahkan sedikit CSS sebagai berikut:
body {
margin:0px; padding:0px;
background-color:#131211;
}
#main {
background-color:#c4c0be;
}
#footer {
color:white;
}
.container {
width:950px;
margin:0 auto;
border:1px solid red;
} Jadi kami menetapkan warna latar belakang tubuh untuk coklat gelap sebagai footer. Kemudian daerah #main memiliki latar belakang yang lebih ringan. Akhirnya Anda dapat melihat .container elemen memiliki lebar 950px dan berpusat menggunakan margin: auto. Saya juga telah menambahkan perbatasan(borde) merah sehingga Anda dapat melihat mana elemen pada halaman.
Anda dapat melihat tata letak di sini, atau lihat gambar di bawah.
Langkah 3 - Tambahkan beberapa gambar latar belakang
Jadi layout kita mencari sebuah bentuk kapal. Unsur-unsur utama yang diposisikan, yang hanya masalah melalui dan styling semua terserah, tidak bisa lebih mudah :-).
Hal pertama yang kita butuhkan adalah beberapa gambar. Anda dapat membuat diri ini jika Anda memiliki PSD berlapis, atau hanya ambil download ZIP dan Anda akan menemukan beberapa buatan saya sebelumnya!.
Berikut adalah screenshot dari saya menyimpan gambar pertama - latar belakang besar JPG. Saya menggunakan gambar latar belakang yang besar ini untuk mendapatkan itu menyoroti gradien radial, maka aku akan menggunakan irisan tipis 1px untuk mengisi sisi kiri dan kanan hingga membentang.
Demikian pula kita akan menciptakan sebuah gambar latar belakang untuk footer sepanjang perbatasan antara itu dan area utama (Anda dapat menemukan bahwa gambar dalam ZIP file, itu disebut background_footer.jpg). Sekarang kami akan memperbarui file CSS untuk menghapus border merah dan menambahkan gambar latar belakang baru kami, sebagai berikut:
@charset "UTF-8";
/* Background-Styles */
body {
margin:0px; padding:0px;
background-color:#131211;
}
#main {
background:#c4c0be url(images/background_light_slice.jpg) repeat-x;
}
#main .container {
background-image:url(images/background_light.jpg);
background-repeat:no-repeat;
min-height:400px;
}
#footer {
background-image:url(images/background_footer.jpg);
background-repeat:repeat-x;
color:white;
padding:40px;
}
.container {
width:950px;
margin:0 auto;
position:relative;
} Dua hal yang perlu diperhatikan:
- Ada beberapa cara untuk menetapkan latar belakang. Dalam #main, saya telah menggunakan pemilih tunggal yang menetapkan tiga properti - warna, Gambar, gambar ulangi. Tapi Anda juga dapat mengatur setiap properti tersendiri seperti yang telah saya lakukan di #main .container dan #footer.
- Menyadari bahwa karena saya ingin menerapkan "background_light.jpg" gambar untuk<div class='container'>yang di dalam #main, tetapi tidak satu yang ada di dalam #footer, aku sudah menulis #main .container.</div> Dengan kata lain, itu hanya berlaku untuk unsur-unsur dengan kelas = 'wadah' yang berada di dalam elemen dengan id = 'main'.
Langkah 4 - pengujian di browser
Sejauh ini baik-baik saja. Jangan lupa untuk tes di browser yang berbeda. Di sini Anda dapat melihat di IE7 itu tampak baik-baik saja dan keren!
Langkah 5 - membuat sebuah Logo yang transparan
Berikutnya saya telah membuat elemen logo. Karena nanti kita akan menjalankan skema warna alternatif saya akan menggunakan latar belakang transparan PNG file. Anda dapat melakukan ini dengan mematikan latar belakang di Photoshop dan kemudian pergi ke File > Simpan untuk Web dan perangkat dan memilih PNG-24. Anda harus menyadari bahwa PNG-24 menghasilkan ukuran file yang cukup tinggi. It's OK untuk gambar kecil seperti ini, tapi untuk yang lebih besar dapat menjadi berat.
(Jika ada yang tahu bagaimana membuat PNG file terkompresi, meninggalkan komentar, karena aku cukup yakin ada cara untuk melakukannya, aku tidak tahu bagaimana!)
Bagaimanapun Anda dapat mengambil logo transparan PNG di sini.
Sekarang kami akan menambahkan logo kami dan juga menu di HTML ini:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Creatif</title>
<link href="step_2.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="images/favicon.ico" />
</head>
<body>
<div id="main">
<div class="container">
<div id="header">
<ul id="menu">
<li><a href="">Portfolio</a></li>
<li><a href="">Services</a></li>
<li><a href="">About</a></li>
<li><a href="">Testimonials</a></li>
<li><a href="">Request a Quote</a></li>
</ul>
<div id="logo">
<h1>Creatif</h1>
<small>A Family of Rockstar Wordpress Themes</small>
</div>
</div>
<div id="block_feature">
Featured Content
</div>
<div id="block_content">
Content
</div>
</div>
</div>
<div id="footer">
<div class="container">
Footer Stuff Goes in Here
</div>
</div>
</body>
</html> dan ini CSS tambahan:
#header {
padding-top:20px;
}
#logo h1, #logo small {
margin:0px;
display:block;
text-indent:-9999px;
}
#logo {
background-image:url(images/logo.png);
background-repeat:no-repeat;
width:194px;
height:83px;
}
ul#menu {
margin:0px; padding:0px;
position:absolute;
right:0px;
}
ul#menu li {
display:inline;
} Beberapa hal yang perlu diperhatikan:
- Bukan hanya menempatkan gambar logo dalam HTML, kita juga menambahkan <div id="logo"> dan dalam yang ditempatkan <h1> dengan judul. Kemudian menggunakan CSS yang telah kita buat teks menghilang dan bertukar untuk gambar logo. Ini memiliki beberapa manfaat SEO.
- Aku mengguanakan hanya untuk menetapkan teks untuk display: hidden, tetapi sebuah commenter jenis pada tutorial sebelumnya menunjukkan bahwa ini adalah praktik yang buruk dan lebih baik menggunakan indentasi teks. Jadi seperti yang Anda lihat saya * selalu* membaca komentar saya :-)
- Saya sudah ditempatkan menu dengan cepat, unstyled menggunakan daftar unordered. Dengan mengatur properti tampilan inline untuk<li>unsur-unsur, perubahan daftar seperangkat horisontal elemen... yay!
- Akhirnya karena kami<div class="container">elemen memiliki posisi: relatif, kita sekarang dapat menggunakan mutlak posisi di dalam dan mengatur kanan: 0px untuk menu dan akan selaras ke kanan. Hal ini bagus untuk tema WordPress karena orang menciptakan halaman baru menu akan memperpanjang, dan cara ini akan tetap selaras.
Langkah 6 - memperbaiki transparansi dalam IE6
Sekarang satu-satunya masalah dengan Transparan PNGs adalah bahwa Internet Explorer 6 teman kami tidak mendukung mereka! Untungnya itu relatif mudah tetap berkat artikel ini saya menemukan - Jalan termudah untuk memperbaiki PNG untuk IE6. Kami hanya men-download script dan tambahkan baris ini di CSS:
/* Fix up IE6 PNG Support */
img, #logo { behavior: url(scripts/iepngfix.htc); } Sayangnya bagi saya meskipun saya salinan pengujian IE6 yang karena aku pada Mac melalui Darwine - tidak mengenali perbaikan... Jadi saya tidak tahu jika tidak bekerja :-)
Jadi pada titik ini aku berhenti membayar perhatian untuk IE6 :-) Aku akan harus mencoba namun cara lain untuk tampilan IE6, mungkin melalui paralel.
Dalam setiap kasus, berikut adalah screenshot dari apa yang kita dapatkan di IE6 ketika transparansi adalah * tidak * bekerja...
Langkah 7 - Memperbaiki Menu
Sekarang menu kami masih mencari sangat jelek, jadi mari kita tambahkan beberapa gaya untuk menyelesaikannya sebagai berikut:
ul#menu {
margin:0px; padding:0px;
position:absolute;
right:0px;
}
ul#menu li {
display:inline;
margin-left:12px;
}
ul#menu li a {
text-decoration:none;
color:#716d6a;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
font-weight:bold;
text-transform:uppercase;
}
ul#menu li a.active, ul#menu li a:hover {
color:#211e1e;
} Tidak ada yang sangat menarik di sini kecuali bahwa kita sudah didefinisikan "aktif" gaya yang sama: hover gaya (yaitu itu adalah warna yang lebih gelap). Itu berarti kita dapat menulis <a href="" class="active">dan link akan menjadi gelap. Kemudian di WordPress kita akan membuatnya sehingga Anda dapat memberitahu apa halaman Anda berada di pada waktu tertentu.
Langkah 8 - menambahkan konten Item Portofolio Terpilih
Sekarang kita memiliki pondasi halaman yang tetap, sekarang saatnya untuk mulai menambahkan konten blok. Seperti yang saya sebutkan sebelumnya kita akan membuat situs ini sebagai serangkaian dipertukarkan konten blok. Yang pertama adalah "Menampilkan proyek" blok. Jadi mari kita tambahkan beberapa HTML:
<div id="block_featured" class="block">
<span class="block_inside">
<div class="image_block">
<img src="images/sample_feature.jpg" />
</div>
<div class="text_block">
<h2>Eden Website Design</h2>
<small>in <a href="">web design</a> tagged <a href="">corporate</a>, <a href="">web2</a></small>
<p>And then a short description of the website would go in here. Something saying maybe what awesome skills I used on the project and how happy the client was. </p>
<br />
<a href="" class="button">View Project</a>
</div>
</span>
</div> Sehingga kode berjalan di bawah<div id="header"></div>kode dari langkah-langkah sebelumnya. Dan unstyled itu tampak seperti ini:
Ada dua hal yang penting untuk dicatat di sini:
- Anda akan melihat bahwa kita memiliki<div class="block">segera diikuti <span class="block_inside">. Hal ini karena kotak kita menggambar memiliki perbatasan ganda, pertama ada perbatasan abu-abu gelap 1px, kemudian dalam yang 1px putih perbatasan. Sehingga memiliki dua elemen .jadi kita dapat memiliki perbatasan pada masing-masing. Aku tidak tahu mengapa aku digunakan <span>di dalam, dan seperti yang Anda akan lihat kemudian kami angin mengubah :-)
- Mana kita memiliki tombol Lihat proyek, daripada menggunakan gambaran, kita akan membuat kelas 'tombol' dan kemudian menerapkannya ke teks biasa link. Hal ini membuat untuk yang sangat sederhana, dapat digunakan kembali tombol tampilan dan nuansa.
Langkah 9 - menambahkan beberapa gaya dasar
Sekarang kita menerapkan styling beberapa dasar seperti ini:
/*
Block-Styles
*/
.block {
border:1px solid #a3a09e;
background-color:#ffffff;
margin-bottom:20px;
}
.block_inside {
display:block;
border:1px solid #ffffff;
background: #ffffff url(images/background_block_slice.jpg) repeat-x;
padding:30px;
overflow:auto;
}
.image_block {
border:1px solid #b5b5b5;
background-color:#d2d2d2;
padding:5px;
float:left;
}
.image_block img {
border:1px solid #b5b5b5;
}
.text_block {
float:left;
width:430px;
margin-left:30px;
} Jadi seperti yang saya sebutkan di atas kita memiliki kelas .block yang hanya menetapkan margin dan border bawah. Kemudian segera di dalam kita memiliki elemen .block_inside yang memiliki perbatasan putih, tipis slice latar belakang (untuk memberikan gradien yang samar), beberapa padding dan akhirnya nilai meluap.
Kami memiliki overflow: auto karena kita akan memiliki dua unsur yang mengapung di dalam. Aku biasa menggunakan kliring<div>tetapi seseorang dalam komentar saya sebelumnya menunjukkan bahwa ini bekerja sama dengan baik dan jauh lebih bersih!
Kemudian di dalam kami memiliki kelas .image_block yang memberikan citra kita perbatasan ganda (satu di<div>dan satu di <img> itu sendiri) dan yang adalah mengambang kiri dengan kami .text_block utama juga melayang kiri untuk membentuk sebuah mini berbentuk kolom layout.
Jadi layout kita sekarang terlihat seperti ini:
Langkah 10 - menambahkan gaya teks
Sekarang Style teks adalah seluruh tempat saat ini. Itu semacam tampak OK dalam gambar sebelumnya karena Firefox yang saya gunakan gagal untuk Sans-Serif font. Tapi jika aku screenshotted IE Anda akan melihat Serif 'd huruf. Jadi kita harus mendapatkan teks tersortir sekarang. Kami akan menambahkan potongan ini CSS stylesheet kami:
body {
margin:0px; padding:0px;
background-color:#131211;
font-family:Arial, Helvetica, sans-serif;
color:#7f7d78;
font-size:13px;
line-height:19px;
}
/*
Text-Styles
*/
h2 {
margin:0px 0px 10px 0px;
font-size:36px;
font-family:Helvetica, Arial, Sans-serif;
color:#000000;
}
small {
color:#595856;
font-weight:bold;
font-size:11px;
display:block;
margin-bottom:15px;
}
a {
color:#007de2;
text-decoration:none;
}
a:hover { text-decoration:underline; }
p { margin: 0px 0px 15px 0px; }
a.button {
background:#32312f url(images/button_bg.jpg) repeat-x;
padding:5px 10px 5px 10px;
color: #ffffff;
text-decoration: none;
border:1px solid #32312f;
text-transform:uppercase;
font-size:9px;
line-height:25px;
}
a.button:hover {
background:#007de2 url(images/button_bg_o.jpg) repeat-x;
border-color:#007de2;
} Jadi:
- Pertama kali aku telah memperbarui tag badan untuk memiliki default font, warna, ukuran dan tinggi baris (line-height).
- Maka kami telah membuat<h2>gaya yang perbaikan margin dan menyetel font untuk Helvatica.
- Kami juga telah menciptakan <small>gaya untuk subpos (seperti kategori apa yang posting adalah dll)
- Kami telah menciptakan sebuah gaya link dan link: hover gaya
- Kami ulangi <p> styling sehingga margin tetap menjadi default yang bodoh
- Akhirnya, kami telah menciptakan kelas tombol . Catatan bahwa saya sudah didefinisikan sebagai "a.button", atau dengan kata lain semua <a>tag dengan kelas = "tombol". Mengapa tidak saya hanya membuatnya ".button"? Baik kemudian di sana adalah kesempatan baik bahwa saya akan membuat kelas tombol kedua<input>'s dan itu akan sedikit berbeda. Jadi dengan cara ini mereka tidak sengaja berinteraksi.
- Di kelas tombol, Anda akan melihat kami telah membuat beberapa padding, perbatasan, gambar latar belakang, gaya hover dan tinggi baris atribut... menunggu atribut tinggi baris? Yeah Sayangnya ini adalah memperbaiki untuk IE yang memotong tombol kita.
dengan Unsur tambahan styling, halaman mulai untuk mengambil bentuk!
Langkah 11 - menambahkan pita
Salah satu hal rapi tentang desain ini adalah strip pita biru kecil di sudut kanan. Berkat campuran CSS, transparan PNG file dan positioning mutlak, ini benar-benar mudah untuk ditambahkan. Jadi pertama kita perlu membuat gambar. Sekali lagi kami membuat gambar dengan latar belakang transparan dan menyimpannya sebagai PNG-24, berikut adalah gambarnya:
Selanjutnya kita perlu untuk menempatkan gambar dalam HTML kita, kita dapat melakukannya seperti ini:
<div class="block">
<img src="images/ribbon_featured.png" class="ribbon"/>
<span class="block_inside">
<div class="image_block">
<img src="images/sample_feature.jpg" />
</div>
<div class="text_block">
<h2>Eden Website Design</h2>
<small>in <a href="">web design</a> tagged <a href="">corporate</a>, <a href="">web2</a></small>
<p>And then a short description of the website would go in here. Something saying maybe what awesome skills I used on the project and how happy the client was. </p>
<br />
<a href="" class="button">View Project</a>
</div>
</span>
</div> Sehingga Anda dapat melihat <img> tag ada di baris kedua. Perhatikan aku telah diberi kelas = "pita" dan meletakkannya di dalam elemen .block, tetapi di luar unsur .block_inside. Hal ini karena jika kita melakukannya di dalam .block_inside itu mengacaukan overflow: auto properti yang telah ditetapkan sebelumnya. Bagaimanapun tepat sekarang ini akan hanya mengacaukan tata letak kami, jadi mari kita menambahkan beberapa Style:
.block {
border:1px solid #a3a09e;
background-color:#ffffff;
margin-bottom:20px;
position:relative;
}
.ribbon {
position:absolute;
top:-3px;
right:-3px;
} Anda dapat melihat bahwa kita telah:
- Menambahkan sebuah posisi: relatif atribut .block elemen. Ini adalah agar kita dapat menggunakan posisi mutlak dalam dan memilikinya relatif terhadap elemen .block (dan tidak seluruh halaman)
- Sekarang Kita set image menjadi muncul 3px melewati tepi kanan dan 3px melewati tepi atas.
Mudah! Kembali pada hari, kita akan memiliki menggunakan beberapa super rumit<table>tata letak untuk mencapai efek yang sama. Berikut adalah bagaimana itu tampak sekarang:
Langkah 12 - membuat blok kedua
Dengan pita yang ditambahkan, elemen blok pertama kami telah lengkap! Sekarang saatnya untuk memulai berikutnya<div>blok. Satu ini akan memiliki teks tentang tema dan daftar proyek-proyek yang terakhir. Jadi pertama kita menambahkan beberapa HTML:
<div id="block_portfolio">
<div id="portfolio_items">
<div class="mini_portfolio_item">
<div class="block_inside">
<img src="images/sample_mini_portfolio.jpg" class="thumbnail" alt="PSDTUTS" />
<h3>PSDTUTS Theme Design</h3>
<p>Website design for leading photoshop tutorial site and creation and maintenance of Wordpress theme. </p>
<a href="#" class="button">View Project</a>
</div>
</div>
<div class="mini_portfolio_item">
<div class="block_inside">
<img src="images/sample_mini_portfolio.jpg" class="thumbnail" alt="PSDTUTS" />
<h3>PSDTUTS Theme Design</h3>
<p>Website design for leading photoshop tutorial site and creation and maintenance of Wordpress theme. </p>
<a href="#" class="button">View Project</a>
</div>
</div>
<div class="mini_portfolio_item">
<div class="block_inside">
<img src="images/sample_mini_portfolio.jpg" class="thumbnail" alt="PSDTUTS" />
<h3>PSDTUTS Theme Design</h3>
<p>Website design for leading photoshop tutorial site and creation and maintenance of Wordpress theme. </p>
<a href="#" class="button">View Project</a>
</div>
</div>
</div>
<div id="text_column">
<h2 id="text_title">Creatif is a WordPress portfolio theme for designers and creatives</h2>
<p>You can use it to quickly turn WordPress into a portfolio website. Not familiar with WordPress? Fear not, the theme accompanies a book called <a href="#">How to Be a Rockstar Wordpress Designer</a> by Rockstar Resources due for release in 2008.</p>
<p>The book teaches you to use WordPress theming to take advantage of this flexible CMS product to create dynamic sites.</p>
<p>And as if that’s not enough, you can see a photoshop to HTML tutorial on designing the theme over at <a href="http://psdtuts.com">PSDTUTS</a> and <a href="http://nettuts.com">NETTUTS</a>.</p>
</div>
</div> Sehingga terlihat seperti banyak kode, tapi itu tidak benar-benar. Mari kita pergi menujunya:
- Pertama kami telah menciptakan sebuah wadah<div id="block_portfolio">untuk membungkus segmen kode
- Selanjutnya kita punya<div id="portfolio_items">yang berisi tiga identik<div class="mini_portfolio_item">' s. Kita akan bicara tentang ini dalam kedua.
- Selanjutnya kita memiliki<div id="text_column">yang diisi dengan beberapa teks dan<h2>menuju.
- Apa yang akan kita lakukan adalah mengapung kolom teks dan portofolio item berdampingan untuk membentuk dua kolom konten.
- Kita akan menggantikan yang<h2>dengan gambar latar belakang.
- Dan kita akan gaya atas orang-orang divs mini_portfolio_item untuk terlihat bagus menggunakan serupa ganda efek perbatasan seperti yang kita lakukan sebelumnya.
Inilah CSS nya:
/*
Portfolio-Home-Styles
*/
#block_portfolio {
overflow:auto;
margin-bottom:20px;
}
#portfolio_items {
width:615px;
margin-right:25px;
float:left;
}
#text_column {
float:right;
width:310px;
}
#text_column h2#text_title {
text-indent:-9999px;
background-image:url(images/creatif.jpg);
background-repeat:no-repeat;
width:310px;
height:129px;
}
.mini_portfolio_item {
border:1px solid #a3a09e;
margin-bottom:10px;
}
.mini_portfolio_item .block_inside {
background:none; background-color:#e2dddc;
padding:25px 30px 15px 30px;
}
.mini_portfolio_item .thumbnail { float:left; margin-right:20px; border:1px solid #979390; } OK lagi, tampak seperti banyak, tetapi itu tidak terlalu buruk. Mari kita pergi melalui langkah demi langkah:
- Pertama kita sekali lagi telah digunakan overflow: auto pada elemen utama #block_portfolio. Itu karena kita lagi mempunyai dua kolom yang melayang dan jika kita tidak melakukan ini, mereka akan lari dari footer.
- Selanjutnya kami telah menetapkan #portfolio_items untuk mengapung ke kiri, memiliki margin untuk memisahkan dari kolom teks dengan lebar 615px.
- #text_column diatur ke mengapung ke kanan dengan lebar 310px.
- Dalam kolom teks kami sekali lagi telah melakukan beberapa tipu-daya yang dengan menambah Tag dimana kami menggunakan indentasi-teks besar untuk membuat teks hilang dan kemudian menggunakan gambar latar belakang.
Selanjutnya kami memiliki tiga gaya definisi untuk mini_portfolio_item elemen-elemen sebagai berikut:
- Pertama kita membuat perbatasan gelap 1px dan margin antara mereka
- Selanjutnya kita mendefinisikan gaya .block_inside yang sesuai dengan elemen-elemen ini. Ingat .block_inside didefinisikan sebelumnya ketika melakukan wilayah proyek fitur. Jadi di sini kita adalah mengganti gambar latar belakang, mengubah warna latar belakang dan mengubah padding.
- Akhirnya kami membuat gambar thumbnail mengapung kiri dan memiliki perbatasan.
Jadi semua di dalam semua itu tampak seperti ini:
Langkah 13 - menambahkan pita.
Sekarang kami ingin menambahkan pita "Proyek" item paling atas. Untuk melakukan ini kita hanya sebuah slot, dalam satu posisi dalam HTML seperti sebelumnya, seperti ini:
<div class="mini_portfolio_item">
<img src="images/ribbon_recent.png" class="ribbon" alt="Recent Projects"/>
<div class="block_inside">
<img src="images/sample_mini_portfolio3.jpg" class="thumbnail" alt="AudioJungle" />
<h3>AudioJungle Site Design</h3>
<p>Website design for leading photoshop tutorial site and creation and maintenance of Wordpress theme. </p>
<a href="#" class="button">View Project</a>
</div>
</div> Lalu kami tambahkan posisi: relatif atribut mini_portfolio_item elemen seperti ini:
.mini_portfolio_item {
border:1px solid #a3a09e;
margin-bottom:10px;
position:relative;
} Tapi sesuatu yang aneh terjadi... Sementara sisi kanan terlihat benar, atas mendapatkan dipotong, seperti yang Anda lihat dalam gambar:.
Alasannya adalah bahwa elemen yang mini_portfolio_item kami duduk di dalam memotongnya Jadi kami memeriksa dan melihat bahwa mini_portfolio_item berada di<div id="portfolio_items">. Jadi solusinya cukup mudah, kami menambahkan 3px padding ke puncak yang cukup ruang untuk kami pita untuk menunjukkan melalui. Inilah CSS disesuaikan:
#portfolio_items {
width:615px;
margin-right:25px;
float:left;
padding-top:3px;
} Langkah 14 - Finishing item portofolio
Akhirnya aku sudah bertukar dalam beberapa gambar dan judul sehingga kita dapat melihat tampilan laman dengan 3 item yang berbeda daripada yang lainnya. Kemudian saya juga memutuskan untuk menyingkirkan tombol Lihat proyek dan hanya memiliki link teks. Ini tampak agak bersih dan kurang sibuk. Jadi di sini adalah bagian item akhir portofolio (ditunjukkan di Safari, jangan lupa untuk menjaga pengujian di browser yang berbeda!):
Langkah 15 - menambahkan konten Footer
Sekarang hanya ada satu bagian lain ke halaman kami: footer! Mari kita tambahkan beberapa konten teks itu:
<div id="footer">
<div class="container">
<div class="footer_column long">
<h3>Designed by Collis Ta’eed, do with this as you please</h3>
<p>You can read a photoshop tutorial for creating the design at <a href="http://psdtuts.com">PSDTUTS</a>, You can read a PS->HTML tutorial for creating the site at <a href="http://nettuts.com">NETTUTS</a> and you can learn how to turn the HTML into a Wordpress theme in the upcoming book <a href="http://freelanceswitch.com/book">How to be a Rockstar Wordpress Designer</a></p>
</div>
<div class="footer_column">
<h3>More Links</h3>
<ul>
<li><a href="http://vectortuts.com">VECTORTUTS</a></li>
<li><a href="http://activeden.net">FlashDen</a></li>
<li><a href="http://audiojungle.net">AudioJungle</a></li>
<li><a href="http://freelanceswitch.com">FreelanceSwitch</a></li>
<li><a href="http://faveup.com">FaveUp</a></li>
</ul>
</div>
<div class="footer_column">
<h3>RSS</h3>
<ul>
<li><a href="">RSS Feed</a></li>
<li><a href="">What is RSS?</a></li>
</ul>
</div>
</div>
</div> Beberapa hal yang perlu diperhatikan:
- Saya telah membuat tiga<div class="footer_column">'s untuk rumah konten footer, kami akan mengapung ke tempat kedua.
- Sejak kolom pertama lebar berbeda aku sudah memberikan kelas kedua disebut "panjang". Perhatikan bahwa Anda mengatur dua kelas seperti ini: kelas = "kelas 1 class2", tidak seperti ini: kelas = "kelas 1" class = "class2" yang tidak valid di markup.
- Di dalam kolom saya telah menggunakan daftar <ul>dan<h3>Tag untuk judul. Hal ini selalu baik untuk menggunakan markup semantik yang bagus, baik karena itu membuat lebih mudah dibaca, dan karena pencari ingin melihat judul tersebut dan daftar semua ditetapkan dengan benar.
Berikut adalah bagaimana tampaknya!
Langkah 16 - Styling Footer
Styling footer pekerjaan yang cukup sederhana, di sini adalah kode kita perlu:
/*
Footer-Styles
*/
#footer {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
}
.footer_column {
float:left;
width:120px;
margin-right:30px;
}
#footer .long {
width:610px;
}
#footer h3 {
color:#e2dddc;
text-transform:uppercase;
font-size:10px;
}
.footer_column ul li, .footer_column ul {
list-style:none;
margin:0px;
padding:0px;
} Akan melalui:
- Pertama kita membuat font untuk wilayah #footer
- Kemudian kita menetapkan semua kolom untuk mengapung dengan lebar standar 120px
- Kita override ini lebar untuk kolom .long., Perhatikan bahwa aku telah menetapkan "#footer .long" bukan hanya ".long". Alasan saya melakukan hal ini adalah bahwa "panjang" adalah jenis nama generik yang saya dapat menggunakan kembali kemudian di tempat yang lain, jadi itu adalah ide yang baik untuk menentukan lebih jelas.
- Akhirnya<h3>dan <ul>tag mendapatkan beberapa sederhana gaya.
Langkah 17 - menambahkan Favicon!
Kita Hampir selesain denga page pertama. Saatnya menambah sebuah Kesenangan Pertama a Favicon. Ini adalah orang-orang ikon kecil yang muncul di bar browser Anda. Aku tidak perlu sesuatu yang mewah, hanya sedikit hitam persegi dengan C untuk Creatif akan melakukannya dengan baik. Jadi pertama kita membuat sebuah persegi gambar seperti ini:
Ada banyak situs untuk membuat Favicons (kunjungi SixRevisions untuk daftar mereka) tetapi saya selalu menggunakan html-kit untuk alasan tertentu. Cukup upload Gambar dan Tekan Generate Favicon.ico.
Kemudian kita menghubungkan itu dengan baris HTML:
<link rel="shortcut icon" href="images/favicon.ico" />
Langkah 18 - memvalidasi!
Sekarang saatnya untuk memeriksa bahwa kami markup w3c valid! Jadi pergi ke Validator yang dimasukkan dalam kode dan antara jari-jari... dan :-( Kita tidak sah. Saya tidak berpikir saya sudah pernah berlaku pada percobaan pertama denga benar, saya memiliki beberapa kebiasaan buruk!
Melihat ke sana ada 14 kesalahan. Masalah nomor satu adalah bahwa ada alt teks pada salah satu gambar saya... whoops! Jadi kembali dan menambahkan mereka seperti:
<img src="images/ribbon_featured.png" class="ribbon" alt="Featured Project"/>
Seharusnya membenarkan banyak eror. Jadi sekarang kita menjalankan lagi dan... Ta-daah! Masih tidak valid. OK ini terlihat sedikit terlihat lebih rumit:
Untungnya kesalahan 8 yang tersisa adalah sebenarnya masalah yang sama. Pada dasarnya saya telah menggunakan unsur inline (khusus <span class="block_inside">) dan kemudian mencoba untuk menempatkan blok elemen-elemen tingkat seperti<div>di dalam. Rupanya itu tidak diperbolehkan... teriakan!
Untungnya itu mudah tetap, kita hanya mengubah setiap contoh <span class="block_inside">ke<div class="block_inside">. dan ... YAY! Kita melawatinya :-) .
Selesai Bagian 1!
Ok kita sudah Sukses membuat basik page kita! Di sini Anda dapat melihat saya mengujinya di IE7 dan untungnya tidak ada bug.
Berikut adalah halaman selesai
Bagian 2 - membangun variasi
Dengan kerangka dasar kami di tempat kita berada sekarang siap untuk membangun halaman tambahan dan skema warna alternatif. Untungnya kami sudah berbaring dasar yang baik dan akan mampu membuat penggunaan banyak kode yang kita sudah menulis. Ini adalah mengapa sangat penting untuk merencanakan ke depan.
Jika Anda tidak berencana Anda dengan mudah dapat berakhir dengan banyak duplikasi, kode tambahan dan kebodohan lainnya.
Langkah 19 - membangun Blog Homepage
Halaman berikutnya kita akan membangun adalah blog homepage. Hal ini mirip dengan situs portofolio yang akan memiliki posting blog yang terpilih dan kemudian serangkaian blog posting di bawah ini. Akhirnya ini akan menjadi dua terkait WordPress themes - satu untuk portofolio, satu untuk blog.
Jadi pertama kita menduplikasi index.html kami - file kami telah bekerja di atas 'til sekarang, dan memanggil blog.html file baru.
Di blog.html kami kami pertama menghapus seluruh<div id="block_portfolio">. Kami akan mengganti blok dengan yang berbeda segera. Kemudian kita ganti<div id="block_featured">dengan blok baru untuk fitur blog posting yang hanya sedikit berbeda dan tampak seperti ini:
<div id="block_featuredblog" class="block">
<img src="images/ribbon_featuredblog.png" class="ribbon" alt="Featured Project"/>
<div class="block_inside">
<div class="image_block">
<img src="images/sample_blog.jpg" alt="New Blog"/>
</div>
<div class="text_block">
<h2>New Blog Design Launched</h2>
<small>on <a href="">april 13</a> in <a href="">web design</a> tagged <a href="">blogging</a></small>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla mi risus, tempor in, gravida quis, rutrum vitae, massa. Suspendisse congue, nibh et lacinia sodales. </p>
<p>Risus nulla fringilla enim, sit amet adipiscing sapien risus sed velit. Sed vitae justo. In quis lorem nec justo varius sodales. Nullam eleifend accumsan mi. Nunc at velit. Maecenas velit. </p>
<br />
<a href="" class="button">Read More</a>
</div>
</div>
</div> Jadi benar-benar semua yang saya lakukan adalah mengubah id tag block_featuredblog, gambar pita dan konten. Pada dasarnya meskipun ini adalah tata letak yang sama. Jadi mari kita melihat dan melihat bagaimana ini terlihat:
Langkah 20 - menyesuaikan beberapa CSS
Sehingga cukup banyak bekerja sebagian adalah, kami hanya akan membuat beberapa penyesuaian kecil untuk CSS seperti ini,:
#block_featuredblog .text_block { padding-top:5px; width:490px;}
h2 {
margin:0px 0px 10px 0px;
font-size:36px;
font-family:Helvetica, Arial, Sans-serif;
color:#000000;
line-height:39px;
letter-spacing:-1px;
}
Di sini saya sudah disesuaikan kelas "text_block" tetapi hanya ketika itu dalam elemen #block_featuredblog. Sekarang memiliki sedikit padding di atas dan lebih luas.
Dan juga Tambahkan line-height yang sesuai untuk heading dan sesuaikan text kerning dengan -1px Dan kita selesai dengan element ini! Sangat Mudah!
Langkah 21 - membuat Area konten utama
Membuat daerah ini konten adalah hal besar terakhir yang perlu kita lakukan benar-benar. Itu akan membentuknya tidak hanya bagian bawah halaman ini, tetapi juga dasar generik halaman (dengan beberapa penyesuaian tentu saja!). Pertama mari kita menempatkan beberapa HTML benar-benar dasar:
<div id="block_content">
<div id="content_area" class="block">
<div class="block_inside">
Content
</div>
</div>
<div id="sidebar">
<div class="block_inside">
Sidebar Content
</div>
</div>
</div> Jadi pada dasarnya apa yang kita ciptakan adalah sebuah wadah elemen-<div id="block_content">dan kemudian dalam yang kita punya dua blok yang kita akan mengapung ke kedua sisi. Anda akan melihat saya membuat penggunaan kami baik tua<div class="block_inside">unsur-unsur untuk menambahkan perbatasan ganda. Inilah CSS untuk membuat mereka duduk dengan benar:
/*
Block-Content-Styles
*/
#block_content {
}
#content_area {
width:665px;
float:left;
}
#sidebar {
float:left;
width:281px;
position:relative;
left:-1px;
margin-top:15px;
background-color:#e2dddc;
border:1px solid #a3a09e;
}
#sidebar .block_inside {
background:none;
background-color:#e2dddc;
} Akan melalui gaya:
- Kemudian kami telah memberikan kotak #content_area dan #sidebar kotak setiap lebar dan float .
- Berikutnya saya sudah pindah sidebar kiri oleh 1px menggunakan posisi: relatif. Aku melakukan ini sehingga perbatasan kiri akan tumpang tindih dan itu akan terlihat seperti itu adalah menonjol keluar.
- Selain itu saya telah menambahkan batas atas 15px sehingga sidebar tidak atas-blok. Sayangnya itu terlihat sedikit aneh, tapi ketika kita tambahkan sebuah konten itu akan membuatnya bagus.
- Saat ini tampak agak aneh, tetapi ketika kita menambahkan beberapa konten akan terlihat besar.
Langkah 22 - menambahkan konten
Sekarang kita menambahkan beberapa konten untuk kami dua elemen kepada gaya:
<div id="block_content">
<div id="content_area" class="block">
<div class="block_inside">
<h2>Working on a New Project</h2>
<small>on <a href="">april 13</a> in <a href="">web design</a> tagged <a href="">blogging</a></small>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla mi risus, tempor in, gravida quis, rutrum vitae, massa. Suspendisse congue, nibh et lacinia sodales. </p>
<p>Risus nulla fringilla enim, sit amet adipiscing sapien risus sed velit. Sed vitae justo. In quis lorem nec justo varius sodales. Nullam eleifend accumsan mi. Nunc at velit. Maecenas velit. <a href="#">Read More</a></p>
<div class="separator"></div>
<h2>Design Awards!</h2>
<small>on <a href="">april 13</a> in <a href="">web design</a> tagged <a href="">blogging</a></small>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla mi risus, tempor in, gravida quis, rutrum vitae, massa. Suspendisse congue, nibh et lacinia sodales. </p>
<p>Risus nulla fringilla enim, sit amet adipiscing sapien risus sed velit. Sed vitae justo. In quis lorem nec justo varius sodales. Nullam eleifend accumsan mi. Nunc at velit. Maecenas velit. <a href="#">Read More</a></p>
<div class="separator"></div>
<h2>This Site is Almost Complete Finally...</h2>
<small>on <a href="">april 13</a> in <a href="">web design</a> tagged <a href="">blogging</a></small>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla mi risus, tempor in, gravida quis, rutrum vitae, massa. Suspendisse congue, nibh et lacinia sodales. </p>
<p>Risus nulla fringilla enim, sit amet adipiscing sapien risus sed velit. Sed vitae justo. In quis lorem nec justo varius sodales. Nullam eleifend accumsan mi. Nunc at velit. Maecenas velit. <a href="#">Read More</a></p>
</div>
</div>
<div id="sidebar">
<img src="images/ribbon_browse.png" class="ribbon" alt="Featured Project"/>
<div class="block_inside">
<h3>Subscribe</h3>
<ul>
<li><a href="">RSS Feed</a></li>
<li><a href="">Email Updates</a></li>
</ul>
<h3>Categories</h3>
<ul>
<li><a href="">News</a></li>
<li><a href="">Marketing</a></li>
<li><a href="">General</a></li>
<li><a href="">Great Sites</a></li>
</ul>
<h3>Archives</h3>
<ul>
<li><a href="">June 2008</a></li>
<li><a href="">May 2008</a></li>
<li><a href="">April 2008</a></li>
<li><a href="">March 2008</a></li>
</ul>
</div>
</div>
<!-- a Clearing DIV to clear the DIV's because overflow:auto doesn't work here -->
<div style="clear:both"></div>
</div> OK disinni ada 3 hal penting yang perlu disebutkan:
- Pertama di daerah konten Anda akan melihat saya telah menambahkan posting blog dummy tiga dan di antara masing-masing adalah kosong<div class="separator">bahwa kita akan gaya lama menjadi garis tipis dengan beberapa spasi.
- Selanjutnya kami telah menambahkan gambar pita sidebar dengan cara yang sama seperti sebelumnya.
- Akhirnya saya telah menggunakan kliring<div>di bagian bawah. Sekarang sebelumnya dalam tutorial ini saya telah menggunakan overflow: auto; untuk berurusan dengan melayang kolom, tetapi ketika kita menambahkan margin-top di langkah sebelumnya untuk memindahkan sidebar macam-macam dengan limpahan dan menciptakan scrollbar. Jadi karena mungkin ada kesempatan ketika sidebar akan lebih lama dari kotak konten kami akan menggunakan metode ini kliring mengambang<div>di sebaliknya.
Sekarang kita akan menambahkan beberapa gaya dasar untuk memperbaikinya semuanya sebagai berikut:
#sidebar h3 {
font-size:20px;
line-height:23px;
}
#sidebar ul { margin:10px 0px 30px 0px; padding:0px; }
#sidebar ul li { list-style:none; margin:0px 0px 5px 0px; padding:0px; }
#sidebar ul li a { color:#7f7d78; }
#sidebar ul li a:hover { color:#0172dd; text-decoration:none; }
#content_area h2 { font-size:32px; line-height:31px; }
#content_area .separator {
border-top:1px solid #e3e3e3;
margin-top:40px;
padding-top:40px;
} Dua hal yang perlu diperhatikan:
- Diformat <ul>Daftar di sidebar untuk menghapus peluru poin dan ruang mereka keluar dengan baik
- Buat pemisah menggunakan margin dan padding bersama dengan 1px perbatasan
Dan itu saja, elemen #block_content kami lengkap! Anda dapat melihat kerja HTML di sini.
Langkah 23 - membuat generik Halaman
Membuat halaman akhir kami sangat mudah sekarang. Kami hanya duplikat blog.html kami dan menyebutnya page.html kali ini. Kemudian menghapus posting blog Terpilih dan mengubah HTML dari daerah #block_content sebagai berikut:
<div id="block_content">
<div id="content_area" class="block">
<div class="block_inside">
<h4>Services</h4>
<h2>Branding</h2>
<br />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla mi risus, tempor in, gravida quis, rutrum vitae, massa. Suspendisse congue, nibh et lacinia sodales. </p>
<p>Risus nulla fringilla enim, sit amet adipiscing sapien risus sed velit. Sed vitae justo. In quis lorem nec justo varius sodales. Nullam eleifend accumsan mi. Nunc at velit. Maecenas velit. <a href="#">Read More</a></p>
</div>
</div>
<div id="sidebar">
<img src="images/ribbon_navigation.png" class="ribbon" alt="Featured Project"/>
<div class="block_inside">
<h3>Services</h3>
<ul>
<li><a href="">Branding</a></li>
<li><a href="">Graphic Design</a></li>
<li><a href="">Web Development</a></li>
<li><a href="">Marketing</a></li>
</ul>
<h3>Related Portfolio Items</h3>
<ul>
<li><a href="">Eden Branding</a></li>
<li><a href="">FlashDen Logo Design</a></li>
<li><a href="">PSDTUTS Website</a></li>
</ul>
</div>
</div>
<!-- a Clearing DIV to clear the DIV's because overflow:auto doesn't work here -->
<div style="clear:both"></div>
</div> Mana yang hampir sama dengan HTML seperti sebelumnya hanya dengan beberapa teks yang berbeda dari pita yang baru. Perubahan hanya nyata adalah bahwa sekarang kita memiliki gelar dan di atas bahwa subjudul terbungkus<h4>Tag. Jadi kita dapat gaya yang dengan beberapa baris dari CSS sebagai berikut:
h4 {
color:#007de2;
margin:0px 0px 0px 0px;
} Dan itulah yang! Lihat Generik page akhir kita disini.
Langkah 24 - itu tidak masalah jika itu adalah hitam atau putih!
Sekarang kita akan melakukan beberapa sangat sederhana CSS untuk beralih situs dari terang ke gelap. Apa rapi tentang hal ini adalah hanya HTML kita perlu mengubah satu baris ini:
<body id="dark">
Itu saja! Dengan itu salah satu dari sedikit tambahan kode HTML kita dapat membuat semua penyesuaian CSS yang diperlukan. Ini berarti jika Anda berharap Anda bisa dengan mudah membuat tombol Javascript sedikit dengan mengubag stylesheet. Cara ini akan bekerja adalah untuk setiap kelas yang perlu mengubah kita hanya menambahkan tambahan gaya diawali dengan tubuh #dark. Jadi pertama-tama untuk semuanya kita ucapkan:
body#dark {
background-color:#1e1d1b;
}
body#dark #main {
background:#292826 url(images/background_dark_slice.jpg) repeat-x;
}
body#dark #main .container {
background-image:url(images/background_dark.jpg);
}
body#dark #footer {
background-image:url(images/background_dark_footer.jpg);
}
body#dark ul#menu li a.active, ul#menu li a:hover {
color:#ffffff;
} Dan yang akan memberitahukan browser bahwa jika<body id="dark">kemudian untuk menimpa gaya untuk #main, #main .container, #footer, dan aktif dan hover negara menu, bertukar dalam beberapa gambar latar belakang baru dan perubahan teks warna putih! Sangat Mudah!
Langkah 25 - Border dan memperbaiki teks
Seperti yang dapat Anda lihat dalam gambar di bawah footer kami adalah tetap gambar latar belakang baru dan warna, ada hanya dua lebih perbaikan: teks "Creatif adalah WordPress..." dan perbatasan di sekitar kotak yang cukup ringan dan harus gelap sekarang. Jadi kita lakukan ini:
body#dark .block, body#dark .mini_portfolio_item {
border-color:#1b1a19;
}
body#dark #text_column h2#text_title {
background-image:url(images/creatif_dark.jpg);
} Langkah 26 - alternatif warna!
Dan Itulah! Kami memiliki alternatif skema warna semua dikendalikan oleh satu id tag pada<body>elemen. Itulah Keajaiban dari file PNG Transparan dan CSS untukmu!.
Finito!
Jadi Itulah! HTMLnya benar-benar selesai. Jangan lupa kamu dapat melihat page penuh dengan memfollow link seperti ini:
Selain itu Anda dapat men-download full HTML/CSS/Image sumber file di sini dan melalui PSDTUTS Plus Anda bisa mendapatkan full layered PSD file *dan* tutorial tentang merancang desain mereka.
Sumber daya tambahan
Jika Anda baru untuk mengkonversi PSD ke HTML, kami akan merekomendasikan sejumlah kursus pengantar untuk mendapatkan Anda sampai dengan kecepatan dengan dasar-dasar:
- PSD ke HTML: membangun portofolio responsif - oleh Craig Campbell
- PSD ke HTML untuk desainer oleh Adi Purdila
Jika Anda tertarik untuk mendapatkan bantuan dengan konversi desain PSD, Envato Studio memiliki koleksi besar PSD ke HTML layanan yang mungkin Anda sukai untuk mengeksplorasi.
