DENGAN ADOBE DREAMWEAVER CS5 Bersama AMIK YMI TEGAL 2 Software yang digunakan untuk membuat website 3 Software yang digunakan untuk membuat website 4 Software yang digunakan untuk membuat website 5 Mengenal Software Dreamweaver Adobe Dreamweaver Adobe Dreamweaver merupakan program penyunting halaman web keluaran AdobeSystems yang dulu dikenal sebagai Macromedia Dreamweaver keluaran Macromedia. Program ini banyak digunakan oleh pengembang web karena fitur - fiturnya yang menarik dan kemudahan penggunaannya. Versi terakhir Macromedia Dreamweaver sebelum Macromedia dibeli oleh Adobe Systems yaitu versi 8. Software yang akan kita gunakan dalam pelatihan ini adalah Adobe Dreamweaver CS5 yang dirilis pada 12 April 2011, sedangkan versi terbaru dari Dreamweaver yaitu Adobe Dreamweaver CS6 yang dirilis pada 21 April 2012 7 Tampilan Dreamweaver Title Bar Menu Bar Area Tampilan Desain Toolbar Document Tampilan Syntax / Code Properties Inspector Status bar Toolbar Insert 8 1. Klik Site pada menubar kemudian pilih New Site Memulai Dengan Dreamweaver Memberi nama site 9 2. Isi kotak dialog Site Definition for website Nama site Folder untuk menyimpan file html Folder untuk menyimpan file gambar Membuat folder untuk penyimpanan file 10 3. Lihat pada Files Nama site Folder untuk gambar Application Files 11 4. Buat file HTML klik kanan pada nama site yang kita buat tadi kemudian pilih New File Kemudian ketik nama file yang akan anda buat, file utama yang di buat diberi nama index.html Membuat file HTML 12 5. Mengisi file HTML, double klik nama file HTML yang telah kita buat. Mengisi content file HTML 13 14 Menyimpan Dokumen 15 Klik disini untuk menjalankan program Menjalankan program 16 Bekerja dengan Code Tag-tag HTML 17 Tag-tag HTML Command HTML biasanya disebut TAG, TAG digunakan untuk menentukan tampilan dari document HTML. <BEGIN TAG> </END TAG> Setiap document HTML di awali dan di akhiri dengan tag HTML. <html> - - - </html> Tag tidak case sensitive, jadi anda bisa gunakan <HTML> atau <html> keduanya menghasilkan output yang sama. Bentuk dari tag HTML sebagai berikut: <Element Attribute = Value> Element - nama tag Attribute - atribut dari tag Value - nilai dari atribut. Contoh : <body bgcolor="lavender"> BODY merupakan element, BGCOLOR(Background) merupakan atribut yang memiliki nilai lavender. Begin Tag End Tag 18 Document HTML bisa di bagi mejadi tiga bagian utama: Struktur HTML 1. HTML Setiap document HTML harus di awali dan di tutup dengan tag HTML <HTML> </HTML> tag HTML memberi tahu browser bahwa yang di dalam kedua tag tersebut adalah document HTML. 2. HEAD Bagian header dari document HTML di apit oleh tag <HEAD></HEAD> di dalam bagian ini dimuat tag TITLE yang menampilkan judul dari halaman pada titlenya browser. <HEAD> <TITLE> </TITLE> </HEAD> 3. BODY Document body di gunakan untuk menampilkan text, image link dan semua yang akan di tampilkan pada web page. <BODY> </BODY> 19 <html> <head> <title> Judul yang ada di pojok kiri atas pada browser </title> </head> <body> Disini tempat menuliskan teks, menyisipkan tabel, gambar, animasi dll. </body> </html> Contoh 1 : Preview 1 hasil 20 Contoh : <html> <head> <title>Heading Elemet</title> </head> <body> <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6> </body> </html> Basic HTML Element Block level element yang sering di gunakan : Heading (H1 sampai H6) Preview 2 hasil 21 Contoh : <html> <head> <title>Formating Paragraf</title> </head> <body> <h3>Pelatihan HTML</h3> <p> Palatihan HTML di selenggarakan oleh AMIK YMI TEGAL </p> </body> </html> Paragraf (P) Digunakan untuk memulai paragraf baru atau format paragraf Preview 3 hasil [ 22 1. Unordered List / tidak berurutan (Bullet) : Contoh : <html> <head> <title>Unordere List</title> </head> <body> Contoh penggunaan Unordered List <p> <ul type="circle"> <li>Senin</li> <li>selasa</li> <li>Rabu</li> <li>Kamis</li> <li>Jumat</li> <li>Sabtu</li> <li>Minggu</li> </ul></body> </html> List Item(LI) List item di gunakan untuk mengelompokkan data baik berurutan (ordered list) maupun yang tidak berurutan (unordered list). Ada 2 macam list yang bisa anda tambahkan ke document HTML: Preview 4 hasil 23 Tag Attribute Value Description <UL> TYPE SQUARE DISC CIRCLE Bullet Kotak Bullet Titik Bullet Lingkaran Unordered List / tidak berurutan (Bullet) : 24 List Item (LI) 2. Ordered List / Berurutan (Numbering) Contoh : <html> <head> <title>Ordere List</title> </head> <body> Scedule Pelatihan HTML <p> <ol start="1" type="I"> <li>Senin</li> <ol type="a"> <li>Pengenalan HTML</li> <li>Membuat halaman web</li> </ol> <li>Selasa</li> <ol type="A"> <li>Membuat Tabel</li> <li>menambahkan Gambar</li> </ol> <li>Rabu</li> <ol type="i"> <li>Membuat Link</li> </ol> </ol></body></html> Preview 5 hasil 25 Tag Attribute Value Description <OL> TYPE I i A a Lower Roman Uper Roman Uppercase Lowercase <OL> START n Begin Number Ordered List / Berurutan (Numbering) 26 Pemformatan Halaman 1. Begin row (BR) Tag <BR> di gunakan untuk memulai baris baru pada document HTML. Contoh: <html> <head> <title>br</title> </head> <body> <center>HALAMAN WEB AMIK YMI TEGAL</center> <p> Akademi Manajemen Informatika dan Komputer<br> Jl. Raya Dampyak Km 4 - Tegal <br><br> Link terkait Amiktegal.ac.id </body> </html> Preview 6 hasil Ganti baris 27 2. Format Font Dengan tag <FONT> anda bisa menentukan format tampilan font dalam document HTML seperti color, size, style dan lainya. Contoh: <html> <head> <title>Pelatihan Membuat Website</title> </head> <body> <font color="#0000FF" size=2 face="Verdana, Arial, Helvetica, sans-serif"> Pelatihan Membuat Website dengan Adobe Dreamweaver CS5 </font> </body> </html> Preview 7 hasil 28 Attribute Description Color Untuk menentukan warna font, anda bisa menggunakan nama font atau hexadecimal(#000000 - #ffffff) Size Untuk menentukan ukuran dari font 1 - 7 face Untuk menentukan jenis font biasanya dalam satu list ada beberapa font dan akan di baca mulai dari yangpaling kiri. Attribute Format Font 29 Alignment Align attribute digunakan untuk menentukan perataan object dalam document HTML baik berupa text, object, image, paragraph, division dan lain-lain. Value Description Left Rata Kiri Right Rata kanan Center Rata tengah Justify Rata kanan kiri Format Text Tag Description <B></B> Cetak tebal <I></I> Cetak miring <U></U> Cetak garis bawah <BIG></BIG> Untuk ukuran yang lebih besar dari normal <SMALL></SMALL> Untuk ukuran yang lebih kecil dari normal <STRIKE></STRIKE> Untuk memberi garis di tengah text <SUP></SUP> Superscript text <SUB></SUB> Subcript text> 30 Navigasi / Hyperlink Berfungsi untuk memanggil halaman lain yang terkait baik dalam satu alamat web tersebut atau ke alamat web lain. Contoh : Halaman web SMK BP TALANG yang memanggil halaman web AMIK YMI TEGAL <html> <head> <title>Link 1</title> </head> <body> <center>LATIHAN WEB SMK BHAKTI PRAJA TALANG</center> <p> Jurusan Teknik Komputer Jaringan<br> Jl. Raya Talang Balamoa Kab. Tegal<br><br> Link terkait <a href="link2.html">http://amiktegal.ac.id</a> </body> </html> Preview 8 31 Navigasi / Hyperlink <html><head> <title>Link 2</title> </head> <center> <h1><font face="Verdana, Arial, Helvetica, sans-serif" color="#0033FF"> HALAMAN WEB AMIK YMI TEGAL</font></h1></center> <br> <center><h4><font face="Verdana, Arial, Helvetica, sans-serif" color="#0033FF"> <a href="#mapok">materi pokok</a> | <a href="#mol">modul online</a> | pembuatan website| uji kompetensi </font></h4> <p align="left"> <font face="Verdana, Arial, Helvetica, sans-serif" color="#FF9900"> Materi Pokok</font><a name="mapok"></a></p> </center> <font face="Verdana, Arial, Helvetica, sans-serif" color="#FF9900"> Modul Online</font> <a name="mol"></a></p> </body> </html> Hyperlink dalam satu halaman web (Anchor) Preview 9 32 Tabel Tag <TABLE> digunakan untuk membuat table dalam document HTML ,bagian pokok dari table adalah cell yang didefinisikan dengan menggunakan tag <TD>. Contoh : <html> <head> <title>tabel 1</title> </head> <body> <center><h1>TABEL</h1></center> <p> <table border="1"> <tr> <td>Tabel dengan single cell</td> <td>Tabel dengan dua cell</td> <td>Tabel dengan tiga cell</td> <td>Tabel dengan empat cell</td> </tr> <tr> <td align="center">A</td> <td>B</td> <td>C</td> <td>D</td> </tr> </table> </body> </html> Preview 10 33 Menambahkan gambar & animasi Anda dapat menambahkan gambar dan animasi pada halaman web yang anda buat. Contoh : <html> <head> <title>Gambar</title> </head> <body> <center><h1>Insert Gambar</h1></center> <p> Insert gambar di sini <p><img src="image/header.jpg" height="500" width="369"> </body> </html> Preview 11 34 Bekerja dengan Design View Area anda mengetik naskah Input title disini 35 Page Properties - Appearance 36 Page Properties - Links 37 Page Properties-Heading 38 Properties Inspector Digunakan untuk memformat teks Font face Font Size Font color Alignment Hyperlink 39 Insert Image & Media Digunakan untuk menambahkan gambar atau media lain(animasi/video) ke dalam lembar kerja Pilih file gambarnya 1. Insert Image 40 Insert Image & Media 2. Insert Animasi 41 Insert Image & Media 3. Insert Flash Button 42 Rollover Image Gambar 1 Gambar 2 43 Table Menambahkan tabel ke dalam lembar kerja atau 44 Table Properties Digunakan untuk memberikan attribut-attribut pada tebal banyaknya baris & kolom lebar & tinggi tabel Jarak spasi dalamcell Jarak spasi antar cell Warna background Gambar latar belakang Perataan ketebalan garis pinggir warna garis pinggir 45 Navigasi/Hyperlink Digunakan untuk menghubungkan antar file html dalam satu website atau dengan website lain. Atau pada properties inspector 1. Hyperlink ke alamat website lain 46 Navigasi/Hyperlink 2. Anchor / Link dalam satu halaman web 1. Blok bagian yang akan di panggil 2. Klik icon Anchor Ketik nama anchor disini 47 Navigasi/Hyperlink 2. Anchor / Link dalam satu halaman web Blok menu yang di gunakan untuk memanggil/link Ketik nama bagian yang akan di panggil (anchor) 48 Cascading Style Sheet (CSS) CSS digunakan untuk mempermudah dalampemformatan tampilan halaman web Klik tanda + untuk menambah css 49 Cascading Style Sheet (CSS) 50 Cascading Style Sheet (CSS) Ketik nama css Desain Layout Menu Website Home = index.html Gallery = gallery.html About Us = about.html Contact Us = contact.html Step by step desain web (Manage Site) 1. Siapkan halaman awal yaitu index.html dan buka dengan Dreamweaver. 2. Manage site Pilih Site -> Manage Site Step by step desain web (Header) 3. Siapkan gambar header. Header yang digunakan pada contoh berukuran 826x326 piksel. Step by step desain web (Tabel Dasar) 4. Buat tabel dasar dengan cara Insert -> Table. Atur dengan pengaturan sbb: Step by step desain web (Tampilan Tabel Dasar) 5. Hasil Pembuatan Tabel Step by step desain web (insert header) 5. Atur Align pada panel Properties menjadi Center untuk membuat tabel berada di tengah halaman. 6. Tempatkan kursor pada baris pertama tabel dan masukkan gambar dengan Insert -> Image. Kemudian pilih gambar header.jpeg. Step by step desain web Navigasi 7. Tempatkan kursor di baris kedua tabel dan masukkan tabel baru untuk navigasi lewat Insert - > Table dengan pengaturan sebagai berikut : Navigasi Navigasi 8. Beri menu navigasi sesuai dengan yang telah didesain sebelumnya. Kita bisa memberikan warna pada menu navigasi. Navigasi Link 9. Beri link pada tiap menu lewat menu Link pada panel Properties. Contents Designing 10. Tempatkan pada baris ke-3. Dan sesuai dengan layout dasar, kita akan buat tabel di dalamnya dengan melalui Insert -> Table dengan pengaturan sebagai berikut : Step by step desain web Footer 11. Pada baris terakhir (footer) ganti warna dan ketikkan teks pada footer. Jangan lupa untuk melakukan Centering text alias membuat teks di tengah cell tabel. Kita biasanya menulis copyright dan sejenisnya pada footer. 66 67 Jl. Raya Dampyak KM.4 Tegal (Sebelah Timur SPBU MURI) Hub. Bu ELVI 0857 0008 1905 - http://amiktegal.ac.id 68