notes web publishing

PENGENALAN KEPADA INTERFACE DREAMWEAVER CS3

NO CONTENT

1 Membina Site pada Dreamweaver CS3

2 Pengenalan Interface dalam Dreamweaver CS3

3 Pengenalan kepada HTML

4 Pengenalan Basic Web Layout

5 Membina Basic HTML Website (INSTEDT)

DMG22223/Penerbitan Laman Web/Nota/MasturahZainal/2013

1. MEMBINA SITE PADA DREAMWEAVER CS3

Pada laman page Dreamweaver, klik pada Dreamweaver Site Defination untuk membinal laman web yang baru.

Setelah muncul kotak dialog, Isikan nama site dan URLnya Akan muncul kotak dialog Summary, Klik Done


2. PENGENALAN INTERFACE DALAM DREAMWEAVER CS3

Setelah semuanya selesai, anda akan terus ke Interface Dreamweaver ex. dibawah.

The Properties Panel - Untuk kegunaan mengubah text

Untuk mengubah sebarang format/ link sesuatu image/ gambar yang diletakkan pada design website anda


3. PENGENALAN KEPADA HTML

HTML stands for Hyper Text Markup Language merupakan bahasa markup utama bagi memaparkan laman web dan maklumat lain yang terkandung melalui pelayar web(web browser). Ringkasnya, HTML merupakan “bahasa” utama laman web yang perlu difahami oleh web developer.

Web-pages di panggil sebagai HTML Documents. Setiap dokumen HTML yang ingin disimpan (save) perlu diberi nama “.htm” atau “.html”Ianya menggunakan struktur dan layout pada dokumen web dengan menggunakan pelbagai tags and attributes. Dokumen HTML disusun elemen-elemen atau komponen dasar pembentu HTML. Contoh dari elemen dokumen HTML adalah :

head , body, table, paragraf, list.

Apa itu TAG?

Tag digunakan untuk membuat elemen dalam suatu dokumen HTML. Tag HTML terdiri atas sebuah sudut kiri (<, tanda lebih kecil), nama sebuah tag, dan sebuah tanda kurung sudut kanan (>, tanda lebih besar. Tag umumnya berpasangan, sebagai contoh <H1> Dengan </H1>

Setiap dokumen html perlu tulis tag <html> pada permulaan tag </html> pada akhir dokumen. Ini mewakil ada 1 dokumen html.

Section atau elemen pada head perlu dimulakan dengan tag <head> dan diakhiri dengan tag </head> pada akhir dokumen. Section ini mengandungi dokumen dan informasi tentang dokumen HTML contoh : tag <title> dan akhiri

dengan tag </tittle>

Section body ditandai dengan tag <body> dan diakhiri dengan tag </body> . Section body merupakan isi dokumen yang akan ditampilkan pada browser.

CONTOH HTML (1)

<html><head><title>Belajar Web Design</title></head>ini adalah halaman HTML<body>


</body></html>

Apa itu ATTRIBUTE TAG?

Tag mempunyai atribut. Atribut menyatakan sesuatu tentang tag tersebut. Atribut digunakan untuk mengubah default pemformatan dokumen dengan tag yang bersangkutan. Seperti contoh;

Tag berikut tidak mempunyai atribut :<body>. Tag <body>

Tag berikut mempunyai atribut : <body bgcolor=”green”>

CONTOH HTML (2)

<html><head><title>Belajar Web Design</title></head>ini adalah halaman HTML<body bgcolor="#FFCCCC"></body></html>

Background akan bertukar menjadi warna pink

Apa itU PARAGRAPH?

Setiap paragraf harus dimulai dengan memberi tag <p>.

CONTOH HTML (3)

<html><head><title>Tag Paragraf</title></head><body><p>berikut ini adalah paragraf 1</p> <p>berikut ini adalah paragraf 2</p><p>berikut ini adalah paragraf 3</p> </body></html>

Apa itu LINE BREAK?


Kita dapat mengaturkan paragraph pada dokumen HTML pada web dengan menggunakan tag <br>

CONTOH HTML (4)

<html><head><title>Ganti Baris</title><head><body> ini adalah baris ke 1<br> ini adalah baris ke 2<br>ini adalah baris ke 3<br>ini adalah baris ke 4<br>ini adalah baris ke 5<br></body></html>Apa itu HEADING?

Tag heading menunjukkan perkataan atau huruf yang lebih besar atau ditebalkan. Heading digunakan sebagai tajuk dalam website. Heading mempunyi 6 saiz yang berbeza.

CONTOH HTML (5)

<html> <head><title>Heading</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>

Apa itu ALIGN?

Align digunakan untuk menyusun atur text/ paragraph pada website/ dokumen html.

CONTOH HTML (6)

<h1 align=left> Heading 1 Left </h1><h1 align=center> Heading 1 Center </h1><h1 align=right> Heading 1 Right </h1>

Apa itu FORMAT TEKS?

Format teks digunakan untuk menentukan karekter text/ paragraph pada dokumen html.


4. PENGENALAN BASIC WEB LAYOUT

HeaderAdalah tempat TAJUK website yang biasanya berada diatas webpage

MenuMenu Adalah Navigator dari Content layout, berisikan link informasi sebuah website.

ContentAdalah tempat utama dari sebuah webpage, maklumat utama/ highlight yang dapat dinavigasi melalui menu (hyperlink) pada bagian menu

FooterFooter hampir sama dengan header, footer berada di bawah dari webpage. Dimana ianya diletakkan copyright/ pemilik web tersebut.


Sebelum membangunkan sesuatu laman web, adalah penting untuk merancang sesuatu laman web sebelum membina laman-laman yang hendak dimasukkan ke dalam laman web tersebut.

Cara lama untuk membina laman web termasuklah mewujudkan satu folder di dalam local drive. Semua HTML dokumen akan disimpan di dalam folder utama ini, manakala imej, animasi, flash, dan sebagainya akan disimpan di dalam folder lain yang diwujudkan di dalam folder utama. Pewujudan folder-folder lain (imej, animasi, flash) di dalam folder utama adalah untuk memudahkan kita dalam membangunkan sesuatu laman web. Ini yang dipanggil sebagai Local Site.

Kemudian kesemua kandungan yang ada pada Local site akan dipindahkan ke Remote Site supaya pengguna akan dapat melihat laman web yang dibangunkan melalui Internet. Perpindahan daripada Local Site ke Remote Site ini dipanggil FTP (File Transfer Protocol)

5. MEMBINA BASIC HTML WEBSITE (INSTEDT)


Menggunakan table/ jadual sebagai basic Page Layout. Klik TABLE Masukkan bilangan ROW & COLUMS

Untuk merge table klik pada Properties dan klik pada ikon seperti di bawah ini

Resize table yang telah dibina dengan menggunakan cursor. Kemudian masukkan elements seperti content/ isi kandungan dan

paragraph di dalam table yang telah disediakan seperti conton yang ditunjukkan di atas.
