MINE: WEB DESIGN (CSS)

Pengaturan Layout 2 Kolom Sederhana dengan CSS

Layout halaman yang akan dikembangkan terdiri dari sebuah header, sebuah navigation bar horisontal, kolom content, sebuah sidebar dan sebuah footer.

Langkah 0 : Struktur Dasar

Pertama, berdasar struktur dokumen yang akan dibuat, buatlah struktur dokumen sebagai berikut :

</div>

Atau lengkapnya sebagai berikut :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<head>

<title>Layout 2 KolomSederhanadengan CSS, langkah 0 </title>

</head>

<body>

</div>

</body>

</html>

Langkah 1 : Isi Dokumen

Selanjutnya isi bagian header dan footer dengan keterangan, nav dengan menu, main dengan isi dokumen, dan sidebar dengan link ke halaman-halaman lain:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<head>

<title>Layout 2 KolomSederhanadengan CSS langkah 1 </title>

</head>

<body>

<div id="header"><h1>Layout 2 Kolomsederhanadengan CSS, langkah 1</h1></div>

<ul>

</ul>

</div>

<h2>Kolom 1</h2>

<p><a href="http://www.unj.ac.id">Pelatihan Web Desain, PTIK UNJ</a></p>

<h3>Pembukaan UUD 45</h3>

<p>Bahwasesungguhnyakemerdekaanituialahhaksegalabangsadanolehsebabitu, makapenjajahandiatasduniaharusdihapuskankarenatidaksesuaidenganperikemanusiaandanperikeadilan. Dan perjuanganpergerakankemerdekaan Indonesia telahsampailahkepadasaat yang berbahagiadenganselamatsentosamengantarkanrakyat Indonesia kedepanpintugerbangkemerdekaannegara Indonesia, yang merdeka, bersatu, berdaulat, adildanmakmur.</p>

<p>

Atasberkatrahmat Allah Yang MahaKuasadandengandidorongkanolehkeinginanluhur, supayaberkehidupankebangsaan yang bebas, makarakyat Indonesia menyatakandenganinikemerdekaannya.</p>

<p>

Kemudiandaripadaituuntukmembentuksuatupemerintahnegara Indonesia yang melindungisegenapbangsa Indonesia danseluruhtumpahdarah Indonesia danuntukmemajukankesejahteraanumum, mencerdaskankehidupanbangsa, danikutmelaksanakanketertibandunia yang berdasarkankemerdekaan, perdamaianabadidankeadilansosial, makadisusunlahkemerdekaankebangsaan Indonesia itudalamsuatuUndang-UndangDasarnegara Indonesia, yang terbentukdalamsuatususunannegaraRepublik Indonesia yang berkedaulatanrakyatdenganberdasarkepada : Ketuhanan Yang MahaEsa, kemanusiaan yang adildanberadab, persatuan Indonesia, dankerakyatan yang dipimpinolehhikmatkebijaksanaandalampermusyawaratan/perwakilan, sertadenganmewujudkansuatukeadilansosialbagiseluruhrakyat Indonesia.</p>

</div>

<h2>Kolom 2</h2>

<p>Alamat-alamatPenting :</p>

<ul>

</ul>

</div>

<p>Footer</p>

</div>

</body>

</html>

Langkah 2 : Pengaturan body dan html

Agar isi dokumen penuh ke tepi jendela browser, lakukan pengaturan berikut, berikan juga warna latar :

body,

html {

margin:0;

padding:0;

color:#000000;

background:#a7a09a;

}

Atau lengkapnya menjadi :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<head>

<title>Layout 2 Kolom Sederhana dengan CSS langkah 2</title>

body,

html {

margin:0;

padding:0;

color:#FFF0C2;

background:#004D4C;

}

</style>

</head>

<body>

<div id="header"><h1>Layout 2 Kolom sederhana dengan CSS, langkah 2</h1></div>

<ul>

</ul>

</div>

<h2>Kolom 1</h2>

<p><a href="http://www.unj.ac.id">Pelatihan Web Desain, PTIK UNJ</a></p>

<h3>Pembukaan UUD 45</h3>

<p>Bahwa sesungguhnya kemerdekaan itu ialah hak segala bangsa dan oleh sebab itu, maka penjajahan diatas dunia harus dihapuskan karena tidak sesuai dengan perikemanusiaan dan perikeadilan. Dan perjuangan pergerakan kemerdekaan Indonesia telah sampailah kepada saat yang berbahagia dengan selamat sentosa mengantarkan rakyat Indonesia ke depan pintu gerbang kemerdekaan negara Indonesia, yang merdeka, bersatu, berdaulat, adil dan makmur.</p>

<p>

Atas berkat rahmat Allah Yang Maha Kuasa dan dengan didorongkan oleh keinginan luhur, supaya berkehidupan kebangsaan yang bebas, maka rakyat Indonesia menyatakan dengan inikemerdekaannya.</p>

<p>

Kemudian daripada itu untuk membentuk suatu pemerintah negara Indonesia yang melindungi segenap bangsa Indonesia dan seluruh tumpah darah Indonesia dan untuk memajukan kesejahteraan umum, mencerdaskan kehidupan bangsa, dan ikut melaksanakan ketertiban dunia yang berdasarkan kemerdekaan, perdamaian abadi dan keadilan sosial, maka disusunlah kemerdekaan kebangsaan Indonesia itu dalam suatu Undang-Undang Dasar negara Indonesia, yang terbentuk dalam suatu susunan negara Republik Indonesia yang berkedaulatan rakyat dengan berdasar kepada : Ketuhanan Yang Maha Esa, kemanusiaan yang adil dan beradab, persatuan Indonesia, dan kerakyatan yang dipimpin oleh hikmat kebijaksanaan dalam permusyawaratan/perwakilan, serta dengan mewujudkan suatu keadilan sosial bagi seluruh rakyat Indonesia.</p>

</div>

<h2>Kolom 2</h2>

<p>Alamat-alamat Penting :</p>

<ul>

</ul>

</div>

<p>Footer</p>

</div>

</body>

</html>

Langkah 3 : Pengaturan Rapat Tengah dan Pewarnaan Masing-Masing Container

Selanjutnya, atur agar seluruh dokumen berada di tengah layar dengan pengaturan lebar tertentu. Hal ini cukup dilakukan dengan mengatur lebar(width) dan margin dari container #wrapper. Selanjutnya beri warna untuk masing-masing container untuk memperjelas bagian-bagian container, sehingga kode css akan menjadi:

body,

html {

margin:0;

padding:0;

color:#FFF0C2;

background:#000000;

}

#wrapper {

width:750px;

margin:0 auto;

background:#004D4C;

}

#header { background:#197B86; }

#nav { background:#cc9999; }

#main { background:#329300; }

#sidebar { background:#764445; }

#footer { background:#47586A; }

</style>

Penggunaan container khusus(wrapper) lebih aman, dibanding pengaturan elemen body, hal ini bisa menjadi masalah di sejumlah versi Internet Exlporer.

Langkah 4 : Pengaturan Kolom 1 dan Kolom 2

Agar kolom #main dan kolom #sidebar dapat ditampilkan saling berdampingan, aktifkan float kiri dan float kanan keduanya. Selajnutnya atur lebar(width) keduanya dan pastikan jumlahnya sama dengan lebar #wrapper.

body,

html {

margin:0;

padding:0;

color:#FFF0C2;

background:#000000;

}

#wrapper {

width:750px;

margin:0 auto;

background:#004D4C;

}

#header { background:#197B86; }

#nav { background:#cc9999; }

#main {

background:#329300;

float:left;

width:500px;

}

#sidebar {

background:#764445;

float:right;

width:250px;

}

#footer { background:#47586A; }

</style>

Kode CSS diatas meyisakan satu masalah, posisi #footer tidak berada di tempatnya.

Langkah 5 : Mengatur Letak #footer

Akibat pengaruh pengaturan float sebelumnya, maka #footer akan berada di bawah #sidebar. Unuk menghilangkan efek float, hapus dengan clear:both;

#footer {

background:#47586A;

clear:both;

}

Langkah 6 : Memenuhi warna #sidebar

#footer telah kembali ke tempatnya, namun bagian sidebar belum penuh, hal ini karena warna #Wrapper dan #sidebar berbeda. Agar penuh, samakan warna #sidebar dengan #wrapper

#wrapper {

width:750px;

margin:0 auto;

background:#764445;

}

#sidebar {

background:#764445;

float:right;

width:250px;

}

Langkah 7 : Membuat Navigation Bar Horizontal.
#nav mengandung sejumlah elemen link yang memanfaatkan unordered list<ul>, kita dapat mengubahnya agar tampil secara horizontal.

#navul {

margin:0;

padding:0;

list-style:none;

}

#nav li {

display:inline;

margin:0;

padding:0;

}

8.Langkah Akhir
Lakukan sejumlah perbaikan untuk memperbaiki hasil akhir

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<head>

<title>Layout 2 Kolom Sederhana dengan CSS langkah 8 </title>

body,

html {

margin:0;

padding:0;

color:#FFF0C2;

background:#000000;

}

#wrapper {

width:750px;

margin:0 auto;

background:#764445;

}

#header {

padding:5px 10px;

background:#197B86;

}

#nav {

background:#5C4E7F;

padding:5px 10px;

}

#main {

background:#000066;

float:left;

width:480px;

padding:10px;

}

#sidebar {

background:#764445;

float:right;

width:250px;

}

#footer {

background:#47586A;

clear:both;

}

#nav ul {

margin:0;

padding:0;

list-style:none;

}

#nav li {

display:inline;

margin:0;

padding:0;

}

h1 { margin:0;}

h2 { margin:0 0 1em;}

#footer p { margin:0;}

a:link {color:#339999;text-decoration:none;}

a:visited {color:#CC9933;text-decoration:none;}

a:hover {color:#880088; text-decoration:none;

background-color:#99EE99;border-bottom-style:solid;

border-color:#FFF0C2; border-width:2px;

}

a:active {color:#BB88BB;text-decoration:none;

background-color:#197B86;border-bottom-style:dotted;

border-color:#FFF0C2;border-width:2px;

}

</style>

</head>

<body>

<div id="header"><h1>Layout 2 Kolom sederhana dengan CSS, langkah 8</h1></div>

<ul>

<li><a href="/">Menu 1</a></li>|

<li><a href="/">Menu 2</a></li>|

<li><a href="/">Menu 3</a></li>|

<li><a href="/">Menu 4</a></li>|

</ul>

</div>

<h2>Kolom 1</h2>

<p><a href="http://www.unj.ac.id">Pelatihan Web Desain, PTIK UNJ</a></p>

<h3>Pembukaan UUD 45</h3>

<p>Bahwa sesungguhnya kemerdekaan itu ialah hak segala bangsa dan oleh sebab itu, maka penjajahan diatas dunia harus dihapuskan karena tidak sesuai dengan perikemanusiaan dan perikeadilan. Dan perjuangan pergerakan kemerdekaan Indonesia telah sampailah kepada saat yang berbahagia dengan selamat sentosa mengantarkan rakyat Indonesia ke depan pintu gerbang kemerdekaan negara Indonesia, yang merdeka, bersatu, berdaulat, adil dan makmur.</p>

<p>Atas berkat rahmat Allah Yang Maha Kuasa dan dengan didorongkan oleh keinginan luhur, supaya berkehidupan kebangsaan yang bebas, maka rakyat Indonesia menyatakan dengan inikemerdekaannya.</p>

<p>Kemudian daripada itu untuk membentuk suatu pemerintah negara Indonesia yang melindungi segenap bangsa Indonesia dan seluruh tumpah darah Indonesia dan untuk memajukan kesejahteraan umum, mencerdaskan kehidupan bangsa, dan ikut melaksanakan ketertiban dunia yang berdasarkan kemerdekaan, perdamaian abadi dan keadilan sosial, maka disusunlah kemerdekaan kebangsaan Indonesia itu dalam suatu Undang-Undang Dasar negara Indonesia, yang terbentuk dalam suatu susunan negara Republik Indonesia yang berkedaulatan rakyat dengan berdasar kepada : Ketuhanan Yang Maha Esa, kemanusiaan yang adil dan beradab, persatuan Indonesia, dan kerakyatan yang dipimpin oleh hikmat kebijaksanaan dalam permusyawaratan/perwakilan, serta dengan mewujudkan suatu keadilan sosial bagi seluruh rakyat Indonesia.</p>

</div>

<h2>Kolom 2</h2>

<p>Alamat-alamat Penting :</p>

<ul>

</ul>

</div>

<p>Footer</p>

</div>

</body>

</html>

Tugas :

1. Tulisdansimpanmasing-masinglangkah di dalam file.
Lanjutkanlangkah-langkah di atas :

2. Ubahposisikolom 2 menjadi di sebelahkiri, dankolom 1 di sebelahkanan

3. Aturulangpemilihanwarna, jenishuruf, ukuranhuruf, agar menjadilebihbaik.

4. Ubah menu pada navigation bar (menu barissetelah header) menjadi: Home,Biodata,Galeri,Cita-Cita,Respon

5. Gunakanhasilnyauntukmengisimasing-masingkontendariTugas 1 (Salam, Biodata, Galeri, Cita-cita) kemsing-masinghalamanberbeda.

6. TambahkanhalamanRespon, untukmenerimamasukandaripengunjungdenganmenggunakanelemen-elemen form html

7. Perbaiki link menu navigation bar

8. Pisahkankodecsskedalam file tersendiri

9. Perbaikitampilan layout, kombinasiwarna, pilihan typeface, ganti header dengan image, dsb.

Catatan :hanya gunakan kode css versi 1 dan versi 2.

MINE

Sabtu, 12 Juli 2014

WEB DESIGN (CSS)

Tidak ada komentar:

Posting Komentar

MY BLOG