Tutorial hari ini akan mengajari Anda cara menggunakan Div+CSS untuk memotong halaman PSD menjadi halaman HTML. Tutorial semacam ini telah dilakukan sangat sedikit di situs ini, dan kebanyakan dari mereka relatif terpisah. Di masa depan, kami perlahan -lahan akan menerbitkan dan menerjemahkan lebih banyak tutorial semacam ini.
Pertama -tama lihat efeknya
Gambar di bawah ini adalah rendering. Setelah memotongnya, kepala dan bawah mungkin lebih luas ...
Buat folder baru
Untuk memulai, buat folder di komputer Anda. Saya menamainya Zmool. Kemudian buat gambar folder baru di folder dan tempatkan semua gambar situs web. Selanjutnya, buka editor kode (Dreamweaver) dan buat file html bernama index.html di direktori root, yang merupakan templat beranda kami. Sekarang buat file CSS baru dan beri nama file style.css. Seperti yang ditunjukkan pada gambar di bawah ini:
Buka file index.html. Di bagian atas tag kepala, tambahkan tautan ke stylesheet Anda (style.css). Anda dapat menggunakan kode berikut.
<tautan href = style.css rel = stylesheet type = text /css />
Kode header adalah sebagai berikut:
<! Doctype html public -// w3c // dtd xhtml 1.0 transisi // en http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd> <html xmlns = http: //www.w3.org/1999/xhtml> <adap> <meta http-equiv = konten-tipe konten = teks/html; charset = UTF-8/> <Title> Studio Desain Modern </iteme> <link href = style.css rel = stylesheet type = text/css/> </head> <body> </body> </html>
Buat struktur HTML
Sekarang, kami akan mengatur struktur file HTML. Setel 3 bagian (judul, konten, footer) seperti di bawah ini:
<! Doctype html public -// w3c // dtd xhtml 1.0 transisi // en http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd> <html xmlns = http: //www.w3.org/1999/xhtml> <adap> <meta http-equiv = konten-tipe konten = teks/html; charset = UTF-8/> <Title> dokumen untitled </ title> <tautan rel = stylesheet type = text/css href = style.css/> </pead> <body> <v id = header> </div> <Div ID = Content> </Div> <v ID = footer> </Div> </body> </htm
Latar belakang pemotongan
File PSD kami berisi banyak efek tekstur. Kita perlu memotong semua ini dan kemudian menambahkannya ke halaman web dengan kode untuk membuat efek halaman div konsisten dengan efek desain.
<body> <v ID = header> <Div id = container> </div> </div> <div id = content> <div id = container> </div> </div> <div id = footer> <div id = container> </div> </div> </body>
Sekarang buka lapisan yang dirancang semula di Photoshop, sembunyikan, kecuali untuk lapisan latar belakang.
Sekarang ambil alat pengiris, pilih latar belakang, simpan format web halaman web (alt + shift + ctrl + s). Kemudian file folder gambar yang disimpan bernama latar belakang.jpg.
Tetapkan gaya latar belakang
Buka file style.css, atur gaya dasar, gaya latar belakang dan lebar bagian utama, sebagai berikut:
* {margin: 0px; padding: 0px;} body {background: url (gambar/latar belakang.jpg);}#container {margin: auto; Lebar: 960px;}Potong kepala
Kembali ke Photoshop, sembunyikan lapisan yang disebut, kecuali untuk latar belakang kepala, dan gunakan metode yang sama untuk memotong gambar latar belakang kepala menjadi format web, dan menyimpan nama file sebagai head.jpg.
Edit kode latar belakang kepala
Edit kode berikut dalam file style.css:
#header {latar belakang: url (gambar/header.jpg); tinggi: 124px;}Potong logo kepala
Pada saat ini, potong lapisan logo dan sembunyikan semua lapisan, termasuk lapisan latar belakang. Potong lapisan logo sebagai metode yang sama seperti di atas untuk menyimpannya sebagai logo.png. Catatan: Simpan sebagai gambar format PNG.
Tambahkan ke Tambahkan Logo di Halaman
Sekarang kembali ke HTML dan tambahkan kode berikut <Div ID = Logo> .... </Div> di #Header #Container.
<Div ID = Header> <Div ID = Container> <Div ID = Logo> <a href =#> <img src = gambar/logo.png> </a> </div> </div> </div>
Sekarang, beralih ke file style.css di bawah ini dan tulis gaya #Logo.
#logo {margin-top: 20px; border: none;}Edit kode navigasi
Di bawah ini adalah kode di halaman. Header mencakup dua bagian: logo dan navigasi.
<Div id = header> <Div id = container> <Div id = logo> <a href =#> <img src = gambar/logo.png> </a> </div> <ul> <li> <a href =#/li </a> </li> <li> <a href =#> tentang </a> </a> </li> <li> <a href =#> tentang </a> </a> </li> <li> <a href =#> tentang </a> </a> </Li> <li> <a href =#> tentang </a> </a> </li> <li> <a href =#> tentang </a> </a> </li> <li> <a href =#> tentang </a> </a> <li> <a href =#> blog </a> </li> <li> <a href =#> kontak </a> </li> </div> </div>
Gaya navigasi adalah sebagai berikut:
Sekarang, tambahkan gaya navigasi di tabel CSS ~, ul, li dan tautkan gaya:
#Header li {color:#959595; List-style: none; float: left; margin-right: 20px; font-family: Myriad Pro, Arial; font-weight: Bold; font-size: 24px;}#header li a {color:#959595; Text-decoration: no pading: no.dding: no padding: no padding: no lump; no; no.dding: no padding: no pading: no lump; no; no; no; ul {float: kanan; margin-top: -40px;}#header li a: hover {latar belakang:#202020; warna:#d2d2d2; -moz-border-radius: 5px; -khtml-border-radius: 5px; -webkit-bordir-radius: 5px;}Sekarang buat bagian tengah
Sekarang kami menambahkan dua div ke bagian tengah konten halaman, seperti yang ditunjukkan pada gambar di bawah ini:
<Div ID = Content> <Div ID = Container> <Div ID = Fitur> </div> <Div ID = paragraf> </div> </div> </div>
Beralih ke halaman PSD Photoshop, potong bagian tengah, dan beri nama fitur.jpg. Gambar berikut:
Tambahkan kode berikut ke halaman HTML Anda, dan beberapa pengenalan teks:
<Div ID = Content> <Div ID = Container> <Div ID = Fitur> <a href =#> lebih banyak proyek </a> <p> <span> Proyek Portofolio, 5 Januari 2010 </span> Pernahkah Anda ingin membuat desain portofolioo yang bersih dan bagus? Dalam tutorial ini saya akan menunjukkan cara mendesain tata letak portofolioo biru bersih. Pernahkah Anda ingin membuat desain portofolio yang bersih dan bagus? Dalam tutorial ini saya akan menunjukkan kepada Anda cara mendesain tata letak portofolio biru bersih di Adobe Photoshop. </p> </div> <div id = paragraf> </div> </div> </div>
Dalam file PSD, sembunyikan lapisan lain yang disebut, biarkan hanya bagian lapisan tombol, potong bagian tombol, simpan format PNG, dan beri nama tombol.png.
Sekarang kami menambahkan gambar -gambar ini ke halaman, beralih ke halaman file CSS, dan menambahkan kode berikut, yang mencakup gaya latar belakang dan gaya tombol.
#featured {background: url (gambar/fitur.jpg) no-repeat; tinggi: 381px; margin-top: 30px; margin-left: 80px;}#fitur A {latar belakang: url (gambar/tombolSekarang mari kita tambahkan beberapa gaya DummyText:
.dummyText {color:#d2d2d2; lebar: 245px; margin-top: 150px; posisi: absolute; font-family: arial, helvetica, sans-serif; font-size: 12px; line-height: 180%; margin-left: 290px;} span {font-size: 16px; color:#191919; font-weight: bold;}Berikut ini ditambahkan untuk menambahkan gambar untuk menampilkan bagian pengenalan kategori berikut
Bagian kode dari halaman ini adalah sebagai berikut.
<Div ID = paragraf> <p> <span> cantik </span> Webdesignfan adalah blog terkait desain tentang desain web, photoshop, freebies dan tutorial. Kami menerbitkan informasi berguna yang didedikasikan untuk desainer dan pengembang web. Di sini Anda dapat menemukan sumber daya gratis seperti vektor, tema WordPress dan banyak inspirasi. </p> <p> <span> Efektif </span> Webdesignfan adalah blog terkait desain tentang desain web, photoshop, gratis dan tutorial. Kami menerbitkan informasi berguna yang didedikasikan untuk desainer dan pengembang web. Di sini Anda dapat menemukan sumber daya gratis seperti vektor, tema WordPress dan banyak inspirasi. </p> <p> <span> Fungsional </span> Webdesignfan adalah blog terkait desain tentang desain web, photoshop, gratis dan tutorial. Kami menerbitkan informasi berguna yang didedikasikan untuk desainer dan pengembang web. Di sini Anda dapat menemukan sumber daya gratis seperti vektor, tema WordPress dan banyak inspirasi. </p> </div>
Konten di bagian tengah kita seharusnya terlihat seperti ini:
<Div ID = Content> <Div ID = Container> <Div ID = Fitur> <a href =#> lebih banyak proyek </a> <p> <span> Proyek Portofolio, 5 Januari 2010 </span> Pernahkah Anda ingin membuat desain portofolioo yang bersih dan bagus? Dalam tutorial ini saya akan menunjukkan cara mendesain tata letak portofolioo biru bersih. Pernahkah Anda ingin membuat desain portofolio yang bersih dan bagus? Dalam tutorial ini saya akan menunjukkan cara mendesain tata letak portofolio biru bersih di Adobe Photoshop. </p> </div> <div id = paragraf> <p> <span> indah </span> Webdesignfan adalah blog terkait desain tentang desain web, photoshop, freebies, dan tutorial. Kami menerbitkan informasi berguna yang didedikasikan untuk desainer dan pengembang web. Di sini Anda dapat menemukan sumber daya gratis seperti vektor, tema WordPress dan banyak inspirasi. </p> <p> <span> Efektif </span> Webdesignfan adalah blog terkait desain tentang desain web, photoshop, gratis dan tutorial. Kami menerbitkan informasi berguna yang didedikasikan untuk desainer dan pengembang web. Di sini Anda dapat menemukan sumber daya gratis seperti vektor, tema WordPress dan banyak inspirasi. </p> <p> <span> Fungsional </span> Webdesignfan adalah blog terkait desain tentang desain web, photoshop, gratis dan tutorial. Kami menerbitkan informasi berguna yang didedikasikan untuk desainer dan pengembang web. Di sini Anda dapat menemukan sumber daya gratis seperti vektor, tema WordPress dan banyak inspirasi. </p> </div> </div> </div>
Buka file CSS Anda dan tambahkan kode berikut.
#paragraphs span {font-family: Myriad Pro, Helvetica, sans-serif; font-size: 22px; font-weight: 600; spasi huruf: -2px;}#paragraf {margin-left: 80px; font-family: Arial, helveta, sans-serif; warna:#191919; font-size: 12px; margin-top: 15px;}. paragraf {lebar: 250px; margin-kiri: 15px; float: kiri;}Inilah yang telah kami lakukan sejauh ini:
Bagian bawah situs web ditangani di bawah ini
Sekarang kami telah menyelesaikan bagian itu, kami akan mulai membuat footer.
Pertama, dalam file PSD Anda, sembunyikan lapisan lain kecuali lapisan tekstur footer dan footer, lalu iris dan simpan folder folder footer sebagai footer.jpg.
Kemudian potong lagi dan potong tombol dan grafik burung. Sebutkan itu mengikuti.png dan Bird.jpg masing -masing.
Edit kode bawah
Footer bawah mencakup beberapa teks dan gambar burung dengan tautan.
Jadi tambahkan kode berikut ke halaman HTML.
<Div id = footer> <Div id = container> <p> 2010? Studio Desain Fiksi. Desain oleh Webdesignfan. </p> <a href =#> ikuti kami di twitter </a> <img src = gambar/burung.jpg/> </div> </div>
Sekarang, edit kode gaya footer di bagian bawah sebagai berikut:
#footer {latar belakang: url (gambar/footer.jpg); tinggi: 71px; margin-top: 191px;}#footer p {font-family: arial, helvetica, sans-serif; font-size: 12px; color:#9595; Posisi: absolute; margin-t-t-t-t-top: 12px; color:#9595; Posisi: absolute; margin-t-t-t-t-top: 30px:#9595; Posisi: absolute; margin-t-t-t-top: 30px:#9595; Posisi: absolute; margin-t-t-t-t-top: 30px; A {latar belakang: url (gambar/follow.png); Text-Indent: -9999px; Posisi: Absolute; Tinggi: 27px; Lebar: 124px; margin-kiri: 730px; margin-top: 30px;}#footer img {float: kanan; margin-top: 10px;}Kami menggunakan footer.jpg sebagai latar belakang footer dan kemudian menambahkan beberapa gaya teks.
Untuk tautan ke gambar burung di bagian bawah, kami menggunakan metode yang sama sebelumnya, menggunakan efek mengambang untuk memposisikannya.
Efek akhir
Unduh File (0,7 MB)
Bahkan sekarang sudah berakhir. Saya tidak tahu jika Anda memahaminya. Jika Anda tidak memahaminya, tinggalkan pesan. Jika Anda tidak memahaminya, saya akan menambahkan dan memodifikasinya lagi, haha ~