Kursus Web Desain

Berikut Ini adalah testimonial dari beberapa lulusan Computer Course Center.

Computer Course Center mengajarkan konsep dan keterampilan desain grafis dari dasar sampai bisa. Peserta kursus diajarkan teknik pengolahan foto(editing foto, penggabungan foto, foto style patchwork, seleksi objek, cropping objek, lighting, pewarnaan, membuat brosur, kartu nama, montase digital) dengan adobe photoshop dan membuat desain berbasis vector (cover CD, banner, style baju, redrawing foto, redrawing motif, redrawing tribal, redrawing zombie, sparasi warna, membuat film untuk secreen) dengan Adobe illustrator.

Setiap pertemuan akan mendapatkan ringkasan materi dan video projek latihan
info kursus: http://www.computer-course-center.com

Video ini merupakan contoh materi kursus pertemuan pertama Kursus Web Programming Berbasis Framework codeigniter. Selanjutya peserta kursus akan diajarkan HTML,CSS Javascript, Jquery PHP, OOP, database, dan codeigniter. Pada akhirnya akan mampu menguasai teknik membuat Aplikasi login, administrator, upload foto yang bisa resize otomatis, foto gallery dengan paging, website travel, booking online, shopping cart dan laporan dalam format excel,word dan pdf.

1. Pembuatan kotak dimulai dengan membuat bagian sudut kiri atas. Kali ini kita akan menggunakan foto dengan ukuran tingginya adalah 9px dan lebarnya adalah 1024px. Dengan menggunakan ukuran lebar foto 1024, maka kotak bisa ditampilkan secara fleksibel dalam ukuran maksimal 1024px. Berikut adalah perintah CSSnya:

   <style>
    .top_left{
     background-image:url(cornerImages/corner-topleft1024x9.gif);
     height:9px;
    }
   
   HTML:
   <div class="top_left">
   
   </div>
   Hasil:
   

   
   
   

2. Langkah berikutnya adalah membuat sudut bagian kanan atas. Background foto yang digunakan ukurannya adaah 9x9px, Agar tampilannya rata kanan, maka perlu diberikan perintah float:right. Berikut adalah perintah css-nya:

.top_right{
  background-image:url(cornerImages/corner-topright9x9.gif);
  width:9px;
  height:9px;
  float:right;
 }

HTML:
<div class="top_right"></div>

Hasil:




3. Terihat sudut pada samping kanan atas tersebut masih berada di bawah sudut kiri atas, hal ini dikarenakan sifat DIV adalah berupa block sehingga selalu membuat baris yang baru. Untuk memperbaiki ini, berikan margin-top:-9px. Nilai -9px difungsikan agar div class top_right bergeser ke arah atas sejauh 9px.Berikut adalah code CSS top right setelah diperbaiki:

.top_right{
  background-image:url(cornerImages/corner-topright9x9.gif);
  width:9px;
  height:9px;
  float:right;
 }


4. Setelah sudut kanan atas naik sejauh 9px, ujung garis kiri atas lewat sejauh 9px. Untuk memperbaiki ini perlu dimodifikasi sedikit kode css top_leftnya dengan memberikan margin-right sebesar 9px. Berikut adalah perbaikan kode cssnya:

.top_left{
  background-image:url(cornerImages/corner-topleft1024x9.gif);
  height:9px;
  margin-right:9px;
 }


5. Sampai tahap ini garis atas dan sudut kiri kanannya sudah selesai, selanjutnya tinggal membuatkan garis pinggir kanan kirinya dengan jarak padding 0px atas bawah dan 10px kanan kirinya. Berikut adalah perintah css-nya:

.inner{
  border-left:solid 1px #c00000;
  border-right:solid 1px #c00000; 
  padding:0px 10px;
  background-color:#efefef;
 }
HTML:
<div class="inner">
 <p>Computer Course Center menyediakan kursus Dasar Komputer, 
Komputer Aplikasi Bisnis dan Administrasi Perkantoran, Desain Grafis, 
Web Desain, Pemrograman Web dengan Codeigniter dan Internet Marketing.</p>
</div>

Hasil:




6. Pada gambar di atas terlihat ada jarak antara garis di atas dengan paragrafnya, hal ini disebabkan oleh pengaruh margin-atas tag <p>. Untuk menghilangkan pengaruh tersebut perlu dibuatkan sebuah class css dengan nilai margin atasnya 0px. Berikut adalah kode yang dimaksud:

.topgap{
  margin-top:0px;
 }
HTML:
<div class="inner">
 <p class="topgap">Computer Course Center menyediakan kursus Dasar 
Komputer, Komputer Aplikasi Bisnis dan Administrasi Perkantoran, Desain 
Grafis, Web Desain, Pemrograman Web dengan Codeigniter dan Internet 
Marketing.</p>
</div>

Hasil:




7. Untuk membuat sudut kiri bawah dan kanan bawah prosesnya hampir sama seperti membuat sudut di atas atas, hanya saja gambar yang digunakan harusdibalik. Berikut adalah kode css-nya:

.bottom_left{
  background-image:url(cornerImages/corner-bottomleft1024x9.gif);
  height:9px;
  margin-right:9px;
 }

 .bottom_right{
  background-image:url(cornerImages/corner-bottomright9x9.gif);
  height:9px;
  width:9px;
  margin-top:-9px;
  float:right;
 }
 HTML:
 <div class="bottom_left"></div>
<div class="bottom_right"></div>

Hasil:




8. Sekali lagi, terlihat masih ada jarak antara text dengan pinggir bawah frame. Untuk menghilangkan ini maka css top gap mesti diperbaiki dengan menambahkan kode margin-bottom:0px. Berikut adalah kode css-nya:

.topgap{
  margin-top:0px;
  margin-bottom:0px;
 }

Hasil:



Sampai tahap ini proses pembuatan kotak round corner sudah selesai, semoga tutorial
ini bisa membantu.
Untuk lebih jelasnya berikut adalah kode CSS dan HTML selengkapnya:
<html>
<head>
<style>
 body{
  width:700px;
  margin:20px auto;
 }
 .top_left{
  background-image:url(cornerImages/corner-topleft1024x9.gif);
  height:9px;
  margin-right:9px;
 }
 
 .top_right{
  background-image:url(cornerImages/corner-topright9x9.gif);
  width:9px;
  height:9px;
  float:right;
  margin-top:-9px;
 }
 .inner{
  border-left:solid 1px #c00000;
  border-right:solid 1px #c00000; 
  padding:0px 10px;
  background-color:#efefef;
 }
 
 .topgap{
  margin-top:0px;
  margin-bottom:0px;
 }
 
 .bottom_left{
  background-image:url(cornerImages/corner-bottomleft1024x9.gif);
  height:9px;
  margin-right:9px;
 }
 
 .bottom_right{
  background-image:url(cornerImages/corner-bottomright9x9.gif);
  height:9px;
  width:9px;
  margin-top:-9px;
  float:right;
 }
 
</style>
</head>

<body>
<div class="top_left"></div>
<div class="top_right"></div>
        <div class="inner">
            <p class="topgap">Computer Course Center menyediakan kursus 
Dasar Komputer, Komputer Aplikasi Bisnis dan Administrasi Perkantoran, 
Desain Grafis, Web Desain, Pemrograman Web dengan Codeigniter dan Internet 
Marketing.</p>
     
        </div>
<div class="bottom_left"></div>
<div class="bottom_right"></div>
</body>
</html>