Tutorial Penggunaan Dreamweaver (CODING)

 

Puji syukur hanya pantas dipersembahkan kehadirat Allah SWT atas limpahan berkah, nikmat dan pertolongan-Nya berupa kemudahan dan kelancaran, serta petunjuk-Nya yang diberikan sehingga penyusun bisa melewati semua kendala dalam penyusunan makalah Desain Web ini serta menyelesaikan sesuai batas waktu yang diberikan.
Makalah ini dimaksudkan untuk memenuhi tugas  yang diberikan. Makalah ini disusun sesuai web yang dibuat. Pokok-pokok pembahasan diuraikan secara terperinci dengan menggunakan bahasa yang sederhana dan mudah dicerna sehingga diharapkan bisa dipahami oleh pembaca secara luas.
Karena banyaknya kendala dan keterbatasan, penyusun menyadari  makalah ini tidak terlepas dari kekurangan. Akhir kata, penyusun menghaturkan rasa terimakasih yang sedalam-dalamnya kepada banyak pihak yang telah memberikan dorongan dan bantuan dalam penyelesaian makalah ini.  Penyusun menerima saran dan kritik yang membangun untuk kesempurnaan makalah ini. Semoga makalah ini bermanfaat bagi kita semua. Amin!
                                   

Pendahuluan

Perancangan web (web design) adalah istilah umum yang digunakan untuk mencakup bagaimana isi web konten ditampilkan, (biasanya berupa hypertext atau hypermedia) yang dikirimkan ke pengguna akhir melalui World Wide Web, dengan menggunakan sebuah browser web atau perangkat lunak berbasis web. Tujuan dari web design adalah untuk membuat website sekumpulan konten online termasuk dokumen dan aplikasi yang berada pada server web / server. Sebuah website dapat berupa sekumpulan teks, gambar, suara dan konten lainnya, serta dapat bersifat interaktif ataupun statis.
Elemen-elemen seperti teks, forms, images (GIFs, JPEGs, Portable Network Graphics). Browser terkadang juga memerlukan Plug-ins seperti Adobe Flash, QuickTime, Java, dan sebagainya untuk menampilkan beberapa media yang diletakkan di dalam halaman web menggunakan tag-tag HTML/XHTML.
Halaman web dan situs web dapat berupa halaman statis, atau dapat diprogram secara dinamis sehingga menghasilkan halaman web dengan konten atau tampilan visual yang diinginkan, tergantung pada berbagai faktor, seperti masukan dari pengguna akhir, masukan dari Webmaster, atau perubahan dalam lingkungan komputasi (seperti situs yang terkait dengan database yang telah diubah).
Perancang web atau desainer web (web designer) adalah orang yang memiliki keahlian menciptakan konten presentasi (biasanya hypertext atau hypermedia) yang dikirimkan ke pengguna-akhir melalui World Wide Web, menggunakan Web browser atau perangkat lunak Web-enabled lain seperti televisi internet, Microblogging, RSS, dan sebagainya.
Dengan berkembangnya spesialisasi dalam desain komunikasi dan bidang teknologi informasi, ada kecenderungan kuat untuk menarik garis yang jelas antara web design khusus untuk halaman web dan pengembangan web secara keseluruhan dari semua layanan berbasis web.
Adobe Dreamweaver merupakan program penyunting halaman web keluaran Adobe Systems yang dulu dikenal sebagai Macromedia Dreamweaver keluaran Macromedia. Program ini banyak digunakan oleh pengembang web karena fitur-fiturnya yang menarik dan kemudahan penggunaannya. Versi terakhir Macromedia Dreamweaver sebelum Macromedia dibeli oleh Adobe Systems yaitu versi 8. Versi terakhir Dreamweaver keluaran Adobe Systems adalah versi 10 yang ada dalam Adobe Creative Suite 4 (sering disingkat Adobe CS4).
Pada Web ini kami menggunakan

• Bahasa Markup (seperti HTML, XHTML dan XML)
• Gaya lembar bahasa (seperti CSS dan XSL)

Dan dengan menggunakan Dream Weaver untuk mempermudah pembuatan desain web, web yang kami tampilkan berupa web Toko Online, yaitu Toko yang menjual pakaian secara online system yang digunakan di web kami, pertama pengunjung harus register dahulu kalau sudah registrasi maka pengunjung tinggal log in, dan memilih pakaian sesuai selera di web kami, system pembayaran dapat melalui rekening bank, pakaian yang sudah dipesan bisa di ambil sendiri ataupun bisa diantarkan.

Pembahasan

Saddam Wordpress  merupakan website yang berisi tentang petualangan-petualangan pendakian di Indonesia. Di website ini terdapat informasi tentang lokasi tempat pendakian di Indonesia anda juga bisa melihat gallery foto-foto tentang petualangan-petualangan yang saya alami. Dan anda bisa join atau gabung di petualanganku dengan menghubungi contact yang saya sediakan.
Proses membuat web ini kami gunakan dengan bantuan software dreamweaver dan photoshop utnuk edit gambar . Script yang kami gunakan diantaranya CSS3 dan HTML5 seperti.
Berikut adalah css file yang saya gunakan untuk contoh web ini.
@font-face {
font-family: Yanone Kaffeesatz;
src: url(‘../fonts/YanoneKaffeesatz-Regular.eot’);
src: local(“Yanone Kaffeesatz”), url(‘../fonts/YanoneKaffeesatz-Regular.ttf’);
}
@font-face {
font-family: News Cycle;
src: url(‘../fonts/NewsCycle-Regular.eot’);
src: local(“News Cycle”), url(‘../fonts/NewsCycle-Regular.ttf’);
}
html {
height: 100%;
}
* {
margin: 0;
padding: 0;
}
/* tell the browser to render HTML 5 elements as block */
article, aside, figure, footer, header, hgroup, nav, section {
display:block;
}
body {
font: normal .80em arial, sans-serif;
background: #eeeeee url(../images/pattern.png);
color: #444;
}
p {
padding: 0 0 20px 0;
line-height: 1.7em;
}
img {
border: 0;
}
h1, h2, h3, h4, h5, h6 {
color: #362C20;
letter-spacing: 0em;
padding: 0 0 5px 0;
}
h1, h2, h3 {
font: normal 140% arial, sans-serif;
margin: 0 0 15px 0;
padding: 15px 0 5px 0;
color: #222;
}
h2 {
font-size: 160%;
padding: 9px 0 5px 0;
}
h3 {
font-size: 140%;
padding: 5px 0 0 0;
}
h4, h6 {
color: #00AAD5;
padding: 0 0 5px 0;
font: normal 160% ‘News Cycle’, arial, sans-serif;
}
h5, h6 {
color: #555;
font: italic 95% arial, sans-serif;
letter-spacing: normal;
padding: 0 0 15px 0;
}
a, a:hover {
outline: none;
text-decoration: underline;
color: #B30303;
}
a:hover {
text-decoration: none;
}
blockquote {
margin: 20px 0;
padding: 10px 20px 0 20px;
border: 1px solid #E5E5DB;
background: #FFF;
}
ul {
margin: 2px 0 22px 17px;
}
ul li {
list-style-type: circle;
margin: 0 0 6px 0;
padding: 0 0 4px 5px;
line-height: 1.5em;
}
ol {
margin: 8px 0 22px 20px;
}
ol li {
margin: 0 0 11px 0;
}
.left {
float: left;
width: auto;
margin-right: 10px;
}
.right {
float: right;
width: auto;
margin-left: 10px;
}
.center {
display: block;
text-align: center;
margin: 20px auto;
}
#main, nav, #container, #logo, #site_content, footer {
margin-left: auto;
margin-right: auto;
}
#main {
margin: 5px auto;
width: 940px;
background: transparent;
padding-bottom: 30px;
}
header {
background: transparent;
height: 130px;
}
#logo {
width: 940px;
height: 130px;
background: transparent;
color: #888;
padding: 0;
float: left;
}
#logo h1, #logo h2 {
font: normal 320% ‘News Cycle’, arial, sans-serif;
border-bottom: 0;
text-transform: none;
margin: 0;
}
#logo_text h1, #logo_text h1 a, #logo_text h1 a:hover {
padding: 0;
color: #444;
text-decoration: none;
}
#logo_text h1 a .logo_colour {
color: #B30303;
}
#logo_text a:hover .logo_colour {
color: #444;
}
#logo_text h2 {
font-size: 140%;
padding: 0 0 0 0;
color: #222;
}
nav {
height: 44px;
width: 940px;
float: right;
margin: -20px auto 0 auto;
color: #222;
background: #ddd; /* Show a solid color for older browsers */
background: -moz-linear-gradient(#fff, #ddd);
background: -o-linear-gradient(#fff, #ddd);
background: -webkit-linear-gradient(#fff, #ddd);
-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 2px;
-moz-box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 2px;
box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 2px;
border: 1px solid #eee;
border-radius: 7px 7px 7px 7px;
-moz-border-radius: 7px 7px 7px 7px;
-webkit-border: 7px 7px 7px 7px;
}
#site_content {
width: 940px;
overflow: hidden;
margin: 0px auto 0 auto;
padding: 15px 0 15px 0;
}
#sidebar_container {
float: right;
width: 224px;
margin: 25px 0 0 0;
}
.sidebar {
float: right;
width: 200px;
padding: 5px 20px;
margin: 0 0 17px 0;
}
.sidebar h3, .content h1 {
padding: 0 15px 20px 0;
font: 230% ‘News Cycle’, arial, sans-serif;
text-shadow:  #FFF 1px 1px;
margin: 0 1px;
color: #444;
}
.sidebar h3 {
color: #444;
font: 250% ‘News Cycle’, arial, sans-serif;
padding: 0 15px 5px 0;
}
.sidebar ul {
margin: 0 0 15px 0;
}
.sidebar li a, .sidebar li a:hover {
color: #555;
text-decoration: none;
}
.sidebar li a:hover {
text-decoration: underline;
}
.sidebar_item, .content_item {
padding: 15px 0;
}
.content {
text-align: left;
width: 670px;
margin: 25px 0 0 0;
float: left;
font-size: 120%;
}
.content ul {
margin: 2px 0 22px 0px;
}
.content ul li, .sidebar ul li {
list-style-type: none;
background: url(../images/bullet.png) no-repeat;
margin: 0 0 0 0;
padding: 0 0 4px 28px;
line-height: 1.5em;
}
footer {
width: 950px;
font: 170% ‘Yanone Kaffeesatz’, arial, sans-serif;
height: 30px;
padding: 5px 0 20px 0;
text-align: center;
background: #ddd; /* Show a solid color for older browsers */
background: -moz-linear-gradient(#fff, #ddd);
background: -o-linear-gradient(#fff, #ddd);
background: -webkit-linear-gradient(#fff, #ddd);
-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 2px;
-moz-box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 2px;
box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 2px;
border: 1px solid #eee;
border-radius: 7px 7px 7px 7px;
-moz-border-radius: 7px 7px 7px 7px;
-webkit-border: 7px 7px 7px 7px;
}
footer p {
line-height: 1.7em;
padding: 0 0 10px 0;
}
footer a {
color: #222;
text-decoration: none;
}
footer a:hover {
color: #222;
text-shadow: none;
text-decoration: underline;
}
.form_settings {
margin: 15px 0 0 0;
}
.form_settings p {
padding: 0 0 4px 0;
}
.form_settings span {
float: left;
width: 200px;
text-align: left;
}
.form_settings input, .form_settings textarea {
padding: 5px;
width: 299px;
font: 100% arial;
border: 1px solid #D5D5D5;
background: #FFF;
color: #47433F;
border-radius: 7px 7px 7px 7px;
-moz-border-radius: 7px 7px 7px 7px;
-webkit-border: 7px 7px 7px 7px;
}
.form_settings .submit {
font: 140% ‘Yanone Kaffeesatz’, arial, sans-serif;
border: 0;
width: 99px;
margin: 0 0 0 212px;
height: 33px;
padding: 2px 0 3px 0;
cursor: pointer;
background: #ddd; /* Show a solid color for older browsers */
background: -moz-linear-gradient(#fff, #ddd);
background: -o-linear-gradient(#fff, #ddd);
background: -webkit-linear-gradient(#fff, #ddd);
-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 2px;
-moz-box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 2px;
box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 2px;
border: 1px solid #ddd;
border-radius: 7px 7px 7px 7px;
-moz-border-radius: 7px 7px 7px 7px;
-webkit-border: 7px 7px 7px 7px;
color: #222;
text-shadow: 1px 1px #FFF;
}
.form_settings textarea, .form_settings select {
font: 100% arial;
width: 299px;
}
.form_settings select {
width: 310px;
}
.form_settings .checkbox {
margin: 4px 0;
padding: 0;
width: 14px;
border: 0;
background: none;
}
.separator {
width: 100%;
height: 0;
border-top: 1px solid #D9D5CF;
border-bottom: 1px solid #FFF;
margin: 0 0 20px 0;
}
table {
margin: 10px 0 30px 0;
}
table tr th, table tr td {
background: #BBB;
color: #FFF;
padding: 7px 4px;
text-align: left;
}
table tr td {
background: #DDD;
color: #444;
border-top: 1px solid #FFF;
}
/* Image Transitions */
ul#images {
margin: 0 15px 10px 0;
padding: 0;
list-style: none;
position: relative;
}
ul#images li {
display: block;
overflow: hidden;
padding: 0;
float: left;
width: 155px;
height: 300px;
}
/**
Stylesheet for SooperFish by http://www.SooperThemes.com
Author: Jurriaan Roelofs
**/
/* Configuration of menu width */
html body ul.sf-menu ul,html body ul.sf-menu ul li {
width: 200px;
}
html body ul.sf-menu ul ul {
margin: 0 0 0 200px;
}
/* Framework for proper showing/hiding/positioning */
ul.sf-menu,ul.sf-menu * {
margin: 0;
padding: 0;
}
ul.sf-menu {
display: block;
position: relative;
}
ul.sf-menu li {
display: block;
list-style: none;
float: left;
position: relative;
}
ul.sf-menu li:hover {
visibility: inherit; /* fixes IE7 ‘sticky bug’ */
}
ul.sf-menu a {
display: block;
position: relative;
}
ul.sf-menu ul {
position: absolute;
left: 0;
width: 150px;
top: auto;
left: -999999px;
}
ul.sf-menu ul a {
zoom: 1; /* IE6/7 fix */
}
ul.sf-menu ul li {
float: left; /* Must always be floated otherwise there will be a rogue 1px margin-bottom in IE6/7 */
width: 150px;
}
ul.sf-menu ul ul {
top: 0;
margin: 0 0 0 150px;
}
ul.sf-menu li:hover ul,ul.sf-menu li:focus ul,ul.sf-menu li.sf-hover ul,
ul.sf-menu ul li:hover ul,ul.sf-menu ul li:focus ul,ul.sf-menu ul li.sf-hover ul,
ul.sf-menu ul ul li:hover ul,ul.sf-menu ul ul li:focus ul,ul.sf-menu ul ul li.sf-hover ul,
ul.sf-menu ul ul ul li:hover ul,ul.sf-menu ul ul ul li:focus ul,ul.sf-menu ul ul ul li.sf-hover ul {
left: auto;
}
ul.sf-menu li:hover ul ul,ul.sf-menu li:focus ul ul,ul.sf-menu li.sf-hover ul ul,
ul.sf-menu ul li:hover ul ul,ul.sf-menu ul li:focus ul ul,ul.sf-menu ul li.sf-hover ul ul,
ul.sf-menu ul ul li:hover ul ul,ul.sf-menu ul ul li:focus ul ul,ul.sf-menu ul ul li.sf-hover ul ul,
ul.sf-menu ul ul ul li:hover ul ul,ul.sf-menu ul ul ul li:focus ul ul,ul.sf-menu ul ul ul li.sf-hover ul ul {
left: -999999px;
}
/* autoArrows CSS */
span.sf-arrow {
width: 7px;
height: 7px;
position: absolute;
top: 20px;
right: 5px;
display: block;
background: url(../images/arrows-black.png) no-repeat 0 0;
overflow: hidden; /* making sure IE6 doesn’t overflow and expand the box */
font-size: 1px;
}
ul ul span.sf-arrow {
right: 5px;
top: 20px;
background-position: 0 100%;
}
/* Theming the menu */
ul#nav {
float: left;
}
ul#nav ul {
background: #ddd;
margin-top: 5px;
padding-bottom: 15px;
}
ul#nav li a {
padding: 7px 25px 6px 25px;
font: 170% ‘Yanone Kaffeesatz’, arial, sans-serif;
text-shadow: 1px 1px #fff;
text-decoration: none;
color: #222;
margin-right: 2px;
}
ul#nav li a:hover, ul#nav li a:focus, ul#nav li.selected a, ul#nav li.selected a:hover, ul#nav li.selected a:focus {
color: #B30303;
text-shadow: none;
}
ul#nav ul li a {
color: #222;
}
ul#nav ul li a:hover {
color: #B30303;
margin-right: 2px;
}
/* Image Transitions */
ul#images {
margin: 0 15px 10px 0;
padding: 0;
position: relative;
}
ul#images li {
display: block;
overflow: hidden;
padding: 0;
float: left;
width: 155px;
height: 300px;
list-style: none;
}
Untuk menghubungkan css dengan file html gunakan script berikut:

<link rel="stylesheet" href="styles.css" type="text/css" media="all" />

Berikut ini adalah isi html dari homepage dan juga tampilannya :
<!DOCTYPE HTML>
<html>
<head>
<title>CSS3_seascape_two</title>
<meta name=”description” content=”website description” />
<meta name=”keywords” content=”website keywords, website keywords” />
<meta http-equiv=”content-type” content=”text/html; charset=UTF-8″ />
<link rel=”stylesheet” type=”text/css” href=”css/style.css” />
<!– modernizr enables HTML5 elements and feature detects –>
<script type=”text/javascript” src=”js/modernizr-1.5.min.js”></script>
<style type=”text/css”>
<!–
.style1 {
font-size: 80%;
font-weight: bold;
}
–>
</style>
</head>
<body>
a
<div id=”main”>
<header>
<div id=”logo”>
<div id=”logo_text”>
<!–, allows you to change the colour of the text –>
<h1><a href=”index.html”><span>Saddam</span>Wordpress</a></h1>
<h2>My Life. My Experience. My Adventure.</h2>
</div>
</div>
<nav>
<ul id=”nav”>
<li><a href=”index.html”>Home</a></li>
<li><a href=”examples.html”>Profile</a></li>
<li><a href=”page.html”>Galery</a></li>
<li><a href=”another_page.html”>My Adventure</a></li>
<li><a href=”#”>My Life</a></li>
<li><a href=”#”>My Experience </a></li>
<li><a href=”contact.php”>Contact Me</a></li>
</ul>
</nav>
</header>
<div id=”site_content”>
<ul id=”images”>
<li><img src=”images/1.jpg” width=”600″ height=”300″ alt=”seascape_one” /></li>
<li><img src=”images/2.jpg” width=”600″ height=”300″ alt=”seascape_two” /></li>
<li><img src=”images/3.jpg” width=”600″ height=”300″ alt=”seascape_three” /></li>
<li><img src=”images/4.jpg” width=”600″ height=”300″ alt=”seascape_four” /></li>
<li><img src=”images/5.jpg” width=”600″ height=”300″ alt=”seascape_five” /></li>
<li><img src=”images/6.jpg” width=”600″ height=”300″ alt=”seascape_seascape” /></li>
</ul>
<div id=”sidebar_container”>
<div>
<h3>My Profil </h3>
<h4>Abdul Rochman</h4>
<p><img src=”file:///D|/photo/g.bromo 3rd/399425_403242289724544_207732337_n.jpg” width=”165″ height=”160″> </p>
<p>Malang, 21- April – 1991<br>
Wagir , Jl.Gatot Koco
<br />
<a href=”#”>Read more info </a></p>
</div>
</div>
<div>
<h1>Welcome to Saddam Wordpress </h1>
<p>Berparahu, <em>trekking,</em> berselancar, dan panjat tebing,  hanyalah    sebagian petualangan yang mendebarkan jantung yang ditawarkan   Indonesia. Dari arum jeram di Sungai Maiting yang berarus deras di   Sulawesi sampai panjat tebing di pucak salah satu gunung berapi terkenal   di dunia di Krakatau,  Indonesia memiliki cukup petualangan yang   mendebarkan jantung dan memacu adrenalin Anda.  Temukan seluruh   keceriaan  dunia baru ketika Anda mendaki gunung merapi yang masih aktif   dan melihat pemadangan-pemandangan yang menakjubkan dan memanjakan   mata.  Untuk mereka yang cukup tidak bermasalah dalam jarak dan tidak   takut dengan kegelapan, menjelajahi gua-gua di Jawa dimana Anda akan   melihat beberapa formasi batu yang unik dan tidak akan Anda temukan di   belahan dunia lain yang akan membuat mulut Anda ternganga. Ketika Anda   berjalan-jalan di kepulauan,  menaklukkan beberapa ombak besar terbaik   dunia  di Sumatra Utara atau mendaki  puncak Gunung  Papua yang   diselimuti salju. Untuk para pendaki yang tidak takut dengan perjalanan   yang  agak menantang, berpetualang di hutan Kalimantan dimana Anda akan   bertemu Orang Dayak, melihat kehidupan liar dan berdekatan dengan Orang   utan. Datanglah ke Indonesia dan Anda akan mendapatkan pengalaman yang   tak terlupakan, menantang dan menyenangkan.</p>
</div>
</div>
<footer>
<p>Copyright &copy; Saddam-Ridwan | <a href=”Saddam”>Politeknik Kota Jakarta </a></p>
</footer>
</div>
<p>&nbsp;</p>
<!– javascript at the bottom for fast page loading –>
<script type=”text/javascript” src=”js/jquery.js”></script>
<script type=”text/javascript” src=”js/jquery.easing-sooper.js”></script>
<script type=”text/javascript” src=”js/jquery.sooperfish.js”></script>
<script type=”text/javascript” src=”js/jquery.kwicks-1.5.1.js”></script>
<script type=”text/javascript”>
$(document).ready(function() {
$(‘#images’).kwicks({
max : 600,
spacing : 2
});
$(‘ul.sf-menu’).sooperfish();
});
</script>
</body>
</html>