Tutorial Web Design Html

TUTORIAL WEBDESIGN HTML & CSS

DENGAN DREAMWEAVER

Membuat website statis dengan menggunakan Dreamweaver tools sebagai editor dengan membuat dokumen XHTML dan CSS sebagai style library external. Rencana yang akan dipersiapkan terlebih dahulu adalah sebagai berikut :

1. Desain Website

2. Membuat Website Dengan Dreamweaver

3. Upload Website

1.Desain website

Untuk memulai membuat sebuah website, terlebih dahulu kita menggambarkan desain yang akan kita buat. Untuk kesempatan ini, kita akan membuat desain website statis dengan format xhtml yang akan dilanjutkan dengan membuat web menggunakan dreamweaver tools.

1.1 Tampilan website

Tampilan halaman website / webpage pada kesempatan ini adalah membuat halaman web sederhana dengan 4 bagian / block seperti gambar dibawah ini dengan deskripsi sebagai berikut :

 

• 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 dengan

kebutuhan pemilik seperti : home, article, about me, contact dsb

• Content

Adalah tempat utama dari sebuah webpage, berisikan content dari informasi utama yang dapat dinavigasi melalui menu (hyperlink) pada bagian menu

• Footer

Footer hampir sama dengan header, namun yang membedakan adalah, posisi footer berada di bawah dari webpage. Dimana pada tutorial ini berisikan copyright pembuat / pemiliknya.

1.2 Webpage Content

Untuk tahap awal membuat website ini, kita akan membuat 4 halaman / webpage yang akan dinavigasi dari menu, dengan informasi sebagai berikut :

1. Home (Index.html)

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

2. Article (Article.html)

Menampilkan informasi tentang article. dengan inisial Article pada menu navigasi

3. About Me (About.html)

Menampilkan informasi pemilik Website, halaman ini menjadi halaman homepage, pada kesempatan ini halaman ini dijadikan kumpulan informasi article pemilik

4. Contact (Contact.html)

Menampilkan informasi Awal dari Website, halaman ini menjadi halaman homepage, pada kesempatan ini halaman ini dijadikan kumpulan informasi article pemilik Komponen

Silahkan download Tutorial lengkapnya  di sini