• Tidak ada hasil yang ditemukan

Membuat web dengan dreamweaver

N/A
N/A
Protected

Academic year: 2017

Membagikan "Membuat web dengan dreamweaver"

Copied!
52
0
0

Teks penuh

(1)

1

Andi Sulistiyono,

Andi Sulistiyono,

S.Kom

S.Kom

andi_sulistiyono@yahoo.com

0813.1972.9696

0813.1972.9696

PENGEMBANGAN

PENGEMBANGAN

BAHAN BELAJAR

BAHAN BELAJAR

BERBASIS WEB

(2)

2

Pendidikan

SD Negeri 2 Sadang - Kudus

SMP Negeri 1 Jekulo - Kudus

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 Materi

Pokok dan Pengetahuan Populer, Pengkaji media penyusunan GBIM,

JM, Naskah pengetahuan populer dan Materi Pokok.

Curriculum Vitae

(3)

3

Software yang

Software yang

digunakan untuk

digunakan untuk

membuat website

(4)

4

Software yang

Software yang

digunakan untuk

digunakan untuk

membuat website

(5)

5

Software yang

Software yang

digunakan untuk

digunakan untuk

membuat website

(6)

6

Mengenal Software

Mengenal Software

Dreamweaver

(7)

7

Tampilan

Tampilan

Dreamweaver

Dreamweaver

Title

Bar Menu

Bar Toolbar Insert

Toolbar Document

Toolbar Standar Properties

Inspector

Status bar Tool

(8)

8

Title Bar

Title Bar

Menu Bar

Menu Bar

Standart toolbar

Standart toolbar

Document

Document

Toolbar

Toolbar

Status Bar

Status Bar

(9)

9

1. Klik

Site

pada menubar kemudian pilih

New Site

Memulai Dengan Dreamweaver

(10)

10

2. Isi kotak dialog Site Definition for website

Nama site Folder untuk

menyimpan file html Folder untuk

menyimpan file gambar

(11)

11

3. Lihat pada

Application Files

Nama site

Folder untuk gambar

(12)

12

4. Buat file

HTML

klik kanan pada

nama site

yang

kita buat tadi kemudian pilih

New File

Kemudian ketik nama file

yang akan anda buat,

file utama yang di buat

diberi nama

index.html

(13)

13

5. Mengisi file

HTML,

double klik nama file

HTML yang telah kita buat.

(14)
(15)

15

Menyimpan Dokumen

(16)

16

Klik disini untuk menjalankan

program

Menjalankan

Menjalankan

program

(17)

17

Bekerja dengan

Code

Tag-tag

Tag-tag

HTML

(18)

18

Tag-tag HTML

Command HTML biasanya disebut TAG, TAG digunakan untuk menentukan tampilan dari document

HTML.

<BEGIN TAG> </END TAG>

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

<html>

-</html>

Tag tidak case sensitive, jadi anda bisa gunakan <HTML> atau <html> keduanya menghasilkan

output yang sama.

Bentuk dari tag HTML sebagai berikut:

<Element Attribute = Value>

Element - nama tag

Attribute - atribut dari tag Value - nilai dari atribut.

Contoh :

<body bgcolor="lavender">

BODY merupakan element, BGCOLOR(Background) merupakan atribut yang memiliki nilai

lavender.

Begin

Tag

(19)

19

Document HTML bisa di bagi mejadi tiga bagian utama:

Struktur

Struktur

HTML

HTML

1. HTML

Setiap document HTML harus di awali dan di tutup dengan tag HTML

<HTML> </HTML>

tag HTML memberi tahu browser bahwa yang di dalam kedua tag tersebut adalah document HTML.

2. HEAD

Bagian header dari document HTML di apit oleh tag <HEAD></HEAD> di dalam bagian ini dimuat tag TITLE yang menampilkan judul dari halaman pada titlenya browser.

<HEAD>

<TITLE> </TITLE> </HEAD>

3. BODY

Document body di gunakan untuk menampilkan text, image link dan semua yang akan di tampilkan pada web page.

(20)

20

<html>

<head>

<title>

Judul yang ada di pojok kiri atas pada

browser

</title>

</head>

<body>

Disini tempat menuliskan teks,

menyisipkan tabel, gambar, animasi dll.

</body>

</html>

Contoh 1 :

Preview 1

(21)

21 Contoh : <html> <head> <title>Heading Elemet</title> </head> <body> <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6> </body> </html>

Basic HTML Element

Block level element yang sering di gunakan : Heading (H1 sampai H6)

Preview 2

hasil

(22)

22 Contoh : <html> <head> <title>Formating Paragraf</title> </head> <body> <h3>Pelatihan HTML</h3> <p>

Palatihan HML di selenggarakan oleh Pustekkom Diknas

</p> </body> </html>

Paragraf (P)

Digunakan untuk memulai paragraf baru atau format paragraf

Preview 3

hasil

hasil

(23)

23

1. Unordered List / tidak berurutan (Bullet) :

Contoh : <html> <head> <title>Unordere List</title> </head> <body>

Contoh penggunaan Unordered List <p> <ul type="circle"> <li>Senin</li> <li>selasa</li> <li>Rabu</li> <li>Kamis</li> <li>Jumat</li> <li>Sabtu</li> <li>Minggu</li> </ul></body> </html>

List Item(LI)

List item di gunakan untuk mengelompokkan data baik berurutan (ordered list) maupun yang tidak berurutan (unordered list).

Ada 2 macam list yang bisa anda tambahkan ke document HTML:

Preview 4

hasil

(24)

24

Bullet

Kotak

Bullet Titik

Bullet

Lingkara

n

SQUARE

DISC

CIRCLE

TYPE

<U

L

>

Description

Value

Attribute

Tag

(25)

25

List Item (LI)

2. Ordered List / Berurutan (Numbering) Contoh : <html> <head> <title>Ordere List</title> </head> <body>

Scedule Pelatihan HTML <p>

[image:25.720.6.709.9.521.2]
(26)

26

Begin Number

n

START

<OL>

Lower Roman

Uper Roman

Uppercase

Lowercase

I

i

A

a

TYPE

<OL>

Description

Value

Attribut

e

Tag

(27)

27

Pemformatan

Halaman

1. Begin row (BR)

Tag <BR> di gunakan untuk memulai baris baru pada document HTML. Contoh: <html> <head> <title>br</title> </head> <body>

<center>HALAMAN WEB PUSTEKKOM</center> <p>

Pustekkom Depdiknas<br>

(28)

28

2. Format Font

Dengan tag <FONT> anda bisa menentukan format tampilan font dalam document HTML

seperti color, size, style dan lainya.

Contoh:

<html> <head>

<title>Pelatihan Produksi PengPop</title> </head>

<body>

<font color="#0000FF" size=”2”

face="Verdana, Arial, Helvetica, sans-serif"> Pelatihan Produksi PengPop Tahap 1

</font> </body> </html>

Preview 7

(29)

29

Untuk menentukan jenis font biasanya dalam satu list ada beberapa font dan akan di baca mulai dari yangpaling kiri.

face

Untuk menentukan ukuran dari font 1 - 7 Size

Untuk menentukan warna font, anda bisa menggunakan nama font atau hexadecimal(#000000 - #ffffff)

Color

Description Attribute

(30)

30

Alignment

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

Rata kanan

kiri

Justify

Rata

tengah

Center

Rata kanan

Right

Rata Kiri

Left

Description

Value

Format

Text

Subcript text>

<SUB>…</SUB>

Superscript text

<SUP>…</SUP>

Untuk memberi

garis di

tengah text

<STRIKE>…

</STRIKE>

Untuk ukuran yang

lebih

kecil dari normal

<SMALL>…

</SMALL>

Untuk ukuran yang

lebih

besar dari normal

<BIG>…</BIG>

(31)

31

Navigasi / Hyperlink

Berfungsi untuk memanggil halaman lain yang terkait baik dalam satu alamat web tersebut atau ke alamat web lain.

Contoh :

Halaman web Pustekkom yang memanggil halaman web

edukasinet

<html>

<head>

<title>Link 1</title>

</head>

<body>

<center>HALAMAN WEB PUSTEKKOM</center>

<p>

Pustekkom Depdiknas<br>

Jl. Cendrawasih Km 15.5 <br><br>

Link terkait

<a href="link2.html">www.e-dukasi.net</a>

</body>

</html>

(32)

32

Navigasi / Hyperlink

<html><head>

<title>Link 2</title> </head>

<center>

<h1><font face="Verdana, Arial, Helvetica, sans-serif" color="#0033FF">

HALAMAN WEB EDUKASINET</font></h1></center> <br>

<center><h4><font face="Verdana, Arial, Helvetica, sans-serif" color="#0033FF">

<a href="#mapok">materi pokok</a> | <a href="#mol">modul online</a> | pengetahuan populer | uji kompetensi

</font></h4> <p align="left">

<font face="Verdana, Arial, Helvetica, sans-serif" color="#FF9900">

Materi Pokok</font><a name="mapok"></a></p> </center>

<font face="Verdana, Arial, Helvetica, sans-serif" color="#FF9900">

Modul Online</font> <a name="mol"></a></p> </body>

</html>

Hyperlink dalam satu halaman web (Anchor)

(33)

33

Tabel

Tag <TABLE> digunakan untuk membuat table dalam document HTML

,bagian pokok dari table adalah cell yang didefinisikan dengan

menggunakan tag <TD>.

Contoh :

<html> <head> <title>tabel 1</title> </head> <body> <center><h1>TABEL</h1></center> <p> <table border="1"> <tr>

<td>Tabel dengan single cell</td> <td>Tabel dengan dua cell</td> <td>Tabel dengan tiga cell</td> <td>Tabel dengan empat cell</td> </tr> <tr> <td align="center">A</td> <td>B</td> <td>C</td> <td>D</td> </tr> </table> </body>

(34)

34

Menambahkan gambar &

animasi

Anda dapat menambahkan gambar dan animasi pada halaman web yang anda buat. Contoh : Contoh : <html> <html> <head> <head> <title>Gambar</title> <title>Gambar</title> </head> </head> <body> <body> <center><h1>Insert Gambar</h1></center> <center><h1>Insert Gambar</h1></center> <p> <p>

Insert gambar di sini

Insert gambar di sini

<p><img src="image/satu.jpg" height="500"

<p><img src="image/satu.jpg" height="500"

(35)

35

Bekerja dengan Design

Bekerja dengan Design

View

View

Area anda

mengetik

naskah

Input title disini

(36)

36

Page Properties -

Page Properties -

Appearance

(37)

37

Page Properties - Links

(38)

38

Page

Page

Properties-Heading

(39)

39

Properties Inspector

Digunakan untuk memformat teks

Font face

Font face

Font Size

Font Size

Font color

Font color

Alignment

Alignment

Hyperlink

(40)

40

Insert Image & Media

Digunakan untuk menambahkan gambar atau media lain(animasi/video) ke dalam lembar kerja

Pilih file gambarnya

Pilih file gambarnya

(41)

41

Insert Image & Media

(42)

42

Insert Image & Media

(43)

43

[image:43.720.130.702.8.526.2]

Rollover Image

Gambar 1

(44)

44

Table

Menambahkan tabel ke dalam lembar kerja

[image:44.720.12.711.15.508.2]
(45)

45

Table Properties

Digunakan untuk memberikan attribut-attribut pada tebal

banyaknya baris & kolom

(46)

46

Navigasi/Hyperlink

Digunakan untuk menghubungkan antar file html dalam satu website atau dengan website lain.

(47)

47

Navigasi/Hyperlink

2. Anchor / Link dalam satu halaman

web

1. Blok bagian yang akan di panggil

2. Klik icon Anchor

(48)

48

Navigasi/Hyperlink

2. Anchor / Link dalam satu halaman

web

Blok menu yang di gunakan untuk memanggil/link

(49)

49

Cascading Style Sheet (CSS)

CSS digunakan untuk mempermudah dalam pemformatan tampilan halaman web

(50)

50

(51)

51

Cascading Style Sheet (CSS)

(52)

52

Terima

Terima

kasih

kasih

Sukses Untuk Kita

Sukses Untuk Kita

Semua

Gambar

Gambar</li>
Gambar 1Gambar
TableMenambahkan tabel ke dalam lembar kerja

Referensi

Dokumen terkait

H1: The use of Dictogloss technique is effective to improve the mastery of simple past tense for the first grade students at SMK Bopkri I Yogyakarta..

Untuk mengetahui, mengeksplorasi, memahami dan menambah pengetahuan tentang ritual-ritual dan kepercayaan, khususnya yang berkaitan dengan konsep ketuhanan komunitas

Dari hasil diatas dapat disimpulkan bahwa penelitian ini tidak konsisten dengan penelitian yang dilakukan oleh Mardisar dan Sari (2007) menunjukkan bahwa

dan huruf d Undang-Undang Nomor 10 Tahun 2008 Juncto Peraturan Komisi Pemilihan Umum Nomor 18 Tahun 2008 tentang Pedoman Teknis Pencalonan Anggota Dewan

* HITUNG BESAR TEGANGAN NORMAL DAN LENTUR DI POTONGAN SEDIKIT SEBELAH KIRI TITIK B PADA ELEMEN 1 SEJARAK 8 CM DARI SISI BAWAH PENAMPANG.. hitung dan gambar diagram

Mengapa seorang orang suatu peralatan pesawat yang membahayakan dalam pengoperasiannya harus dapat lisensi dari kementerian tenaga kerja dan transmigrasia.

Dengan mengucap syukur kepada Alloh SWT yang telah memberikan rahmat, nikmat dan karunia yang tak pernah putus sehingga peneliti dapat menyelesaikan Karya Ilmiah

Jadi Museum Sejarah dan Seni Medan adalah suatu bangunan yang mewadahi karya-.. karya di masa lampau baik dalam bentuk, suara, rupa (visual) yang memiliki nilai