APLIKASI KOMPUTER “WEBSITE” ERLIAN DESI RISKA YULIANA YOGA ARIFIN NUR CAHYO RANI INDAH
Web adalah sebuah tempat di internet yang mempunyai nama dan alamat. PENGERTIAN Secara umum : World Wide Web atau WWW atau juga dikenal dengan WEB adalah salah satu layanan yang didapat oleh pemakai computer yang terhubung ke internet. Suwanto Raharjo S.Si, M.Kom, Web merupakan salah satu layanan internet yang paling banyak digunakan dibanding dengan layanan lain seperti ftp, gopher, news atau bahkan email. Haer Talib, Web adalah sebuah tempat di internet yang mempunyai nama dan alamat.
Cara membuat Web (ADOBE DREAMWEAVER 8) Cara Membuat Website di Dreamweaver CS3 - Untuk membuat website di dreamweaver yang pertama yang perlu kita lakukan adalah membuat file index.php. Website yang akan kita buat memiliki bagian : Header Menu navigasi Konten Sidebar Footer
Cara membuat Web buka program Adobe Dreamweaver anda, Create new pilih PHP. tekan CTRL + S simpan dengan nama index.php dalam folder tempat anda menginstal XAMPP tekan CTRL + N pada Blank Page pilih CSS klik create,simpan dengan nama style.css dalam folder yang sama dengan file index.php Kembai ke file index.php index.php pada document toolbar, Code, tambahkan script berikut di atas tag </head>. <link href="style.css" rel="stylesheet" type="text/css" />
Lanjutan Mengatur Body Website file index.php, klik icon New CSS Rule yang ada di bagian kanan,(Atau Shift + F11 ) Setelah muncul Window New CSS Rule, isi pengaturan sebagai berikut : Selector Type : Advanced (Ids, pseudo-class selectors) Selector : body Define in : style.css Jika sudah klik Ok. Maka akan muncul jendela CSS Rule Definition for body in style.css, isikan pengaturan sebagai berikut Type = Font : Arial, Helvetica, sans-serif, size:13 pixel, color : #000000 Background = Background color : #CCCCCC Box = width : 900 pixel Jika sudah klik OK, simpan file index.php dan style.css anda tekan CTRL + S
Mengatur Link Web Klik icon New CSS Rule, isi pengaturannya sebagai berikut : Selector Type : Advanced (Ids, pseudo-class selectors) Selector : a Define in : style.css Setelah muncul CSS Rule Definition for a in style.css, isikan pengaturannya sebagai berikut : Type: Color : #ff6000 Pada Decoration centang None Jika sudah klik ok.
LANJUTAN mengatur css link pada saat hover atau pada saat cursor berada di atas link. Klik kembali icon New CSS Rule Selector Type : Advanced (Ids, pseudo-class selectors) Selector : a:hover Define in : style.css Setelah muncul CSS Rule Definition for a in style.css, isikan pengaturannya sebagai berikut : Type: Pada Decoration centang Underline Jika anda ingin mengubah warna link pada saat hover klik icon kotak yang ada di sebelah tulisancolor, kemudian pilih warnanya. Jika sudah klik Ok.
Membuat Header Website file index.php, kemudian ketikkan script berikut dan letakkan di bawah tag <body> <div id="header"></div> mengatur CSS untuk headernya Klik icon New CSS Rule, isi pengaturannya sebagai berikut : Selector Type : Advanced (Ids, pseudo-class selectors) Selector : #header Define in : style.css Setelah muncul CSS Rule Definition for #header in style.css, isikan pengaturannya sebagai berikut : Type: Size : 12 pixel Color : #FFFFFF Background: Background image : klik browse pilih header.jpg dalam folder images Repeat : no-repeat Box : Width : 860 pixel Float : Left Height : 110 pixel Padding : centang same for all, kemudian isikan 20 pixel OK,
memasukkan logo website dan deskripsi website kedalam header LANJUTAN memasukkan logo website dan deskripsi website kedalam header klik cursor anda setelah <div id=”header”> kemudian klik insert = > image = > logo.jpg Design View, klik gambar logo anda kemudian pada panel Property yang secara default berada di bagian bawah, pada H / Height isikan 80 Panel Property, pada Link klik icon folder yang ada di sebelah kiri tulisan Edit index.php. bagian border isikan 0, dan pada Alt ketikkan logo websiteku atau nama website nama anda Simpan file index.php dan style.css tekan CTRL + S, kemudian lihat previewnya tekan F12 atau refresh browser anda tekan F5.
Membuat Menu Navigasi website file index.php, kemudian ketikkan script berikut dan letakkan di atas </body> <div id="navigasi"></div> Sekarang kita akan mengatur CSS untuk navigasinya. Klik icon New CSS Rule, isi pengaturannya sebagai berikut : Selector Type : Advanced (Ids, pseudo-class selectors) Selector : #navigasi Define in : style.css Setelah muncul CSS Rule Definition for #navigasi in style.css, isikan pengaturannya sebagai berikut : Background: Background image : klik browse pilih bg-nav.jpg dalam folder images Repeat : no-repeat Box : Width : 860 pixel Float : Left Height : 35 pixel Pada bagian padding hilangkan centang same for all, left :20 pixel dan right: 20 pixel Pada bagian margin centang same for all isikan 0 pixel Jika sudah klik ok, simpan file index.php dan style.css. Selanjutnya pada Design View, klik di dalam Menu Navigasi kemudian klik Insert > Table
LANJUTAN Setelah muncul jendela Table, isikan pengaturannya sebagai berikut : Rows : 1 Columns : 4 Table Width : kosongkan saja Border Thickness : kosongkan / delete saja. Cell Padding : 5 Cell Spacing : 5 Jika sudah klik ok. memberikan link pada menu tersebut, caranya blok tulisan Home => pada panel property cari kolom Link klik icon folder kemudian pilih file index.php
LANJUTAN mengubah warna link dari menu navigasi dengan mengatur CSS nya, caranya klik tulisan Home => klik icon New CSS Rule, isi pengaturannya sebagai berikut : Selector Type : Advanced (Ids, pseudo-class selectors) Selector : #navigasi a Define in : style.css Setelah muncul CSS Rule Definition for #navigasi a in style.css, isikan pengaturannya sebagai berikut : Type: Color : #FFFFFF Jika sudah klik Ok. Simpan file index.php dan style.css anda tekan CTRL + S, kemudian preview tekan F12
Membuat konten Websaite file index.php, kemudian ketikkan script berikut dan letakkan di atas </body> <div id="content-wrapper"> Klik icon New CSS Rule, isi pengaturannya sebagai berikut : Selector Type : Advanced (Ids, pseudo-class selectors) Selector : #content-wrapper Define in : style.css Setelah muncul CSS Rule Definition for #content-wrapper in style.css, isikan pengaturannya sebagai berikut : Background: Background color : #DDDDDD Box : Width : 860 pixel Float : Left Pada bagian margin centang same for all, isikan 0 pixel Pada bagian padding hilangkan centang same for all, isikan top: 0 pixel, bottom: 0 pixel, right: 20 pixel, left: 0 pixel Pilih file index.php, kemudian ketikkan script berikut dan letakkan di bawah <div id=”content-wrapper”> <div id="content"></div> Sehingga kodenya menjadi seperti berikut : <div id="content-wrapper"> <div id="content"></div> </div>
LANJUTAN Klik icon New CSS Rule, isi pengaturannya sebagai berikut : Selector Type : Advanced (Ids, pseudo-class selectors) Selector : #content Define in : style.css Setelah muncul CSS Rule Definition for #content in style.css, isikan pengaturannya sebagai berikut : Background: Background color : #FFFFFF Box : Width : 600 pixel Float : Left Pada bagian padding centang same for all, isikan 20 pixel Jika sudah klik ok, simpan file index.php dan style.css.
Membuat Sidebar Konten Pilih file index.php, kemudian ketikkan script berikut & letakkan dibawah diba <divid=”content”></div> <div id="sidebar"></div> Klik icon New CSS Rule, isi pengaturannya sebagai berikut : Selector Type : Advanced (Ids, pseudo-class selectors) Selector : #sidebar Define in : style.css Setelah muncul CSS Rule Definition for #sidebar in style.css, isikan pengaturannya sebagai berikut : Box : Width : 200 pixel Float : Left Pada bagian margin centang same for all, isikan 0 pixel Pada bagian padding centang same for all, isikan 10 pixel Jika sudah klik ok, simpan file index.php dan style.css. Hasil : <div id="content-wrapper"> <div id="content"></div> <div id="sidebar "></div> </div>
Membuat Footer Website Pilih file index.php, kemudian ketikkan script berikut dan letakkan di atas </body> <div id="footer"></div> Sekarang kita akan mengatur CSS untuk footer. Klik icon New CSS Rule, isi pengaturannya sebagai berikut : Selector Type : Advanced (Ids, pseudo-class selectors) Selector : #footer Define in : style.css Setelah muncul CSS Rule Definition for #footer in style.css, isikan pengaturannya sebagai berikut : Background: Background image : klik browse pilih footer.jpg dalam folder images Repeat : no-repeat Block: Text align : Center Box : Width : 860 pixel Float : Left Height : 80 pixel Pada bagian padding centang same for all, isikan 20 pixel Pada bagian margin centang same for all, isikan 0 pixel Jika sudah klik ok, simpan file index.php dan style.css.
LANJUTAN Pada Design View (dalam konten website anda) => judul konten anda. Untuk Merubah format judul konten anda caranya blok =>panel property => menu format pilih Heading 1. Untuk memberikan link pada judul konten caranya blok judul konten anda =>panel properti isikan link yang akan dituju, jika belum ada isikan dengan # saja. Di bawah judul anda bisa isikan gambar, tetapi sebelumnya pastikan gambar anda tempatnya dalam folder images, caranya Insert = > Image => pilih file gambar anda => klik ok. Untuk mengatur gambar anda silahkan atur pada panel property.
TERIMA KASIH