Tutorial Webdesign 2

8/6/2019 Tutorial Webdesign 2

1/10

Webdesign Workshop at Kudus July 14th 2007Create by [email protected]

1

TUTORIAL WEBDESIGN HTML & CSSDENGAN DREAMWEAVER

Membuat website statis dengan menggunakan Dreamweaver tools sebagai editor dengan membuatdokumen XHTML dan CSS sebagai style library external. Rencana yang akan dipersiapkan terlebih

dahulu adalah sebagai berikut :

1. Desain Website2. Membuat Website Dengan Dreamw eaver3. 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 xhtmlyang akan dilanjutkan dengan membuat web menggunakan dreamweaver tools.

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

gambar 1.1 tampilan website

HeaderAdalah tempat Judul website yang biasanya berada diposisi teratas dari webpage

MenuMenu Adalah Navigator dari Content layout, berisikan link informasi sebuahwebsite. Pada kesempatan ini, layout menu dapat ditambahkan sesuai dengankebutuhan pemilik seperti : home, article, about me, contact dsb

ContentAdalah 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, posisifooter berada di bawah dari webpage. Dimana pada tutorial ini berisikan copyrightpembuat / pemiliknya.

3

Content

Menu

Header

Footer


2/10


2

1.2 Webpage ContentUntuk tahap awal membuat website ini, kita akan membuat 4 halaman / webpage yang akandinavigasi 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 navigasi2. 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 halamanhomepage, pada kesempatan ini halaman ini dijadikan kumpulan informasi articlepemilik

Komponen1.3 Menyiapkan Graphic / Gambar pendukung webpagePada 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 blockbackground-footer.png File gambar background footer blockbackground-content.png File gambar background content block

background-menu.png File gambar background menu navigasi blockpastikan file tersebut sudah anda simpan dalam PC anda pada folder images pada susunan filewebsite anda.1.4 File Management WebsiteSesuai dengan desain yang telah kita bahas, maka management file dari website yang akan kitabuat adalah sebagai berikut :

index.html html file, halaman utama / homepagearticle.html html file, halaman article

about_me.html html file, halaman tentang pemilikcontact.html html file, halaman contact pemilik

template.css css file, Style Library halaman websiteimages 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. filegraphic pendukung dapat dicopy dari tempat yang telah disediakan.

2.1 Membuat XHTML dengan Dreamweaver MX

Untuk Memulai membuat website dengan dreamweaver, anda dapat langsungmembukanya pada desktop shortcut atau melalui menu :start All Program Macromedia Macromedia Dreamw eaver MX 2004Pastikan Applikasi ini sudah terinstall terlebih dahulu pada PC yang akan anda gunakan.

2.1 Site Setup Menggunakan DreamweaverKonfigurasi awal pembuatan website, adalah setup Dreamweaver site ditujukan untuk setupinformasi sites, letak directory, dsb. Click shortcut Dreamweaver site seperti pada gambar 2.1


3/10


3

Gambar 2.1.1 tampilan awal dreamweaver

1. Pilih tab basic pada window konfigurasi site definition, masukan nama site Workshoppada text box yang disediakan. Next

2. Editing Files, Part 2 pilih No, I do not want to use a server technology denganmemilih / check radio button. Next

3. Editing Files, Part 3pilih Edit local copies on my machine, then upload to serverwhen ready (recommended) dengan memilih / check radio button. Pada pertanyaanWhere on your computer do you want to store your files?, masukan path directory yangtelah kita buat. Isi text box dengan C:\workshop\ atau dengan memilih directorymelalui browse button disampingnya. Next

4. Pada Bagian Sharing Files, pada pertanyaan How do you connect to your remoteserver ? pilih Local\Network pada combobox yang disediakan, pada pertanyaanWhat folder on your server do you w ant to store your files in? masukan path fileyang telah kita buat pada text box yang disediakan dengan C:\workshop\ danchecked check box Refresh, remote file list automat icallyNext

5. Sharing File part 2, pilih No, do not enable check in and check out dengan memilihklik check box tersebut.Next

6. Summary resultHasil setup anda akan seperti gambardisebelah ini. Akhiri setup dengan melakukanklik tombol Done. Selanjutnya anda akanmemasuki tampilan site workshop. Done

Gambar 2.1.2 summary setup

Dreamweaver site


4/10


4

Padapanel Files, anda dapat melihat root directory beserta file-file anda.Gambar 2.1.3 panel Files

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

Gambar 2.2.1 Title webpageMasukan Judul Home pada textbox title

Gambar 2.2.2 Saving Index.htmlSave halaman Pertama anda dengannama index.html pada folderC:/workshop/

Gambar 2.2.3 seting block div

insert div tag pada halaman layout denganclass sesuai dengan design yang akan dibuatcontainer, footer, content, menu, headerseperti digambar sebelah ini.


5/10


5

Gambar 2.2.3 homepage contentmasukan informasi sesuai dengan blockyang telah dibuat.

1.header block :

Dengan nama anda dan motto2.menu block : navigator halaman diikutidengan fungsi hyperlink

Home Article About me Contact

3.content block : informasi homepageberisikan kata sambutan, dsb

4.footer block : informasi pembuat

2.1 Membuat CSS dengan Dreamweaver MX

Cascading style sheet dapat digunakan melalui 3 macam / jenis sebagai berikut :1. Inline style ditulis langsung pada setiap tag / elemen2. Document level style ditulis diantara bagian head HTML pada setiap dokumen3. External style sheet ditulis difile .css sebagai file external yang dapat dipanggil /

digunakan lebih dari 1 halaman / webpage.Kita akan membuat dengan cara yang ke 3 dengan membuat sebuah file template.css melaluimenu File new CSS pada kategori basic page. Selanjutnya gunakan template.css sebagai link

stylesheet pada index.html dengan Attach style sheet pada panel CSSGambar 2.2.4 Attach Css

Halaman index.html akan menampung scriptsebagai berikut sebagai link CSS external


6/10


6

setting semua style tag webpage dengan warna abu2 dengan margin dan padding 0.dengan menggunakan wizard dari dreamweaver atau menulis sctipt css sebagai berikut :* {

color: #333333;margin: 0px;

padding: 0px;} selanjutnya setting style body, format text H1 dan H2 seperti script dibawah ini :

body {font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 12px;background-color: #313131;

}h1 {

text-transform: lowercase;color: #3399FF;font-size: 25px;

}

h2 {color:#3399FF;font-size: 14px;text-transform: uppercase;

}

buat style tag divdiv {

padding: 5px;border: 1px solid #FFFFFF;

}

style class container.container {

width: 600px;

margin-top: 20px;margin-right: auto;margin-left: auto;padding: 0px;border: 3px ridge #FFFFFF;

}

Style class header.header {

background: #FFFFFF url(images/background-header.png);text-align: center;

} Style class content

.content {font-size: 12px;background: #FFFFFF url(images/background-content.png) repeat-x;text-align: justify;

} Style class menu

.footer {font-size: 11px;color: #FFFFFF;


7/10


7

background: #FFFFFF url(images/background-footer.png);text-align: center;

} Style class menu

.menu {

height:25px;padding:0px;border:0px;

} Advance class menu pada tag li, a dan a:hover

.menu li {list-style:none;text-align: center;float: left;height: auto;width: 150px;font: 12px/25px Verdana, Arial, Helvetica, sans-serif;

}

.menu li a {font-weight: bold;text-transform: uppercase;color: #FFFFFF;text-decoration: none;

background: url(images/background-menu.png);display: block;

}.menu li a:hover {

background: url(images/background-menu.png) 0 -25px;color:#000000;

}

Maka tampilan home page anda akan akan seperti sebagai berikut :Gambar 2.2.4 index.html


8/10


8

Gambar 2.2.4 article.html

Anda dapat melanjutkan ke halaman selanjutnya dengan informasi yang diinginkan denganmelakukan save as dari halaman yang sudah ada. Setelah ke 4 halaman telah selesai dibuatselanjutnya kita dapat meneruskan ke tahap upload website.


9/10


9

5. Upload WebsiteGunakan File Transfer Protocol (FTP) Apabila computer host anda mendukung. Sedangkanuntuk free webhosting (webhosting gratis) tergantung pada layanan host itu sendiri.

1.Sebelum registrasi user ke layanan free webhosting, anda harus memiliki email terlebihdahulu.2.Pilih WebHosting (275mb.com, Geocities.com, dsb)3.Registrasi user dan Konfirmasi pendaftaran hingga anda mendapatkan akses untukmenggunakan layanan tersebut.4.Upload file ke host, upload semua file yang berada pada folder workshop yang berada padadrive C:/workshop ke root webhost anda.5.Enjoy your sites.

http://geocities.yahoo.com

Geocities memberikan layanan hosting gratis yang terintegrasi dari yahoo account. Untuk ituhal yang perlu dipersiapkan adalah. Yahoo Account atau Anda dapat melakukan registrasi keyahoo terlebih dahulu untuk mendapatkan layanan free host ini. Pilih Free webhost SIGN

UPGambar 2.2.10 Yahoo Geocities Home


10/10


10

Geocites memberikan layanan setup wizard, blog, dsb namun pada kesempatan ini kita akanmelakukan upload file sendiri. Pilih Tab Create & Update pada Group box File Management Toolspilih File Manager Open File Manager

Gambar 2.2.11 Yahoo Geocities File Manager

Upload File yang telah anda buatindex.html html file, halaman utama / homepagearticle.html html file, halaman articleabout_me.html html file, halaman tentang pemilik

contact.html html file, halaman contact pemiliktemplate.css css file, Style Library halaman websiteimages Folder / directory gambar

Anda dapat melihat sites anda dari link yang telah ditampilkan diatas file manager. Text yangterlingkar warna merah pada Gambar 2.2.11

Tutorial Webdesign 2

Documents

Transcript of Tutorial Webdesign 2