Merancang Dan Membangun Web

STMIK-AMIK-RIAU DESAIN WEB SURYA SYAHRANI, M.KOM

PERTEMUAN 3

MERANCANG DAN MEMBANGUN WEB

I. TAHAP PERANCANGAN

Langkah 1.1 Mendesain Layout. Untuk memulai membuat sebuah website, langkah pertama adalah menggambarkan layout web. Gambar dibawah ini adalah rancangan layout web yang akan kita buat.

Agar memudahkan dalam manajemen, pengembangan, dan maintenance, empat bagian yang selalu tetap kandungannya yakni bagian header, navigasi, side left, dan footer dirancang menjadi halaman tersendiri atau terpisah satu dengan lainnya.

Langkah 1.2 Web Content

Perancangan web konten dimaksudkan untuk merancang informasi-informasi apa saja yang akan disajikan, dan dibagian mana informasi itu disajikan. Pada latihan ini kita akan membuat 2 halaman / webpage yang akan dinavigasi di menu navigasi, dengan informasi sebagai berikut : 1. Home (index.php)

Menampilkan informasi Awal dari Website, halaman ini menjadi halaman homepage. dengan inisial Home pada menu navigasi.


2. About Me (about.php)

Menampilkan informasi pemilik Website.

Langkah 1.3 File Management Website

Langkah selanjutnya adalah melakukan management file, dimana kita akan menentukan file-file apa saja yang akan kita buat. Pada langkah ini juga kita menentukan nama file dan direktori-direktori yang akan kita gunakan. Sesuai dengan rancangan, kita akan mengatur file-file yang akan digunakan sebagai berikut : NO Nama File Lokasi/folder Keterangan

1 Header.php \template Halaman header 2 Navigasi.php \template Halaman navigasi 3 Sideleft.php \template Halaman side left 4 Footer.php \template Halaman footer 5 style.css \ Halaman pengaturan layout 6 index.php \ Halaman utama/awal 7 about.php \ Halaman informasi pemilik 8 .. \images Tempat Meletakkan Gambar

Langkah 1.4 Menyiapkan Komponen Pendukung Lainnya

Pada langkah ini kita akan menyiapkan komponen-komponen yang diperlukan untuk mendukung halaman web yang akan kita bangun. Diantaranya adalah menyiapkan Graphic / Gambar pendukung webpage yang terlebih dahulu dibuat mengunakan Adobe Photoshop. Grapic/gambar tersebut diletakkan pada foder images.

II. Tahap Membangun Template

Tahap ini adalah tahap dimana kita akan membuat halaman-halaman yang membangun template dari web yang dibangun, yaitu style.css, header.php, navigasi.php, sideleft.php, dan footer.php.

Langkah 2.1 Membuat file css

Sebagaimana diketahui sebelumnya, CSS digunakan untuk mempersingkat penulisan tag HTML seperti font,color,text, dan table menjadi lebih ringkas sehingga tidak terjadi pengulangan tulisan. Pada latihan ini kita akan membuat file css secara terpisah (eksternal style sheet). Berikut adalah sintaknya :

Nama file : style.css

/** BASIC */ body { margin: 0px; padding: 0px; background: url(images/img02.jpg) repeat-x left top; line-height: 20px; text-align: justify; font-family:Arial, Helvetica, sans-serif; font-size: 10pt; color: #666666;


} h1, h2, h3, h4, h5, h6 { font-weight: normal; } a { color: #0077dd; } a:hover { text-decoration: none; } .list1 { margin: 0; padding: 0; list-style: none; } .list1 a { background: url(images/img01.gif) no-repeat left 60%; padding-left: 12px; } .list2 { margin: 0; list-style: none; } .list2 a { background: url(images/img01.gif) no-repeat left 60%; padding-left: 12px; } img { border: none; } img.left { float: left; margin: 3px 20px 0px 0px; } /** HEADER */ #header { width: 778px; margin: 0px auto; padding: 1em; height: 90px; color: #254360; } #header h1 { margin: 0px; padding: 20px 0px 0px 0px; text-transform: uppercase; font-weight: bold;


} #header h2 { margin: 0 0 0 -80px; padding: 0px 0px 0px 95px; text-transform: uppercase; font-weight: bold; font-size: 13px; } /** MENU */ #menu { width: 778px; margin: 0px auto; } #menu ul { margin: 0px; padding: 0px; list-style: none; } #menu li { display: inline; } #menu a { background: url(images/img04.gif) no-repeat right 50%; padding: 0px 20px 0px 20px; text-decoration: none; text-transform: uppercase; font-weight: bold; font-size: 12px; color: #FFFFFF; } #menu a:hover { background: #FFFFFF; color: #254360; } #menu .active { background: #FFFFFF; color: #254360; } /** CONTENT */ #content { width: 778px; margin: 0px auto; padding: 40px 0px 20px 0px; } #sideLeft { float: left; width: 200px; }


#sideLeft h3 { height: 22px; border-bottom: 1px dashed #EEEEEE; border-spacing: 2px; font-size: 11pt; font-weight: bold; } #columnContent { float: right; width: 538px; padding-left: 20px; border-left: 1px dashed #EEEEEE; } #columnContent h2 { height: 22px; border-bottom: 1px dashed #EEEEEE; font-size: 12pt; font-weight: bold; } /** FOOTER */ #footer { clear: both; margin: 0px auto; height: 59px; background: url(images/img03.gif) repeat-x left top; text-align: center; } #footer p { margin: 0px; padding: 18px 0px 0px 0px; font-size: 10px; color: #FFFFFF; } #footer a { color: #CCCCCC; }

Langkah 2.2 Membuat file header

Header dalam sebuah halaman web berfungsi sebagai bagian yang menjadi kepala dari halaman yang ditampilkan, sama halnya seperti kop dalam sebuah surat resmi. Header biasanya berisi nama situs, logo dan deskripsinya. Header berfungsi untuk menampilkan identitas utama dari sebuah situs. Berikut adalah sintak dari halaman header :

Nama file : header.php

Icun Abra ini bagian header


Langkah 2.3 Membuat File navigasi.php

Navigasi adalah petunjuk posisi dan arah perjalanan. Di dalam dunia web, navigasi dianggap penting agar user yang sedang berada di dalam halaman tertentu tidak tersesat dan mudah menemukan halaman-halaman lain dalam website Anda.. Berikut adalah sintak dari halaman navigasi :

Nama file : navigasi.php

Home About Us

Langkah 2.4 Membuat File sidebar.php

Sidebar adalah bagian sisi kanan maupun kiri sebuah website dan terletak di sisi konten. Sidebar biasanya berisi informasi tambahan dan navigasi dari sebuah website. Keberadaan sidebar ini bersifat opsional sesuai keinginan , ada yang hanya satu side disebelah kiri atau kanan, ada yang memilih dikedua sisi kanan dan kiri. Pilihan ini tegantung keinginan dan kebutuhan seberapa banyak informasi yang diperlukan. Selain digunakan untuk meletakkan widget-widget, tak jarang sidebar juga difungsikan sebagai tempat meletakkan iklan.

Nama file : sideleft.php

Ini adalah Bagian slide Left pertemuan IV Silakan Klik... QUIZ Quiz dilakukan pada pertemuam ke-5 atau ke-6 adapun materi, materi yang diuji antara lain jQuery Ajax

Langkah 2.5 Membuat File footer.php

Footer adalah bagian dasar atau paling bawah dari sebuah website. Fungsi utamanya adalah sebagai kaki dan berisi informasi hak cipta, kepemilikan, link tambahan, sumber daya, sponsor dan kredit sebuah website.

Nama file : footer.php

Copyright 2015 icunabra.com. Designed with editing by icunabra


Langkah 2.6 Membuat Halaman index.php

File index.php adalah file yang digunakan sebagai home. Halaman ini merupakan halaman pertama yang akan dibuka server ketika user mengakses sebuah situs.

Nama file : index.php

Latihan Membuat Template Selamat Datang ... Ini adalah web latihan pada mata kuliah desain web Materi-materi pada pertemuan berikutnya antara lain: jQuery AJAX jQuery-AJAX-PHP Pengenalan xml file Dan ingat..!! ada quiz dan UTS Menanti.. :D Keberhasilan dalam mata kuliah ini tergantung seberapa besar keseriusan anda dalam menyelesaikan tugas dan menaklukkan source-source yang ada..

Sampai langkah ini kita bisa melihat hasilnya dari web browser dengan mengklik langsung file index.php tersebut. Hasilnya dapat dilihat seperti gambar dibawah ini :


Latihan :

1. Buat halaman about us (nama file about.php) yang berisikan informasi pembuat web (biodata anda masing-masing).

2. Edit pada bagian navigasi sehingga tautan ABOUT US akan membuka halaman about.php. 3. Tambahkan juga tautan/link halaman about.php pada bagian sidebar (side left). 4. Ubah bagian header, letakkan gambar header yang telah anda buat sebelumnya.

Contoh halaman about.php


Tugas :

Modifikasi template hasil download, (lihat folder Tugas pada modul yang diberikan), pisahkan header,footer,sidebar,navigasi menjadi file tersendiri. Rancangan dan pengaturan file-file yang akan digunakan sebagai berikut :

NO Nama File Lokasi/folder Keterangan 1 Header.php \template Halaman header 2 Navigasi.php \template Halaman navigasi 3 Sideright.php \template Halaman side right 4 Sideleft.php \template Halaman side left 5 Footer.php \template Halaman footer 6 style.css \css Halaman pengaturan layout 7 index.php \ Halaman utama/awal 8 about.php \ Halaman informasi pemilik 9 .. \img Tempat Meletakkan Gambar

Bentuk output sebelum dimodifikasi :

Merancang Dan Membangun Web

Documents

Transcript of Merancang Dan Membangun Web