3.Desain Dasar Web Dengan CSS Dan HTML

16
Pemrograman Web (Pr atice) Desain Dasar Web dengan CSS dan HTML STMI K PALANGKA RAYA JONH FREDRIK ULYSSES, ST., MT [email protected]

description

ufjf

Transcript of 3.Desain Dasar Web Dengan CSS Dan HTML

[email protected]
Pendahuluan
 
Tampilan Web
 
Keterangan
Header
Adalah tempat Judul website yang biasanya berada diposisi teratas dari webpage
Menu
Menu Adalah Navigator dari Content layout, berisikan link informasi sebuah website. Pada kesempatan ini, layout menu dapat ditambahkan sesuai dengankebutuhan pemilik seperti : home, article, about me, contact dsb
Content
Adalah tempat utama dari sebuah webpage, berisikan content dari informasi utama yang dapat di navigasi melalui menu (hyperlink) pada bagian menu
Footer
 
Konten Web
Untuk tahap awal membuat website ini, kita akan membuat 4 halaman / webpage yang akan di navigasi dari menu, dengan informasi sebagai berikut :
Home (index.html)
Menampilkan informasi Awal dari Website, halaman ini menjadi halaman homepage. dengan inisial Home pada menu navigasi
About Me (about.html)
Contact (contact.html)
Menampilkan informasi Awal dari Website, halaman ini menjadi halaman homepage, pada kesempatan ini halaman ini dijadikan kumpulan informasi artikel pemilik 
Buku Tamu (tamu.html)
 
Manajemen File Web
Sesuai dengan desain yang telah kita bahas, maka management file dari website yang akan kita buat adalah sebagai berikut :
index.html - html file, halaman utama / homepage
about_me.html - html file, halaman tentang pemilik 
contact.html - html file, halaman contact pemilik 
tamu.html - html file, halaman buku tamu
template.css - css file, Style Library halaman website
images - Folder / directory gambar 
1.Membuat index.html
Pada Dashboard Dreamweaver menu pilih “HTML” pada sub “Create New” Shortcut. Anda akan memasuki workspace Dreamweaver.
Gambar 2.2 Masukan Judul “Home” pada textbox title
 
 
3.Setting block div
 
4.Homepage
 
5.Membuat CSS
 
 
.header
padding: 2px;
}
}
}
6.Membuat Link 
 
7.Membuat About Us
Untuk membuat halaman ini di perlukan nya penggunaan tabel dengan cara :
pada dreamweaver pilih menu Insert – Table
 
 
 
 
Buat tampilan web berikut dengan menggunakan CSS – Isi sesuai kreatifitas masing-masing
Content
Header
Menu
Footer