Membuat Layout Toko Online Css ~ Sukabagiilmu || PHP MYSQ CSS Tutorial Desain Photoshop ILmu Komputer Troubleshooting

Salam Share Gan. .!!

Pada Artikel kali ini saya akan mencoba menjelaskan bagaimana cara Membuat Layout TokoOnline Css dengan tambahan aplikasi Photoshop untuk membuat tampak lebih menarik. Untuk membuat sebuah layout kita terlebih dahulu membuat sebuah desain awal seperti apa yang ingin kita buat dan seperti apa tampilan yang kita inginkan pada Web Site kita. Untuk artikel ini tampilan yang saya akan buat adalah seperti gambar dibawah ini.:

Ok untuk mempersingkat dan tidak membuat anda bosan saya akan menjelaskan langkah-langkahnya :
1. Pertama membuat sebuah header, untuk membuat Header yang menarik saya menggunakan aplikasi tambahan yaitu photoshop. Adapun langkah-langkahnya antara lain :

a. Buka aplikasi Photoshop untuk memulai membuat desain dari header, kemudian pilih New, lalu isi pada Width:850px dan Height:200px, sedangkan untuk background pilih White pilih OK.

b. Kemudian gunakan text tool untuk membuat header atau nama dari Web site, seperti gambar dibawah ini :

c. Kemudian tambahkan gambar agar terlihat menarik, karena yang saya akan buat Web Online Shop jadi saya menambahkan gambar pakaian tas dan sepatu.

d. Kemudian buat layer baru dengan mengklick create a new layer untuk membuat sebuah Elliptical marque tools. Saya membuat sebuah lingkaran menggunakan toos ini setelah itu diberi warna.

Saya menambahkan Brush Bunga dengan Brush Tols dan membuat layer baru juga.

e. Setelah itu gunakan kembali tools dari Elliptical Maarque tadi untuk membuat lingkaran yang lebih kecil kemudian tekan delete, secara otomatis warna hijau yang ada dalam lingkaran tersebut terhapus, seperti gambar dibawah ini.

f. Nah, tampilannya sekarang sudah terlihat menarik.

2. Setelah Header sudah selesai dibuat, sekarang kita akan membuat file css. Kita beri nama Style.css. adapun Scriptnya antara lain:

*{margin:0 auto; padding:0}

body{

font-family:arial;

background:url(bg4.jpg);

background-attachment:fixed;

color:black;

}

#container{width:1007px;

height:1360px;

}

#header{height: 230px;

width:1007px;

border: 1px ;

background-size:100%;

background-image:url('Untitled-2.jpg');

box-shadow: 1px 2px 3px #ffffff inset;

}

#top

{

height:25px;

margin:3px 0;

border:1px solid#009900 ;

background-color:white;

background-attachment:fixed;

}

#menu

{

width:1000px;

height:35px;

margin:3px 0;

padding:3px;

border:1px solid#009900 ;

background-color:white;

}

#sidebarkategori{float:left;

width:200px;

height:1000px;

margin:1px 0;

padding:0px;

border:1px solid#009900 ;

background-color:white;

}

#namakategori{

width:225px;

height:34px;

background:linear-gradient(-45deg, #1b8a1b, #005ddc);

color:white;

font-weight:bold;

text-align:center;

font-size:15px;

}

#konteks{float:left;

width: 800px;

height:1000px;

margin:1px;

padding:0px;

border:1px solid #009900;

background-color:white;

}

ul {

list-style:none;

margin: 0;

padding: 0;

}

a {

color: white;

display: block;

text-decoration: none;

}

li {

float:left;

padding:10px;

background: linear-gradient(-45deg, #1b8a1b, #005ddc);

border-bottom: 1px solid #FFF;

list-style: none;

padding: 0.5em;

width:150px;

text-align: center;

}

li:hover {

background: linear-gradient(-45deg, #006cff, #5ca1ff);

}

li ul li {

clear: both;

}

#footer{height:29px;

border:1px ;

clear: both;

background-image:url('footer.jpg');

background-size:100%;

text-align:center;

line-height:20px;

font-size:13px;

color:black;

font-weight:bold;

}

3. Setelah itu kita buat halaman web, kita beri nama file index.php. adapun Script seperti dibawah ini :

<html>
<head>
<title>Home</title>
</style></head>
<body>
     <div id="top"></div>
     <div id="container">      <div id="header">
</div>
     <div
id="menu"><ul><li><a href="#">Beranda</a></li>
<li><a href="#">Fashion Pria</a></li>
<li><a href='#'>Fashion Wanita</a></li>
<li><a href='#'>Fashion Anak-Anak</a></li>
     <li><a href='#'>Elektonik</a></li>
<li><a href='#'>Akesesoris</a></li>
</ul>
</div>
<div id="sidebarkategori"><div id="namakategori">ALL KATEGORI</div></div>
<div id="konteks"></div>
<div id="footer"></div></div>
</body>
</html>

Script yang saya tandakan diatas merupakan pemanggilan dari file css yang dibuat sebelumnya.

4. Setelah itu kita jalankan filenya dengan mengakses alamat url, dimana tempat kita meletakkan kedua file tersebut, biasanya jika komputer sudah terinstal Server local maka file ditempatkan di drive c. File index.html saat dijalankan seperti tampilan dibawah ini :

Itulah sedikit penjelasan tentang bagaimana cara Membuat Layout Toko Online Css dengan tambahan aplikasi Photoshop, semoga artikel ini dapat bermanfaat buat anda. . Salam Share

Membuat Layout Toko Online Css

Related Post

2 komentar