Pemrograman Web : Modul 4. Membuat Menu Left

Modul 4. Membuat Menu Left
Ahmad Rizal Abidin, M.Kom

Menu Left, merupakan tampilan dari web yang dipergunakan untuk meletakkan control dari isi web, menu ini akan selalu tampil pada saat web di tampilkan. Adapun langkah-langkah membuatnya adalah :
1. Membuat Background dengan menggunakan Macromedia Flash 8, dengan bentuk gambar seperti berikut :
Gambar 1. Background Menu Left

Dari gambar di atas memiliki ukuran atau dimension = 150 widht x 400 px height, menggambarnya menggunakan Rectangle tool, dan rubahlah warna sesuai dengan keiinginan, setiap gambar terletak pada layer yang berbeda-beda. Simpanlah gambar tersebut dengan cara mengekspor dengan nama lefback.png pada folder flash. Dan folder tersebut terletak pada folder web yang akan dibuat.
2. Langkah selanjutnya adalah menyiapkan animasi dengan menggunakan Flash delapan seperti gambar berikut :
Gambar 2. Animasi Menu

Dari gambar di atas memiliki ukuran atau dimension = 120 widht x 50 px height, menggambarnya menggunakan Rectangle tool kotaknya, dan textool untuk tulisan adapun animasinya menggunakan Mask dan rubahlah warna sesuai dengan keiinginan, setiap gambar terletak pada layer yang berbeda-beda. Simpanlah gambar tersebut dengan cara mengekspor dengan nama tommenu.swf pada folder flash. Dan folder tersebut terletak pada folder web yang akan dibuat.a

3. Langkahnya selanjuntya adalah mengetikkan tag pada notepad dan simpan dengan nama leftmenu.html, adapun tagnya adalah seperti berikut :


<html>
<head>
<title>New Page 2</title>
<base target="main">
</head>
<body  background ="flash/lefback.png" BGCOLOR="#99999">
<Table border=1 width="120" height="10">
<tr>
<td>
<center><embed  src="flash/tomMENU.swf" 
	width="120" height="50"></embed>
</tr>
</td>
<tr>
<td>
<br>
<a href="home.htm">
<b><font color=#0000ff size="4">Home</font></b> </a>
</tr>
</td>
<tr>
<td>
<br> 
<a href="home.html">
<b><font color=#0000ff size="4">Shoping</font></b></a>
</tr>
</td>
<tr>
<td>
<br> 
<a href="home.html">
<b><font color=#0000ff size="4">DownLoad</font></b></a>
</tr>
</td>
<tr>
<td>
<br> 
<a href="home.html">
<b><font color=#0000ff size="4">Contact Us</font></b></a>
</tr>
</td>
<tr>
<td>
<br> 
<a href="home.html">
<b><font color=#0000ff size="5">Ebout Us</font></b></a>
</tr>
</td>
</table>
</body>
</html>

@Ahmad
Selamat Mencoba…

Materi Yang berhubungan :
Modul 7.
Modul 6.
Modul 5.
Modul 4.
Modul 3.
Modul 2.
Modul 1.

2 Responses

  1. pak tugas SIMBAD ambo la masuk pak???
    kami sedang beramai2 di warnet
    demi SIMBAD terpaksa lembur di warnet……

  2. menarik untuk dicoba sekaligus belajar utak-atik wp mudah2 an gak error.Thanks

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: