belajar mahir css dgn menggunakan dream weaver wizard

2011

BELAJAR MEMBUAT WEBSITE CSS DENGAN MENGGUNAKAN DREAMWEAVER WIZARD

FATKHUL MUBIN S.KOM LP2K DHARMA BANGSA JOMBANG 7/12/2011

BELAJAR MEMBUAT WEBSITE CSS DENGAN MENGGUNAKAN DREAMWEAVER WIZARDMembuat 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 websiteUntuk 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,

2|Page. http://www.bukancuma.com/tutorial

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 1.3 Menyiapkan Graphic / Gambar pendukung webpage Pada kesempatan ini, Graphic sudah terlebih dahulu dibuat mengunakan Adobe Photoshop. Yang ditempung pada file images sebagai berikut : images Folder/ directory gambar background-header.png File gambar background header block background-footer.png File gambar background footer block background-content.png File gambar background content block background-menu.png 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 : index.html html file, halaman utama / homepage article.html html file, halaman article about_me.html html file, halaman tentang pemilik contact.html html file, halaman contact pemilik template.css css file, Style Library halaman website images 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 index.html, about_me.html & template.css. file graphic pendukung dapat dicopy dari tempat yang telah disediakan.

2.1 Membuat XHTML dengan Dreamweaver 8

Untuk Memulai membuat website dengan dreamweaver, anda dapat langsung membukanya pada desktop shortcut atau melalui menu :

start > All Program > Macromedia >Macromedia Dreamweaver 8

Pastikan Applikasi ini sudah terinstall terlebih dahulu pada PC yang akan anda gunakan. 2.1 Site Setup Menggunakan Dreamweaver Konfigurasi awal pembuatan website, adalah setup Dreamweaver site ditujukan untuk setup informasi sites, letak directory, dsb. Click shortcut Dreamweaver site seperti pada gambar 2.1


1. masukkan nama site anda pada kolom What would you like to name your site? Misalnya Workshop 2. kosongkan pada kolom What is HTTP Address (URL) of your site? Kemudian klik NEXT

3. Editing files, part 2 pilih No, I do not want to use a server technology dengan memilih / check radio button > Next.

4.

Editing Files, part 3 pilih Edit local copies on my machine, then upload to server when ready (recommended) dengan memilih / check radio button. Pada pertanyaan Where on your computer do you want to store your files?, masukkan path directory yang telah kita buat. Isikan text box dengan c:\workshop\ atau dengan memilih melalui browse button disampingnya >> Next

5. Pada Bagian Sharing Files, pada pertanyaan How do you connect to your remote server ? pilih Local\Network pada combobox yang disediakan, pada pertanyaan What folder on your server do you want to store your files in? masukan path file yang telah kita buat pada text box yang disediakan dengan C:\workshop\ dan checked check box Refresh, remote file list automatically >> Next

6. Sharing File part 2, pilih No, do not enable check in and check out dengan memilih klik check box tersebut. >> Next

7. Summary result, Hasil setup anda akan seperti gambar disebelah ini. Akhiri setup dengan melakukan klik tombol Done. Selanjutnya anda akan memasuki tampilan site workshop. Done


Pada panel Files sebelah kanan, anda dapat melihat root directory beserta file-file anda.

2.2 Membuat Halaman Index.html Pada Dashboard Dreamweaver menu pilih HTML pada sub Create New Shortcut. Anda akan memasuki workspace Dreamweaver.

masukan judul Home pada Textbox Title Klik kanan pada halaman pertama simpan dengan index.html pada folder c:/workshop1/

Menentukan block div Masukan scrip block div desain yang kita buat pada halaman index.html setelah tag Body spt contoh

Masukkan informasi block div yang yang kita buat

2.1 Membuat css CSS (cascading style sheet) dapat digunakan melalui 3 macam yaitu: 1. Inline style ditulis langsung setiap tag / elemen 2. Document level sheet ditulis diantara bagian head HTML pada setiap halaman dokumen 3. External style sheet ditulis di file .css sebagai file external yang dpt dipanggil / digunakan lebih dari 1 halaman.


Kita akan membuat dengan cara yang ketiga : - Klik file > new > CSS pada kategori basic page - Klik kanan simpan dengan template.css - Klik kanan close template.css

-

Klik panel Css di sebelah kanan klik Attach Style Sheet > muncul dialog box External css Isikan File/Url dgn template.css Add as klik radio button Link >ok

-

Langkah langkah membuat css dgn Wizard : Setting semua style tag webpage pada template.css dgn warna abu2 margin dan padding 0 pada category Css site definition. Tuliskan pada template.css * { kemudian klik 2 kali tanda bintang pada panel Css disebelah kanan Css rule definition akan muncul. Setiap perubahan pada category diakhiri dengan Apply >ok

-

Maka hasilnya Nampak dibawah ini *{ color: #333333; margin: 0px; padding: 0px; } Selanjutnya style body, format text H1 H2 : tuliskan body pada template.css lalu klik 2 kali body pada panel css.

body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; background-color: #313131; } H1 caranya sama dengan sebelumnya seperti halnya tag Body

H1{


font-size: 25px; text-transform: lowercase; color: #3399FF; } H2 juga sama

H2 { font-size: 14px; text-transform: uppercase; color: #3399FF; } Buat style tag div

-

div { padding: 5px; border: 1px solid #FFFFFF; } Style class container

-

.container { padding: 0px; width: 600px; margin-top: 20px; margin-right: auto; margin-bottom: auto; margin-left: auto; border: 3px ridge #FFFFFF; } Style class header

-

.header { background-image: url(image/baxkground-header.png); text-align: center; } Style class conten


.content { font-size: 12px; background-image: url(image/background-conten.png); text-align: justify; } Style class menu

.footer { font-size: 11px; color: #FFFFFF; background-image: url(image/background-footer.png); text-align: center; }

.menu { height: 25px; padding: 0px; border: 0px; } Advance class menu pada tag li, a dan a:hover

.menu li { list-style-type: none; text-align: center; float: left; height: auto;


width: 150px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; }

.menu li a { font-weight: bold; text-transform: uppercase; color: #FFFFFF; text-decoration: none; background-image: url(image/baxkground-menu.png); display: block; }

.menu li a:hover { background-image: url(image/baxkground-menu.png); color: #000000; font-size: 20px; }

Maka tampilan website anda akan tampak seperti gambar berikut : Home.html


Artikel.html

About me.html

Contact.html

10 | P a g e . h t t p : / / w w w . b u k a n c u m a . c o m / t u t o r i a l

belajar mahir css dgn menggunakan dream weaver wizard

Documents