Cara Membuat Website Full Tutorial

download
  • date post

    14-Nov-2015
  • Category

    Documents
  • view

    14
  • download

    5

Embed Size (px)

transcript

<p>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.</p> <p>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.</p> <p>2.1. Membuat Layout Website (langkah pertama).Pertama kita menentukan lebar website kita, buka program Adobe Photoshop anda, kemudian klikFile -&gt; Newatau tekanCtrl + N, isikanwidth 900 pixel,height 600 pixel, dan resolusi72 pixel/inch, kemudian klikok. Lihat pengaturannya pada gambar berikut.</p> <p>2.2. Membuat Layout Website (langkah ke-2).Buatlah guideline / garis bantu, pada menu bar Photoshop anda klikView-&gt;New Guide, padaOreientationpilihHorizontal, pada Position ketikkan150px, kemudian klikOK.</p> <p>Ulangi langkah tadi, klikView-&gt;New Guide, padaOreientationpilihVertical, pada Position ketikkan20px, kemudian klikOK. Ini adalah batas kedalam dari kiri website sebesar 20 pixel.Ulangi lagi langkah diatas, klikView-&gt;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-&gt;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-&gt;New Guide, padaOreientationpilihHorizontal, pada Position ketikkan520px, kemudian klikOK.Untuk membuatkolom sidebar / kolom sampingdari website,View-&gt;New Guide, padaOreientationpilihVertical, pada Position ketikkan680px, kemudian klikOK.Terakhir kita akan membuat garis bantu untukkonten,View-&gt;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.</p> <p>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.</p> <p> 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&gt;New Site</p> <p> Setting Site di Dreamweaver step 2Pada bagian ini kita akan mengaturLocal Infowebsite, isikan pengaturannya sebagai berikut :</p> <p> Setting Site di Dreamweaver step 3Pada bagian ini kita akan mengatur Remote Info website, isi pengaturanya sebagai berikut :</p> <p> Setting Site di Dreamweaver step 4Ini adalah bagian terakhir mensetting site di Dreamweaver cs 3, langkahnya sebagai berikut :</p> <p>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</p> <p>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</p> <p>Script tersebut berfungsi menghubungkan fileCSSdenganindex.php</p> <p> 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.</p> <p>Setelah muncul Window New CSS Rule, isi pengaturan sebagai berikut : Selector Type :Advanced (Ids, pseudo-class selectors) Selector :body Define in :style.css</p> <p>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</p> <p>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</p> <p>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 = &gt; image = &gt; 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</p> <p>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</p> <p>ketikkan1Deskripsi website anda disini</p> <p>ganti tulisandeskripsi website anda disinidengan deskripsi/penjelasan website anda.Simpanfile index.php dan style.csstekanCTRL + S, kemudian lihat previewnyatekan F12atau refresh browser andatekan F5. Memuat Menu Navigasi WebsiteSetelah kita membuat Header, selanjutnya kita akan membuat navigasi website yang berada di bagian bawah header. Navigasi isi akan berisi link link yang akan mengarah ke halaman tertentu sepertiprofile, gallery, atau contact.Pilih file index.php, kemudian ketikkan script berikut dan letakkan di atas1</p> <p>Sekarang kita akan mengatur CSS untuk navigasiny. Klik iconNew CSS Rule, isi pengaturannya sebagai berikut : Selector Type :Advanced (Ids, pseudo-class selectors) Selector :#navigasi Define in :style.cssSeleah munculCSS Rule Definition for #navigasi in style.css,isikan pengaturannya sebagai berikut :Background: Background image : klik browse pilihbg-nav.jpgdalam folderimages Repeat: no-repeatBox : Width :860 pixel Float :Left Height :35 pixel Pada bagianpaddinghilangkan centangsame for all,left :20 pixeldan right:20 pixel Pada bagianmargincentangsame for allisikan0 pixelJika sudah klik ok, simpan fileindex.php dan style.css.Selanjutnya pada Design View, klik di dalamMenu Navigasikemudian klikInsert &gt; Table</p> <p>Setelah muncul jendelaTable,isikan pengaturannya sebagai berikut : Rows : 1 Columns : 4 Table Width kosongkan saja Border Thickness kosongkan / delete saja. Cell Padding : 5 Cell Spacing : 5</p> <p>Jika sudah klik ok.Selanjutnya didalam kolom table ketikkan menu website anda, perhatikan gambar berikut</p> <p>Sekarang kita akan memberikan link pada menu tersebut, caranya blok tulisanHome=&gt; pada panel property cari kolomLinkklikicon folderkemudian pilih fileindex.php, lakukan hal yang sama pada menu lainnya, tetapi pada kolom link isikan saja#karena kita belum mempunyai filenya.</p> <p>Untuk halaman profile dan yang lainnya akan kita bahas pada artikel berikutnya.Sekarang kita akan mengubah warna link dari menu navigasi dengan mengatur CSS nya, caranya klik tulisanHome=&gt; klik iconNew CSS Rule, isi pengaturannya sebagai berikut : Selector Type :Advanced (Ids, pseudo-class selectors) Selector :#navigasi a Define in :style.cssSeleah munculCSS Rule Definition for #navigasi a in style.css,isikan pengaturannya sebagai berikut :Type: Color : #FFFFFF (kode warnaputih)Jika sudah klik ok. Simpan file index.php dan style.css anda tekanCTRL + S, kemudian preview tekanF12 Memuat Konten WebsiteSekarang kita akan membuat konten website, konten ini adalah tempat berita atau artikel anda.Pilih file index.php, kemudian ketikkan script berikut dan letakkan di atas1</p> <p>Klik iconNew CSS Rule, isi pengaturannya sebagai berikut : Selector Type :Advanced (Ids, pseudo-class selectors) Selector :#conten-wrapper Define in :style.cssSeleah munculCSS Rule Definition for #conten-wrapper in style.css,isikan pengaturannya sebagai berikut :Background: Background color : #DDDDDDBox : Width :860 pixel Float :Left Pada bagianmargincentangsame for all,isikan 0 pixel Pada bagianpaddinghilangkan centangsame for all, isikantop:0 pixel, bottom: 0 pixel, right:20pixel, left:0pixelPilih file index.php, kemudian ketikkan script berikut dan letakkan di bawah1</p> <p>Sehingga kodenya menjadi seperti berikut :123</p> <p>Klik iconNew CSS Rule, isi pengaturannya sebagai berikut : Selector Type :Advanced (Ids, pseudo-class selectors) Selector :#conten Define in :style.cssSeleah munculCSS Rule Definition for #conten in style.css,isikan pengaturannya sebagai berikut Background: Background color : #FFFFFFBox : Width :600 pixel Float :Left Pada bagianpaddingcentangsame for all,isikan 20 pixelJika sudah klik ok, simpan fileindex.php dan style.css. Memuat Sidebar WebsiteSidebar adalah kolom yang ada di sebelah konten website anda, biasanya berisi menu menu seperti berita terbaru atau link link tertentu.Pilih file index.php, kemudian ketikkan script berikut dan letakkan di bawah1</p> <p>Sehingga kodenya menjadi seperti berikut :Klik iconNew CSS Rule, isi pengaturannya sebagai berikut : Selector Type :Advanced (Ids, pseudo-class selectors) Selector :#sidebar Define in :style.cssSeleah munculCSS Rule Definition for #sidebar in style.css,isikan pengaturannya sebagai berikut :Box : Width :200 pixel Float :Left Pada bagianmargincentangsame for all,isikan 0 pixel Pada bagianpaddingcentangsame for all,isikan 10 pixelJika sudah klik ok, simpan fileindex.php dan style.css.Untuk isi sidebar akan aku jelaskan pada tutorial berikutnya.1234</p> <p> Memuat Footer WebsiteFotter adalah bagian bawah dari website yang biasanya bisa di isi dengan menu atau link tertentu, dan copyright anda.Pilih file index.php, kemudian ketikkan script berikut dan letakkan di atas1</p> <p>Sekarang kita akan mengatur CSS untuk footer. Klik iconNew CSS Rule, isi pengaturannya sebagai berikut : Selector Type :Advanced (Ids, pseudo-class selectors) Selector :#footer Define in :style.cssSeleah munculCSS Rule Definition for #footer in style.css,isikan pengaturannya sebagai berikutBackground: Background image : klik browse pilihfooter.jpgdalam folderimages Repeat: no-repeatBlock: Text align :CenterBox : Width :860 pixel Float :Left Height :80...</p>