Senin, 18 November 2013

CARA MEMBUAT DESAIN WEBSITE MENGGUNAKAN DREAMWEAVER

Dibagian pertama tutorial berkelanjutan ini kita telah mengenal sekilas mengenai profil Dreamweaver sebagai salah satu software web design. Oke deh, saya sarankan pembaca sudah mendownload dan sudah menginstal dreamweaver baik itu yang asli dan sudah di-purchase, trial, maupun yang versi tak asli yang serial number-nya didapat dari crack-crack-an, kayak saya ini :D. Atau kalau belum menginstal juga tidak masalah kok. Dreamweaver tidak membuat kita pintar, tapi kita yang membuat dreamweaver menjadi pintar. Gimana caranya? Dibagian ini kita akan mempelajari dasar-dasar dreamweaver untuk membuat website. 1. Silahkan jalankan program Dreamweaver jika pembaca telah menginstalnya. 2. Pada menu utama, pilih File --> New, maka akan muncul tampilan pilihan jenis dokumen baru yang ingin kita buat. Maksudnya adalah kita memilih apakah ingin membuat halaman web basic (statis), web dinamis (biasanya untuk web berbasis database), halaman template, dan lain-lain. Setiap kategori terdiri dari beberapa jenis dokumen. Menurut saya jenis ini dibedakan berdasarkan bahasa dan fungsi yang akan digunakan untuk halaman website yang akan kita buat. Karena saat ini kita mencoba belajar yang dasar terlebih dahulu, maka silahkan pilih kategori Basic Page dan jenisnya HTML. 3. Tampilan layar desain Dreamweaver terdiri dari 3 jenis, yaitu code, split, dan design. Layar Code berfungsi sebagai tempat kita membuat halaman web dengan mengetikbahasa pemograman secara langsung. Artinya, layar inilah yang menampilkan struktur bahasa pemograman web yang dipakai pada halaman web yang sedang kita buat. Pada bagian design, kita membuat website dengan menggunakan menu-menu yang tersedia, misalnya menu menambahkan gambar, membuat tabel, mengatur tampilan tulisan, dan lain-lain. Kita tidak perlu mengetik bahasa pemograman halaman web yang kita buat karena secara otomatis, setiap kita menambahkan sebuah elemen, maka dreamweaver akan menerjemaahkannya kedalam kalimat-kalimat bahasa pemograman yang kita gunakan. Inilah keunggulan dreamweaver dibanding notepad, frontpage, dan mungkin yang lainnya. Karena pada dreamweaver sudah tersedia menu-menu yang siap pakai untuk mendesain halaman web. Selain itu, interface-nya juga sangat bagus dan mudah digunakan. Bagian splitberguna untuk membagi halaman kerja dreamweaver menjadi 2, separuh untuk menampilkan layar code, dan separuh lagi menampilkan layar design. Hal ini berguna jika kita ingin mendesain halaman melalui layar design namun ingin melihat perubahan kode bahasa webnya, dan juga sebaliknya. Jika pembaca masuk ke layar Code, Anda akan melihatstruktur HTML sebagai contoh struktur: Untitled Document dimana struktur tersebut berfungsi untuk mendefenisikan judul halaman web kita yang akan muncul di title bar browser. 4. Dibagian kiri atas dibawah menu File, terdapat menu dropdown yang terdiri dari beberapa pilihan. Pilihan ini berguna untuk memilih menu-menu desain yang akan kita gunakan. Misalnya kita ingin menambah gambar, maka pilih Common, maka disebelah kanannya akan muncul menu-menu bergambar yang bisa kita gunakan, salah satunya untuk memasukkan gambar ke halaman website. 5. Coba pembaca masuk ke layar Design seperti yang saya jelaskan pada poin 3. Setelah memilih bagian tersebut, dibagian bawah pembaca akan melihat bagian Properties. Bagian ini berfungsi untuk mengatur tampilan dari elemen-elemen yang kita tambahkan kedalam halaman web yang kita buat. Menu-menu Properties ini hanya terlihat jika kita bekerja pada layar Design. 6. Dibagian samping, terdapat pula bagian yang bernama Panel. Salah satu fungsi panel ini adalah untuk mengatur file-file web yang telah kita buat. 7. Dibagian atas tepatnya disamping menu pilihan layar, ada kotak isian bernama Title. Bagian berfungsi untuk memberikan judul halaman web yang sedang kita buat yang akan muncul pada title bar browser. Fungsi ini sama seperti yang dijelaskan pada poin 3 diatas mengenai tag title. Coba pembaca ganti tulisan yang ada di kotak tersebut menjadi misalnya "Tutorial Website Dengan Dreamweaver". Setelah itu, kembali ke layar code dan lihat perubahan yang terjadi pada bagian tag . Membuat website statis dengan menggunakan Dreamweaver tools sebagai editor dengan membuatdokumen XHTML dan CSS sebagai style library external. Rencana yang akan dipersiapkan terlebih dahulu adalah sebagai berikut : 1. Desain Website 2. Membuat Website Dengan Dreamweaver * * * Desain website Untuk memulai membuat sebuah website, terlebih dahulu kita menggambarkan desain yang akan kita buat. Untuk kesempatan ini, kita akan membuat desain website statis dengan format xhtml yang akan dilanjutkan dengan membuat web menggunakan dreamweaver tools. 1.1 Tampilan website Tampilan halaman website / webpage pada kesempatan ini adalah membuat halaman web sederhana dengan 4 bagian / block seperti gambar dibawah ini dengan deskripsi sebagai berikut : Header Adalah tempat Judul website yang biasanya berada diposisi teratas dari webpage Menu Adalah Navigator dari Content layout, berisikan link informasi sebuah website. Pada kesempatan ini, layout menu dapat ditambahkan sesuai dengan kebutuhan pemilik seperti : home, article, about me, contact dsb Content Adalah tempat utama dari sebuah webpage, berisikan content dari informasi utama yang dapat dinavigasi melalui menu (hyperlink) pada bagian menu dan Footer hampir sama dengan header, namun yang membedakan adalah, posisi footer berada di bawah dari webpage. Dimana pada tutorial ini berisikan copyright pembuat / pemiliknya 1.2 Webpage Content Untuk tahap awal membuat website ini, kita akan membuat 4 halaman / webpage yang akan dinavigasi dari menu, dengan informasi sebagai berikut : 1. Home (Index.html) Menampilkan informasi Awal dari Website, halaman ini menjadi halaman homepage. dengan inisial Home pada menu navigasi 2. Article (Article.html) Menampilkan informasi tentang article. dengan inisial Article pada menu navigasi 3. About Me (About.html) Menampilkan informasi pemilik Website, halaman ini menjadi halaman homepage, pada kesempatan ini halaman ini dijadikan kumpulan informasi article pemilik 4. Contact (Contact.html) Menampilkan informasi Awal dari Website, halaman ini menjadi halaman homepage, pada kesempatan ini halaman ini dijadikan kumpulan informasi article pemilik 1.3 Menyiapkan Graphic / Gambar pendukung webpage Pada kesempatan ini, Graphic sudah terlebih dahulu dibuat mengunakan Adobe Photoshop. Yang ditempung pada file images sebagai berikut : Folder/ directory gambar background-header.png --> File gambar background header block background-footer.png --> File gambar background footer block background-content.png --> File gambar background content block background-menu.png --> File gambar background menu navigasi block pastikan file tersebut sudah anda simpan dalam PC anda pada folder images pada susunan file website anda. 1.4 File Management Website Sesuai dengan desain yang telah kita bahas, maka management file dari website yang akan kita buat adalah sebagai berikut : index.html --> html file, halaman utama / homepage article.html --> html file, halaman article about_me.html --> html file, halaman tentang pemilik contact.html --> html file, halaman contact pemilik template.css --> css file, Style Library halaman website Folder / directory gambar Buat 1 buah Folder / directory dengan nama “workshop” pada PC anda yang teletak pada “C:\” File management diatas akan berada pada folder yang anda buat. “C:\workshop\” Untuk awal tentunya anda belum mempunyai file index.html, about_me.html & template.css. file graphic pendukung dapat dicopy dari tempat yang telah disediakan. Membuat Website dengan Dreamweaver Untuk Memulai membuat website dengan dreamweaver, anda dapat langsung membukanya pada desktop shortcut atau melalui menu : start --> All Program --> Macromedia --> Macromedia Dreamweaver MX 2004 Pastikan Applikasi ini sudah terinstall terlebih dahulu pada PC yang akan anda gunakan. 2.1 Membuat Halaman Index.html Pada Dashboard Dreamweaver menu pilih “HTML” pada sub “Create New” Shortcut. Anda akan memasuki workspace Dreamweaver. Gambar 2.1.1 Title webpage Masukan Judul “Home” pada textbox title Gambar 2.1.2 Saving Index.html Save halaman Pertama anda dengan nama index.html pada folder “C:/apache2triad/htdocs/workshop/” Gambar 2.1.3 Setting Block Div masukan div tag pada halaman layout dengan class sesuai dengan design yg akan dibuat container, footer, content, menu, header seperti digambar sebelah ini. Gambar 2.1.4 Homepage Content masukan informasi sesuai dengan block yang telah dibuat (contoh seperti gambar disamping). 1.header block : Dengan nama anda dan motto 2.menu block : navigator halaman diikuti dengan fungsi hyperlink • Home • Article • About me • Contact 3.content block : informasi homepage berisikan kata sambutan, dsb 4.footer block : informasi pembuat 2.2 Membuat CSS dengan Dreamweaver MX Cascading style sheet dapat digunakan melalui 3 macam / jenis sebagai berikut : 1. Inline style – ditulis langsung pada setiap tag / elemen 2. Document level style – ditulis diantara bagian head HTML pada setiap dokumen 3. External style sheet – ditulis difile .css sebagai file external yang dapat dipanggil / digunakan lebih dari 1 halaman / webpage. Kita akan membuat dengan cara yang ke 3 dengan membuat sebuah file template.css melalui menu File --> new --> CSS pada kategori basic page. Selanjutnya gunakan template.css sebagai link stylesheet pada index.html dengan Attach style sheet pada panel CSS. Gambar 2.2.1 Attach External Css Halaman index.html akan menampung script sebagai berikut sebagai link CSS external <link href="template.css" rel="stylesheet" type="text/css" /> • setting semua style tag webpage dengan warna abu2 dengan margin dan padding 0. dengan menggunakan wizard dari dreamweaver atau menulis sctipt css sebagai berikut : * { color: #333333; margin: 0px; padding: 0px; } • selanjutnya setting style body, format text H1 dan H2 seperti script dibawah ini : body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; background-color: #313131; } h1 { text-transform: lowercase; color: #3399FF; font-size: 25px; } h2 { color:#3399FF; font-size: 14px; text-transform: uppercase; } • buat style tag div div { padding: 5px; border: 1px solid #FFFFFF; } • style class container .container { width: 600px; margin-top: 20px; margin-right: auto; margin-left: auto; padding: 0px; border: 3px ridge #FFFFFF; } • Style class header .header { background: #FFFFFF url(images/background-header.png); text-align: center; } • Style class content .content { font-size: 12px; background: #FFFFFF url(images/background-content.png) repeat-x; text-align: justify; } • Style class menu .footer { font-size: 11px; color: #FFFFFF; background: #FFFFFF url(images/background-footer.png); text-align: center; • Style class menu .menu { height:25px; padding:0px; border:0px; } • Advance class menu pada tag li, a dan a:hover .menu li { list-style:none; text-align: center; float: left; height: auto; width: 150px; font: 12px/25px Verdana, Arial, Helvetica, sans-serif; } .menu li a { font-weight: bold; text-transform: uppercase; color: #FFFFFF; text-decoration: none; background: url(images/background-menu.png); display: block; } .menu li a:hover { background: url(images/background-menu.png) 0 -25px; color:#000000; } Maka tampilan home page anda akan akan seperti sebagai berikut : Gambar 2.2.2 index.html Gambar 2.2.3 article.html Nahhh... gimana sobat ?? Cukup Mudah Kan Tutorialnya dalam membuat website sederhana ?? :) Semoga Bermanfaat sobat <div style='clear: both;'></div> </div> <div class='post-footer'> <span class='post-labels'> </span> <span class='post-comment-link'> </span> <span class='post-icons'> <span class='item-control blog-admin pid-1294827985'> <a href='https://www.blogger.com/post-edit.g?blogID=6787578412120978105&postID=5554238630236581727&from=pencil' title='Edit Entri'> <img alt='' class='icon-action' height='18' src='https://resources.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/> </a> </span> </span> <span class='post-location'> </span> </div> </div> <div class='comments' id='comments'> <a name='comments'></a> <h4> 0 komentar: </h4> <div id='Blog1_comments-block-wrapper'> <dl class='avatar-comment-indent' id='comments-block'> </dl> </div> <p class='comment-footer'> <div class='comment-form'> <a name='comment-form'></a> <h4 id='comment-post-message'>Posting Komentar</h4> <p> </p> <a href='https://www.blogger.com/comment/frame/6787578412120978105?po=5554238630236581727&hl=id' id='comment-editor-src'></a> <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='210' id='comment-editor' name='comment-editor' src='' width='100%'></iframe> <!--Can't find substitution for tag [post.friendConnectJs]--> <script src='https://www.blogger.com/static/v1/jsbin/1466990918-comment_from_post_iframe.js' type='text/javascript'></script> <script type='text/javascript'> BLOG_CMT_createIframe('https://www.blogger.com/rpc_relay.html', '0'); </script> </div> </p> <div id='backlinks-container'> <div id='Blog1_backlinks-container'> </div> </div> </div> </div> </div></div> <!--Can't find substitution for tag [adEnd]--> </div> <div class='blog-pager' id='blog-pager'> <span id='blog-pager-older-link'> <a class='blog-pager-older-link' href='https://itauye.blogspot.com/2013/11/cara-membuat-blog-di-blogspot-cara.html' id='Blog1_blog-pager-older-link' title='Posting Lama'>Posting Lama</a> </span> <a class='home-link' href='https://itauye.blogspot.com/'>Beranda</a> </div> <div class='clear'></div> <div class='post-feeds'> <div class='feed-links'> Langganan: <a class='feed-link' href='https://itauye.blogspot.com/feeds/5554238630236581727/comments/default' target='_blank' type='application/atom+xml'>Posting Komentar (Atom)</a> </div> </div> </div></div> </div> <!-- spacer for skins that want sidebar and main to be the same height--> <div class='clear'> </div> </div> <!-- end content-wrapper --> <div id='footer-bg'> <div id='footer'> <!-- Remmeber!!! This free Blogger template is licensed under the Creative Commons Attribution 3.0 License. You are required to keep the footer links intact which provides due credit to its Author and Supporters. --> Copyright © 2011 <a href='https://itauye.blogspot.com/'>sejarah SMK NU 03 KALIWUNGU</a>. Template by <a href='http://www.newbloggertemplate.net'>New Blogger Template</a></div> </div></div> </div> <!-- end outer-wrapper --> <script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/922809059-widgets.js"></script> <script type='text/javascript'> window['__wavt'] = 'AOuZoY50fIAkCVmcxd9ja6ryMBmQQzggjg:1718582758668';_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d6787578412120978105','//itauye.blogspot.com/2013/11/cara-membuat-desain-website-menggunakan.html','6787578412120978105'); _WidgetManager._SetDataContext([{'name': 'blog', 'data': {'blogId': '6787578412120978105', 'title': 'sejarah SMK NU 03 KALIWUNGU', 'url': 'https://itauye.blogspot.com/2013/11/cara-membuat-desain-website-menggunakan.html', 'canonicalUrl': 'http://itauye.blogspot.com/2013/11/cara-membuat-desain-website-menggunakan.html', 'homepageUrl': 'https://itauye.blogspot.com/', 'searchUrl': 'https://itauye.blogspot.com/search', 'canonicalHomepageUrl': 'http://itauye.blogspot.com/', 'blogspotFaviconUrl': 'https://itauye.blogspot.com/favicon.ico', 'bloggerUrl': 'https://www.blogger.com', 'hasCustomDomain': false, 'httpsEnabled': true, 'enabledCommentProfileImages': true, 'gPlusViewType': 'FILTERED_POSTMOD', 'adultContent': false, 'analyticsAccountNumber': '', 'encoding': 'UTF-8', 'locale': 'id', 'localeUnderscoreDelimited': 'id', 'languageDirection': 'ltr', 'isPrivate': false, 'isMobile': false, 'isMobileRequest': false, 'mobileClass': '', 'isPrivateBlog': false, 'isDynamicViewsAvailable': true, 'feedLinks': '\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22sejarah SMK NU 03 KALIWUNGU - Atom\x22 href\x3d\x22https://itauye.blogspot.com/feeds/posts/default\x22 /\x3e\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/rss+xml\x22 title\x3d\x22sejarah SMK NU 03 KALIWUNGU - RSS\x22 href\x3d\x22https://itauye.blogspot.com/feeds/posts/default?alt\x3drss\x22 /\x3e\n\x3clink rel\x3d\x22service.post\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22sejarah SMK NU 03 KALIWUNGU - Atom\x22 href\x3d\x22https://www.blogger.com/feeds/6787578412120978105/posts/default\x22 /\x3e\n\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22sejarah SMK NU 03 KALIWUNGU - Atom\x22 href\x3d\x22https://itauye.blogspot.com/feeds/5554238630236581727/comments/default\x22 /\x3e\n', 'meTag': '', 'adsenseHostId': 'ca-host-pub-1556223355139109', 'adsenseHasAds': false, 'adsenseAutoAds': false, 'boqCommentIframeForm': true, 'loginRedirectParam': '', 'view': '', 'dynamicViewsCommentsSrc': '//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js', 'dynamicViewsScriptSrc': '//www.blogblog.com/dynamicviews/1156f5042d12a8cd', 'plusOneApiSrc': 'https://apis.google.com/js/platform.js', 'disableGComments': true, 'interstitialAccepted': false, 'sharing': {'platforms': [{'name': 'Dapatkan link', 'key': 'link', 'shareMessage': 'Dapatkan link', 'target': ''}, {'name': 'Facebook', 'key': 'facebook', 'shareMessage': 'Bagikan ke Facebook', 'target': 'facebook'}, {'name': 'BlogThis!', 'key': 'blogThis', 'shareMessage': 'BlogThis!', 'target': 'blog'}, {'name': 'Twitter', 'key': 'twitter', 'shareMessage': 'Bagikan ke Twitter', 'target': 'twitter'}, {'name': 'Pinterest', 'key': 'pinterest', 'shareMessage': 'Bagikan ke Pinterest', 'target': 'pinterest'}, {'name': 'Email', 'key': 'email', 'shareMessage': 'Email', 'target': 'email'}], 'disableGooglePlus': true, 'googlePlusShareButtonWidth': 0, 'googlePlusBootstrap': '\x3cscript type\x3d\x22text/javascript\x22\x3ewindow.___gcfg \x3d {\x27lang\x27: \x27id\x27};\x3c/script\x3e'}, 'hasCustomJumpLinkMessage': false, 'jumpLinkMessage': 'Baca selengkapnya', 'pageType': 'item', 'postId': '5554238630236581727', 'pageName': 'CARA MEMBUAT DESAIN WEBSITE MENGGUNAKAN DREAMWEAVER', 'pageTitle': 'sejarah SMK NU 03 KALIWUNGU: CARA MEMBUAT DESAIN WEBSITE MENGGUNAKAN DREAMWEAVER'}}, {'name': 'features', 'data': {}}, {'name': 'messages', 'data': {'edit': 'Edit', 'linkCopiedToClipboard': 'Tautan disalin ke papan klip!', 'ok': 'Oke', 'postLink': 'Tautan Pos'}}, {'name': 'template', 'data': {'name': 'custom', 'localizedName': 'Khusus', 'isResponsive': false, 'isAlternateRendering': false, 'isCustom': true}}, {'name': 'view', 'data': {'classic': {'name': 'classic', 'url': '?view\x3dclassic'}, 'flipcard': {'name': 'flipcard', 'url': '?view\x3dflipcard'}, 'magazine': {'name': 'magazine', 'url': '?view\x3dmagazine'}, 'mosaic': {'name': 'mosaic', 'url': '?view\x3dmosaic'}, 'sidebar': {'name': 'sidebar', 'url': '?view\x3dsidebar'}, 'snapshot': {'name': 'snapshot', 'url': '?view\x3dsnapshot'}, 'timeslide': {'name': 'timeslide', 'url': '?view\x3dtimeslide'}, 'isMobile': false, 'title': 'CARA MEMBUAT DESAIN WEBSITE MENGGUNAKAN DREAMWEAVER', 'description': 'Dibagian pertama tutorial berkelanjutan ini kita telah mengenal sekilas mengenai profil Dreamweaver sebagai salah satu software web design. ...', 'url': 'https://itauye.blogspot.com/2013/11/cara-membuat-desain-website-menggunakan.html', 'type': 'item', 'isSingleItem': true, 'isMultipleItems': false, 'isError': false, 'isPage': false, 'isPost': true, 'isHomepage': false, 'isArchive': false, 'isLabelSearch': false, 'postId': 5554238630236581727}}]); _WidgetManager._RegisterWidget('_PageListView', new _WidgetInfo('PageList1', 'topnav', document.getElementById('PageList1'), {'title': 'Pages', 'links': [{'isCurrentPage': false, 'href': 'https://itauye.blogspot.com/', 'title': 'Beranda'}, {'isCurrentPage': false, 'href': 'https://itauye.blogspot.com/p/blog-page.html', 'id': '6795527072927338518', 'title': ''}], 'mobile': false, 'showPlaceholder': true, 'hasCurrentPage': false}, 'displayModeFull')); _WidgetManager._RegisterWidget('_HeaderView', new _WidgetInfo('Header1', 'header', document.getElementById('Header1'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML4', 'sidebar', document.getElementById('HTML4'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML2', 'sidebar', document.getElementById('HTML2'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_ProfileView', new _WidgetInfo('Profile1', 'sidebar', document.getElementById('Profile1'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_NavbarView', new _WidgetInfo('Navbar1', 'sidebar', document.getElementById('Navbar1'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_AttributionView', new _WidgetInfo('Attribution1', 'sidebar', document.getElementById('Attribution1'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_BlogArchiveView', new _WidgetInfo('BlogArchive1', 'sidebar', document.getElementById('BlogArchive1'), {'languageDirection': 'ltr', 'loadingMessage': 'Memuat\x26hellip;'}, 'displayModeFull')); _WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML3', 'sidebar2', document.getElementById('HTML3'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_PopularPostsView', new _WidgetInfo('PopularPosts1', 'sidebar2', document.getElementById('PopularPosts1'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML1', 'sidebar2', document.getElementById('HTML1'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_BlogView', new _WidgetInfo('Blog1', 'main', document.getElementById('Blog1'), {'cmtInteractionsEnabled': false, 'lightboxEnabled': true, 'lightboxModuleUrl': 'https://www.blogger.com/static/v1/jsbin/630159536-lbx.js', 'lightboxCssUrl': 'https://www.blogger.com/static/v1/v-css/13464135-lightbox_bundle.css'}, 'displayModeFull')); </script> </body> </html>