Senin, 01 Maret 2010

Desain Layout dengan CSS 2



Na...Setelah desain layout 1 selesai, langkah selanjutnya bagaimana membuat tampilan seperti gambar diatas???????
membuat suatu desain layout dengan css yang lebih atraktif dibutuhkan Penambahan image dan background color pada masing-masing jenis css sangatlah dianjurkan sehingga membuat tampilan web Qt lebih menarik… seperti pada desain yang prtama,,desain layout2 masih memanfaatkan CSS untuk keperluan modifikasi tulisan dan gambar..
Dengan css, kita dapat mengatur style maupun perilaku dari suatu link. CSS juga memungkinkan halaman yang sama untuk ditampilkan dengan cara yang berbeda untuk metode presentasi yang berbeda, seperti melalui layar, cetak, suara (sewaktu dibacakan oleh browser basis-suara atau pembaca layar), dan juga alat pembaca braille. Halaman HTML atau XML yang sama juga dapat ditampilkan secara berbeda, baik dari segi gaya tampilan atau skema warna dengan menggunakan CSS.


weeeees...Tidak usah panjang lebar y..capek --!!l ;D
Langsung saja qt bwt style2.css (gak harus ini lo) berikut ini:

Mystyle2.css

#wrapper {
margin: auto;
width: 750px;
background-image:url(backgound3.jpg);
border: 1px;
}
#header {
height: 80px;
border: 1px;
background-repeat:no-repeat;
}
#logo {
float:left;
width: 78px;
height: 78px;
margin-top: 0px;
margin-left: 0px;
background: url(UM4.png) no-repeat;
border: 1px;
}
#Teknik {
float: left;
margin-right: 5px;
margin-top: 0px;
width: 300px;
height: 78px;
border: 1px;
}
#menu {
width: 250px;
padding: 0;
height: 77px;
float:right;
}
#menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#menu li {
display: inline;
}
#menu a {
margin-right: 2px;
text-transform: uppercase;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
color:#FFFFFF;
}
#menu a:hover, #menu .current_page_item a {
color:#0000CC;
}
#menu a:hover {
text-decoration: underline;
}
#inner {
float: left;
margin: 5px 0px 0px 0px;
background-color:#999999;
border: 1px;
}
#sidebar {
float: left;
width: 180px;
height: 345px;
margin: 0px 0px 0px 0px;
background-color:#999999;
border: 1px;
}
h4{
margin: 0;
text-transform: uppercase;
letter-spacing: .15em;
font-family: Arial, Helvetica, sans-serif;
font-size:18px;
color:#FFFFFF;
background: #183134 no-repeat left center;
}

#leftmenu ul {
width: 180px;
list-style-type:none;
padding:0; margin:0;
font-size:13px
}
#leftmenu a:link, #leftmenu a:visited, #leftmenu a:active {
padding-left: 15px;
text-decoration: none;
}
#leftmenu a {
padding: 5px 0px 5px 15px; display: block;
background:#000066 no-repeat left center;
margin: 0px 0px 1px; color: #ffffff;
}
#leftmenu a:hover {
background:#000066 no-repeat left center; color: #ffffff
}

#top{
float:left;
width:567px;
height:100px;
margin: 0px 0px 0px 0px;
background-image:url(top.jpg);
background-repeat:no-repeat;
border:1px solid green;
}

#content {
float: left;
width: 330px;
height: 230px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
padding: 10px 5px 5px 10px;
background-color:#FFFFFF;
border: 1px;
}
#right {
float:right;
width:200px;
height:150px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
margin: 5px 0px 5px 0px;
padding: 10px 5px 5px 15px;
background-color:#CCCCCC;
border:1px;
}
#search{
padding:30px 0 0 10px;
font:Arial, Helvetica, sans-serif;
font-size:14px;
color:#FFFFFF;
}
#footer {
clear: both;
height: 50px;
margin: 0px 0px 0px 0px;
background-image:url(backgound2.jpg);
font:Arial, Helvetica, sans-serif;
border: 1px;
}

Kemudian Buat desain layout seperti berikut:
Desain Layout2.Html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Desain Layout2</title>
<LINK REL="STYLESHEET" TYPE="text/css" HREF="mystyle2.css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<div id="wrapper">
<div id="header">

<div id="menu">
<ul id="main">
<li><a href="index.html"> Home |</a></li>
<li><a href="#">Sitemap |</a></li>
<li><a href="#">RSS |</a></li>
<li><a href="contact.html">Contact |</a></li>
<li><a href="aboutus.html">About Us</a></li>
</ul>
<div id="search"><form name="form1" method="post" action="">
<label>Search
<input type="text" name="textfield">
</label>
</form>
</div>
</div>
<div id="logo">

</div>
<div id = "Teknik">

<h1 align="left">TEKNIK ELEKTRO</h1>

</div>

<div id="inner">
<div id="sidebar">
<div id="leftmenu">
<ul>
<li>
<h4 align="center"><img src="Menu1.jpg"></h4>
</li>
<li><a href="Home.html">Home </a></li>
<li><a href="News & Media.html">News & Media</a></li>
<li><a href="Tutorials.html">Tutorials</a></li>
<li><a href="Tips & Triks.html">Tips & Triks</a></li>
<li><a href="Download.html">Download</a></li>
</ul>
</div>
</div>

<div id="top">

</div>
<div id="content"><marquee behavior="scroll">Welcome to &quot; TEKNIK ELEKTRO&quot;
</marquee>
<p>&nbsp;</p>
<b>HTML<br/></b>
<br/>
HTML (Hypertext Markup Language) merupakan sebuah bahasa markup,</br>
bukan bahasa pemrograman. Bahasa markup (Indonesia: markah) adalah</br>
bahasa yang mengombinasikan teks dan informasi tambahan mengenai teks</br>
tersebut. HTML merupakan dokumen standar yang digunakan untuk</br>
mendesain halaman web.
</div>
<div id="right">
<p>Events:</p>
<ul>
<li><a href="Panjat Tiang.html">Lomba Panjat Tiang Listrik</a></li>
<li><a href="Tarik Kabel.html">Lomba Tarik Kabel</a></li>
<li><a href="Nyetrum.html">Lomba Nyetrum</a></li>
<li><a href="Nyolder.html">Lomba Nyolder</a></li>
</ul>
</div>
</div>
<div id="footer">
<div align="center"><h2 align="center">farqva@gmail.com</h2>
</div>
</div>
</div>
</body>
</html>

Akhirnya desain layout sederhana yang qt bwat selesai…selanjutnya qt tinggal memodifikasi pa yang ingin qt ubah sehingga menjadi lebih menarik lagi..
Terima ksih telah membaca artikel ini semoga bermanfaat bagi semua…..

Diposting oleh di Tidak ada komentar:
Label:

Desain Layout dengan CSS 1

Kali ini kita akan membuat sebuah layout seperti gambar di samping dengan menggunkan css. Apa itu css?????
ehm gampang…:D
Cascading style sheet (CSS) merupakan sekumpulan aturan yang menyatakan
bagaimana style diaplikasikan ke tag-tag HTML di dalam dokumen.
Rekomendasi CSS menguraikan tiga jenis style:
Embedded: properti style diletakkan di dalam satu blok di dokumen
HTML.
Inline: properti style diterapkan secara langsung per baris atau per elemen
HTML.
Linked: properti style diletakkan di file berekstensi css dan dikaitkan
dengan dokumen HTML.



Untuk membuat desain layout web dengan css langkah pertama yaitu mempersiapkan wrapper, langkah selanjutnya adalah membuat desain layout. Sebagai contoh, kita akan membuat layout standar (header, menu, content, dan footer) dengan style terpisah.
berikut dan simpan dengan nama mystyle.css
Definisikan style seperti berikut dan simpan dengan nama mystyle.css.

Mystyle1.css
#wrapper {
margin: auto;
width: 750px;
border: 1px solid red;
}
#header {
height: 80px;
border: 1px solid blue;
}
#inner {
float: left;
margin: 5px 0;
border: 1px solid black;
}
#sidebar {
float: left;
margin-right: 20px;
width: 180px;
height: 330px;
border: 1px solid red;
}
#content {
float: left;
width: 544px;
height: 330px;
border: 1px solid green;
}
#Top {
float:right;
width: 544px;
height:90px;
border: 1px solid red;
}

#Bottom {
float:right;
width: 544px;
height:238px;
border: 1px solid green;
}
#Left {
float:Left;
width: 330px;
height: 230px;
border: 1px solid red;
}

#Right {
float:right;
margin-left: 20px;
width: 190px;
height: 150px;
border: 1px solid red;
}

#footer {
clear: both;
height: 50px;
border: 1px solid blue;
}

Buat desain layout seperti berikut:

Desain Layout1.Html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Desain Layout</title>
<link rel="stylesheet" href="mystyle.css" type="text/css" />

</head>
<div id = "wrapper">
<div id="header">
header
</div>

<div id="inner">
<div id="sidebar">
Sidebar
</div>

<div id="content">
<div id="Top">
Top
</div>
<div id="Bottom">
<div id="Left">
Content
</div>
<div id="Right">
Right
</div>
</div>
</div>
</div>

<div id="footer">
Footer
</div>
</div>
</body>
</html>

Sekian dulu y semoga bermanfaat…Qt sambung Lg pada Desain layout 2 yang pastinya lebih kompleks…;D
Diposting oleh di Tidak ada komentar:
Label:
Langganan: Postingan (Atom)

Avenged sevenfold - Seize the Day