1. memasukan gambar pada layout
Tutorial cara membuat website statis (part 9) | Memasukkan gambar pada layout
Pada tutorial kali ini saya akan coba memberikan tutorial cara memasukkan gambar pada layout yang sudah kita buat pada tutorial sebelumnya. Cara ini sangat mudah dan simple sehingga saya sangat yakin softholic mania akan dengan mudah bisa mengikutinya.
Sebelum saya mulai memberikan tutorialnya, ada baiknya kita menyamakan persepsi dalam membuat website statis dahulu sehingga tidak terjadi kebingungan jika ada yang softholic mania ingin tanyakan untuk membuat website statis.
Persepsi yang harus kita samakan dahulu dalam membuat website statis :
- Website statis yang akan saya buat adalah website statis profil perusahaan listrik. Header dari website akan saya sediakan.
- Komponen utama dari website adalah HTML, CSS, Javascript.
- Isi dari website berupa text dan gambar
- Layout website dengan tabel
- Web browser yang dipergunakan adalah firefox
- Buat folder website, dimana pada folder website terdapat subfolder gambar dan script
Setelah panjang lebar membahas persamaan konseptual dalam membuat website kini saatnya kita mulai tutorialnya. Langkah pertama adalah softholic mania membuat layout seperti gambar 1.1
gambar 1.1
Jika softholic lupa atau bingung cara membuatnya, silahkan buka tutorial saya sebelumnya yang membahas tentang cara membuat layout website dengan menggunakan tabel.
Setelah softholic mania berhasil membuat layout tersebut masukkan gambar header yang sudah saya siapkan (download header.jpg | ukuran gambar 800px x 200px). Langkah-langkahnya :
- Copy gambar dengan nama “header.jpg” di dalam subfolder gambar pada folder website
- Masukkan gambar dengan mempergunakan tag HTML HTML <img> </img>
- Masukkan atrribut dan juga properties gambar pada tag HTML
<html>
<head>
<title>Perusahaan Listrik Softholic | Home</title>
</head>
<body>
<table border='1px' align='center' width='800px'>
<tr><td colspan='2' height='200px'><img
src='gambar/header.jpg' height='200px'
width='800px'</td></tr>
<tr><td colspan='2' height='25px'>Menu website</td></tr>
<tr><td width='200px' height='500px'>Sidebar
website</td><td width='500px'>isi
website</td></tr>
<tr><td colspan='2' height='100px'>Footer</td></tr>
</table>
</body>
</html>Jika softholic mania mengikuti script yang saya buat maka hasil yang didapat akan seperti gambar 1.2
gambar 1.2
Saya rasa tutorial cara memasukkan gambar (header) ke dalam layout sudah cukup. Pada tutorial berikutnya saya akan membahas cara membuat menu dan juga footer berserta isi web statis itu sendiri. Semoga tutorial kali ini cukup menjelaskan konsep cara membuat website statis kepada softholic mania.
Langkah Mudah cara memasang gambar animasi pada blog
Gambar animasi flash (*swf) mempunyai banyak kelebihan diantaranya, yang manjadi nilai tambah adalah ukuran file yang lebih kecil dan gambar cenderung lebih menarik, secara tidak langsung hal ini akan merangsang pengunjung untuk mengekliknya. Tetapi jika kita Memasang gambar animasi ini terlalu berlebihan juga kurang bagus, alangkah baiknya sesuai dengan kebutuhan.
Cara Membuat file animasi berformat swf (shock wave file), Saya kira sudah banyak yang memberikan tutorial bagaimana cara membuat file usil ini. Namun disini saya hanya ingin berbagi bagaimana cara memasang atau menampilkan obyek gambar animasi (*swf).
Untuk langkah memasang gambar animasi flash.swf di blog ikutilah langkah-langkah
di bawah ini :
2. Memasang Flash pada Blog Blogspot
1. Tentukan file yang ingin anda pasang, jika anda membuat sendiri hendaklah upload file tersebut kedalam hosting yang support swf, seperti geocities.com, maupun hosting anda pribadi.
2. Pilihlah salah satu link
3. Setelah masuk ke link tersebut langsung Anda Dapat membuat animasi Flash sesuai dengan Imajinasi kalian
4. Jika anda sudah menentukan url file swf tersebut, sekarang Anda tentukan alamat Url tujuan anda,
Setelah semua anda persiapkan, kemudian ikuti instruktur(step-demi stepnya)
lalu cara menambahkan gambar animasi ke blog dibawah ini:
Langkah selanjutnya adalah mencari tempat untuk mempaste kode
5. Loginlah ke Blogger
6. Pilih Tata Letak
7. Tambah Widget
8. Pilih Html/Script
9. Paste kode link yang temen-temen dapatkan
10. Save
Cara Lebih medah dalam membuat animasi flash
3. TABEL
BEKERJA DENGAN TABEL
Tabel digunakan untuk memformat data dalam posisi-posisi kolom dan baris.
Perpotongan antara baris dan kolom dinamakan sel, dan kita dapat
memasukkan data di dalam sel tersebut.
Memasukkan tabel
Untuk memasukkan tabel ke dalam halaman homepage, pertama-tama
letakkan kursor ke tempat yang diinginkan. Kemudian, pilihlah satu diantara 3
cara berikut ini :
1. Klik menu Insert – Table
BEKERJA DENGAN TABEL
Tabel digunakan untuk memformat data dalam posisi-posisi kolom dan baris.
Perpotongan antara baris dan kolom dinamakan sel, dan kita dapat
memasukkan data di dalam sel tersebut.
Memasukkan tabel
Untuk memasukkan tabel ke dalam halaman homepage, pertama-tama
letakkan kursor ke tempat yang diinginkan. Kemudian, pilihlah satu diantara 3
cara berikut ini :
1. Klik menu Insert – Table
2. Klik tombol “Insert table” pada Object Panel, kategori Common
.
3. Tekan shortcut key : Ctrl+Alt+T
Kemudian akan muncul kotak dialog Insert Table seperti ini :
Masukkan spesifikasi tabel yang diinginkan pada kotak dialog tersebut.
1. Isikan jumlah baris pada “Rows” dan jumlah kolom pada “Columns”.
2. Berikutnya, tentukan lebar tabel terhadap halaman. Pada contoh gambar
di atas, tabel yang akan dimasukkan berlebar 75 persen (“Width : 75
Percent”). Artinya, lebar tabel nantinya adalah 75 persen dari lebar
halaman. Jika menginginkan lebar tabel dalam satuan pixel (fixed size),
isikan jumlah pixel pada Width, kemudian gantilah kotak dropdown yang
bertuliskan Percent menjadi Pixel. Lebar tiap kolom nantinya dibagi sama
rata dari lebar tabel dan bisa di ubah-ubah sesuai keinginan.
3. Berikutnya, masukkan lebar border tabel yang diinginkan dalam satuan
pixel. Jika dikosongi maka dianggap 0 (nol) dan tabel tidak diberi border.
4. Jika diinginkan, masukkan Cell Padding dan Cell Spacing. Cell Spacing
artinya jarak antar sel dalam tabel, sedangkan Cell Padding artinya jarak
dari border sel sampai dengan isi sel. Setelah selesai, klik tombol OK. Jika
ingin membatalkan, tekan Cancel.
Setelah menekan tombol OK, maka tabel akan dimasukkan dalam halaman
Anda. Bentuknya kira-kira seperti ini (bisa berbeda-beda tergantung dari
spesifikasi yang Anda masukkan tadi) :
Saat ini, tabel dikatakan dalam keadaan terpilih (selected), yang ditandai
dengan adanya garis hitam tebal di sekeliling tabel, dan 3 buah kotak hitam
kecil yang disediakan untuk resizing. Seperti yang Anda lihat pada window
Object Properties, terdapat beberapa properti tabel yang disebutkan, antara
lain Rows (jumlah baris), Cols (jumlah kolom), W (lebar, width), H (tinggi,
height), CellPad (cell padding), CellSpace (cell spacing), Align, Border, Bg
Color (background color), Brdr Color (border color), Bg image (Bg image).
Anda dapat bereksperimen dengan mengubah-ubah properti-properti
tersebut. Caranya, isikan nilai (value) baru, kemudian tekan Enter.
2. FLASH
Tutorial membuat FLASH animasi tulisan dengan program Swishmax
1. Buka program Swish Max
2. Klik menu Modify lalu pilih Movie Properties
Kemudian ubah pixel (width & height) sesuai keinginan anda. Karena disini saya akan memasang animasi flash pada widget blog saya yang lebarnya 265 pixel, maka saya sesuaikan pada animasi flash yang akan saya buat, width 265 dan heightnya saya set jadi 75 pixel. Background color #310397 juga disesuaikan dengan warna background pada widget diblog saya, lanjut.
3. Lalu buat tulisan menggunakan text tool, disini saya tulis “Selamat Datang Di” dan “Mustguzz Blog” Lebih jelasnya lihat gambar dibawah
Keterangan gambar:
1. Pada garis kotak warna merah, anda bisa merubah properties font (tulisan), ukuran, warna, spasi, nama fontnya dsb.
2. Pada garis kotak warna ungu, itu adalah panel menu “Timeline”, scene dan layer si objek animasi.
3. Pada garis kotak warna hijau, itu adalah panel menu tool yang merupakan alat kerja anda.
4. Selanjutnya kita akan mulai membuat efek animasi pada text tersebut. Klik menu “Add Effect” yang ada disebelah panel menu “Timeline” (pojok kiri atas). Pilih Looping continuously, pilih pilihan efek yg sobat suka .
1. Masuk ke situs website cootext di www.cooltext.com lalu pilih desain logo dasar yang ingin anda edit sesuai selera anda. Ada banyak pilihan jenis logo standar yang bisa anda gunakan secara gratis.
2. Pilih-pilih konfigurasi logo anda dengan merubah settingan pada jenis huruf, besar kecil huruf, warna dasar, warna background, efek hurup, jenis file keluaran / output, warna-warna, dan lain sebagainya. Cooltext menggunakan standar warna RGB atau red green blue. Rubah angka-angka pada kotak yang telah disediakan untuk melihat kombinasi campuran warna rgb tadi.
3. Jika opsi-opsi yang anda pilih tadi sudah yakin maka selanjutnya anda bisa menggenerate render image untuk melihat gambar contoh hasil output. Umumnya anda akan antri untuk rendering image output anda jika saat itu ada orang lain yang secara bersamaan atau berbarengan dengan anda sedang render image.
4. Pilih edit this logo jika anda tidak puas dengan gambar hasil rendering gambar. Ulangi tahapan dan langkah nomor 1 samapai 3 hingga hasilnya dapat memuaskan anda melalui link "Edit this logo".
5. Jika semua sudah pasti, maka anda harus mendownload image atau gambar yang anda generate tadi. Gambar yang telah dirender akan mnghilang jika tidak didownload dalam tempo kurang dari 1 (satu) jam / 60 menit kurang.
SECARA SINGKAT
1. cara menambahkan gambar
a.pilih insert image pada menu insert
b.pilih file gambar
2. cara menambahkan file flash
a.pilih menu insert
b.pilih media
c.pilih flash
d. pilih file flash
3. cara menambahkan table
a. pilih menu insert
b. pilih tablee
c. tentukan banyaknya kolom dan baris tabel
4.cara menambahkan hyperlink
a. blok tulisan yang akan di link
b. piih hyperlink pada menu com
Tidak ada komentar:
Posting Komentar