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