Pages

Thursday, April 19, 2012

Membuat dan Memasukkan Logo/Gambar Header pada PageBreeze HTML Editor

Dalam membangun sebuah website atau blog, hampir tidak lepas dari logo/gambar yang tertera pada header blog/website tersebut. Bagi yang sudah mengetahui tentu saja tidak sulit untuk hal ini, tetapi bagi yang pemula tentu saja sangat sulit dilakukan, selain itu tata letak, ukuran gambar, posisi gambar dan lain-lain sering tidak sesuai. Dalam PageBreeze HTML editor sendiri, ukuran gambar yang akan kita masukkan harus sesuai, jika tidak tampilan website akan kacau atau tidak teratur.

Lepas dari hal tersebut di atas, seorang pemula kadang tidak dapat membuat gambar header, selain itu, walaupun kita dapat membuat gambar header, tetapi kita tidak memiliki software untuk membuat gambar. Namun melalui tutorial ini, anda dapat menggunakan beberapa gambar header gratis yang tersedia di internet misanya freewebheaders.

Cara Membuat Header
Bagi yang memiliki software pembuat gambar/header, header/gambar dapat dibuat dari program tersebut. Bagi yang tidak memiliki software pembuat gambar, dapat membuatya/mengunduhnya di beberapa website lain yang menyediakan gambar header secara gratis. Untuk membuat/mengunduh gambar header via freewebheader, klik disini, dan anda akan dibawah pada halaman berikut:


Klik pada Free Web Header (bagian yang dilingkari pada gambar di atas) dan geser cursor mouse ke halaman bawah website, akan muncul tampilan berikt:



Pilih salah satu header yang tersedia misalnya Cities-22924, klik pada Cities-22924, lalu akan muncul gambar berikut:


Arahkan kursor mouse pada gambar tersebut dan klik kanan, kira-kira tampilannya seperti gambar berikut:



Klik Save As untuk melakukan penyimpanan gambar pada komputer Anda (harap baca dulu syarat dan ketentuannya sebelum mengunduh/menyimpan dan menggunakan gambar tersebut).

Cara Memasukkan Gambar
Untuk memasukkan gambar, bukalah PageBreeze HTML editor atau halaman web yang anda buat dengan PageBreeze HTML Editor. Pastikan bahwa gambar yang anda download tadi tersimpan 1 folder dengan file halaman web yang anda buat jika tidak pindahkan gambar yang anda download tadi ke folder di mana file halaman web yang anda buat tersimpan. Hal ini mencegah agar gambar anda ikut terunggah otomatis dan dapat terlihat pada saat website anda diunggah ke website/hosting Anda. Tampilan halaman web dengan PageBreeze kira-kira sebagai berikut:


Hapus Tulisan pada header seperti gambar di atas dan pastikan bahwa kursor mouse berada pada kotak header, lalu klik pada Insert/Edit Graphic pada program PageBreeze HTML Editor Anda, seperti gambar berikut:

Klik pada gambar yang tersedia (yang telah didownload). Pada gambar ini nama filenya adalah 22924.jpg dan gambar akan tampil dalam Preview. Dalam kotak dialog ini, ada beberapa keterangan yang perlu Anda ketahui, yakni sebagai berikut:
  • List File of Type, adalah Daftar tipe file di antaranya adalah gif dan JPEG (gif & pg), jika Anda memilih tipe ini, maka file yang dapat anda sisipkan/masukkan adalah hanya yang berformat .gif dan .pg. Penulis memilih gif and JPEG.
  • Alternate Text, adalah teks alternatif untuk gambar yang anda sisipkan. Kadang-kadang teks ini akan muncul saat website anda diakses oleh pengunjung dan tidak dapat menampilkan gambar akibat koneksi internet lambat. Penulis memilih teks Selamat Datang.
  • Alignment adalah posisi gambar dimana gambar yang akan anda masukkan dalam posisi apa, misalnya posisi atas (top), posisi ke kiri (left), dan lain-lain. Penulis memilih top.
  • Border, adalah bingkai gambar, semakin tinggi nilai yang diberikan maka semakin besar bingkai pada gambar anda. Penulis memilih 0.
  • Horizontal spacing adalah spasi mendatar. Penulis memilih 0
  • Vertical spacing, adalah spasi tegak. Penulis memilih 0
  • Set width, untuk mengatur lebar gambar. Penulis memilih 800 Pixels.
  • Set height, untuk mengatur tinggi gambar. Penulis memilih 200 Pixels.
Kira-kira tampilan kotak dialog-nya sebagai berikut:



Selanjutnya Klik OK, maka tampilan halaman web yang dibuat sebagai berikut:


Gambar header berhasil dimasukkan dalam halaman web. Untuk mengatur kembali properties gambar header anda, anda dapat mengeklik gambar pada header 2 kali, maka kotak dialog akan muncul termasuk mengganti gambar dengan gambar lain. Namun jika ingin mengganti gambar, anda dapat mengganti saja file dalam folder dimana halaman web ada berada dengan nama file dan format yang sama, namun pastikan bahwa tinggi dan lebar gambar anda adalah sama dengan gambar pertama. Selamat Mencoba.

1 komentar:

  1. Agak ribed Gan, dasar newby jadinya lambat nih !

    ReplyDelete

Silahkan tinggalkan komentar Anda. Jangan menyertakan url/nama domain dalam isi komentar. Komentar Anda sebaiknya berhubungan dengan artikel yang dibahas. Url/blog yang mengandung unsur pornografi, pornoaksi, obat-obatan/resep obat, perdagangan senjata api/tajam, yang berhubungan dengan download MP3/MP4/Video, atau url/blog/website yang melanggar serta yang melakukan SPAM termasuk blog/web yang membajak isi dalam website ini tanpa menyertakan url www.naskah.net akan dihapus.