PERTEMUAN 6 Teknologi dan Perangkat Pendukung

Transkripsi

1 PERTEMUAN 6 Teknologi dan Perangkat Pendukung Editor program Web Browser Editor Gambar Editor Multimedia Editor Warna Sebuah Situs Web (Website) Sebuah situs web (website) merupakan kumpulan dari berbagai jenis file. Sebagian besar diantaranya merupakan file HTML. Jenis lainnya dapat berupa file image, multimedia dan animasi seperti video dan flash. Kesemuanya harus dapat disatukan menjadi satu kesatuan. Sebuah situs web yang baik harus dapat menyajikan setiap komponen dengan serasi, konsisten dan indah. Saat ini boleh dikatakan tidak ada (atau belum ada) satu software atau perangkat lunak yang dapat digunakan untuk membangun sebuah situs secara keseluruhan, mulai dari merancang, membuat halaman HTML, mengedit image, multimedia dan animasi, sampai menampilkannya sekaligus. Namun, dalam merancang situs web, kita harus menggunakan beberapa perangkat lunak (aplikasi) sekaligus. Perangkat lunak yang diperlukan dalam membangun situs web, setidaknya dapat dibagi menjadi: 1. Editor program (code editor) 2. Web browser 3. Editor gambar (image editor) 4. Editor multimedia (multimedia editor) 5. Editor warna (Color editor) Editor Program (Code Editor) Editor program (code editor) merupakan suatu aplikasi yang dapat digunakan untuk membantu dalam membuat program tertentu. Saat ini tersedia banyak sekali editor program, baik yang khusus untuk bahasa program tertentu maupun yang dapat digunakan untuk berbagai jenis bahasa program. Fitur yang ditawarkan oleh masingmasing editor juga beragam, mulai dari yang sederhana seperti Notepad sampai yang kompleks seperti Netbeans untuk Java dan Dreamweaver untuk design situs web. Secara khusus dalam konteks design situs web sendiri cukup banyak editor yang tersedia, tentunya dengan kelebihan dan kekurangannya masing-masing. Salah satu editor web yang banyak digunakan yaitu Macromedia Dreamweaver. Dreamweaver sendiri merupakan sebuah perangkat lunak yang secara khusus dibuat untuk membantu membangun situs web secara mudah dan cepat. Dreamweaver menyediakan berbagai fasilitas yang membantu penggunanya untuk membuat halaman-halaman web dengan mudah. Dan bagi pengguna yang tidak atau kurang mengerti program seperti HTML, Dreamweaver merupakan salah satu pilihan tepat untuk membangun situs web. Dreamweaver pertama kali diluncurkan (versi 1) pada tahun Hingga saat ini, Dreamweaver sudah mencapai versi 8 (tahun 2004). Dreamweaver dikembangkan oleh perusahaan bernama Macromedia Inc. Untuk Hal. 1

2 mengetahui perkembangan dan versi terakhir, kita dapat berkunjung ke situs resminya di Beberapa keunggulan Macromedia Dreamweaver yang menjadikannya banyak digunakan dalam membangun situs web, antara lain: 1. Tampilan (interface) Dreamweaver mudah dimengerti oleh pengguna dari semua tingkat keahlian, bahkan bagi orang awam sekalipun. 2. Dreamweaver cukup tangguh untuk membangun berbagai tipe situs web. 3. Dreamweaver selalu menjadi perangkat lunak pertama yang selalu mendukung teknologi web terkini. 4. Dreamweaver merupakan editor berbasis WYSIWYG (What You Say Is What You Get), artinya apa yang tampak di editor, sama seperti apa yang akan ditampilkan di web browser. 5. Dreamweaver terintegrasi dengan produk Macromedia lainnya, seperti Macromedia FreeHand, Fireworks, dan Flash. Dalam membangun situs web, kita akan menggunakan Macromedia Dreamweaver untuk membuat dan mengedit 3 (tiga) jenis script, yaitu HTML, CSS dan Javascript. HTML dan XHTML HTML merupakan singkatan dari Hypertext Markup Language. HTML merupakan bahasa mark-up yang digunakan untuk membuat sebuah halaman web dan menampilkan berbagai informasi di dalam sebuah web browser. Apa yang ditampilkan di browser (internet) adalah rangkaian perintah (script) HTML. HTML saat ini merupakan standar internet yang didefinisikan dan dikendalikan penggunaannya oleh World Wide Web Consortium (W3C). Pada dasarnya dokumen HTML mirip dengan dokumen teks biasa, hanya dalam dokumen ini sebuah teks bisa memuat instruksi yang ditandai dengan kode atau lebih dikenal dengan TAG. Tag HTML umumnya terdiri dari tag pembuka dan tag penutup. Sebagai contoh jika kita ingin menampilkan suatu teks menjadi huruf tebal (bold), maka kita perlu menambahkan tag <b> didepan teks dan diakhiri dengan tag </b>. Sedangkan XHTML atau extensible HyperText Markup Language merupakan bahasa markup penerus dan pengembangan dari HTML yang memiliki kemampuan yang kurang lebih mirip HTML, tapi dengan aturan sintaks yang lebih ketat. HTML merupakan aplikasi dari SGML (Standard Generalized Markup Language) yang sangat fleksibel, sedangkan XHTML adalah aplikasi dari XML, turunan SGML yang lebih terbatas. Karena XHTML harus memiliki keteraturan-bentuk (mengikuti sintaks yang Hal. 2

3 tepat), dokumen XHTML dapat diproses otomatis dengan menggunakan standar pemroses XML - tidak seperti HTML yang membutuhkan pemroses yang cukup sulit dan kompleks. XHTML dapat dianggap sebagai perpaduan antara HTML dan XML karena merupakan formulasi ulang HTML dalam bentuk XML. XHTML 1.0 telah menjadi rekomendasi World Wide Web Consortium (W3C) pada tanggal 26 Januari CSS CSS atau Cascading Style Sheets merupakan suatu bahasa stylesheet yang digunakan untuk mengatur tampilan suatu dokumen yang ditulis dalam bahasa markup. Penggunaan yang paling umum dari CSS adalah untuk memformat halaman web yang ditulis dengan HTML dan XHTML. Walaupun demikian, bahasanya sendiri dapat dipergunakan untuk semua jenis dokumen XML termasuk SVG dan XUL. Spesifikasi CSS diatur oleh World Wide Web Consortium (W3C). CSS digunakan antara lain untuk menentukan warna, jenis huruf, tata letak, dan berbagai aspek tampilan dokumen. CSS digunakan terutama untuk memisahkan antara isi dokumen (yang ditulis dengan HTML atau bahasa markup lainnya) dengan presentasi dokumen (yang ditulis dengan CSS). Pemisahan ini dapat meningkatkan aksesibilitas isi, memberikan lebih banyak keleluasaan dan kontrol terhadap tampilan, dan mengurangi kompleksitas serta pengulangan pada stuktur isi. CSS memungkinkan halaman yang sama untuk ditampilkan dengan cara yang berbeda untuk metode presentasi yang berbeda, seperti melalui layar, cetak, suara (sewaktu dibacakan oleh browser basissuara atau pembaca layar), dan juga alat pembaca braille. Halaman HTML atau XML yang sama juga dapat ditampilkan secara berbeda, baik dari segi gaya tampilan atau skema warna dengan menggunakan CSS. Javascript Javascript merupakan bahasa pemrograman kecil yang berjalan di sisi client (browser). Javascript dijalankan di sisi client, sehingga tidak memerlukan compiler atau interpreter tertentu. Hanya saja untuk menjalankannya, browser harus mendukung javascript. Saat ini hampir semua browser yang ada sudah mendukung javascript. JavaScript adalah merek dagang terdaftar dari Sun Microsystems, Inc. Bahasa ini digunakan di bawah lisensi untuk teknologi yang diciptakan dan diimplementasikan oleh Netscape Communications dan entitas barunya seperti Mozilla Foundation. Web Browser Web browser merupakan sebuah perangkat lunak (aplikasi) yang digunakan untuk menampilkan halaman-halaman web. Halaman web yang dimaksud adalah file HTML dan beberapa file lainnya seperti CSS dan Javascript. Halaman web tersebut dapat tersimpan di lokal, atau di sebuah server intranet/internet. Jadi, web browser tidak selalu terhubung ke internet. Dengan Dreamweaver, kita sebenarnya dapat melihat tampilan situs secara langsung seperti halnya di browser (fitur what-you-see-is-whatyou-get), namun hal tersebut tidak dapat dijadikan patokan bahwa tampilan situs akan sama di semua browser. Setiap browser terkadang memiliki aturan tersendiri dalam menampilkan situs web. Jadi, dalam membuat suatu situs web, alangkah baiknya jika dicoba di beberapa browser sekaligus. Berikut ini beberapa web browser yang paling banyak digunakan: 1. Microsoft Internet Explorer ( 2. Mozilla Firefox ( Hal. 3

4 3. Netscape Browser ( 4. Opera ( 5. Safari ( Saat ini sebagian besar pemakai internet menggunakan browser Internet Explorer (IE) dan Mozilla Firefox. Hal tersebut terlihat dari statistik yang diambil oleh website W3Counter.Com, seperti terlihat pada gambar. Internet Explorer merupakan browser yang secara default sudah ada di sistem operasi Windows XP. Namun pada dasarnya semua browser di atas dapat kita gunakan untuk mencoba situs web kita. Hal. 4

5 Editor Gambar (Image Editor) Gambar atau image merupakan unsur yang cukup penting dalam design web. Editor gambar (image editor) merupakan perangkat lunak atau aplikasi yang dapat digunakan untuk membuat dan mengedit gambar. Dreamveaver, walaupun dapat digunakan untuk menempatkan gambar di halaman web dan manipulasi gambar sederhana, belum bisa dikategorikan sebagai image editor. Editor gambar (image editor) dapat dibagi menjadi dua jenis, paint-program dan draw-program. Paint program menghasilkan gambar dalam format bitmap atau raster. Paint program diukur berdasarkan satuan pixel. Contoh dari paint program adalah Adobe Photoshop dan Macromedia Fireworks. Sedangkan draw program merupakan jenis editor gambar yang menghasilkan file gambar dalam format vektor. Contoh dari editor ini adalah Macromedia FreeHand dan Adobe Ilustrator. Untuk situs web, sebaiknya kita menggunakan format gambar dalam bentuk bitmap (raster) karena format ini lebih ringan dan ukuran filenya lebih kecil. Jadi, kita dapat menggunakan Adobe Photoshop atau Fireworks untuk membuat dan mengedit gambar. Editor Multimedia (Multimedia Editor) Seperti halnya gambar, kita juga terkadang ingin menampilkan beberapa file multimedia dan animasi di situs web. Dreamweaver memiliki fasilitas untuk menempatkan dan mengatur tampilan file multimedia, namun Dreamweaver tidak dapat digunakan sebagai multimedia editor. Untuk itu, kita memerlukan software atau aplikasi khusus untuk menangani file multimedia. Jenis-jenis file multimedia diantaranya file audio, animasi dan video. Berikut ini beberapa jenis format file multimedia beserta plugin untuk membukanya. Hal. 5

6 Jenis-jenis file multimedia diantaranya file audio, animasi dan video. Berikut ini beberapa jenis format file multimedia beserta plugin untuk membukanya. Editor Warna (Color Editor) Warna merupakan komponen yang cukup berpengaruh dalam design web. Untuk itu, untuk mengoptimalkan hasil dalam mendesign situs web, kita memerlukan suatu software atau aplikasi yang dapat membantu pendesign situs dalam memilih warna yang tepat. Beberapa software atau aplikasi yang digunakan dalam design web, sebenarnya banyak yang juga menyertakan fasilitas untuk memilih warna dengan mudah. Berikut ini beberapa contoh: 1. Macromedia Dreamweaver 2. Adobe Photoshop 3. Color Schemer ( Hal. 6

7 Hal. 7

8 Mengenal Dreamweaver 8 Memulai Dreamweaver Tampilan Dreamweaver Memulai Dreamweaver Setelah Dreamweaver terinstall di komputer, kita dapat mengaksesnya di menu Program Files. Untuk membukanya kita dapat membuka dengan memilih menu Start > All Programs > Macromedia > Macromedia Dreamweaver 8. Maka akan terbuka window start-up Dreamweaver, seperti terlihat pada gambar. Hal. 8

9 Dari window start-up Dreamweaver, terlihat 3 (tiga) kolom, yaitu Open a Recent Item, Create New dan Create From Samples. Pada kolom Open a Recent Item ditampilkan file-file yang terakhir dibuka (recent files). Kita dapat membuka file tersebut dengan mengklik salah satu nama file. Dan pada kolom ini juga terdapat menu Open... yang dapat dipilih jika ingin membuka file atau dokumen yang belum ada di recent item. Selanjutnya pada kolom Create New terdapat pilihan untuk membuat file baru. Pilihan file baru yang dapat dibuat dengan Dreamweaver antara lain file HTML, ColdFusion, PHP, ASP VBScript, Javascript, XML, CSS dan Dreamweaver Site. Pada kolom ketiga terdapat kategori Create From Samples dimana dapat kita pilih jika ingin membuat halaman web berdasarkan tampilan (template) yang sudah tersedia. Jadi pilihan ini dapat digunakan jika menginginkan membuat halaman web dengan cepat dan mudah. Jika jenis file yang akan dibuat tidak terdapat di dalam list, kita dapat memilih menu More... untuk melihat daftar jenis file yang dapat dibuka dengan Dreamweaver. Tampilannya terlihat seperti pada gambar berikut ini. Pada kolom Category terdapat beberapa kategori file baru yang dapat dibuat, mulai dari Basic page hingga Page Designs. Berikut ini penjelasan singkat mengenai kategori tersebut: Basic page Basic page digunakan untuk membuat file-file dasar situs web. File yang termasuk dalam kategori ini antara lain file HTML, CSS, Javascript dan XML. Dynamic page Hal. 9

10 Dynamic page digunakan untuk membuat file-file dinamis. Yang dimaksud dengan file dinamis adalah file atau script berbasis server (server-sidescripting). Masuk dalam kategori ini antara lain PHP, ASP, ColdFusion dan JSP. Tempate page Kategori ini menampilkan pilihan untuk membuat file baru yang berupa template. Template tersebut dapat berupa template untuk HTML, PHP atau yang lainnya. Other Kategori Other menampilkan jenis file yang tidak ada di tiga kategori sebelumnya, antara lain file Text, Java, dan seterusnya. CSS Style Sheets Pilihan kategori ini berisi beberapa contoh halaman CSS siap pakai. Framesets Jika kita ingin membuat situs dengan menggunakan frame, maka pilihlah kategori ini dan kita dapat memilih tampilan frame yang sesuai. Page Designs (CSS) Kategori ini menampilkan beberapa contoh layout halaman situs yang didesain dengan CSS. Starter Page Pada kategori Starter Page ditampilkan pilihan beberapa layout halaman depan situs. Kita dapat memilih sesuai keinginan kita. Page Designs Page Designs menampilkan berbagai format atau template dasar halaman web. Sebagai langkah awal, kita akan membuat halaman web dasar. Pilihlah jenis file dasar HTML dan selanjutnya akan ditampilkan halaman utama Macromedia Dreamweaver. Tampilan Dreamweaver 8 Tampilan Dreamweaver 8 pada dasarnya cukup mudah dimengerti, bahkan untuk orang awam sekalipun. Berikut ini merupakan tampilan Dreamweaver 8 secara default. Hal. 10

11 Tampilan Dreamweaver dapat kita bagi menjadi beberapa bagian yaitu: 1. Menu Utama Menu utama ditampilkan di bagian atas layar Dreamweaver, dan dari menu ini kita dapat mengakses semua fasilitas yang disediakan oleh Dreamweaver. 2. Insert Bar Insert Bar secara default berada tepat dibawah menu utama. Bagian ini digunakan untuk menambahkan berbagai komponen dalam design halaman situs. 3. Layar Dokumen Utama Layar dokumen utama terletak di bagian tengah. Tampilannya dapat berupa tampilan design (design-view), tampilan source program (code-view) atau keduanya. 4. Properties Panel Properties panel merupakan window yang tampilannya bergantung kepada objek yang sedang aktif. Dari panel ini, kita dapat mengatur properties dari objek yang sedang aktif. 5. Panel Pendukung. Panel pendukung berada di sebelah kanan layar dokumen utama. Panel-panel ini berfungsi sebagai alat bantu dalam proses pembuatan situs web antara lain untuk memanage file, informasi penyimpanan, CSS dan sebagainya. Menu Utama Menu utama pada Dreamweaver terletak di bagian atas, seperti terlihat pada gambar berikut ini. Berikut ini penjelasan singkat dari masing-masing menu dalam Dreamweaver: File. Seperti pada program (aplikasi) lainnya, menu file merupakan menu yang digunakan untuk operasi dasar aplikasi seperti membuka file, menyimpan file, mencetak, import dan export. Menu File juga memiliki sub menu Preview in Browser yang berguna untuk menampilkan halaman situs di web browser. Hal. 11

12 Edit. Menu ini terdiri dari submenu yang berhubungan dengan proses editing file, seperti Copy, Cut, Paste, Undo, Redo, Find and Replace. View. Menu ini digunakan untuk mengatur tampilan layar Dreamweaver, seperti pengaturan tampilan (design view, code view atau keduanya), pengaturan zoom-in dan zoom-out dan sebagainya. Insert. Jika kita ingin menambahkan suatu objek atau komponen, seperti form, frame dan image ke dalam halaman web, kita dapat mencarinya didalam menu Insert. Menu insert sebenarnya dapat diakses dari insert bar. Modify. Menu ini digunakan untuk mengubah properties dari objek yang sedang aktif. Dan juga digunakan untuk melakukan convert table ke layer dan sebaliknya. Text. Menu ini digunakan untuk mengatur tampilan (style) text. Commands. Menu ini terdiri dari beberapa perintah berhubungan dengan sourceformating dan HTML-cleaning. Menu ini juga memiliki sub menu untuk membuat web photo album. Site. Menu ini berhubungan dengan manajemen file dan situs. Window. Menu window digunakan untuk pengaturan tampilan (show-and-hide) window properties. Help. Menu ini merupakan menu bantuan mengenai penggunaan Dreamweaver. Insert Bar Insert bar merupakan bagian yang ditampilkan di bawah menu utama. Insert bar berisi sejumlah objek atau komponen web yang dapat disertakan di halaman web. Insert bar dapat dimunculkan dan disembunyikan melalui menu Window > Insert. Insert bar terdiri dari beberapa kategori, yaitu: Common. Kategori ini berisi komponen-komponen HTML yang sering digunakan, seperti table, div, image, komentar, hyperlink dan sebagainya. Layout. Menu layout berisi pengaturan pilihan tampilan standar, expanded atau layout. Standar digunakan jika kita akan men-design layout dengan tabel, layout dipilih jika ingin menggunakan layer/div dalam men-design. Hal. 12

13 Forms. Kategori ini digunakan untuk menambahkan elemen form ke dalam halaman. Text. Kategori text berisi pengaturan-pengaturan (formating) text. HTML. HTML digunakan untuk menambahkan elemen-elemen HTML, seperti HR, table, frame dan script. Application. Kategori ini digunakan untuk menambahkan elemen-elemen dalam website dinamis, seperti database, procedure, field dsb. Flash elements. Kategori ini digunakan untuk menambahkan elemen flash ke dalam situs. Favorites. Pada bagian kategori ini kita dapat menambahkan elemen-elemen atau objek-objek sesuai keinginan kita. Untuk menambahkannya, klik kanan pada bar dan pilih submenu Customize Favorite Objects... Layar Dokumen Utama Layar dokumen utama merupakan tempat untuk mendesign tampilan situs. Kita dapat menambahkan elemen HTML dan juga elemen yang lainnya ke layar dokumen utama ini. Tampilan layar dokumen utama dapat diatur menjadi 3 mode tampilan, yaitu designview, code-view, dan split-view. Untuk mengaturnya, dapat menggunakan tombol yang disediakan diatas layar dokumen utama, seperti terlihat pada gambar di bawah ini. Perbandingan tampilan layar dokumen utama dapat terlihat pada gambar-gambar berikut ini: Hal. 13

14 Hal. 14

15 Panel Properties Panel Properties merupakan bagian yang sangat penting untuk setiap elemen halaman. Panel properties berada di bawah layar dokumen utama. Panel ini dapat dimunculkan atau disembunyikan dengan mengakses menu Window > Properties. Gambar di atas merupakan tampilan panel properties yang akan ditampilkan saat cursor berada di layar dokumen utama dan tidak ada objek tertentu yang aktif. Pada properties diatas kita dapat mengatur properti dari halaman dengan mudah, seperti mengatur perataan teks, warna, font dan ukuran teks dan seterusnya. Di panel properties tersebut juga tersedia tombol Page Properties... yang dapat digunakan untuk mengatur properti halaman secara umum, seperti judul halaman dan background halaman. Panel Properties merupakan panel yang dinamis dan tampilannya menyesuaikan elemen yang sedang aktif atau dipilih. Gambar dibawah ini merupakan tampilan panel properties jika suatu objek image dipilih. Pada panel terlihat beberapa pengaturan berhubungan dengan image, seperti pengaturan src (source image), alt (teks alternatif untuk image), pengaturan ukuran, image-map dan sebagainya. Panel Pendukung Panel pendukung berada di sebelah kanan layar dokumen utama. Panelpanel ini berfungsi sebagai alat bantu dalam proses pembuatan situs web antara lain untuk memanage file, informasi penyimpanan, CSS dan sebagainya. Hal. 15

16 Panel pendukung antara lain terdiri dari panel: Panel CSS Panel CSS digunakan untuk pengaturan CSS Style halaman web. Panel ini akan menampilkan semua pengaturan CSS yang berlaku umum di halaman web maupun pada elemen tertentu. Dari panel ini kita juga dapat mengedit pendefinisian CSS. Panel ini memiliki dua tab, yaitu tab CSS Styles dan Layers. Tab Layers digunakan jika kita ingin mengatur div atau layer yang ada di satu halaman. Panel Application Panel application merupakan panel pengaturan untuk teknologi server yang digunakan. Dari sini kita dapat mengatur dan mendefinisikan serverside- scripting yang digunakan. Dari sini kita juga dapat mengatur koneksi dengan database tertentu. Panel Tag Panel tag menampilkan daftar atribut yang berlaku di suatu tag HTML yang sedang aktif (dipilih). Misalnya jika tag yang sedang aktif adalah tag <IMG> maka panel tag akan menampilkan berbagai atribut yang berlaku di tag <img> seperti src, hspace, alt dsb. Dari panel ini kita juga dapat mengatur dan menambahkan beberapa event dan fungsi javascript (behaviors) pada tag (elemen) yang sedang aktif. Di tab ini, kita dapat menambahkan pemanggilan terhadap fungsi Javascript. Panel Files Panel files ini digunakan untuk mengatur file (file-management) baik file yang berada di komputer lokal maupun komputer remote (server). Dari panel ini, kita juga dapat melakukan koneksi ke server via FTP. Praktek: Membuat Halaman Web Membuat dan Menyimpan Halaman Web 1. Buat file HTML baru dengan Dreamweaver, melalui menu File > New. Hal. 16

17 Atau 2. Pada layar utama Design ketikkan teks sebagai berikut : 3. Sekarang kita akan menyimpan file tersebut. Pilih menu File > Save As... atau File > Save dan tentukan nama file dan lokasi penyimpanan file. Akhiran (extension) file untuk halaman HTML dapat berupa.html atau.htm. Untuk menyimpan, kita juga dapat menggunakan short-cut Ctrl+Shift+S untuk Save As... dan Ctrl+S untuk Save. Hal. 17

18 4. Setelah dokumen HTML tersimpan, kita akan melihat hasilnya di sebuah web browser. Untuk melihat hasilnya di web browser, pilih menu File > Preview in Browser dan pilih jenis browser yang diinginkan. Menu ini juga dapat diakses melalui short-cut F12 untuk web browser utama dan Ctrl+F12 untuk web browser kedua. atau Hal. 18

19 5. Halaman web yang dibuat akan ditampilkan di web browser. Mengatur Property Teks 6. Untuk mengatur property teks, seperti ukuran, warna, jenis dan sebagainya, kita dapat melakukannya dengan cara memilih (block) terhadap teks yang akan diatur dan atur property yang diinginkan di layar properties di bawah layar dokumen utama. Sebagai contoh jika kita akan membuat teks pada baris pertama di atas menjadi huruf verdana, ukuran 12 pixel dan warna biru, maka property yang harus diatur sebagai berikut: 7. Selanjutnya buatlah agar teks di baris kedua menjadi jenis arial, berwarna merah, ukuran 16px! Teks di baris ketiga menjadi Georgia, berwarna hijau dan ukuran 14px! Tampilannya menjadi seperti pada gambar berikut ini: Hal. 19

20 8. Aturlah teks pada baris pertama agar menjadi miring (italic) dengan menggunakan tombol I dan aturlah teks kedua menjadi tebal (bold) dengan menggunakan tombol B yang ada di layar properties. 9. Perataan teks dapat diatur secara rata kiri (left), tengah (center), kanan (right) atau kiri dan kanan (justify). Gunakan tombol untuk mengatur perataan teks. Aturlah semua teks di atas menjadi rata tengah! Tampilan halaman menjadi sebagai berikut: Mengatur Property Halaman Property halaman meliputi pengaturan yang berhubungan dengan halaman web, seperti judul halaman, background halaman, pengaturan teks dan link, margin dan sebagainya. Untuk membuka window pengaturan halaman, klik tombol Page Properties Dari window page-properties, atur jenis huruf menjadi Verdana, ukuran 11 pixel dan warna putih (#ffffff), atur juga background halaman menjadi warna biru (#0000ff)! Lihat gambar di bawah ini! Hal. 20

21 11. Background halaman juga dapat berupa gambar (image). Untuk menambahkan gambar (image) sebagai background halaman, dari window page-properties pilih Background image dan klik tombol Browse... untuk memilih gambar yang akan dijadikan background. Hal. 21

22 12. Selanjutnya kita akan mengatur judul halaman menjadi Belajar Design Web dengan Dreamweaver. Pada window page-properties, pilih kategori Title/Encoding dan ubah teks pada isian Title menjadi Belajar Design Web dengan Dreamweaver. 13. Hasil akhirnya kurang lebih sebagai berikut: Hal. 22

23 Praktek: Mendefinisikan Situs di Dreamweaver 8 Mendefinisikan Situs Baru Sebelum membuat halaman situs web secara keseluruhan, sebaiknya kita mendefinisikan dahulu situs yang akan kita buat. Manfaat dari pendefinisian situs ini adalah agar situs kita tersimpan dan ter-manage dengan struktur yang baik. Dan disini kita juga dapat mendefinisikan bagaimana konektivitas dengan server, jenis serverside-scripting apa yang dipakai dan sebagainya. Berikut ini langkah-langkah mendefinisikan situs baru di Dreamweaver Pertama, pilih menu Site > New Site... atau jika kita berada di halaman awal (start-page) Dreamweaver, pilih menu Dreamweaver Site... pada kolom Create New. 2. Selanjutnya window Site Definision akan terbuka. Ketikkan nama situs pada kotak isian pertama (What would you like to name your site?) dan alamat situs pada kotak isian kedua (What is the HTTP Address (URL) of your site?). Klik tombol Next untuk melanjutkan. Hal. 23

24 3. Pada window berikutnya akan diminta untuk memilih teknologi server yang digunakan. Pilihan teknologi server yang disediakan antara lain ColdFusion, ASP.NET, ASP, JSP dan PHP MySQL. Saat ini kita belum menggunakan teknologi server, jadi pilih pilihan No, I do not use a server technology. Klik tombol Next untuk melanjutkan proses pendefinisian situs. Hal. 24

25 4. Selanjutnya akan ditanyakan bagaimana kita akan menyimpan file web, apakah di komputer lokal atau di komputer server. Pilih pilihan Edit local copies on my machine, then upload to server when ready (Recommended). Lalu pilih letak penyimpanan file web. Pilih tombol Next untuk melanjutkan. Hal. 25

26 5. Pada window selanjutnya kita diminta menentukan bagaimana cara koneksi dengan server. Koneksi dengan server dapat dilakukan melalui FTP, Local/Network, WebDAV, dsb. Jika kita hanya mengedit file di komputer local (tidak menggunakan server) maka pilihlah koneksi None. Klik tombol Next untuk melanjutkan. Hal. 26

27 6. Akan ditampilkan window berisi informasi pendefinisian situs yang telah kita lakukan. Klik tombol Done untuk menyimpan pendefinisian situs. Hal. 27

28 7. Hasil pendefinisian situs tampak pada window Files yang terletak di sebelah kanan layar dokumen utama Dreamweaver. Mengatur Struktur Folder Situs Pada dasarnya pengaturan file dan folder pada saat pembuatan suatu aplikasi situs web tidak ada aturan tertentu, artinya kita bebas menyimpan dan mengatur file web kita. Namun demikian, pengaturan file dan folder yang baik akan memudahkan kita dalam mengatur situs kita. Sebagai contoh, kita akan mendefinisikan struktur file dan folder situs menjadi sebagai berikut: Folder utama (Root Folder) Berisi file-file utama halaman web, seperti index, about us dsb. Folder ini sudah dibuat saat mendefinisikan situs. Folder images Berisi file-file image yang digunakan dalam situs, seperti header, background, menu dsb. Folder includes Berisi file-file yang selalu disertakan dalam halaman-halaman situs, seperti file CSS, javascript dll. Folder galleries Berisi file-file galeri foto (jika kita akan menampilkan foto). Folder downloads Berisi file-file yang bisa didownload (jika kita akan menyediakan file yang dapat didownload). Hal. 28

29 Untuk membuat folder baru dalam situs, klik kanan pada nama situs dan pilih sub menu New Folder dan ketikkan nama foldernya. Ulangi langkah tersebut untuk setiap nama folder di atas. Tampilan struktur situs setelah semua folder dibuat menjadi sebagai berikut: Hal. 29