Search This Blog
Featured Post
Featured Post
Adobe Dreamweaver CS6 Download
Halo Guys. Kali ini saya akan membagikan link Download untuk Adobe Dreamweaver CS6. Sebelum itu, mari kita Flashback Sejenak Pengertian Ado...
Halo Guys. Kali ini saya akan membagikan link Download untuk Adobe Dreamweaver CS6. Sebelum itu, mari kita Flashback Sejenak Pengertian Adobe Dreamweaver.
Adobe Dreamweaver adalah program penyunting halaman web keluaran dari 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.
Fungsi Adobe Dreamweaver
Fungsi Adobe Dreamweaver
Adobe Dreamweaver mempunyai berbagai macam kegunaan. Ini dia kegunaan Adobe Dreamweaver
- Untuk mendesain situs web
- Untuk membuat program berbasis web
- Untuk membuat template blog
- Untuk membuat situs web tanpa bersentuhan langsung dengan bahasa pemrograman
System requirement
- Processor Intel ® Pentium ® 4 or AMD Athlon ® 64
- Microsoft ® Windows ® XP with Service Pack SP2 (recommended SP3); Windows Vista ® Home Premium, Business, Ultimate, or Enterprise with SP1 or Windows 7
- 512 MB of RAM
- 1 GB of free hard disk space for installation, additional free space required during installation (can not install on removable flash storage devices)
- Screen resolution of 1280×800 with 16-bit video card
- Java ™ Runtime Environment 1.6 (included)
- DVD-ROM drive
- Software QuickTime 7.6.6, required for HTML5 playback of media content
- For that software activation is required. To activate the software, confirm the subscription and access to online services requires a broadband Internet connection and registration. * Telephone activation is not available.
Pada gk sabar ea... :v
Oke deh, langsung saja saya kasih Link Download nya
Oke deh, langsung saja saya kasih Link Download nya
Halo Guys, Sekarang admin sudah kembali dari hiatus. Wah, lama banget ea saya hiatus nya. Ini karena setelah Lulus sekolah, saya jadi banyak pekerjaan di tempat kerja. Jadi, mumpung ada luang waktu, saya kembali menulis Blog tutorial.
Kali ini spesial "Kembali dari Hiatus", saya belum bisa langsung ngelanjutin tutorial tentang Dreamweaver, jadi saya langsung pemanasan dulu. Yaitu saya akan mengasih tutorial tentang "Cara menghubungkan Server Lokal dengan XAMPP".
Langsung saja ikuti langkah - langkah berikut :
Kali ini spesial "Kembali dari Hiatus", saya belum bisa langsung ngelanjutin tutorial tentang Dreamweaver, jadi saya langsung pemanasan dulu. Yaitu saya akan mengasih tutorial tentang "Cara menghubungkan Server Lokal dengan XAMPP".
Langsung saja ikuti langkah - langkah berikut :
- Buka XAMPP Control Panel
- Lalu klik tombol Start pada "Apache" dan "MySQL"
- Tunggu sampai Apache dan MySQL mendapatkan Port(s)
- Buka Browser
- Ketik "localhost" (tanpa tanda petik) pada Address Bar
- Maka Tampilannya akan muncul.
Sebenarnya, tampilannya gk kyk gambar diatas sih.. Itu karena saya sudah menghapus tampilan Awal XAMPP Localhost nya, jadi gitu deh. Maaf yaa... :v :v
Lalu, untuk memastikan apakah MySQL nya bisa diaksees atau tidak, lakukan langkah - langkah berikut :
- Pada Browser, Ketik "localhost/phpmyadmin" (tanpa tanda petik) pada Address Bar
- Maka tampilan MySQL nya akan muncul.
Nah, demikianlah tutorial yang saya bagikan kali ini, walaupun singkat semoga bermanfaat untuk kalian. Terima Kasih.
Ilham Saputra
December 06, 2018
New Google SEO
Bandung, Indonesia
Hai. Akhirnya saya memposting tutorial baru untuk anda semua setelah sekian lamanya Hiatus gara - gara banyak tugas sekolah, hiatusnya pun gk ngasih tahu dulu, hehehe. Rencananya saya mau hiatus lagi untuk sekitar 3 bulan saja (gak lama - lama) karena fokus Ujian Kompetensi, Simulasi dan UNBK. Tapi gak apa apa, Insya Allah selama hiatus saya akan memikirkan tutorial yang berkenaan dengan website dan Dreamweaver dan mempostingnya disini lagi, janji.
Ok langsung saja pada tutorial kali ini berkenaan dengan Desain Web, yaitu Tampilan Web Responsive.
Tampilan
web responsive merupakan tampilan web yang memungkinkan situs website
untuk menyesuaikan atau merespon bagaimana, dimana dan dengan apa website
tersebut dilihat/diakses oleh seseorang. Hal ini tentu mempengaruhi layout
website tersebut secara eksklusif, dan dapat mempengaruhi apa yang ditampilkan
pada perangkat tertentu, seperti di ponsel, atau di perangkat yang memiliki
layar sentuh. Manfaat dari tampilan web responsive adalah supaya
tampilan website tersebut dapat dibuka di segala perangkat, baik itu computer,
laptop / notebook, bahkan smartphone sekalipun.
Tapi
bagaimana cara membuatnya? Tentu saja kembali lagi pada program HTML dibantu
dengan CSS. Pada tutorial ini saya akan menggunakan Dreamweaver untuk
Skripsinya. Berikut ini adalah skrip dan langkah – langkah cara membuat tampilan
web responsive.
1. Pada
Dreamweaver, buat file HTML baru. Lalu simpan dengan nama “index.html”
2. Langsung
saja skrip kode HTML – nya. Skripnya ada di bawah ini.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<nav class="headmenu">
<ul>
<li><a
href="#">Home</a></li>
<li><a
href="#">Support</a></li>
<li><a
href="#">Contact</a></li>
</ul>
</nav>
<div class="wrapper">
<header>
<h1>Dreamweaver Tutorial</h1>
<nav
class="menu">
<ul>
<li><a
href="#">Home</a></li>
<li><a
href="#">Support</a></li>
<li><a
href="#">Contact</a></li>
</ul>
</nav>
</header>
<div
class="main-content">
<section
class="content">
<article>
<h3>Judul Artikel
1</h3>
<p
style="text-align: justify">Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Nullam auctor eros at ipsum posuere, quis dapibus
metus tempus. Vivamus sodales egestas consequat. Donec sodales aliquet lectus
pellentesque dignissim. Curabitur ipsum magna, sodales quis auctor quis,
pulvinar eu neque.</p>
</article>
</section>
<section
class="content">
<article>
<h3>Judul Artikel
2</h3>
<p
style="text-align: justify">Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Nullam auctor eros at ipsum posuere, quis dapibus
metus tempus. Vivamus sodales egestas consequat. Donec sodales aliquet lectus
pellentesque dignissim. Curabitur ipsum magna, sodales quis auctor quis,
pulvinar eu neque.</p>
</article>
</section>
</div>
<aside>
<section class="sidebar">
<h3>Tags</h3>
<p><a
href="#">HTML</a>, <a
href="#">CSS</a>, <a
href="#">MySQL</a>, <a
href="#">PHP</a>, <a href="#">Visual
Basic</a>, <a href="#">Tutorial</a>, <a
href="#">Design</a>, <a
href="#">CorelDraw</a>, <a href="#">Manga
Studio</a>, <a href="#">Download</a></p>
</section>
<section class="sidebar">
<h3>Related
Post</h3>
<ol>
<li><a
href="#">Post 1</a></li>
<li><a
href="#">Post 2</a></li>
<li><a
href="#">Post 3</a></li>
</ol>
</section>
</aside>
<footer>Copyright
© 2018 Dreamweaver Tutorial</footer>
</div>
</body>
</html>
Jangan lupa disimpan. Sehingga
tampilannya menjadi seperti gambar dibawah ini.
Kenapa
kayak gitu tampilannya? Karena belum diberi CSS. Untuk memberi tampilannya,
kita lanjutkan pada langkah ketiga.
1. Buat file
CSS baru. Lalu simppan pada folder yang sama dengan File Name nya “style.css”
2. Langsung saja
skrip kode CSS nya. Skripnya ada dibawah ini.
.wrapper {
width: 90%;
margin-top: 50px;
margin-right: auto;
margin-bottom: 20px;
margin-left: auto;
background-color: #F5F5F5;
}
.sidebar h3 {
background-color: #2E5711;
display: block;
margin: 0px;
padding: 5px;
color: #FFF;
}
a {
color: #172F06;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
header {
display: block;
margin: 0px;
padding: 0px;
background-color: #2E5711;
}
header h1 {
display: block;
padding: 10px;
margin: 0px;
font-size: 48px;
color: #FFF;
}
.menu ul {
display: block;
margin: 0px;
padding: 0px;
list-style-type: none;
overflow: auto;
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #203E0B;
border-bottom-color: #203E0B;
}
.menu ul li a {
color: #FFF;
text-decoration: none;
white-space: nowrap;
display: block;
padding-top: 6px;
padding-right: 20px;
padding-bottom: 6px;
padding-left: 20px;
margin-left: 1px;
}
.menu ul li a:hover {
background-color: #316A09;
}
.headmenu ul li a:hover {
background-color: #316A09;
}
.content {
display: block;
padding: 10px;
margin-bottom: 10px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #CDE9C7;
background-color: #FFFFFF;
}
.main-content {
display: block;
overflow: auto;
width: 65%;
float: left;
margin-top: 20px;
margin-right: 10px;
margin-bottom: 20px;
margin-left: 25px;
}
.sidebar {
display: block;
margin-bottom: 10px;
background-color: #FFFFFF;
padding-bottom: 10px;
}
aside {
width: 25%;
display: block;
float: right;
margin-top: 20px;
margin-bottom: 20px;
margin-right: 25px;
}
footer {
clear: both;
display: block;
background-color: #2E5711;
color: #FFF;
padding: 10px;
}
.menu ul li {
display: block;
float: left;
}
.headmenu ul {
background-color: #172F06;
display: block;
margin: 0px;
padding: 0px;
list-style-type: none;
position: absolute;
left: 0%;
top: 0%;
right: 0%;
overflow: auto;
}
.headmenu ul li {
display: block;
float: left;
}
.headmenu ul li a {
white-space: nowrap;
display: block;
margin-left: 1px;
padding-top: 6px;
padding-right: 20px;
padding-bottom: 6px;
padding-left: 20px;
color: #FFF;
text-decoration: none;
}
body,td,th {
font-family: "Comic Sans MS", cursive;
background-color: #385E13;
}
/*Style Media Kueri*/
@media screen and (max-width:478px)
{
body {
font-size: 13px;
background-color: #385E13;
}
}@media screen and
(max-width:740px) {
.main-content{
width: 100%; margin:auto}
.menu ul {
border-bottom-style: none;
}
.menu ul li {
float:none}
.menu ul li a {
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #203E0B}
aside {
width: 100%; margin:auto}
.sidebar {
display: block;
margin-bottom: 0px;}
img {
max-width: 100%;
height: auto;
}
Jangan
lupa disimpan. Sehingga tampilannya seperti gambar dibawah ini.
Ok, itulah
tutorial Membuat tampilan web Responsive. Dari tutorial ini, anda dapat
mempraktekan dan mengembangkannya.
Berikut ini adalah langkah - langkah menyewa Hosting di IDHostinger.
- Buka Browser. Pada Address bar, ketikan url http://www.hostinger.co.id.
- Pada halaman beranda, Klik tombol "Mulai Sekarang"
- Pada halaman selanjutnya, anda akan diminta untuk Checkout pemesanan anda. sebelum itu, lakukan pemilihan untuk periode pemakaian hosting. Setelah itu, Scroll ke bawah lalu kilk Checkout.
- Lalu anda diminta untuk mendaftar ke hostinger atau login menggunakan akun Facebook atau Google+. Anda Klik Tombol Lanjut pada tab Pengguna Baru.
- lakukan pendaftaran dengan mengisi formulir yang ada, lalu klik tombol Selanjutnya.
- setelah itu anda diminta untuk menyetujui pemesanan anda. Centang "Saya setuju dengan" dan kemudian klik "Selanjutnya".
- Nanti anda diminta untuk melakukan verifikasi pada akun anda. untuk melanjutkan verifikasi, anda buka Webmail anda. Jika anda menggunakan email google, buka http://mail.google.com.
- buka email masuk dari IDHostinger. lalu klik tautan untuk melanjutkan Verifikasi.
- setelah itu, anda akan diminta untuk setup Hosting anda. Klik tombol Setup.
- isi dengan lengkap form yang ada dengan mengikuti instruksi di gambar.
- Setelah itu pilih menu Hosting >> Semua Akun Hosting.
- Klik Tanda + pada hosting yang anda buat, lalu Klik Kelola.
Dan Selamat! Akun hosting anda sudah siap digunakan. anda dapat mengatur sendiri yang ada disana, seperti membuat website dengan Zyro Builder atau Auto Installer dan anda juga dapat mengatur File manager dan Database.
Langkah - Langkah Menyewa Hosting Gratis melalui IDHostinger
Posted by Dreamweaver Tutorial on Saturday, 3 September 2016
Kali ini saya akan membagikan contoh - contoh desain web yang saya desain menggunakan Dreamweaver walaupun hasilnya belum sepenuhnya sempurna. Ada tiga desain web yang saya siapkan untuk didownload. Anda dapat mendownloadnya untuk dapat mempelajari cara membuatnya. Link di bawah ini.
1. Naya Patte Website (नया पत्ते वेबसाइट)
1. Naya Patte Website (नया पत्ते वेबसाइट)
2. Brown Dw
3. Natural Purpy
Baiklah, mungkin hanya 3 saja yang bisa saya bagikan. Jangan lupa untuk membaca Blog ini karena akan ada Desain Web Update Terbaru nanti.
Ilham Saputra
April 14, 2016
New Google SEO
Bandung, Indonesia
Contoh Desain Web Hasil Sendiri menggunakan Dreamweaver
Posted by Dreamweaver Tutorial on Thursday, 14 April 2016
Sudah dijelaskan pada artikel sebelumnya bahwa website
statis yaitu website yang isinya bersifat statis. Web ini sangat cocok untuk
perusahaan berskala kecil yang ingin memberikan informasi singkat mengenai keberadaan
perusahaan, produk atau jasa yang diberikan.
Nah, sekarang kita akan mulai membuat website statis itu.
Adapun software yang kita perlukan untuk membuat dan mengeksekusi website,
yaitu :
a.
Dreamweaver (yang saya gunakan yaitu Adobe
Dreamweaver CS6)
b.
Browser (Seperti Firefox, Chrome, atau Internet
Explorer versi baru)
Sebelum itu, kita harus download dulu berkas yang berisi
gambarnya, linknya yang ada dibawah gambar.
Lalu Simpan folder "media" pada Dreamweaver Site folder anda
Kita harus tahu dulu dimana tata letak webnya dengan cara
membuat sketsa layout diatas kertas.
Ketika kita sudah tahu sketsa layout, kita mulai membuat
website. Disini, saya membuatnya dengan kode HTML. Dibawah inilah kode
HTML-nya.
Pertama : kita akan mengatur atribut websitenya.
Kedua : kita buat ruang layoutnya menggunakan Div tag ditempatkan didalam
kode <body>...</body>.
<div class="wrapper">
</div>
Ketiga : kita akan buat Header dan navigasi-nya dan ditempatkan di
dalam kode div tag yg sudah dibuat.
<header>
<h1>Ilham Blog </h1>
<nav>
<ul>
<li><a
href="">Home</a></li>
<li><a
href="">Designs</a>
<ul>
<li><a
href="">Static Page</a></li>
<li><a
href="">Dynamic Page</a></li>
</ul>
</li>
<li><a
href="">Tutorials</a>
<ul>
<li><a
href="">Getting Ready</a></li>
<li><a
href="">Static Page</a></li>
<li><a
href="">Dynamic Page</a></li>
<li><a
href="">Publication</a></li>
<li><a
href="">Hosting</a></li>
</ul>
</li>
<li><a
href="">Downloads</a></li>
<li><a href="">About</a></li>
</ul>
</nav>
</header>
Keempat : kita akan membuat layout isi/konten pada website dan
ditempatkan di dalam div tag dibawah kode </header>.
<section class="content">
<article>
<figure>
<img src="media/css2.jpg" width="246"
height="195" />
</figure>
<h3>Mengenal CSS Style</h3>
<p>Cascade Style Sheets (atau biasa disebut CSS Style) adalah
suatu aturan yang digunakan untuk menentukan font pada tulisan yang akan
ditampilkan dalam bentuk HTML atau dokumen web lainnya.</p>
<p> </p>
</article>
</section>
Kelima : kita akan membuat layout Sidebar atau aside yang ditempatkan
didalam div tag dibawah kode </section>
<aside>
<section>
<banner>Related Post</banner>
<a
href="">Designs</a>
<a
href="">Tutorials</a>
<a
href="">Downloads</a>
<a
href="">Static Page</a>
<a
href="">Dynamic Page</a>
<a
href="">Publication</a>
<a
href="">Hosting</a>
</section>
</aside>
Keenam : kita akan membuat footer ditempatkan didalam div tag dibawah
kode </aside>
<footer><a href="">Home</a>
</footer>
Kode-nya hampir siap. Dibawah ini adalah website yang sudah dihasilkan
tapi belum sempurna karena belum diberi CSS style dan gambar
Dibawah ini adalah kode CSS untuk website yang setengah jadi. Letakkan kode
ini di dalam kode <head> dibawah kode <title>.
<style type="text/css">
.wrapper {
background-color:
#FFF;
width: 900px;
margin-top: 10px;
margin-right:
auto;
margin-bottom:
10px;
margin-left: auto;
}
header {
font-weight: bold;
display: block;
clear: both;
padding-top: 1px;
padding-bottom:
1px;
font-size: 24px;
padding-right:
0px;
padding-left: 0px;
}
nav ul {
font-size: 14px;
font-weight: bold;
background-color:
#666;
display: block;
padding-top: 0px;
padding-right:
0px;
padding-bottom:
22px;
padding-left: 0px;
border-top-width:
1px;
border-top-style:
solid;
border-top-color:
#fff;
list-style-type:
none;
}
ul li {
display: block;
float: left;
}
li ul {
display: none;
}
ul li a {
color: #FFF;
text-decoration:
none;
background-color:
#666;
white-space:
nowrap;
display: block;
margin-left: 1px;
padding-top: 2px;
padding-right:
40px;
padding-bottom:
2px;
padding-left:
40px;
border-right-width:
1px;
border-right-style:
solid;
border-right-color:
#FFF;
}
article {
margin-top: 0px;
margin-right: 0px;
margin-bottom:
20px;
margin-left: 0px;
display: block;
padding-bottom:
25px;
padding-top: 10px;
}
aside {
display: block;
float: left;
width: 220px;
padding-right:
0px;
padding-top: 0px;
padding-bottom:
0px;
padding-left:
10px;
margin-bottom:
20px;
margin-left: 10px;
margin-top: 0px;
margin-right: 0px;
}
figure {
display: block;
padding: 10px;
margin: 0px;
float: left;
}
hgroup {
display: block;
padding-bottom:
25px;
margin-bottom:
25px;
}
ul li a:hover {
background-color:
#999;
}
li:hover ul {
display: block;
position:
absolute;
padding: 0px;
}
aside section a:hover {
background-color:
#eee;
}
footer a {
color: #FFF;
text-decoration:
none;
}
footer a:hover {
text-decoration:
underline;
}
.content {
display: block;
width: 650px;
float: left;
border-right-width:
1px;
border-right-style:
solid;
border-right-color:
#eee;
}
banner {
background-color:
#666;
display: block;
font-weight: bold;
color: #FFF;
padding-top: 4px;
padding-right:
0px;
padding-bottom:
4px;
padding-left: 0px;
border-right-width:
1px;
border-left-width:
1px;
border-right-style:
solid;
border-left-style:
solid;
border-right-color:
#000;
border-left-color:
#000;
}
aside section a {
display: block;
padding: 10px;
color: #000;
text-decoration:
none;
border-bottom-width:
1px;
border-bottom-style:
solid;
border-bottom-color:
#eee;
}
footer {
display: block;
clear: both;
background-color:
#666;
padding-top: 20px;
padding-bottom:
20px;
padding-right:
0px;
padding-left: 0px;
text-align:
center;
}
li:hover li {
font-size: 12px;
float: none;
}
li:hover a {
background-color:
#999;
}
li:hover li a:hover {
background-color:
#b6b6b6;
}
body,td,th {
font-family:
Calibri;
}
body {
background-image:
url(media/bg.jpg);
background-repeat:
repeat-x;
}
</style>
Setelah itu, simpan dalam format HTML.
