Categories
Uncategorized

Membuat Website Dengan Dreamweaver

Membuat website statis dengan menggunakan Dreamweaver tools sebagai editor dengan membuatdokumen XHTML dan CSS sebagai style library external. Untuk jasa pembuatan website profesional juga menggunakan dreamweaver. Rencana yang akan dipersiapkan terlebih

dahulu adalah sebagai berikut :

Untuk memulai membuat sebuah website, terlebih dahulu kita menggambarkan desain yang akan

jasa pembuatan website profesional

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

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

dan 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 ()

homepage. dengan inisial Home pada menu navigasi

2. Article ()

Menampilkan informasi tentang article. dengan inisial Article pada menu navigasi

3. About Me ()

pada kesempatan ini halaman ini dijadikan kumpulan informasi article pemilik

4. Contact ()

homepage, pada kesempatan ini halaman ini dijadikan kumpulan informasi article

pemilik

Pada kesempatan ini, Graphic sudah terlebih dahulu dibuat mengunakan Adobe Photoshop. Yang

ditempung pada file images sebagai berikut :

Folder/ directory gambar

 -> File gambar background menu navigasi block

pastikan file tersebut sudah anda simpan dalam PC anda pada folder images pada susunan file

website anda.

1.4 File Management Website

Sesuai dengan desain yang telah kita bahas, maka management file dari website yang akan kita

buat adalah sebagai berikut :

 -> html file, halaman article

about_me.html -> html file, halaman tentang pemilik

 -> html file, halaman contact pemilik

 -> css file, Style Library halaman website

www.dgoom.com

Folder / directory gambar

Buat 1 buah Folder / directory dengan nama workshop” pada PC anda yang teletak pada C:\”

File management diatas akan berada pada folder yang anda buat. C:\workshop\”

Untuk awal tentunya anda belum mempunyai file , about_me.html & file

graphic pendukung dapat dicopy dari tempat yang telah disediakan.

Membuat Website dengan Dreamweaver

membukanya pada desktop shortcut atau melalui menu :

start -> All Program -> Macromedia -> Macromedia Dreamweaver MX 2004

Pastikan Applikasi ini sudah terinstall terlebih dahulu pada PC yang akan anda gunakan.

2.1 Membuat Halaman

Pada Dashboard Dreamweaver menu pilih HTML” pada sub Create New” Shortcut.

Anda akan memasuki workspace Dreamweaver.

Masukan div tag pada halaman layout dengan class sesuai dengan design yg akan dibuat container, footer, content, menu, header

seperti digambar sebelah ini.

Masukan informasi sesuai dengan block yang telah dibuat (contoh seperti gambar disamping).

1.header block :

 block :

2.2 Membuat CSS dengan Dreamweaver MX

Cascading style sheet dapat digunakan melalui 3 macam / jenis sebagai berikut :

1. Inline style – ditulis langsung pada setiap tag / elemen

2. Document level style – ditulis diantara bagian head HTML pada setiap dokumen

3. External style sheet – ditulis difilecss sebagai file external yang dapat dipanggil /

digunakan lebih dari 1 halaman / webpage.

Kita akan membuat dengan cara yang ke 3 dengan membuat sebuah file melalui

menu File -> new -> CSS pada kategori basic page. Selanjutnya gunakan sebagai link

stylesheet pada dengan Attach style sheet pada panel CSS.

Gambar 2.2.1 Attach External Css

Halaman akan menampung script

sebagai berikut sebagai link CSS external

• setting semua style tag webpage dengan warna abu2 dengan margin dan padding 0.

• selanjutnya setting style body, format text H1 dan H2 seperti script dibawah ini :

body

font-size: 12px;

background-color: #313131;

Leave a Reply

Your email address will not be published. Required fields are marked *