Membuat Web Dengan Dreamweaver

8/14/2019 Membuat Web Dengan Dreamweaver

1/52

1

Andi Sulistiyono,Andi Sulistiyono,S.KomS.Kom

[email protected]

0813.1972.96960813.1972.9696

PENGEMBANGANPENGEMBANGAN

BAHAN BELAJARBAHAN BELAJAR

BERBASIS WEBBERBASIS WEB
mailto:[email protected]:[email protected]


2/52

2

Pendidikan SD Negeri 2 Sadang - Kudus SMP Negeri 1 Jekulo - Kudu

s SMA Negeri 2 Kudus Malang Sistem Informasi Universitas Dian Nuswantoro Semarang

Pengalaman Kerja Tahun 1998 - 2000 Asisten Laboratorium Komputer

Universitas Dian Nuswantoro Semarang Tahun 2000 - 2002 Instruktur Komputer di Sentra Pendidikan

Bisnis Magistra Utama Semarang Tahun 2004 masuk Pustekkom sebagai Programmer Multimedia, penulis

naskah pengetahuan populer, Team Leader pengerjaan Content MateriPokok dan Pengetahuan Populer, Pengkaji media penyusunan GBIM,JM, Naskah pengetahuan populer dan Materi Pokok.

Curriculum VitaeCurriculum Vitae


3/52

3

digunakan untukdigunakan untuk

membuat websitemembuat website


4/52

4




5/52

5




6/52

6

Mengenal SoftwareMengenal SoftwareDreamweaverDreamweaver


7/52

7

TampilanTampilan

DreamweaverDreamweaver

TitleBarMenu

Bar

Toolbar Insert

ToolbarDocument

ToolbarStandar

PropertiesInspector

Status

bar

ToolApplication


8/528

Title BarTitle Bar

Menu BarMenu Bar

Standart toolbarStandart toolbar

DocumentDocument

ToolbarToolbar

Status BarStatus Bar

Properties InspectorProperties Inspector


9/529

1. Klik Site pada menubar kemudian pilih New Site

Memulai Dengan DreamweaverMemberi nama site


10/5210

2. Isi kotak dialog Site Definition for website

Nama site

Folder untuk

menyimpan file html

Folder untuk

menyimpan file gambar

Membuat folder untuk penyimpananfile


11/5211

3. Lihat pada Application Files

Nama site

Folder untuk gambar

Application Files


12/5212

4. Buat file HTML klik kanan pada nama site yang

kita buat tadi kemudian pilih New File

Kemudian ketik nama fileyang akan anda buat,

file utama yang di buat

diberi nama index.html

Membuat file HTML


13/52

13

5. Mengisi file HTML, double klik nama fileHTML yang telah kita buat.

Mengisi content file HTML


14/52

14


15/52

15

Menyimpan DokumenMenyimpan Dokumen


16/52

16

Klik disini untukmenjalankan

program

MenjalankanMenjalankanprogramprogram


17/52

17

Bekerja denganCode

Tag-tagTag-tagHTMLHTML


18/52

18

Tag-tag HTMLCommand HTML biasanya disebut TAG, TAG digunakan untuk menentukan tampilan

dari document

HTML.

Setiap document HTML di awali dan di akhiri dengan tag HTML.

--

-

Tag tidak case sensitive, jadi anda bisa gunakan atau keduanyamenghasilkan

output yang sama.Bentuk dari tag HTML sebagai berikut:

Element - nama tagAttribute - atribut dari tagValue - nilai dari atribut.Contoh :

BODYmerupakan element,BGCOLOR(Background) merupakan atribut yangmemiliki nilai

BeginTag

End Tag


19/52

19

Document HTML bisa di bagi mejadi tiga bagian utama:

StrukturStruktur

HTMLHTML

1. HTMLSetiap document HTML harus di awali dan di tutup dengan tag HTML tag HTML memberi tahu browser bahwa yang di dalam kedua tag tersebut adalah

document HTML.

2. HEADBagian header dari document HTML di apit oleh tag di dalam bagian

ini dimuat tag TITLE yang menampilkan judul dari halaman pada titlenya browser.

3. BODYDocument body di gunakan untuk menampilkan text, image link dan semua yang akan

di tampilkan pada web page.


20/52

20

Judul yang ada di pojok kiri atas padabrowser

Disini tempat menuliskan teks,menyisipkan tabel, gambar, animasi dll.

Contoh 1 :

Preview 1

hasilhasil
http://html/preview1.htmlhttp://html/preview1.html


21/52

21

Contoh :

Heading Elemet

Heading 1Heading 2Heading 3Heading 4Heading 5Heading 6

Basic HTML ElementBlock level element yang sering di gunakan : Heading (H1 sampaiH6)

Preview 2

hasilhasil
http://html/heading.htmlhttp://html/heading.html


22/52

22

Contoh :

Formating Paragraf

Pelatihan HTML

Palatihan HML di selenggarakanoleh Pustekkom Diknas

Paragraf (P)Digunakan untuk memulai paragraf baru atau format paragraf

Preview 3

hasilhasil

[
http://html/heading.htmlhttp://html/heading.html


23/52

23

1. Unordered List / tidak berurutan (Bullet) :

Contoh :Unordere ListContoh penggunaan Unordered List

SeninselasaRabu

KamisJumatSabtuMinggu

List Item(LI)List item di gunakan untuk mengelompokkan data baik berurutan (ordered list) maupunyang tidak berurutan (unordered list).Ada 2 macam list yang bisa anda tambahkan ke document HTML:

Preview 4

hasilhasil
http://html/unorderedlist.htmlhttp://html/unorderedlist.html


24/52

24

BulletKotak

Bullet Titik

BulletLingkaran

SQUAREDISCCIRCLE

TYPE

DescriptionValueAttributeTag

Unordered List / tidak berurutan(Bullet) :


25/52

25

List Item (LI)2. Ordered List / Berurutan

(Numbering)

Contoh :Ordere ListScedule Pelatihan HTML

Senin

Pengenalan HTMLMembuat halaman

web

SelasaMembuat Tabelmenambahkan

Gambar

Rabu

Membuat Link

Preview 5

hasil
http://html/orderedlist.htmlhttp://html/orderedlist.html


26/52

26

Begin NumbernSTART

Lower RomanUper RomanUppercase

Lowercase

IiA

a

TYPE

DescriptionValueAttribute

Tag

Ordered List / Berurutan(Numbering)


27/52

27

PemformatanHalaman1. Begin row (BR)

Tag
di gunakan untuk memulai baris baru pada document

HTML.Contoh:brHALAMAN WEB PUSTEKKOM

Pustekkom Depdiknas
Jl. Cendrawasik Km 15.5

Link terkaitwww.e-dukasi.net

Preview 6

hasil

Ganti baris
http://html/br.htmlhttp://html/br.html


28/52

28

2. Format Font

Dengan tag anda bisa menentukan format tampilan font dalam documentHTML

seperti color, size, style dan lainya.

Contoh:

Pelatihan Produksi PengPopPelatihan Produksi PengPop Tahap 1

Preview 7

hasil
http://html/formatfont.htmlhttp://html/formatfont.html


29/52

29

Untuk menentukan jenis font biasanya dalam satu listada beberapafont dan akan di baca mulai dari yangpaling kiri.

face

Untuk menentukan ukuran dari font 1 - 7Size

Untuk menentukan warna font, anda bisa menggunakan nama font

atau hexadecimal(#000000 - #ffffff)

Color

DescriptionAttribute

Attribute Format Font


30/52

30

Alignment

Align attribute digunakan untuk menentukan perataan object dalam documentHTML baik berupa text, object, image, paragraph, division dan lain-lain.

Rata kanankiri

Justify

Ratatengah

Center

Rata kananRight

Rata KiriLeft

DescriptionValue FormatText

Subcript text>

Superscript text

Untuk memberigaris di

tengah text

Untuk ukuran yanglebih

kecil dari normal

Untuk ukuran yanglebih

besar dari normal

Cetak garis bawah

Cetak miring

Cetak tebal

DescriptionTag


31/52

31

Navigasi / HyperlinkBerfungsi untuk memanggil halaman lain yang terkait baik dalam satu alamat webtersebut atau ke alamat web lain.

Contoh :Halaman web Pustekkom yang memanggil halaman webedukasinet

Link 1HALAMAN WEB PUSTEKKOM

Pustekkom Depdiknas
Jl. Cendrawasih Km 15.5

Link terkaitwww.e-dukasi.net

Preview 8
http://html/link.htmlhttp://html/link.html


32/52

32

Navigasi / Hyperlink

Link 2HALAMAN WEB EDUKASINET

materi pokok | modulonline | pengetahuan populer | uji kompetensi

Materi Pokok
Modul Online
Hyperlink dalam satu halaman web (Anchor)

Preview 9
http://html/anchor.htmlhttp://html/anchor.htmlhttp://html/anchor.html


33/52

33

Tabel

Tag digunakan untuk membuat table dalam document HTML,bagian pokok dari table adalah cell yang didefinisikan dengan

menggunakan tag .Contoh :tabel 1TABEL

Tabel dengan single cellTabel dengan dua cellTabel dengan tiga cellTabel dengan empat cell

ABCD

Preview 10
http://html/tabel3.htmlhttp://html/tabel3.html


34/52

34

Menambahkan gambar &animasiAnda dapat menambahkan gambar dan animasi pada halaman web yanganda buat.

Contoh :Contoh :

GambarGambar

Insert GambarInsert Gambar

Insert gambar di siniInsert gambar di sini

Preview 11
http://html/gambar.htmlhttp://html/gambar.html


35/52

35

Bekerja dengan DesignBekerja dengan Design

ViewView

Area anda

mengetiknaskah

Input title disiniInput title disini


36/52


37/52

37

Page Properties - LinksPage Properties - Links


38/52

38

Page Properties-Page Properties-

HeadingHeading


39/52

39

Properties InspectorDigunakan untuk memformat teks

Font faceFont face

Font SizeFont Size

Font colorFont color

AlignmentAlignment

HyperlinkHyperlink

di


40/52

40

Insert Image & MediaDigunakan untuk menambahkan gambar atau media lain(animasi/video) ke dalamlembar kerja

Pilih file gambarnyaPilih file gambarnya

1. Insert Image

Insert Image & Media


41/52

41


2. Insert Animasi



42/52

42


3. Insert Flash Button

Rollover Image


43/52

43

Rollover Image

Gambar1Gambar2

Table


44/52

44

TableMenambahkan tabel ke dalam lembar kerja

atau

Table Properties


45/52

45

Table PropertiesDigunakan untuk memberikan attribut-attribut pada tebal

banyaknya

baris & kolomlebar & tinggi

tabelJarak spasidalam cell

Jarak spasiantar cell

Warnabackground

Gambar latarbelakang

Perataan

ketebalangaris pinggir

warna garispinggir

Navigasi/Hyperlink


46/52

46

Navigasi/HyperlinkDigunakan untuk menghubungkan antar file html dalam satu website atau denganwebsite lain.

Atau pada properties inspector

1. Hyperlink ke alamat website lain

Navigasi/Hyperlink


47/52

47

Navigasi/Hyperlink

2. Anchor / Link dalam satu halamanweb

1. Blok bagian yangakan di panggil

2. Klik iconAnchor

Ketik nama anchordisini

Navigasi/Hyperlink


48/52

48

Navigasi/Hyperlink

2. Anchor / Link dalam satu halamanweb

Blok menu yang digunakan untukmemanggil/link

Ketik nama bagian yangakan di panggil (anchor)


49/52

49

Cascading Style Sheet (CSS)CSS digunakan untuk mempermudah dalam pemformatan tampilan halamanweb

Klik tanda +untuk

menambah css


50/52

50

Cascading Style Sheet (CSS)


51/52

51

Cascading Style Sheet (CSS)

Ketik namacss


52/52

TerimaTerimakasihkasih

Sukses Untuk KitaSukses Untuk Kita

Membuat Web Dengan Dreamweaver

Documents

Transcript of Membuat Web Dengan Dreamweaver

Tutorial Dreamweaver 3 - multimediacorp.files.wordpress.comlokal dan untuk membuat dan mengedit dokumen web. Latihan ini digunakan untuk belajar keterampilan dasar yang dibutuhkan

Kreasi Web Fantastis dgn Photoshop CS & Dreamweaver MX · PDF fileBerikut langkah-langkah membuat website “My Diary” yang bisa ... Membuat Tombol dengan Rounded Rectangle Tool

3 Belajar PHP - kuswandi73.files.wordpress.com filemaupun desainer sangat terbantu dengan kehadiran DreamWeaver sebagai web editor. Tampilan Dreamweaver Tampilan Dreamweaver sangat

Modul dan ebook kursus web dengan dreamweaver dan phpmysql

modul pemrograman web dengan dreamweaver, sql & php

Tutorial Dreamweaver Membuat Situs Web

Membuat Tampil, Input, Edit dan Hapus Data dengan Dreamweaver

Membuat situs sederhana dengan Dreamweaverstaffnew.uny.ac.id/upload/132162018/pengabdian/makalah...1 Membuat situs sederhana dengan Dreamweaver*) Oleh: Sri Andayani Jurusan Pendidikan

WEB DATABASE INFORMASI LAPTOP MENGGUNAKAN DREAMWEAVER MX DAN PHP MY SQL

01. Membuat Web Dengan DreamWeaver

Membuat Web Blog...MEMBUAT WEB BLOG 1 Edisi Khusus Dreamweaver MX 2004 dan Active Server Pages Membuat Web Blog Kalau ada teknologi website yang sanggup menciptakan kehebohan dan trend,

Pengenalan Macromedia Dreamweaver · PDF filemelakukan coding scripting PHP untuk membuat web yang ... makabackground image tidak bisa scroll. ... Anda dapat mulai meletakkan kalimat

Membuat Website Sekolah Sederhana Dengan Dreamweaver Dan PHP MYSQL Edisi Pemula

Tutorial Dreamweaver

MACROMEDIA DREAMWEAVER 8 Macromedia Dreamweaver ...

MACROMEDIA DREAMWEAVER 8 - ilmuti.orgilmuti.org/wp-content/uploads/2018/06/MENGKONEKSIKAN-DATABASE... · Untuk membuat site baru di dreamweaver bisa Anda lihat pada artikel Membuat

Desain Web Menggunakan Macromedia Dreamweaver 4

7 Langkah Menguasai Web PHP - MySQL - Dreamweaver

Tutor Dreamweaver

Seri Tutorial Dreamweaver 8 - Membuat Menu Dengan CSS (free)