cara membuat desain web dua kolom

share

  • cara membuat desain web dua kolom

    Cara Membuat Desain Web Dua Kolom


    Cara membuat desain web dua kolom menggunakan HTML dan CSS tanpa konsep table, sehingga tampilan website lebih style, dinamis, fast loading, seo friendly
  • cara membuat desain web dua kolom
    Service
    1. Complete Website
    2. Only web script
    3. Web modification
    4. Application program
    5. Free web template
    6. Free application
    7. Basic SEO
    8. Article request
    9. Tutorial programing
  • cara membuat desain web dua kolom
    MOTO
    "Kepuasan Pelanggan adalah Prioritas kami, Sebagai Pemicu Semangat Dalam Memberikan Pelayanan Terbaik".
  • cara membuat desain web dua kolom Teknologi dan Bahasa
    PHP-5, HTML-5, CSS3, SQL Server, MySQL Database, Access Database, Java, JavaScript, dan Visual Basic.
  • cara membuat desain web dua kolom
    VISI
    "Menjadi penyedia layanan yang terpercaya dan maju dalam dunia Teknologi Informasi."

Cara Membuat Desain Web Dua Kolom

Cara membuat desain web dua kolom menggunakan CSS dan HTML tanpa konsep table, sehingga tampilan website lebih style, dinamis, fast loading, responsive, dan seo friendly, serta lebih mudah dibuat dari pada menggunakan web desain template konsep table HTML.

Membuat desain web dua kolom dengan CSS lebih banyak memiliki kelebihan jika dibandingkan dengan desain web menggunakan konsep table HTML, diantaranya adalah lebih cepat loading (fast loading) sehingga pengunjung tidak bosan menunggu, ukuran atau resolusi menyesuaikan dengan resolusi aktual PC pengguna sehingga akan memiliki tampilan yang rapih dan teratur. Tetapi bukan berarti web design konsep table HTML sudah tidak digunakan lagi, masih banyak website terkenal yang membuat desain web dengan konsep table HTML.

Pada tutorial cara membuat desain web dua kolom ini, kita akan menggunakan 2 bahasa pemrograman website atau web design yaitu CSS dan HTML, sehingga Anda harus mengerti terlebih dahulu apa itu CSS dan apa itu HTML. Desain web dua kolom yang dimaksud adalah pada bagian content terdapat dua sub bagian yaitu content itu sendiri yang berisi artikel dan sidebar, content di desain di sebelah kanan sedangkan sidebar di desain di sebelah kiri, supaya lebih jelas dibawah ini adalah tampilan desain web dual kolom yang dimaksud:

cara membuat desain web dua kolom
Cara Membuat Desain Web Dua Kolom

Berikut langkah - langkah tutorial cara membuat desain web dua kolom menggunakan CSS dan HTML yang kami kemas dalam tutorial web design template:

Cara Membuat Desain Web Dua Kolom



Membuat Desain Web

1. Desain web layout seperti gambar di atas menggunkan CSS.

Untuk membuat desain web dua kolom seperti pada gambar di atas dibutuhkan file CSS dengan struktur program sebagai berikut:

body { }
#art-main { }
#navbar { }
#art-header { }
#art-sheet { }
#sidebar { }
#article { }
#art-footer { }

Dari struktur program diatas dapat dibuat script CSS yang dapat membentuk desain web dua kolom, script CSS nya seperti berikut:

a {color: #3366CC; text-decoration: none}
p {margin: 0; padding: 0;}
body {	
	background: #EEEEEE;
	color: #000000;
	margin: 0;
	padding: 0;
	font: 0.7em "Arial", Helvetica, Sans-Serif;
	text-align:center;
	}
h2 {
	margin: 8px 0 5px 0;
	padding: 0;
	font-size: 1.9em;
	letter-spacing: -1px;
	color: #808080;
	background-color: inherit;
	}
h3 {	
	font-family: Arial, Helvetica, sans-serif;	
	font-size: 1.15em;	
	background-color: #006666;  	
	color: #DCDCDC
	}
h4 {color: #000000}
	
#art-main{clear: both; width: 950px auto; height: auto;}

#navbar{ 
	clear: both;
	width: 940px;
	height: 20px;
	margin: 2px auto 0;
	background: #CCCCCC;
	color: #808080;
	text-align:right;
	padding: 5px 10px 0 0;
}
#art-header{
	clear: both;
	width: 950px;
	height: 160px;
	background: #DCDCDC url(images/logo.jpg) no-repeat center;
	color: #DCDCDC;
	margin: 2px auto 0;
}
.header{
	text-align: right; margin-left: auto; margin-right: auto;
}
.header ul{
	margin:0; padding-left: 0;   float: right;  width: 500px;
}
.header ul li{
	display: block; list-style: none;
}
.header ul li.title{
	padding-right: 15px; color: #EEEEEE; font-family: Arial; font-size: 25px; font-weight: bold;
}
.header ul li.titledesc{
	padding-right: 15px; color: #EEEEEE; font-family: MS Sans Serif; font-size: 14px; margin-top: 40px;  font-weight: bold;
}

#art-sheet{
	border-top: 1px solid #FEFEFE; 
	clear: both;
	width: 950px;
	margin: 2px auto 0;
	background: white;
	color: #000000;
	text-align:left;
}

#sidebar{
	float: left;
	width: 250px;
	margin: 0 auto;
	padding: 10px;
}
.vmenu a {
	display: block;
	background: #BF3E18 url(images/vmenuarrow.gif) no-repeat center left;
	color: #FFFFFF;
	padding: 5px 0 5px 19px;
	margin: 0 0 1px 0;
	text-decoration: none;
	text-align:left;
}
.vmenu a:hover {
	color: #FFFFFF;
	background: #822C0F url(images/vmenuarrowhover.gif) no-repeat center left;
}
.sidebar-content {
	background: #EEEEEE;
	margin: 2px 0 2px 0;
	padding: 8px;
	line-height: 1.4em;
}

#article{
	float: right; width: 680px;
}
.date-header{
	float: left;
	width: 100px;
	height: 40px;
	background: #3366CC;
	color: #000000;
	line-height:40px;
	margin: 10px 0 2px 0;
	padding: 0 0 0 10px;
}
.content{
	padding: 10px;
	float: left;
	width: 640px;
}
.date-footer {
	margin: 5px 0 5px 0;
	padding: 10px 5px 5px 0;
	background: url(images/horizontaldotted.gif) repeat-x bottom left;
	color: #808080;
	text-align: right;
}
.date-footer a { color: #808080;  }

#art-footer{
	border-top: 1px solid #FEFEFE; 
	clear: both;
	width: 950px;
	margin: 2px auto 10px;
	background: #CCCCCC ;
	color: #000000;
	text-align: center;
	padding:15px;
}

Simpan script di atas dengan nama file style.css, letakkan dalam folder khusus.

2. Buat dokumen HTML untuk sehingga membentuk desain web dua kolom.

Agar dapat membentuk dan membuat desain web dua kolom seperti layout di atas, maka script style CSS harus di insert ke dalam dokumen HTML. Berikut adalah script HTML yang membentuk dokumen HTML tersebut:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<title>Cara Membuat Desain Web Dua Kolom</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
	<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
	<div id=art-main>
		<div id=navbar> <a href="#">Home</a> | <a href="#">Privacy Policy</a> | <a href="#">TOS</a> |  <a href="#">Contact us</a></div>
		<div id=art-header>  
			<div class="header">
				<ul>	
					<li class="titledesc">Cara Membuat Desain Web Dua Kolom | Web Design Tutorial</li>
					<li class="title">raja putra media ©</li>
				</ul>
			</div>
		</div>
		<div id=art-sheet>     
			<div id=sidebar>
				<div class=vmenu>
					<a href="#"> Home</a><a href="#"> Service</a><a href="#"> News</a><a href="#"> Tutorial</a><a href="#"> Design</a><a href="http://blog.rajaputramedia.com" target="_blank"> Blogs</a>
				</div>
				<div class=sidebar-content>
					<p>Lorem ipsum dolor sit amet, <a href="#">consectetuer adipiscing elit</a>, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, <a href="#">quis nostrud exerci</a>.</p>
				</div>
				<div class=sidebar-content>
					<p>Lorem ipsum dolor sit amet, <a href="#">consectetuer adipiscing elit</a>, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, <a href="#">quis nostrud exerci</a>.</p>
				</div>
			</div>
			<div id=article>
				<div class=date-header><font size=4>20</font> Des 2013</div>
				<div class=content>
					<h2><a href="#">Lorem Ipsum</a></h2>
					<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent lupt...  </p>
					<p class="date-footer"><img src="images/more.gif" alt="" /> <a href="#">Read more</a> <img src="images/comment.gif" alt="" /> <a href="#">Comments(34)</a> <img src="images/timeicon.gif" alt="" /> 24th Dec, 2013</p>
				</div>
				<div class=date-header><font size=4>20</font> Des 2013</div>
				<div class=content>
					<h2><a href="#">Lorem Ipsum</a></h2>
					<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent lupt...</p>
					<p class="date-footer"><img src="images/more.gif" alt="" /> <a href="#">Read more</a> <img src="images/comment.gif" alt="" /> <a href="#">Comments(34)</a> <img src="images/timeicon.gif" alt="" /> 24th Dec, 2013</p>
				</div>
				<div class=date-header><font size=4>20</font> Des 2013</div>
				<div class=content>
					<h2><a href="#">Lorem Ipsum</a></h2>
					<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent lupt...  </p>
					<p class="date-footer"><img src="images/more.gif" alt="" /> <a href="#">Read more</a> <img src="images/comment.gif" alt="" /> <a href="#">Comments(34)</a> <img src="images/timeicon.gif" alt="" /> 24th Dec, 2013</p>
				</div>
			</div>
		</div>
		<div id=art-footer>
			Design by <a href="http://www.rajaputramedia.com">jasa pembuatan website </a> - © 2013 -  andihatmoko[at]gmail.com - phone:+62857 1405 7686
		</div>
	</div>
</body>
</html>

Simpan script HTML di atas dengan nama file index.html, kemudian letakan dalam satu folder dengan file CSS yang sudah dibuat.

3. Pastikan file CSS dengan nama style.css berada di dalam satu folder dengan file index.html.

Jika Anda mengikuti tutorial cara membuat desain web ini dengan teliti kemudian menjalankan nya di dalam web browser, maka tampilan desain web dua kolom yang telah dibuat adalah seperti gambar di bawah ini:

cara membuat desain web dua kolom
Cara Membuat Desain Web Dua Dolom

Tutorial Cara Membuat Desain Web Dua Kolom

Download Script Desain Web Dua Kolom

Sekian penjelasan dari kami tentang bagaimana cara membuat desain web dua kolom menggunakan CSS dan HTML, serta dilengkapi dengan script CSS dan HTML yang dapat Anda download langsung melalui link di atas, jika link download tidak aktif atau error mohon hubungi kami melalui SMS atau email atau melalui form komentar dan obrolan. Semoga dapat membantu.

Baca juga :

Cara Membuat Desain Web Dua Kolom

Tags: cara membuat desain web, desain web dua kolom, desain web, desain web css, cara membuat desain web dua kolom


Reliable

cara membuat desain web dua kolom

Advertise

softwareoriginal

Payment & Donation

cara membuat desain web dua kolom

Rekening BCA : 343 1156 006

a/n : Andi Hatmoko

Rekening MANDIRI : 13300 11921 079

a/n : Andi Hatmoko

cara membuat desain web dua kolom

Account :

andihatmoko@gmail.com

Live Chat

Lukman2020-09-22, 11:53 am
Mau Tanya Harga Program Aplikasi Inventory Barang Gudang brapa_ ?
Agustina Ndj2020-09-18, 09:51 am
download aplikasi sarpras sekolah
Aloisius Rab2020-09-17, 22:15 pm
Aplikasi Pengajuan Kredit dan Analisa 5C
CARLITO DA S2020-09-16, 12:52 pm
Halo, Saya Carlito da Silva Berapa harga dari aplikasi stok barang berbasis web?
data2020-09-13, 10:50 am
tolong bisa bantu program aplikasi barang
sutan arif p2020-09-09, 10:13 am
berapa harga source code program pengarsipan?
kumbaray2020-09-09, 02:46 am
untuk aplikasi spj_ sppd nya berapa kisarannya gan
Yance Rawar2020-09-01, 17:10 pm
Boleh saya bertanya ya?_ berapa biaya aplikasi LPJ Dana Desa_ Mohon tanggapannya ya?
ZAI2020-08-30, 06:18 am
brp harga aplikasi input data karyawan
ADE IRHAM2020-08-29, 18:53 pm
Raja SARPRAS V4_ 0 _ Demo Aplikasi harganya berapa?
Juned2020-08-23, 11:30 am
Gimana kalo make delete di mysqli nya??
putri2020-08-21, 08:51 am
Saya tertarik dengan aplikasi arsipnya_ HArganya berapa ya gan? Terima kasih
Mukhlis2020-08-18, 10:42 am
Aplikasi Indekx Kepuasan Masyarakat nya ada bg?
Tedi2020-08-15, 20:41 pm
Selamat malam para pakar
arif2020-08-13, 14:36 pm
Program Aplikasi Rental Online Untuk Halaman Member Depannya tidak ada hanya Halaman Login Untuk admin dan Super admin
secret2020-08-10, 14:59 pm
ada free source code yang bgagus gak ?
Angela2020-08-06, 18:50 pm
Hallo, saya angela ingin bertanya apakah aplikasi surat berbasis web ini bisa disesuaikan dengan keadaan di kita_ _ _ hrg?
aan2020-08-05, 14:20 pm
kl mau mendapatkan sourcecode aplikasi SPPD gimana ya?? bisa minta wa nya
SHODIKIN2020-07-26, 06:16 am
Berapa Donasi Program Aplikasi Penjualan Berbasis Web? Tq
MICHAEL ELSO2020-07-23, 18:34 pm
Apakah pembelian aplikasi ktp sudah termasuk datanya smua? Atau hanya aplikasinya saja? Misalnya mau untuk cek data bs?
April2020-07-21, 13:54 pm
saya ingin membuat aplikasi arsip digital untuk internal perusahaan yg dengan mudah dapat di akses bagi seluruh karyawan
Salwa2020-07-20, 13:07 pm
Berapa lama kira2 pesan aplikasi untuk perpustakaan sekolah?
udin2020-07-19, 21:44 pm
berapa harga aplikasi untuk pondok pesantren
Royke Lantup2020-07-17, 20:07 pm
Setelah di download langkah_ langkahnya seperti apa?
Feria2020-07-10, 16:50 pm
Untuk aplikasi penyimpanan berkas pengajuan administrasi capil, KK dan KTP berapa biaya nya ??
nugraha2020-07-10, 09:46 am
gan, cara dapat aplikasi simpeg7 gimana?
kasmono2020-07-08, 15:09 pm
mas, minta link donlot untuk script kode otomatisnya_ trims
Asep Gunawan2020-07-08, 09:50 am
Mau tanya versi Full Aplikasi stok barang
Iwan2020-07-08, 09:40 am
Berapa harga Program Aplikasi Manajemen Anggota
ferry 2020-06-24, 13:51 pm
apakah saya bisa mendapatkan aplikasi SPPD exel sederhana
Shany2020-06-19, 20:43 pm
Untuk aplikasi persediaan ini apakah masih bisa di customize dengan warna dan ukuran?
Triyanto2020-06-17, 15:02 pm
Halo admin,,,saya tertarik dengan aplikasi cutinya,,harganya berapa
fadhil2020-06-17, 09:53 am
bisakan anda mengirimkan penawaran ke email saya tentang program aplikasi e_ arsip dan data pegawai
aa2020-06-08, 11:11 am
brp harga untuk aplikasi Program Aplikasi Inventory Barang Gudang
Budhi Dwipa2020-06-08, 10:48 am
halo admin saya tertarik dengan aplikasi simpeg 7 apakah ada nomor wa yg bisa dihubungi ?
abu hafidz2020-06-04, 14:23 pm
kalau untuk menampilkan hanya data yang ada di table lain gimana ya ? mohon bantuannya
Muhlis2020-06-04, 12:09 pm
saya berminat software pengajuan judul skripsi, saya ingin membahas harganya jida chat ini di respon ke Email
nic2020-06-04, 07:49 am
brp harga e_ arsip
NUR CAHYANIG2020-06-03, 15:20 pm
Berapa harga untuk software koperasi?
Arif Mahmudi2020-06-03, 11:00 am
Assalamualaikum
mugiarto2020-05-09, 08:33 am
bgmana cara beli program iin, apakah termasuk souce code nya ??
willbertus2020-04-28, 16:49 pm
Admin mohon info utk Aplikasi Dokumen Kantor gimana cara dapatnya secara komplit_ Minat_ thks
Galih2020-04-27, 23:18 pm
Min, bagaimana cara mendapatkan source code aplikasi cuti?
ariel2020-04-18, 11:02 am
kami berminat dgn aplikasi SPPD berapa harga gan?
Aris2020-04-12, 08:45 am
plikasi Arsip Surat Berbasis Web SIPAS harganya brp?dpt source code y
Wida Widiyaw2020-04-11, 12:01 pm
Ingin Mengubah Tanggal Lahir Akun Google
Zulfikri2020-04-10, 10:33 am
Mau tanya biayanya berapa kalau bikin aplikasi SPPD lengkap
irfan2020-03-14, 10:18 am
selamat pagi pak,apa program sewa mobil ini bisa castem sesuai dengan kebutuhan kami
Aji2020-03-10, 11:39 am
Ini tidak bisa di download min?di info saat download ada notif untuk hubungi admin untuk download aplikasi hrd web
Hamdan2020-03-09, 16:05 pm
Berapa harga membuat aplikasi rental atau penyewaan kamera berbasis web?
rizki firman2020-02-25, 12:05 pm
mau tanya untuk spk metode fuzzy berapa ya? tentang pemilihan tempat wisata
Rendhi roman2020-02-13, 22:38 pm
Untuk Sistem Rekrutment BIsa_
windra2020-02-13, 14:43 pm
untuk harga program data karyawan brp
FERY DIANTA 2020-02-08, 09:51 am
gan mau nanya harga simpeg versi 7 nya_
rudy2020-02-07, 15:58 pm
berapa harga sw management anggota pak_
Manyu2020-02-07, 14:44 pm
berapa harga aplikasi sppd nya_ pls respon cepat melalui email ya, saya berminat mau beli
yadi2020-02-01, 19:34 pm
harga Aplikasi Simpan Pinjam Berapa
hendi 2020-01-25, 18:59 pm
untuk afk sofware developer property penjualan di harga berapa _
Suwarto plaz2020-01-21, 15:45 pm
berapa harga aplikasi cuti online?
Heri Nurjono2020-01-20, 09:45 am
Berapa harga Aplikasi data anggota?

Post your chat:


Name



Email



Chat



Confirm you are NOT a spammer

 
cara membuat desain web dua kolom