Cara membuat website menarik dengan html

Sebagai sekuel dari tutorial populer, "Desain Situs Web Cantik Dari Awal", kami akan mengonversi desain indah kami menjadi situs web HTML/CSS yang valid. Padahal kami menggunakan 960. gs, kami tidak akan menggunakan framework CSS-nya untuk membangun situs. Sebagai gantinya, kami akan mengkodekan desain ini dari awal

Itu selalu penting untuk membuat markup yang kuat dan bersih terlebih dahulu, Mengapa demikian?

pengantar

Hari ini kita akan belajar bagaimana menyiapkan desain ini untuk pengkodean dan akan mengkodekannya menjadi (X)HTML/CSS yang valid, situs web lintas browser. Kami hanya akan membahas beranda situs web, dan jika Anda tertarik untuk berlatih lebih lanjut, desainnya tersedia di Themeforest. bersih. Ini adalah tutorial yang sangat rinci; . Kita mulai di 3,2,1

Langkah 1 - Mengatur folder

Sebelum kita memulai proyek baru kita, kita perlu membuat folder baru tempat kita dapat menyimpan semua data kita. Saya biasanya membuat satu folder untuk setiap proyek yang dinamai menurut situs web yang saya rancang. Di dalam, saya membuat satu set folder untuk berbagai keperluan seperti "file", "PSD", "HTML", "pdf" dll. Kami hanya membutuhkan satu folder sekarang dan Anda dapat menyebutnya "HTML". Di dalam folder itu, buat 3 folder lagi dan beri nama "css", "js" dan "images". Kemudian buka folder "css" dan buat folder lain dan beri nama "i" (singkatan dari images ). mengapa kita melakukan itu? . alasan saya melakukan ini adalah karena saya ingin memisahkan gambar konten saya dari gambar yang membuat tata letak web saya. Ini bisa berguna jika saya perlu memindahkan folder saya di server, maka jalur ke gambar saya tidak akan terpengaruh, dan saya tidak perlu memodifikasi file CSS saya lagi untuk memperbaikinya

Langkah 2 - Menganalisis desain

Jadi, kita sudah selesai mengatur folder kita. Sekarang kita bisa melihat lebih dekat desain kita. Ambil tangkapan layar Desain Situs Web Cantik dan coba pikirkan "di balik layar", seperti yang saya lakukan. Setiap elemen situs web masa depan kita perlu diberi kode dan dibungkus di dalam tag HTML. Kita juga harus ingat bahwa ini akan menjadi template yang nantinya akan digunakan seseorang dan memodifikasinya sesuai kebutuhan mereka, jadi kita perlu membuatnya sefleksibel mungkin untuk pengguna kita. Kita perlu memastikan bahwa jika pengguna ingin meletakkan logo yang lebih besar daripada yang ini, placeholder (div) tempat logo dapat diperluas. Juga bagian lain dari situs perlu diperluas dengan konten. Inilah mengapa kita mungkin akan memiliki sedikit placeholder tambahan (div) untuk mencapainya. Jika Anda membuat kode situs untuk klien, Anda mungkin tidak mengirisnya dengan cara ini karena mungkin akan tetap apa adanya. Mari kita selangkah demi selangkah dan melihat elemen mana yang masuk ke tag mana

Pertama, latar belakang. Kita perlu memecah bagian atas menjadi dua bagian yang lebih kecil. top _top tempat logo dan bidang pencarian berada, dan top _bottom tempat navigasi ditempatkan. Selanjutnya, ada header holder besar, konten utama, dan footer. Perhatikan bahwa ada kotak tambahan untuk nav footer. Ini karena kami ingin footer juga dapat diperluas karena seseorang mungkin ingin memiliki 10 posting atau komentar terbaru, bukan hanya 3, seperti yang saya rancang. Dengan cara ini konten footer akan mendorong navigasi footer lebih jauh ke bawah dan akan selalu ada lebih banyak ruang untuk konten tambahan

Sekarang antarmuka. Logo biasanya dibungkus dengan tag H1, jadi kita akan melakukan hal yang sama di sini. Formulir pencarian akan dibungkus di dalam tag "form", yang akan diberi gambar latar belakang seperti yang terlihat pada tangkapan layar. Sebelum kita melanjutkan, saya menyarankan agar kita melihat di mana kita dapat menggunakan semua 6 Heading kita (H1 hingga H6). H1 selesai, kami katakan itu akan menjadi logo kami karena itu yang paling penting dan selalu didahulukan. H2 adalah heading terpenting kedua dan kita akan menggunakannya untuk membungkus gambar tag line kita. Jangan khawatir kami akan memberikan teks alternatif untuk pembaca layar. Saya memutuskan bahwa tajuk ketiga dapat digunakan untuk menampilkan deskripsi layanan atau slogan kami. Jadi mari kita lakukan. Karena apa yang klien katakan tentang kami sangat penting. Saya memutuskan bahwa itu harus masuk ke dalam tag H4 dan bukan hanya satu paragraf, meskipun terlihat seperti teks paragraf. H5 digunakan untuk judul footer kami dan H6 untuk entri Blog Terbaru. Oke, jadi H kita hilang, kita bisa melanjutkan. Seperti yang Anda lihat, setiap elemen yang memiliki satu kalimat atau lebih diletakkan di dalam paragraf dan tautannya tentu saja
"sebagai. Daftar berpoin, seperti yang ada di konten utama, adalah daftar sederhana tanpa urutan "ul" di mana poin pada "li" diganti dengan gambar khusus. Selain itu, semua navigasi kami, atas, tengah, dan bawah ditempatkan di dalam daftar yang tidak diurutkan - dengan gaya yang berbeda

Jika Anda memperhatikan, Anda akan melihat bahwa saya hanya menggunakan 5 elemen/tag HTML untuk membuat tata letak kami. Misalnya, saya telah meletakkan tombol "Daftar" langsung di dalam tag "a" karena itu adalah tautan, tidak peduli apakah ada grafik tombol di belakangnya. Tidak ada alasan untuk membuat div dengan grafik tombol kami terlebih dahulu dan kemudian meletakkan tautan "a" di dalamnya. Setelah selesai dengan analisis kami, kami dapat membuka Photoshop dan menyiapkan PSD kami untuk diiris

Langkah 3 - Mempersiapkan PSD

Dalam tutorial ini, kita akan menggunakan Slice Tool untuk memotong gambar tata letak kita. Ya, Anda tidak salah dengar, alat Slice. Saya menggunakannya hanya ketika saya membuat template untuk orang lain atau untuk dijual di Themeforest karena tidak semua orang memiliki keterampilan untuk mengubah gambar logo atau grafik lainnya dan menggantinya tanpa merusak tata letak. Pada dasarnya setiap orang juga perlu melakukan beberapa modifikasi di dalam file CSS (mengubah dimensi dll. )

Ingat bahwa kita berbicara tentang bagaimana memudahkan seseorang untuk memodifikasinya nanti, nah itu salah satu cara untuk melakukannya

Jika Anda merasa tidak perlu melakukannya, lewati saja langkah ini
Karena kami memiliki banyak grafik dalam desain kami, kami perlu memisahkannya agar lebih mudah bagi kami untuk memotong. Saya biasanya menyembunyikan semua konten dan tombol, dll. dan tinggalkan hanya latar belakang dan simpan file itu sebagai latar belakang. psd. Hal yang sama berlaku untuk tombol dll. hanya tanpa latar belakang. Jadi, sekarang kami memiliki dua file psd. Satu dengan latar belakang dan satu lagi dengan tombol, peluru, judul, dll

Latar Belakang. psd

isi. psd

Langkah 4 - Mengiris gambar

Sekarang kita bisa mulai mengiris tata letak kita. Kami memiliki "latar belakang. psd" dan "konten. psd". Pertama-tama kita akan mulai dengan "latar belakang. psd". Seperti yang dikatakan sebelumnya, Anda dapat memotong grafik Anda dari satu file psd, seperti yang kadang-kadang saya lakukan, tetapi kali ini penting untuk memisahkannya sehingga lebih mudah bagi klien kami untuk melakukan modifikasi nanti

Buka "latar belakang. psd". Dari panel Tools di sebelah kiri, pilih Slice Tool

Langkah 5

Dengan memilih Slice Tool, gambarkan sebuah irisan dari bagian atas dokumen ke garis berikutnya (bagian navigasi). Buat irisan selebar 20px. CATATAN. terkadang lebih baik untuk membuat gambar latar berulang menjadi lebih lebar. Alasannya adalah karena browser kita akan mengulang gambar untuk membuat latar belakang, dan mesin rendering browser perlu menghitung lebar latar belakang dan menambahkan gambar untuk membuat latar belakang penuh. Jika gambar kita berukuran 1px, bayangkan berapa banyak perhitungan yang perlu dilakukan dan tentu saja penggunaan CPU Anda akan meningkat sedikit lagi. Karena itu, lebih bijaksana untuk membuat gambar latar yang lebih luas dengan ukuran file yang mungkin lebih besar (hanya beberapa kilobyte) untuk menghemat penggunaan CPU kita.

Tarik irisan tepat di dekat garis abu-abu tua karena di sinilah latar belakang navigasi kita dimulai. Perhatikan bagaimana kami selalu meninggalkan warna solid di bagian bawah setiap irisan. Ini karena dengan cara ini kami membuat area ini dapat diperluas. Nanti kami akan menambahkan warna latar belakang ke placeholder dan gambar berulang ini, dan jika konten kami lebih besar, situs kami tidak akan rusak

Langkah 6

Kita tidak perlu menggambar irisan setiap saat, kita cukup menyalin dan mengubah ukuran yang sudah ada. Tahan Shift+Seret irisan dari atas lebih jauh ke bawah. Sesuaikan ketinggiannya saja. Buatlah agar bagian bawah irisan berwarna abu-abu terang

Langkah 7

Latar belakang tajuk adalah satu-satunya bagian yang akan tetap tingginya. Begitulah cara kita akan mengiris gambar latar belakang ini. Salin irisan dari atas lagi dan sesuaikan tingginya agar pas dengan seluruh bagian header biru, termasuk bayangan kecil

Langkah 8

Latar belakang konten utama tidak perlu dipotong sepenuhnya. Kita perlu mencari warna solid terakhir yang muncul di gradien, dan itu adalah #ffffff (putih). Gunakan Alat Pemilih Warna untuk menemukan bagian gradien dan sesuaikan tinggi irisan ke titik tersebut

Langkah 9

Catatan kaki. Salin irisan dari atas, geser ke bawah dan sesuaikan tingginya agar pas dengan latar belakang footer abu-abu tua

Langkah 10

Sekarang kita hanya menyisakan latar belakang navigasi bawah yang kecil untuk dipotong. Sekali lagi, salin irisan dari atas dan sesuaikan tingginya hingga mencapai akhir dokumen

Langkah 11

Kami belum selesai dengan latar belakang. Kami memiliki bingkai foto dan efek cahaya yang tersisa. Untuk mengiris bingkai foto, kita perlu menonaktifkan semua lapisan latar belakang sehingga kita hanya memiliki bingkai. Kemudian gambar potongan dan perbesar. Sesuaikan potongan sehingga seluruh gambar ditempatkan di dalam potongan tersebut

Langkah 12

Beginilah tampilan efek cahaya ketika semua lapisan latar belakang dimatikan. Pastikan Anda tetap berada di dalam kisi 960 saat membuat irisan. Lampu atas (1) dan lampu bawah (3) akan diekspor sebagai PNG transparan, dan bagian tengah (2) sebagai JPEG. Kita bisa mengiris seluruh efek cahaya dengan Background dan menyimpannya sebagai JPEG tapi saya lebih suka melakukannya dengan cara ini

Langkah 13

Sekarang buka "content. psd", karena sekarang kita akan memotong tombol, gambar, navigasi, dll

Buat irisan dengan cara yang sama seperti yang Anda lakukan sebelumnya. Pastikan untuk memperbesar banyak untuk membuat potongan yang tepat untuk setiap objek. Ini adalah bagaimana seharusnya terlihat

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

Langkah 14

Perbesar 100% kedua tombol di header untuk melihat di mana bayangan berakhir dan gambar potongan di sekitarnya. Penting untuk sangat tepat di sini karena kita tidak ingin bayangan kita terpotong di suatu tempat. Itu akan terlihat canggung di browser

Langkah 15

Saatnya mengekspor irisan kita sebagai PNG transparan. Buka File > Simpan untuk Web. Dari drop down pilih PNG 24

Langkah 16

Sekarang tahan Shift dan pilih semua irisan yang telah kita buat karena kita tidak akan mengekspornya saja. Mungkin Anda perlu memilih PNG 24 dari dropdown lagi. Klik Simpan. Saat jendela dialog terbuka, pilih Simpan potongan yang dipilih saja, dari drop down di bagian bawah jendela. Pastikan untuk menentukan folder tempat mengekspor gambar

Langkah 17

Kami menggunakan teknik pintu geser untuk tombol navigasi kami. Jika Anda ingin mempelajari lebih lanjut tentangnya, pastikan Anda mengunjungi artikel ini di A List Apart. Kita perlu memastikan bahwa kita memiliki bagian kiri tombol yang cukup panjang agar sesuai dengan kata terpanjang dalam menu (PORTOFOLIO). Inilah mengapa kami harus memperluas. arahkan kursor/. keadaan aktif dalam desain kami agar sesuai dengan kata itu. Itu selalu lebih baik untuk membuatnya beberapa piksel lebih lebar daripada memotongnya lagi jika tidak pas

Langkah 18

Untuk navigasi tab kami, kami akan menggunakan sprite CSS. Untuk informasi lebih lanjut tentang CSS Sprite, baca Tepatnya Cara Menggunakan CSS Sprite. Kita perlu membuat satu tombol untuk keadaan tidak aktif dan aktif. Ini dilakukan agar kita dapat memindahkan tab yang tidak aktif di atas yang aktif dan mengiris setiap tab dengan kedua status

Beginilah tampilan satu potongan tab. Pastikan untuk meninggalkan celah 1px di antara tab

Langkah 19 - Memberi nama gambar

Saatnya memberi nama bermakna pada gambar yang diekspor. Saya telah membuat tangkapan layar dari semua gambar saya dan namanya sehingga Anda bisa mengikuti contoh saya. Semua gambar ini ditempatkan di dalam folder "CSS/i" karena merupakan bagian dari tata letak situs web kami. Gambar lain seperti footer "Ads" atau gambar "Featured Work" ditempatkan di dalam folder "/images", yang berada di root

Langkah 20 - Menyiapkan template HTML dan CSS

Kami siap untuk menutup Photoshop dan mulai membuat kode desain yang indah ini. Sebelum melakukannya, mari kita lakukan persiapan kecil. Ini hanyalah langkah opsional, Anda dapat melewatinya jika mau. Saya biasanya sudah menyiapkan file HTML dan CSS saya untuk setiap proyek. Setelah Anda melakukannya juga, Anda hanya perlu menyalinnya ke folder kerja Anda. Saya suka memiliki file HTML kosong seperti ini

1

2

3

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

4

<html xmlns="http://www.w3.org/1999/xhtml"> 

5

<head> 

2

2

2

2

2

2

2

2

2

2

3

3

3

3

3

3

3

3

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

Dan di dalam file CSS, saya suka menulis sesuatu tentang situs web yang saya buat, jadi akan terlihat seperti ini

1

2

3

4

4

4

5

<html xmlns="http://www.w3.org/1999/xhtml"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

2

5

2

2

5

Langkah 21 - Markup

Hal pertama yang pertama. Kami akan mulai dengan markup kami. Seperti yang dikatakan di pendahuluan, sangat penting untuk membuat markup yang kuat dan bersih. Inilah sebabnya kami pertama-tama menganalisis desain kami, membuat beberapa catatan dan memikirkan tentang struktur markup kami sebelum kami memulai pengkodean. Saya sarankan Anda melakukan ini setiap kali sebelum Anda mulai membuat kode proyek apa pun. Jika situs tersebut nantinya akan diadopsi pada semacam CMS maka itu juga merupakan ide yang baik untuk duduk di sebelah pengembang Anda dan melalui markup lagi dan akhirnya membuat beberapa perubahan jika diperlukan. Karena kita tidak akan mengadopsi ini ke CMS mana pun, kita bisa tetap menggunakan catatan kita dari Langkah 2

Langkah 22

Mari kita mulai dengan latar belakang. Untuk melakukan ini, kita perlu membuat placeholder untuk konten kita. Tempatkan kode ini di dalam tubuh

1

2

3

<head> 

4

<head> 

5

<head> 

<head> 

<head> 

2

<head> 

2

<head> 

2

2

2

<head> 

<head> 

3

3

3

3

3

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<head> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<head> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

Ingat bagaimana kita mengiris gambar kita dari file PSD? . Sekarang ketika kita membuat markup kita, kita akan melakukannya dengan urutan yang sama seperti kita mengiris gambar kita. Jadi saya membuat div "top_content" terlebih dahulu, lalu "nav_content", lalu "main_content", "footer_content", dan "footer_nav". Anda akan melihat bahwa saya segera membuat beberapa div tambahan yang disebut "center". Alasan saya melakukan ini adalah karena div "tengah" ini adalah pemegang konten kami yang sebenarnya. Div "top_content" digunakan untuk menampilkan gambar latar berulang kami dan akan diatur lebarnya 100% melalui file CSS. Kita perlu membuat div tambahan yang akan dipusatkan sehingga konten kita juga muncul di tengah browser

Langkah 23

Sekarang kami telah membuat semua placeholder utama kami untuk konten. Langkah selanjutnya adalah pergi satu per satu dan mulai meletakkan beberapa kode untuk elemen lainnya. Di dalam div "top_content" kami memiliki logo dan kolom input pencarian. Mari kita peti mereka

1

2

3

<head> 

4

<head> 

5

2

2

<head> 

2

<head> 

2

2

3

3

3

3

3

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<head> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<head> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

Pertama kita harus membuat "H1" dan membungkus logo kita di dalamnya (kita akan melakukannya dengan CSS nanti). Kemudian kami memiliki kolom input pencarian kami. Kami perlu membuat formulir karena kami akan menambahkan gambar latar belakang ke dalamnya. Berikutnya adalah navigasi. Ini adalah daftar unordered sederhana yang akan kita gaya dengan CSS nanti. Perhatikan bahwa saya telah menambahkan "span" ekstra di dalam "li". Ini karena kita akan menggunakan teknik pintu geser dan membutuhkan elemen bentang untuk mencapai efeknya. Setelah navigasi, kami memiliki tombol Masuk atau Daftar. Karena keduanya akan menjadi tautan, saya telah menempatkannya di dalam "a"

Header dibuat dari judul, beberapa paragraf, dua tombol dan satu gambar besar

"Main_content" akan menyertakan penggeser jQuery, tetapi untuk saat ini saya membiarkannya kosong dan hanya membuat bagian testimonial. Saya tidak pandai menggunakan jQuery untuk menulis skrip dan markup saya sendiri, jadi saya mungkin akan menggunakan salah satu skrip gratis yang tersedia dan hanya membuat beberapa modifikasi agar sesuai dengan kebutuhan kita

Kesaksian klien dibuat dari dua div. Kami memiliki 4 batas untuk dibuat dan ini dimungkinkan dengan dua div ini. Div luar akan memiliki batas 1px, warna latar belakang, dan padding diterapkan, dan div dalam juga akan memiliki batas 1px dan warna latar belakang. Dengan cara ini, kita dapat menciptakan efek itu

Yang tersisa sekarang hanyalah footer. Kami akan membuat kolom kosong saja dan mengisinya nanti saat bepergian. Saya sarankan kita harus melihat bagaimana situs web kita terlihat di dalam browser

Langkah 24

Beginilah tampilan situs kami saat ini. Masih belum ada gaya CSS yang diterapkan sehingga browser merendernya secara default. Dengan cara ini kita juga dapat melihat bagaimana pembaca layar lain akan menginterpretasikan situs kita, karena pembaca layar tidak mengaktifkan CSS atau JS. Situs kami harus dapat diakses dan ini adalah salah satu cara untuk mengujinya

Dan sekarang untuk melihat tampilannya di ponsel

Bagus

Langkah 25 - Bagian Menyenangkan (CSS)

Saatnya memberi situs kita lebih banyak gaya. Kami telah menetapkan dasarnya, kami memiliki markup bersih, hampir semua elemen situs web kami ada di sini. Kami akan menyentuh markup lagi karena kami perlu menambahkan beberapa kelas tambahan dan id ke beberapa elemen sehingga kami dapat menatanya. Saya akan pergi dari atas ke bawah lagi dan sesekali melakukan pengujian dan memberi Anda tangkapan layar. Mari kita bawa

Langkah 26

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

1

2

3

4

5

2

2

2

2

2

3

Langkah 27

Selanjutnya kita akan menata Heading kita dan menambahkan beberapa perbaikan browser

1

2

3

4

5

2

Langkah 28

Saya biasanya mendeklarasikan beberapa kelas tambahan kalau-kalau saya membutuhkannya. Terutama mereka untuk pemformatan teks, elemen mengambang dan margin dan padding

1

2

3

4

5

2

2

3

2

3

2

3

2

3

3

3

Langkah 29 - Latar belakang

Sekarang kita akan memberi warna pada tata letak kita. Mari kita pilih semua div luar dan lampirkan gambar latar berulang ke mereka

1

2

3

3

4

3

5

3

3

3

2

2

3

2

2

3

Sekarang mari kita lihat tampilannya di browser

Langkah 30

Kami telah menetapkan latar belakang kami, sekarang kami hanya perlu menempatkan overlay efek cahaya di setiap div. Untuk melakukan ini, kita akan membuat satu set id dengan set png transparan sebagai latar belakang

1

2

3

3

3

4

3

5

3

3

Untuk menghindari penambahan div ekstra di markup kami, kami hanya akan menambahkan id ke div yang sudah ditentukan. Untuk itu kita perlu sedikit mengubah markup kita

1

2

3

Setelah memodifikasi semua. center div's, mari kita pratinjau perubahannya

Langkah 31

Sekarang kita telah mengatur dasarnya dan kita bisa selangkah demi selangkah menata semua elemen. Pertama datang logo dan formulir pencarian. Untuk itu tambahkan saja kode CSS ini

1

2

3

3

4

3

5

3

3

3

3

3

3

2

3

2

3

2

2

3

2

3

3

3

3

3

3

3

3

3

3

3

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

3

3

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

Pertama kita mendeklarasikan heading "h" diikuti dengan tag "a". Kami menentukan lebar dan tinggi dan gambar latar belakang (yang merupakan gambar logo kami). Karena "a" adalah elemen sebaris, kami perlu mengubahnya menjadi elemen level blok dan kami melakukannya dengan menambahkan "tampilan. blok;" properti. "text-indent. -9999px;" digunakan untuk memindahkan teks dari layar sehingga hanya gambar yang terlihat. "meluap. hidden;" menghapus batas bertitik besar di sekitar tautan dan menjadikannya lebar dan tinggi yang sama seperti yang dinyatakan sebelumnya. Dengan formulir pencarian kami melakukan sedikit trik. Kami memberi "formulir" kami gambar latar belakang (seluruh bidang dengan tombol). Kemudian kami mengatakan bahwa bidang input kami akan memiliki lebar 109px dan tinggi 17px. Sebenarnya gambar tingginya 27px tetapi karena kita menambahkan padding 5px kita perlu mengurangi 10px dari lebar dan 10px dari tinggi (5px dari setiap sisi) bidang masukan. Ini adalah sesuatu yang akan sering kita lakukan nanti jadi cobalah untuk mengingat ini. Selanjutnya kita menambahkan sebuah tombol, memberinya gambar latar yang sama tetapi membuatnya hanya dengan lebar 27px dan tinggi 27px, seperti tombol "GO" itu sendiri. Selain itu kami mendeklarasikan. arahkan status tombol

Langkah 32 - Navigasi

Navigasi dibuat dengan teknik pintu geser. Saya tidak akan menjelaskan teknik tersebut disini secara detail jadi sebaiknya anda membaca artikel ini terlebih dahulu. Ini kode untuk navigasi kita

1

2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

3

4

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

5

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

3

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

3

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

3

3

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

3

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

Sebelum Anda menguji ini di browser Anda, pastikan untuk membuat sedikit perubahan pada markup

1

2

3

4

4

5

2

2

2

2

<head> 

2

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

Langkah 33

Di sebelah kanan navigasi kami memiliki tombol "Daftar" yang perlu kami gaya. Tempel kode ini di file CSS Anda

1

2

<html xmlns="http://www.w3.org/1999/xhtml"> 

3

<html xmlns="http://www.w3.org/1999/xhtml"> 

Kami melayangkan kedua elemen ke kanan dan memberi mereka margin atas dan kanan sehingga mereka terpusat dan dipindahkan terpisah satu sama lain

Langkah 34 - Tajuk

Di sini kita harus sedikit mengubah markup, tetapi semuanya bermuara pada penambahan kelas ke elemen yang ada dan mungkin menambahkan sesuatu yang baru. Saya telah membagi header menjadi dua bagian, sisi kiri dan sisi kanan. Untuk itu saya membuat dua kelas baru di file CSS

1

2

<html xmlns="http://www.w3.org/1999/xhtml"> 

3

<html xmlns="http://www.w3.org/1999/xhtml"> 

Kolom kiri akan digunakan untuk memuat baris tag, paragraf, dan tombol, dan kolom kanan tidak akan digunakan di sini karena kami memiliki gambar besar di sebelah kanan yang cukup besar untuk menyatukan tajuk. Kolom ini akan digunakan di dalam main_content. Inilah markup tajuk baru kami

1

2

3

4

<html xmlns="http://www.w3.org/1999/xhtml"> 

5

<html xmlns="http://www.w3.org/1999/xhtml"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

2

2

<head> 

2

Dan CSSnya

1

2

<html xmlns="http://www.w3.org/1999/xhtml"> 

3

<html xmlns="http://www.w3.org/1999/xhtml"> 

4

<html xmlns="http://www.w3.org/1999/xhtml"> 

Seperti inilah tampilan situs kita sekarang

Langkah 35 - Konten utama

Ingat bahwa kami meninggalkan konten utama saat kami menulis markup? . Kesenangan Dinamis dengan SimplePie dan jQuery. Sekarang, baca artikel ini jika Anda tertarik dengan keseluruhan proses pembuatan slider ini. Saya tidak terlalu tertarik dengan konten dinamis yang dibuat dengan PHP, jadi saya mengunduh kode sumbernya dan menyalinnya di sini. Saya membuat beberapa modifikasi pada file HTML, CSS dan JS untuk mendapatkan efek yang sama tetapi dengan desain saya sendiri. Untuk melakukan hal yang sama, pertama-tama masukkan kode ini di bagian atas dokumen

1

2

<html xmlns="http://www.w3.org/1999/xhtml"> 

3

<html xmlns="http://www.w3.org/1999/xhtml"> 

4

<html xmlns="http://www.w3.org/1999/xhtml"> 

5

<html xmlns="http://www.w3.org/1999/xhtml"> 

Selanjutnya tambahkan kode ini di dalam div tengah yang ada di dalam main_content

1

2

<html xmlns="http://www.w3.org/1999/xhtml"> 

3

<html xmlns="http://www.w3.org/1999/xhtml"> 

4

<html xmlns="http://www.w3.org/1999/xhtml"> 

5

<html xmlns="http://www.w3.org/1999/xhtml"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

2

<html xmlns="http://www.w3.org/1999/xhtml"> 

2

<html xmlns="http://www.w3.org/1999/xhtml"> 

2

<html xmlns="http://www.w3.org/1999/xhtml"> 

2

<html xmlns="http://www.w3.org/1999/xhtml"> 

2

<html xmlns="http://www.w3.org/1999/xhtml"> 

5

5

5

5

5

3

5

3

5

3

5

3

5

3

5

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

5

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

5

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

5

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

Saya menemukan bahwa saya sangat perlu mengubah dimensi dan jalur ke gambar dari file CSS asli Chris untuk penggeser. CSS penggeser baru

1

2

4

3

4

5

2

2

2

2

2

3

3

3

3

3

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

Selanjutnya kita telah memperbarui "kolom_kanan" dengan beberapa kelas baru sehingga kita perlu menatanya di CSS

1

2

3

4

5

". unggulan" adalah div di sebelah kiri tempat gambar unggulan kami berada. Kami mengatur latar belakang menjadi bingkai gambar itu dan menggunakan properti "padding" untuk memusatkan konten di dalamnya. "ul. listing" adalah unordered list (bullet list) yang kita miliki di sebelah kanan. Itu melayang ke kiri dan memiliki bantalan untuk memisahkannya dari konten di sekitarnya. Selanjutnya kami mengganti peluru default pada "ul. listing li" dengan gambar peluru kustom kami (biru) menggunakan "list-style-image. tidak ada; . url(i/ico_li. png);". Dengan "background-position. kiri tengah;" kami menyelaraskan peluru ke kiri dan memusatkannya dengan teks. Akhirnya tambahkan beberapa padding untuk memberikan lebih banyak ruang. ". kolom_kanan. description" adalah kelas untuk paragraf yang muncul di bawah dua daftar peluru. Itu hanya memberitahu paragraf menjadi 100% lebar sehingga tidak membungkus daftar, karena mereka melayang ke kiri

Dan akhirnya file JS. Saya baru saja menghapus kode yang tidak perlu yang tidak kami gunakan di sini. Coda-slider baru. 1. 1. 1. file js terlihat seperti ini

1

2

3

4

5

2

2

2

2

2

3

3

3

3

3

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

Langkah 36

Setelah kami melakukan semua perubahan ini, kami hanya perlu memasukkan sedikit kode di "kepala" dokumen kami untuk memicu penggeser. Setelah itu kita dapat menguji halaman kita

1

2

3

4

5

Beginilah tampilan area konten utama sekarang. Kita masih perlu menata bagian testimonial

Langkah 37

Kotak testimonial terdiri dari 2 div individu. Div luar diberi warna latar belakang dan batas padat 1px. Inner box juga diberi warna background, border 1px dan margin 10px. Margin ini memastikan bahwa kotak bagian dalam akan menjadi 10px lebih kecil di semua sisi daripada div luar, menciptakan efek batas tebal dari div luar. Mari kita lihat CSSnya

1

2

3

"batas. 0 auto;" digunakan untuk memusatkan kotak testimonial di dalam main_content. "lapisan. 20px;" untuk div dalam digunakan untuk menjauhkan konten dari perbatasan. Perhatikan bagaimana lebar kotak bagian dalam menjadi lebih kecil? . Setiap kali kita menambahkan padding ke suatu elemen, kita perlu menurunkan lebar atau tinggi elemen tersebut tergantung pada padding mana yang diberikan

Langkah 38

Sekarang kita harus mengatur konten kotak testimonial. Saya telah membuat beberapa kelas tambahan untuk setiap bagian konten dan tampilannya seperti ini

1

2

3

4

5

Pertama saya menyatakan warna font, ukuran dan berat paragraf. Lalu testimoni dibungkus dengan tag "h4" karena menurut saya itu adalah bagian penting dari konten dan harus ditekankan seperti ini. Kita juga bisa membungkusnya di dalam tag "p". ". all" digunakan untuk tombol "view more testimonial". Anda akan melihat bahwa saya menggunakan beberapa properti CSS3, seperti sudut membulat. Sebagian besar browser mendukungnya kecuali IE tentunya. IE akan membuatnya sebagai kotak persegi. kita bisa hidup dengan itu. ). Hal terakhir yang ditata adalah tanda tangan dan logo klien, yang akan menjadi tautan ke berandanya. Saya harus mengatur ulang markup sedikit untuk mendapatkan tampilan "tombol lainnya" dan "tanda tangan" dalam urutan yang benar, jadi seperti inilah tampilan markup baru

1

2

3

2

4

Langkah 39

Kami hampir selesai dengan tata letak ini. Yang tersisa hanyalah area footer. Mari kita lihat bagaimana tampilan markup untuk footer kita

1

2

3

4

2

5

2

2

2

2

2

2

2

2

2

2

2

2

2

2

2

2

<head> 

<head> 

2

3

2

3

2

3

2

3

2

3

2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

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

1

2

3

4

2

5

2

2

2

2

2

2

2

2

3

3

3

3

2

3

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

2

Pertama kami menambahkan semua judul di setiap kolom diikuti dengan aturan horizontal. Entri "Blog Terbaru" dibuat dari tanggal, tajuk, dan teks utama. Tanggal ditampilkan dengan gambar latar (ikon), dan Tajuk adalah tautan ke artikel lengkap. Saya telah menambahkan beberapa kelas tambahan ke paragraf dan tautan sehingga saya bisa menatanya dengan CSS nanti. Komentar terbaru dilakukan dengan cara yang hampir sama. Perbedaannya adalah setiap komentar dibungkus di dalam div "recent_comment". Gambar iklan memiliki batas yang tebal, jadi saya membuatnya dengan cara yang sama seperti yang saya lakukan pada kotak testimonial. Anda harus memperhatikan bahwa satu div iklan memiliki kelas "ad_odd" dan yang lainnya hanya "ad". Ini karena saya telah memberikan margin yang berbeda untuk setiap penambahan sehingga mereka tetap sejajar dan berjarak sama. Hal terakhir yang perlu diperhatikan adalah kelas kolom terakhir "column_odd". Alasan melakukan ini sama dengan iklan sebelumnya. Kita akan melihatnya di CSS sebentar lagi. Kotak Twitter memiliki gambar latar belakang sederhana dengan bantalan yang diterapkan

Langkah 40

Mari kita lihat bagaimana tampilan CSS untuk footer

1

2

3

4

5

2

2

2

2

2

3

3

3

3

3

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

Lebar ". kolom" dihitung berdasarkan grid dan padding yang kami tambahkan ke masing-masing. "batas. 30px 0;" memberikan ruang kolom 30px dari atas dan bawah dan 0px dari kiri dan kanan. Seperti yang dikatakan sebelumnya ". date" menerapkan gambar latar belakang (ikon oranye). "h5" adalah judul kolom dan "h6" adalah judul entri Blog Terbaru. Kami juga mendefinisikan. arahkan status untuk "h6". The "column_odd" adalah satu dengan kotak Twitter. Perhatikan itu ". column" memiliki padding kanan set 15px, sedangkan "column_odd" memiliki padding set 0px. Dengan cara ini, kami menyelaraskan semuanya dengan baik di dalam kisi kami. Div Twitter diposisikan secara relatif karena, dengan cara ini, kita dapat dengan mudah memposisikan tautan "Ikuti kami di Twitter" untuk ditampilkan di luar balon Twitter. Kami dapat melakukan ini sebaliknya, tetapi saya pikir ini akan menjadi solusi terbaik di sini

Langkah 41

Navigasi bawah adalah tugas yang mudah sekarang. Yang perlu kita lakukan adalah menambahkan logo dan beberapa pemberitahuan hak cipta dan navigasi kecil berulang yang dimasukkan ke dalam daftar unordered. Kami telah menyiapkan markup kami, sekarang kami membutuhkan CSS untuk itu. Berikut kode CSSnya

1

2

3

4

5

Langkah 42 - Bagaimana dengan IE?

Ya, kami perlu memperbaiki beberapa masalah di IE7 dan IE6. Untuk melakukannya, pertama-tama kita perlu melihat elemen mana yang tidak ditampilkan dengan benar di kedua browser. Saya tidak akan menjelaskan banyak cara memperbaiki bug di IE, tetapi saya hanya dapat mengatakan bahwa ini terutama untuk menyesuaikan margin dan padding. Ada juga sedikit sumber daya tentang bug IE yang umum dan cara memperbaikinya

• 10 Perbaikan yang Memecahkan Masalah IE6
• Biarkan Internet Explorer 6 Berperilaku Seperti Internet Explorer 7
• Cara mendapatkan Kompatibilitas Lintas Browser Setiap Saat
• CSS untuk IE6, 6 masalah umum dan cara cepat untuk memperbaikinya

Pertama-tama letakkan sedikit kode ini di dalam kepala dokumen kita

1

2

3

Langkah 43

Buat ie6. css dan ie7. css dan simpan di dalam folder "css" di mana main. css juga disimpan. Untuk ie7. css rekatkan kode ini

1

2

3

4

5

2

2

2

2

2

3

3

3

3

3

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

Dan ini adalah ie7. css

1

2

3

4

5

2

2

2

2

2

Langkah 44 - Bagaimana dengan transparansi di IE6?

Kami punya obat untuk itu juga ;). Ada beberapa skrip perbaikan PNG IE6 yang tersedia di internet tetapi saya suka menggunakan perbaikan PNG "DD terlambat". Jarang mengacaukan IE6 dan mudah diimplementasikan. Pertama buka situs web ini dan unduh skripnya. Untuk membuatnya berfungsi, kita membutuhkan Komentar Bersyarat lain di kepala dokumen kita

1

2

3

4

5

Selanjutnya buka file "png_fix_elements. js" dan edit di dalam. Anda perlu menentukan semua id dan kelas elemen yang memiliki PNG transparan yang diterapkan padanya

1

2

3

Itu dia

Wow, ini adalah tutorial yang panjang dan melelahkan di mana Anda mempelajari cara membuat kode situs web dari awal. Kami menyentuh hampir setiap topik dalam proses ini. Dari mengatur folder, menganalisis desain, menentukan struktur markup, menyiapkan PSD, memotong gambar, dan membuat kode. Saya harap Anda menikmatinya sama seperti saya

Bagaimana cara membuat situs web yang indah menggunakan HTML?

Bisakah Anda membuat situs web yang bagus dengan HTML?

Bagaimana saya bisa membumbui situs web HTML saya?

Bagaimana cara membuat situs web saya menarik?