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 " TEKNIK ELEKTRO"
</marquee>
<p> </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…..
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 " TEKNIK ELEKTRO"
</marquee>
<p> </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…..
Tidak ada komentar:
Posting Komentar