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!