Tutorial Desain Web Responsif dengan Bootstrap (Bagian 2) - Membuat Menu Responsif

Minggu, 14 Mei 2017 15:04:21 ,Oleh ,Dilihat : 1.896 x

Diasuh oleh Dr. Ir. Agus Wibowo, M.Kom, M.Si, M.M

       Pada bagian ini kita akan belajar cara membuat menu website yang responsif di mana menu akan tampil normal (tampil memanjang horizontal) pada mode layar PC desktop atau Laptop, sebaliknya akan tampil sebagai menu mobile ketika dibuka pada peralatan smartphone atau mini tablet. Agar lebih mudah proses pembuatan menu ini, akan kita gunakan editor web Adobe Dreamweaver CC atau versi di atasnya. Untuk versi Adobe Dreamweaver 6 dan di bawahnya belum belum mendukung versi bootsrap. Dengan Adobe Dreamweaver CC, file CSS, JQuery serta Font akan langsung dihasilkan secara otomatis oleh Dreamweaver. Jadi kita tidak perlu repot harus menyalin folder  CSS, JQuery serta Font yang didapat dari hasil ekstrak file unduhan Bootstrap serta JQuery. Bootstrap dan JQuery harus Anda unduh jika menggunakan editor generik seperti Notepad ++ atau Sublime Text. Penggunaan tool Adobe Dreamweaver CC dapat menghemat waktu dan tenaga secara drastis, terutama bagi Anda yang tidak berminat pada script atau koding untuk pemrograman.

Berikut langkah membuat menu web Responsif :

1. Lakukan instalasi emulator server hosting sebagai contoh XAMPP, setelah selesai kemudian jalankan dengan menekan tombol Start pada webserver Apache (1) serta server data base MySQL (2)


2. Buat folder bernama latihan di c:/xampp/htdocs

3. Jalankan Adobe Dreamweaver CC. Buat proyek yang baru dengan memilih menu Site (1) --> New Site (2) --> Site, pada isian Site Name isikan sebagai contoh Web responsif (4), pada opsi Local Site Folder arahkan ke tempat dimana folder dengan nama latihan sudah dibuat sebelumnya, dalam hal ini adalah c:/xampp/htdocs/latihan (5)


4. Pilih opsi Advanced Settings (1) kemudian pilih Local Info (2), pada opsi Link relative to pilih Site Root (3), pada isian Web URL ketikkan alamat http://localhost/latihan (4) kemudian tekan tombol Save (5)

5. Buat halaman awal dengan format HTML 5 dilengkapi CSS3 dan JQuery serta  dengan cara memilih menu File (1) --> New (2), kemudian pada kotak dialog New Document pilih opsi New Document (3), pada opsi Document Type pilih HTML (5), kemudian pada opsi Framework pilih Bootstrap (6) pada opsi Bootstrap CSS pilih opsi Create new, pada opsi Design, hilangkan tanda centang pada Include pre-built layout kemudian tekan tombol Create

6. Setelah beberapa saat akan muncul tampilan kode sumber berupa dokumen HTML versi 5, tekan tombol Code (1),  perhatikan kode baris :

<link href="file:///C|/xampp/htdocs/latihan/css/bootstrap.css" rel="stylesheet">   keterangan 2

<script src="file:///C|/xampp/htdocs/latihan/js/jquery-1.11.3.min.js"></script>  keterangan 3

<script src="file:///C|/xampp/htdocs/latihan/js/bootstrap.js"></script>  keterangan 4


7. Kode baris untuk CSS (bootstrap.css)dan JQuery (jquery-1.11.3.min.js dan bootstrap.js)  pada contoh di atas mengacu posisi mutlak dari letak file CSS dan JQuery, harus kita ubah menjadi posisi relatif terhadap root site karena nantinya tidak akan terbaca oleh Server Hosting (ketika Anda sudah siap memindahkan file hasil desain ke jasa layanan server hosting). Ubah menjadi seperti berikut :

<link href="css/bootstrap.css" rel="stylesheet">   keterangan 1

<script src="js/jquery-1.11.3.min.js"></script>  keterangan 2

<script src="js/bootstrap.js"></script>  keterangan 3


8. Aktifkan menu Framework Bootstrap dengan memilih tab Insert (1), pilih opsi Bootsrap Components (2). Untuk memilih menu insert ini dapat Anda aktifkan dengan menekan 2 buah tombol bersamaan yaitu tombol CTRL dan F2.

9. Klik Navbar (1) untuk memunculkan opsi lainnya, kemudian pilih Nav bar fixed to top (2)


10. Tekan tombol Split (1) untuk menampilkan sekaligus hasil preview desain dan kode sumber HTML. Akan muncul tampilan menu Nav Bar yang diinginkan (2)


11. Simpan file yang dibuat dengan nama index.html dengan cara pilih menu File (1), New (2), pada opsi File name isikan index (3) kemudian tekan tombol Save (4)


13. Untuk menampilkan hasil desain web ke browser, pilih menu Preview / Debug in Browser


14. Kemudian pilih Edit Browser List

15. Pada opsi Browser pilih tanda + (2), pada Name pilih Mozilla Firefox (3), pada path Application, tekan tombol browse, arahkan ke letak di mana letak Firefox.exe berada, sebagai contoh ada di C:/Program Files/Mozilla Firefox atau C:/Program Files x86/Mozilla Firefox. Tekan tombol OK, Apply  kemudian Close.

16. Untuk menampilkan ke browser, tekan tombol F12 atau pilih menu Preview in Mozilla Firefox

17. Pada  browser firefox tekan tombol Open Menu (1), kemudian pilih opsi Developer (2)

18. Pilih Responsive Design Mode

19. Atur resolusi perangkat mobile misal 320 x 480 (1), tekan Open Menu (2), menu akan tampil vertikal (3) di mana menu bersifat responsif mengikuti resolusi device yang digunakan (liquid).


20. Atur resolusi menjadi besar untuk previe di tablet pc, notebook atau PC misal 980x1280, akan terlihat menu tampil normal (memanjang horizontal)