MATERI
PERKULIAHAN HTML DAN JAVASCRIPT
BASIC penulisan javascript
<html>
<body>
<script
type="text/javascript">
...
</script>
</body>
</html>
Contoh:
<html>
<body>
<script type="text/javascript">
document.write("Belajar Javascript")
</script>
</body>
</html>
Jenis
penulisan javascript
1.
Head section
Format
penulisan:
<html>
<head>
<script
type="text/javascript">
....
</script>
</head>
Contoh:
<html>
<head>
<script
type="text/javascript">
function
message()
{
alert("This
alert box was called with the onload event")
}
</script>
</head>
<body
onload="message()">
</body>
</html>
2.
Body section
Format penulisan:
<html>
<head>
</head>
<body>
<script type="text/javascript">
document.write("Tulisan
ini akan tampil pada saat loding ")
</script>
</body>
</html>
3.
External script
Contoh:
<html>
<head>
<script
src="xxx.js"></script>
</head>
<body>
</body>
</html>
Penggunaan
Variabel pada Javascript
Format penulisan variabel:
Var namavar = “value”
atau
Namavar = “value”
Contoh:
<html>
<body>
<script
type="text/javascript">
var name
= "Hege"
document.write(name)
document.write("<h1>"+name+"</h1>")
</script>
<p>Contoh pendeklarasian variabel
dan penggunaannya</p>
<p>nilai variabel akan
langsung tampil</p>
</body>
</html>
JavaScript Popup Boxes
Di dalam bahasa JavaScript kita dapat membuat
kotak pesan popup. Kotak pesan dalam javascript mempunyai 3 type yaitu:
1. Alert box
2. Alert box with line breaks
3. Confirm box
4. Prompt box
Alert Box
Alert
box di gunakan untuk memberikan informasi pesan kepada user dan bila user yakin
dengan pilihannya. Alert box ini mempunyai satu tombol “OK” untuk melanjutkan
proses.
Syntax:
alert("sometext")
Contoh:
<html>
<head>
<script
type="text/javascript">
function
disp_alert()
{
alert("I
am an alert box!!")
}
</script>
</head>
<body>
<input
type="button" onclick="disp_alert()" value="Display
alert box" />
</body>
</html>
Alert Box and line breaks
<html>
<head>
<script
type="text/javascript">
function disp_alert()
{
alert("Hello again! This is
how we" + '\n' + "add line breaks to an alert box!")
}
</script>
</head>
<body>
<input type="button"
onclick="disp_alert()" value="Display alert box" />
</body>
</html>
Confirm Box
Confirm box biasanya di gunakan jika kita
ingin memberikan penyataan kepada user untuk memberikan pilihan jawaban apakah
akan terus di lanjutkan atau di batalkan. Kotak confirm box memberikan dua
tombol pilihan kepada user berupa tombol “OK” dan tombol “Cancel”. Jika pilihan
tombol “OK” maka halaman web akan
diproses jika pilihan tombol “Cancel” maka halaman tidak akan diproses.
Syntax:
confirm("sometext")
Contoh:
<html>
<head>
<script
type="text/javascript">
function disp_confirm()
{
var r=confirm("Press a button")
if (r==true)
{
document.write("You pressed OK!")
}
else
{
document.write("You pressed
Cancel!")
}
}
</script>
</head>
<body>
<input
type="button" onclick="disp_confirm()" value="Display
a confirm box" />
</body>
</html>
Prompt Box
Prompt box biasanya di gunakan untuk
memberikan pesan kepada user agar user memberikan inputan sebelum halaman web
itu diproses. Ketika prompt box muncul, dan user diminta untuk mengklik tombol
awal yang kemudian akan muncul box yang harus di input oleh user sesuai dengan
pertanyaan yang di ajukan.
Setelah di input kemudian user mengklik tombol
"OK" atau "Cancel". Untuk melanjutkan proses pilih tombol
“OK” dan browser akan menampilkan hasil. Jika tombol “Cancel” kotak box akan
kembali kosong untuk mengulang.
Syntax:
prompt("sometext","defaultvalue")Contoh:
<html>
<head>
<script
type="text/javascript">
function disp_prompt()
{
var name=prompt("Please enter your name","Harry
Potter")
if (name!=null && name!="")
{
document.write("Hello " + name +
"! How are you today?")
}
}
</script>
</head>
<body>
<input
type="button" onclick="disp_prompt()" value="Display a
prompt box" />
</body>
</html>
Fungsi pada JavaScript
Fungsi merupakan blok kode yang akan di jalankan
pada saat nama function itu jalankan oleh event tertentu atau pada saat function
itu di panggil. Fungsi ini juga dapat di jalankan oleh browser pada saat
loading sebuah halaman web.
Function juga
bisa di panggil di halaman web mana saja dengan cara kita membuat file external
berupa file .JS (extention file javascrip). Yang berisi syntak javascript. File
itu kita panggil pada halaman web yang yang mau sisipkan javacscript.
Function dapat di definisikan di bagian <head>
dan bagian <body> dari halaman web. Jika kita menginginkan script itu di
panggil pada saat halaman web di load maka kita tempatkan script itu di bagian
<head>
Contoh:
<html>
<head>
<script type="text/javascript">
function displaymessage()
{
alert("Hello World!")
}
</script>
</head>
<body>
<form>
<input type="button" value="Click me!" onclick="displaymessage()" >
</form>
</body>
</html>
Output dari scrip di atas adalah akan
muncul tombol yang harus di clik bila ingin menampilkan pesan nya.
Bagaimana cara mendefinisikan sebuah Fungsi
Sintak untuk membuat fungsi adalah:
function namafungsi (var1,var2,...,varX)
{
kode teks
}
Keterangan:
·
var1,
var2, adalah variable atau nilai suatu fungsi.
·
Nilai
fungsi harus di awali dan di akhiri dengan tanda kurung kurawal. { }
· Bila variable, parameter atau nilai tidak ada maka tanda kurung harus tetap di gunakan.()
· Di sarankan untuk tidak menggunakan huruf capital pada javascript lebih baik gunakan huruf kecil semua. Untuk nama fungsi, nama variable, parameter dan lainya di sarankan untuk menggunakan huruf kecil semua.
Contoh:
function prod(a,b)
{
x=a*b
return x
}
Jenis Fungsi:
Bahasa Javascript mempunyai beberapa type penulisan function. Di antaranya adalah:
1. Function
Basic
How to call a function.
How to call a function.
2. Function
with arguments
How to pass a variable to a function, and use the variable in the function.
How to pass a variable to a function, and use the variable in the function.
3. Function
with arguments 2
How to pass variables to a function, and use these variables in the function.
How to pass variables to a function, and use these variables in the function.
4. Function
that returns a value
How to let the function return a value.
How to let the function return a value.
5. A
function with arguments, that returns a value
How to let the function find the product of two arguments and return the result.
Contoh Fungsi:How to let the function find the product of two arguments and return the result.
<html>
<head>
<script
type="text/javascript">
function myfunction()
{
alert("HELLO")
}
</script>
</head>
<body>
<form>
<input type="button"
onclick="myfunction()" value="Call
function">
</form>
<p>Tekan tombol untuk memanggil
Function.</p>
</body>
</html>
<html>
<head>
<script
type="text/javascript">
function
myfunction(txt)
{
alert(txt)
}
</script>
</head>
<body>
<form>
<input
type="button" onclick="myfunction('Hello')" value="Call
function">
</form>
<p>Tekan
tombol untuk memanggil function nya</p>
</body>
</html>
Output:
<html>
<head>
<script
type="text/javascript">
function myfunction(txt)
{
alert(txt)
}
</script>
</head>
<body>
<form>
<input
type="button" onclick="myfunction('Good
Morning!')" value="In the Morning">
<input
type="button" onclick="myfunction('Good Evening!')"
value="In the Evening">
</form>
<p>Pilih Tombol
untuk memanggil Function nya.</p>
</body>
</html>
Output:
<html>
<head>
<script
type="text/javascript">
function myFunction()
{
return ("Hello, have a nice
day!")
}
</script>
</head>
<body>
<script
type="text/javascript">
document.write(myFunction())
</script>
<p>The script in the body
section calls a function.</p>
<p>The function returns a
text.</p>
</body>
</html>
Contoh fungis dengan nilai kembalian
<html>
<head>
<script
type="text/javascript">
function product(a,b)
{
return a*b
}
</script>
</head>
<body>
<script
type="text/javascript">
document.write(product(4,3))
</script>
<p>Script dalam bagian body
memanggil fungsi dengan 2 parameter (4 and 3).</p>
<p>fungsi akan memanggil kembali sesuai nilai parameter.</p>
</body>
</html>
Mengenal Adobe Dreamweaver cs4
Adobe Dreamweaver cs4 merupakan salah satu progam aplikasi
yang digunakan untuk membuat dan membangu sebuah Website, Baik secara grafis
maupun dengan menuliskan kode sumber secara langsung
Adobe Dreamweaver cs4 memudahkan pengembang Website untuk mengelola halaman halaman Website dan aset aset yang ada dalam Website itu sendiri. bail gambar (image), animasi flash, video, suara dan lain sebagainya. Selain itu Adobe Dreamweaver cs4 juga menyediakan fasilitas untuk melakukan Pemrograman Scripting seperti, ASP (Active Server Page), JSP (Java Server Page), PHP (PHP Hypertext Preprocessor), Java Scripts, Cold Fusion, CSS (Cascading Style Sheet), XML (Extensible Markup Languange), Dan Lain Sebagainya.
Sebelum melangkah lebih jauh dalam pembuatan Website dengan Adobe Dreamweaver cs4, Ada baiknya kita mengenal terlebih dahulu area kerja Adobe Dreamweaver cs4
START PAGE
Start Page adalah kotak dialog yang di tampilkan pertama kali bersamaan dengan jendela utama aplikasi Adobe Dreamweaver CS4 saat di jalankan.fungsi dari Star Page ini adalah menampilkan menu pilihan yang ada di Adobe Dreamweaver CS4,dimana user berhak memilih menu mana yang akan di pakai atau di jalankan.
> Open a Recent Document
Menu ini menampilkan daftar nama dokumen yang pernah di buka dengan Adobe Dreamweaver CS4. anda dapat membuka dokumen tersebut dengan cara memilih nama dokumen yang ada. selain itu,anda juga dapat membuka dokumen yang belum pernah di buka dengan Adobe Dreamweaver CS4 dengan cara memilih menu OPEN.
> Create New
Menu ini di gunakan untuk membuat dokumen web baru.Anda dapat membuat dokumen dengan beberapa tipe yang di sediakan oleh Adobe Dreamweaver CS4, Antara lain :
HTML
Hypertext Markup Languange (HTML) adalah sebuah bahasa dasar yang di gunakan untuk merancang halaman web statis.
Coldfusion
Coldfusion adalah bahasa scripting yang di gunakan untuk pemrogaman web server.Coldfusion digunakan pada Adobe Coldfusion, BlueDragon dan lainnya.
PHP
PHP Hypertext preprocessor (PHP) merupakan bahasa pemrogaman scripting web server-side. dengan pemrogaman server-side,sebuah website akan lebih dinamis.PHP biasanya terpasang pada file HTML yang di simpan dengan ektensi *.php.
> Top Features (video)
Merupakan menu pilihan link yang berupa rekaman video penggunaan fasilitas yang di sediakan Dreamweaver secara online. menu link rekaman video yang di sediakan, antara lain: Related Files, Live View, Code navigator, Dataset Wizard, Web Widgets, JavaScript Support, Dsb
> Help Online
Merupakan menu pilihan untuk menampilkan bantuan tentang cara penggunaan, fitur fitur terbaru Adobe Dreamweaver CS4 dan lainnya secara online.
> Don't Show Again
Kotak dialog start page akan selalu di tampilkan bersamaan dengan jendela utama Adobe DreamweaverCS4 saat aplikasi ini di jalankan. Agar kotak dialog star page tidak di tampilkan lagi, centang checkBox > Don't Show Again
Area Kerja Adobe DreamweaverCS4
adalah lingkungan yang di gunakan untuk merancang halaman web anda. Pada area kerja ini terdapat jendela utama, yaitu jendela dokumen (Document Window) yang berfungsi untuk mendesain halaman, baik dengan cara penulisan kode maupun secara visual. selain itu, juga terdapat menubar, Toolbar, dan panel panel yang membantu desain halaman web dengan mudah. Berikut penjelasan beberapa Area kerja Adobe Dreamweaver CS4 beserta kegunaannya
> Menubar
Menubar adalah sebuah grup menu yang terdapat pada bagian atas aplikasi yang tersusun dari deretan text/label. Setiap menu terdiri dari submenu-submenu sesuai kategori menu masing-masing. menu menu pada Menubar ini jarang di gunakan. Biasanya fasilita pada Menubar telah diwakili dalam sebuah panel yang di miliki Adobe Dreamweaver CS4, misalnya menu insert pada menubar telah diwakili dengan panel insert pada panel group
> Workspace Switcher
Workspace Switcher adalah sebuah fasilitas yang berfungsi untuk mengubah mode tampilan area kerja sesuai kebutuhan perancang web. Workspace Switcher ini berada sejajar dengan Menubar sebelah kanan Secara default, mode tampilan area kerja Adobe Dreamweaver CS4 adalah mode Desaigner. Adobe Dreamweaver CS4 memiliki mode area kerja yang banyak, diantaranya mode Coder yang hanya menampilkan kode pembuatan halaman dan Classic.
> Document Title
Document Title adalah nama dokumen yang dibuka pada workspace Adobe Dreamweaver. Anda dapat menutup sebuah dokumen melalui Document Title. pada Document Title ini juga ditampilkan Path/Direktori di mana dokumen itu di simpan
> Document Toolbar
Toolbar adalah kumpulan tombol yang berfungsi memudahkan oengembang untuk mengunakan fasilitas yang disediakan Dreamweaver. Pada toolbar ini, terdapat tombol-tombol untuk mengubah mode jendela dokumen yang ditampilkan dan beberapa tombol lain.
Code
Tombol Code ini berfungsi mengubah jendela dokumen menjadi mode code. yaitu jendela dokumen yang menampilkan kode html dokumen/halaman web yang aktif. Selain itu, anda dapat mengubah jendela dokumen menjadi mode Code melalui Menubar View > Code.
Split
Tombol ini berfungsi mengubah mode jendela dokumen menjadi Split, yaitu jendela dokumen akan
menampilkan kode dokumen dan tampilan desain (grafis/visual) dokumen. Document Window akan menjadi dua bagian atas dan bawah. Bagian atas menampilkan source code, dan bagian bawah menampilkan visual/grafis dari halaman web.
DesignTombol ini berfungsi mengubah mode dokumen window menjadi mode design, yaitu Document
Window hanya akan menampilkan desain web secara visual/grafis dari halaman web.
Live Vew
Tombol ini berfungsi menampilkan desain web sebagaimana browser pada jendela dokumen mode design. Tombol ini akan menyebabkan jendela dokumen mode desain tidak dapat di edit, namun
anda tetap dapat mengubah kode html-nya.
Live Code
Tombol n akan aktif jika mode Live View dipilih, Tombol ini akan membuat kode HTML pada
jendela dokumen mode Code tidak dapat di edit. hal ini ditandai dengan perubahan warna background pada jendela dokumen.
Text Field Title
Text Field Title berfungsi untuk menambahkan judul halaman web. Title ini akan ditampilkan pada titlebar browser.
File Management
Menampilkan menu pop-up untuk mengorganisasi file-file yang dibutuhkan oleh dokumen web.
Preview/Debug in Browser
Tool ini digunakan untuk menampilkan halaman web yang aktif pada browser.
Refresh Design
Tool ini digunakan untuk me-refresh desain dokumen setelah ada perubahan kode dokumen. Hal ini akan membuat desain visual dokumen berubah sesuai perubahan pada kode HTML dokumen.
Tool Refresh dibutuhkan karena perubahan kode HTML dokumen tidak secara langsung otomatis mengubah desain dokumen.
View Option
Tool ini berupa menu pop-up yang digunakan untuk mengatur jendela dokumen, baaik tampilan kode maupun tampilan desain. Melalui menu ini, anda dapat menampilkan nomor baris kode, menampilkan isi/content dari tag head, membuat jendela desain mempunyai ukuran/rulers , berbentuk grid , Dsb
Visual Aids
Visual Aids digunakan untuk tampilan desain yang berbeda dalam mendesain halaman web.
Validate Markup
Validate Markup digunakan untuk melakukan koreksi dokumen yang aktif atau tag yang terpilih.
Check Browser compability
Tool ini digunakan untuk mengecek apakah aturan CSS yang anda gunakan kompatible dengan browser yang berbeda.
> Document window
Document Window adalah area yang digunakan untuk membuka, mengedit, menampilkan desain dokumen dan atau kode dokumen web yang aktif. jendela dokumen ini mempunyai tool-tool yang digunakan untuk menampilkan informasi pada halaman, seperti Related File And Code Navigator, Tag Selector, dan fasilitas lain, seperti Zooming, Hand Tool, Selected Tool, dan informasi lainnya.
> Panel group
Panel Group merupakan kumpulan panel berupa tab-tab pilihan yang mempunyai fungsi berbeda-beda. Panel adalah sebuah jendela untuk memudahkan pembuatan desain web dengan menampilkan informasi pendukung pada jendela informasi sehingga anda dapat mengedit dan memanfaatkan data yang ada pada area tersebut. Terdapat banyak sekali panel, diantaranya panel insert yang berfungsi untuk menambahkan komponen komponen web ke dalam desain halaman anda kemudian panel files yang berfungsi menampilkan file-file yang telah anda buat, baik file gambar, html, dan folder yang terdapat pada site yang anda definisikan. untuk menampilkan panel yang lain anda dapat menggunakan menu Windows.
> Tag Selector
Tag Selector berfungsi menampilkan tag yang di seleksi pada area desain. Anda dapay menyeleksi bagian desain dengan memilih tag yang sesuai. sebagai contoh, untuk menyeleksi semua elemen halaman, klik tag <body>
> Panel Properties
Panel Properties berfungsi menampilkan properti dari elemen halaman web yang terpilih, melalui panel ini anda dapat mengubah properti elemen tersebut, baik dengan penambahan properti CSS maupun properti dari tag HTML.
Perangkat Tambahan
Selain Adobe DreamweaverCS4, anda juga membutuhkan sebuah browser yang berfungsi menampilkan hasil desain halaman web. sementara itu, untuk membuat website yang dinamis anda membutuhkan sebuah database (misalnya MySql), sebuah server web (misalnya Apache) dan sebuah phpAdmin untuk melakukan pengolahan database dengan php. Berikut penjelasannya...
Catatan:
"Perangkat tambahan Server Web diperlukan bila anda membuat sebuah halaman website yang dinamis (Dinamic Web), tapi bila anda hanya ingin membuat halaman web statis / sederhana, maka anda tidak memerlukan aplikasi Server Web"
> Server Web
Server Web dibutuhkan untuk melakukan pemrograman yang membutuhkan teknologi server-side seperti PHP, ColdFusion, ASP, dan JSP. oleh karena itu, server web merupakan perangkat yang penting untuk melakukan uji coba pemrograman server-side yang anda buat. dengan demikian anda tidak perlu melakukan upload data ke sebuah hosting hanya untuk mengetahui hasil pemrograman untuk sisi server. Pemrograman server-side biasanya digunakan untuk mangakses database yang terdapat pada server hosting, sehingga pengembang dengan mudah mengelola content website dengan mudah tanpa mengubah halaman halaman web.
Salah satu teknologi aplikasi server web yang lengkap yang dapat anda gunakan adalah aplikasi AppServ yang merupakan kumpulan aplikasi pendukung pembangun website. pada paket AppServ versi 2.5.8 terdapat aplikasi aplikasi berikut:
> Server web Apache versi 2.2.4
> Bahasa scrip PHP versi 5.3.1
> phpMyAdmin Database Manager versi 2.9.2
> Database MySQL versi 5.0.27
Anda bisa mendapatkan aplikasi AppServ secara gratis disini www.AppServNetwork.com
> Browser
Browser adalah aplikasi yang digunakan untuk menampilkan file-file website, baik html, php, mht, dan lain sebagainya. anda tidak akan dapat menampilkan hasil dari desain anda apabila anda tidak mempunyai browser anda dapat menggunakan browser Internet explorer (IE) yang merupakan bawaan windows. Mozila Firefox, Opera, Safari, Chrome, dan lain lain
Adobe Dreamweaver cs4 memudahkan pengembang Website untuk mengelola halaman halaman Website dan aset aset yang ada dalam Website itu sendiri. bail gambar (image), animasi flash, video, suara dan lain sebagainya. Selain itu Adobe Dreamweaver cs4 juga menyediakan fasilitas untuk melakukan Pemrograman Scripting seperti, ASP (Active Server Page), JSP (Java Server Page), PHP (PHP Hypertext Preprocessor), Java Scripts, Cold Fusion, CSS (Cascading Style Sheet), XML (Extensible Markup Languange), Dan Lain Sebagainya.
Sebelum melangkah lebih jauh dalam pembuatan Website dengan Adobe Dreamweaver cs4, Ada baiknya kita mengenal terlebih dahulu area kerja Adobe Dreamweaver cs4
START PAGE
Start Page adalah kotak dialog yang di tampilkan pertama kali bersamaan dengan jendela utama aplikasi Adobe Dreamweaver CS4 saat di jalankan.fungsi dari Star Page ini adalah menampilkan menu pilihan yang ada di Adobe Dreamweaver CS4,dimana user berhak memilih menu mana yang akan di pakai atau di jalankan.
> Open a Recent Document
Menu ini menampilkan daftar nama dokumen yang pernah di buka dengan Adobe Dreamweaver CS4. anda dapat membuka dokumen tersebut dengan cara memilih nama dokumen yang ada. selain itu,anda juga dapat membuka dokumen yang belum pernah di buka dengan Adobe Dreamweaver CS4 dengan cara memilih menu OPEN.
> Create New
Menu ini di gunakan untuk membuat dokumen web baru.Anda dapat membuat dokumen dengan beberapa tipe yang di sediakan oleh Adobe Dreamweaver CS4, Antara lain :
HTML
Hypertext Markup Languange (HTML) adalah sebuah bahasa dasar yang di gunakan untuk merancang halaman web statis.
Coldfusion
Coldfusion adalah bahasa scripting yang di gunakan untuk pemrogaman web server.Coldfusion digunakan pada Adobe Coldfusion, BlueDragon dan lainnya.
PHP
PHP Hypertext preprocessor (PHP) merupakan bahasa pemrogaman scripting web server-side. dengan pemrogaman server-side,sebuah website akan lebih dinamis.PHP biasanya terpasang pada file HTML yang di simpan dengan ektensi *.php.
> Top Features (video)
Merupakan menu pilihan link yang berupa rekaman video penggunaan fasilitas yang di sediakan Dreamweaver secara online. menu link rekaman video yang di sediakan, antara lain: Related Files, Live View, Code navigator, Dataset Wizard, Web Widgets, JavaScript Support, Dsb
> Help Online
Merupakan menu pilihan untuk menampilkan bantuan tentang cara penggunaan, fitur fitur terbaru Adobe Dreamweaver CS4 dan lainnya secara online.
> Don't Show Again
Kotak dialog start page akan selalu di tampilkan bersamaan dengan jendela utama Adobe DreamweaverCS4 saat aplikasi ini di jalankan. Agar kotak dialog star page tidak di tampilkan lagi, centang checkBox > Don't Show Again
Area Kerja Adobe DreamweaverCS4
adalah lingkungan yang di gunakan untuk merancang halaman web anda. Pada area kerja ini terdapat jendela utama, yaitu jendela dokumen (Document Window) yang berfungsi untuk mendesain halaman, baik dengan cara penulisan kode maupun secara visual. selain itu, juga terdapat menubar, Toolbar, dan panel panel yang membantu desain halaman web dengan mudah. Berikut penjelasan beberapa Area kerja Adobe Dreamweaver CS4 beserta kegunaannya
> Menubar
Menubar adalah sebuah grup menu yang terdapat pada bagian atas aplikasi yang tersusun dari deretan text/label. Setiap menu terdiri dari submenu-submenu sesuai kategori menu masing-masing. menu menu pada Menubar ini jarang di gunakan. Biasanya fasilita pada Menubar telah diwakili dalam sebuah panel yang di miliki Adobe Dreamweaver CS4, misalnya menu insert pada menubar telah diwakili dengan panel insert pada panel group
> Workspace Switcher
Workspace Switcher adalah sebuah fasilitas yang berfungsi untuk mengubah mode tampilan area kerja sesuai kebutuhan perancang web. Workspace Switcher ini berada sejajar dengan Menubar sebelah kanan Secara default, mode tampilan area kerja Adobe Dreamweaver CS4 adalah mode Desaigner. Adobe Dreamweaver CS4 memiliki mode area kerja yang banyak, diantaranya mode Coder yang hanya menampilkan kode pembuatan halaman dan Classic.
> Document Title
Document Title adalah nama dokumen yang dibuka pada workspace Adobe Dreamweaver. Anda dapat menutup sebuah dokumen melalui Document Title. pada Document Title ini juga ditampilkan Path/Direktori di mana dokumen itu di simpan
> Document Toolbar
Toolbar adalah kumpulan tombol yang berfungsi memudahkan oengembang untuk mengunakan fasilitas yang disediakan Dreamweaver. Pada toolbar ini, terdapat tombol-tombol untuk mengubah mode jendela dokumen yang ditampilkan dan beberapa tombol lain.
Code
Tombol Code ini berfungsi mengubah jendela dokumen menjadi mode code. yaitu jendela dokumen yang menampilkan kode html dokumen/halaman web yang aktif. Selain itu, anda dapat mengubah jendela dokumen menjadi mode Code melalui Menubar View > Code.
Split
Tombol ini berfungsi mengubah mode jendela dokumen menjadi Split, yaitu jendela dokumen akan
menampilkan kode dokumen dan tampilan desain (grafis/visual) dokumen. Document Window akan menjadi dua bagian atas dan bawah. Bagian atas menampilkan source code, dan bagian bawah menampilkan visual/grafis dari halaman web.
DesignTombol ini berfungsi mengubah mode dokumen window menjadi mode design, yaitu Document
Window hanya akan menampilkan desain web secara visual/grafis dari halaman web.
Live Vew
Tombol ini berfungsi menampilkan desain web sebagaimana browser pada jendela dokumen mode design. Tombol ini akan menyebabkan jendela dokumen mode desain tidak dapat di edit, namun
anda tetap dapat mengubah kode html-nya.
Live Code
Tombol n akan aktif jika mode Live View dipilih, Tombol ini akan membuat kode HTML pada
jendela dokumen mode Code tidak dapat di edit. hal ini ditandai dengan perubahan warna background pada jendela dokumen.
Text Field Title
Text Field Title berfungsi untuk menambahkan judul halaman web. Title ini akan ditampilkan pada titlebar browser.
File Management
Menampilkan menu pop-up untuk mengorganisasi file-file yang dibutuhkan oleh dokumen web.
Preview/Debug in Browser
Tool ini digunakan untuk menampilkan halaman web yang aktif pada browser.
Refresh Design
Tool ini digunakan untuk me-refresh desain dokumen setelah ada perubahan kode dokumen. Hal ini akan membuat desain visual dokumen berubah sesuai perubahan pada kode HTML dokumen.
Tool Refresh dibutuhkan karena perubahan kode HTML dokumen tidak secara langsung otomatis mengubah desain dokumen.
View Option
Tool ini berupa menu pop-up yang digunakan untuk mengatur jendela dokumen, baaik tampilan kode maupun tampilan desain. Melalui menu ini, anda dapat menampilkan nomor baris kode, menampilkan isi/content dari tag head, membuat jendela desain mempunyai ukuran/rulers , berbentuk grid , Dsb
Visual Aids
Visual Aids digunakan untuk tampilan desain yang berbeda dalam mendesain halaman web.
Validate Markup
Validate Markup digunakan untuk melakukan koreksi dokumen yang aktif atau tag yang terpilih.
Check Browser compability
Tool ini digunakan untuk mengecek apakah aturan CSS yang anda gunakan kompatible dengan browser yang berbeda.
> Document window
Document Window adalah area yang digunakan untuk membuka, mengedit, menampilkan desain dokumen dan atau kode dokumen web yang aktif. jendela dokumen ini mempunyai tool-tool yang digunakan untuk menampilkan informasi pada halaman, seperti Related File And Code Navigator, Tag Selector, dan fasilitas lain, seperti Zooming, Hand Tool, Selected Tool, dan informasi lainnya.
> Panel group
Panel Group merupakan kumpulan panel berupa tab-tab pilihan yang mempunyai fungsi berbeda-beda. Panel adalah sebuah jendela untuk memudahkan pembuatan desain web dengan menampilkan informasi pendukung pada jendela informasi sehingga anda dapat mengedit dan memanfaatkan data yang ada pada area tersebut. Terdapat banyak sekali panel, diantaranya panel insert yang berfungsi untuk menambahkan komponen komponen web ke dalam desain halaman anda kemudian panel files yang berfungsi menampilkan file-file yang telah anda buat, baik file gambar, html, dan folder yang terdapat pada site yang anda definisikan. untuk menampilkan panel yang lain anda dapat menggunakan menu Windows.
> Tag Selector
Tag Selector berfungsi menampilkan tag yang di seleksi pada area desain. Anda dapay menyeleksi bagian desain dengan memilih tag yang sesuai. sebagai contoh, untuk menyeleksi semua elemen halaman, klik tag <body>
> Panel Properties
Panel Properties berfungsi menampilkan properti dari elemen halaman web yang terpilih, melalui panel ini anda dapat mengubah properti elemen tersebut, baik dengan penambahan properti CSS maupun properti dari tag HTML.
Perangkat Tambahan
Selain Adobe DreamweaverCS4, anda juga membutuhkan sebuah browser yang berfungsi menampilkan hasil desain halaman web. sementara itu, untuk membuat website yang dinamis anda membutuhkan sebuah database (misalnya MySql), sebuah server web (misalnya Apache) dan sebuah phpAdmin untuk melakukan pengolahan database dengan php. Berikut penjelasannya...
Catatan:
"Perangkat tambahan Server Web diperlukan bila anda membuat sebuah halaman website yang dinamis (Dinamic Web), tapi bila anda hanya ingin membuat halaman web statis / sederhana, maka anda tidak memerlukan aplikasi Server Web"
> Server Web
Server Web dibutuhkan untuk melakukan pemrograman yang membutuhkan teknologi server-side seperti PHP, ColdFusion, ASP, dan JSP. oleh karena itu, server web merupakan perangkat yang penting untuk melakukan uji coba pemrograman server-side yang anda buat. dengan demikian anda tidak perlu melakukan upload data ke sebuah hosting hanya untuk mengetahui hasil pemrograman untuk sisi server. Pemrograman server-side biasanya digunakan untuk mangakses database yang terdapat pada server hosting, sehingga pengembang dengan mudah mengelola content website dengan mudah tanpa mengubah halaman halaman web.
Salah satu teknologi aplikasi server web yang lengkap yang dapat anda gunakan adalah aplikasi AppServ yang merupakan kumpulan aplikasi pendukung pembangun website. pada paket AppServ versi 2.5.8 terdapat aplikasi aplikasi berikut:
> Server web Apache versi 2.2.4
> Bahasa scrip PHP versi 5.3.1
> phpMyAdmin Database Manager versi 2.9.2
> Database MySQL versi 5.0.27
Anda bisa mendapatkan aplikasi AppServ secara gratis disini www.AppServNetwork.com
> Browser
Browser adalah aplikasi yang digunakan untuk menampilkan file-file website, baik html, php, mht, dan lain sebagainya. anda tidak akan dapat menampilkan hasil dari desain anda apabila anda tidak mempunyai browser anda dapat menggunakan browser Internet explorer (IE) yang merupakan bawaan windows. Mozila Firefox, Opera, Safari, Chrome, dan lain lain
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh735LDSONtzGQAyPQJh6JGNlUKe4U2PrWf53MUhJ0MSXsD3a23sNCW9dX0WWImRfxXonjojilORa7zE0ZEQ6173s9rIoN72Cq4M-S5LBgA2Zvk-fEe-Q09_Idg0ONMSWzyZ0iTVRrVU-Y/s1600/gambargerak2.gif
