{"id":66,"date":"2008-02-27T00:01:01","date_gmt":"2008-02-27T00:01:01","guid":{"rendered":"https:\/\/www.dremi.info\/?p=66"},"modified":"2008-02-27T00:01:01","modified_gmt":"2008-02-27T00:01:01","slug":"web-20-layout-with-css-part-4","status":"publish","type":"post","link":"https:\/\/www.dremi.info\/tutorials\/css\/web-20-layout-with-css-part-4.html","title":{"rendered":"Web 2.0 Layout With CSS Part-4"},"content":{"rendered":"

Dengan Software Macromedia Dreamweaver, kita bakalan coba cara bikin halaman layout web 2.0 sesuai rancangan design kita di sotoshop sebelumna. Jadi CSS na pun kita bikin disini bro…
\n
\nPart – 4 Layout Modify in Dreamweaver <\/strong>
\nDengan Software Macromedia Dreamweaver, kita bakalan coba cara bikin halaman layout web 2.0 sesuai rancangan design kita di sotoshop sebelumna. Jadi CSS na pun kita bikin disini bro…
\n\"\"
\nBuka dreamweaver lu, pilih menu File > New<\/strong> (jenis halaman CSS), dan simpan dengan nama file style.css<\/strong>
\nklik pada icon New CSS \"New di panel CSS sebelah kanan
\npada jendela yang muncul, gw mau nge-modif tag body:
\n\"\"
\nklik ok, akan muncul jendela berikutna:
\nhave fun aja, tentuin segala bentuk jenis huruf, besar na, dan margin padding:
\n\"\"
\n\"\"
\nkalo dah selesei, klik OK ….
\nstyle body telah di modif:<\/p>\n

body {
\nfont-family: “Trebuchet MS”;
\nfont-size: 11px;
\ncolor: #000000;
\ntext-decoration: none;
\nmargin: 0px;
\npadding: 0px;
\n}<\/div>\n

Attach link Style Sheet na, dengan klik ikon Attach Style Sheet \"Attach
\ntentukan lokasi penyimpanan file CSS
\n\"\"
\nklik OK…
\nbikin lagi untuk style mainPan<\/strong> dan topHeader<\/strong><\/p>\n

\n\/*MAIN PANEL*\/
\n#mainPan{
\nwidth:760px;
\nposition:relative;
\nmargin:0 auto;
\n}
\n\/*TOP HEADER PANEL*\/
\n#topHeader {
\nwidth:760px;
\nheight:89px;
\nposition:relative;
\nmargin:0 auto;
\nbackground-attachment: fixed;
\nbackground-image: url(images\/bg-topheader.png);
\nbackground-repeat: repeat-x;
\nbackground-position: left top;
\n}<\/div>\n

naaah coba sekarang ambil tool Insert DIV Tag \"Insert bwat bikin div tag di area body na:
\npilih style top Header:
\n\"\"
\npad Code Preview atur baris div tag na ke gini, jadi div tag topHeader<\/strong> berada dalam div tag mainPan<\/strong>
\n\"\"
\nsekarang preview tampilanna pada Design View
\n\"\"
\nlu tinggal masukin gambar icon area di sebelah kiri na (masih dalam div tag topHeader), gunakan tool Insert Image
\n\"\"
\nsampe sini, apakah TAG TABLE diperlukan ? hahahaaa tentu saja tidak sama sekali, webmaster modern kudu make cara ini biar ga ketinggalan jaman….hehehehe…
\nlanjot bro, bikin style ID untuk bodyTopPan<\/strong> dan menuPan<\/strong> masing-masing untuk style ID BODY TOP dan MENU PANEL<\/p>\n

\n\/*—BODY TOP PANEL—*\/
\n#bodyTopPan{
\nwidth:760px;
\nheight:106px;
\n}
\n\/*—MENU PANEL—*\/
\n#menuPan{
\nwidth:760px;
\nheight:28px;
\nmargin: 0px;
\npadding-top: 5px;
\npadding-bottom: 5px;
\nposition:relative;
\n}
\n#menuPan li {float:left; list-style-type:none;}
\n#menuPan li span.spacekosong {
\nwidth:195px;
\nheight:23px;
\ndisplay:block;
\nbackground-color: #f1f1f1;
\nfont-family: “Trebuchet MS”;
\nfont-size: 11px;
\nfont-weight: bold;
\ncolor: #000000;
\ntext-decoration: none;
\npadding-top: 5px;
\ntext-align: center;
\n}
\n#menuPan li a{
\nwidth:108px;
\nheight:23px;
\ndisplay:block;
\nbackground-color: #f1f1f1;
\nfont-family: “Trebuchet MS”;
\nfont-size: 11px;
\nfont-weight: bold;
\ncolor: #7b7b7b;
\ntext-decoration: none;
\ncursor: hand;
\nmargin-right: 5px;
\npadding-top: 5px;
\ntext-align: center;
\n}
\n#menuPan li a:hover{
\nbackground-color: #CEE9FF;
\ncolor: #0066CC;
\n}
\n#menuPan li.current a{
\nbackground-color: #CEE9FF;
\ncolor: #0066CC;
\n}<\/div>\n

dimana style menuPan gw ga pake tag ul , karena biar menu na ga menjorok ke dalem…jadi langsong li aja men …! \ud83d\ude00
\ncode HTML na:<\/p>\n

\n<body>
\n<!–MAIN PANEL–>
\n<div id=”mainPan”>
\n<!–TOP HEADER PANEL–>
\n<div id=”topHeader”><img src=”images\/master_01.png” width=”135″ height=”89″ \/><\/div>
\n<!–END TOP HEADER PANEL–>
\n<!–MENU PANEL–>
\n<div id=”bodyTopPan”>
\n<div id=”menuPan”>
\n<li class=”current”><a href=”index.html”>Home<\/a><\/li>
\n<li><a href=”contact.html”>Contact Us<\/a><\/li>
\n<li><a href=”services.html”>Services<\/a><\/li>
\n<li><a href=”news.html”>News<\/a><\/li>
\n<li><a href=”support.html”>Support<\/a><\/li>
\n<li><span class=”spacekosong”>Sat, 23-Feb-08<\/span><\/li>
\n<\/div><img src=”images\/master_05.png” \/>
\n<\/div>
\n<!–END TOP BODY PANEL–>
\n<\/div>
\n<!–END MAIN PANEL–>
\n<\/body><\/div>\n

langsong insert gambar top body utama na di bawah menu:
\n\"Gedein\"<\/a>
\nMAPPING<\/strong>
\nUntuk membuat link, kita bisa juga menggunakan teknik mapping pada gambar, sehingga bagian link dapat ditentukan sendiri pada area gambar.
\nklik pada area gambar yang akan dikasi mapping link,
\n\"\"
\naktifkan tool mapping \"\" klik dan drag pada area gambar yang dikehendaki sebagai area mapping link :
\n\"\"
\nCopy mapping na (Klik kanan pada mapping, pilih Copy<\/strong>)
\n\"\"
\nuntuk memasang atribut na bisa dilakukan di panel properti mapping:
\n\"\"
\nFORM <\/strong>
\nDalam layout kita punya field form untuk login password, nah sekarang kita bikin style untuk form, input, dan submit na:<\/p>\n

\/*FORM PANEL*\/
\n#formTop {
\nposition:absolute;
\nmargin:0;
\npadding-right:15px;
\npadding-top: 30px;
\npadding-left: 200px;
\nwidth: 405px;
\n}
\nform { margin:0; padding:0; }
\n.input {
\nfont-family: Arial, Helvetica, sans-serif;
\nfont-size: 11px;
\ncolor: #000000;
\nbackground-color: #ffffff;
\nborder: 1px solid #b0c3d2;
\n}
\n.submit {
\nfont-family: Arial, Helvetica, sans-serif;
\nfont-size: 11px;
\ncolor: #FFFFFF;
\ncursor:hand;
\nbackground-color: #0099CC;
\nborder: 1px solid #999999;
\n}<\/div>\n

\"Gedein\"<\/a>
\nNah sekarang tugas lu bwat latihan, bikin style untuk footer na, dengan cara yang sama dengan membuat top header. Jangan lupa, simpan ulang file eksternal CSS lu dan file index.html (master html na). Untuk preview di browser, pencet [F12].
\ndiKulik-kulik aja, biar nanti hasil akhirna ke gini, kakakkakwww… \ud83d\ude00
\n\"gedein\"<\/a>
\nPart-1<\/a> | Part-2<\/a> | Part-3<\/a> | Part-4<\/p>\n

Share on Facebook<\/a><\/p>","protected":false},"excerpt":{"rendered":"

Dengan Software Macromedia Dreamweaver, kita bakalan coba cara bikin halaman layout web 2.0 sesuai rancangan design kita di sotoshop sebelumna. Jadi CSS na pun kita bikin disini bro… Share on Facebook<\/p>\n

Share on Facebook<\/a><\/p>","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11,13,19],"tags":[67,113,208,290,293],"_links":{"self":[{"href":"https:\/\/www.dremi.info\/wp-json\/wp\/v2\/posts\/66"}],"collection":[{"href":"https:\/\/www.dremi.info\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.dremi.info\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.dremi.info\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dremi.info\/wp-json\/wp\/v2\/comments?post=66"}],"version-history":[{"count":0,"href":"https:\/\/www.dremi.info\/wp-json\/wp\/v2\/posts\/66\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.dremi.info\/wp-json\/wp\/v2\/media?parent=66"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.dremi.info\/wp-json\/wp\/v2\/categories?post=66"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.dremi.info\/wp-json\/wp\/v2\/tags?post=66"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}