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

Translate Page

Advertise

cara membuat desain web dua kolom

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

Google +

Live Chat

Egova Riv2018-11-23, 20:03 pm
Ane pake koding ny buat program ane ya gan , terimakasih telah berbagi gan
rizal2018-11-16, 19:34 pm
mau menanyakan aplikasi raja lmbah berapa ya harganya dan apakah bisa outputanya nanti berbasis android &ada neraca lb3
Via2018-11-10, 09:57 am
Mau tanya, 1. untuk source code stok abarang dan iventory bedaannya ada dimana ? 2. untuk donasi berapa ? tks
tarwanto2018-11-09, 16:29 pm
Bisa pake barcode sama cetak barcode
Iqbal2018-11-02, 10:02 am
permisi gan saya mau lanjut mengetahui tentang aplikasi gudang ini, bisa kita berkomunikasi lebih intensif melalui WA?
syahrul2018-10-24, 12:31 pm
Selamat siang saya mau beli aplikasi stok barang berapa ya harganya.thanks
Winz2018-10-16, 00:19 am
selamat malam, terima kasih atas koding yang diberika
stikesmni2018-10-10, 16:45 pm
selamat sore mas mas saya tertarik sama aplikasi simpegnya harganya berapa ya mas/mbak?
Ridwan Ma2018-10-08, 06:58 am
Selamat siang, saya minta untuk beli aplikasi data karyawan, gimana cara pembeliannya dan berapa duit
Heriyanto2018-10-07, 23:30 pm
Harga simpeg berapa gan?
Amerizasn2018-10-04, 17:25 pm
Bisa bikin aplikasi berbasis web yg output nanti kami tentukan mas? Trims.
AKP Donal2018-09-23, 00:31 am
Mas jangan lupa aplikasi direktorat tahan polda aku ya sukses selalu semangat
Ferry2018-09-12, 15:45 pm
maaf min. link tuk download aplikasi surat berbasis web sipas lagi ga bisa y
steven2018-09-08, 14:43 pm
permisi, boleh minta source sama database aplikasi arsip digitalnya
Visnu2018-09-04, 10:45 am
permisi mas boleh minta source code Download Complete Script Pencarian Data???
Kuta TRuf2018-09-01, 23:32 pm
program aplikasi simpan pinjam harga berapa gan
alfianlig2018-08-31, 13:06 pm
gan ane sangat minat dengan aplikasi SIMPEG bs minta nomor yng bs dihbungi
fzil2018-08-13, 12:24 pm
untuk aplikasi SIMPEG v 7.0 Pak.
fzil2018-08-13, 06:44 am
sngat tertarik dengan aplikasinya gimana cara mendapatkannya, dan maharnya berapa terima kasih sebelumnya
La Shave2018-08-10, 21:19 pm
sngat tertarik dengan aplikasinya gimana cara mendapatkannya, dan maharnya berapa terima kasih sebelumnya
jerry2018-08-03, 18:56 pm
Mas, untuk yang berbayar saya mau dong Aplikasi data karyawannya.
Iwan2018-08-03, 10:23 am
aplikasi dokumen kontrol boleh dong pricenya berapa ?
Nursanjay2018-08-01, 10:39 am
salam. mas, bagaimana saya bisa memperoleh aplikasi kepegawaian ini? mohon diinformasikan ke alamat email saya, trims.
fadil2018-08-01, 07:54 am
gan bisa kirim pricelist harga aplikasi ini? karena kami lagi butuh aplikasi seperti ini.
Prastiwi2018-07-23, 08:37 am
bisa nggak sih kalo source code tersebut dimasukkin projek pakai konsep mvc?
jemy2018-07-20, 11:27 am
tutorialnya keren... untuk membuat ini perlu gak si salah satu field di database dijadikan primary key???
ombas2018-07-20, 09:28 am
bisa dikirimkan price list aplikasi simpeg dan aplikasi dokumen
Raisa Ard2018-07-19, 14:23 pm
Program Aplikasi Dokumen Kontrol minta yg ini om
Muhammad 2018-07-15, 18:16 pm
bagaimana membuat inputan dari web terhubung ke database terus laporanya muncul sesuai ke web sesuai inputannya tadi
Lawanna Bett2018-06-21, 21:28 pm
Dear Sir Is going to you be an online marketer, do you own a company or businesses? ) I used to be just looking a
chariems2018-06-18, 21:12 pm
bagaimana cara kami beli aplikasi system informasi pasarnya ?? dan berapa harganya
ibnu2018-04-27, 13:01 pm
saya ingin download dan mengetahui apliasi sipas, apa saja yang harus saya penuhi
Rosevelt2018-04-21, 19:48 pm
Apakah bapak menjual Aplikasi KGB yang diperuntukkan untuk kecamatan tp yang offline
Indri2018-04-09, 14:10 pm
Apa blh dibuatkn aplikasi untuk data pegawai yg memuat 500-an peg, ada menu tgl lahir ybs sekaligus jd reminder bg user
Awan2018-04-03, 15:36 pm
Saya Ingin mendownload Aplikasi Sipas
Taufiq2018-03-28, 09:19 am
Mohon kirimkan proposal dan donasi/biaya untuk SIMPEG Versi berbayar/versi7. Terimakasih...
Nasrullah2018-03-26, 14:23 pm
bisa kirimkan proposal serta harganya untuk simpeg yg versi 7nya? trims
FAJAR AL 2018-03-02, 23:19 pm
mohon untuk basic price harga aplikasi stok barang berbasis dekstop. tnx
wikko2018-02-26, 09:24 am
Admin saya tertarik dengan aplikasi kontrol dokumen mohon informasinya
wikko2018-02-26, 09:20 am
Berapa Harga Aplikasi Dokumen kontrol
Dhanis2018-02-15, 07:42 am
gan bisa request website kdata kepegawaian sesuai dengan yg diinginkan ? harga nya juga brp ?
Dony2018-02-11, 11:11 am
Apakah menjual aplikasi SIMPEG khusus untuk dinas kesehatan? Tks
Dony2018-02-11, 11:07 am
Aplikasi yg SIMPEG yg saya maksud tidak berbasis web tetapi offline saja
Dony2018-02-11, 11:04 am
Apakah menjual aplikasi SIMPEG khusus untuk dinas kesehatan? Tks
budi2018-02-10, 12:03 pm
saya mau download aplikasi sistem kepegawaian kok nga bisa gmn caranya ya ?
Haniffah 2018-02-07, 09:15 am
Min, boleh minta sourcecode aplikasinya ga?
hime2018-01-31, 15:28 pm
scriptnya ga bisa di download yaaa,cara downloadnya gimana ya??
Suci Yuli2018-01-31, 13:53 pm
Permisi kak mau tanya klo bikin laporan dengan jquery agar datanya mau ke record itu bagaimana? terimaksih
sunanda2018-01-28, 06:32 am
Gan saya mautanya program database karyawan bisa input karyawan 1100 tdk, utk instal 1 kali/dapat dgunakan berulangkali.
sofian2018-01-11, 15:50 pm
seuai dengan kebutuhan format SPPD kantor sya
sofian2018-01-11, 15:48 pm
pak saya berminat dengan Aplikasi SPPD nya tp menu dan templatenya bisa dirubah dan ditambah sesuai dengan kebutuhan dgn
bangroel2018-01-07, 10:41 am
apakah aplikasi stok gudang barang berbasis web nya cocok untuk gudang yang mutasi barangnya keluar dan kembali. thx
wikko 2018-01-03, 20:47 pm
Bolehkan minta source code aplikasi dokumen kontrol kasi sangat perlu
Heri2018-01-03, 15:41 pm
tolong cara gimana dapatkan Aplikasi Sistem Informasi Data Karyawan, dan apakah aplikasi berjalan sempurna tanpa error

Post your chat:


Name



Email



Chat



Confirm you are NOT a spammer

 

cara membuat desain web dua kolom