Professional Documents
Culture Documents
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 :
gambar 1.1 tampilan website
Header
Menu
Content
Footer
Header
Menu
Content
Footer
Adalah tempat Judul website yang biasanya berada diposisi teratas dari webpage
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
Adalah tempat utama dari sebuah webpage, berisikan content dari informasi utama
yang dapat dinavigasi melalui menu (hyperlink) pada bagian menu
Footer hampir sama dengan header, namun yang membedakan adalah, posisi
footer berada di bawah dari webpage. Dimana pada tutorial ini berisikan copyright
pembuat / pemiliknya.
anda
dapat
langsung
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
Webdesign Workshop at Kudus July 14th 2007
Create by Hendra.account@gmail.com
Dreamweaver site
1. Pilih tab basic pada window konfigurasi site definition, masukan nama site Workshop
pada text box yang disediakan. Next
2. Editing Files, Part 2 pilih No, I do not want to use a server technology dengan
memilih / check radio button. Next
3. 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?, masukan path directory yang
telah kita buat. Isi text box dengan C:\workshop\ atau dengan memilih directory
melalui browse button disampingnya. Next
4. 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
5. Sharing File part 2, pilih No, do not enable check in and check out dengan memilih
klik check box tersebut. Next
6. 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, anda dapat melihat root directory beserta file-file anda.
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 div
div {
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;
Webdesign Workshop at Kudus July 14th 2007
Create by Hendra.account@gmail.com
}
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 :
Anda dapat melanjutkan ke halaman selanjutnya dengan informasi yang diinginkan dengan
melakukan save as dari halaman yang sudah ada. Setelah ke 4 halaman telah selesai dibuat
selanjutnya kita dapat meneruskan ke tahap upload website.
5. Upload Website
Gunakan File Transfer Protocol (FTP) Apabila computer host anda mendukung. Sedangkan
untuk free webhosting (webhosting gratis) tergantung pada layanan host itu sendiri.
1.Sebelum registrasi user ke layanan free webhosting, anda harus memiliki email terlebih
dahulu.
2.Pilih WebHosting (275mb.com, Geocities.com, dsb)
3.Registrasi user dan Konfirmasi pendaftaran hingga anda mendapatkan akses untuk
menggunakan layanan tersebut.
4.Upload file ke host, upload semua file yang berada pada folder workshop yang berada pada
drive 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 itu
hal yang perlu dipersiapkan adalah. Yahoo Account atau Anda dapat melakukan registrasi ke
yahoo terlebih dahulu untuk mendapatkan layanan free host ini. Pilih Free webhost SIGN
UP
10
Geocites memberikan layanan setup wizard, blog, dsb namun pada kesempatan ini kita akan
melakukan upload file sendiri. Pilih Tab Create & Update pada Group box File Management Tools
pilih File Manager
Open File Manager
article.html
about_me.html
contact.html
template.css
images
Anda dapat melihat sites anda dari link yang telah ditampilkan diatas file manager. Text yang
terlingkar warna merah pada Gambar 2.2.11