Pengenalan Adobe Dreamweaver CS5

2.7 CSS Cascading Style Sheet

CSS merupakan kependekan dari Cascading Style Sheet yang berfungsi untuk mengatur tampilan dengan kemampuan jauh lebih baik dari tag maupun atribut standar HTML Hypertext Markup Language. CSS sebenarnya adalah suatu kumpulan atribut untuk fungsi format tampilan dan dapat digunakan untuk mengontrol tampilan banyak dokumen secara bersamaan. Keuntungan menggunakan CSS yaitu jika ingin mengubah format dokumen, maka tidak perlu mengedit satu per satu. Penggunaan CSS ada 2 dua cara yaitu dengan menyisipkan kode CSS langsung dalam kode HTML atau simpan menjadi file tersendiri berekstensi .css. Dengan menyimpan sebagai file tersendiri akan lebih memudahkan untuk mengontrol tampilan dalam banyak dokumen secara langsung. CSS mendapat dukungan penuh pada browser versi 4 empat dan pada versi sebelumnya, hanya dengan Internet Explorer yang masih mampu mengenali CSS. Perlu diketahui bahwa tampilan CSS dapat berbeda bila ditampilkan pada menu browser yang berbeda pula Abdullah, 2003.

2.8 Pengenalan Adobe Dreamweaver CS5

Dreamweaver merupakan salah satu software dari kelompok Macromedia yang banyak digunakan untuk mendesain situs web. Adapun Adobe Dreamweaver itu sendiri adalah sebuah HTML editor profesional yang berfungsi untuk mendesain Universitas Sumatera Utara secara visual dan mengelola situs web maupun halaman web Mei Lenawati, 2007. Dreamweaver menyediakan suatu persandian penuh yaitu Code Editing Tool seperti code coloring, tag completion, acoding toolbar, dan code collapse dan Language Reference seperti Cascading Style Sheet CSS, JavaScript, ColdFusion Markup Language CFML dan bahasa yang lain. Macromedia Roundtrip HTML technology meng-import dokumen HTML tanpa melakukan reformat kode yang dalam dokumen HTML tersebut.

2.8.1 Memulai Adobe Dreamweaver CS5

Langkah untuk memulai penggunaan Macromedia Dreamweaver CS5 dengan cara, klik tombol Start All Programs Adobe Adobe Dreamweaver CS5. Setelah menjalankan Adobe Dreamweaver CS5, maka dilayar monitor akan tampil lembar aplikasi Adobe Dreamweaver CS5. Jika ingin membuat file HTML baru, klik pilihan HTML pada bagian Create New , sedangkan untuk file yang menggunakan kode program PHP maka klik pilihan PHP. Hal ini karena kita akan bekerja dengan Dreamweaver dan sekaligus menggunakan bahasa pemrograman PHP.

2.8.2 Area Kerja Dreamweaver CS5

Area kerja pada Dreamweaver CS5adalah sebagai berikut: 1. Document Window, berfungsi untuk menampilkan dokumen saat bekerja. Universitas Sumatera Utara 2. Insert Bar, berisi tombol-tombol untuk menyisipkan berbagai macam objek seperti image, table, dan frame ke dalam dokumen. 3. Document Toolbar, berisi tombol-tombol dan menu pop-up yang menyediakan tampilan berbeda dari Document Windows, misalnya Code, Split atau Design. 4. Coding Toolbar, berisi tombol-tombol yang digunakan untuk mempermudah pekerjaan pada jendela Code. 5. Panels Group, kumpulan panel yang saling berkaitan satu sama lainnya. 6. Tag Selector, berfungsi untuk menampilkan hierarki tag di sekitar pilihan yang aktif pada Design View. 7. Property Inspector, digunakan untuk melihat dan mengubah berbagai properti objek yang terpilih. 8. Status Bar, Hand Tool dan Zoom, menampilkan status pekerjaan dan mengatur tampilan jendela Desain. 9. Ruler, mempermudah pengukuran secara akurat. 10. Files Panel, digunakan untuk mengatur file-file dan folder-folder yang membentuk situs web. Universitas Sumatera Utara

2.8.3 Menu Bar Area Kerja Dreamweaver CS5

Dreamweaver juga memiliki menu-menu seperti berikut: 1. Menu File, berisi perintah-perintah yang umum dalam menu file, antara lain: New, Open, Open Recent, Close, Close All, Save, Save As, Import, Export, Preview in Browser, dan sebagainya. 2. Menu Edit, berisi perintah-perintah dalam editing halaman web, seperti: Undo, Redo, Copy, Paste, Find and Replace, Tag Libraries, Preference, dan sebagainya. 3. Menu View, berisi perintah-perintah untuk menampilkan mode halaman editing, antara lain: Code, Design, Code and Design, Table Mode, Visual Aids, Grid, Guide, dan sebagainya. 4. Menu Insert, berisi perintah-perintah untuk objek, seperti: Image Objects, Media, Table Objects, Form, dan sebagainya. 5. Menu Modify, berisi perintah-perintah untuk memodifikasikan objek pada halaman web, seperti: Page Properties, Edit Tag, Make Link, Remove Link, Arrange, Align, dan sebagainya. 6. Menu Text, berisi perintah-perintah untuk mengedit teks pada halaman web, seperti: Indent, Outdent, Font, Style, Size, Paragraph Format, dan sebagainya. 7. Menu Commands, berisi perintah-perintah untuk menjalankan aplikasi tertentu yang telah disediakan, seperti: Clean Up HTML, Optimize Image in Firework, Create Web Photo Album, dan sebagainya. Universitas Sumatera Utara 8. Menu Site, berisi perintah-perintah untuk mengelola site, seperti: Manage Sites, Get, Put, Reports, dan sebagainya. 9. Menu Window, berisi perintah-perintah untuk menampilkan panel, seperti: Insert, Properties, Behaviors, Files, Frames, Code Inspector, dan sebagainya. 10. Menu Help, berisi perintah-perintah bantuan dalam mempelajari Dreamweaver,seperti: Getting Started With Dreamweaver, Using Dreamweaver, What’s New in Dreamweaver CS5, Reference, dan sebagainya. Dreamweaver CS5 merupakan versi terbaru yang memiliki performa yang lebih baik dan memiliki tampilan yang memudahkan kita untuk membuat halaman web, baik ketika kita sedang bekerja dalam jendela desain maupun dalam jendela kode rumus. Dreamweaver CS5 didukung dengan cara pemakaian yang praktis dan standar, dan juga didukung untuk pengembangan penggunaan CSS, XML, dan RSS, dan kemudahan-kemudahan lain yang diperlukan. Kita bisa mendapatkan kecepatan dengan memaksimalkan penggunaan XML, tombol- tombol tampilan untuk memadukan bagian kedalam pekerjaan dan mengganti sensasi dari XML ke bahasa HTML. Kita juga dapat memadukan sumber data XML, seperti bagian RSS, ke halaman web hanya dengan menggunakan klik tahan geser mouse secara manual. Universitas Sumatera Utara BAB 3 SEKILAS SMA SINAR HUSNI KAB.DELI SERDANG

3.1 Sekilas Tentang Sekolah