Dreamweaver Tutorial

Dreamweaver CS4 Tutorial Tutorial Dreamweaver CS4

Define Site in Dreamweaver CS3 Tentukan

Situs dalam Dreamweaver CS3
Step 1: Dreamweaver CS3 Tutorial - Define New Site
Langkah 1: Dreamweaver CS3 Tutorial - Tentukan Situs
Baru
[This is Step 1 of the Dreamweaver CS3 Tutorial ] [Ini adalah Langkah 1 dari Dreamweaver CS3
Tutorial ]

Defining a new site is the first step to creating a website in Dreamweaver CS3. Mendefinisikan
situs baru merupakan langkah pertama untuk menciptakan sebuah situs web di Dreamweaver
CS3.

1. Create a folder in which you will store all your project files. Buat folder di mana Anda
akan menyimpan semua file proyek Anda. Create an 'images' folder within and transfer
all the sliced images to this folder. gambar 'Buat folder' dalam dan mentransfer semua
diiris gambar ke folder ini.
2. Open Dreamweaver Buka Dreamweaver
3. Define a new site [Site > New Site > 'Advanced' tab] Mendefinisikan situs baru
Advanced '] tab [Situs> Situs Baru>'
4. Fill in your Site Name in the box provided for 'Site Name'. Isi Nama Situs Anda di kotak
yang tersedia untuk 'Nama Situs'.
5. Use the yellow folder icon next to the 'Local Root Folder' box to browse for the project
folder you had created. Gunakan folder icon kuning di samping kotak 'Lokal Root Folder
"untuk mencari folder proyek Anda telah dibuat.
6. You should be able to see the 'images' folder in your Files panel [Site > Files]. Anda
harus dapat melihat 'folder gambar' di panel File Anda [Situs> File].
Dreamweaver CS4 Tutorial Tutorial Dreamweaver CS4

Dreamweaver CS3 Templates Dreamweaver

CS3 Template
Step 2: Dreamweaver CS3 Tutorial - Create a Dreamweaver
Template Langkah 2: Dreamweaver CS3 Tutorial -
Membuat Template Dreamweaver
[This is Step 2 of the Dreamweaver CS3 Tutorial ] [Ini adalah Langkah 2 dari Dreamweaver CS3
Tutorial ]

If most of the pages in your web site have the same look and feel it is advisable to create a
Dreamweaver template. Jika sebagian besar halaman pada situs web Anda memiliki tampilan
yang sama dan merasa sangat disarankan untuk membuat template Dreamweaver.

The advantages of creating a dreamweaver template include: Keuntungan dari menciptakan

Dreamweaver template meliputi:

 All pages will look consistent Semua halaman akan terlihat konsisten
 When you want to make changes that effect the layout of the entire site you can simply
make the changes to the template and update all the pages automatically Bila Anda ingin
membuat perubahan yang mempengaruhi tata letak seluruh situs Anda hanya dapat
membuat perubahan terhadap template dan memperbarui semua halaman secara otomatis

The dreamweaver template file has a .dwt extension and will get saved in a folder entitled
"Templates". Dreamweaver template file memiliki ekstensi DWT. dan akan disimpan dalam
folder berjudul "Template". To create a dreamweaver template follow these steps: Untuk
membuat Dreamweaver template ikuti langkah berikut:

1. File > New File> New

2. Page Type > HTML template > Page Jenis template HTML
3. Layout - select from one of the pre-built layout options and customize it or select <none>
and create your own from scratch Layout - pilih dari salah satu pilihan tata letak pre-built
dan menyesuaikan atau pilih <none> dan membuat sendiri dari awal
Dreamweaver CS4 Tutorial Tutorial Dreamweaver CS4

Dreamweaver CS3 Page Layouts

Dreamweaver CS3 Page Layouts
Step 3: Dreamweaver CS3 Tutorial - Page Layouts Langkah
3: Dreamweaver CS3 Tutorial - Page Layouts
[This is Step 3 of the Dreamweaver CS3 Tutorial ] [Ini adalah Langkah 3 dari Dreamweaver CS3
Tutorial ]

You can use Dreamweaver to create the general page layout (within the template) using either
tables or css. Anda dapat menggunakan Dreamweaver untuk membuat tata letak halaman umum
(dalam template) baik menggunakan tabel atau css. The advantages and disadvantages of both
these approaches are give below: Keuntungan dan kerugian dari kedua pendekatan tersebut
memberikan di bawah ini:

Table Layouts : Advantages Tabel Layouts: Keuntungan

  Easy to design Mudah desain
 Works well on older browsers Bekerja dengan baik pada browser lama

Table Layouts : Disadvantages Tabel Layouts: Kekurangan

 Loads only once all the elements within the table have loaded - usually slower than css
layouts Beban hanya sekali semua elemen dalam tabel telah dimuat - biasanya lebih
lambat dari layout css
 Changes to the tables will need to be made on each page and all the pages will need to
uploaded to the server again Perubahan tabel perlu dibuat pada setiap halaman dan semua
halaman akan perlu di-upload ke server lagi

CSS Layouts : Advantages CSS Layouts: Keuntungan

 Loads fast - the css file just needs to be loaded once Beban cepat - css file yang hanya
perlu dimuat sekali
 Can easily change the layout of the entire site by tweaking the .css file as the design
elements are separated from the content dengan mudah dapat mengubah tata letak seluruh
situs oleh tweaker yang css file. sebagai elemen desain terpisah dari konten

CSS Layouts : Disadvantages CSS Layouts: Kekurangan

 More challenging to design Lebih menantang untuk merancang
 May not work on some of the older browsers Mungkin tidak bekerja pada beberapa
browser lama

Creating the Page Layout using Tables Membuat Layout

Halaman menggunakan Tabel
Using the "tables approach" your layout will be structured within tables and cells. Menggunakan
"pendekatan tabel" tata letak Anda akan terstruktur dalam tabel dan sel.

Analyze your layout (created in Adobe Fireworks or Photoshop) to figure out how many tables
with how many rows and columns you would need to recreate it in Dreamweaver. Menganalisis
Anda layout (dibuat dalam Adobe Fireworks atau Photoshop) untuk mengetahui bagaimana
banyak tabel dengan berapa banyak baris dan kolom akan Anda butuhkan untuk menciptakan
dalam Dreamweaver.

Now start creating your tables. Sekarang Anda mulai membuat tabel. You can use pixels or
percentages to define the width and height. Anda dapat menggunakan piksel atau persentase
untuk menentukan lebar dan tinggi. If you have more that 1 column make sure the widths of all
the columns add up to the width of the table. Jika Anda memiliki lebih dari 1 kolom lebar
memastikan semua kolom menambahkan hingga lebar meja. [Insert > Table] [Sisipkan> Tabel]
The Properties Inspector is extremely useful for editing the properties of any element in your
page. Inspektur Properties sangat berguna untuk mengedit properti dari setiap elemen dalam
halaman Anda. To edit the properties of a table simply select the table and open the Properties
Inspector. Untuk menyunting properti dari tabel cukup pilih meja dan membuka Inspektur
Properties. [Window > Properties] [Window> Properties]

Try and create separate tables as much as possible. Coba dan membuat tabel terpisah sebanyak
mungkin. This is because a table will load only once all the elements within it have loaded. Hal
ini karena akan memuat tabel hanya sekali semua elemen di dalamnya telah dimuat.

Explore creating the layout you designed using tables. Jelajahi menciptakan tata letak yang
dirancang menggunakan tabel. You can give background colors, create tables within tables,
specify the alignment of the content within the cell etc. So go ahead and try it out. Anda bisa
memberikan warna latar belakang, membuat tabel dalam tabel, menentukan alignment dari isi
dalam sel dll Jadi silakan mencobanya. You will apply this concept later in Project 1: Table-
based Dreamweaver CS3 layout. Anda akan menerapkan konsep ini kemudian di Proyek 1:
Dreamweaver CS3 berbasis tata letak Tabel.

Creating the Page Layout using DIV Tags and CSS

Membuat Layout Halaman menggunakan DIV dan CSS Tag
Using the CSS approach you will be creating the layout webpage using div tags to separate
different types of content on the page and positioning these div tags in CSS. Menggunakan
pendekatan CSS Anda akan menciptakan tata letak halaman web menggunakan tag div untuk
memisahkan berbagai jenis konten pada halaman dan posisi tag div dalam CSS ini.

You will need to create a css style sheet and attach it to the template. Anda perlu menciptakan
sebuah style sheet css dan pasang ke template.

For every div that you create in the template you will need to create a corresponding style in the
css file. Untuk div setiap yang Anda buat di template Anda harus membuat gaya yang sesuai di
file css. You can specify position the location of the div in the page, background colors, borders
and other properties in the style. Anda dapat menentukan posisi lokasi di halaman div, warna
latar belakang, batas dan properti lainnya di gaya. You will apply this concept later when you do
Project 2: CSS/ DIV based tableless layout . Anda akan menerapkan konsep ini kemudian, ketika
Anda melakukan Proyek 2: CSS / Tableless layout berdasarkan DIV .

An easy way to create a css, div based layout is to use one of the pre-built Dreamweaver layouts.
Cara mudah untuk membuat css, div layout berbasis menggunakan salah satu tata letak yang pre-
built Dreamweaver. [File New > Blank Page > HTML > Select layout best suited to your needs]
[File New> Blank Halaman> HTML> tata letak Pilih yang paling sesuai dengan kebutuhan
Anda]
 Prebuilt CSS layout options within Dreamweaver Prebuilt CSS dalam pilihan susunan
Dreamweaver

You can also get pre-built page layouts and cusomize them. Anda juga bisa mendapatkan
dibangun Halaman layout-pra dan cusomize mereka.

Css Style Sheets Dreamweaver CS3

Step 4: Dreamweaver CS3 Tutorial - Create CSS Stylesheet
Langkah 4: Dreamweaver CS3 Tutorial - Membuat CSS
Stylesheet
[This is Step 4 of the Dreamweaver CS3 Tutorial ] [Ini adalah Langkah 4 dari Dreamweaver CS3
Tutorial ]

CSS Styles help in consistency and maintenance. CSS Styles membantu dalam konsistensi dan
pemeliharaan. It is a good idea to centralize the text styles as much as possible in order to
maintain consistency and easy updating. Ini adalah ide yang baik untuk memusatkan gaya teks
sebanyak mungkin dalam rangka menjaga konsistensi dan mudah diupdate.

In the case of layouts designed with div tags (instead of tables ) or use of one of the prebuilt
layouts that come with Dreamweaver CS 3 you would have already created the css stylesheet and
assigned positional properties to the div tags. Dalam hal tata letak yang dirancang dengan tag div
(bukan tabel ) atau menggunakan salah satu tata letak yang prebuilt yang datang dengan
Dreamweaver CS 3 Anda akan telah menciptakan stylesheet css dan ditugaskan sifat posisi ke
tag div. Various CSS website templates are also available which you can customize for a
professional looking site. Berbagai CSS website template juga tersedia yang dapat disesuaikan
untuk situs mencari profesional.

Some of the styles you can centralize in an external css stylesheet include: Beberapa gaya Anda
dapat memusatkan dalam stylesheet css eksternal meliputi:

 H1 tag redefined H1 tag redefined

 H2 tag redefined tag H2 redefined
 p tag redefined tag p redefined
 a tag redefined (specifies the look of link) tag mendefinisikan (menetapkan tampilan link)
 menu styles menu gaya
 footer text styles gaya teks footer

To create an external stylesheet follow these steps: Untuk membuat eksternal stylesheet ikuti
langkah berikut:

1. File > New File> New

2. Page Type > CSS Halaman Jenis> CSS
3. Save the file in the website folder. Simpan file dalam folder website. You can name it
'styles' or any appropriate title. Anda dapat memberi nama itu 'gaya' atau judul yang
sesuai. It will get saved as a .css file. Ini akan disimpan sebagai file css..
Once you have created the css file you will need to attach it to the dreamweaver template file.
Setelah Anda menciptakan file css Anda perlu pasangkan ke Dreamweaver file template. You
can do this from the CSS Styles panel [Window > CSS Styles]. Anda dapat melakukannya dari
panel CSS Styles [Window> CSS Styles]. Click the Klik icon (attach style sheet), select the
css file and click OK. ikon (lampirkan style sheet), pilih file css dan klik OK.

You can create new css rules by clicking on the "New CSS Rule" icon. Anda dapat menciptakan
aturan css baru dengan mengklik ikon "" New CSS Peraturan.
In the dialog box that appears, Pada kotak dialog yang muncul,

If you want to create a custom style which can be applied to any tag : Jika Anda ingin
membuat gaya kustom yang dapat diterapkan untuk menandai setiap:

1. Select the selector type "class" Pilih jenis pemilih "kelas"

2. Name it with a "." Nama itu dengan "." at the beginning like .heading seperti pada awal.
pos
3. Define in: styles.css (or the name of your css file) Tentukan di: styles.css (atau nama file
css Anda)

If you want to redefine the look of an existing html tag: : Jika Anda ingin mendefinisikan
kembali tampilan tag html yang ada::

1. Select the selector type "Tag" Pilih jenis pemilih "Tag"

2. Select the Tag from the drop down menu eg "h1" Pilih Tag dari menu drop-down
misalnya "h1"
 3. Define in: styles.css (or the name of your css file) Tentukan di: styles.css (atau nama file
css Anda)

In the dialog box that appears, specify the properties of the style and click ok. Pada kotak dialog
yang muncul, tentukan properti dari gaya dan klik ok.

Dreamweaver CS4 Tutorial Tutorial Dreamweaver CS4

Inserting Text & Images in Dreamweaver
CS3 Memasukkan Teks dan Gambar dalam
Dreamweaver CS3
Step 5: Dreamweaver CS3 Tutorial - Insert Text & Images
Langkah 5: Dreamweaver CS3 Tutorial - Memasukkan Teks
& Gambar
[This is Step 5 of the Dreamweaver CS3 Tutorial ] [Ini adalah Langkah 5 dari Dreamweaver CS3
Tutorial ]

Once your template layout (with tables or div tags) and css stylesheet is created, you can insert
any images (eg logo), common menu items, text (eg copyright info) etc. that form part of the
general look and feel of the site into the template. Setelah tata letak template Anda (dengan tabel
atau tag div) dan stylesheet css dibuat, Anda dapat menyisipkan gambar apapun (misalnya logo),
umum menu item, teks (misalnya hak cipta info), dll yang merupakan bagian dari tampilan
umum dan nuansa dari situs ke dalam template.

Inserting Text Memasukkan Teks

You can type in text just as you would in any text editing software. Anda dapat mengetikkan teks
seperti yang Anda lakukan dalam setiap perangkat lunak pengeditan teks. You can apply styles
to it from the Properties panel. Anda dapat menerapkan gaya untuk itu dari panel Properties.

You can also format it with the existing html tags (which you would have redefined in the css
file). Anda juga dapat memformat dengan tag html yang ada (yang akan didefinisikan ulang pada
file css).
Inserting Images Memasukkan Gambar

You can insert images [Insert > Image]. Anda dapat menyisipkan foto [Sisipkan> Foto]. You can
also position them : Anda juga dapat posisi mereka:

1. Click on the image. Klik pada gambar.

2. Open the Properties Inspector. Buka Inspektur Properties. Select the required alignment
from the 'align' drop down menu. Pilih penyelarasan yang diperlukan dari
'menyelaraskan' menu drop down. You could also set the alignment of the cell/ div tag in
which the image will be placed. Anda juga dapat mengatur alignment sel / div tag di
mana gambar akan ditempatkan.

Common Menu Items Common Menu Produk

Menu items could be simple text with a style applied to it or javascript code etc. Menu item bisa
berupa teks sederhana dengan gaya yang diterapkan untuk itu atau kode javascript dll

Site Search Pencarian Situs

If you plan to have a site search on all the pages you can paste in the search code where required.
Jika Anda berencana untuk memiliki situs pencarian pada semua halaman, Anda dapat
menyisipkan kode pencarian di mana diperlukan. Various free services are available for site
search. Berbagai layanan gratis yang tersedia untuk pencarian situs.

Website Traffic Analytics Website Traffic Analytics

It is a good idea to build in any website traffic analyzing code too so that you can easily track
traffic to the website later. Ini adalah ide yang baik untuk membangun dalam setiap kunjungan
ke situs menganalisis kode juga sehingga Anda dengan mudah dapat melacak lalu lintas ke situs
nanti.
Server Side Includes (SSI) / Perpustakaan di
Dreamweaver CS3
Step 6: Dreamweaver CS3 Tutorial - Server Side Includes/
Libraries Langkah 6: Dreamweaver CS3 Tutorial - Server
Side Includes / Perpustakaan
[This is Step 6 of the Dreamweaver CS3 Tutorial ] [Ini adalah Langkah 6 dari Dreamweaver CS3
Tutorial ]

Server Side Includes (SSI) and Libraries in Dreamweaver help you to centralize areas of your
site that are common to many pages. Server Side Includes (SSI) dan Perpustakaan di
Dreamweaver membantu Anda untuk memusatkan bidang situs Anda yang umum untuk banyak
halaman. This helps you to easily make site-wide changes to these common areas and thus helps
in maintenance and consistency. Ini akan membantu Anda untuk dengan mudah membuat
perubahan situs-lebar untuk umum daerah-daerah tersebut dan dengan demikian membantu
dalam pemeliharaan dan konsistensi. When you design a website it is better to design it for easy
maintenance. Bila Anda merancang website lebih baik desain untuk perawatan yang mudah. As
you add pages your menus will change to incorporate that. Ketika Anda menambahkan halaman
menu Anda akan berubah untuk memasukkan itu. You might want to change the mast, footer etc.
Anda mungkin ingin mengubah tiang, dll footer

Server Side Includes Server Side Includes

The advantage with server side includes (SSI) is that when you make a change to an include you
don't have to update all the pages that access it. Keuntungan dengan sisi server meliputi (SSI)
adalah bahwa ketika Anda membuat perubahan ke menyertakan Anda tidak harus memperbarui
semua halaman yang mengaksesnya. The changes will automatically get reflected in them.
Perubahan secara otomatis akan mendapatkan tercermin di dalamnya. You will not have to
upload all the pages that use the include every time you make a change, just the include itself.
Anda tidak perlu meng-upload semua halaman yang menggunakan termasuk setiap kali Anda
membuat perubahan, hanya mencakup sendiri.

Note : All the html page you create and apply this template to must have the extension .shtml
or .shtm. Catatan: Semua halaman html Anda membuat dan menerapkan template harus
memiliki ekstensi atau. Shtml. Shtm.

It is useful to create include files for: Hal ini berguna untuk membuat menyertakan file untuk:

 header header
 footer footer
 menus menu
  sub menus sub menu

To create an include: Untuk membuat mencakup:

1. Copy the part of the page that you would like to make into an include. Salin bagian dari
halaman yang ingin Anda membuat menjadi termasuk.
2. Create a new html page [File > New > Blank Page > HTML > none] Buat halaman baru
[html File> New> Blank Halaman> HTML>] tidak ada
3. Go into the HTML code [View > Code] and delete all the default code that Dreamweaver
puts in. Pergilah ke kode HTML [Lihat> Daftar] dan menghapus semua kode default
yang menempatkan in Dreamweaver
4. Go back to design view [View > Design ] and paste the code that you had copied
previously. Kembali ke tampilan desain [Lihat> Desain] dan paste kode yang Anda telah
disalin sebelumnya.
5. Make sure all links in the include file are relative to site root. Pastikan semua link di
include file yang relatif terhadap root situs.

6. Finally save this file in an 'Includes' folder. Akhirnya menyimpan file ini di folder
'Termasuk'.

To insert an include into the template: Untuk menyisipkan termasuk ke dalam template:

1. Click where you would like to insert the include Klik di mana Anda ingin memasukkan
termasuk
2. Insert > Server Side Include. Masukkan Server Side> Termasuk.

Dreamweaver Library Items Perpustakaan Dreamweaver

Produk
If you do not wish to create files with the shtml extension or your server does not support it you
can use Dreamweaver Library items for common areas that might be different in different
sections eg sub menus. Jika Anda tidak ingin membuat file dengan ekstensi shtml atau server
Anda tidak mendukung, Anda dapat menggunakan Dreamweaver item Perpustakaan untuk area
umum yang mungkin berbeda di bagian-bagian yang berbeda misalnya sub menu. However
changes to library items will update the files in which they exist and these files will need to be
uploaded again. Namun perubahan pada item perpustakaan akan memperbarui file di mana
mereka ada dan file-file ini perlu upload lagi.

To create a library item: Untuk membuat item perpustakaan:

 1. Copy the portion of the template you wish to convert to a library item Salin bagian dari
template Anda ingin mengkonversi ke item perpustakaan
2. File > New > Blank Page > Library Item File>> New> Blank Page Perpustakaan Item
3. Paste Pasta
4. Save with appropriate name Simpan dengan nama yang tepat

Once created, you will need to insert the library item into the template (or later on into a web
page). Setelah dibuat, Anda akan perlu untuk memasukkan item perpustakaan ke dalam template
(atau kemudian ke sebuah halaman web). To do so: Untuk melakukannya:

1. Window > Assets Window> Aktiva

2. Click the library icon Klik ikon perpustakaan in the Assets Panel dalam Aktiva Panel
3. Select the appropriate library name Pilih nama perpustakaan yang sesuai
4. Click the 'Insert' button at the bottom of the panel Klik 'Insert' tombol di bagian bawah
panel

Go to Step 7 >>
Dreamweaver CS3 Template diedit Kawasan
Step 7: Dreamweaver CS3 Tutorial - Specify Template
Editable Regions Langkah 7: Dreamweaver CS3 Tutorial -
Tentukan Template diedit Daerah
[This is Step 7 of the Dreamweaver CS3 Tutorial ] [Ini adalah Langkah 7 dari Dreamweaver CS3
Tutorial ]

Dreamweaver templates allow you to specify editable regions. Dreamweaver template

memungkinkan Anda untuk menentukan daerah yang dapat diedit. These will be the areas of the
template where you will insert content that will differ from page to page. Ini akan menjadi
kawasan dari template di mana Anda akan memasukkan konten yang akan berbeda dari halaman
ke halaman. To do this: Untuk melakukan ini:

1. Put the cursor in the region that you wish to make editable Taruh kursor di wilayah yang
ingin Anda membuat diedit
2. Insert > Template Objects > Editable Region Sisipkan> Template Objects> Daerah dapat
diedit
3. Give the editable region a name eg content. Berikan daerah dapat diedit nama misalnya
konten.
4. The editable region will appear on the template with a colored outline and the specified
name. Wilayah yang dapat diedit akan muncul pada template dengan garis berwarna dan
nama tertentu.

If you have a library item (eg submenu) or banner etc. which will appear in most of the pages but
will change in some you can keep the library item in the template, select it and create an editable
region around it. Jika Anda memiliki benda perpustakaan (submenu misalnya) atau banner dll,
yang akan muncul di sebagian besar halaman tapi akan berubah dalam beberapa Anda dapat
menyimpan item perpustakaan dalam template, pilih dan membuat daerah di sekitarnya dapat
diedit. So in a new page created with this template the library item will appear by default,
however it can be replaced with another one where necessary. Jadi dalam sebuah halaman baru
dibuat dengan template ini perpustakaan item akan muncul secara default, tetapi dapat digantikan
dengan satu sama lain jika diperlukan.

Buat HTML Artikel dalam Dreamweaver

CS3 dan Konten Insert / Formulir
Step 8: Dreamweaver CS3 Tutorial - Create HTML Pages,
Insert Content & Forms Langkah 8: Dreamweaver CS3
Tutorial - Membuat Halaman HTML, Content Sisipkan &
Formulir
[This is Step 8 of the Dreamweaver CS3 Tutorial ] [Ini adalah Langkah 8 dari Dreamweaver CS3
Tutorial ]

Now it is time to use Dreamweaver to create the HTML pages and insert content and forms if
any. Sekarang saatnya untuk menggunakan Dreamweaver untuk membuat halaman HTML dan
konten memasukkan dan bentuk jika ada.

Once you have your template, css stylesheet and server site includes/ library items ready, you
can begin creating the actual pages of your site as per your site plan . Setelah Anda memiliki
template, stylesheet css dan server situs termasuk / item perpustakaan siap, Anda dapat mulai
membuat halaman situs Anda yang sebenarnya Anda sesuai site plan .

Keep in mind that if you are using server side includes you will need to create .shtml or .shtm
pages. Perlu diketahui bahwa jika Anda menggunakan sisi server termasuk Anda harus membuat
shtml atau.. Halaman shtm.

Create HTML/ SHTML Pages in Dreamweaver Buat HTML

/ shtml Artikel dalam Dreamweaver
To create the HTML/ SHTML pages: Untuk membuat HTML / shtml halaman:

1. File > New > Page from Template > Project Name > Template Name > Create] File>
New> Page dari Template Nama> Proyek> Nama Template> Membuat]
2. Name and save the file into the project folder. Nama dan menyimpan file ke dalam folder
proyek. Name the homepage index.shtml if using SSI and if your remote hosting server is
a UNIX server. Nama homepage index.shtml jika SSI menggunakan dan jika remote
server hosting Anda adalah server UNIX. If it is a NT server most likely the homepage
will need to be named 'default.shtml'. Jika server NT kemungkinan besar homepage perlu
diberi nama 'default.shtml'. If you are not using SSI, leave the file extensions as .htm.
Jika Anda tidak menggunakan SSI, meninggalkan ekstensi file seperti. Htm.
 3. Change the HTML page title to something more appropriate [ Modify > Page Properties
>Title/ Encoding > Title] Mengubah judul halaman HTML untuk sesuatu yang lebih
tepat [Modify> Page Properties> Title / Encoding> Judul]
4. Put in appropriate meta data for the page ie keywords and description of the page
Masukkan meta data yang tepat untuk kata kunci yaitu halaman dan deskripsi halaman
o Insert > HTML > Head Tags > Keywords Sisipkan> Kepala Tag HTML>> Kata
Kunci
o Insert > HTML > Head Tags > Description Sisipkan> Tags> Kepala HTML>
Keterangan
5. Type or paste the Heading and content of the page into the appropriate edible region.
Ketik atau sisipkan Pos dan isi dari halaman tersebut ke dalam wilayah dimakan yang
sesuai. Apply the styled formatting (eg H1 tag or custom style) from the Properties Panel
Terapkan format gaya (misalnya tag H1 atau gaya kustom) dari Panel Properties
6. Insert any images/ flash assets etc. into the editable region and and align them Sisipkan
setiap gambar / flash aktiva lain-lain ke dalam wilayah diedit dan dan menyelaraskan
mereka
o Insert > Image Sisipkan> Foto

o Insert > Media > Flash Sisipkan> Media> Flash

7. Replace any library items/ SSI eg sub menus Ganti setiap item perpustakaan / SSI
misalnya sub menu
8. Similarly create all the other HTML/ SHTML pages you need. Demikian pula
menciptakan semua yang lain HTML / halaman shtml Anda butuhkan.

Forms in Dreamweaver Formulir dalam Dreamweaver

Some pages might require form elements such as the "contact us" form: Beberapa halaman
mungkin memerlukan bentuk elemen seperti kontak "kami" bentuk:

Insert > Form > select the form element of choice. Sisipkan>> Formulir pilih elemen bentuk
pilihan. A form must be within a form tag so select "Form" first, then insert the other form fields
like Text field etc. within the form tag that appears. Formulir harus berada dalam tag bentuk,
pilih "Formulir" pertama, kemudian sisipkan bidang bentuk lain seperti lapangan dll Teks dalam
tag bentuk yang muncul.
To make a form work you will need a php, asp or cgi script. Untuk membuat sebuah formulir
yang Anda akan membutuhkan php, asp atau cgi script. You can also make use of free services
available. Anda juga dapat menggunakan layanan gratis yang tersedia.

Menghubungkan Artikel dalam

Dreamweaver CS3
Step 9: Dreamweaver CS3 Tutorial - Link Pages Langkah 9:
Dreamweaver CS3 Tutorial - Artikel Link
[This is Step 9 of the Dreamweaver CS3 Tutorial ] [Ini adalah Langkah 9 dari Dreamweaver CS3
Tutorial ]

Once you have created all the pages of your site it is time to link them up using Dreamweaver.
Setelah Anda menciptakan semua halaman situs Anda sudah waktunya untuk menghubungkan
mereka dengan menggunakan Dreamweaver. You may link them from the menus and from
appropriate textual or image content on other pages. Anda dapat menghubungkan mereka dari
menu dan dari tekstual yang tepat atau gambar konten pada halaman lainnya.

To create a link: Untuk membuat link:

1. Select the text/ image you want to link from Pilih teks / gambar yang ingin Anda link dari
 2. Click on the yellow folder icon next to the 'Link' field on the 'Properties' panel. Klik pada
icon folder kuning di sebelah 'Link' lapangan pada 'panel Properties'.
3. In the dialog box that opens, browse for the web page you want to link to and select it.
Pada kotak dialog yang terbuka, menelusuri halaman web yang Anda ingin link ke dan
pilih.
4. If you are linking to a page from a Server Side Include, ensure that the link is relative to
site. Jika Anda terhubung ke satu halaman dari sebuah Sertakan Server Side, memastikan
bahwa link relatif ke situs.

5. Click OK and your link is ready. Klik OK dan link anda sudah siap.

If you have added links into the Dreamweaver Template or Library item, Dreamweaver will ask
you if you want to update all the pages. Jika Anda telah menambahkan link ke Template
Dreamweaver atau item Perpustakaan, Dreamweaver akan menanyakan anda apakah anda ingin
memperbarui semua halaman. Do so. Melakukannya.

Dreamweaver CS3: Pratinjau dalam Browser

& Upload File / FTP
[This is Step 10 of the Dreamweaver CS3 Tutorial ] [Ini adalah Langkah 10 dari Dreamweaver
CS3 Tutorial ]

Step 10: Dreamweaver CS3 Tutorial - Test & Upload to

Hosting Server Langkah 10: Dreamweaver CS3 Tutorial -
Uji & Upload ke Server Hosting
Once the site is complete in Dreamweaver you are ready to upload/ FTP the files to your server
and go live. Setelah situs selesai dalam Dreamweaver Anda siap untuk meng-upload / FTP file
ke server Anda dan pergi hidup. Before that however, you should preview the site in various
browsers (at least FireFox and Internet Explorer) to make sure it is working all right. Sebelum itu
Namun, Anda harus melihat situs di berbagai browser (setidaknya FireFox dan Internet Explorer)
untuk memastikan itu bekerja baik-baik saja.

Preview in Browser Preview di Browser

1. File > Preview in Browser > select the browser of choice File> Preview in Browser> pilih
browser pilihan
2. View each page Lihat setiap halaman
 3. Click on all the links Klik pada semua link

Note : If you use Site Relative paths (as you must in server side includes), the "Preview in
Browser" feature will not work. Catatan: Jika Anda menggunakan jalur Situs Relatif (seperti
Anda harus di sisi server termasuk), "Pratinjau dalam Browser" fitur yang tidak akan bekerja.
You will need to test on a web server locally or upload to your remote hosting server and test.
Anda akan perlu menguji pada web server lokal atau meng-upload ke server hosting Anda dan
uji.

Other tools that Dreamweaver provides : Peralatan lain yang Dreamweaver menyediakan:

 Site > Check Links Sitewide Situs Periksa> Link seluruh situs
 Text > Check Spelling Teks> Periksa Ejaan

Going Live Going Live

After you have developed and tested your site it is ready to go live. Setelah Anda telah
mengembangkan dan menguji situs anda siap untuk tinggal. You will need to sign up with a
hosting server. Anda perlu mendaftar dengan server hosting. I recommend Hostgator which I
use to host this site. Saya sarankan Hostgator yang saya gunakan untuk host situs ini.

Once you sign up with a hosting server you they will provide you with your server details:
Setelah Anda mendaftar dengan server hosting Anda, mereka akan menyediakan Anda dengan
rincian server Anda:

1. IP address or www.yoursitename.com Alamat IP atau www.yoursitename.com

2. username username
3. password kata sandi

You can use Dreamweaver or any FTP software eg Filezilla to upload your files to the remote
hosting server. Anda dapat menggunakan Dreamweaver atau software FTP seperti Filezilla untuk
meng-upload file Anda ke server hosting remote.

File Upload/ FTP in Dreamweaver Upload File / FTP dalam

Dreamweaver
To enter your hosting details into Dreamweaver: Untuk memasukkan rincian hosting Anda ke
Dreamweaver:

1. Fill in these details in the Remote Info Panel of the Site Definition [Files Panel > Last in
the site name drop down - Manage Sites > Select the Site > Click Edit > In the Advanced
Tab > Click the category "Remote Info" Isi rincian tersebut di Info Remote Panel
Definition [File Panel> Situs Terakhir di nama situs drop down - Mengatur Situs> Pilih
Situs> Klik Edit> Pada Tab Advanced> Klik kategori "Remote Info"
 2. Access = FTP (from drop down menu) Akses = FTP (dari menu drop down)
3. FTP host = enter your site url eg www.yoursitename.com FTP host = masukkan url situs
Anda misalnya www.yoursitename.com
4. Enter your login and password Masukkan login dan password Anda
5. Click "Test" to check the connection Klik "Test" untuk memeriksa koneksi

To upload your files into the remote hosting Server: Untuk meng-upload file Anda ke server
hosting remote:
 1. Click the "Expand to show local and remote sites" icon Klik "Expand untuk
menampilkan situs lokal dan remote" ikon in the Files Panel di Panel File

2. In the expanded files panel click the 'connects to remote host' icon. Pada panel klik file
memperluas 'terhubung ke host remote' ikon.
3. Once you connect you should see the remote folder and files on the left window. Setelah
Anda menghubungkan Anda akan melihat folder jauh dan file di jendela kiri.
4. To upload your files click the 'Put Files' Arrow icon in the site manager. Untuk meng-
upload file klik pada 'Masukkan File' ikon Arrow pada manajer situs.
5. After uploading all the files test the site online using your site url eg
www.yoursitename.com. Setelah meng-upload semua file menguji situs online
menggunakan url situs anda misalnya www.yoursitename.com.

Your site is live now! Situs Anda adalah hidup sekarang! Congratulations! Selamat!