BAB IV
PENGGUNAAN INTERNET
A. Mengakses Halaman Web
Untuk mengakses internet dibutuhkan program baik untuk browsing, chating, FTP ataupun kegunaan yang lain. Program browser yang disediakan adlah Internet Explorer dan Mozilla Firefoxfungsi dan cara menggunakanya adalah sama. Berikut langkah-langkah sebagai berikut:
1. Buka browser dan perhatikan textbox alamat lalu ketik alamat halaman web yang ingin dituju. Contoh membuka situs http:// www.plasa.com.
2. Setelah alamat selesai ditulis silahkan tekan langsung tombol enter di keyboard.
3. Penekanan tombol enter akan menyebabkan blowser melakukan Loading alamat web yang akan dituju sehingga halamanya akan segera terbuka.
4. Ok anda sudah berhasinl melakukan pengaksesan halaman web, mudah bukan. Silahkan dicoba lagi sendiri.
B. Menggunakan Seacrh Engine
Search Engine merupakan situs yang berguna untuk membantu pencarian halaman web yang memuat sebuah topic tertentu. Search Engine sangat diperlukan karena tidak mungkin informasi yang sangat luas di internet dicari dengan melakukan numerisasi satu persat. Sehingga Search Engine berfungsi ibarat pembimbing atau gudang data yang menyimpan referensi situs penghuni dunia maya.
Banyak Search Engine yang ada tetapi yang paling terkenal dalah Google dan Yahoo. Google merupakan Search Engine nomor satu di dunia karena ringan, mudah dioperasikan dan mengakomodasi banyak bahasa-bahasadi dunia (bahkan bahasadaerah semisal bahasa jawa pun ada).
Untuk menggunakan Search Engine silahkan ikuti langkah-langkah berikut :
1. Pertama pastikan anda sudah berada di www.google.co.id.
2. Isikan kata kunci (keywords) pencarian di bagian textbox, kata kunci merupakan kata penunjuk tentang topic atau tema pencarian. Disini plenulis mencontohkan dengan mencari hal-hal yang berkaitan dengan computer.
3. Tekan tombol enter.
4. Selang beberapa menit kemudian kemudian, akan ada hasil, pencarian yang ditampilakan oleh google.
5. Apabila hasil pencarian banyak sekali, makak google akan memberikan indeks halaman hasil pencarian.
6. Untuk melihat situs dari daftar yang ada, silahkjan klik pada linksitus yang diingikan. Misalakan hendak menulils Info Komputer Online.
7. Setelah diklik maka akan muncul situs resmi dari semua data computer On line
8. Silahkan coba melakukan pencarian dengan Keyword yang lain.
C. Membuat Email
Email adalah fasilitasdi internet yang sangat penting, dengan email andaj akan mengirim pesan kepada teman atau saudara wlalaupun beradadi luar negeri sekalipun. Selain itu yang membuate-mail banyak digunakan adalah waktu kirimnya yang tidak memerlukan waktuyang lama. Karena begitu pesan diirim langsung sampai alamat.
Untuk membuat e-mail, silahkan ikuti langkah-langkah berikut :
1. Buka sebuah situs penyelanggara email, disini dicontohkan dengan http://www.yahoo.com lalu klik tombol Sign In.
2. Setelah melakukan langkah diata maka, langkah selanjutnya silahkan token tombol Sign Up untuk melakukan pendaftaran.
3. Silahkan isi data pada lembar pendaftaran uamg sudah tersedia.
4. Setelah melakukan verifikasi (mencocokkan tulisan dengan gambar tertentu dihalaman yang diacak). Maka klik I Agree untuk meneruskan lpembuatan e-mail.
5. Apabila ada kesalahan selama peoses pengisian data edentitas pribadi, yahoo akan memberikan peringatan dan meminta anda untuk melakukan pengecean lagi. Pada data-data yang telah di masukkan.
6. Silahkan ganti ID Yahoo anda dengan nama lain misalnya “Email_Cici” dan melakukan proses Verifikasi lalu klik tombol Submit untuk kembali melanjutkan proses pembuatan email.
7. Apabial tidak ada masalah lagi, maka yahoo akan memberikan anda bahwa email sudah dibuat.
8. Nah, selesai coba praktekan dengan data anda, sehingga anda memiliki email sendiri.
D. Menggunakan E-Mail
Email diguankan untuk mengirim dan menerima / melihat informasi, penggunaan email sangatlah mudah tetapi anda harus belajar terlebih kahulu bagaimana cara menggunakanya, silahkan ikutil langkah-langkah berikut ini :
1. Pertama buka dulu situs penyedia layanan email yang anda muliki(contoh yahoo di atas), lalu isikan alamat email (ID) dan password (kata kunci) yang telah didapatkan ketika membuat sebuah email.
2. Tekan tombol Sign In untuk membuka email anda, maka anda akn masuk ke halamanmuka dari yahoo group anda. Kalau anda ingin mengirim email. Silaklan klik mail.
3. Setelah anda klik Mial maka akan muncul tampilan dibawah ini, lalu klik tombol Go To My Mail lalu muncul tampilan email anda.
4. Jika anda ingin mengirim email, langkah selanjutnya adaah menekan tombol Compose / Kirim email sehingga akan terbuka jendela penyusunan text yang akan dikirim.
5. Ok, email sudah siap untuk dikirim, silahkan tekan tombol send yang berguna untuk mengirimemail ke halaman yang sudah dituliskan.
6. Setelah email terkirim, anda akn memperoleh keterangan dari yahoo mail yang menerangkan bahwa email sudah benar-benar dikirim.
7. Sekarang kita kita akan mengecek email yang sudahada di inbox email. Silahkan klik Check Mail, sehingga yahoo mail akan memperlihatkan email-email yang ada di inbox anda. Silahkan buka email yang anda inginkan. Selesai.
E. Chating Menggunakan mlRC (Internet Relay chat)
Chating (bercakap-cakap) merupakan fasilitasinternet yang paling banyak digunakan oleh pemakai. Program atau software yang digunakan utnuk chating diantaranya Yahoo Massangger (YM) cara melakukan chating dengan mlRC adalah sebagai berikut :
1. Buka mlRC dengan cara menekan menu Start, program lalu klik mlRC
2. Maka akan muncul jendela utam mlRC yang berguan sebagai tempat untuk pengisian Full Name, e-mail address, Nickname, Alternative dan nama server. Untuk langsung menyambut ke server silahkan klik tombol Connnect To Server
3. Sehingga akan muncul teks-teks yang memnuhi jendela mlRC yang menandakan bahwa proses penyambungan ke server sedang dilakukan.
F. membuat Web dengan fasilitas Blogger
Blogger yaitu fasilitas yang ada di internet, diaman orang dapat membuat web / blogernya sendiri dan bisa langsung diakses untuk orang banyak.
Cara pembuatan blgooger begitu mudah kita tingga mengikuti langkah-langkah yang sudah ada seperti halnya membuat e-mail, yaitu:
1.pertama buat terlebih dahulu sebuah email seperti langkah-langkah diatas
2. lalu buka WWW.blogger.com lalu tekan enter maka akan menuju ke halaman blogger.
3. ketikkan alamat e-mail dan sandi yang telah kita buat sebelumnya lalu pulih sign in
4. maka dengan sendiri akan masuk ke halaman pembuatan acoun blogger kita, ikitu instruksi yang ada dari mulai pembuatan judul tampilan, alamat blgog dampai proses pemostingan.
5. lihat blogger anda dengan mengetikkan alamatnya misal : www.cici.blogspot.com.
Kamis, 13 Desember 2007
BAB III
BAB III
LATIHAN WEBSITE
Dalam latihan pembuatan website ini kita akn meggabungkan semua program yang pernah kita pelajari. Tapi sebelumkita membuat website dari awal kita sudah pernah membahas tentang langkah-langkah pembuatan website.
Dalam kasus dibawah ini kita diminta mendesign “seminar and training”
Ikuti langkah-langkah dibawah ini :
1. Merencanakan isi website ini meliputi :
Halaman muka/utama berisikan tentang ucapan selamat dating dan tampilan menu yang terdapat pada web tersebut.
Tentang kami berisikan seputarkegiatan dan tujuan diadakan seminar and training.
Artikel berisikan tentang gambar dan keterangan seputar kegiatan.
2. Merencanakan loyout Website
3. Setelah kita merencanakan layout maka kita akan mendesign sesuai tentang temanya dengan berbagai program yang pernah kita pelajari. Dengan menggabungkan kesemua program.
4. Buat sebanyak lembaran-lembaran yang dibutuhkan seperti yang direncanakan.
5. simpan lalu lihat hasilnya dengan menjalankan dengan F12.
Tugas :
1. Buatlah sebuah design yang dilengkapi dengan program adobe photoshop, image ready, dream weaver dan flash. Dengan tema web “Bencanan Alam”, buat design dan tulisan bahasa programnya (minimal 3 Tombol)
2. Buatlah sebuah design yang dilengkapi degan program Adobe photoshop, Image Reaqdy,Dreamweaver, dan Flash. Dengan tema Web “Perkembangan Desa”, Buat design dan tulisan bahasa programnya (minimal 3 halaman).
LATIHAN WEBSITE
Dalam latihan pembuatan website ini kita akn meggabungkan semua program yang pernah kita pelajari. Tapi sebelumkita membuat website dari awal kita sudah pernah membahas tentang langkah-langkah pembuatan website.
Dalam kasus dibawah ini kita diminta mendesign “seminar and training”
Ikuti langkah-langkah dibawah ini :
1. Merencanakan isi website ini meliputi :
Halaman muka/utama berisikan tentang ucapan selamat dating dan tampilan menu yang terdapat pada web tersebut.
Tentang kami berisikan seputarkegiatan dan tujuan diadakan seminar and training.
Artikel berisikan tentang gambar dan keterangan seputar kegiatan.
2. Merencanakan loyout Website
3. Setelah kita merencanakan layout maka kita akan mendesign sesuai tentang temanya dengan berbagai program yang pernah kita pelajari. Dengan menggabungkan kesemua program.
4. Buat sebanyak lembaran-lembaran yang dibutuhkan seperti yang direncanakan.
5. simpan lalu lihat hasilnya dengan menjalankan dengan F12.
Tugas :
1. Buatlah sebuah design yang dilengkapi dengan program adobe photoshop, image ready, dream weaver dan flash. Dengan tema web “Bencanan Alam”, buat design dan tulisan bahasa programnya (minimal 3 Tombol)
2. Buatlah sebuah design yang dilengkapi degan program Adobe photoshop, Image Reaqdy,Dreamweaver, dan Flash. Dengan tema Web “Perkembangan Desa”, Buat design dan tulisan bahasa programnya (minimal 3 halaman).
BABII
BAB II
PERANCANGAN WEB
A. Merancang Desig Web
Utnuk mendesign web sibuhkan kegemaran tersendiri karma disini dibutuhkan merancang tampilan seindah mngkin dan memberi warna, animasi yang menarik, adapaun beberapa program yang digunakan seperti Drem weafer, adobe photoshop, Adobe Image Ready dan macromedia flash.
A.1. Macromedia Flash
Macromedia Falsh adalah sebuah program animasi yang telah banyak digunakan para animator untuk menghasilkan animasi yang profesional. Animasi dari program flash juga sangat bagus digunakan untuk perancangan sebuah web. Berikut adalh contoh pembuatan animasi.
Latihan “Membuat perubahan tulisan dari kecil ke besar”
Langkah membuat animasi:
1. Siapkan lembar kerja
2. Buatlah tulisan “MYWEB” dengan ukuran kecil.dengan menggunakan icon T yang ada di Tools dan ubah ukuran huruf dengan menggunaan Toolbar Propertise.
3. Pada time Line yang anda tentukan jarak untuk animasi
4. Setelah menentukan jarak anda klick kanan klick insert keyframe / create montion tween
5. Lakukan langkah tersebut sampai kebentuk atau animasiyang kita inginkan
6. Setelah selesai kita dapat menjalankan dengan cara enter atau ctrl+Enter dan hasilnya akan tampak.
7. Simpan file dengan nama file Hurufku,fla
A.2. Adhop Photoshop
Adobe photoshop ini sangat penting dan mungkin dengan adobe photoshop kita lebih mengenal lebih dekat dengan kegunaannya yan g sering kali disebut-sebut dengan editing photo / gambar atau untuk memanipulasi image. Kita dapat memanipulasi gambar kita sesuai dengan bentuk atau design yang kita inginkan, tapi juga adobe photoshop tidak hanya untuk image berbentuk photo tapi juga text dan gambar yang lain juga bisa membuat logo untuk suatu intansi/ intitusi/perusahaan. Sehingga tampilan web atau situs kita jadi lebih sempurna.
Disinai hanyla akan dibahas tentang bagaimana membuat design dengan menggunakan adobe photoshop. Rung alingkup adhop photoshop terdiri dari:
Tehnik – tehnik menggunakna tool
Tehnik ini yang akan digunakan untuk kita gunakan Mendesign Web
Perhatikan kasus dibawah ini:
“Designlah sebuah situs dengan menggunakan Adhobe Photoshop”
ada dua langkah yang bisa dilakukan untuk membuat desidn Web dari kasus diatas, yaitu:
A. Langkah yang terutama untuk menyelesaikan kasus diatas dengan membuat object secara terpisah adalah :
1. Membuat tombol-tombol yang diperlukan
a. siapkan lembar kerja dengan ketentuan sebagi berikut :
§ Widh = 100 pixel
§ Hight = 40 pixel
§ Resolution = 72 pixel/inch
§ Mode = RGB Color
§ Content = white
(catatan ukuran dan keentuan ini optional, tergantung dari design yang kita inginkan)
b. ubah warna background sesuai dengan yang diinginkan dengan menggunakan paint bucket / Gradient tool / Palete Collor.
c. Bebtuk dan beri manipulasi )bject atau text (T) yang sesuai dengan tombol yan gakan kita buat dengan effect-efect sebagai berikut :
· Drop shadow
· Inner shadow
· Outher Glow
· Bevel and Emboss
· Satin, dll.
d. Hasilnya kita simpan dengan Tombol1.html (safe for web) dan Tombol1.psd (save as).
2. Membuat Tampilan atas Web.
a. Siapkan lembar kerja dengan ketentuan sebagai berikut :
§ Widh = 800 pixel
§ Hight = 150 pixel
§ Resolution = 72 pixel/inch
§ Mode = RGB Color
§ Content = Transparent
(catatan ukuran dan keentuan ini optional, tergantung dari design yang kita inginkan)
b. langkah selanjutnya sama dengan diatas dengan effect-efect baik tulidan nya atau dengan objectnya.
c. Untuk background bisa kitagunakan bentuk sendiri dengan komponen yang di toolbox atau sisipkan Gamba.
Ini adalah tampilan atas yang menggunakan langkah b:
d. Hasilnya kita simpan dengan Judul.html (safe for web) dan Judul.psd (save as).
3. Hasil dari simpanan design tadi akan kita gunakan dengan menggabungkan dengan program macromedia dream weafer.
B. Langkah yang terutama untuk menyelesaikan kasus diatas dengan membuat object secara seluruh adalah :
a. Siapkan lembar kerja dengan ketentuan sebagai berikut :
§ Widh = 800 pixel
§ Hight = 700 pixel
§ Resolution = 72 pixel/inch
§ Mode = RGB Color
§ Content = White
(catatan ukuran dan keentuan ini optional, tergantung dari design yang kita inginkan)
b. Ubah warna background sesuai dengan yang diinginkan dengan menggunakan Paint Bucket / Gradient Tool/ pallete color.
c. Bentuk dan beri manipulasi Object atau Text yang sesuai dengan tombol yang akan kita buat dengan effect-efect sebagai berikut :
· Drop shadow
· Inner shadow
· Outher Glow
· Bevel and Emboss
· Satin, dll.
d. Hasilnya kita simpan dengan home.html (safe for web) dan Home.psd (save as).
Latihan
Design halaman web dengan menggabungkan beberapa gambar dan logo yang dibuat di adobe photoshop serta beri effect-efect yang memprcantik tampilan. Gambar dan tulisan.
A.3. Adobe Image Ready
tahu Adobe Image Ready adalah program yang biasanya satu paket dengan adobe photoshop. Image ready sering kita gunakan untuk mengkonversi design web yang kita buat dari program adobe photoshop secara keseluruhan dan kita akan mengubah atau memisahkan/ memotong design web sesuai dengan bentuk yang lebih kecil dengan perluasan HTML. Dan kita hanya bisa mengatur design tetapi kita juga bisa memberikan Rolovers Palete yaitu perntian tampilan tombol atau text yang berbeda warna saat di access di stitus (dala bentuk HTML) sehingga tampilan situs kita lebih menarik.
Tampilan atau komponen-komponen pada tahu Adobe Image Ready tidak jauh beda dengan Adobe photoshop karena memang keduanya adalah satu paket. Dalam kesempatan ini kita akan melakukan pemisahan dan membuat design kita dalam bentuk HTML.
Ikuti langkah-langkah dibawah ini:
a. Buka atau siapkan design keseluruhan kita yang akan kita alihkan ke program Adobe Image Ready. Kita juga bila melakukan dengan mentransfer langsung dari adobe photoshop dengan Tool yang terdapat di photoshop.
b. Kita mulai memisahkan atau memotong-motong design sesuai dengan keinginan dan bgian-bagian yang telah ditentukan, seperti tombol-tombol dan yang lainya. Dengan menggunakan tool yaitu Slice Tool. Lalu simpan degan Save Optimazed As dengan nama file Webku.
c. Membuat Rollover dengan memilih object/bagian yang akan dibuat rollover.
Klik pada pallete rollover klick kanan add rollover state.
d. Sehingga dihasilkan ini dapa t terlihat dalam bentuk html, lalu simpan kembali dengan Save Optomazed As.
Tugas.
Buatlah design bertema “pendidikan” dari adobe photoshop dan image ready serta dengan rollover image pada tombol navigator.
A.4. Macromedia Drem Weaver
Maccromedia Dream Weaver adlah program aplikasi web editor terpopuler saat ini. Selain tampilan yang lebih menarik, kemampuan dan fitur-fitur baru akan memudahkan para emakai untuk menciptakan halaman-halaman web dengan cepat dan mudah tanpa harus berlama-lama menuliskan baris-baris kode HTML. Salah satu kelebihan dream weaver adalah memiliki kemampuan uang mendukung pemrograman script server side seoerti Active Server Page (ASP), Java Server Page (JSP) Coldfusion dll.
A.4.1. Workspace Dream Weaver.
Keterrangan :
1. Menu Bar
Berisiakan tentang kumpulan menu-menu yan gakan kita gunakan.
2. Docement Toolbar
Berisikan tentang kumppulan tool/icon yang digunakan halaman website.
3. Insert Bar
Berisikan tombol / icon yang digunakan untuk memasukkan object dalam Web.
4. Panel Groups
Berisikan panel-panel dari berbagai fungsi dream weaver seperti design, code design, application Tag inspector dll.
5. Property Inspector
Berisikan tentang pengaturan – pengaturan untuk diterapkan dalam suatu object sehingga isi dari property inspector ini akan berubah sesuai dengan object yang sedang aktif.
6. Document Windows
Ruang kerja dream weaver untuk mendesign website.
A.4.2. Bekerja Dengan Table
1. Klick panel/menu insert plih Table kemusian tntukan jumnlah kolom (coloum) dan baris (row) lalu ok.
Catatan :
v Insert Table : membuta table
v Merge Cells : menggabungkan table (baris/kolom)
v Split Cells : menambahkan / menyisipkan table (baris/kolom)
v Delete Row/kolom : menghapus kolom atau baris.
2. Atur table baik kolom maupun baris sesuai dengna kebutuhan/design.
3. Anda bisa menyisipkan gambar dari design yang kita buat dari adobe photosop atau langsung dari dreamweaver.
a. Langsung dari Dreamweaver.
Untuk menambah animasi dari bahasa nya klick panel Design ang code. Lalu ketik rumus :
lalu simpan file tersebut dengan bentuk file HTML.
Untuk melihat web hasil design kita bisa menggunakan tombol F12 atau Preview.
b. Mengambil Object atau gambar dari adobe photoshop
· Siapkan lembar kerja dengan table dan atur.
· Ambil gambar dari insert image ambil gambar OK atur sehingga tampil menarik. Gambar yang kita masukkan ini yang pernah kita potong di Image Ready. Lalu simpan file dedalam bentuk file HTML.
Untuk melihat web hasil design kita bisa menggunakan tombol F12 atau Preview.
c. Membuat tombol degan flash button.
Untuk membuat tombolTombol juga bisa kita gunakan yang tersedia di dreamweaver, caranya dari insert pilih interactive pilih image pilih flash button.
Lalu pilih bentuk tombol nya dan beri nama tombol lalu ok.
A.4.3. Bekerja dengan Layer
Design dengan layer tidask jauh beda, yang membedakan hanya tidak menggunakan table tetapi designdengan layer. Langkah yang dilakukan adalah dari menu insert pilih layer.
Disamping adalah bentuk dari layer yang akan digunakan untuk designweb. Biasanya digunakan untukmenyisipkan gambar atau text agar mudah mengatur.
Jadi design dengan tabel maupun dengan layer sama saja bahkan kita bisa menggunakan keduanya agar design kita mudah dan menarik.
PERANCANGAN WEB
A. Merancang Desig Web
Utnuk mendesign web sibuhkan kegemaran tersendiri karma disini dibutuhkan merancang tampilan seindah mngkin dan memberi warna, animasi yang menarik, adapaun beberapa program yang digunakan seperti Drem weafer, adobe photoshop, Adobe Image Ready dan macromedia flash.
A.1. Macromedia Flash
Macromedia Falsh adalah sebuah program animasi yang telah banyak digunakan para animator untuk menghasilkan animasi yang profesional. Animasi dari program flash juga sangat bagus digunakan untuk perancangan sebuah web. Berikut adalh contoh pembuatan animasi.
Latihan “Membuat perubahan tulisan dari kecil ke besar”
Langkah membuat animasi:
1. Siapkan lembar kerja
2. Buatlah tulisan “MYWEB” dengan ukuran kecil.dengan menggunakan icon T yang ada di Tools dan ubah ukuran huruf dengan menggunaan Toolbar Propertise.
3. Pada time Line yang anda tentukan jarak untuk animasi
4. Setelah menentukan jarak anda klick kanan klick insert keyframe / create montion tween
5. Lakukan langkah tersebut sampai kebentuk atau animasiyang kita inginkan
6. Setelah selesai kita dapat menjalankan dengan cara enter atau ctrl+Enter dan hasilnya akan tampak.
7. Simpan file dengan nama file Hurufku,fla
A.2. Adhop Photoshop
Adobe photoshop ini sangat penting dan mungkin dengan adobe photoshop kita lebih mengenal lebih dekat dengan kegunaannya yan g sering kali disebut-sebut dengan editing photo / gambar atau untuk memanipulasi image. Kita dapat memanipulasi gambar kita sesuai dengan bentuk atau design yang kita inginkan, tapi juga adobe photoshop tidak hanya untuk image berbentuk photo tapi juga text dan gambar yang lain juga bisa membuat logo untuk suatu intansi/ intitusi/perusahaan. Sehingga tampilan web atau situs kita jadi lebih sempurna.
Disinai hanyla akan dibahas tentang bagaimana membuat design dengan menggunakan adobe photoshop. Rung alingkup adhop photoshop terdiri dari:
Tehnik – tehnik menggunakna tool
Tehnik ini yang akan digunakan untuk kita gunakan Mendesign Web
Perhatikan kasus dibawah ini:
“Designlah sebuah situs dengan menggunakan Adhobe Photoshop”
ada dua langkah yang bisa dilakukan untuk membuat desidn Web dari kasus diatas, yaitu:
A. Langkah yang terutama untuk menyelesaikan kasus diatas dengan membuat object secara terpisah adalah :
1. Membuat tombol-tombol yang diperlukan
a. siapkan lembar kerja dengan ketentuan sebagi berikut :
§ Widh = 100 pixel
§ Hight = 40 pixel
§ Resolution = 72 pixel/inch
§ Mode = RGB Color
§ Content = white
(catatan ukuran dan keentuan ini optional, tergantung dari design yang kita inginkan)
b. ubah warna background sesuai dengan yang diinginkan dengan menggunakan paint bucket / Gradient tool / Palete Collor.
c. Bebtuk dan beri manipulasi )bject atau text (T) yang sesuai dengan tombol yan gakan kita buat dengan effect-efect sebagai berikut :
· Drop shadow
· Inner shadow
· Outher Glow
· Bevel and Emboss
· Satin, dll.
d. Hasilnya kita simpan dengan Tombol1.html (safe for web) dan Tombol1.psd (save as).
2. Membuat Tampilan atas Web.
a. Siapkan lembar kerja dengan ketentuan sebagai berikut :
§ Widh = 800 pixel
§ Hight = 150 pixel
§ Resolution = 72 pixel/inch
§ Mode = RGB Color
§ Content = Transparent
(catatan ukuran dan keentuan ini optional, tergantung dari design yang kita inginkan)
b. langkah selanjutnya sama dengan diatas dengan effect-efect baik tulidan nya atau dengan objectnya.
c. Untuk background bisa kitagunakan bentuk sendiri dengan komponen yang di toolbox atau sisipkan Gamba.
Ini adalah tampilan atas yang menggunakan langkah b:
d. Hasilnya kita simpan dengan Judul.html (safe for web) dan Judul.psd (save as).
3. Hasil dari simpanan design tadi akan kita gunakan dengan menggabungkan dengan program macromedia dream weafer.
B. Langkah yang terutama untuk menyelesaikan kasus diatas dengan membuat object secara seluruh adalah :
a. Siapkan lembar kerja dengan ketentuan sebagai berikut :
§ Widh = 800 pixel
§ Hight = 700 pixel
§ Resolution = 72 pixel/inch
§ Mode = RGB Color
§ Content = White
(catatan ukuran dan keentuan ini optional, tergantung dari design yang kita inginkan)
b. Ubah warna background sesuai dengan yang diinginkan dengan menggunakan Paint Bucket / Gradient Tool/ pallete color.
c. Bentuk dan beri manipulasi Object atau Text yang sesuai dengan tombol yang akan kita buat dengan effect-efect sebagai berikut :
· Drop shadow
· Inner shadow
· Outher Glow
· Bevel and Emboss
· Satin, dll.
d. Hasilnya kita simpan dengan home.html (safe for web) dan Home.psd (save as).
Latihan
Design halaman web dengan menggabungkan beberapa gambar dan logo yang dibuat di adobe photoshop serta beri effect-efect yang memprcantik tampilan. Gambar dan tulisan.
A.3. Adobe Image Ready
tahu Adobe Image Ready adalah program yang biasanya satu paket dengan adobe photoshop. Image ready sering kita gunakan untuk mengkonversi design web yang kita buat dari program adobe photoshop secara keseluruhan dan kita akan mengubah atau memisahkan/ memotong design web sesuai dengan bentuk yang lebih kecil dengan perluasan HTML. Dan kita hanya bisa mengatur design tetapi kita juga bisa memberikan Rolovers Palete yaitu perntian tampilan tombol atau text yang berbeda warna saat di access di stitus (dala bentuk HTML) sehingga tampilan situs kita lebih menarik.
Tampilan atau komponen-komponen pada tahu Adobe Image Ready tidak jauh beda dengan Adobe photoshop karena memang keduanya adalah satu paket. Dalam kesempatan ini kita akan melakukan pemisahan dan membuat design kita dalam bentuk HTML.
Ikuti langkah-langkah dibawah ini:
a. Buka atau siapkan design keseluruhan kita yang akan kita alihkan ke program Adobe Image Ready. Kita juga bila melakukan dengan mentransfer langsung dari adobe photoshop dengan Tool yang terdapat di photoshop.
b. Kita mulai memisahkan atau memotong-motong design sesuai dengan keinginan dan bgian-bagian yang telah ditentukan, seperti tombol-tombol dan yang lainya. Dengan menggunakan tool yaitu Slice Tool. Lalu simpan degan Save Optimazed As dengan nama file Webku.
c. Membuat Rollover dengan memilih object/bagian yang akan dibuat rollover.
Klik pada pallete rollover klick kanan add rollover state.
d. Sehingga dihasilkan ini dapa t terlihat dalam bentuk html, lalu simpan kembali dengan Save Optomazed As.
Tugas.
Buatlah design bertema “pendidikan” dari adobe photoshop dan image ready serta dengan rollover image pada tombol navigator.
A.4. Macromedia Drem Weaver
Maccromedia Dream Weaver adlah program aplikasi web editor terpopuler saat ini. Selain tampilan yang lebih menarik, kemampuan dan fitur-fitur baru akan memudahkan para emakai untuk menciptakan halaman-halaman web dengan cepat dan mudah tanpa harus berlama-lama menuliskan baris-baris kode HTML. Salah satu kelebihan dream weaver adalah memiliki kemampuan uang mendukung pemrograman script server side seoerti Active Server Page (ASP), Java Server Page (JSP) Coldfusion dll.
A.4.1. Workspace Dream Weaver.
Keterrangan :
1. Menu Bar
Berisiakan tentang kumpulan menu-menu yan gakan kita gunakan.
2. Docement Toolbar
Berisikan tentang kumppulan tool/icon yang digunakan halaman website.
3. Insert Bar
Berisikan tombol / icon yang digunakan untuk memasukkan object dalam Web.
4. Panel Groups
Berisikan panel-panel dari berbagai fungsi dream weaver seperti design, code design, application Tag inspector dll.
5. Property Inspector
Berisikan tentang pengaturan – pengaturan untuk diterapkan dalam suatu object sehingga isi dari property inspector ini akan berubah sesuai dengan object yang sedang aktif.
6. Document Windows
Ruang kerja dream weaver untuk mendesign website.
A.4.2. Bekerja Dengan Table
1. Klick panel/menu insert plih Table kemusian tntukan jumnlah kolom (coloum) dan baris (row) lalu ok.
Catatan :
v Insert Table : membuta table
v Merge Cells : menggabungkan table (baris/kolom)
v Split Cells : menambahkan / menyisipkan table (baris/kolom)
v Delete Row/kolom : menghapus kolom atau baris.
2. Atur table baik kolom maupun baris sesuai dengna kebutuhan/design.
3. Anda bisa menyisipkan gambar dari design yang kita buat dari adobe photosop atau langsung dari dreamweaver.
a. Langsung dari Dreamweaver.
Untuk menambah animasi dari bahasa nya klick panel Design ang code. Lalu ketik rumus :
lalu simpan file tersebut dengan bentuk file HTML.
Untuk melihat web hasil design kita bisa menggunakan tombol F12 atau Preview.
b. Mengambil Object atau gambar dari adobe photoshop
· Siapkan lembar kerja dengan table dan atur.
· Ambil gambar dari insert image ambil gambar OK atur sehingga tampil menarik. Gambar yang kita masukkan ini yang pernah kita potong di Image Ready. Lalu simpan file dedalam bentuk file HTML.
Untuk melihat web hasil design kita bisa menggunakan tombol F12 atau Preview.
c. Membuat tombol degan flash button.
Untuk membuat tombolTombol juga bisa kita gunakan yang tersedia di dreamweaver, caranya dari insert pilih interactive pilih image pilih flash button.
Lalu pilih bentuk tombol nya dan beri nama tombol lalu ok.
A.4.3. Bekerja dengan Layer
Design dengan layer tidask jauh beda, yang membedakan hanya tidak menggunakan table tetapi designdengan layer. Langkah yang dilakukan adalah dari menu insert pilih layer.
Disamping adalah bentuk dari layer yang akan digunakan untuk designweb. Biasanya digunakan untukmenyisipkan gambar atau text agar mudah mengatur.
Jadi design dengan tabel maupun dengan layer sama saja bahkan kita bisa menggunakan keduanya agar design kita mudah dan menarik.
INTERNET & PERANCANGAN WEB
BAB I
INTERNET DAN WEB SITE
A. INTERNET
A.1. Pengertian Internet
Internet berasal dari kata Interconection networking yang secara bahasa bermakna jaringan yang saling berhubungan, disebut demikian, karena internet merupakan jaringan computer-komputer diseluruh dunia yang saling berhubungan dengan bantuan jalur telekomunikasi. Untuk tersambung kedalam jaringan computer harus terhubung dengan ISP ( Internet Service Provider) sebagai penyedia layanan. ISP yang sekarang tersedia di daerah kita sekarang diantaranya : Telkomnet Instan, VIP Net, Speedy, Telkom Wasantara net dan sebagainya.
A.2. Sejarah Internet
Berikut sejarah kemunculan dan perkembangan internet. Sejarah internet dimulai pada tahun 1969 ketika Departemen Pertahanan Amerika, U.S. Defernse Advanced Research Projects Agency (DARPA) memutuskan untuk mengadakan riset tentang bagaiman caranya menghubungkan sejumlah computer sehingga membentuk jaringan organic. Program riset ini dikenal dengn nama ARPANET. Pada 1970, sudah lebih dari 10 komputer yan gberhasil dihubungkan satu sama lainya sehingga mereka bias saling berkomunikasi dan membentuk sebuah jaringan lain sehingga mereka bias saling berkomunikasi dan membetuk sebuah jaringan.
Tahun 1972 Roy Tomlinson berhasil menyempurnakn program e-mail yang ia ciptakan setahun yang lalu untuk ARPANET. Program e-mail ini begitu mudah sehingga langsung menjadi popular. Pada than yang sama, icon @ juga diperkenalkan sebagai lambing penting yang menunjukan “at” atau “pada”. Tahun 1973, jaringan computer ARPANET mulai dikembangkan keluar Amerika Serikat. Komputer University Colelege di London merupakan computer pertama yang ada diluar Amerika Serikat. Yang menjadi anggota jaringan APARNET. Pada tahun yang sama, dua ahli computer yakni Vinton Cerf dan Bob Kahn mempresentasikan sebuah gagasan yang lebih besar, yang menjadi cikal bakal pemikiran internet. Ide ini dipresentasikan untuk pertama kalinua di Universitas Sussex.
Hari bersejarah berikutnya adalah tanggal 26 Maret 1976, ketika Ratu Inggris berhasil mengirimkan e-mail dari Royal Signals anf Radar Estableshment di Malvern. Setahun kemudian sudah lebih dari seratus komputer yang bergabung di APARNET membentuk sebuah jaringan atau network. pada 1979, Tom Truscott, Jim Ellis dan Steve Bellovin menciptakan newsgrups pertama yang diberi nama USENET . tahun 1981 Franc Telecom menciptakan gebrakan dengan menciptkan telpon televise pertama, dimana orang bisa saling menelpon sambil berhubungan dengan video link.
Karena computer yang membentuk jaringan semakin hari semakin banyak, maka diburujkan sebuah protokol resmi yang adiakui oleh semua jaringan, pada thun 1982 dibentuk Transmition Control Protocol ata TCP dan Internet Protocol atau IP yang kita kenal semua. Sementara itu di Eropa muncul jaringan computer tandingan yang dikenal sengan Eunet, yang menyediakan jasa jaringan computer di Negara-negara Belanda, Inggris, Denmark dan Swedi. Jaringan Eunet menyediakan jasa e-mail dan newsgroup USENET.
Untuk menyeragamkan alamat di jaringan computer yang ada, maka pada tahun 1984 diperkenalkan system nama domain, yang kini kita kenal dengan DNS atau Domain Name System. Computer yang tersambung dengan jaringan yang ada sudah melebihi 1000 komputer lebih. Pada 1987 jumlah computer yang tersambung ke jaringan melinjak 10 kali lipat menjadi 10.000 lebih.
Tahun 1988 arko Oikarinen dari Finland menemukan dan sekaligus memperkenalkan IRC atau Internet Relay Chat. Setahun kemudian jumlah computer yang saling berhubungan kembali melonjak 10 kali lipat dalam setahun. Tak kurang dari 100.000 komputer kini membemtuk sebuah jaringan. Tahun 1990 adalah tahun yang paling bersejarah. Ketika Tem Berners Lee menemukan program editor dan browser yang bisa menjelajah antara satu computer dengan computer yang lainya. Yang membentuk jaringan itu. Program inilah yang disebut www atau Worl Wide Web.
Tahun 1992 komputer yang saling tersambung membentuk jaringan sudah melampaui sejuta komute, dan ditahun yang sama muncul istilah surfing the internet. Tahun 1994 situs internet telah tumbuh menjadi 3000 alamat halamn. Dan untuk pertama kalinya virtual shoping atau e-retail muncul di internet. Dunia langsung berubah . ditahun yang sama yahoo! Didiriakan, yang juga sekaligus kelahiran Netscape Navigator 1.0
A.3. Mangfaat Internet
Sevara umum ada banyak mangfaat yang dapat diperoleh apabila seseorang mempunuai akses ke internet. Berikut ini sebagian dari apa yang tersedia di internet. 1. informasi untuk kehidupan pribadi : kesehatan, rekreasi , hobby, pengembangan pribadi, rohani dan social. 2. informasi untuk kehidupan profesionalk / pekerja : sains, teknologi, prdagangan, saham. Komoditas, berita bisnis, asosiasi bisnis. Berbagai forum komunikasi.
Satu hal yang paling menarik ialah keanggotaan internet tidak mengenal batas Negara, ras, kelas, ekonomi, ediologi atau factor-faktor lain yang biasanya dapt menghambat pertukaran pikiran. Internet adalah suatu komunitas dunia yang sifatnya sangat demokratis serta memiliki kode etik yang dihormati segenap anggotanya. Mangfaat internet terutama diperoleh melalui kerjasama antar pribadi atau kelompok tanpa mengenal batas jarak dan waktu. Untuk labih meningkatkan kualitas sumber kaua manusia di Indonesia, sudah waktunya para progesional indonesi memangfaatkan jaringan internet dan menjadi bagian dari masyarakat informasi dunia.
B. WEB SITU ATAU SITUS
B.1. Pengertian Web Site atau Situs.
Situs dapat diartikan sebagai kumpulan halaman-halaman yang digunakan unguk menampilkan informasi, gambar gerak, suara, dan atau gabungan dari semuanya baik yang bersifat statis maupun dinamis yang membentuk satu rangkaian bangunan yang saling terkait dimana masing-masing dihubungkan dengan link-link.
B.2. Unsure-Unsure Web Site atau Situs
Untuk membentuk situs atau web diperlukan beberapa unsur yang harus ada agar situs dapat berjalan dengan baik dan sesuai dengan yang diharapkan, beberapa unsure yang harus ada adalah :
a) Domain name
domain name atau biasa disebut nama domain adlah alamat permanen situs dunia internet yang digunakan untuk mengidentifikasi sebuah situs atau dengan kata lain domain name adalah alamat yang digunakan untik menemukan situs kita pada dunia internet. Istilah yang umum digunakan adalah URL. Contoh sebuah URL adalah http://WWW.Octa_haris.tripod.com dll.
b) Hosting
Hosting dapat diartikan sebagai ruangan yanhg terdapat dalam hardisk tempat menyimpan berbagai data, file-file, gambar dan lain sebagainya, yang akan ditampilakan di situs
c) Scrip / Bahasa progam
Adalah bahasa yang digunakn untuk menerjemahkan setiap perintah dalam situs yan g pada saat diakses .
d) Design Web
Setelah melakukan penyewaan domain dan hosting serta penguasaan scripts, unsure situs yang paling penting dan utama adalah design. Design web sangat menentukan kualitas dan keindahan situs design sangat mempengaruhi kepada penilaian pengunjung akan bagus tidaknya sebuah web situs.
e) Publikasi
Keberadaan situs tidak ada gunanya dibangun tanpa dikunjungi atau dikenal oleh masyarakat atau pengunjungan internet, karena efektif tidaknya situs sangat tergantung dari besarnya pengunjung dan komentator yang masuk.
INTERNET DAN WEB SITE
A. INTERNET
A.1. Pengertian Internet
Internet berasal dari kata Interconection networking yang secara bahasa bermakna jaringan yang saling berhubungan, disebut demikian, karena internet merupakan jaringan computer-komputer diseluruh dunia yang saling berhubungan dengan bantuan jalur telekomunikasi. Untuk tersambung kedalam jaringan computer harus terhubung dengan ISP ( Internet Service Provider) sebagai penyedia layanan. ISP yang sekarang tersedia di daerah kita sekarang diantaranya : Telkomnet Instan, VIP Net, Speedy, Telkom Wasantara net dan sebagainya.
A.2. Sejarah Internet
Berikut sejarah kemunculan dan perkembangan internet. Sejarah internet dimulai pada tahun 1969 ketika Departemen Pertahanan Amerika, U.S. Defernse Advanced Research Projects Agency (DARPA) memutuskan untuk mengadakan riset tentang bagaiman caranya menghubungkan sejumlah computer sehingga membentuk jaringan organic. Program riset ini dikenal dengn nama ARPANET. Pada 1970, sudah lebih dari 10 komputer yan gberhasil dihubungkan satu sama lainya sehingga mereka bias saling berkomunikasi dan membentuk sebuah jaringan lain sehingga mereka bias saling berkomunikasi dan membetuk sebuah jaringan.
Tahun 1972 Roy Tomlinson berhasil menyempurnakn program e-mail yang ia ciptakan setahun yang lalu untuk ARPANET. Program e-mail ini begitu mudah sehingga langsung menjadi popular. Pada than yang sama, icon @ juga diperkenalkan sebagai lambing penting yang menunjukan “at” atau “pada”. Tahun 1973, jaringan computer ARPANET mulai dikembangkan keluar Amerika Serikat. Komputer University Colelege di London merupakan computer pertama yang ada diluar Amerika Serikat. Yang menjadi anggota jaringan APARNET. Pada tahun yang sama, dua ahli computer yakni Vinton Cerf dan Bob Kahn mempresentasikan sebuah gagasan yang lebih besar, yang menjadi cikal bakal pemikiran internet. Ide ini dipresentasikan untuk pertama kalinua di Universitas Sussex.
Hari bersejarah berikutnya adalah tanggal 26 Maret 1976, ketika Ratu Inggris berhasil mengirimkan e-mail dari Royal Signals anf Radar Estableshment di Malvern. Setahun kemudian sudah lebih dari seratus komputer yang bergabung di APARNET membentuk sebuah jaringan atau network. pada 1979, Tom Truscott, Jim Ellis dan Steve Bellovin menciptakan newsgrups pertama yang diberi nama USENET . tahun 1981 Franc Telecom menciptakan gebrakan dengan menciptkan telpon televise pertama, dimana orang bisa saling menelpon sambil berhubungan dengan video link.
Karena computer yang membentuk jaringan semakin hari semakin banyak, maka diburujkan sebuah protokol resmi yang adiakui oleh semua jaringan, pada thun 1982 dibentuk Transmition Control Protocol ata TCP dan Internet Protocol atau IP yang kita kenal semua. Sementara itu di Eropa muncul jaringan computer tandingan yang dikenal sengan Eunet, yang menyediakan jasa jaringan computer di Negara-negara Belanda, Inggris, Denmark dan Swedi. Jaringan Eunet menyediakan jasa e-mail dan newsgroup USENET.
Untuk menyeragamkan alamat di jaringan computer yang ada, maka pada tahun 1984 diperkenalkan system nama domain, yang kini kita kenal dengan DNS atau Domain Name System. Computer yang tersambung dengan jaringan yang ada sudah melebihi 1000 komputer lebih. Pada 1987 jumlah computer yang tersambung ke jaringan melinjak 10 kali lipat menjadi 10.000 lebih.
Tahun 1988 arko Oikarinen dari Finland menemukan dan sekaligus memperkenalkan IRC atau Internet Relay Chat. Setahun kemudian jumlah computer yang saling berhubungan kembali melonjak 10 kali lipat dalam setahun. Tak kurang dari 100.000 komputer kini membemtuk sebuah jaringan. Tahun 1990 adalah tahun yang paling bersejarah. Ketika Tem Berners Lee menemukan program editor dan browser yang bisa menjelajah antara satu computer dengan computer yang lainya. Yang membentuk jaringan itu. Program inilah yang disebut www atau Worl Wide Web.
Tahun 1992 komputer yang saling tersambung membentuk jaringan sudah melampaui sejuta komute, dan ditahun yang sama muncul istilah surfing the internet. Tahun 1994 situs internet telah tumbuh menjadi 3000 alamat halamn. Dan untuk pertama kalinya virtual shoping atau e-retail muncul di internet. Dunia langsung berubah . ditahun yang sama yahoo! Didiriakan, yang juga sekaligus kelahiran Netscape Navigator 1.0
A.3. Mangfaat Internet
Sevara umum ada banyak mangfaat yang dapat diperoleh apabila seseorang mempunuai akses ke internet. Berikut ini sebagian dari apa yang tersedia di internet. 1. informasi untuk kehidupan pribadi : kesehatan, rekreasi , hobby, pengembangan pribadi, rohani dan social. 2. informasi untuk kehidupan profesionalk / pekerja : sains, teknologi, prdagangan, saham. Komoditas, berita bisnis, asosiasi bisnis. Berbagai forum komunikasi.
Satu hal yang paling menarik ialah keanggotaan internet tidak mengenal batas Negara, ras, kelas, ekonomi, ediologi atau factor-faktor lain yang biasanya dapt menghambat pertukaran pikiran. Internet adalah suatu komunitas dunia yang sifatnya sangat demokratis serta memiliki kode etik yang dihormati segenap anggotanya. Mangfaat internet terutama diperoleh melalui kerjasama antar pribadi atau kelompok tanpa mengenal batas jarak dan waktu. Untuk labih meningkatkan kualitas sumber kaua manusia di Indonesia, sudah waktunya para progesional indonesi memangfaatkan jaringan internet dan menjadi bagian dari masyarakat informasi dunia.
B. WEB SITU ATAU SITUS
B.1. Pengertian Web Site atau Situs.
Situs dapat diartikan sebagai kumpulan halaman-halaman yang digunakan unguk menampilkan informasi, gambar gerak, suara, dan atau gabungan dari semuanya baik yang bersifat statis maupun dinamis yang membentuk satu rangkaian bangunan yang saling terkait dimana masing-masing dihubungkan dengan link-link.
B.2. Unsure-Unsure Web Site atau Situs
Untuk membentuk situs atau web diperlukan beberapa unsur yang harus ada agar situs dapat berjalan dengan baik dan sesuai dengan yang diharapkan, beberapa unsure yang harus ada adalah :
a) Domain name
domain name atau biasa disebut nama domain adlah alamat permanen situs dunia internet yang digunakan untuk mengidentifikasi sebuah situs atau dengan kata lain domain name adalah alamat yang digunakan untik menemukan situs kita pada dunia internet. Istilah yang umum digunakan adalah URL. Contoh sebuah URL adalah http://WWW.Octa_haris.tripod.com dll.
b) Hosting
Hosting dapat diartikan sebagai ruangan yanhg terdapat dalam hardisk tempat menyimpan berbagai data, file-file, gambar dan lain sebagainya, yang akan ditampilakan di situs
c) Scrip / Bahasa progam
Adalah bahasa yang digunakn untuk menerjemahkan setiap perintah dalam situs yan g pada saat diakses .
d) Design Web
Setelah melakukan penyewaan domain dan hosting serta penguasaan scripts, unsure situs yang paling penting dan utama adalah design. Design web sangat menentukan kualitas dan keindahan situs design sangat mempengaruhi kepada penilaian pengunjung akan bagus tidaknya sebuah web situs.
e) Publikasi
Keberadaan situs tidak ada gunanya dibangun tanpa dikunjungi atau dikenal oleh masyarakat atau pengunjungan internet, karena efektif tidaknya situs sangat tergantung dari besarnya pengunjung dan komentator yang masuk.
Langganan:
Postingan (Atom)
