Search This Blog
Hai. Akhirnya saya memposting tutorial baru untuk anda semua setelah sekian lamanya Hiatus gara - gara banyak tugas sekolah, hiatusnya pun gk ngasih tahu dulu, hehehe. Rencananya saya mau hiatus lagi untuk sekitar 3 bulan saja (gak lama - lama) karena fokus Ujian Kompetensi, Simulasi dan UNBK. Tapi gak apa apa, Insya Allah selama hiatus saya akan memikirkan tutorial yang berkenaan dengan website dan Dreamweaver dan mempostingnya disini lagi, janji.
Ok langsung saja pada tutorial kali ini berkenaan dengan Desain Web, yaitu Tampilan Web Responsive.
Tampilan
web responsive merupakan tampilan web yang memungkinkan situs website
untuk menyesuaikan atau merespon bagaimana, dimana dan dengan apa website
tersebut dilihat/diakses oleh seseorang. Hal ini tentu mempengaruhi layout
website tersebut secara eksklusif, dan dapat mempengaruhi apa yang ditampilkan
pada perangkat tertentu, seperti di ponsel, atau di perangkat yang memiliki
layar sentuh. Manfaat dari tampilan web responsive adalah supaya
tampilan website tersebut dapat dibuka di segala perangkat, baik itu computer,
laptop / notebook, bahkan smartphone sekalipun.
Tapi
bagaimana cara membuatnya? Tentu saja kembali lagi pada program HTML dibantu
dengan CSS. Pada tutorial ini saya akan menggunakan Dreamweaver untuk
Skripsinya. Berikut ini adalah skrip dan langkah – langkah cara membuat tampilan
web responsive.
1. Pada
Dreamweaver, buat file HTML baru. Lalu simpan dengan nama “index.html”
2. Langsung
saja skrip kode HTML – nya. Skripnya ada di bawah ini.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<nav class="headmenu">
<ul>
<li><a
href="#">Home</a></li>
<li><a
href="#">Support</a></li>
<li><a
href="#">Contact</a></li>
</ul>
</nav>
<div class="wrapper">
<header>
<h1>Dreamweaver Tutorial</h1>
<nav
class="menu">
<ul>
<li><a
href="#">Home</a></li>
<li><a
href="#">Support</a></li>
<li><a
href="#">Contact</a></li>
</ul>
</nav>
</header>
<div
class="main-content">
<section
class="content">
<article>
<h3>Judul Artikel
1</h3>
<p
style="text-align: justify">Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Nullam auctor eros at ipsum posuere, quis dapibus
metus tempus. Vivamus sodales egestas consequat. Donec sodales aliquet lectus
pellentesque dignissim. Curabitur ipsum magna, sodales quis auctor quis,
pulvinar eu neque.</p>
</article>
</section>
<section
class="content">
<article>
<h3>Judul Artikel
2</h3>
<p
style="text-align: justify">Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Nullam auctor eros at ipsum posuere, quis dapibus
metus tempus. Vivamus sodales egestas consequat. Donec sodales aliquet lectus
pellentesque dignissim. Curabitur ipsum magna, sodales quis auctor quis,
pulvinar eu neque.</p>
</article>
</section>
</div>
<aside>
<section class="sidebar">
<h3>Tags</h3>
<p><a
href="#">HTML</a>, <a
href="#">CSS</a>, <a
href="#">MySQL</a>, <a
href="#">PHP</a>, <a href="#">Visual
Basic</a>, <a href="#">Tutorial</a>, <a
href="#">Design</a>, <a
href="#">CorelDraw</a>, <a href="#">Manga
Studio</a>, <a href="#">Download</a></p>
</section>
<section class="sidebar">
<h3>Related
Post</h3>
<ol>
<li><a
href="#">Post 1</a></li>
<li><a
href="#">Post 2</a></li>
<li><a
href="#">Post 3</a></li>
</ol>
</section>
</aside>
<footer>Copyright
© 2018 Dreamweaver Tutorial</footer>
</div>
</body>
</html>
Jangan lupa disimpan. Sehingga
tampilannya menjadi seperti gambar dibawah ini.
Kenapa
kayak gitu tampilannya? Karena belum diberi CSS. Untuk memberi tampilannya,
kita lanjutkan pada langkah ketiga.
1. Buat file
CSS baru. Lalu simppan pada folder yang sama dengan File Name nya “style.css”
2. Langsung saja
skrip kode CSS nya. Skripnya ada dibawah ini.
.wrapper {
width: 90%;
margin-top: 50px;
margin-right: auto;
margin-bottom: 20px;
margin-left: auto;
background-color: #F5F5F5;
}
.sidebar h3 {
background-color: #2E5711;
display: block;
margin: 0px;
padding: 5px;
color: #FFF;
}
a {
color: #172F06;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
header {
display: block;
margin: 0px;
padding: 0px;
background-color: #2E5711;
}
header h1 {
display: block;
padding: 10px;
margin: 0px;
font-size: 48px;
color: #FFF;
}
.menu ul {
display: block;
margin: 0px;
padding: 0px;
list-style-type: none;
overflow: auto;
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #203E0B;
border-bottom-color: #203E0B;
}
.menu ul li a {
color: #FFF;
text-decoration: none;
white-space: nowrap;
display: block;
padding-top: 6px;
padding-right: 20px;
padding-bottom: 6px;
padding-left: 20px;
margin-left: 1px;
}
.menu ul li a:hover {
background-color: #316A09;
}
.headmenu ul li a:hover {
background-color: #316A09;
}
.content {
display: block;
padding: 10px;
margin-bottom: 10px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #CDE9C7;
background-color: #FFFFFF;
}
.main-content {
display: block;
overflow: auto;
width: 65%;
float: left;
margin-top: 20px;
margin-right: 10px;
margin-bottom: 20px;
margin-left: 25px;
}
.sidebar {
display: block;
margin-bottom: 10px;
background-color: #FFFFFF;
padding-bottom: 10px;
}
aside {
width: 25%;
display: block;
float: right;
margin-top: 20px;
margin-bottom: 20px;
margin-right: 25px;
}
footer {
clear: both;
display: block;
background-color: #2E5711;
color: #FFF;
padding: 10px;
}
.menu ul li {
display: block;
float: left;
}
.headmenu ul {
background-color: #172F06;
display: block;
margin: 0px;
padding: 0px;
list-style-type: none;
position: absolute;
left: 0%;
top: 0%;
right: 0%;
overflow: auto;
}
.headmenu ul li {
display: block;
float: left;
}
.headmenu ul li a {
white-space: nowrap;
display: block;
margin-left: 1px;
padding-top: 6px;
padding-right: 20px;
padding-bottom: 6px;
padding-left: 20px;
color: #FFF;
text-decoration: none;
}
body,td,th {
font-family: "Comic Sans MS", cursive;
background-color: #385E13;
}
/*Style Media Kueri*/
@media screen and (max-width:478px)
{
body {
font-size: 13px;
background-color: #385E13;
}
}@media screen and
(max-width:740px) {
.main-content{
width: 100%; margin:auto}
.menu ul {
border-bottom-style: none;
}
.menu ul li {
float:none}
.menu ul li a {
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #203E0B}
aside {
width: 100%; margin:auto}
.sidebar {
display: block;
margin-bottom: 0px;}
img {
max-width: 100%;
height: auto;
}
Jangan
lupa disimpan. Sehingga tampilannya seperti gambar dibawah ini.
Ok, itulah
tutorial Membuat tampilan web Responsive. Dari tutorial ini, anda dapat
mempraktekan dan mengembangkannya.
