howeby- Sebelum mulai membuat web, ada baiknya kita membuat rancangan layoutnya terlebih dahulu agar web yang kita buat lebih terarah. Pengertian dari Layout atau tata letak sendiri adalah penyusunan dari elemen-elemen desain yang berhubungan ke dalam sebuah bidang sehingga membentuk susunan artistik. Tujuan utama dibuatnya layout yaitu menampilkan elemen gambar dan teks agar menjadi komunikatif dalam sebuah cara yang dapat memudahkan pembaca menerima informasi yang disajikan.
Berikut adalah contoh rancangan layout yang telah saya buat menggunakan tool sederhana (ms word), kamu bisa merancang layout sesuai dengan selera dengan tool yang lebih baik seperti photoshop, dll.
 |
| Gambar 1. Rancangan Layout |
Dalam rancangan layout diatas terdapat beberapa komponen yaitu navigasi, logo, slider, content dan footer. berikut step-step
Instalasi Bootstrap
copy file berikut letakkan dibawah tag </body>
<!-- Fixed navbar -->
<nav class="navbar navbar-inverse navbar-fixed-top" style="background-color:black;font-size:12px;">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Fixed navbar<a class="navbar-brand" href="#" style="color:white;text-shadow:2px 2px 2px grey; font-weight:bold;">FTI UNISBANK</a> -->
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="index.php?module=home">Beranda</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><strong>Profil </strong><span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="index.php?module=visi">Visi dan Misi</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><strong>Program Studi</strong><span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="index.php?module=d3-mi">Manajemen Informatika</a></li>
<li><a href="index.php?module=si">Sistem Informasi</a></li>
<li><a href="index.php?module=ti">Teknik Informatika</a></li>
<li><a href="index.php?module=msi">Magister Sistem Informasi</a></li>
</ul>
</li>
<li>
<a href="index.php?module=daftar"><strong>Pendaftaran Mahasiswa Baru</strong></a>
</li>
<li>
<a href="index.php?module=kelas-sore"><strong>Kuliah Sore</strong></a>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<table style="margin-top:80px;margin-left:30px;">
<tr>
<td><img class="img-responsive" src="images/logo.png" style="height:90px;width:80px;padding:2px 4px 2px 4px;"><span style="font-size:9px;font-weight:bold;align:center;">    UNISBANK</span></td>
<td style="border-left:6px solid #cc0000;padding:5px 5px 5px 5px;"><p style="font-size:10px;">FAKULTAS</p><h4 style="font-weight:bold;letter-spacing:0.1em;font-family:cambria;"> TEKNOLOGI<br> INFORMASI<h4></td>
</tr>
</table>
<!-- Carousel
================================================== -->
<div class="col-md-12">
<div id="myCarousel" class="carousel slide" data-ride="carousel" style="background-color:black;">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="first-slide" src="images/brosur.jpg" alt="First slide">
<div class="container">
<div class="carousel-caption">
<a href="#" class="coratas"> <a href="#" class="coratas"><h4>Pembekalan & Pelepasan FTI Oktober 2016</h4></a>
<div class="kecil">Pembekalan wisuda FTI periode Oktober 2016 akan dilaksanakan pada tanggal 19 Oktober 2016</div>
</div>
</div>
</div>
<div class="item">
<img class="second-slide" src="images/lomba.jpg" alt="Second slide">
<div class="container">
<div class="carousel-caption">
<a href="#" class="coratas"><h4>Pembekalan & Pelepasan FTI Oktober 2016</h4></a>
<div class="kecil">Pembekalan wisuda FTI periode Oktober 2016 akan dilaksanakan pada tanggal 19 Oktober 2016</div>
</div>
</div>
</div>
<div class="item">
<img class="third-slide" src="images/wisuda.jpg" alt="Third slide">
<div class="container">
<div class="carousel-caption">
<a href="#" class="coratas"><h4>Pembekalan & Pelepasan FTI Oktober 2016</h4></a>
<div class="kecil">Pembekalan wisuda FTI periode Oktober 2016 akan dilaksanakan pada tanggal 19 Oktober 2016</div>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div><!-- /.carousel -->
</div>
<div class="row featurette">
<div class="col-md-3" style="border-top:2px solid #0066ff;">
<h4 >Berita</h4>
<p class="lead">Untuk anda calon wisudawan / wisudawati bahwa untuk wisuda bulan Oktober 2016 disediakan undangan tambahan seperti pada tautan pengumuman berikut ini :
pengumuman-undangan-tambahan-wisuda-oktober-2016 Segera hubungi keuangan sebelum kehabisan.</p>
</div>
<div class="col-md-1">   </div>
<div class="col-md-5" style="border-top:2px solid #0066ff;">
<h4 >Pengumuman</h4>
<table>
<tr>
<td>28 Okt</td><td><a href="#"><p style="border-bottom:2px solid #bfbfbf;">UNISBANK Bangun Desa (Peletakan Batu Pertama Pembangunan Kursi Taman Desa ...
October 09, 2016</p></a></td>
</tr>
<tr>
<td>26 Okt</td><td><a href="#"><p style="border-bottom:2px solid #bfbfbf;">UNISBANK Bangun Desa (Peletakan Batu Pertama Pembangunan Kursi Taman Desa ...
October 09, 2016</p></a>
</td>
</tr>
<tr>
<td>24 Okt</td><td><a href="#"><p style="border-bottom:2px solid #bfbfbf;">UNISBANK Bangun Desa (Peletakan Batu Pertama Pembangunan Kursi Taman Desa ...
October 09, 2016</p></a>
</td>
</tr>
<tr>
<td>22 Okt</td><td><a href="#"><p style="border-bottom:2px solid #bfbfbf;">UNISBANK Bangun Desa (Peletakan Batu Pertama Pembangunan Kursi Taman Desa ...
October 09, 2016</p></a>
</td>
</tr>
<tr>
<td style="width:50px;"><p>21 Okt</p></td><td><a href="#"><p style="border-bottom:2px solid #bfbfbf;">UNISBANK Bangun Desa (Peletakan Batu Pertama Pembangunan Kursi Taman Desa ...
October 09, 2016</p></a>
</td>
</tr>
</table>
</div>
<div class="col-md-1">   </div>
<div class="col-md-2" style="border-top:2px solid #cc0066;">
<h4 >Tautan</h4>
<table>
<tr>
<td><a href="http://www.unisbank.com" target="_blank" style="border-bottom:2px solid #bfbfbf;">Unisbank <span style="color:red;" class="glyphicon glyphicon-link" aria-hidden="true"></span> </a></td>
</tr>
<tr>
<td><a href="http://www.w3schools.com" target="_blank"><p style="border-bottom:2px solid #bfbfbf;">Belajar Web <span style="color:red;" class="glyphicon glyphicon-link" aria-hidden="true"></span></p></a>
</td>
</tr>
<tr>
<td><a href="http://www.bootstrap.com" target="_blank"><p style="border-bottom:2px solid #bfbfbf;">Bootstrap <span style="color:red;" class="glyphicon glyphicon-link" aria-hidden="true"></span></p></a>
</td>
</tr>
</table>
</div>
<div class="col-md-12" style="border-top:2px solid #0066ff;"><br>
</div>
</div> <!-- /.row featurette -->
</div> <!-- /.container -->
<footer style="font-size:12px;">
<div class="footer-content">
<hr style="background-color:#cc0000;margin-top:-5px; border-top:3px solid red;">
<address class="address row">
<p class="col-lg-10 col-md-10 col-sm-9 col-xs-12">
STIKUBANK UNIVERSITY | Fakultas Teknologi Informasi <br/>Jl. Tri Lomba Juang No. Mugas <br> Semarang 10101, Indonesia <br/>Phone +62 21 534 5830, +62 21 535 0660 ext. 2352 <br> Fax +62 21 530 0244 </p>
</address>
</div>
<center>
<p>© 2016 Siti AL Mutmainah, Inc.</p></center>
</footer>
Install Bootstrap
Tentunya kita harus sudah mempunyai bootstrap yang sudah terinstall, jika belum silakan lakukan instalasi bootstrap terlebih dahulu.Instalasi Bootstrap
Navigasi
copy file berikut letakkan dibawah tag </body>
<!-- Fixed navbar -->
<nav class="navbar navbar-inverse navbar-fixed-top" style="background-color:black;font-size:12px;">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Fixed navbar<a class="navbar-brand" href="#" style="color:white;text-shadow:2px 2px 2px grey; font-weight:bold;">FTI UNISBANK</a> -->
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="index.php?module=home">Beranda</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><strong>Profil </strong><span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="index.php?module=visi">Visi dan Misi</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><strong>Program Studi</strong><span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="index.php?module=d3-mi">Manajemen Informatika</a></li>
<li><a href="index.php?module=si">Sistem Informasi</a></li>
<li><a href="index.php?module=ti">Teknik Informatika</a></li>
<li><a href="index.php?module=msi">Magister Sistem Informasi</a></li>
</ul>
</li>
<li>
<a href="index.php?module=daftar"><strong>Pendaftaran Mahasiswa Baru</strong></a>
</li>
<li>
<a href="index.php?module=kelas-sore"><strong>Kuliah Sore</strong></a>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
Logo
<table style="margin-top:80px;margin-left:30px;">
<tr>
<td><img class="img-responsive" src="images/logo.png" style="height:90px;width:80px;padding:2px 4px 2px 4px;"><span style="font-size:9px;font-weight:bold;align:center;">    UNISBANK</span></td>
<td style="border-left:6px solid #cc0000;padding:5px 5px 5px 5px;"><p style="font-size:10px;">FAKULTAS</p><h4 style="font-weight:bold;letter-spacing:0.1em;font-family:cambria;"> TEKNOLOGI<br> INFORMASI<h4></td>
</tr>
</table>
SLider/Carousel
================================================== -->
<div class="col-md-12">
<div id="myCarousel" class="carousel slide" data-ride="carousel" style="background-color:black;">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="first-slide" src="images/brosur.jpg" alt="First slide">
<div class="container">
<div class="carousel-caption">
<a href="#" class="coratas"> <a href="#" class="coratas"><h4>Pembekalan & Pelepasan FTI Oktober 2016</h4></a>
<div class="kecil">Pembekalan wisuda FTI periode Oktober 2016 akan dilaksanakan pada tanggal 19 Oktober 2016</div>
</div>
</div>
</div>
<div class="item">
<img class="second-slide" src="images/lomba.jpg" alt="Second slide">
<div class="container">
<div class="carousel-caption">
<a href="#" class="coratas"><h4>Pembekalan & Pelepasan FTI Oktober 2016</h4></a>
<div class="kecil">Pembekalan wisuda FTI periode Oktober 2016 akan dilaksanakan pada tanggal 19 Oktober 2016</div>
</div>
</div>
</div>
<div class="item">
<img class="third-slide" src="images/wisuda.jpg" alt="Third slide">
<div class="container">
<div class="carousel-caption">
<a href="#" class="coratas"><h4>Pembekalan & Pelepasan FTI Oktober 2016</h4></a>
<div class="kecil">Pembekalan wisuda FTI periode Oktober 2016 akan dilaksanakan pada tanggal 19 Oktober 2016</div>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div><!-- /.carousel -->
</div>
Content
<div class="container">
<div class="row featurette">
<div class="col-md-3" style="border-top:2px solid #0066ff;">
<h4 >Berita</h4>
<p class="lead">Untuk anda calon wisudawan / wisudawati bahwa untuk wisuda bulan Oktober 2016 disediakan undangan tambahan seperti pada tautan pengumuman berikut ini :
pengumuman-undangan-tambahan-wisuda-oktober-2016 Segera hubungi keuangan sebelum kehabisan.</p>
</div>
<div class="col-md-1">   </div>
<div class="col-md-5" style="border-top:2px solid #0066ff;">
<h4 >Pengumuman</h4>
<table>
<tr>
<td>28 Okt</td><td><a href="#"><p style="border-bottom:2px solid #bfbfbf;">UNISBANK Bangun Desa (Peletakan Batu Pertama Pembangunan Kursi Taman Desa ...
October 09, 2016</p></a></td>
</tr>
<tr>
<td>26 Okt</td><td><a href="#"><p style="border-bottom:2px solid #bfbfbf;">UNISBANK Bangun Desa (Peletakan Batu Pertama Pembangunan Kursi Taman Desa ...
October 09, 2016</p></a>
</td>
</tr>
<tr>
<td>24 Okt</td><td><a href="#"><p style="border-bottom:2px solid #bfbfbf;">UNISBANK Bangun Desa (Peletakan Batu Pertama Pembangunan Kursi Taman Desa ...
October 09, 2016</p></a>
</td>
</tr>
<tr>
<td>22 Okt</td><td><a href="#"><p style="border-bottom:2px solid #bfbfbf;">UNISBANK Bangun Desa (Peletakan Batu Pertama Pembangunan Kursi Taman Desa ...
October 09, 2016</p></a>
</td>
</tr>
<tr>
<td style="width:50px;"><p>21 Okt</p></td><td><a href="#"><p style="border-bottom:2px solid #bfbfbf;">UNISBANK Bangun Desa (Peletakan Batu Pertama Pembangunan Kursi Taman Desa ...
October 09, 2016</p></a>
</td>
</tr>
</table>
</div>
<div class="col-md-1">   </div>
<div class="col-md-2" style="border-top:2px solid #cc0066;">
<h4 >Tautan</h4>
<table>
<tr>
<td><a href="http://www.unisbank.com" target="_blank" style="border-bottom:2px solid #bfbfbf;">Unisbank <span style="color:red;" class="glyphicon glyphicon-link" aria-hidden="true"></span> </a></td>
</tr>
<tr>
<td><a href="http://www.w3schools.com" target="_blank"><p style="border-bottom:2px solid #bfbfbf;">Belajar Web <span style="color:red;" class="glyphicon glyphicon-link" aria-hidden="true"></span></p></a>
</td>
</tr>
<tr>
<td><a href="http://www.bootstrap.com" target="_blank"><p style="border-bottom:2px solid #bfbfbf;">Bootstrap <span style="color:red;" class="glyphicon glyphicon-link" aria-hidden="true"></span></p></a>
</td>
</tr>
</table>
</div>
<div class="col-md-12" style="border-top:2px solid #0066ff;"><br>
</div>
</div> <!-- /.row featurette -->
</div> <!-- /.container -->
Footer
<footer style="font-size:12px;">
<div class="footer-content">
<hr style="background-color:#cc0000;margin-top:-5px; border-top:3px solid red;">
<address class="address row">
<p class="col-lg-10 col-md-10 col-sm-9 col-xs-12">
STIKUBANK UNIVERSITY | Fakultas Teknologi Informasi <br/>Jl. Tri Lomba Juang No. Mugas <br> Semarang 10101, Indonesia <br/>Phone +62 21 534 5830, +62 21 535 0660 ext. 2352 <br> Fax +62 21 530 0244 </p>
</address>
</div>
<center>
<p>© 2016 Siti AL Mutmainah, Inc.</p></center>
</footer>
0 Comments