Senin, 30 Maret 2009

Cara Membuat Menu Drop Down Dengan CSS

Kali ini kita akan membuat satu lagi tutorial pembuatan menu pada sebuah web. Seperti yang pernah saya katakan bahwa banyak cara mendesain sebuah menu pada web termasuk pada sebuah blog. Jika postingan sebelumnya membahas pembuatan menu drop down horizontal dengan menggunakan JavaScript, maka kali ini saya akan memberikan tutorial web tentang bagaimana membuat menu drop down dengan CSS.

Menu drop down dengan JavaScript maupun CSS sebenarnya sama saja jika dilihat dari segi fungsi atau kegunaan. Namun, jika memanfaatkan JavaScript biasanya menu yang dibuat lebih keren dan menarik dilihat karena mungkin animasi menu yang dihasilkan lebih bagus. Namun, JavaScript biasanya membuat halaman kita menjadi lebih berat. Sebaliknya jika menggunakan CSS, biasanya menu yang dihasilkan memang terlihat lebih kaku namun lebih ringan. Tampilannya juga bisa kita desain lebih menarik sesuai dengan kreasi kita memanfaatkan CSS dalam membuat menu tersebut. Berikut cara membuat sebuah menu drop down:

Saya akan menjelaskan steb by step bagaimana mendesain menu drop down tersebut.
  1. Buatlah terlebih dahulu struktur drop down menu tersebut. Pembuatan struktur ini menggunakan tag yang berfungsi untuk membuat list, sebab menu-menu tersebut bisa dikatakan sebuah list dari item-item. Item-item itulah yang kita fungsikan sebagai menu. Tag tersebut adalah <ul></ul> sebagai level utama dan <li></li> sebagai sub level. Saya berikan sebuah contoh struktur HTML dari menu drop down:
    <ul>
    <li><a href="URL 1">MENU 1</a></li>
    <li><a href="URL 2">MENU 2</a></li>
    <li><a href="URL 3">MENU 3</a></li>
    </ul>

    Perhatikan bahwa keseluruhan struktur dibungkus oleh tag <ul></ul>, artinya bahwa terdapat sebuah bagan list dimana item-item yang menjadi isi dari bagan tersebut (yang menjadi list) adalah "Menu 1", "Menu 2", dan "Menu 3" yang masing-masing dibungkus oleh tag <li></li>.
  2. Struktur tersebut akan menjadi sebuah menu horizontal biasa, sama seperti tutorial menu horizontal yang pernah saya buat pada postingan yang sebelumnya. Silahkan baca disini. Nah, kita akan membuat agar menu-menu tersebut mempunyai sub menu lagi yang mana sub menu tersebut muncul ketika menu utamanya di sorot (sehingga disebut drop down menu). Dengan demikian, kita akan membuat sebuah bagan list lagi dimana bagan ini akan berada di dalam bagan list menu utama. Dengan kata lain di dalam list akan ada list. Bingung ya?he3x. Strukturnya akan seperti ini:
    <ul>
    <li><a href="URL 1">MENU 1</a>
    <ul>
    <li><a href="URL sub 1">Sub menu 1</a></li>
    <li><a href="URL sub 2">Sub menu 2</a></li>
    <li><a href="URL sub 3">Sub menu 3</a></li>
    </ul>
    </li>
    <li><a href="URL 2">MENU 2</a></li>
    <li><a href="URL 3">MENU 3</a></li>
    </ul>

    Prinsip list tersebut sama dengan penjelasan pada langkah 1, hanya saja tag </li></li> tidak lagi hanya membungkus struktur "Menu 1", tetapi sudah ikut membungkus sub menu dari "Menu 1" juga (perhatikan end tag </li> yang berwarna merah). Pada browser, struktur tersebut akan terlihat seperti gambar berikut:
  3. Karena kita ingin membuat sebuah menu drop down yang tampil secara horizontal, maka kita akan mengatur tampilannya dengan menggunakan CSS. Postingan yang lalu hanya membahas pembuatan menu horizontal yang biasa, sehingga pembuatan CSS kali ini juga akan sedikit berbeda. Untuk CSS menu drop down tersebut, kita buat seperti ini:
    • Untuk menghilangkan list style pada menu drop down (seperti yang terlihat pada gambar dilangkah 2:
      #menuku ul {
      list-style: none;
      }

      #menu ul --> artinya kita mengatur bagan list (ul) yang ada didalam elemen yang kita beri atribut ID dengan nama "menuku". Elemen itu akan kita buat selanjutnya, apakah sebuah div, span, dan lain-lain.
      list-style: none --> berfungsi untuk menghilangkan style dari list tersebut (style itu berupa bullet).
      padding:0 dan margin:0 --> berfungsi agar jarak dari semua sisi pada bagan tersebut sebesar 0 sehingga tidak merusak layout dari bagan list menu tersebut.
    • Untuk membuat menu-menu tersebut tampil secara horizontal:
      #menu li {
      float: left;
      }

      #menu li --> artinya hampir sama dengan #menu ul, hanya saja ini digunakan untuk mengatur list-list menu itu sendiri, yaitu Menu 1, Menu 2, dan Menu 3 (yang kita buat pada langkah 1).
      float: left --> artinya kita membuat menu-menu tersebut berjejer horizontal dari kiri
    • Karena kita ingin sub menu muncul hanya ketika pointer berada diatas menu utama, maka kita perlu menyembunyikan bagan list dari sub menu tersebut.
      #menu ul ul {
      visibility:hidden;
      width:149px;
      }

      #menu ul ul --> artinya hampir sama dengan #menu ul namun struktur ini berfungsi untuk mengatur bagan list sub menu yang berada didalam bagan list menu utama.
      visibility:hidden --> berfungsi untuk menghilangkan bagan list sub menu (ul yang kedua)
      width:149px --> berfungsi untuk membuat lebar bagan list sub menu tersebut sebesar 149px.
    • Agar sub menu tersebut muncul ketika menu utama disorot, maka kita buat struktur CSS seperti berikut:
      #menu ul li:hover ul,
      #menu ul a:hover ul{
      visibility:visible;
      }

      CSS tersebut berfungsi agar bagan list sub menu akan terlihat ketika pointer berada di atas menu utama serta di atas link yang ada pada bagan list sub menu tersebut.
    • Kita akan mengatur sedikit tampilan dari menu-menu tersebut agar terlihat lebih menarik
      #menu li a {
      background-color:#000000;
      height: 2em;
      width: 149px;
      display: block;
      border: 0.1em solid #dcdce9;
      color: #ffffff;
      text-decoration: none;
      text-align: center;
      }

      Karena menu tersebut akan menjadi berupa link, maka kita akan mengatur tampilannya sebagai sebuah link.
      background-color:#000000 -->warna backgroundnya adalah #000000
      height: 2em --> tinggi dari menu tersebut sebesar 2em
      width: 149px --> lebar menu sebesar 149px
      display: block --> menu tersebut akan tampil dalam bentuk block
      border: 0.1em solid #999999 --> border menu sebesar 0.1em, berbentuk solid, dan memiliki warna dengan kode #999999. Untuk mengetahui kode warna CSS yang lain silahkan buka disini.
      color: #FFFFFF --> tulisan menu akan berwarna #FFFFFF
      text-decoration: none --> link menu tidak akan mempunyai garis bawah
      text-align: center --> letak tulisan menu akan berada ditengah-tengah
  4. Setelah membuat CSS dari drop down menu tersebut, maka selanjutnya adalah memasangkan atribut CSS pada bagan list menu tersebut. Kita akan memasukkan bagan list menu tersebut terlebih dahulu kedalam sebuah div, sehingga pada div tersebut atribut "menuku" akan dipasang. Ganti struktur pada langkah 2 menjadi seperi berikut:
    <div id="menuku">
    <ul>
    <li><a href="URL 1">MENU 1</a>
    <ul>
    <li><a href="URL sub 1">Sub menu 1</a></li>
    <li><a href="URL sub 2">Sub menu 2</a></li>
    <li><a href="URL sub 3">Sub menu 3</a></li>
    </ul>
    </li>
    <li><a href="URL 2">MENU 2</a></li>
    <li><a href="URL 3">MENU 3</a></li>
    </ul>
    </div>
  5. Hasilnya akan seperti ini:
Selanjutnya kita akan mempejalari tutorial memasang menu drop down dengan CSS pada sebuah blog. So, jangan kemana-mana ya. Datang lagi dan beri komentar.. :D

»»  read more

Minggu, 29 Maret 2009

Cara Membuat Album Foto Pada Blogspot Memakai Gadget

Tips cara membuat album foto pada blogspot ini sebenarnya sudah pernah saya berikan beberapa waktu yang lalu disini. Hanya saja posting yang pertama tersebut membahas bagaimana cara membuat slideshow album foto pada blogspot dengan memanfaatkan situs gallery foto yaitu www.slide.com. Untuk mengetahui trik pembuatan album foto di blog tersebut, pembaca boleh membukanya kembali disini. Blogspot sebenarnya menyediakan gadget yang berfungsi untuk membuat slide album foto pada blog kita. Namun, menurut saya gadget ini lebih sederhana jika dibandingkan dengan slideshow yang kita buat dari www.slide.com, sebab tampilan slide foto yang kita dapatkan dari situs www.slide.com tersebut bisa kita customize sesuai kehendak kita mulai dari tipe slide, ukuran, animasi, dan lain-lain. Meskipun demikian, tidak ada salahnya jika kita mencoba gadget slide album foto blogspot ini, sebab kesederhanaan biasanya indentik dengan kemudahan dalam pengaplikasiannya. Berikut langkah-langkah menambah album foto pada blogger:
  1. Login pada akun Blogspot Anda
  2. Klik link menu Tata Letak pada halaman dasbor. Pastikan Anda berada pada sub tab menu Elemen Halaman
  3. Klik link Tambah Gadget pada bagian dimana pembaca ingin memasang slide album foto tersebut
  4. Akan muncul window Tambahkan Gadget yang berisi daftar gadget yang bisa kita tambah. Silahkan cari dan pilih gadget Tampilan Slide

  5. Berikut pengaturannya:
    Judul :
    Isi dengan nama slide foto Anda.
    Sumber :
    • Album Web Picasa. Album ini merupakan album gambar yang telah Anda masukkan pada pada blogspot pembaca misalnya ketika menulis posting. Silahkan klik http://picasaweb.google.com untuk melihat album Anda.
    • Flickr. Flickr merupakan situs yang menyediakan tempat menyimpan foto dan video. Untuk mendapatkan layanan ini, silahkan daftar atau login menggunakan Yahoo ID Anda di www.flickr.com.
    • Photobucket. Ini hampir sama dengan flickr dimana kita bisa menyimpan foto dan video secara online pada situs tersebut. Untuk mendapatkan layanan ini silahkan register di www.photobucket.com
    • Lainnya. Sumber selain yang 3 diatas.
    Pilihan :
    Memilih apakah berdasarkan kata kunci atau berdasarkan album
    Buka link di jendela baru:
    Centang jika ingin foto dibuka pada jendela baru ketika diklik
  6. Sebagai contoh kita menambah slide foto menggunakan Album Web Picasa
    Judul: beri judul slide album
    Sumber : pilih "Album Web Picasa".
    Pilihan : pilih "Album"
    Nama Pengguna : masukkan ID akun Google pembaca. Misalkan akun Google pembaca adalah kampanye@gmail.com, maka isikan "kampanye"
    Album : pilih album yang terdapat pada Album Web Picasa Anda. Perlu diperhatikan bahwa album yang muncul pada list tersebut adalah album yang diperuntukkan untuk "Public". Untuk melakukan pengaturan tersebut, silahkan masuk terlebih dahulu pada http://picasaweb.google.com (masuk menggunakan akun Google Anda). Klik tab "My Photos", setelah itu klik album yang ingin Anda atur parameternya.
    Klik menu "Edit" kemudian pilih sub menu "Album Properties" sehingga akan muncul jendela "Edit album information".
    Lihat dibagian paling bawah, akan ada pilihan "Visibility for this album". Silahkan pilih "Public". Kemudian klik tombol Save changes
  7. Pratinjau album akan terlihat pada jendela tambah gadget tersebut.
  8. Klik tombol SIMPAN
Untuk melihat contoh hasilnya bisa pembaca lihat disini (tapi maaf, gambarnya hanya 2 dan sama pula, jadinya gak kelihatan deh pergantian slidenya)
Selamat mencoba dan jangan lupa meninggalkan komentar ya
»»  read more

Sabtu, 28 Maret 2009

Cara Membuat Menu Drop Down Horizontal Dengan JavaScript

2 hari yang lalu kita telah belajar membuat menu horizontal pada blogspot. Pada postingan ini, saya akan memaparkan bagaimana membuat menu drop down horizontal pada blogspot. Menu drop down merupakan menu yang mempunyai sub-sub menu didalamnya. Prisipnya adalah ketika pointer menyorot sebuah main menu, maka akan muncul sub menu dari main menu tersebut. Kode-kode ini saya dapat dari www.dynamicdrive.com. Klik disini untuk melihat contohnya.
Bagaimana cara menambahkan menu drop down pada blog kita? Berikut langkah-langkahnya:
  1. Silahkan login terlebih dahulu pada akun Blogspot pembaca
  2. Klik link menu Tata Letak dan pilih sub menu Edit HTML dan beri tanda centang pada kotak kecil disamping tulisan Expand Template Widget
  3. Jangan lupa untuk membackup terlebih dahulu template pembaca agar jika terjadi kesalahan bisa dikembalikan lagi pada kondisi semula. Klik link Download Template Lengkap
  4. Copy paste kode berikut di atas tag </head>
    <script type="text/javascript"
    src="http://nestoriko.googlepages.com/chrome.js">
    </script>

  5. Cari kode ]]></b:skin> kemudian tambahkan struktur CSS dibawah ini dengan mengcopy paste diatas kode ]]></b:skin>

    .chromestyle{
    width: 100%;
    font-weight: bold;
    }

    .chromestyle:after{
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }

    .chromestyle ul{
    border: 1px solid #BBB;
    width: 100%;
    background: url(http://nestoriko.googlepages.com/chromebg2.gif) center center repeat-x;
    padding: 4px 0;
    margin: 0;
    text-align: center;
    }

    .chromestyle ul li{
    display: inline;
    }

    .chromestyle ul li a{
    color: #494949;
    padding: 4px 7px;
    margin: 0;
    text-decoration: none;
    border-right: 1px solid #B5E2FE;
    }

    .chromestyle ul li a:hover, .chromestyle ul li a.selected{
    background: url(http://nestoriko.googlepages.com/chromebg2-over.gif) center center repeat-x;
    }

    .dropmenudiv{
    position:absolute;
    top: 0;
    border: 1px solid #B5E2FE;
    border-bottom-width: 0;
    font:normal 12px Verdana;
    line-height:18px;
    z-index:100;
    background-color: white;
    width: 200px;
    visibility: hidden;
    filter: progid:DXImageTransform.Microsoft.Shadow(color=#CACACA
    ,direction=135,strength=4);
    }

    .dropmenudiv a{
    width: 100%;
    display: block;
    text-indent: 3px;
    border-bottom: 1px solid #B5E2FE;
    padding: 2px 0;
    text-decoration: none;
    font-weight: bold;
    color: black;
    }

    .dropmenudiv a:hover{
    background-color: #EBF7FF;
    }

  6. Cari struktur seperti dibawah ini pada template pembaca
    <b:includable id='description'>
    <div class='descriptionwrapper'>
    <p class='description'><span><data:description/></span></p>
    </div>
    </b:includable>
    </b:widget>
    </b:section>
    </div>

  7. Jika sudah ketemu, copy paste struktur berikut ini tepat dibawah struktur yang Anda temukan pada langkah 6
    <div class="chromestyle" id="chromemenu">
    <ul>
    <li><a href="http://tutorial-website.blogspot.com">Home</a></li>
    <li><a href="#" rel="dropmenu1">Menu1</a></li>
    <li><a href="#" rel="dropmenu2">Menu2</a></li>
    </ul>
    </div>

    <!--menu drop down pertama -->
    <div id="dropmenu1" class="dropmenudiv">
    <a href="URL sub menu1">Sub Menu1</a>
    <a href="URL sub menu2">Sub Menu2</a>
    <a href="URL sub menu3">Sub Menu3</a>
    </div>


    <!--menu drop down kedua -->
    <div id="dropmenu2" class="dropmenudiv">
    <a href="URL sub menu1">Sub Menu1</a>
    <a href="URL sub menu2">Sub Menu2</a>
    <a href="URL sub menu3">Sub Menu3</a>
    </div>

    <script type="text/javascript">
    cssdropdown.startchrome("chromemenu")
    </script>
  8. Coba perhatikan tulisan yang berwarna merah struktur tersebut. Tulisan "dropmenu1" dan "dropmenu2" tersebut merupakan atribut rel dari parent menu drop down yang kita buat. Pada bagian tersebut terlihat bahwa terdapat 2 menu drop down, yaitu "Menu1" dan "Menu2" (warna biru). Jika pembaca ingin menambah menu drop down lagi misalnya "Menu3", maka buatlah juga atribut rel untuk "Menu3" tersebut misalnya "dropmenu3", setelah itu tambahkan struktur menu drop down untuk "Menu3" setelah menu drop down kedua". Sehingga strukturnya akan menjadi:
    <div class="chromestyle" id="chromemenu">
    <ul>
    <li><a href="http://tutorial-website.blogspot.com">Home</a></li>
    <li><a href="#" rel="dropmenu1">Menu1</a></li>
    <li><a href="#" rel="dropmenu2">Menu2</a></li>
    <li><a href="#" rel="dropmenu3">Menu3</a></li>
    </ul>
    </div>

    <!--menu drop down pertama -->
    <div id="dropmenu1" class="dropmenudiv">
    <a href="URL sub menu1">Sub Menu1</a>
    <a href="URL sub menu2">Sub Menu2</a>
    <a href="URL sub menu3">Sub Menu3</a>
    </div>


    <!--menu drop down kedua -->
    <div id="dropmenu2" class="dropmenudiv">
    <a href="URL sub menu1">Sub Menu1</a>
    <a href="URL sub menu2">Sub Menu2</a>
    <a href="URL sub menu3">Sub Menu3</a>
    </div>

    <!--menu drop down ketiga-->
    <div id="dropmenu3" class="dropmenudiv">
    <a href="URL sub menu1">Sub Menu1</a>
    <a href="URL sub menu2">Sub Menu2</a>
    <a href="URL sub menu3">Sub Menu3</a>
    </div>

    <script type="text/javascript">
    cssdropdown.startchrome("chromemenu")
    </script>
  9. Perhatikan bahwa nama atribut ID untuk menu drop down ketiga harus sama dengan nama atribut rel untuk "Menu3" yaitu "dropmenu3". Begitu pula jika pembaca ingin menambah menu drop down keempat, kelima, dan seterusnya.
  10. "URL sub menu1" merupakan URL halaman yang akan dituju jika "Sub Menu1" diklik, dan seterusnya. Silahkan pembaca ganti nama menu, sub menu, dan juga URL dari menu drop down tersebut.
  11. Bagi pembaca yang membuat web dengan menggunakan menggunakan software web design seperti dreamweaver, langkahnya hampir sama dengan yang diatas. Hanya saja struktur yang ada pada langkah 7 diletakkan pada bagian halaman web dimana pembaca ingin menambahkan menu drop down tersebut.
Selamat mencoba dan jangan lupa meninggalkan komentar ya
»»  read more

Kamis, 26 Maret 2009

Cara Membuat Menu Horizontal Pada Blogspot

Menu yang terdapat pada sebuah web selain berguna untuk memudahkan pengunjung membuka halaman-halaman tertentu, juga bisa menambah estetika. Begitu pula dengan menu horizontal yang bisa membuat web kita menjadi lebih ergonimis dan keren. Nah, bagaimana dengan blogspot? Harus diakui bahwa pada template blogspot standart, fasilitas menu horizontal tidak ada didalamnya. Namun, kita tidak perlu berkecil hati sebab seperti yang telah saya katakan pada postingan sebelumnya bahwa kita bisa membuat menu termasuk menu horizontal pada blogspot. Berikut saya ulas langkah-langkah membuat menu horizontal pada Blogspot. Sebagai contoh kita akan membuat menu horizontal dibawah header
  1. Login ke akun Blogspot pembaca
  2. Klik link menu Tata Letak, kemudian pilih Edit HTML.
  3. Back up terlebih dahulu template pembaca dengan mengklik link Download Template Lengkap agar jika terjadi kesalahan saat mengedit, pembaca bisa mengembalikannya dengan menguploadnya kembali.
  4. Silahkan beri tanda centang pada kotak kecil disamping tulisan Expand Template Widget
  5. Cari kode seperti dibawah ini pada template pembaca:
    <b:includable id='description'>
    <div class='descriptionwrapper'>
    <p class='description'><span><data:description/></span></p>
    </div>
    </b:includable>
    </b:widget>
    </b:section>
    </div>
  6. Jika sudah ketemu, silahkan copy struktur berikut tepat dibawah kode-kode pada langkah 5
    <ul>
    <li><a href='URL 1'>Home</a></li>
    <li><a href='URL 1'>About Me</a></li>
    <li><a href='URL 3'>Tutorial Website</a></li>
    </ul>
  7. Setelah itu klik tombol SIMPAN TEMPLATE, lalu lihat hasilnya
  8. Pembaca akan melihat bahwa menu-menu tersebut muncul sebagai list vertikal, bukan horizontal. Oleh karena itu, kita perlu mengatur tampilannya agar muncul berjejer secara horizontal dengan menggunakan CSS. Selain itu, kita juga bisa mengatur tampilan dari menu tersebut agar terlihat lebih menarik dengan CSS.
  9. Buka kembali bagian Edit HTML pada blogspot pembaca, kemudian cari kode ]]></b:skin>.
  10. Silahkan copy struktur berikut diatas kode ]]></b:skin>
    /*CSS untuk menu horizontal*/

    .menuhor ul{
    font: bold 13px arial;
    padding-left: 0;
    margin-left: 0;
    height: 20px;
    }

    .menuhor ul li{
    list-style: none;
    display: inline;
    }

    .menuhor ul li a{
    padding: 2px 0.5em;
    text-decoration: none;
    float: left;
    color: black;
    background-color: #33FFCC;
    border: 2px solid #33FFCC;
    }

    .menuhor ul li a:hover{
    background-color: #33CCFF;
    border-style: outset;
    }

    .menuhor ul merupakan atribut class yang berfungsi untuk mengatur tampilan parent dari list menu horizontal tersebut.
    .menuhor ul li berfungsi untuk mengatur tampilan anak menu horizontal yang kita buat.
    .menuhor ul li a berfungsi untuk mengatur tampilan link dari anak menu tersebut.
    .menuhor ul li a:hover berfungsi untuk mengatur tampilan link anak menu ketika pointer digerakkan diatasnya.
  11. Kemudian ubah struktur yang Anda copy pada langkah 6 diatas sehingga menjadi seperti berikut:
    <div class="menuhor">
    <ul>
    <li><a href='URL 1'>Home</a></li>
    <li><a href='URL 2'>Tutorial Website</a></li>
    <li><a href='URL 3'>About Me</a></li>
    </ul>
    </div>
  12. Silahkan ganti URL 1 dengan URL halaman yang akan dituju jika menu "Home" diklik. URL 2 diganti dengan URL halaman yang akan dituju jika menu "Tutorial Website" diklik, dan seterusnya.
  13. Klik tombol SIMPAN TEMPLATE.
Untuk melihat hasilnya silahkan buka disini. Seperti yang telah saya katakan, bahwa CSS tersebut berfungsi untuk mengatur tampilan menu yang kita buat tadi. Silahkan pembaca menambah atau merubah atribut CSS tersebut untuk memodifikasi tampilannya, misalnya warna tulisan, background, lebar menu, dan lain-lain. Jika pembaca ingin mengerti cara memodifikasi atau membuat CSS tersebut, silahkan klik disini. Saya yakin pembaca akan lebih mengerti bagaimana CSS tersebut bekerja. Dengan adanya menu horizontal tersebut blog pembaca pasti menjadi lebih keren dan ergonomis.
Selamat mencoba dan jangan lupa meninggalkan komentar ya

»»  read more

Selasa, 24 Maret 2009

Cara Membuat Menu Pada Blogspot

Pada umumnya, setiap website memiliki menu yang berfungsi untuk mengarahkan pengunjung ke halaman tertentu. Menu memang dijadikan sebagai alat untuk berpindah dari halaman yang satu menuju halaman yang lain. Menu-menu tersebut biasanya diletakkan secara vertikal maupun sebagai menu horizontal. Nah, bagaimana pula kita membuat menu pada blogspot?

Blogspot memang tidak menyediakan bagian pengaturan khusus pada halaman admin (dashboard) untuk menambah atau mengedit menu-menu dari halaman-halaman tertentu seperti pada Wordpress atau CMS Joomla. Hal ini mungkin dikarenakan blogspot tidak memungkinkan kita membuat halaman-halaman terpisah (independen), tetapi merupakan halaman posting yang ditampilkan secara berurutan, dimana posting terbaru akan ditampilkan dihalaman depan, sedangkan posting yang lama akan semakin terbelakang. Menurut saya hal ini menjadi kurang ergonomis. Sebab, sebuah web sebaiknya memberikan kemudahan pada pengunjung untuk menjelajahi halaman-halaman yang ada di dalam web tersebut. Jika suatu posting berada pada urutan paling belakang kita bisa memudahkan pengunjung untuk membukanya kembali dengan menggunakan menu atau sebuah link sehingga mereka tidak perlu membuka satu persatu halaman posting kita untuk sampai pada halaman posting yang ingin dituju.


Gambar: contoh menu yang dipasang pada blogspot


Untuk membuat menu pada blogspot bisa kita lakukan dengan mengotak-atik struktur templatenya. Sangat banyak bentuk-bentuk menu yang bisa kita tambahkan antara lain menu horizontal, menu vertikal, dropdown menu, dtree menu, dan lain-lain. Selanjutnya kita akan mempelajari tips-tips menambah menu pada blogspot satu demi satu.

»»  read more

Senin, 23 Maret 2009

Mengenal Dasar Pembuatan Halaman Website (2)

Masih ingatkan dengan postingan yang membahas tentang dasar pembuatan website bagian pertama? Kalau sudah lupa boleh dibuka lagi kok disini. Blog ini akan memberikan lanjutan tutorial mengenai hal yang serupa, yaitu mengenal dasar-dasar pembuatan web. Saya akan menjelaskan secara umum bagaimana cara menambahkan elemen-elemen yang akan dimasukkan ke dalam halaman web yang kita desain. Tentu penambahan ini akan diterangkan dengan bekerja secara langsung pada bagian kode-kode yang melibatkan bagian head dan body yang telah kita kenal pada postingan yang lalu. Sebagai cacatan, saya akan memberikan contoh dengan menggunakan Dreamweaver. Namun, bagi pembaca yang tidak menginstal sorftware web design misalnya Macromedia Dreamweaver atau yang lainnya, bisa menggunakan notepad atau wordpad sebagai alat praktek. Hanya saja software web design seperti Dreamweaver tersebut bisa menampilkan tag-tag HTML yang bisa kita pakai sehingga kita menjadi lebih terbantu. Pembaca bisa membaca tutorial Dreamweaver tersebut pada blog ini. Mari kita bahas satu persatu:
  1. Bagi pembaca yang sudah menginstal Dreamweaver, silahkan buka program tersebut, dan buat dokumen baru dengan memilih File --> New. Pilih dokumen HTML, kemudian pilih layar Code atau Split. Sekali lagi, bagi pembaca yang belum menginstal Dreamweaver tersebut, silahkan buka Notepad atau Wordpad, kemudian tulis kode berikut:(jika menggunakan Dreamweaver, kode-kode ini akan langsung muncul)

  2. Pertama-tama kita akan menambahkan elemen pada halaman web tersebut misalnya sebuah tulisan dan mengatur tampilannya secara langsung alias tanpa memakai CSS. Elemen-elemen yang akan kita tambahkan tersebut diletakkan pada bagian body (diantara tag <body> dan </body>) agar elemen-elemen tersebut muncul dan terlihat pada browser internet. Misalkan kita ingin menampilkan tulisan "SELAMAT DATANG" pada web kita ketika orang lain membukanya, maka ketikkan tulisan "SELAMAT DATANG" tersebut pada body seperti dibawah ini:
    <body>
    SELAMAT DATANG
    </body>
  3. Simpan dokumen HTML tersebut dengan nama index.html. Setelah tersimpan, silahkan buka file tersebut pada browser (cukup double click), maka akan tampak seperti gambar berikut:
  4. Sekarang kita akan memberi atribut pada tulisan tersebut untuk mengatur tampilannya. Misalkan kita ingin membuat tulisan tersebut berwarna merah, maka tulisan kode seperti berikut ini:
    <body>
    <font color="#FF0000">SELAMAT DATANG</font>
    </body>

    Tag <font color="#FF0000"></font> tersebut berfungsi untuk membuat tulisan SEMALAT DATANG sebagai huruf (font) yang berwarna merah (FF0000). Kita tentu ingat bahwa setiap jenis warna mempunyai kode-kode tertentu. Hal ini sudah kita bahas pada tutorial membuat CSS. Kita bisa mendapatkan kode-kode tersebut dari software-software grafis atau web design, atau jika ingin mendapatkan secara onlibe, pembaca juga bisa membuka situs yang menyediakan kode warna CSS untuk web tersebut. Klik disini untuk melihat kembali posting yang membahasnya dan mengetahui situs penyedia kode warna CSS untuk web. Misalkan kita ingin pula membuat tulisan tersebut bergaris bawah, maka strukturnya menjadi:
    <body>
    <u><font color="#FF0000">SELAMAT DATANG</font></u>
    </body>
  5. Simpan hasil editing Anda, kemudian buka file index.html tersebut, maka hasilnya akan seperti gambar berikut:
  6. Pengaturan tampilan elemen misalnya tulisan pada langkah 4 & 5 merupakan fungsi HTML untuk Presentational. Fungsi HTML ini sudah tergantingan oleh peranan Cascading Stylesheet (CSS). Nah, langkah selanjutnya dalam mempelajari dasar pembuatan halaman website adalah bagaimana penggunaan CSS itu sendiri didalam mendesain website. Bagaimana bentuk dan cara penulisan CSS mungkin sudah kita pelajari pada postingan yang ini. Sekarang saatnya melihat bagaimana peletakannya.
  7. Ada 2 cara dalam penggunaan CSS. Yang pertama menuliskan secara langsung pada halaman-halaman website, dan yang kedua membuat file yang khusus berisi struktur CSS yang kemudian diinjectkan/ disisipkan/ ditanamkan/ dilinkkan pada halaman-halaman website.
  8. Untuk cara yang pertama (menulis secara langsung pada halaman website):
    Strutur CSS dituliskan pada bagian <head> karena pada bagian tersebutlah deklarasi/informasi yang digunakan untuk mengatur website kita termasuk salah satunya CSS. Nah, karena kita menuliskan secara langsung pada halaman web yang ingin diatur, maka kita perlu mendefenisikan tersebih dahulu struktur-struktur tersebut sebagai sebuah bahasa/struktur CSS. Bagaimana cara mendeklarasikannya? Misalkan kita buat sebuah struktur CSS seperti dibawah ini:
    #tulisanku {
    color:#FF0000;
    text-decoration:underline;
    }

    Pembaca pasti mengertikan maksud struktur tersebut? Artinya kita mendefenisikan sebuah atribut yang kita beri nama "tulisanku" kemudian memberi pengaturan terhadap atribut itu antara lain warna dengan nilai FF0000 (color:#FF0000), kemudian memberi garis bawah pada teks (text-decoration:underline). Sekarang pindahkan struktur tersebut diantara <head> dan </head> sehingga menjadi:

    <head>
    #tulisanku {
    color:#FF0000;
    text-decoration:underline;
    }

    </head>
    <body>

    Seperti yang telah saya paparkan tadi bahwa kita perlu mendeklarasikan struktur tersebut sebagai struktur/bahasa CSS. Maka bentuk penulisannya menjadi:
    <head>
    <style>
    #tulisanku {
    color:#FF0000;
    text-decoration:underline;
    }
    </style>

    </head>
    <body>

    Tag <style></style> yang membungkus struktur tersebutlah yang akan mendeklarasikan bahwa struktur tersebut adalah bahasa/struktur CSS.
  9. Sekarang pada bagian <body>, ganti strukturnya menjadi:
    <body>
    <span id="tulisanku">SELAMAT DATANG</span>
    </body>

    Artinya bahwa kita memberikan ID "tulisanku" pada kalimat SELAMAT DATANG sehingga tampilan kalimat tersebut akan seperti "tulisanku", yaitu warnanya menjadi FF0000 dan bergaris bawah.
    Struktur lengkap halamannya akan seperti gambar dibawah ini:
  10. Simpan hasil editing file index.html tersebut, kemudian buka pada browser Anda.
  11. Untuk cara yang kedua (membuat file khusus CSS kemudian melinkkan ke halaman web):
    Buka program Dreamweaver pembaca. Pilih menu File --> New, kemudian pilih category basic page, dan pilih jenis CSS. Pembaca juga bisa menggunakan notapad atau wordpad. Karena kita akan membuat file khusus CSS, maka kita tidak perlu mendeklarasikan strukturnya terlebih dahulu, tetapi langsung menulis struktur CSS yang kita inginkan. Silahkan tulis struktur berikut pada file tersebut:

    #tulisanku {
    color:#FF0000;
    text-decoration:underline;
    }

    Setelah itu simpan file tersebut dengan nama misalnya "tampilan.css". Usahakan menyimpannya pada folder yang sama dengan file index.html yang ingin kita desain, misalkan pembaca menyimpan di "D:\webku\".
  12. Hapus struktur dibawah ini dari bagian <head> yang telah kita tambahkan pada langkah 8 (atau pembaca boleh membuat file HTML baru sebagai bahan latihan untuk cara kedua ini).
    <style>
    #tulisanku {
    color:#FF0000;
    text-decoration:underline;
    }
    </style>

  13. Tambahkan pula struktur berikut pada diantara <head></head>:

    <link rel="stylesheet" type="text/css" href="D:\webku\tampilan.css" />
    Struktur tersebutlah yang berfungsi untuk melinkkan file CSS (sebagai CSS Linker) yang kita simpan pada D:\webku dengan nama "tampilan.css" sehingga bisa digunakan untuk mengatur tampilan elemen pada halaman website kita. "D:\webku\tampilan.css" merupakan URL dari file CSS kita. Karena kita menyimpan pada komputer, maka bentuknya seperti itu. Jika kita menyimpan secara online, maka bentuknya menjadi misalnya "http://www.webku.com/tampilan.css".
  14. Bagian <body> biarkan seperti pada langkah 9, karena kita sama-sama mendeklarasikan atribut dengan nama "tulisanku".
  15. Tampilan struktur lengkapnya seperti gambar berikut:
  16. Simpan hasil editing file index.html tersebut,kemudian buka pada browser.
Seperti itulah dasar pembuatan web dengan menggunakan HTML dan CSS. Sekarang tinggal membuatnya lebih kompleks sesuai dengan kebutuhan kita.
Selamat mencoba, dan jangan lupa komentar yach :D

»»  read more

Award Pertama Di Hari Pertama

Beberapa hari ini saya sangat jarang membuka internet dan menyebabkan postingan di blog ini menjadi tertunda. Harus diakui jadwal saya memang sangat padat belakangan ini (halah, kayak orang penting aj :D). Tapi benar kok, mulai dari tugas kuliah yang banyak, belum lagi laporan praktikum dan responsi, bahkan ditambah pula tugas saya sebagai Kadiv Seni dan Budaya MBP yang sedang mempersiapkan Pagelaran Seni dan Budaya. Apalagi minggu kemarin saya harus mempersiapkan acara syukuran buat abang dan kakak MBP yang baru di wisuda. Tapi nih ya, semua rasa lelah itu rasanya tidak terasa lagi. Sungguh tidak disangka kalau hari Senin ini saya mendapatkan AWARD PERTAMA setelah saya bermasyarakat di jagat blogsphore ini. Fabulous Blog Award, begitulah namanya, yang diberikan oleh sahabat yang menjadi pengunjung blog ini, Buah Pikiran Ihsan, Padahal saya sendiri merasa blog ini tidak ada apa-apanya dari segi interface (agak merendah nih..kwkwkwkwkw).
Hmm, sebagai wujud rasa senang, saya juga mau bagi-bagi award nih buat teman-teman yang terpilih:
  1. Home of RIA
  2. Siloam Room
  3. ponggi~La
  4. Ratu de Blog
  5. Anti Kemapanan
  6. Gadis Rantau
  7. Madhysta.com
  8. Agusramadhani
  9. A byte for a soul
  10. Message from the Green Side
Tapi nih, ada sedikit pe er buat sahabat-sahabat diatas, gak rumit kok..hehehehe...
  1. Put the logo on your blog or post
  2. Nominate at least 7 blogs which you think are FABULOUS
  3. Be sure to link to your nominees within your post
  4. Let them know that they have received this award by commenting on their blog
  5. Share the love and link to this post and to the person from whom you received your award
(NB: dapetnya inggrisan, jadi ngasinya inggrisan juga ya, biar lebih original gtu.kwkwkwkwkw)

Dan ini adalah logi untuk poin 1:


»»  read more

Selasa, 17 Maret 2009

Membuat Web Menggunakan Macromedia Dreamweaver (4)

Sebelum masuk lebih dalam lagi ke alam tidur (kayak hipnotis aja :D) membaca postingan ini, saya menyarankan Anda untuk membaca 3 postingan sebelumnya yang berhubungan dengan postingan ini agar lebih mudah dalam memahaminya. Tenang saja, semua tutorial dreamweaver ini gratis buat pembaca sekalian, tanpa mengenal batas usia dan apalah....halah...^^
  1. Membuat Web Menggunakan Macromedia Dreamweaver (1)
  2. Membuat Web Menggunakan Macromedia Dreamweaver (2)
  3. Membuat Web Menggunakan Macromedia Dreamweaver (3)
Postingan ini sebenarnya ingin saya tulis pada bagian yang ke-3, namun saya berpikir untuk membaginya agar lebih enak mempelajarinya. Masih pada cara membuat web dengan dreamweaver, berikut langkah-langkahnya:
  1. Saya asumsikan pembaca telah melakukan pengaturan Site yang ingin Anda buat. Jika belum melakukannya tidak masalah, kita bisa melanjutkan ke langkah selanjutnya.
  2. Buka program Dreamweaver pada komputer Anda.
  3. Pilih menu File --> New (Ctrl + N), maka akan muncul sebuah kotak dialog New Document.
  4. Pilih tab General. Pada kotak Category pilih Basic Page, sedangkan pada kotak Basic Page, pilih HTML. Kemudian klik tombol Create.
  5. Simpan terlebih dahulu dokumen baru tersebut ke dalam folder gud_webku yang telah kita buat pada postingan Membuat Web Menggunakan Macromedia Dreamweaver (3). Jika pembaca tidak melakukan langkah-langkah pada postingan tersebut, silahkan simpan di sembarang folder. Simpan dengan nama index.html.
  6. Di dalam Panel Files pada bagian Local view, akan muncul sebuah file baru di dalam folder gud_webku bernama index.html. Double klik file index.html untuk membuka halaman index.html dan melakukan editing pada file tersebut.
  7. Sekarang coba pembaca menulis sebuah kalimat : "Ini Halaman Utama" pada file tersebut. Silahkan berkreasi dengan Properties untuk mengatur warna, jenis, dan ukuran tulisan. Misalkan kita memberi warna Merah.
  8. Pilih File --> Save untuk meyimpan perubahan yang telah kita lakukan.
  9. Kembali ke bagian Panel Files. Sekarang pilih Remote View. Pembaca akan melihat folder rem_webku namun belum terdapat file didalamnya karena belum kita masukkan file apapun.
  10. Pada Dreamweaver, terdapat fasilitas Put dan Get. Fasilitas ini diperlukan untuk melakukan pemindahan file web dari komputer ke server atau sebaliknya. Jika kita ingin memasukkan file web ke server atau biasa disebut sebagai upload, maka kita pilih site pada bagian Local view, kemudian melakukan Put (artinya kita memindahkan file dari local ke server). Sedangkan jika kita ingin melakukan perubahan atau modifikasi file yang ada pada server, maka kita bisa mendownloadnya ke local dengan memilih server view dan melakukan Get (artinya kita mengambil file dari server ke local). Untuk memindahkan file index.html yang telah kita simpan pada folder local (gud_webku) ke dalam folder remote (rem_webku), masuk ke bagian Local view lalu klik tombol Put berupa tanda panah ke atas yang berwana biru.
  11. Setelah melakukan langkah 10, masuk kembali pada bagian Remote view. Pembaca akan melihat file index.html telah ter-copy pada folder rem_webku.
  12. Sekarang kembali lagi pada Local view (aduh..capek nih bolak balik..hihhiihi). Buatlah sebuah halaman baru seperti pada langkah 4. Isi halaman baru tersebut dengan tulisan :"Ini Profile Saya". Kemudian simpan dengan nama "profile.html". Sekarang akan ada file profile.html pada folder gud_webku.
  13. Double klik kembali file index.html, sehingga kita akan masuk pada halaman editing index.html tersebut. Buatlah sebuah tulisan lagi misalnya :"Profile". Pada bagian ini kita akan mencoba membuat sebuah link dimana ketika kita mengklik tulisan Profile tersebut pada halaman utama, maka akan menuju ke halaman profile.html yang telah kita buat.
  14. Drag tulisan "Profile" tersebut. Setelah itu, pada bagian Properties, perhatikan sebuah kotak dengan tulisan Link. Kotak itu berfungsi untuk menuliskan URL halaman yang akan dituju jika kita mengklik link.
    Karena kita ingin menuju file profile.html tadi, klik tombol gambar folder yang ada disamping kanan kotak tersebut. Maka akan muncul kotak dialog memilih file yang akan dituju. Pilih file profile.html pada folder gud_webku yang telah kita buat pada langkah 12.
  15. Pilih menu File --> Save untuk menyimpan perubahan yang telah kita lakukan.
  16. Lakukan Put File(s) seperti langkah 10 untuk memasukkan file tersebut kedalam folder remote.
  17. Pembaca juga boleh melihat kode-kode HTML yang telah tercipta pada halaman web yang Anda buat tersebut dengan memilih layar Code.
  18. Untuk melihat hasilnya, silahkan buka kembali file index.html (double klik dari bagian Panel Files) lalu tekan tombol F12 pada keyboard Anda, atau dapat langsung mengklik file index.html dari folder rem_webku.
Oke, itu merupakan langkah-langkah dasar yang bisa kita lakukan dalam membuat web dengan Dreamweaver. Saya harap pembaca sudah sedikit memahami bagaimana sebuah software web design seperti Dreamweaver digunakan dalam membuat web. Sebenarnya masih banyak lagi fungsi-fungsi lain yang bisa kita dapatkan dari Dreamweaver. Tapi paling tidak, pembahasan yang telah saya postingkan tersebut bisa memberikan pencerahan dasar bagi pembaca yang memang ingin mendesain website sederhana atau mengerti apa dan bagaimana sebenarnya website itu. Artinya, kita tidak perlu mengetahui terlalu dalam jika memang tidak membutuhkannya. Apalagi sekarang kita bisa memanfaatkan blog dan CMS yang serba gratis dan mudah digunakan. Yach, paling tidak bisa dimanfaatkanlah jika ingin mempermak blog, atau bisa mengerti apa yang sedang kita gunakan dan kita edit :D.

Selamat Mencoba...

»»  read more

Membuat Web Menggunakan Macromedia Dreamweaver (3)

Akhirnya sampai juga kita dibagian ketiga posting berkelanjutan mengenari cara membuat web menggunakan Macromedia Dreamweaver. Setelah di bagian pertama kita membahas sepatah dua kata mengenai apa itu Dreamweaver, kemudian di bagian kedua saya memaparkan beberapa bagian penting dari software web design tersebut, maka di bagian ini saya akan langsung memberi contoh penggunaan Dreamweaver dalam membuat sebuah halaman website. Berhubung karena salah satu keunggulan utama Dreamweaver ini sebagai sebuah software web design adalah memberikan kemudahan bagi kita dalam membuat website, maka kita akan mencoba bekerja membuat halaman-halaman website melalui layar design dimana kita bisa menggunakan menu-menu pilihan dalam memasukkan isi web dan mengatur tampilannya tanpa harus pusing mengotak-atik kode-kode struktur HTML-nya. Berikut langkah-langkahnya:
  1. Buatlah folder terlebih dahulu sebagai tempat penyimpanan file-file website Anda. Buatlah 2 buah folder, yang pertama sebagai tempat penyimpanan utama dimana file-file dari folder inilah yang akan Anda edit seterusnya. Sebagai contoh buatlah folder di drive D:\, F:\, atau yang lainnya dengan nama terserah pembaca, misalkan "gud_webku". Folder kedua berfungsi sebagai tempat menjalankan halaman-halaman website yang akan Anda buat. Sebenarnya file-file yang akan ada di folder kedua ini adalah file-file yang sama yang ada di folder pertama (folder "gud_webku"). Namun, ketika kita ingin menjalankan halaman web yang telah kita buat, kita akan "meng-copy paste" halaman-halaman tersebut beserta seluruh file-file yang kita gunakan dalam mendesain halaman-halaman tersebut, misalnya gambar-gambar, kemudian menjalankannya dari folder kedua tersebut. Hmm, pasti pembaca berpikir bahwa tidak ada gunanya ya alias percuma? Kenapa tidak dijalankan saja dari folder pertama? Prinsipnya seperti ini, ketika kita membuat sebuah website tentu tujuan kita selanjutnya adalah menyimpan halaman-halaman web tersebut ke internet, atau yang biasa disebut hosting. Nah, karena kita ingin bekerja secara offline alias tidak langsung terhubung ke internet supaya hebat biaya dan waktu, maka kita anggap seolah-olah kita "menghostingkan" halaman website tersebut ke folder yang kedua. Tentu halaman-halaman yang dihostingkan tersebut yang akan dibuka di browser. Jadi, folder pertama berfungsi sebagai tempat kita menyimpan dokumen-dokumen web yang kita buat (halaman web beserta file-file lain yang digunakan untuk mendesain halaman web) dimana file-file itulah yang akan kita tambah, edit, dan lain-lain. Sedangkan folder kedua berfungsi sebagai "hosting" atau lebih tepatnya disebut sebagai localhosting dimana website kita akan dijalankan/atau ditesting. Sebenarnya prinsip ini akan lebih jelas ketika kita belajar mengenai server local di komputer sehingga fungsinya akan lebih kelihatan. Mengenai hal itu, kita akan mempelajarinya saat memulai membuat web CMS.
    Setelah itu, buatlah folder kedua misalnya di drive C:\ dengan nama terserah Anda, misalkan "root_webku". Jika pembaca sudah paham mengenai server local di komputer,, misalnya IIS, PWS, dan lain-lain, buatlah folder tersebut di dalam folder htdocs, public_html, wwwroot, atau www. Namun, jika belum paham, buat saja disembarang tempat di drive Anda.
    Nah, bagaimana pula dengan aktivitas "copy paste" yang saya sebut tadi? Apakah kita melakukannya secara manual. Disinilah salah satu fungsi Dreamweaver. Kita akan melakukannya melalui Dreamweaver sehingga setiap kita melakukan penambahan, pengeditan, dan lain-lain terhadap halaman web yang sedang kita desain (yang ada pada folder "gud_webku"), maka Dreamweaver mampu melakukan update pada file-file yang sama yang ada di folder "rem_webku". Sistem seperti ini juga berguna sebagai back up website kita karena kita sudah punya 2 folder yang berisi website kita. Untuk itu, kita perlu melakukan pengaturan sebelum membuat website. Bagaimana pengaturannya? Ada dilangkah selanjutnya :D
  2. Buka program Dreamweaver
  3. Pada menu utama, pilih Site -> New Site, akan muncul sebuah kotak dialog wizard yang berisi 2 buah tab. Pilih tab Advance dimana akan ada beberapa kategori yang akan kita atur.
    Pada kategori Local Info:
    Site name : tulis nama projek website Anda. Misalkan "webku"
    Local root folder : pilih folder gud_webku yang telah kita buat pada langkah 1. Kemudian beri tanda centang pada kotak Refresh local file list automatically. Pilihan ini berguna untuk melakukan update secara otomatis jika kita melakukan perubahan pada file web yang kita buat.
    Pilihan lainnya untuk sementara dibiarkan saja.
    Pada kategori Remote Info:
    Access : pada bagian ini kita diminta untuk memilih dimana akan melakukan pengetesan (tempat menjalankan) web kita, apakah secara online atau offline. Karena kita untuk sementara melakukannya secara offline yaitu pada komputer kita, maka pilih Local/Network.
    Remote folder : pilih folder rem_webku yang kita buat pada langkah 1. Jangan lupa juga memberi tanda centang pada kotak Refresh local file list automatically.
    Pada kategori Testing Server:
    Pada bagian ini kita diminta untuk memilih model server yang akan kita gunakan untuk melakukan pengetesan atau menjalankan website kita. Untuk sementara lakukan pengaturan sebagai berikut:
    Server mode : none
    Access : Local/Network
    Testing Server Folder: secara otomatis, folder yang terpilih adalah folder "rem_webku" yang merupakan tempat file web kita yang akan dijalankan.
    Kategori lainnya untuk sementara dibiarkan saja. Setelah itu klik tombol OK. Jika ingin melakukan perubahan pengaturan pada SITE yang telah kita buat tersebut, pembaca bisa melakukannya dengan memilih menu Site --> Manage Sites, maka akan muncul kotak dialog Manage Site.
  4. Jika pengaturan sudah berhasil, pembaca akan melihat di bagian panel Dreamweaver telah muncul bagian yang berisi site Anda seperti gambar ini:
  5. Coba kita perhatikan panel tersebut. Terlihat bahwa kita sedang berada pada bagian Local view sehingga yang muncul adalah folder gud_webku. Jika pembaca menggantinya dengan Remote view, maka folder yang terlihat adalah rem_webku
NB: Jangan kemana-mana dulu ya..tunggu postingan lanjutan berikutnya, karena kita akan semakin mengerti kegunaan dan kelebihan Dreamweaver :D
»»  read more

Jumat, 13 Maret 2009

Halaman Yang Pertama Kali Dibuka?

Tahukah pembaca halaman apa yang pertama kali terbuka ketika Anda mengunjungi sebuah website di internet dan mengklik domainnya? Beberapa pembaca pasti sudah mengerti jawabannya. Tapi ketika pertanyaan serupa saya tanyakan kepada kawan-kawan yang kebetulan belajar mendesain web pada saya semuanya menjawab halaman HOME, halaman UTAMA, atau halaman BERANDA. Benarkah demikian? Mungkin inilah yang namanya generalisasi. Hampir semua website membuat menu yang bernama "HOME" atau "BERANDA" atau yang lainnya yang mana ketika diklik akan menuju tampilan utama website, sehingga kita beranggapan bahwa halaman dengan nama itulah yang pertama kali terbuka. Lantas bagaimana jika saya, Anda, teman Anda, dan teman dekat dari teman Anda memberi nama menu tersebut bukan "HOME" atau "BERANDA" melainkan "PLEKETON" (apaan tuh? :D), apakah masih disebut sebagai halaman home? Jadi halaman apa donk?
Halaman tersebut adalah halaman yang diberi nama index atau Default. Jika servernya menggunakan sistem Linux maka file utama tersebut bernama index, sedangkan jika menggunakan sistem windows maka file utamanya bernama Default. Semua website pasti mempunyai file web yang diberi nama index atau Default. Jika web tersebut memakai bahasa HTML, maka nama file tersebut adalah index.html atau index.htm. Jika menggunakan bahasa PHP, maka namanya adalah index.php, atau jika menggunakan ASP, maka nama filenya bernama Default.asp. File index atau Default tersebutlah yang akan menjadi halaman yang pertama kali terbuka ketika kita mengunjungi web dengan mengklik domainnya. Menyewa space hosting sama artinya kita menyewa ruang di internet sebagai tempat menyimpan dokumen-dokumen website kita. Penyewaan ruang tersebut bisa diibaratkan kita diberi folder untuk menyimpan dokumen web kita dan ketika kita membuka domain website, maka browser yang kita gunakan akan mengirimkan permintaan agar webserver yang digunakan mencari file web yang bernama index atau Default tadi yang berada pada folder atau ruang yang kita sewa kemudian menampilkannya pada browser.

»»  read more

Kamis, 12 Maret 2009

Membuat Web Menggunakan Macromedia Dreamweaver (2)

Kini saatnya kita melanjutkan tutorial web kita yang membahas cara membuat web dengan menggunakan Macromedia Dreamweaver. Dibagian pertama tutorial berkelanjutan ini kita telah mengenal sekilas mengenai profil Dreamweaver sebagai salah satu software web design. Bahkan pembaca mungkin sudah mencoba mendownload dreamweaver cs4 yang merupakan versi terbaru saat posting ini saya rilis. Oke deh, saya asumsikan 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 mengetik bahasa 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 split berguna 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 melihat struktur HTML seperti yang pernah saya tunjukkan pada postingan yang ini. Sebagai contoh struktur:

    <title>Untitled Document</title>

    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 <title>.
NB: Jangan kemana-mana dulu ya..tunggu postingan lanjutan berikutnya yang juga membahas cara membuat web dengan dreamweaver:D

»»  read more