Cara Membuat Website Full Tutorial

download Cara Membuat Website Full Tutorial
  • date post

    14-Nov-2015
  • Category

    Documents

  • view

    17
  • download

    5

Embed Size (px)

Transcript of Cara Membuat Website Full Tutorial

Cara Membuat Website Full Tutorial1. Layout Website Dengan Photoshop.Sebelum membuat website lebih baik kita membuat layout website terlebih dahulu, arti katalayoutadalah tata letak, jadi sebelum kita membangun sebuah website kita membuat sketsa tata letaknya terlebih dahulu. Sama seperti sebelum membangun rumah, kita pastinya sudah menyiapkan skesa tata letak rumah kita, tidak mungkin anda akan membuat rumah tanpa sketsa, atau bisa di bilang asal-asalan dan asal main tebak ukurannya.Disini nantinya kita akan menentukan lebar dari website kita, seperti lebar body website, lebar header, lebar navigasi/menu website, lebar konten, lebar footer, dan lebar sidebar/kolom samping. Disamping itu kita akan membuat beberapa background agar nantinya tampilan website kita lebih enak di pandang mata.Pada kali ini kita akan membuat layout website yang simple simple saja, untuk kedepannya anda bisa mengolah sendiri tampilannya, mau seperti apa terserah anda, yang penting konsep awalnya sudah anda mengerti.Website yang kita buat nantinya akan seperti gambar di bawah ini.

Nantinya kita akan membuat website menjadi 5 bagian, yaitu ada header, menu / navigasi, ada konten website, ada sidebar / kolom samping yang nantinya bisa anda isikan dengan menu tambahan seperti kategori dalam website, berita terbaru dan lain lain.

2.1. Membuat Layout Website (langkah pertama).Pertama kita menentukan lebar website kita, buka program Adobe Photoshop anda, kemudian klikFile -> Newatau tekanCtrl + N, isikanwidth 900 pixel,height 600 pixel, dan resolusi72 pixel/inch, kemudian klikok. Lihat pengaturannya pada gambar berikut.

2.2. Membuat Layout Website (langkah ke-2).Buatlah guideline / garis bantu, pada menu bar Photoshop anda klikView->New Guide, padaOreientationpilihHorizontal, pada Position ketikkan150px, kemudian klikOK.

Ulangi langkah tadi, klikView->New Guide, padaOreientationpilihVertical, pada Position ketikkan20px, kemudian klikOK. Ini adalah batas kedalam dari kiri website sebesar 20 pixel.Ulangi lagi langkah diatas, klikView->New Guide, padaOreientationpilihVertical, pada Position ketikkan880px, kemudian klikOK. Ini adalah batas kedalam dari kanan website sebesar 20 pixel. Karena lebar total website yang akan kita buat itu lebarnya900pixeldan kita akan memberikan jarak kedalam dari sisi kanan dan kiri sebesar 20pixel maka kita membuat guidenya900px 20px = 880px.Lakukan lagi hal yang sama, klikView->New Guide, padaOreientationpilihHorizontal, pada Position ketikkan185px, kemudian klikOK. Kali ini kita membuat batas untukmenu / navigasi website. Tinggi darimenu / navigasi websiteyang akan kita buat adalah35pixel, dan tadi tinggi dari header yang kita buat adalah150pixel, jadi untuk membuat garis bantu atau garis batas navigasi website adalahtinggi header + tinggi navigasi (150pixel + 35pixel ) =185pixel.Sekarang kita membuat garis bantu untuk footer, tadi di awal kita membuat tinggi dari layout website kita adalah600 pixel, dan sekarang kita akan membuat garis bantu untuk bagian footer / bagian bawah website yaitu tingginya80 pixel, jadi hitungan-hitungannyatotal tinggi website dikurangi footer(600 px 80px) =520px.KlikView->New Guide, padaOreientationpilihHorizontal, pada Position ketikkan520px, kemudian klikOK.Untuk membuatkolom sidebar / kolom sampingdari website,View->New Guide, padaOreientationpilihVertical, pada Position ketikkan680px, kemudian klikOK.Terakhir kita akan membuat garis bantu untukkonten,View->New Guide, padaOreientationpilihVertical, pada Position ketikkan660px, kemudian klikOK.Selesai sudah kita membuat garis bantu / guide line untuk layout website kita, jika anda melakukannya dengan benar maka akan tampak seperti gambar di bawah, setelah di berikan backgound.

Lho.. punya anda belum berisi background? yups, karena di awal kita tadi membuatBackground Contensnya transparant. Saya anggap anda sudah bisa mengisi warna background pada layar kerja diphotoshop. Dan untuk lebih jelasnya bagian-bagian dari layout kita, coba anda perhatikan gambar di bawah.

ket: lebar header sama dengan lebar navigasi / menuKalau kita perhatikan, konten dan sidebar tidak memiliki tinggi, itu karena nantinya tinggi dari konten dan sidebar akan menyesuaikan dari isinya.3. Setting Site Di Dreamweaver CS3.Setting site di Dreamweaver cs 3 sangat mudah, hanya 4 langkah saja, fungsi site di dreamweaver ini menghbungkan file file yang ada di dalam web server kita. Sebaiknya sebelum melakukan setting site di dreamweaver cs3 andamenginstal XAMPP.Karena nantinya kita menaruh file filewebsitedala hasil instalasi XAMPP, pada artikel Cara Install XAMPP di windows kita menginstalnya di folderD:/website/xamppmaka kal ini kita akan mearuh file file website kita diD:/website/xampp/htdocs/websiteku.com. Setting Site di Dreamweaver step 1KlikSite>New Site

Setting Site di Dreamweaver step 2Pada bagian ini kita akan mengaturLocal Infowebsite, isikan pengaturannya sebagai berikut :

Setting Site di Dreamweaver step 3Pada bagian ini kita akan mengatur Remote Info website, isi pengaturanya sebagai berikut :

Setting Site di Dreamweaver step 4Ini adalah bagian terakhir mensetting site di Dreamweaver cs 3, langkahnya sebagai berikut :

4. Membuat Website Di Dreamweaver CS3.Kemarin aku sudah kasihdownload template website yang simple, bagi yang belum download silahkan downloaddisini.Setelah anda mendownload file tersebut, extrak filenya kedalam komputer anda, terserah anda mengextraknya dimana. Kemudian dalam hasil extrak terdapatfolder images, disana ada beberapa file yang sudah aku pecah sebagai bahanpembuatan website di dreamweaver.Copyfolder imagestersebut kemudian paste kedalam folder :D:\website\xampp\htdocs\websiteku.comUntuk membuat website di dreamweaver yang pertama yang perlu kita lakukan adalah membuat file index.php. Website yang akan kita buat memiliki bagian :1. Header2. Menu navigasi3. Konten4. Sidebar5. FooterLangsung saja kita akan membuat website di dreamweaver, buka programAdobe Dreamweaveranda, Create new pilihphp

Simpan file tersebut, tekanCTRL + Ssimpan dengan namaindex.phpdalam folder tempat anda menginstal XAMPPD:\website\xampp\htdocs\websiteku.comBerikutnya anda membuat file baru, tekanCTRL + NpadaBlank PagepilihCSSkemudian klikcreate,simpan dengan namastyle.cssdalam folder yang sama dengan fileindex.phpKembai ke file index.php, kliktabindex.phppada document toolbar, kemudian klikCode, tambahkan script berikut di atas tag1

Script tersebut berfungsi menghubungkan fileCSSdenganindex.php

Mengatur Body WebsiteMasih dalam file index.php, klikiconNew CSSRuleyang ada di bagian kanan, jika di layar anda tidak terdapat CSS Stylenya anda bisa menekanShift + F11untuk menampilkantab CSS Style.

Setelah muncul Window New CSS Rule, isi pengaturan sebagai berikut : Selector Type :Advanced (Ids, pseudo-class selectors) Selector :body Define in :style.css

Jika sudah klik ok. Maka akan muncul jendelaCSS Rule Definition for body in style.css,isikan pengaturan sebagai berikut :1. Type= Font : Arial, Helvetica, sans-serif,size:13 pixel, color : #0000002. Background = Background color : #CCCCCC3. Box =width : 900 pixel

Jika sudah klikOK,simpan file index.php dan style.css anda tekanCTRL + S Mengatur Link WebsiteSekarang kita akan mengatur warna, ukuran, dan style Link secara default.Klik iconNew CSS Rule, isi pengaturannya sebagai berikut : Selector Type :Advanced (Ids, pseudo-class selectors) Selector :a Define in :style.cssSetelah munculCSS Rule Definition for a in style.css,isikan pengaturannya sebagai berikut :Type: Color :#ff6000 PadaDecorationcentangNoneJika sudah klik ok.Selanjutnya kita akan mengatur css link pada saat hover atau pada saat cursor berada di atas link. Klik kembali iconNew CSS Rule, isi pengaturannya sebagai berikut : Selector Type :Advanced (Ids, pseudo-class selectors) Selector :a:hover Define in :style.cssSetelah munculCSS Rule Definition for a in style.css,isikan pengaturannya sebagai berikut :Type: PadaDecorationcentangUnderline Jika anda ingin mengubah warna link pada saat hover klik icon kotak yang ada di sebelah tulisancolor,kemudian pilih warnanya.Jika sudah klik ok. Membuat Header WebsiteSetelah tadi kita mengatur bagian body dan link website, sekarang saatnya mengatur bagian header dari website.Pilih file index.php, kemudian ketikkan script berikut dan letakkan di bawah tag1

Sekarang kita akan mengatur CSS untuk headernya, caranya sama seperti mengatur CSS pada body. Klik iconNew CSS Rule, isi pengaturannya sebagai berikut : Selector Type :Advanced (Ids, pseudo-class selectors) Selector :#header Define in :style.cssSetelah munculCSS Rule Definition for #header in style.css,isikan pengaturannya sebagai berikuType: Size : 12 pixel Color : #FFFFFFBackground: Background image : klik browse pilihheader.jpgdalam folderimages Repeat: no-repeatBox : Width :860 pixel Float :Left Height :110 pixel Padding : centangsame for all,kemudian isikan20 pixelJika sudah klik OK, kemudian simpan filestyle.cssanda. Untuk melihat preview website anda tekanF12Selanjutnya kita akan memasukkanlogo websitedandeskripsi websitekedalam header, caranyaklik cursoranda setelahkemudian klikinsert = > image = > logo.jpgUsahakan logo yang anda buat tingginya / weight tidak lebih dari80pixel,jikalogo anda melebihi dari 80 pixel, anda dapat merubah ukurannya dengan cara :melalui Design View,klik gambar logoanda kemudian padapanel Propertyyang secara default berada di bagian bawah, padaH / Height isikan 80

Masih tetap padaPanel Property, padaLinkklik icon folder yang ada di sebelah kiri tulisan Edit, kemudian pilih fileindex.php. Ini berfungsi pada saat logo di klik akan mengarah ke halaman index atau halaman depan website anda.Pada bagianborderisikan 0, dan padaAltketikkan logo websiteku atau nama website nama anda.Dibawah code1

ketikkan1Deskripsi website anda disini

ga