Script desain tampilan awal
“pembuatan website tiketing”
Ini adalah contoh script dari pemrograman pembuatan website
tiketing pemesanan tiket film online yang saya buat untuk memenuhi tugas UKK di
sekolah. Saya sharing ke temen-temen sekalian, semoga bermanfaat !!
Sebelum kalian melihat program yang saya rancang dengan bahasa
pemrograman php di software dreamweaver CS3. Coba liat tampilannya...
Cekidoott.....inilah
programnya....
<style type="text/css">
<!--
#apDiv1 {
position:absolute;
width:760px;
height:962px;
z-index:1;
left:
304px;
top:
11px;
}
.style1 {color: #FFFFFF}
.style4 {font-family: Gabriola; font-size: 24px; }
#apDiv2 {
position:absolute;
width:756px;
height:115px;
z-index:2;
left:
306px;
top:
74px;
}
#apDiv3 {
position:absolute;
width:200px;
height:115px;
z-index:3;
left:
7px;
}
#apDiv4 {
position:absolute;
width:200px;
height:115px;
z-index:3;
}
#apDiv5 {
position:absolute;
width:200px;
height:115px;
z-index:3;
}
#apDiv6 {
position:absolute;
width:200px;
height:115px;
z-index:3;
}
#apDiv7 {
position:absolute;
width:200px;
height:115px;
z-index:3;
}
#apDiv8 {
position:absolute;
width:375px;
height:67px;
z-index:3;
left:
244px;
top:
216px;
}
.style6 {font-size: 24}
.style7 {color: #FFFFFF; font-size: 24; }
#apDiv9 {
position:absolute;
width:295px;
height:38px;
z-index:3;
left:
79px;
top:
222px;
}
.style8 {
color:
#FF0000;
font-size:
18px;
}
#apDiv10 {
position:absolute;
width:297px;
height:41px;
z-index:3;
left:
461px;
top:
226px;
}
.style9 {color: #FF0000}
#apDiv11 {
position:absolute;
width:200px;
height:115px;
z-index:1;
}
#apDiv12 {
position:absolute;
width:1340px;
height:125px;
z-index:3;
left:
11px;
top:
954px;
background-image:
url(gambar3.jpg);
}
.style10 {
color:
#000000;
font-weight:
bold;
}
#apDiv13 {
position:absolute;
width:380px;
height:202px;
z-index:4;
left:
379px;
top:
734px;
background-color:
#000000;
background-image:
url(foto1.jpg);
}
#apDiv14 {
position:absolute;
width:380px;
height:239px;
z-index:4;
left:
379px;
top:
492px;
background-image:
url(foto1.jpg);
background-color:
#000000;
}
.style14 {
color:
#00FF00;
font-size:
16px;
font-weight:
bold;
}
.style15 {color: #00FF00; font-weight: bold; }
#apDiv15 {
position:absolute;
width:381px;
height:347px;
z-index:4;
left:
685px;
top:
282px;
}
.style16 {
color:
#FFFF00;
font-size:
24px;
font-weight:
bold;
}
#apDiv16 {
position:absolute;
width:382px;
height:247px;
z-index:5;
left:
381px;
top:
535px;
}
#apDiv17 {
position:absolute;
width:381px;
height:202px;
z-index:5;
left:
378px;
top:
762px;
}
.style18 {
font-size:
14px
}
.style22 {font-size: 16px; color: #00FF00; }
.style23 {font-size: 16px; color: #FFFFFF;}
.style26 {font-size: 16px; }
#apDiv18 {
position:absolute;
width:107px;
height:49px;
z-index:5;
top:
95px;
}
#apDiv19 {
position:absolute;
width:45px;
height:35px;
z-index:5;
left:
285px;
top:
115px;
}
#apDiv20 {
position:absolute;
width:264px;
height:230px;
z-index:5;
left:
333px;
top:
283px;
}
.style27 {
font-size:
24px;
}
#apDiv21 {
position:absolute;
width:200px;
height:115px;
z-index:6;
}
.style28 {
color:
#FFFF00;
font-weight:
bold;
}
a:link {
color:
#FF9999;
text-decoration:
none;
}
a:visited {
text-decoration:
none;
color:
#FFFF00;
}
a:hover {
text-decoration:
underline;
color:
#FF00FF;
}
a:active {
text-decoration:
none;
color:
#FF00FF;
}
.style29 {font-family: Gabriola; font-size: 24px;
font-weight: bold; }
-->
</style>
<div class="style1"
id="apDiv20">
<p
align="center" class="style27 style28">Login
Member</p>
<form
id="form1" name="form1" method="post"
action="login.php">
<table
width="244" border="0">
<tr>
<td
width="68"><span class="style9">Username</span></td>
<td
width="10">:</td>
<td
width="144"><label>
<input
type="text" name="username" id="username" />
</label></td>
</tr>
<tr>
<td><span
class="style9">Password</span></td>
<td>:</td>
<td><label>
<input
type="password" name="password" id="password"
/>
</label></td>
</tr>
<tr>
<td
colspan="2"> </td>
<td><label>
<input
type="submit" name="Submit" id="Submit"
value="Log in" />
</label></td>
</tr>
</table>
<p> </p>
</form>
<p> </p>
</div>
<img
src="movie-wallpaper-background-249.jpg" width="1341"
height="1076" />
<div class="style1"
id="apDiv12">
<p
align="center" class="style10">Copyright 2016 Film
Bioskop Mandala 22 Malang | Powered by Blogger and Google | Jadwal Bioskop |
Support Film Bioskop Terbaru</p>
<p
align="center" class="style10">Contact Us | Privacy
Policy | Disclaimer | Source</p>
<p
align="center" class="style10">Mandala 22 Films
Malang</p>
</div>
<div id="apDiv1">
<table
width="761" height="940" border="1">
<tr>
<td
width="193" height="58"
bgcolor="#000000"><div align="center"
class="style4"><strong><span
class="style1"><a href="index.php">Home</a></span></strong></div></td>
<td
width="182" bgcolor="#000000"><div
align="center" class="style29"><span
class="style1"><a href="news.php">News</a></span></div></td>
<td
width="171" bgcolor="#000000"><div
align="center" class="style29"><span class="style1"><a
href="reginfo.php">Registration</a></span></div></td>
<td
width="187" bgcolor="#000000"><div
align="center" class="style29"><span
class="style1"><a href="contact.php">Contact</a></span></div></td>
</tr>
<tr>
<td
colspan="4" bgcolor="#000000"><span
class="style7">
<marquee>
</marquee>
</span>
<div
class="style8" id="apDiv9"><marquee>Welcome to
this page</marquee></div>
<div
id="apDiv17">
<p
class="style15">HTM Mandala 22 films - Malang</p>
<p
class="style1"> Rp. 25.000 (Senin-Kamis)</p>
<p
class="style1">Rp. 30.000 (Jumat)</p>
<p
class="style1">Rp. 35.000 (Weekend/Libur) </p>
</div>
<div
id="apDiv16">
<p
class="style15">Kategori film (Rating) :</p>
<p><img src="Picture1.png" alt=""
width="198" height="57" /></p>
<p
class="style14">Malang Plaza</p>
<p
class="style23">Jl. KH. Agus Salim No. 28 Malang - Jawa
Timur</p>
<p
class="style23">Telp. (0341) 963 486</p>
</div>
<div
class="style9" id="apDiv10">
<marquee>Mandala 22 films
Malang</marquee></div></td>
</tr>
</table>
</div>
<div class="style6"
id="apDiv2"><img src="mandala22films.jpg"
width="754" height="155" /></div>
<div class="style16"
id="apDiv15">
<p>[UPDATE]
23 Februari 2016</p>
<table
width="362" height="203" border="0">
<tr>
<td
width="126"><div align="center"
class="style22">
<div
align="center">MOVIES</div>
</div></td>
<td
width="122"><div align="center"
class="style22">SHOWTIME</div></td>
<td
width="98"><div align="center"
class="style22">INFO</div></td>
</tr>
<tr>
<td
height="58"><div align="center"><img
src="0-london_love_story.jpg" width="68"
height="68" /></div></td>
<td><p align="center"
class="style18"><img src="jadwal.png"
width="108" height="65" /></p> </td>
<td><div align="center"><img
src="D.jpg" alt="" width="42" height="40"
/></div></td>
</tr>
<tr>
<td
height="101"><div align="center"><img
src="0.jpg" width="71" height="65"
/></div></td>
<td><p align="center"
class="style26"><img src="jadwal.png"
alt="" width="111" height="56" /></p> </td>
<td><div
align="center"><img src="D.jpg" alt=""
width="42" height="40" /></div></td>
</tr>
</table>
<p
class="style18"> </p>
<p
class="style18"> </p>
</div>
Tidak ada komentar:
Posting Komentar