AD (728x90)

18 Mar 2015

Web Design dengan Animasi Text Pada Adobe Dreamweaver

Share it Please

Kali ini saya akan berbagi ilmu tentang  menginputkan efek gambar ke web, mengelink-kan dari satu URL ke URL yang lain, dan membuat efek tulisan atau gambar bergerak dengan menggunakan html dreamveaver. Pembahasan ini juga sebagai tugas Pemrograman Web untuk mengupload ringkasan materi perkuliahan minggu ini.
Adobe Dreamweaver adalah aplikasi desain dan pengembangan web yang menyediakan editor WYSIWYG visual (bahasa sehari-hari yang disebut sebagai Design view) dan kode editor dengan fitur standar seperti syntax highlighting, code completion, dan code collapsing serta fitur lebih canggih seperti real-time syntax checking dan code introspection untuk menghasilkan petunjuk kode untuk membantu pengguna dalam menulis kode. Dreamweaver dapat menggunakan ekstensi dari pihak ketiga untuk memperpanjang fungsionalitas inti dari aplikasi, yang setiap pengembang web bisa menulis (sebagian besar dalam HTML dan JavaScript). Dreamweaver didukung oleh komunitas besar pengembang ekstensi yang membuat ekstensi yang tersedia (baik komersial maupun yang gratis) untuk pengembangan web dari efek rollover sederhana sampai full-featured shopping cart. Oke, langsung saja masuk pada pembahsan.
A.    Cara mengupload Gambar pada Web
1.      Buka software Dreamveaver
2.      Akan mucul kotak dialog, pilih saja HTML.
3.      Mulailah mengetikkan script berikut di layar kerjanya.
<html>
<head>
<body >
<img src="http://kendhin.890m.com/banner-trik.jpg" border="0" height="17" width="90">
</body>
</head>
</html>
Kamu bisa browse foto dari drive yang kamu punya.

A.    Cara Menge-Link
Link  merupakan  elemen  terpenting  dalam  sebuah  situs.  Elemen  ini  merupakan  jembatan untuk  berpindah  dari  satu  halaman ke  halaman  yang  lain  dari  t opik  satu  ke  topik  yang  lain  dalam  satu halaman,  at au  bahkan  ke  halaman  web  yang  lain  atau  ke  alamat  email. Di  bawah  ini adalah  sintak  penulisan html untuk membuat link (letakkan dibawah tag <body>).
 
<a href=”alamat_link”>text atau gambar</a>
Misalkan  untuk  membuat  link  menuju  ke  halaman  kontak.html  pada  text 
tertentu maka html nya adalah:
<a href=”kontak.html”>text tertentu</a>
Sedangkan untuk memberikan link  pada gambar t tentu saja didalam tag <a> 
terdapat tag <img>
<a href=”alamat_link”>
<img src=”kontak.gif” al
t=”kontak”>
</a>
Dijelaskan  di  atas  bahwa  kita  bisa  membuat  link  yang  menuju  ke  halaman tertentu,  situs  tertentu,  dan  bahkan  alamat  email  tertentu.  Di  bawah  ini adalah contoh html untuk beberapa jenis alamat tersebut:
Sedangkan  untuk  membuka  alamat  link  ke  jendela  browser  yang  baru  kita
bisa menggunakan target=”_blank”
<a   href=”http://www.google.com” target=”_blank”>link     menuju ke google</a>

B.     Cara Membuat Text Bergerak dari Kiri Kekanan

1.      Buka Software Dreamveaver
2.      Akan muncul kotak dialog, pilih HTML.
3.      Mulailah mengetikkan script dibawah ini di layar kerjanya
<head>
<body>
<marquee align="center" direction="right" height="45"scrollamount="2" width="70%">Ini Textnya bisa bergerak</marquee>
</body>
</head>

Nah untuk membuat gambar bergerak maka gambungkan script untuk mengupoad gambar dan script untuk membuat tulisanbergerak seperti yang telah saya jelaskan diatas.

C.    Membuat teks berjalan ke kiri dan kembali ke kanan
<head>
 <body>
<marquee align="center" direction="left" height="50" scrollamount="5" width="70%" behavior="alternate">
 <b>Text nya bergerak ?</b> </marquee>
</head>
</body>

Written by

We are Creative Blogger Theme Wavers which provides user friendly, effective and easy to use themes. Each support has free and providing HD support screen casting.

1 komentar:

© 2015 Mahakarya Mahasiswa. All rights resevered. Designed by Templateism