tutorial Membuat website dengan dreamweaver cs4

Document Sample
tutorial Membuat website dengan dreamweaver cs4 Powered By Docstoc
					Membuat website pertama Anda - Bagian 1:
Mengatur proyek situs dan file
This tutorial introduces you to the concept of an Adobe Dreamweaver CS4 site and shows you
how to set up the project files for the Check Magazine sample website. Tutorial ini
memperkenalkan konsep CS4 Adobe Dreamweaver sebuah situs dan menunjukkan cara untuk
mengatur file proyek untuk sampel Majalah Periksa situs web. In Dreamweaver, a site generally
consists of two parts: a collection of files on a local computer (the local site) and a location on a
remote web server to which you upload files when you're ready to make them publicly available
(the remote site). Dalam Dreamweaver, sebuah situs secara umum terdiri dari dua bagian: sebuah
kumpulan file di komputer lokal (situs lokal) dan lokasi di remote web server di mana Anda meng-
upload file bila Anda siap untuk membuat mereka tersedia untuk umum (remote situs). You use
the Dreamweaver Files panel to manage the files for your site. Anda menggunakan Dreamweaver
File panel untuk mengelola file untuk situs Anda.

The most common approach to creating a website with Dreamweaver is to create and edit pages on
your local drive, and then upload copies of those pages to a remote web server for viewing on the
web. Pendekatan yang paling umum untuk menciptakan sebuah situs web dengan Dreamweaver
adalah untuk membuat dan mengedit halaman pada drive lokal Anda, dan kemudian meng-upload
salinan halaman tersebut ke web server remote untuk dilihat di web. In this tutorial, you'll learn
how to set up only the local site so you can begin building web pages right away. Dalam tutorial
ini, Anda akan belajar cara mengatur hanya situs lokal sehingga Anda dapat mulai membangun
halaman web langsung. Later, after you've completed the website, you'll learn how to create a
remote site so that you can upload your files to a web server. Kemudian, setelah Anda
menyelesaikan website, Anda akan belajar cara membuat situs remote sehingga Anda dapat meng-
upload file Anda ke web server.

In this tutorial, you will complete the following tasks: Dalam tutorial ini, Anda akan
menyelesaikan tugas-tugas berikut:

      Learn about Dreamweaver sites Pelajari tentang situs Dreamweaver
      Set up your project files Mengatur file proyek Anda
      Define a local folder Menetapkan folder lokal

Requirements Persyaratan

In order to make the most of this tutorial, you need the following software and files: Dalam rangka
untuk membuat sebagian besar tutorial ini, Anda memerlukan perangkat lunak dan file berikut:

Dreamweaver CS4 Dreamweaver CS4

      Try Mencoba
      Buy Membeli
Sample files: Contoh file:

      check_magazine.zip (ZIP, 480K) check_magazine.zip (ZIP, 480K)

Prerequisite knowledge Prasyarat pengetahuan

This tutorial requires no previous knowledge of Dreamweaver. However, familiarity with web
design concepts such as HTML and CSS will be helpful. Tutorial ini tidak memerlukan
pengetahuan sebelumnya Dreamweaver. Namun, keakraban dengan konsep desain web seperti
HTML dan CSS akan sangat membantu. The tutorials in this series are designed to be completed in
order. Tutorial dalam seri ini dirancang untuk dapat diselesaikan secara berurutan.

Learn about Dreamweaver sites Pelajari tentang situs Dreamweaver

In Dreamweaver, the term site can refer either to a website or a local storage location for the
documents that belong to a website. The latter is what you need to establish before you begin
building your website. Dalam Dreamweaver, situs istilah dapat mengacu baik pada sebuah situs
Web atau lokasi penyimpanan lokal untuk dokumen-dokumen yang berasal dari situs web. Yang
terakhir adalah apa yang Anda butuhkan untuk membangun sebelum Anda mulai membangun
website Anda. A Dreamweaver site organizes all the documents associated with your website and
lets you track and maintain links, manage files, share files, and transfer your site files to a web
server. Sebuah situs Dreamweaver mengatur semua dokumen yang berhubungan dengan website
Anda dan memungkinkan Anda melacak dan menjaga hubungan, mengatur file, berbagi file, dan
mentransfer file situs Anda ke web server. Think of your Dreamweaver site as the "bucket" that
contains all of the files and assets for your website. Pikirkan situs Dreamweaver Anda sebagai
"ember" yang berisi semua file dan aset untuk website Anda.

A typical Dreamweaver site has three parts, depending on your computing environment and the
type of website you are developing: Dreamweaver tipikal situs ini memiliki tiga bagian, tergantung
pada lingkungan komputasi anda dan jenis situs web Anda mengembangkan:

      Local folder is your working directory. Folder lokal direktori kerja Anda. Dreamweaver
       refers to this folder as your local site. Dreamweaver mengacu ke folder ini sebagai situs
       lokal. The local folder is usually a folder on your hard drive. Folder lokal biasanya folder
       pada hard drive anda.
      Remote folder is where you store your files for testing, production, collaboration, and
       publication purposes, depending on your environment. Remote folder tempat Anda
       menyimpan file Anda untuk pengujian, produksi, kolaborasi, dan publikasi tujuan,
       tergantung pada lingkungan anda. Dreamweaver refers to this folder as your remote site.
       Dreamweaver mengacu ke folder ini sebagai situs remote. The remote folder is a folder on
       the computer that's running your web server. Folder remote folder pada komputer yang
       menjalankan server web Anda. The computer running the web server is often (but not
       always) the computer that makes your site publicly available on the web. Komputer
       menjalankan server web sering (tetapi tidak selalu) komputer yang membuat situs Anda
       tersedia untuk umum di web.
      Folder for dynamic pages (Testing Server folder) is the folder where Dreamweaver
       processes dynamic pages. Folder untuk halaman dinamis (Pengujian Server folder)
       adalah folder dimana proses Dreamweaver halaman dinamis. This folder is often the same
       folder as the remote folder. Folder ini sering folder yang sama dengan folder jauh. You do
       not need to worry about this folder unless you are developing a web application. Anda
       tidak perlu khawatir tentang folder ini kecuali jika Anda sedang mengembangkan sebuah
       aplikasi web. For more information about the Testing Server folder, see Set up a testing
       server in Dreamweaver Help. Untuk informasi lebih lanjut tentang Pengujian Server folder,
       lihat Membuat server pengujian di Dreamweaver Help.

When setting up a Dreamweaver site you have two options: Saat membuat sebuah situs
Dreamweaver Anda memiliki dua pilihan:

      Use the Site Definition Wizard, which guides you through the setup process. Gunakan
       Definisi Situs Wizard, yang membimbing Anda melalui proses setup.
      Use the Site Definition Advanced settings, which let you set up local, remote, and testing
       folders individually, as necessary. Gunakan Definisi Situs P'aturan lanjutan, yang
       memungkinkan Anda mengatur lokal, remote, dan menguji folder sendiri-sendiri, seperti
       yang diperlukan.

In this tutorial you'll use the Site Definition Advanced settings to set up a local folder for your
project files. Dalam tutorial ini Anda akan menggunakan Situs Definisi P'aturan lanjutan untuk
mendirikan sebuah folder lokal untuk file proyek Anda. In a later tutorial, you'll learn how to set
up a remote folder so that you can publish your pages to a web server and make them publicly
available. Dalam tutorial berikutnya, Anda akan belajar cara mengatur folder jauh sehingga Anda
dapat mempublikasikan halaman Anda ke web server dan membuat mereka tersedia untuk umum.

For more information about Dreamweaver sites in general, see Setting up a Dreamweaver site in
Dreamweaver Help. Untuk informasi lebih lanjut tentang situs Dreamweaver pada umumnya, lihat
Dreamweaver Membuat situs di Dreamweaver Help.

Set up your project files Mengatur file proyek Anda

When you create a local site, you can place any existing assets (images or other pieces of content)
in the local site's root folder (the main folder for the site). Bila Anda membuat situs lokal, Anda
dapat menempatkan aset yang ada (gambar atau potongan lainnya konten) di situs lokal root folder
(folder utama situs). That way when you add content to your pages, the assets are there and ready
for you to use. Dengan begitu ketika Anda menambahkan konten ke halaman Anda, aset yang ada
di sana dan siap untuk digunakan.

The sample files included in the download ZIP file contain assets for the sample website you'll
build using this tutorial series. File sampel termasuk dalam download file ZIP berisi sampel aset
untuk situs web Anda akan membangun menggunakan seri tutorial ini. The first step in creating
the site is to copy the sample files to an appropriate folder on your hard drive: Langkah pertama
dalam membuat situs adalah sampel untuk menyalin file ke folder yang sesuai pada hard drive
Anda:
   1. Create a new folder called local_sites on your hard drive. Buat folder baru bernama
      local_sites pada hard drive anda. The folder can be anywhere on your computer. Folder
      dapat berada di mana saja di komputer Anda. For example: Contoh:
          o (Windows) C:\local_sites (This is where I like to keep mine. The less buried it
             is the easier it is to find later.) (Windows) C: \ local_sites (Ini adalah tempat
             aku ingin selalu saya. Semakin sedikit terkubur itu adalah mudah untuk menemukan
             kemudian.)
          o (Mac OS X) Macintosh HD/Users/your_user_name /local_sites (Mac OS X)
              Macintosh HD / Users / your_user_name / local_sites

       Note: Mac OS X includes a Sites folder in your user folder. Catatan: Mac OS X
       termasuk Situs folder dalam folder pengguna Anda. Don't use this folder as your local
       folder; the Sites folder is where you place your pages to make them publicly accessible
       when you're using your Mac as a web server. Jangan gunakan folder sebagai folder lokal;
       Situs folder di mana Anda menempatkan halaman untuk membuat mereka dapat diakses
       publik bila Anda menggunakan Mac sebagai web server.

   2. Download and unzip the check_magazine.zip sample files if you haven't done so already.
      Download dan unzip check_magazine.zip file contoh jika Anda belum melakukannya.
   3. Copy the check_magazine folder into the local_sites folder. Check_magazine salin
      folder ke folder local_sites.

The check_magazin e folder is the folder you will use as the root folder (main folder) for your
Dreamweaver site. The check_magazin e folder folder yang akan digunakan sebagai root folder
(folder utama) untuk situs Dreamweaver Anda.

Note: The local root folder of your Dreamweaver site is often the main or top-level folder for your
website. Catatan: root lokal folder situs Anda sering Dreamweaver utama atau tingkat atas folder
untuk website Anda. It usually corresponds to an identical folder on the remote site (web server).
Biasanya berhubungan dengan folder yang sama pada situs remote (web server). The root folder
also defines the first part of your website's URL following the domain name. Folder akar juga
mendefinisikan bagian pertama dari URL situs web Anda setelah nama domain. For example, if
your local root folder is called mywebsite and you have an identical root folder defined on the
remote site, the URL for your website would be something like http://www.yahoo.com/mywebsite .
Misalnya, jika Anda folder akar lokal disebut mywebsite dan Anda memiliki folder akar yang sama
yang ditetapkan di remote site, URL untuk situs web Anda akan menjadi sesuatu seperti
http://www.yahoo.com/mywebsite.

In some cases, the local root folder may not have an exact name equivalent on the remote site.
Dalam beberapa kasus, folder akar lokal mungkin tidak memiliki nama yang tepat setara di situs
remote. For example, if you own the domain name www.mywebsite.com , with a remote root
directory of public_html, your local root folder could still be called mywebsite . Sebagai contoh,
jika Anda memiliki nama domain www.mywebsite.com, dengan direktori root remote public_html,
folder akar lokal Anda masih dapat disebut mywebsite. The files in both the local and remote root
directories would be identical; only the folder names (public_html on the remote site and
mywebsite on the local computer) would be different. File dalam baik lokal dan direktori root
remote tersebut akan sama, hanya nama-nama folder (public_html di situs remote dan mywebsite
di komputer lokal) akan berbeda.

Define a local folder Menetapkan folder lokal

You must define a Dreamweaver local folder for each new website you create. Anda harus
menentukan Dreamweaver folder lokal untuk setiap situs baru yang Anda buat. The local folder is
the folder that you use to store working copies of site files on your hard drive. Folder lokal adalah
folder yang Anda gunakan untuk menyimpan salinan kerja situs file pada hard drive anda. If you
don't define a local folder, certain features in Dreamweaver cannot work properly. Jika Anda tidak
menentukan folder lokal, beberapa fitur tertentu dalam Dreamweaver tidak bisa bekerja dengan
baik.

Defining a local folder also allows you to manage your files and to transfer files to and from your
web server by using a number of file-transfer methods. Mendefinisikan folder lokal juga
memungkinkan Anda untuk mengelola file dan untuk mentransfer file ke dan dari server web Anda
dengan menggunakan sejumlah metode transfer file.

Next, define the check_magazine folder you copied into the local_sites folder as your local
folder: Selanjutnya, tentukan folder yang Anda check_magazine disalin ke folder tersebut sebagai
local_sites folder lokal Anda:

   1. Start Dreamweaver and select Site > Manage Sites. Mulai Dreamweaver dan pilih Site>
      Manage Sites. The Manage Sites dialog box appears. Situs Kelola kotak dialog muncul.
   2. Click the New button and select Site. Klik tombol New dan pilih Site. The Site Definition
      dialog box appears. Definisi Situs kotak dialog muncul.
   3. If the wizard (Basic tab) appears, click the Advanced tab and select Local Info from the
      Category list (it should be the default). Jika wizard (Basic tab) muncul, klik tab Advanced
      dan pilih Local Info dari Kategori daftar (seharusnya menjadi default).
   4. In the Site Name text box, enter Check Magazine as the name of the site. Di dalam Situs
      kotak teks Nama, masukkan Majalah Periksa sebagai nama situs.
   5. In the Local Root Folder text box, specify the check_magazine folder that you copied to
      the local_sites folder in the previous section. Dalam Local Root Folder kotak teks,
      menentukan folder yang Anda check_magazine disalin ke folder dalam local_sites
      bagian sebelumnya. You can click the folder icon to browse to and select the folder, or
      enter a path in the Local Root Folder text box. Anda dapat mengklik ikon folder untuk
      menelusuri dan pilih folder, atau masukkan path di Root Folder Lokal kotak teks.
   6. In the Default Images Folder text box, specify the images folder that already exists in the
      check_magazine folder. Dalam Gambar Default Folder kotak teks, menentukan gambar
      folder yang sudah ada dalam folder check_magazine. You can click the folder icon to
      browse to and select the folder, or enter a path in the Default Images Folder text box. Anda
      dapat mengklik ikon folder untuk menelusuri dan pilih folder, atau masukkan path dalam
      Gambar Default Folder kotak teks.

       The Site Definition dialog box should now look like Figure 1. Definisi Situs kotak dialog
       seharusnya sekarang terlihat seperti Gambar 1.
       Figure 1. The Site Definition dialog box at this point. Gambar 1. Definisi Situs kotak
       dialog saat ini.

       Note: The file paths might differ, depending on where you created the local_sites folder
       on your hard drive. Catatan: File path mungkin berbeda, tergantung di mana Anda
       menciptakan local_sites folder pada hard drive anda.

   7. Click OK. Klik OK. The Manage Sites dialog box appears, showing your new site. Situs
      Kelola kotak dialog muncul, menunjukkan situs baru Anda.
   8. Click Done to close the Manage Sites dialog box. Klik Selesai untuk menutup kotak dialog
      Manage Sites.

The Files panel in Dreamweaver now shows the new local root folder for your current site (see
Figure 2). File panel dalam Dreamweaver sekarang menunjukkan folder akar lokal baru untuk situs
saat ini (lihat Gambar 2). The file list in the Files panel acts as a file manager, allowing you to
copy, paste, delete, move, and open files just as you would on a desktop. Daftar file dalam panel
File bertindak sebagai manajer file, yang memungkinkan Anda untuk menyalin, menyisipkan,
menghapus, memindahkan, dan membuka file yang sama seperti Anda melakukannya pada
desktop.




Figure 2. List of files in the Files panel. Gambar 2. Daftar file dalam File panel.

For more information about how the Files panel works, see Work with files in the Files panel in
Dreamweaver Help. Untuk informasi lebih lanjut tentang cara kerja panel File, lihat Bekerja
dengan file dalam panel File di Dreamweaver Help.

You've now defined a local root folder for your site. Anda sekarang telah didefinisikan folder akar
lokal untuk situs Anda. The local root folder is the place on your local computer where you keep
the working copies of your web pages. Folder akar lokal adalah tempat pada komputer lokal Anda
di mana Anda menyimpan salinan kerja halaman web Anda. Later, if you want to publish your
pages and make them publicly available, you'll need to define a remote folder—a place on a
remote computer, running a web server that will hold published copies of your local files.
Kemudian, jika Anda ingin mempublikasikan halaman Anda dan membuat mereka tersedia untuk
umum, Anda harus menetapkan folder jauh-tempat di komputer remote, menjalankan web server
yang akan terus diterbitkan salinan file lokal Anda.

Where to go from here Ke mana harus pergi dari sini

Now that you have finished defining your site, you can begin building your web pages by
following Part 2 in this series, Creating the page layout . Sekarang bahwa Anda telah selesai
mendefinisikan situs Anda, Anda bisa mulai membangun halaman web Anda dengan mengikuti
Bagian 2 di seri ini, Menciptakan tata letak halaman.

Note: You can follow the rest of the tutorials in this series to create the Check Magazine sample
site, or you can work on your own web pages. Catatan: Anda dapat mengikuti seluruh tutorial
dalam seri ini untuk menciptakan sampel Majalah Periksa situs, atau Anda dapat bekerja pada
halaman web Anda sendiri. When you're finished creating and editing pages, proceed to defining a
remote folder on a server and publishing your pages. Ketika Anda selesai membuat dan mengedit
halaman, lanjutkan untuk mendefinisikan folder jauh pada server dan penerbitan halaman Anda.
For more information, see Creating your first website – Part 6: Publishing your site. Untuk
informasi lebih lanjut, lihat situs web Menciptakan pertama Anda - Bagian 6: Publishing situs
Anda.




Membuat website pertama Anda - Bagian 2:
Membuat tata letak halaman
Welcome to the second part of this tutorial series on creating your first website. Selamat datang di
bagian kedua dari seri tutorial ini menciptakan situs web pertama Anda. This tutorial explains how
to create a CSS-based page layout in Adobe Dreamweaver CS4. Tutorial ini menjelaskan cara
membuat CSS berbasis tata letak halaman dalam Adobe Dreamweaver CS4. A page layout
determines how your page will appear in the browser, showing, for example, the placement of
menus, images, and other kinds of content. Sebuah halaman layout menentukan bagaimana
halaman Anda akan muncul dalam browser, menunjukkan, misalnya, penempatan menu, gambar,
dan jenis konten lainnya.

If you've heard anything about web page layouts lately, it probably had something to do with CSS
layouts, and how they have become the standard for page layouts on the web. Jika Anda telah
mendengar apa-apa tentang layout halaman web akhir-akhir ini, mungkin ada kaitannya dengan
CSS layout, dan bagaimana mereka telah menjadi standar untuk tata letak halaman di web. CSS
layouts offer superior flexibility and control over your layout, allowing you to create elements on
the page and fine-tune their positions with pixel precision. Layout CSS menawarkan fleksibilitas
yang superior dan kontrol atas tata letak Anda, memungkinkan Anda untuk membuat elemen pada
halaman dan menyesuaikan posisi mereka dengan presisi pixel. However, CSS layouts can be
difficult to understand and create, and it helps to have some background knowledge before
building your first layout with CSS. Namun, CSS layout bisa sulit untuk memahami dan
menciptakan, dan membantu untuk memiliki latar belakang pengetahuan sebelum membangun tata
letak pertama Anda dengan CSS. You can start by reading CSS page layout basics , which is an
overview of how CSS layouts work. Anda dapat memulai dengan membaca dasar-dasar tata letak
halaman CSS, yang merupakan gambaran tentang bagaimana tata letak CSS bekerja. But this
reading is not required. Tapi membaca ini tidak diperlukan. If you're up for the challenge, you can
just dive right into this tutorial to begin creating your first CSS-based layout. Jika Anda bangun
untuk tantangan, Anda bisa menyelam langsung ke tutorial ini untuk mulai membuat CSS pertama
Anda berbasis layout.

Note: Because CSS layouts can be somewhat difficult to learn as a beginner, you might want to try
experimenting with table-based layouts if you've never built a web page before. Catatan: Karena
layout CSS dapat agak sulit untuk dipelajari sebagai pemula, Anda mungkin ingin mencoba
bereksperimen dengan tata letak meja berbasis jika Anda belum pernah membangun sebuah
halaman web sebelumnya. Although not as fashionable these days for layouts, tables (the standard
for page layout before CSS came on the scene) are still a powerful tool for presenting tabular data
and for laying out text and graphics on an HTML page. Meskipun tidak seperti yang modis hari ini
untuk layout, tabel (standar untuk tata letak halaman sebelum CSS datang di tempat kejadian)
masih merupakan alat yang ampuh untuk menampilkan tabel data dan untuk tata letak teks dan
gambar pada halaman HTML. More importantly, they are super easy to create with Dreamweaver.
Lebih penting lagi, mereka adalah super mudah untuk menciptakan dengan Dreamweaver. If
you're interested in exploring table-based layouts, check out the CS3 version of Creating your first
website – Part 2: Creating the page layout . Jika Anda tertarik untuk mengeksplorasi berbasis
tabel-layout, check out dari versi CS3 Membuat website pertama Anda - Bagian 2: Membuat tata
letak halaman.

Note also that Dreamweaver CS3 and later comes with many wonderful pre-designed CSS layouts
that you can use as the starting point for your web pages. Perhatikan juga bahwa Dreamweaver
CS3 dan kemudian datang dengan banyak pra-desain indah CSS layout yang dapat Anda gunakan
sebagai titik awal bagi halaman web Anda. But I didn't want to start you off with any of these
layouts because I think it's important for people to experience what it's like to build a page layout
completely from scratch. Tapi aku tidak ingin memulai Anda keluar dengan layout ini karena saya
pikir itu penting bagi orang-orang untuk merasakan bagaimana rasanya untuk membangun tata
letak halaman benar-benar dari nol. For more information on the CSS layouts that come with
Dreamweaver, refer to Create a page with a CSS layout in Dreamweaver Help, and Stephanie
Sullivan's article Understanding the new Dreamweaver CS3 CSS layouts . Untuk informasi lebih
lanjut tentang CSS layout yang datang dengan Dreamweaver, mengacu kepada Buat halaman
dengan tata letak CSS pada Dreamweaver Help, dan Stephanie Sullivan artikel Memahami
Dreamweaver CS3 baru CSS layout.


Memahami Dreamweaver CS3 baru CSS
Layouts
Today, more designers and developers than ever are adopting web standards to deliver their
content. Hari ini, lebih perancang dan pengembang dari sebelumnya yang mengadopsi standar web
untuk mengirimkan konten mereka. One example is the migration from table-based layouts to
cascading style sheets (CSS). Salah satu contoh adalah migrasi dari layout berbasis tabel untuk
cascading style sheet (CSS). And while the benefits of embracing web standards such as CSS
include a more flexible and robust cross-browser site design, many people don't have the time to
learn brand new ways to get their work done. Dan sementara merangkul manfaat standar web
seperti CSS menyertakan lebih fleksibel dan canggih lintas-browser desain situs, banyak orang
tidak punya waktu untuk mempelajari cara-cara baru untuk mendapatkan pekerjaan mereka selesai.

Dreamweaver CS3 helps by offering CSS Layouts that not only get your page up and running
quickly, they also help you learn by providing extensive inline comments in the code.
Dreamweaver CS3 membantu dengan menawarkan CSS Layouts bahwa tidak hanya mendapatkan
halaman Anda dan berjalan cepat, mereka juga membantu Anda belajar dengan memberikan
komentar inline luas dalam kode. Most site designs on the web can be categorized as one-, two-, or
three-column layouts, each with a number of additional elements (such as headers, footers, etc.).
Sebagian besar desain situs di web dapat dikategorikan sebagai satu, dua, atau tiga kolom layout,
masing-masing dengan sejumlah elemen tambahan (seperti header, footer, dll).

Dreamweaver offers a comprehensive list of essential layout designs, which enable you to start
using CSS with the click of the mouse. Dreamweaver menawarkan daftar lengkap desain tata letak
penting, yang memungkinkan Anda untuk mulai menggunakan CSS dengan meng-klik mouse.

In this article, Stephanie Sullivan, who created the CSS Layouts in Dreamweaver CS3, will discuss
what they are, how to access them, and what to watch for as you utilize them in your projects. Pada
artikel ini, Stephanie Sullivan, yang menciptakan CSS Layouts dalam Dreamweaver CS3, akan
membahas apa yang mereka, bagaimana untuk mengaksesnya, dan apa yang harus diperhatikan
ketika Anda menggunakannya dalam proyek-proyek Anda.

Requirements Persyaratan

To complete this tutorial you will need to install the following software and files: Untuk
menyelesaikan tutorial ini anda perlu menginstal perangkat lunak dan file berikut:

Dreamweaver CS3 Dreamweaver CS3

      Try Mencoba
      Buy Membeli

What are the CSS Layouts? Apakah yang dimaksud dengan CSS Layouts?

One of the new features in Dreamweaver CS3 is the CSS Layouts. These layouts were created to
help you, as a new CSS user, get a quick start on the layout portion of your site. Salah satu fitur
baru dalam Dreamweaver CS3 adalah CSS Layouts. Layout ini diciptakan untuk membantu Anda,
sebagai pengguna CSS baru, mendapatkan cepat mulai pada bagian tata letak situs Anda. They
contain no styling at all. Mereka tidak mengandung style sama sekali. They are heavily
commented so that, as you adapt them to your own design, you'll be aware of the changes you'll
need to make and how those might affect other parts of the layout. Mereka banyak komentar
sehingga, ketika Anda menyesuaikan diri mereka untuk anda desain sendiri, Anda akan menyadari
perubahan Anda harus membuat dan bagaimana mereka dapat mempengaruhi bagian-bagian lain
dari tata letak. The CSS Layouts are also useful for those who understand, and already use CSS for
positioning. CSS Layouts juga berguna bagi orang-orang yang mengerti, dan sudah menggunakan
CSS untuk penentuan posisi. Think of them as a quick start that gives you a solid base to begin.
Menganggap mereka sebagai awal cepat yang memberikan anda dasar yang kuat untuk memulai.
Previously, I used snippets with my own custom quick starts. Sebelumnya, saya menggunakan
potongan dengan cepat kustom saya sendiri dimulai. Now I have a lot more choices already
packaged within Dreamweaver CS3. Sekarang aku punya lebih banyak pilihan yang sudah
dikemas dalam Dreamweaver CS3.
Dreamweaver CSS Layouts render correctly in the following browsers: Firefox (Windows and
Macintosh) 1.0, 1.5, and 2.0; Internet Explorer (Windows) 5.5, 6.0, 7.0; Opera (Windows and
Macintosh) 8.0, 9.0; and Safari 2.0. Dreamweaver CSS Layouts render dengan benar pada browser
berikut: Firefox (Windows dan Macintosh) 1.0, 1.5, dan 2.0; Internet Explorer (Windows) 5.5, 6.0,
7.0; Opera (Windows dan Macintosh) 8.0, 9.0; dan Safari 2.0. When writing the code for the CSS
Layouts, care was given to avoid hacks for specific browsers. Ketika menulis kode untuk CSS
Layouts, perawatan yang diberikan untuk menghindari hacks untuk browser tertentu. Though these
current, and older browsers have been thoroughly tested, it does not mean the CSS Layouts will
not work in earlier browsers. Meskipun saat ini, dan browser yang lebih tua telah benar-benar
teruji, bukan berarti Layouts CSS tidak akan bekerja pada browser sebelumnya. If you need to
support an older browser like IE 5 Macintosh, there is very little that actually needs to be added.
Jika Anda perlu mendukung browser yang lebih tua seperti IE 5 Macintosh, ada sangat sedikit
yang benar-benar perlu ditambahkan. This is one of the things that will be covered in the book
Greg Rewis and I are writing for New Riders called “Mastering CSS with Dreamweaver CS3.” Ini
adalah salah satu hal yang akan dibahas dalam buku Greg Rewis dan aku menulis untuk New
Riders disebut "Menguasai CSS dengan Dreamweaver CS3."

The CSS Layouts are accessed in one of two ways: CSS Layouts diakses dalam salah satu dari dua
cara:

      Choose File > New and go to the Blank Page pane of the dialog. Pilih File> New dan pergi
       ke Blank Page panel dari dialog.
      On the Dreamweaver Welcome Screen, go to the Create New column and choose the
       More… link at the bottom. Pada Welcome Screen Dreamweaver, pergi ke Create New
       kolom dan memilih More ... link di bagian bawah.




Figure 1 . Gambar 1. A view of the CSS Layouts Sebuah pandangan CSS Layouts

Either method will show you all the choices, beginning with a blank HTML document and going
through the one, two and three column choices, in that order. Metode tersebut akan menampilkan
semua pilihan, dimulai dengan dokumen HTML yang kosong dan pergi melalui satu, dua dan tiga
kolom pilihan, dalam urutan itu. These choices are grouped by layout type. Pilihan-pilihan ini
dikelompokkan berdasarkan jenis layout.

You'll notice several icons, reused throughout the layouts. Anda akan melihat beberapa ikon,
digunakan kembali seluruh layout. These icons denote what kind of width is being used for the
columns within the layout. Ikon ini menunjukkan apa yang lebar yang digunakan untuk kolom
dalam tata letak. There is also a text description below. The lock icon indicates that the column's
value is written in a fixed pixel size. Ada juga deskripsi teks di bawah ini. Kunci ikon
menunjukkan bahwa nilai kolom ditulis dalam ukuran pixel yang tetap. The spring icon, along
with either an em or % above it, indicates that the column's value is written using a stretchy
method – either em-based or percentage-based. Ikon musim semi, bersama baik dengan mereka
atau% di atasnya, menunjukkan bahwa nilai kolom ini ditulis dengan menggunakan metode elastis
- baik em berbasis atau persentase berbasis.




Figure 2 . Gambar 2. The lock and spring icons indicate what value is given to the various
columns Kunci dan musim semi ikon menunjukkan nilai apa yang diberikan kepada berbagai
kolom

Once you've chosen the type of layout you'd like to start your page with by highlighting it in the
dialog, you have several other choices to make. Setelah Anda memilih jenis layout Anda ingin
memulai halaman Anda dengan dengan menggarisbawahi hal itu dalam dialog, Anda memiliki
beberapa pilihan lain untuk membuat. First, you need to choose your doctype (HTML or
XHTML). Pertama, Anda perlu memilih DOCTYPE (HTML atau XHTML). Then, you'll need to
choose where you'd like the CSS placed. Choosing Add to Head will place the CSS selectors into
the head of your document to keep it simple while you're developing your page. Kemudian, Anda
harus memilih di mana Anda ingin ditempatkan CSS. Memilih Tambahkan ke Kepala akan
menempatkan CSS ke dalam kepala penyeleksi dokumen anda untuk tetap sederhana, saat Anda
sedang mengembangkan halaman Anda. Later, you can use the new CSS management features to
move it to an external file. Kemudian, Anda dapat menggunakan fitur manajemen CSS baru untuk
memindahkannya ke file eksternal. Choosing Create New File will place the CSS selectors into a
new CSS file linked to your X/HTML document. Memilih Create New File akan menempatkan
penyeleksi CSS ke file CSS baru terhubung ke X / dokumen HTML. Finally, choosing Link to
Existing File will allow you to use the link icon to point Dreamweaver to an existing CSS
document. Akhirnya, memilih Link ke file yang ada akan memungkinkan Anda untuk
menggunakan link ikon ke titik Dreamweaver CSS yang sudah ada dokumen. Remember though,
your selector names will have to match the names within the X/HTML document provided. Ingat
meskipun, Anda akan memiliki nama-nama pemilih untuk mencocokkan nama-nama dalam X /
dokumen HTML yang tersedia.
An overview of the five types of CSS Layouts Ikhtisar dari lima jenis CSS Layouts

There are five basic types of layout positioning to choose from: Ada lima tipe dasar tata letak
posisi untuk memilih dari:

      Elastic layout – The values for the overall width, as well as any columns within, are written
       in em units. Elastis tata letak - Nilai-nilai untuk keseluruhan lebar, juga setiap kolom
       dalam, ditulis dalam satuan em. This allows the layout to scale with the browser's
       designated base font size. Hal ini memungkinkan untuk skala tata letak dengan browser
       basis yang ditunjuk ukuran font. This can be more attractive and accessible for low vision
       users since the column's widths will get wider allowing a comfortable, readable line length
       at any size. Hal ini dapat lebih menarik dan dapat diakses bagi pengguna visi rendah karena
       lebar kolom akan mendapatkan memungkinkan lebih luas yang nyaman, panjang garis
       yang dapat dibaca pada berbagai ukuran. Since the overall width will scale, your design
       must allow for a variable width. Karena lebar keseluruhan akan skala, desain Anda harus
       memungkinkan sebuah variabel lebar.
      Fixed layout – The values for the overall width, as well as any columns within, are written
       using pixel units. Fixed tata letak - Nilai-nilai untuk keseluruhan lebar, juga setiap kolom
       dalam, yang ditulis menggunakan satuan pixel. The layout is centered in the user's browser
       window. Tata letak berpusat pada jendela browser pengguna.
      Liquid layout – The values for the overall width, as well as any columns within, are written
       using percentages. Cair tata letak - Nilai-nilai untuk keseluruhan lebar, juga setiap kolom
       dalam, ditulis dengan menggunakan persentase. The percentage is calculated from the size
       of the user's browser window. Persentase dihitung dari ukuran jendela browser pengguna.
      Hybrid layout – Hybrid layouts combine two of the other types of layouts – elastic and
       liquid. Hybrid layout - layout Hybrid menggabungkan dua jenis layout lain - elastis dan
       cair. The overall width of the page is 100% but the side columns values are set to em units.
       Lebar keseluruhan halaman adalah 100% tetapi nilai-nilai kolom samping diatur ke unit
       mereka.
      Absolutely Positioned layouts – all the previous layouts use floats for the outer columns.
       Tentu posisinya layout - semua penggunaan layout sebelumnya mengapung untuk kolom
       luar. The absolutely positioned layouts do exactly what their name implies – they have
       absolutely positioned outer columns. Menempatkan tata letak yang benar-benar melakukan
       apa yang namanya mereka - mereka telah benar-benar diposisikan kolom luar. You must
       remember, when using these layouts that the side columns are taken “out of the flow” of
       the document and thus, may have some undesirable results (for instance, your footer won't
       “see” where the side column ends and may overlap them on pages where the main content
       area contains less content than the side columns). Anda harus ingat, bila menggunakan
       layout ini bahwa kolom samping diambil "dari aliran" dokumen dan dengan demikian,
       mungkin memiliki hasil yang tidak diinginkan (misalnya, Anda tidak akan footer "melihat"
       di mana kolom sisi berakhir dan dapat tumpang tindih mereka pada halaman di mana
       kawasan konten utama mengandung kurang isi dari kolom samping).

Understanding and using a CSS layout Memahami dan menggunakan tata letak
CSS
Let's create a CSS layout and have a look at what they contain within. Mari kita membuat CSS
layout dan kita lihat apa yang mereka mengandung dalam. Go to the New Document dialog,
choose the 2 column fixed, left sidebar, header and footer layout using an XHTML 1.0
Transitional doctype and place the CSS in the head of the document. Buka dialog New Document,
pilih 2 kolom yang tetap, kiri sidebar, header dan footer layout menggunakan DOCTYPE XHTML
1.0 Transitional CSS dan tempat di kepala dokumen. Click create. Klik ciptakan.

The first thing you may notice is that all the CSS selectors start with the class, .twoColFixLtHdr.
Hal pertama yang Anda perhatikan adalah bahwa semua pemilih CSS mulai dengan kelas,.
TwoColFixLtHdr. This descendant selector tells you what type of page you're working in. The
twoCol means two column, Fix is a fixed layout, Lt is for left column and Hdr means there is a
header and footer. Pemilih keturunan ini memberitahu anda apa jenis halaman yang sedang bekerja
masuk twoCol berarti dua kolom, Fix adalah tetap tata letak, Letnan adalah untuk kolom kiri dan
HDR berarti ada header dan footer. All the pages use the same order, so it should make sense as
you open the different types. Semua halaman menggunakan urutan yang sama, jadi seharusnya
masuk akal ketika Anda membuka jenis yang berbeda.

The reason this class precedes each selector is to allow you to combine layouts, and thus, write
more efficient CSS. Alasan kelas ini mendahului setiap pemilih adalah untuk memungkinkan Anda
untuk menggabungkan tata letak, dan dengan demikian, menulis lebih efisien CSS. Dreamweaver
places the class on the body element of each page, the layout we just created displays <body
class=""> . Dreamweaver tempat kelas pada elemen body dari setiap halaman, tata letak kami
baru saja dibuat menampilkan <body class=""> If your client needed different types of pages,
some with two columns and some with three columns, you could combine the CSS for both types
of pages. Jika klien Anda membutuhkan jenis halaman yang berbeda, beberapa dengan dua kolom
dan beberapa dengan tiga kolom, Anda dapat menggabungkan CSS untuk kedua jenis halaman.
The selectors written for the p, h1, h2, h3, ul, ol, etc could be written as simple type selectors, or
even descendant selectors with the division name and type selector (such as #mainContent h1) to
keep consistency between different page types. Para pemilih ditulis untuk p, h1, h2, h3, ul, ol, dll
dapat ditulis sebagai penyeleksi tipe sederhana, atau bahkan keturunan pemilih dengan jenis dan
nama divisi pemilih (seperti # maincontent h1) untuk menjaga konsistensi antara halaman yang
berbeda jenis. You don't have to rewrite everything – simply keep the selectors you need for the
layout portion -- for each page type when combining pages. Anda tidak perlu menulis ulang segala
sesuatu - hanya menjaga pemilih yang diperlukan untuk tata letak bagian - untuk setiap jenis
halaman ketika menggabungkan halaman.

If you will only be using one type of page, you can remove those classes altogether. Jika Anda
hanya akan menggunakan satu jenis halaman, Anda dapat menghapus kelas tersebut sama sekali. I
personally remove them since it is more difficult to read the selector names in the CSS panel when
they're present. They're easy to remove however. Saya pribadi menghapusnya karena lebih sulit
untuk membaca nama-nama pemilih di panel CSS ketika mereka hadir. Mereka sedang mudah
Namun untuk menghapus. Simply highlight the .twoColFixLtHdr class in the CSS of your
document (as well as the space behind it). Cukup .twoColFixLtHdr kelas di CSS dokumen Anda
(dan juga ruang di belakangnya). Ctrl/F (Windows) or Cmd/F (Mac) to open the Find and Replace
dialog. Ctrl / F (Windows) atau cmd / F (Mac) untuk membuka Cari dan Ganti dialog. It will open
with the class you highlighted in the Find portion of the window. Ini akan terbuka dengan kelas
Anda disorot dalam bagian Cari jendela. Make sure the Find in: is set to Current Document, the
Search: to Source Code and leave the Replace area blank. Pastikan Temukan di: diatur ke Current
Dokumen, Pencarian: to Source Code dan meninggalkan wilayah Ganti kosong. Click Replace All.
Dreamweaver will quickly strip those classes right out of the document. Klik Ganti Semua.
Dreamweaver akan cepat strip kelas tersebut langsung dari dokumen.




Figure 3 . Gambar 3. Find and Replace will quickly strip the extraneous classes from your
document Cari dan Ganti dengan cepat akan mengupas kelas ekstra dari dokumen Anda

Now, click anywhere within the document and on the tag selector at the bottom of the document
window, right click on body.twoColFixLtHdr. Sekarang, klik di mana saja dalam dokumen dan
pada pemilih tag di bagian bawah jendela dokumen, klik kanan pada body.twoColFixLtHdr.
Choose Set Class > None. Pilih Set Kelas> Tidak ada. This will remove the class applied to the
body selector. Ini akan menghapus kelas yang diberikan kepada benda pemilih.

As you look through the selectors remaining on the page, you'll notice that, outside the body
selector, there is no font color or sizing. Seperti yang Anda lihat melalui penyeleksi tersisa pada
halaman, Anda akan melihat bahwa, di luar tubuh pemilih, tidak ada warna font atau sizing.
Backgrounds are placed on divs simply to indicate where they begin and end. Latar belakang
ditempatkan pada divs hanya untuk menunjukkan di mana mereka mulai dan berakhir. Other than
these two things, there is no styling at all. Selain kedua hal ini, tidak ada style sama sekali. These
layouts are solid structure only, the creative portion is left up to you. Ini struktur tata letak yang
solid saja, bagian kreatif diserahkan penuh kepada Anda.

Finally, there are notes to help you understand the particular type of layout you're using. Akhirnya,
ada catatan untuk membantu Anda memahami jenis tata letak tertentu yang Anda gunakan. They
are written directly in the div, such as the #sidebar div, “The background color on this div will
only show for the length of the content. Mereka ditulis langsung dalam div, seperti div # sidebar,
"Latar belakang warna pada div ini hanya akan muncul untuk panjang konten. If you'd like a
dividing line instead, place a border on the left side of the #mainContent div if it will always
contain more content.” Jika Anda ingin garis pemisah, bukan, tempat perbatasan di sisi kiri #
maincontent div apakah akan selalu mengandung lebih banyak konten. "
The CSS is also heavily commented, both before the selectors for a division of the page, and
following an individual declaration. These CSS comments can be very helpful when you need to
change some of the values, warning you of other areas of the page you might be affecting. CSS
juga berisi banyak komentar, baik sebelum para pemilih untuk sebuah divisi dari halaman, dan
mengikuti deklarasi individu. Komentar CSS ini bisa sangat berguna ketika Anda perlu mengubah
beberapa dari nilai-nilai, peringatan Anda tentang daerah-daerah lain dari halaman yang mungkin
mempengaruhi. But maybe you're a more advanced user and don't need the comments, or you'd
like to save a copy of the file with comments and then put a copy on the web without them. Tapi
mungkin Anda seorang pengguna lebih maju dan tidak membutuhkan komentar, atau Anda ingin
menyimpan salinan file dengan komentar-komentar dan kemudian meletakkan salinan di web
tanpa mereka. You can use a regular expression within Dreamweaver's Find and Replace dialog to
instantly strip out all comments. If you don't know how to create a regular expression on your own,
David Powers has created one for you. Anda dapat menggunakan kalimat biasa dalam
Dreamweaver's Cari dan Ganti dialog untuk langsung melepas semua komentar. Jika anda tidak
tahu cara membuat kalimat biasa Anda sendiri, David Powers telah menciptakan satu untuk Anda.
It's available as an extension on his web site . Ini tersedia sebagai ekstensi di situs web. Or, take a
look at Rob Christensen's Developer Center article " Introduction to Regular Expressions in
Dreamweaver ." Atau, lihat Rob Christensen Pusat Pengembang artikel "Introduction to Regular
Expressions dalam Dreamweaver."

Clearing floats in the #mainContent div Kliring mengapung di div # maincontent

There are several things to keep in mind while making the CSS Layouts your own. Ada beberapa
hal yang perlu diingat saat membuat Layout CSS Anda sendiri. First, in all but the absolutely
positioned layouts, the side columns are floated, but the center (#mainContent div) is margined to
avoid the floated columns. Pertama, dalam semua tapi benar-benar diposisikan layout, kolom sisi
mengambang, tetapi pusat (# maincontent div) adalah margined untuk menghindari kolom
mengambang. If you're unfamiliar with the principles of floating, here's a quick reminder list
(taken from my Developer Center article “ Tableless Layouts with Dreamweaver 8 ”). Read it to
get more info on floating and clearing: Jika Anda tidak terbiasa dengan prinsip-prinsip yang
mengambang, Berikut adalah daftar pengingat cepat (diambil dari artikel Pusat Pengembang
"Tableless Layout dengan Dreamweaver 8"). Baca ini untuk mendapatkan info lebih lanjut tentang
mengapung dan kliring:

   1. A float must be given a width Sebuah float harus diberi lebar
   2. A float must be given a directional value of left or right (there is no top or bottom) Sebuah
      float harus diberi nilai arah kiri atau kanan (tidak ada atas atau bawah)
   3. If you want a float to appear alongside another element, it must precede that element in the
      source order of the document Jika Anda ingin pelampung untuk muncul di samping elemen
      yang lain, itu harus mendahului bahwa elemen dalam urutan sumber dokumen
   4. A float never covers text and inline images Sebuah float pernah mencakup inline teks dan
      gambar
   5. Avoid using a width on a block element following a float. Use a margin on the same side of
      the float instead. Hindari penggunaan lebar pada elemen blok setelah layang. Gunakan
      margin pada sisi yang sama dari float instead.
   6. Since a float is taken “out of the flow” of the document, a float inside another container
      must be cleared in order for the parent container to properly enclose it. Karena pelampung
      diambil "dari aliran" dari dokumen, yang mengambang di dalam wadah lain harus bersih
      agar orangtua wadah untuk benar menyertakan itu.

There is just one little “gotcha” to be aware of in these layouts. Hanya ada satu sedikit "gotcha"
yang harus diperhatikan dalam tata letak ini. That is, if you are floating something within a non-
floated div(#mainContent), and you want to clear that float, you will clear all divs that are floated –
in this case the side columns as well. Artinya, jika Anda mengapung sesuatu dalam non-
mengambang div (# maincontent), dan Anda ingin menghapus yang mengambang, Anda akan
menghapus semua divs yang mengambang - dalam hal ini kolom samping juga. This can give you
undesirable effects when the subsequent content in the #mainContent area appears below the side
columns. Hal ini dapat memberikan efek yang tidak diinginkan ketika konten berikutnya di daerah
# maincontent muncul di bawah kolom samping.

I coded the layouts in this manner for consistencies sake as well as to help the math-phobic among
us. Aku kode tata letak dengan cara ini untuk kepentingan konsistensi serta membantu-fobia
matematika di antara kita. In a three column layout, if you're floating all three divs, you'll have to
make sure you do your math correctly to discern the proper width for the #mainContent div. It's
quite easy to margin the #mainContent the same width as the side columns and avoid the math.
Dalam tata letak tiga kolom, jika Anda terapung ketiga divs, Anda harus pastikan Anda melakukan
matematika dengan benar untuk mengetahui lebar yang tepat untuk div # maincontent. Ini sangat
mudah untuk margin yang # maincontent lebar yang sama seperti kolom sisi dan menghindari
matematika. Also, in some of the hybrid layouts, calculating the actual #mainContent width can be
problematic since you're combining em and percentages within the same layout. Juga, di beberapa
hibrida layout, menghitung # maincontent lebar sebenarnya dapat menjadi masalah karena Anda
menggabungkan em dan persentase dalam tata letak yang sama. Thus, to keep the layouts
consistent, we chose to use the margining method consistently throughout the layouts. Jadi, untuk
menjaga tata letak konsisten, kami memilih untuk menggunakan metode margining secara
konsisten di seluruh layout.

This means, if you're going to clear a float within the #mainContent div, you'll need to do one of
two things. Ini berarti, jika Anda akan jelas pelampung di dalam div # maincontent, Anda harus
melakukan salah satu dari dua hal. Either calculate the width of your #mainContent area, and float
it as well keeping the above float principles in mind. Entah menghitung lebar # maincontent daerah
Anda, dan mengambang itu juga tetap mengambang di atas prinsip-prinsip dalam pikiran. Or,
place another div within the #mainContent and float it left or right. Atau, tempat lain di dalam div
# maincontent dan mengapungkannya ke kiri atau kanan. Once you place the rest of your content
within that floated div, you can clear to your heart's content without a problem. Setelah Anda
menempatkan seluruh konten Anda di dalam div yang mengambang, Anda dapat jelas isi hati
Anda tanpa masalah.

Remember too, if you don't desire a true columned look, you can leave the #mainContent area
completely unmargined and the text in the #mainContent area will wrap below the side column
wherever that content ends. Ingat juga, jika Anda tidak menginginkan tampilan pilar sejati, Anda
dapat meninggalkan sepenuhnya wilayah # maincontent unmargined dan teks di daerah #
maincontent akan membungkus di bawah kolom sisi mana pun konten tersebut berakhir.

Avoiding float drop Menghindari float drop

Based on my previous discussion of floats, there's another thing to keep in mind. Berdasarkan
pembahasan sebelumnya saya mengambang, ada satu hal lagi yang perlu diperhatikan. That is, if
you put an element within a div that is wider than the allowable content area of the div, you will
experience float drop in Internet Explorer. Yaitu, jika anda menempatkan sebuah elemen dalam
div yang lebih luas daripada isi dibolehkan daerah div, Anda akan mengalami penurunan
mengambang di Internet Explorer. Float drop is exhibited by the content of a div dropping below
the final content of another div. Float drop dipamerkan oleh isi dari div turun di bawah konten
final div lain. So for example, if your client is using Contribute to edit their own website, you need
to make them aware of the image size limitations. Jadi misalnya, jika klien Anda menggunakan
Kontribusi mengedit situs web mereka sendiri, Anda perlu membuat mereka menyadari
keterbatasan ukuran gambar. For the fixed width layout we've created, that size would be a 490px
limitation. Untuk tata letak lebar tetap kami buat, itu akan menjadi ukuran 490px keterbatasan.
This is arrived at by taking the left margin of the #mainContent (250px) and adding in the padding
of that div (20px on each side) and subtracting it from the overall width of the layout (780px). Hal
ini tiba di dengan mengambil margin kiri di # maincontent (250px) dan menambahkan di padding
div itu (20px di setiap sisi) dan mengurangkan dari keseluruhan lebar layout (780px). 780 – 250 –
40 = 490px The math on the em and percentage based layouts can be a bit tricky since they're
based on the user's font size or browser window size. These considerations will be addressed in my
upcoming book with Greg Rewis, “Mastering CSS with Dreamweaver CS3.” 780-250 - 40 =
490px matematika pada mereka dan layout berdasarkan persentase dapat menjadi agak rumit
karena mereka didasarkan pada ukuran font pengguna atau ukuran jendela browser. Pertimbangan
ini akan dibahas dalam buku saya yang akan datang dengan Greg Rewis, " Menguasai CSS dengan
Dreamweaver CS3. "
Figure 4. This is the view in Internet Explorer when the asset is wider than the space provided
Gambar 4. Ini adalah tampilan di Internet Explorer saat aktiva lebih luas daripada ruang yang
disediakan

Creating equal length columns Membuat kolom dengan panjang yang sama

The final issue I'll address is the note I left at the beginning of each column. Edisi terakhir aku
akan alamat catatan aku meninggalkan pada awal setiap kolom. “The background color on this div
will only show for the length of the content. "Latar belakang warna pada div ini hanya akan
muncul untuk panjang konten. If you'd like a dividing line instead, place a border on the left side
of the #mainContent div if it will always contain more content.” Jika Anda ingin garis pemisah,
bukan, tempat perbatasan di sisi kiri # maincontent div apakah akan selalu mengandung lebih
banyak konten. "

You can, in fact, place a border on the #mainContent div to separate the side column visually.
Anda dapat, pada kenyataannya, tempat perbatasan pada div # maincontent untuk memisahkan
kolom sisi visual. But in many cases, you either know you will have a couple very short pages, or
perhaps you're using some type of dynamic content and will be unable to verify this. Tapi dalam
banyak kasus, Anda langsung tahu Anda akan memiliki beberapa halaman yang sangat pendek,
atau mungkin Anda menggunakan beberapa jenis konten dinamis dan tidak akan mampu untuk
memverifikasi ini. Maybe rather than a dividing line, you'd like to use a background color or
pattern. Mungkin bukan garis pemisah, Anda ingin menggunakan warna latar belakang atau pola.
In this case, you need to use the faux column method. Dalam hal ini, Anda harus menggunakan
metode kolom palsu. This is a handy trick I use on most sites I build. Ini adalah trik praktis saya
gunakan pada sebagian besar situs saya membangun. You can use any image program to create
this graphic. Anda dapat menggunakan program gambar untuk membuat grafik ini. I've used
Fireworks, my favorite. Saya telah menggunakan Fireworks, favorit saya.

The #container controlling our web page's width is 780px wide. The # container mengendalikan
halaman web kami adalah 780px lebar lebar. If you were creating a three column layout, you
would create your canvas and graphic the same width as your page in order to have all three
columns in on graphic. Jika Anda membuat tata letak tiga kolom, Anda akan membuat Anda dan
grafik kanvas lebar yang sama seperti halaman Anda agar dapat memiliki ketiga pada kolom di
grafis. For our two column layout, since the #mainContent area is white, we can actually use a
slice the width of our column. Bagi kami tata letak dua kolom, karena daerah # maincontent putih,
kita dapat benar-benar menggunakan sepotong lebar kolom kita. Since this will be a repeating
slice, you can make it about 10px high. Karena ini akan menjadi mengulangi slice, Anda dapat
membuat itu tentang 10px tinggi. Now, using the color you want for your column, draw a rectangle
230px wide (200px width + 30px side padding = 230px). Sekarang, dengan menggunakan warna
yang Anda inginkan untuk kolom, menggambar persegi panjang lebar 230px (width 200px + 30px
padding sisi = 230px). Export it as a GIF into the images directory of your site definition. Ekspor
sebagai gambar GIF ke direktori situs Anda definisi.

In Dreamweaver, click into your document, and on the tag selector, choose #container. Dalam
Dreamweaver, klik ke dokumen Anda, dan pada tag selector, pilih # container. This will display
the properties for #container in your CSS panel. Ini akan menampilkan properti untuk # container
di panel CSS anda. Click the pencil icon at the bottom to edit. Klik ikon pensil di bagian bawah
untuk mengedit. Go to the Background category > Background image: and navigate to the image
you just created. Pergi ke kategori Background> Background image: dan navigasikan ke gambar
yang baru dibuat. Choose repeat-y. Pilih repeat-y. If you're unfamiliar with the repeat-y portion of
that value, that's simply telling the graphic to tile on the Y axis (or top to bottom on your page).
Jika Anda tidak terbiasa dengan repeat-y bagian dari nilai, itu hanya memberitahu grafis untuk
ubin pada sumbu Y (atau atas ke bawah pada halaman Anda). There is no need to position the
graphic since the default values are left and top and that's exactly where we want it to begin. Tidak
ada kebutuhan untuk posisi grafik sejak nilai-nilai default kiri dan atas dan itulah tempat yang kita
inginkan untuk memulai.

Preview the page in your browser for the full effect. Preview halaman dalam browser Anda untuk
efek penuh. Notice how the column now goes the full length of the page? Perhatikan bagaimana itu
sekarang kolom panjang penuh halaman? I left the CSS layout's default gray color in place so you
could visually see where the column actually stops. Aku meninggalkan CSS layout default warna
abu-abu di tempatnya sehingga Anda bisa secara visual melihat kolom di mana benar-benar
berhenti. You will, of course, need to remove that. Anda akan, tentu saja, harus menghapus itu.
While you're at it, feel free to comment out or remove the color on the #header and #footer as well.
Sementara kau di itu, jangan ragu untuk komentar atau menghapus warna di # header dan # footer
juga. You'll notice that, since the column graphic is placed on the #container, the column runs all
the way through those as well. Anda akan melihat bahwa, karena grafis kolom diletakkan di atas #
container, kolom menjalankan semua jalan melalui mereka juga. Any element without a
background color of its own declared will show this image. Setiap elemen tanpa warna latar
belakang sendiri menyatakan akan menampilkan gambar ini. In some designs, you may choose to
leave the #footer transparent and simply give it margins that match the #mainContent div, keeping
the text away from the column. Pada beberapa rancangan, Anda dapat memilih untuk
meninggalkan # footer transparan dan hanya memberikan margin yang cocok dengan #
maincontent div, menjaga teks dari kolom. In others, it may be more desirable to have a
background color or image on the #header and #footer. Pada orang lain, mungkin lebih diinginkan
untuk memiliki warna latar belakang atau gambar pada header # dan # footer.




Figure 5 . Gambar 5. The new faux column is displayed for the full length of the page Kolom
faux baru ditampilkan untuk panjang penuh halaman

Where to go from here Ke mana harus pergi dari sini

This article was written to give you a quick overview and understanding of the new CSS Layouts
in Dreamweaver CS3. Artikel ini ditulis untuk memberikan gambaran singkat dan pemahaman
tentang Layouts CSS baru di Dreamweaver CS3. For more in-depth information on using and
extending the different types of layouts and to learn more about CSS using Dreamweaver CS3,
watch the Developer Center for an excerpted chapter from my upcoming book with Greg Rewis,
“Mastering CSS with Dreamweaver CS3.” For more on the Dreamweaver CS3 CSS Layouts in the
mean time, you can also watch Joseph Lowery's video tutorial on Using and customizing CSS-
based layouts , and Jon Varese's article on CSS page layout basics . Untuk lebih mendalam
informasi tentang penggunaan dan memperluas berbagai jenis tata letak dan untuk mempelajari
lebih lanjut mengenai CSS dengan Dreamweaver CS3, menonton Pusat Pengembang bab yang
dikutip dari buku mendatang dengan Greg Rewis, "Menguasai CSS dengan Dreamweaver CS3."
Untuk lebih pada CSS Layout Dreamweaver CS3 dalam waktu yang berarti, Anda juga dapat
menonton video Joseph Lowery tutorial Menggunakan dan mengubah layout berbasis CSS, dan
Jon Varese artikel tentang dasar-dasar tata letak halaman CSS. For more no CSS and
Dreamweaver in general, be sure to check the Dreamweaver Developer Center's CSS page for
recent articles and tutorials. Untuk informasi lebih tidak CSS dan Dreamweaver secara umum,
pastikan untuk memeriksa Dreamweaver Developer Center halaman CSS untuk artikel dan tutorial
terbaru.


Buat halaman dengan tata letak CSS
      Comments (0)
      Ratings:0



Contents [ Hide ] Isi [Sembunyikan]

      Create a page with a CSS layout Buat
       halaman dengan tata letak CSS
      Add custom CSS layouts to the list of
       choices Tambahkan CSS tata letak kustom
       ke daftar pilihan

When creating a new page in Dreamweaver, you can create one that already contains a CSS layout.
Ketika membuat halaman baru di Dreamweaver, Anda dapat membuat satu yang telah
mengandung sebuah layout CSS. Dreamweaver comes with over 30 different CSS layouts that you
can choose from. Dreamweaver hadir dengan lebih dari 30 layout CSS yang berbeda yang dapat
Anda pilih. Additionally, you can create your own CSS layouts and add them to the configuration
folder so that they appear as layout choices in the New Document dialog box. Sebagai tambahan,
Anda dapat membuat layout CSS Anda sendiri dan menambahkannya ke folder konfigurasi
sehingga mereka muncul sebagai pilihan tata letak dalam kotak dialog New Document.
Dreamweaver CSS layouts render correctly in the following browsers: Firefox (Windows and
Macintosh) 1.0, 1.5, and 2.0; Internet Explorer (Windows) 5.5, 6.0, 7.0; Opera (Windows and
Macintosh) 8.0, 9.0; and Safari 2.0. Dreamweaver CSS layout render dengan benar pada browser
berikut: Firefox (Windows dan Macintosh) 1.0, 1.5, dan 2.0; Internet Explorer (Windows) 5.5, 6.0,
7.0; Opera (Windows dan Macintosh) 8.0, 9.0; dan Safari 2.0.

Create a page with a CSS layout Buat halaman dengan tata letak CSS
   1. Select File > New. Pilih File> New.
   2. In the New Document dialog box, select the Blank Page category. Dalam kotak dialog New
      Document, pilih Blank Page kategori. (It's the default selection.) (Ini adalah pilihan
      default.)
   3. For Page Type, select the kind of page you want to create. Untuk Page Type, pilih jenis
      halaman yang ingin Anda ciptakan.

       Note: You must select an HTML page type for the layout. For example, you can select
       HTML, ColdFusion®, PHP, and so on. Catatan: Anda harus memilih jenis halaman HTML
       untuk tata letak. Sebagai contoh, Anda dapat memilih HTML, ColdFusion ®, PHP, dan
       sebagainya. You cannot create an ActionScript™, CSS, Library Item, JavaScript, XML,
       XSLT, or ColdFusion Component page with a CSS layout. Anda tidak dapat membuat
       ActionScript ™, CSS, Perpustakaan Item, JavaScript, XML, XSLT, atau Komponen
       ColdFusion halaman dengan tata letak CSS. Page types in the Other category of the New
       Document dialog box are also restricted from including CSS page layouts. Halaman jenis
       dalam kategori lain dari kotak dialog Dokumen Baru juga dilarang termasuk halaman CSS
       layout.

   4. For Layout, select the CSS layout you want to use. Untuk Layout, pilih layout CSS yang
      ingin Anda gunakan. You can choose from over 30 different layouts. Anda dapat memilih
      dari lebih dari 30 tata letak yang berbeda. The Preview window shows the layout and gives
      a brief description of the selected layout. Jendela Pratinjau menunjukkan layout dan
      memberikan deskripsi singkat tata letak yang dipilih.

       The predesigned CSS layouts provide the following types of columns: Predesigned CSS
       layout yang menyediakan jenis kolom berikut:

       Fixed Tetap
       Column width is specified in pixels. Lebar kolom ditentukan dalam pixel. The column does
       not resize based on the size of the browser or the site visitor's text settings. Kolom tidak
       mengubah ukuran didasarkan pada ukuran browser atau pengunjung situs pengaturan teks.
       Elastic Elastis
       Column width is specified in a unit of measurement (ems) relative to the size of the text.
       Lebar kolom ditentukan dalam unit pengukuran (ems) relatif terhadap ukuran teks. The
       design adapts if the site visitor changes the text settings, but does not change based on the
       size of the browser window. Desain menyesuaikan jika pengunjung situs mengubah
       pengaturan teks, tetapi tidak berubah berdasarkan ukuran jendela browser.
       Liquid Cair
   Column width is specified as a percentage of the site visitor's browser width. Lebar kolom
   ditentukan sebagai persentase dari browser pengunjung situs lebarnya. The design adapts if
   the site visitor makes the browser wider or narrower, but does not change based on the site
   visitor's text settings. Desain menyesuaikan jika pengunjung situs membuat browser yang
   lebih luas atau sempit, tetapi tidak berubah berdasarkan pengunjung situs pengaturan teks.
   Hybrid Hibrida
   Columns are a combination of any of the previous three options. For example, the two-
   column hybrid, right sidebar layout has a main column that scales to the size of the
   browser, and an elastic column on the right that scales to the size of the site visitor's text
   settings. Kolom adalah kombinasi dari salah satu dari tiga pilihan sebelumnya. Sebagai
   contoh, kedua-kolom hibrida, memiliki tata letak sidebar kanan kolom utama yang skala
   untuk ukuran browser, dan elastis kolom di sebelah kanan yang skala untuk ukuran
   pengunjung situs pengaturan teks.

5. Select a document type from the DocType pop-up menu. Pilih tipe dokumen dari
   DOCTYPE menu pop-up.
6. Select a location for the layout's CSS from the Layout CSS in pop-up menu. Pilih lokasi
   untuk tata letak's CSS dari CSS Layout dalam menu pop-up.

   Add To Head Tambahkan Kepala
   Adds CSS for the layout to the head of the page you're creating. Menambahkan CSS untuk
   tata letak ke kepala dari halaman yang sedang menciptakan.
   Create New File Buat File
   Adds CSS for the layout to a new external CSS stylesheet and attaches the new stylesheet
   to the page you're creating. Menambahkan CSS untuk tata letak yang baru stylesheet CSS
   eksternal dan menempel stylesheet baru ke halaman yang Anda ciptakan.
   Link To Existing File Link Untuk Existing File
   Lets you specify an existing CSS file that already contains the CSS rules needed for the
   layout. Memungkinkan Anda menentukan file CSS yang sudah ada yang sudah berisi
   aturan CSS yang diperlukan untuk tata letak. This option is particularly useful when you
   want to use the same CSS layout (the CSS rules for which are contained in a single file)
   across multiple documents. Pilihan ini sangat berguna ketika Anda ingin menggunakan tata
   letak yang sama CSS (CSS aturan yang terkandung dalam satu file) di beberapa dokumen.

7. Do one of the following: Lakukan salah satu dari berikut ini:
      o If you selected Add to Head from the Layout CSS in pop-up menu (the default
         option), click Create. Jika Anda memilih Tambahkan ke Kepala dari CSS Layout di
         pop-up menu (pilihan default), klik Buat.
      o If you selected Create New File from the Layout CSS pop-up menu, click Create,
         and then specify a name for the new external file in the Save Style Sheet File As
         dialog box. Jika Anda memilih Create New File CSS Layout dari menu pop-up, klik
         Buat, dan kemudian tentukan nama untuk file eksternal baru dalam Save Style
         Sheet file Seperti kotak dialog.
      o If you selected Link to Existing File from the Layout CSS in pop-up menu, add the
         external file to the Attach CSS file text box by clicking the Add Style Sheet icon,
         completing the Attach External Style Sheet dialog box, and clicking OK. Jika Anda
             memilih File Link ke yang Ada dari CSS Layout dalam menu pop-up, tambahkan
             file eksternal ke file CSS Lampirkan kotak teks dengan mengklik ikon Tambah
             Style Sheet, menyelesaikan External Style Sheet Lampirkan kotak dialog, dan
             mengklik OK. When you're finished, click Create in the New Document dialog box.
             Ketika Anda sudah selesai, klik Buat di kotak dialog New Document.

             Note: When you select the Link to Existing File option, the file you specify must
             already have the rules for the CSS file contained within it. Catatan: Bila Anda
             memilih Link ke yang Ada pilihan File, file yang Anda tentukan harus sudah
             memiliki aturan untuk file CSS yang terkandung di dalamnya.

  8. When you put the layout CSS in a new file or link to an existing file, Dreamweaver
      automatically links the file to the HTML page you're creating. Bila Anda menempatkan tata
      letak CSS dalam sebuah file baru atau link ke file yang sudah ada, Dreamweaver link
      secara otomatis file tersebut ke halaman HTML Anda membuat.
  9. Note: Internet Explorer conditional comments (CCs), which help work around IE rendering
      issues, remain embedded in the head of the new CSS layout document, even if you select
      New External File or Existing External File as the location for your layout CSS. Catatan:
      Internet Explorer bersyarat komentar (CCS), yang membantu mengatasi masalah-masalah
      rendering IE, tetap tertanam di kepala dokumen tata letak CSS baru, bahkan jika Anda pilih
      New Eksternal File atau ada file eksternal sebagai lokasi CSS untuk tata letak Anda.
  10. (Optional) You can also attach CSS style sheets to your new page (unrelated to the CSS
      layout) when you create the page. To do this, click the Attach Style Sheet icon above the
      Attach CSS file pane and select a CSS style sheet. (Opsional) Anda juga dapat
      melampirkan CSS style sheet untuk halaman baru Anda (tidak berhubungan dengan tata
      letak CSS) bila Anda membuat halaman. Untuk melakukan ini, klik Attach Style Sheet
      ikon di atas Lampirkan file CSS panel dan pilih CSS style sheet.

     For a detailed walk-through of this process, see David Powers's article, Automatically
     attaching a style sheet to new documents. Untuk rinci berjalan-melalui proses ini, lihat
     David Powers artikel, secara otomatis style sheet melampirkan dokumen baru.

Add custom CSS layouts to the list of choices Tambahkan CSS tata
letak kustom ke daftar pilihan
  1. Create an HTML page that contains the CSS layout you'd like to add to the list of choices
     in the New Document dialog box. Buat halaman HTML yang berisi tata letak CSS yang
     ingin Anda tambahkan ke daftar pilihan pada kotak dialog New Document. The CSS for
     the layout must reside in the head of the HTML page. CSS untuk tata letak harus berada di
     kepala halaman HTML.

        To make your custom CSS layout consistent with the other layouts that come with
     Dreamweaver, you should save your HTML file with the .htm extension. Untuk membuat
     layout CSS kustom Anda konsisten dengan tata letak yang lain yang datang dengan
     Dreamweaver, Anda harus menyimpan file HTML Anda dengan. Ekstensi htm.
   2. Add the HTML page to the Adobe Dreamweaver CS4\Configuration\BuiltIn\Layouts
      folder. Tambahkan halaman HTML ke Adobe Dreamweaver CS4 \ Configuration \ builtin \
      Layouts folder.
   3. (Optional) Add a preview image of your layout (for example a .gif or .png file) to the
      Adobe Dreamweaver CS4\Configuration\BuiltIn\Layouts folder. (Opsional) Tambahkan
      gambar preview layout Anda (misalnya. Gif atau. Png file) ke Adobe Dreamweaver CS4 \
      Configuration \ builtin \ Layouts folder. The default images that come with Dreamweaver
      are 227 pixels wide x 193 pixels high PNG files. Default gambar yang datang dengan
      Dreamweaver adalah lebar 227 pixel x 193 pixel tinggi file PNG.

          Give your preview image the same file name as your HTML file so that you can easily
       keep track of it. For example, if your HTML file is called myCustomLayout.htm, call your
       preview image myCustomLayout.png. Berikan gambar tampilan nama file yang sama
       seperti file HTML Anda sehingga Anda dapat dengan mudah melacak itu. Sebagai contoh,
       jika file HTML disebut myCustomLayout.htm, hubungi pratinjau gambar
       myCustomLayout.png.

   4. (Optional) Create a notes file for your custom layout by opening the Adobe Dreamweaver
      CS4\Configuration\BuiltIn\Layouts\_notes folder, copying and pasting any of the existing
      notes files in the same folder, and renaming the copy for your custom layout. (Opsional)
      Buat file untuk catatan tata letak kustom Anda dengan membuka Adobe Dreamweaver CS4
      \ Configuration \ builtin \ Layouts \ _notes folder, menyalin dan menyisipkan salah satu
      dari catatan yang ada file dalam folder yang sama, dan mengubah nama salinan tata letak
      kustom Anda. For example, you could copy the oneColElsCtr.htm.mno file, and rename it
      myCustomLayout.htm.mno. Sebagai contoh, Anda dapat menyalin file
      oneColElsCtr.htm.mno, dan mengubah nama itu myCustomLayout.htm.mno.
   5. (Optional) After you've created a notes file for your custom layout, you can open the file
      and specify the layout name, description, and preview image. (Opsional) Setelah Anda
      membuat file catatan tata letak kustom Anda, Anda dapat membuka file dan tentukan nama
      tata letak, keterangan, dan preview gambar.

More Help topics Lebih Bantuan topik

Create a blank page Buat halaman kosong

Set default document type and encoding Set default jenis dokumen dan pengkodean

Link to an external CSS style sheet Link ke CSS eksternal style sheet
Membuat situs pertama Anda - Bagian 3:
Menambahkan konten ke halaman
Welcome to the third part of this tutorial series on creating your first website. Selamat datang di
bagian ketiga dari seri tutorial ini menciptakan situs web pertama Anda. This tutorial shows you
how to add content to web pages in Adobe Dreamweaver CS4. Tutorial ini menunjukkan kepada
Anda bagaimana untuk menambahkan konten ke halaman web dalam Adobe Dreamweaver CS4.
You can add many different kinds of content to web pages, including graphics, text, links, and
Spry widgets—to name just a few. Anda dapat menambahkan berbagai macam konten ke halaman
web, termasuk grafik, teks, link, dan Spry widget-untuk menyebut beberapa. After you've added
content to your pages, you can preview your work in Dreamweaver so that you can see what it will
look like on the web. Setelah Anda menambahkan konten ke halaman Anda, Anda dapat melihat
pratinjau pekerjaan dalam Dreamweaver Anda sehingga Anda dapat melihat apa yang akan tampak
seperti di web.

Note: You won't be adding a Spry widget to the page until Part 5 of this tutorial series, Adding the
Spry menu. Catatan: Anda tidak akan menambahkan Spry widget untuk halaman sampai Bagian 5
dari seri tutorial ini, Menambahkan menu Spry.




Membuat website pertama Anda - Bagian 4:
Menambahkan gambar utama teks
Welcome to Part 4 of this tutorial series on creating your first website. Selamat Datang di Bagian 4
dari seri tutorial ini menciptakan situs web pertama Anda. This tutorial shows you how to add text
to the main image area of the index page for Check Magazine, a fictional publication. Tutorial ini
menunjukkan kepada Anda bagaimana untuk menambahkan teks ke bidang gambar utama dari
halaman indeks untuk Periksa Magazine, sebuah penerbitan fiksi. The tutorial also shows you how
to use CSS to format the text. Tutorial juga menunjukkan kepada Anda bagaimana menggunakan
CSS untuk memformat teks.




Membuat situs pertama Anda - Bagian 5:
Menambahkan menu Spry
Welcome to Part 5 of this tutorial series on creating your first website. Selamat Datang di Bagian 5
dari seri tutorial ini menciptakan situs web pertama Anda. This tutorial shows you how to add a
Spry Menu Bar widget to the index page for Check Magazine, a fictional publication. Tutorial ini
menunjukkan kepada Anda bagaimana cara menambahkan sebuah Spry Menu Bar widget untuk
halaman indeks untuk Periksa Magazine, sebuah penerbitan fiksi. A Spry Menu Bar widget is a set
of navigational menu buttons that link to other pages of your website. Sebuah Spry Menu Bar
widget adalah seperangkat tombol menu navigasi yang memiliki pranala ke halaman lain dari situs
web Anda. In many cases, the menu displays submenus when a site visitor hovers over one of the
buttons (though you won't be using submenus in this tutorial). Dalam banyak kasus, submenu
menampilkan menu ketika seorang pengunjung situs melayang-layang di atas salah satu tombol
(meskipun Anda tidak akan menggunakan submenu dalam tutorial ini). You may have heard of a
navigation bar for a website—that's essentially what I'm talking about here. Anda mungkin pernah
mendengar sebuah bar navigasi untuk situs Web-itu dasarnya apa yang saya bicarakan di sini.
Adobe calls its navigation bar a Spry Menu Bar widget, because the widget is a built-in part of the
Adobe Spry framework for Ajax and comes installed with Dreamweaver CS3 and later. Adobe
menyebut bar navigasi Spry Menu Bar widget, karena widget built-in bagian dari kerangka Adobe
Spry Ajax dan datang diinstal dengan Dreamweaver CS3 dan kemudian.

The tutorial also shows you how to customize the widget by editing its CSS rules. Tutorial juga
menunjukkan kepada Anda bagaimana untuk menyesuaikan widget dengan mengedit CSS-nya
aturan.

Note: For more information about the Spry Menu Bar widget in general, see Working with the
Menu Bar widget in Dreamweaver Help. Catatan: Untuk informasi lebih lanjut tentang Spry
Menu Bar widget pada umumnya, lihat Bekerja dengan Menu Bar widget di Dreamweaver Help.
For more information about the Spry framework for Ajax, see About the Spry framework in
Dreamweaver Help. Untuk informasi lebih lanjut tentang kerangka Spry Ajax, lihat Tentang Spry
kerangka di Dreamweaver Help.


Tentang kerangka Spry
      Comments (0)
      Ratings:0

The Spry framework is a JavaScript library that provides web designers with the ability to build
web pages that offer richer experiences to their site visitors. The Spry framework adalah JavaScript
library yang menyediakan web designer dengan kemampuan untuk membangun halaman web yang
menawarkan pengalaman yang lebih kaya untuk pengunjung situs mereka. With Spry, you can use
HTML, CSS, and a minimal amount of JavaScript to incorporate XML data into your HTML
documents, create widgets such as accordions and menu bars, and add different kinds of effects to
various page elements. Dengan Spry, Anda dapat menggunakan HTML, CSS, dan yang minimal
XML JavaScript untuk memasukkan data ke dalam dokumen HTML Anda, membuat widget
seperti akordion dan menu bar, dan menambahkan berbagai macam efek untuk berbagai elemen
halaman. The Spry framework is designed so that markup is simple and easy to use for those who
have basic knowledge of HTML, CSS, and JavaScript. Spry kerangka kerja yang dirancang
sedemikian rupa sehingga markup sederhana dan mudah digunakan bagi mereka yang memiliki
pengetahuan dasar tentang HTML, CSS, dan JavaScript.

The Spry framework is meant primarily for users who are web design professionals or advanced
nonprofessional web designers. The Spry framework ini dimaksudkan terutama untuk pengguna
yang profesional desain web atau web designer non-profesional lanjutan. It is not intended as a full
web application framework for enterprise-level web development (though it can be used in
conjunction with other enterprise-level pages). Hal ini tidak dimaksudkan sebagai kerangka
aplikasi web lengkap untuk tingkat perusahaan web development (meskipun dapat digunakan
bersama-sama dengan tingkat perusahaan-halaman).

For more information on the Spry framework, see www.adobe.com/go/learn_dw_spryframework .
Untuk informasi lebih lanjut tentang kerangka Spry, lihat www.adobe.com / go /
learn_dw_spryframework.




Selamat datang di bagian keenam dan terakhir dari seri artikel ini membuat situs web pertama
Anda. This tutorial shows you how to set up a remote site in Dreamweaver. Tutorial ini
menunjukkan kepada Anda bagaimana untuk membuat sebuah remote site di Dreamweaver. A
remote site is usually a place on a remote computer, running a web server that holds copies of your
local files. Sebuah site remote biasanya sebuah tempat di komputer remote, menjalankan web
server yang menyimpan salinan dari file lokal Anda. Users access the remote site running on the
web server when they view your pages in a browser. Pengguna mengakses situs remote berjalan di
web server ketika mereka melihat halaman Anda dalam browser.

Most Internet service providers (ISPs) or corporate system administrators provide documentation
on how to connect to a remote server using Dreamweaver. Kebanyakan penyedia layanan Internet
(ISP) atau administrator sistem perusahaan memberikan dokumentasi tentang cara menyambung
ke server jauh dengan menggunakan Dreamweaver. If you have that documentation, you should
use it rather than try to follow the steps in this tutorial. Jika Anda memiliki dokumentasi, anda
harus menggunakannya daripada mencoba mengikuti langkah-langkah dalam tutorial ini. This
tutorial presents a very broad example of connecting to a remote server, and will not be correct for
all users. Tutorial ini menyajikan contoh yang sangat luas menghubungkan ke server jauh, dan
tidak akan benar untuk semua pengguna. When in doubt about connecting to your remote site,
consult your system administrator or your ISP's help desk. Jika ragu tentang menghubungkan ke
situs remote Anda, konsultasikan dengan administrator sistem Anda atau ISP Anda help desk.

In this tutorial, you will complete the following tasks: Dalam tutorial ini, Anda akan
menyelesaikan tugas-tugas berikut:

      Learn about remote sites Belajar tentang remote site
      Define a remote folder Menetapkan folder jauh
      Upload your local files Upload file lokal Anda
      (Optional) Troubleshoot the remote folder setup (Opsional) Troubleshoot folder remote
       setup




Membuat situs pertama Anda - Bagian 6:
Publishing situs Anda
Welcome to the sixth and final part of this article series on creating your first website. Selamat
datang di bagian keenam dan terakhir dari seri artikel ini membuat situs web pertama Anda. This
tutorial shows you how to set up a remote site in Dreamweaver. Tutorial ini menunjukkan kepada
Anda bagaimana untuk membuat sebuah remote site di Dreamweaver. A remote site is usually a
place on a remote computer, running a web server that holds copies of your local files. Sebuah site
remote biasanya sebuah tempat di komputer remote, menjalankan web server yang menyimpan
salinan dari file lokal Anda. Users access the remote site running on the web server when they
view your pages in a browser. Pengguna mengakses situs remote berjalan di web server ketika
mereka melihat halaman Anda dalam browser.

Most Internet service providers (ISPs) or corporate system administrators provide documentation
on how to connect to a remote server using Dreamweaver. Kebanyakan penyedia layanan Internet
(ISP) atau administrator sistem perusahaan memberikan dokumentasi tentang cara menyambung
ke server jauh dengan menggunakan Dreamweaver. If you have that documentation, you should
use it rather than try to follow the steps in this tutorial. Jika Anda memiliki dokumentasi, anda
harus menggunakannya daripada mencoba mengikuti langkah-langkah dalam tutorial ini. This
tutorial presents a very broad example of connecting to a remote server, and will not be correct for
all users. Tutorial ini menyajikan contoh yang sangat luas menghubungkan ke server jauh, dan
tidak akan benar untuk semua pengguna. When in doubt about connecting to your remote site,
consult your system administrator or your ISP's help desk. Jika ragu tentang menghubungkan ke
situs remote Anda, konsultasikan dengan administrator sistem Anda atau ISP Anda help desk.

In this tutorial, you will complete the following tasks: Dalam tutorial ini, Anda akan
menyelesaikan tugas-tugas berikut:

      Learn about remote sites Belajar tentang remote site
      Define a remote folder Menetapkan folder jauh
      Upload your local files Upload file lokal Anda
      (Optional) Troubleshoot the remote folder setup (Opsional) Troubleshoot folder remote
       setup
Belajar tentang remote site

After you create a website, the next step is to publish it by uploading the files to a remote folder.
Setelah Anda membuat website, langkah berikutnya adalah untuk menerbitkannya dengan meng-
upload file ke folder jauh. A remote folder is where you store your files for testing, production,
collaboration, and publication (depending on your environment). Sebuah folder jauh adalah tempat
Anda menyimpan file Anda untuk pengujian, produksi, kolaborasi, dan publikasi (tergantung pada
lingkungan anda). Dreamweaver refers to this folder as your remote site. Dreamweaver mengacu
ke folder ini sebagai situs remote.

Before you can proceed, you must have access to a remote web server—such as your ISP's server,
a server owned by the client you're working for, an intranet server within your company, or an
Internet Information Services (IIS) server on a Windows computer. Sebelum Anda dapat
melanjutkan, Anda harus memiliki akses ke web server remote-seperti server ISP anda, server
yang dimiliki oleh klien Anda bekerja untuk, server intranet dalam perusahaan Anda, atau Internet
Information Services (IIS) server pada komputer Windows. If you don't have access to such a
server, contact your ISP, your client, or your system administrator. Jika Anda tidak memiliki akses
ke server tersebut, hubungi ISP Anda, klien Anda, atau administrator sistem Anda.

Alternatively, you can run a web server such as IIS (Windows) or Apache (Macintosh) on your
local computer. Atau, Anda dapat menjalankan web server seperti IIS (Windows) atau Apache
(Macintosh) pada komputer lokal Anda. For more information about setting up a web server on
your local computer, see Web server basics and the neighboring topics in Dreamweaver Help.
Untuk informasi lebih lanjut tentang setting up web server pada komputer lokal Anda, lihat web
server dasar-dasar dan topik tetangga di Dreamweaver Help.


asar-dasar web server
      Comments (0)
      Ratings:0

To develop and test dynamic web pages, you need a functioning web server. A web server is
software that serves web pages in response to requests from web browsers. Untuk
mengembangkan dan menguji halaman web dinamis, anda memerlukan server web berfungsi.
Sebuah server Web adalah perangkat lunak yang melayani halaman web sebagai tanggapan atas
permintaan dari web browser. A web server is sometimes called an HTTP server. You can install
and use a web server on your local computer. Sebuah web server kadang-kadang disebut sebuah
server HTTP. Anda dapat menginstal dan menggunakan web server pada komputer lokal Anda.

If you're a Macintosh user, you can use the Apache web server already installed on your
Macintosh. Jika Anda adalah pengguna Macintosh, Anda dapat menggunakan server web Apache
telah terinstal di Macintosh Anda.

Note: Adobe does not provide technical support for third-party software such as Microsoft Internet
Information Server. Catatan: Adobe tidak menyediakan dukungan teknis untuk perangkat lunak
pihak ketiga seperti Microsoft Internet Information Server. If you need assistance with a Microsoft
product, please contact Microsoft technical support. Jika Anda memerlukan bantuan dengan
produk Microsoft, silahkan hubungi Microsoft dukungan teknis.

If you use Internet Information Server (IIS) to develop web applications, the default name of your
web server is the name of your computer. Jika Anda menggunakan Internet Information Server
(IIS) untuk mengembangkan aplikasi web, nama default web server adalah nama komputer Anda.
You can change the server name by changing the name of your computer. Anda dapat mengubah
nama server dengan mengubah nama komputer Anda. If your computer has no name, the server
uses the word localhost. Jika komputer Anda tidak memiliki nama, server menggunakan kata
localhost.

The server name corresponds to the server's root folder, which (on a Windows computer) is most
likely C:\Inetpub\wwwroot. Nama server sesuai dengan server root folder, yang (pada komputer
Windows) adalah yang paling mungkin C: \ Inetpub \ wwwroot. You can open any web page
stored in the root folder by entering the following URL in a browser running on your computer:
Anda dapat membuka halaman web yang disimpan di dalam folder akar dengan memasukkan URL
berikut pada browser yang berjalan pada komputer Anda:

http:// your_server_name / your_file_name http:// your_server_name / your_file_name

For example, if the server name is mer_noire and a web page called soleil.html is stored in
C:\Inetpub\wwwroot\, you can open the page by entering the following URL in a browser running
on the local computer: Sebagai contoh, jika nama server adalah mer_noire dan halaman web yang
disebut soleil.html disimpan di C: \ Inetpub \ wwwroot \, Anda dapat membuka halaman dengan
memasukkan URL berikut pada browser yang berjalan pada komputer lokal:

http://mer_noire/soleil.html http://mer_noire/soleil.html

Note: Remember to use forward slashes, not backslashes, in URLs. Catatan: Jangan lupa untuk
menggunakan garis miring ke depan, tidak backslashes, dalam URL.

You can also open any web page stored in any subfolder of the root folder by specifying the
subfolder in the URL. Anda juga dapat membuka halaman web yang tersimpan dalam setiap
subfolder dari folder akar dengan menentukan subfolder dalam URL. For example, suppose the
soleil.html file is stored in a subfolder called gamelan, as follows: Sebagai contoh, misalkan file
soleil.html disimpan dalam subfolder bernama gamelan, sebagai berikut:

C:\Inetpub\wwwroot\gamelan\soleil.html C: \ Inetpub \ wwwroot \ gamelan \ soleil.html

You can open this page by entering the following URL in a browser running on your computer:
Anda dapat membuka halaman ini dengan memasukkan URL berikut pada browser yang berjalan
pada komputer Anda:

http://mer_noire/gamelan/soleil.html http://mer_noire/gamelan/soleil.html
When the web server is running on your computer, you can replace the server name with
localhost . For example, the following URLs open the same page in a browser: Ketika web
server yang berjalan pada komputer Anda, Anda dapat mengganti nama server dengan
localhost. Sebagai contoh, URL berikut membuka halaman yang sama dalam browser:

http://mer_noire/gamelan/soleil.html http://mer_noire/gamelan/soleil.html

http://localhost/gamelan/soleil.html http://localhost/gamelan/soleil.html

Note: .Another expression you can use instead of the server name or localhost is 127.0.0.1 (for
example, http://127.0.0.1/gamelan/soleil.html). Catatan:. Ekspresi lain yang dapat anda gunakan
sebagai pengganti nama server atau localhost adalah 127.0.0.1 (misalnya,
http://127.0.0.1/gamelan/soleil.html).



The procedures described in this tutorial work best if your remote root folder is empty. Prosedur
yang dijelaskan dalam tutorial ini bekerja dengan baik jika anda root remote folder kosong. If your
remote site already contains files, create an empty folder in your remote site (on the server), and
use that empty folder as your remote root folder. Jika situs remote Anda sudah berisi file, membuat
folder kosong di situs jauh Anda (di server), dan menggunakan kosong folder tersebut sebagai root
remote folder Anda.

You also need to have a local site defined before you proceed. Anda juga perlu memiliki situs
lokal yang ditetapkan sebelum melanjutkan. For more information, see Part 1 of this tutorial series,
Setting up your site and project files . Untuk informasi lebih lanjut, lihat Bagian 1 dari seri tutorial
ini, Menyiapkan situs Anda dan file proyek.

Pelajari tentang situs Dreamweaver

In Dreamweaver, the term site can refer either to a website or a local storage location for the
documents that belong to a website. The latter is what you need to establish before you begin
building your website. Dalam Dreamweaver, situs istilah dapat mengacu baik pada sebuah situs
Web atau lokasi penyimpanan lokal untuk dokumen-dokumen yang berasal dari situs web. Yang
terakhir adalah apa yang Anda butuhkan untuk membangun sebelum Anda mulai membangun
website Anda. A Dreamweaver site organizes all the documents associated with your website and
lets you track and maintain links, manage files, share files, and transfer your site files to a web
server. Sebuah situs Dreamweaver mengatur semua dokumen yang berhubungan dengan website
Anda dan memungkinkan Anda melacak dan menjaga hubungan, mengatur file, berbagi file, dan
mentransfer file situs Anda ke web server. Think of your Dreamweaver site as the "bucket" that
contains all of the files and assets for your website. Pikirkan situs Dreamweaver Anda sebagai
"ember" yang berisi semua file dan aset untuk website Anda.

A typical Dreamweaver site has three parts, depending on your computing environment and the
type of website you are developing: Dreamweaver tipikal situs ini memiliki tiga bagian, tergantung
pada lingkungan komputasi anda dan jenis situs web Anda mengembangkan:
      Local folder is your working directory. Folder lokal direktori kerja Anda. Dreamweaver
       refers to this folder as your local site. Dreamweaver mengacu ke folder ini sebagai situs
       lokal. The local folder is usually a folder on your hard drive. Folder lokal biasanya folder
       pada hard drive anda.
      Remote folder is where you store your files for testing, production, collaboration, and
       publication purposes, depending on your environment. Remote folder tempat Anda
       menyimpan file Anda untuk pengujian, produksi, kolaborasi, dan publikasi tujuan,
       tergantung pada lingkungan anda. Dreamweaver refers to this folder as your remote site.
       Dreamweaver mengacu ke folder ini sebagai situs remote. The remote folder is a folder on
       the computer that's running your web server. Folder remote folder pada komputer yang
       menjalankan server web Anda. The computer running the web server is often (but not
       always) the computer that makes your site publicly available on the web. Komputer
       menjalankan server web sering (tetapi tidak selalu) komputer yang membuat situs Anda
       tersedia untuk umum di web.
      Folder for dynamic pages (Testing Server folder) is the folder where Dreamweaver
       processes dynamic pages. Folder untuk halaman dinamis (Pengujian Server folder)
       adalah folder dimana proses Dreamweaver halaman dinamis. This folder is often the same
       folder as the remote folder. Folder ini sering folder yang sama dengan folder jauh. You do
       not need to worry about this folder unless you are developing a web application. Anda
       tidak perlu khawatir tentang folder ini kecuali jika Anda sedang mengembangkan sebuah
       aplikasi web. For more information about the Testing Server folder, see Set up a testing
       server in Dreamweaver Help. Untuk informasi lebih lanjut tentang Pengujian Server folder,
       lihat Membuat server pengujian di Dreamweaver Help.

When setting up a Dreamweaver site you have two options: Saat membuat sebuah situs
Dreamweaver Anda memiliki dua pilihan:

      Use the Site Definition Wizard, which guides you through the setup process. Gunakan
       Definisi Situs Wizard, yang membimbing Anda melalui proses setup.
      Use the Site Definition Advanced settings, which let you set up local, remote, and testing
       folders individually, as necessary. Gunakan Definisi Situs P'aturan lanjutan, yang
       memungkinkan Anda mengatur lokal, remote, dan menguji folder sendiri-sendiri, seperti
       yang diperlukan.

In this tutorial you'll use the Site Definition Advanced settings to set up a local folder for your
project files. Dalam tutorial ini Anda akan menggunakan Situs Definisi P'aturan lanjutan untuk
mendirikan sebuah folder lokal untuk file proyek Anda. In a later tutorial, you'll learn how to set
up a remote folder so that you can publish your pages to a web server and make them publicly
available. Dalam tutorial berikutnya, Anda akan belajar cara mengatur folder jauh sehingga Anda
dapat mempublikasikan halaman Anda ke web server dan membuat mereka tersedia untuk umum.

For more information about Dreamweaver sites in general, see Setting up a Dreamweaver site in
Dreamweaver Help. Untuk informasi lebih lanjut tentang situs Dreamweaver pada umumnya, lihat
Dreamweaver Membuat situs di Dreamweaver Help.

Set up your project files Mengatur file proyek Anda
When you create a local site, you can place any existing assets (images or other pieces of content)
in the local site's root folder (the main folder for the site). Bila Anda membuat situs lokal, Anda
dapat menempatkan aset yang ada (gambar atau potongan lainnya konten) di situs lokal root folder
(folder utama situs). That way when you add content to your pages, the assets are there and ready
for you to use. Dengan begitu ketika Anda menambahkan konten ke halaman Anda, aset yang ada
di sana dan siap untuk digunakan.

The sample files included in the download ZIP file contain assets for the sample website you'll
build using this tutorial series. File sampel termasuk dalam download file ZIP berisi sampel aset
untuk situs web Anda akan membangun menggunakan seri tutorial ini. The first step in creating
the site is to copy the sample files to an appropriate folder on your hard drive: Langkah pertama
dalam membuat situs adalah sampel untuk menyalin file ke folder yang sesuai pada hard drive
Anda:

   1. Create a new folder called local_sites on your hard drive. Buat folder baru bernama
      local_sites pada hard drive anda. The folder can be anywhere on your computer. Folder
      dapat berada di mana saja di komputer Anda. For example: Contoh:
          o (Windows) C:\local_sites (This is where I like to keep mine. The less buried it
             is the easier it is to find later.) (Windows) C: \ local_sites (Ini adalah tempat
             aku ingin selalu saya. Semakin sedikit terkubur itu adalah mudah untuk menemukan
             kemudian.)
          o (Mac OS X) Macintosh HD/Users/your_user_name /local_sites (Mac OS X)
               Macintosh HD / Users / your_user_name / local_sites

       Note: Mac OS X includes a Sites folder in your user folder. Catatan: Mac OS X
       termasuk Situs folder dalam folder pengguna Anda. Don't use this folder as your local
       folder; the Sites folder is where you place your pages to make them publicly accessible
       when you're using your Mac as a web server. Jangan gunakan folder sebagai folder lokal;
       Situs folder di mana Anda menempatkan halaman untuk membuat mereka dapat diakses
       publik bila Anda menggunakan Mac sebagai web server.

   2. Download and unzip the check_magazine.zip sample files if you haven't done so already.
      Download dan unzip check_magazine.zip file contoh jika Anda belum melakukannya.
   3. Copy the check_magazine folder into the local_sites folder. Check_magazine salin
      folder ke folder local_sites.

The check_magazin e folder is the folder you will use as the root folder (main folder) for your
Dreamweaver site. The check_magazin e folder folder yang akan digunakan sebagai root folder
(folder utama) untuk situs Dreamweaver Anda.

Note: The local root folder of your Dreamweaver site is often the main or top-level folder for your
website. Catatan: root lokal folder situs Anda sering Dreamweaver utama atau tingkat atas folder
untuk website Anda. It usually corresponds to an identical folder on the remote site (web server).
Biasanya berhubungan dengan folder yang sama pada situs remote (web server). The root folder
also defines the first part of your website's URL following the domain name. Folder akar juga
mendefinisikan bagian pertama dari URL situs web Anda setelah nama domain. For example, if
your local root folder is called mywebsite and you have an identical root folder defined on the
remote site, the URL for your website would be something like http://www.yahoo.com/mywebsite .
Misalnya, jika Anda folder akar lokal disebut mywebsite dan Anda memiliki folder akar yang sama
yang ditetapkan di remote site, URL untuk situs web Anda akan menjadi sesuatu seperti
http://www.yahoo.com/mywebsite.

In some cases, the local root folder may not have an exact name equivalent on the remote site.
Dalam beberapa kasus, folder akar lokal mungkin tidak memiliki nama yang tepat setara di situs
remote. For example, if you own the domain name www.mywebsite.com , with a remote root
directory of public_html, your local root folder could still be called mywebsite . Sebagai contoh,
jika Anda memiliki nama domain www.mywebsite.com, dengan direktori root remote public_html,
folder akar lokal Anda masih dapat disebut mywebsite. The files in both the local and remote root
directories would be identical; only the folder names (public_html on the remote site and
mywebsite on the local computer) would be different. File dalam baik lokal dan direktori root
remote tersebut akan sama, hanya nama-nama folder (public_html di situs remote dan mywebsite
di komputer lokal) akan berbeda.

Define a local folder Menetapkan folder lokal

You must define a Dreamweaver local folder for each new website you create. Anda harus
menentukan Dreamweaver folder lokal untuk setiap situs baru yang Anda buat. The local folder is
the folder that you use to store working copies of site files on your hard drive. Folder lokal adalah
folder yang Anda gunakan untuk menyimpan salinan kerja situs file pada hard drive anda. If you
don't define a local folder, certain features in Dreamweaver cannot work properly. Jika Anda tidak
menentukan folder lokal, beberapa fitur tertentu dalam Dreamweaver tidak bisa bekerja dengan
baik.

Defining a local folder also allows you to manage your files and to transfer files to and from your
web server by using a number of file-transfer methods. Mendefinisikan folder lokal juga
memungkinkan Anda untuk mengelola file dan untuk mentransfer file ke dan dari server web Anda
dengan menggunakan sejumlah metode transfer file.

Next, define the check_magazine folder you copied into the local_sites folder as your local
folder: Selanjutnya, tentukan folder yang Anda check_magazine disalin ke folder tersebut sebagai
local_sites folder lokal Anda:

   1. Start Dreamweaver and select Site > Manage Sites. Mulai Dreamweaver dan pilih Site>
      Manage Sites. The Manage Sites dialog box appears. Situs Kelola kotak dialog muncul.
   2. Click the New button and select Site. Klik tombol New dan pilih Site. The Site Definition
      dialog box appears. Definisi Situs kotak dialog muncul.
   3. If the wizard (Basic tab) appears, click the Advanced tab and select Local Info from the
      Category list (it should be the default). Jika wizard (Basic tab) muncul, klik tab Advanced
      dan pilih Local Info dari Kategori daftar (seharusnya menjadi default).
   4. In the Site Name text box, enter Check Magazine as the name of the site. Di dalam Situs
      kotak teks Nama, masukkan Majalah Periksa sebagai nama situs.
5. In the Local Root Folder text box, specify the check_magazine folder that you copied to
   the local_sites folder in the previous section. Dalam Local Root Folder kotak teks,
   menentukan folder yang Anda check_magazine disalin ke folder dalam local_sites
   bagian sebelumnya. You can click the folder icon to browse to and select the folder, or
   enter a path in the Local Root Folder text box. Anda dapat mengklik ikon folder untuk
   menelusuri dan pilih folder, atau masukkan path di Root Folder Lokal kotak teks.
6. In the Default Images Folder text box, specify the images folder that already exists in the
   check_magazine folder. Dalam Gambar Default Folder kotak teks, menentukan gambar
   folder yang sudah ada dalam folder check_magazine. You can click the folder icon to
   browse to and select the folder, or enter a path in the Default Images Folder text box. Anda
   dapat mengklik ikon folder untuk menelusuri dan pilih folder, atau masukkan path dalam
   Gambar Default Folder kotak teks.

   The Site Definition dialog box should now look like Figure 1. Definisi Situs kotak dialog
   seharusnya sekarang terlihat seperti Gambar 1.
       Figure 1. The Site Definition dialog box at this point. Gambar 1. Definisi Situs kotak
       dialog saat ini.

       Note: The file paths might differ, depending on where you created the local_sites folder
       on your hard drive. Catatan: File path mungkin berbeda, tergantung di mana Anda
       menciptakan local_sites folder pada hard drive anda.

   7. Click OK. Klik OK. The Manage Sites dialog box appears, showing your new site. Situs
      Kelola kotak dialog muncul, menunjukkan situs baru Anda.
   8. Click Done to close the Manage Sites dialog box. Klik Selesai untuk menutup kotak dialog
      Manage Sites.

The Files panel in Dreamweaver now shows the new local root folder for your current site (see
Figure 2). File panel dalam Dreamweaver sekarang menunjukkan folder akar lokal baru untuk situs
saat ini (lihat Gambar 2). The file list in the Files panel acts as a file manager, allowing you to
copy, paste, delete, move, and open files just as you would on a desktop. Daftar file dalam panel
File bertindak sebagai manajer file, yang memungkinkan Anda untuk menyalin, menyisipkan,
menghapus, memindahkan, dan membuka file yang sama seperti Anda melakukannya pada
desktop.




Figure 2. List of files in the Files panel. Gambar 2. Daftar file dalam File panel.

For more information about how the Files panel works, see Work with files in the Files panel in
Dreamweaver Help. Untuk informasi lebih lanjut tentang cara kerja panel File, lihat Bekerja
dengan file dalam panel File di Dreamweaver Help.

You've now defined a local root folder for your site. Anda sekarang telah didefinisikan folder akar
lokal untuk situs Anda. The local root folder is the place on your local computer where you keep
the working copies of your web pages. Folder akar lokal adalah tempat pada komputer lokal Anda
di mana Anda menyimpan salinan kerja halaman web Anda. Later, if you want to publish your
pages and make them publicly available, you'll need to define a remote folder—a place on a
remote computer, running a web server that will hold published copies of your local files.
Kemudian, jika Anda ingin mempublikasikan halaman Anda dan membuat mereka tersedia untuk
umum, Anda harus menetapkan folder jauh-tempat di komputer remote, menjalankan web server
yang akan terus diterbitkan salinan file lokal Anda.



Note: For more information about Dreamweaver sites, see Setting up a Dreamweaver site in
Dreamweaver Help. Catatan: Untuk informasi lebih lanjut tentang situs Dreamweaver, lihat
Dreamweaver Membuat situs di Dreamweaver Help.

Define a remote folder Menetapkan folder jauh

Now you'll set up a remote folder so that you can publish your web pages. Sekarang Anda akan
membuat folder jauh sehingga Anda dapat mempublikasikan halaman web Anda. The remote
folder often has the same name as the local folder because your remote site is usually an exact
duplicate of your local site. Folder remote sering memiliki nama yang sama dengan folder lokal
karena situs jauh Anda biasanya merupakan duplikat yang tepat dari situs lokal Anda. That is, the
files and subfolders that you post to your remote folder are copies of the files and subfolders that
you create locally. Artinya, file dan subfolder yang Anda posting ke remote folder yang salinan file
dan subfolder yang Anda buat secara lokal.

   1. On your remote server, create an empty folder inside the web root folder for the server.
      Pada server jauh anda, ciptakan sebuah folder kosong di dalam folder akar web untuk
      server. (The web root folder will differ for everyone; many ISPs use something like
      public_html or pub_html; in my case, the web root is jmvarese.com). (Folder akar web
      akan berbeda untuk setiap orang; banyak ISP menggunakan sesuatu seperti public_html
      atau pub_html; dalam kasus saya, web akar adalah jmvarese.com).
   2. Name the new empty folder check_magazine (the same name as your local root folder).
      Nama folder kosong baru check_magazine (nama yang sama dengan folder akar lokal
      Anda).

       Note: If Dreamweaver is your only means of access to the remote server, you won't be able
       to create an empty folder on the remote server until you've completed the remote settings in
       Dreamweaver and established a connection. Catatan: Jika Dreamweaver adalah satu-
       satunya cara untuk akses ke server jauh, Anda tidak akan dapat membuat folder kosong
       pada remote server sampai anda telah menyelesaikan pengaturan remote dalam
       Dreamweaver dan mendirikan sambungan. If that's the case, you can define your host
       directory as your remote folder, and create a new remote folder after you've established a
       connection with the server. Jika itu terjadi, Anda dapat menetapkan direktori host Anda
       sebagai folder jauh, dan membuat folder jauh baru setelah Anda menetapkan suatu koneksi
       dengan server. Continue with the instructions in this tutorial until you're connected to a
       remote server. Lanjutkan dengan petunjuk dalam tutorial ini sampai Anda tersambung ke
       server jauh. After you've established a connection, you can use the Dreamweaver Files
       panel to create a new remote folder. Setelah Anda membangun sebuah koneksi, Anda dapat
       menggunakan panel File Dreamweaver untuk membuat folder jauh baru.

       When you establish a connection with a remote server, the Files panel displays all of the
       files on the remote server in Remote view (just as it displays all of the local files on your
       computer in Local view). Ketika Anda membuat sambungan dengan server jauh, tampilan
       panel Files semua file pada remote server di remote view (sama seperti menampilkan
       semua file lokal pada komputer Anda dalam tampilan Lokal). To display Remote view,
       select Remote view from the pop-up menu at the top of the Files panel, or click
       Expand/Collapse in the Files panel toolbar. Untuk menampilkan tampilan Remote, pilih
       Remote tampilan dari pop-up menu di bagian atas panel File, atau klik Expand / Collapse
       pada panel File toolbar. When you click Expand/Collapse, the Files panel displays both
       Local view and Remote view simultaneously. Ketika Anda mengklik Expand / Collapse,
       File tampilan panel tampilan baik Lokal dan Remote melihat secara bersamaan.

       To add an empty folder in Remote view, first display Remote view using one of the
       methods described earlier. Untuk menambahkan folder kosong dalam tampilan Remote,
   Remote tampilan layar pertama dengan menggunakan salah satu metode yang dijelaskan
   sebelumnya. (If you don't see your connection initially, click the Refresh button in the Files
   panel toolbar.) After you see that you're connected to your web server, right-click
   (Windows) or Control-click (Macintosh) in Remote view and select New Folder (see
   Figure 1). (Jika Anda tidak melihat awalnya koneksi Anda, klik tombol Refresh di panel
   File toolbar.) Setelah Anda melihat bahwa Anda terhubung ke server web Anda, klik-kanan
   (Windows) atau Control-klik (Macintosh) di Remote tampilan dan pilih New Folder (lihat
   Gambar 1).




   Figure 1. Create a new folder. Gambar 1. Buat folder baru.

   For more information, see Managing files and folders in Dreamweaver Help. Untuk
   informasi lebih lanjut, lihat Mengelola file dan folder di Dreamweaver Help.

3. In Dreamweaver, select Site > Manage Sites. Dalam Dreamweaver, pilih Site> Manage
   Sites.
4. In the Manage Sites dialog box, select the Check Magazine site. Pada kotak dialog Manage
   Sites, pilih situs Majalah Periksa.

   If you did not define the Check Magazine site, create a local folder for the site before you
   proceed. Jika Anda tidak menentukan Majalah Periksa situs, membuat folder lokal untuk
   situs sebelum melanjutkan. For more information, see Part 1 of this tutorial series, Setting
   up your site and project files . Untuk informasi lebih lanjut, lihat Bagian 1 dari seri tutorial
   ini, Menyiapkan situs Anda dan file proyek.

5. Click Edit. Klik Edit.
6. In the Site Definition dialog box, click the Advanced tab if the Advanced settings aren't
   showing. Di dalam Situs Definisi kotak dialog, klik tab Advanced P'aturan lanjutan jika
   tidak tampil.
7. Select Remote Info from the Category list on the left. Pilih Remote Info dari Kategori
   daftar di sebelah kiri.
8. Select an Access option. Pilih pilihan Access.
   The most common methods for connecting to a server on the Internet are FTP and SFTP;
   the most common method for connecting to a server on your intranet, or to your local
   computer if you're using that as a web server, is Local/Network. Metode yang paling umum
   untuk menghubungkan ke server di Internet adalah FTP dan SFTP; metode yang paling
   umum untuk menghubungkan ke server pada intranet Anda, atau ke komputer lokal Anda
   jika Anda menggunakan bahwa sebagai server web, adalah Lokal / Jaringan . If you aren't
   sure what to select, ask the server's system administrator. Jika Anda tidak yakin apa yang
   harus memilih, mintalah administrator sistem server.

   For more information, click Help in the dialog box. Untuk informasi lebih lanjut, klik Help
   di kotak dialog.

9. If you select FTP, use the following options: Jika Anda memilih FTP, gunakan pilihan
   berikut:
       o Enter the host name of the server (for example, ftp.yourdomain.com). Masukkan
           nama host dari server (misalnya, ftp.yourdomain.com).
       o In the Host directory text box, enter the path on the server from the FTP root folder
           to the remote site's root folder (check_magazine). Dalam direktori Host kotak teks,
           masukkan path pada server dari akar FTP folder untuk situs remote root folder
           (check_magazine).

           This is the one that often trips people up the most. Ini adalah salah satu orang yang
           sering melakukan perjalanan ke atas yang paling. The path might be
           public_html/check_magazine/ , or simply check_magazine/ , or something
           else. Mungkin jalan public_html / check_magazine /, atau hanya
           check_magazine /, atau sesuatu yang lain. It's best to get advice from your
           system administrator on this one. Lebih baik untuk mendapatkan nasihat dari
           administrator sistem Anda yang satu ini.

           In many cases, this text box should be left blank. Dalam banyak kasus, kotak teks
           ini harus dibiarkan kosong.

       o   Enter your user name and password in the appropriate text boxes. Masukkan nama
           pengguna Anda dan password pada kotak teks yang sesuai.
       o   If your server supports SFTP, select the Use Secure FTP (SFTP) option. Jika server
           Anda mendukung SFTP, pilih Use Secure FTP (SFTP) pilihan.
       o   Click Test to test your connection. Klik Test untuk menguji koneksi Anda.

   If the connection is unsuccessful, consult your system administrator. Jika sambungan gagal,
   konsultasikan dengan administrator sistem Anda.

   For more information, click Help in the dialog box. Untuk informasi lebih lanjut, klik Help
   di kotak dialog.
   10. If you selected Local/Network, click the folder icon next to the text box and browse to the
       remote site's root folder. Jika Anda memilih Lokal / Network, klik folder icon di sebelah
       kotak teks, dan browsing ke situs remote root folder.

       For more information, click Help in the dialog box. Untuk informasi lebih lanjut, klik Help
       di kotak dialog.

   11. Click OK. Klik OK.

       Dreamweaver creates a connection to the remote folder. Dreamweaver membuat
       sambungan ke folder jauh.

   12. Click Done to close the Manage Sites dialog box. Klik Selesai untuk menutup kotak dialog
       Manage Sites.

Upload your local files Upload file lokal Anda

After you set up your local and remote folders, you can upload your files from your local folder to
the web server. Setelah Anda membuat folder lokal dan remote, Anda dapat meng-upload file
Anda dari folder lokal Anda ke web server. To make your pages publicly accessible, you must
upload them even if the web server is running on your local computer. Untuk membuat halaman
Anda yang dapat diakses publik, Anda harus meng-upload mereka bahkan jika web server yang
berjalan pada komputer lokal Anda.

   1. In the Files panel (Window > Files), select the site's local root folder (check_magzine).
      Dalam File panel (Window> File), pilih situs folder akar lokal (check_magzine).

       Note: In the Files panel, the local root folder actually begins with "Site – Check Magazine"
       because that's the name of the site. Catatan: Pada File panel, folder akar lokal sebenarnya
       dimulai dengan "Site - Periksa Majalah" karena itulah nama situs. If you hover the cursor
       over that title, Dreamweaver shows you the full path to the check_magazine folder. Jika
       Anda membawa kursor atas gelar itu, Dreamweaver menampilkan path lengkap ke folder
       check_magazine.

   2. Click the Put Files (up arrow) icon in the Files panel toolbar (see Figure 2). Klik Put Files
      (up arrow) icon di panel File toolbar (lihat Gambar 2).
   Figure 2. Put files on the server. Gambar 2. Taruh file di server.

3. When Dreamweaver asks if you want to put the entire site, click OK. Ketika Dreamweaver
   bertanya apakah Anda ingin menempatkan seluruh situs, klik OK.

   Dreamweaver copies all of the files to the remote folder you defined in the previous
   section. Dreamweaver salinan semua file ke folder jauh Anda didefinisikan dalam bagian
   sebelumnya. This operation may take some time, as Dreamweaver must upload all of the
   files in the site. Operasi ini mungkin memakan waktu, seperti Dreamweaver harus
   mengupload semua file dalam situs.

   Note: Normally, you only select the local root folder and upload the entire site the first
   time you upload. Catatan: Biasanya, Anda hanya memilih folder akar lokal dan meng-
   upload seluruh situs yang pertama kali Anda upload. Afterwards, you can upload only the
   files you've changed. Setelah itu, Anda hanya dapat meng-upload file yang sudah berubah.
   Sometimes, however, if I've changed many files, or can't remember which files I've
   changed (bad habit), I'll upload the entire site again just to make sure all of the files on the
   remote server are current and in synch with my local files. Kadang-kadang, bagaimanapun,
   jika saya sudah berubah banyak file, atau tidak dapat mengingat file mana saya telah
   diubah (kebiasaan buruk), saya akan mengupload seluruh situs lagi hanya untuk
   memastikan semua file pada server remote saat ini dan selaras dengan file lokal.

4. Open your remote site in a browser to make sure all of the files uploaded correctly. Buka
   situs remote Anda dalam browser untuk memastikan semua file upload dengan benar.
(Optional) Troubleshoot the remote folder setup (Opsional) Troubleshoot folder
remote setup

A web server can be configured in many ways. Sebuah web server dapat dikonfigurasi dengan
berbagai cara. The following list provides information about some common issues you may
encounter in setting up a remote folder and how to resolve them: Daftar berikut memberikan
informasi tentang beberapa masalah umum yang mungkin Anda alami dalam mendirikan folder
jauh dan bagaimana mengatasinya:

      The Dreamweaver FTP implementation may not work properly with certain proxy servers,
       multilevel firewalls, and other forms of indirect server access. Pelaksanaan The
       Dreamweaver FTP mungkin tidak bekerja dengan baik dengan server proxy tertentu,
       bertingkat firewall, dan bentuk-bentuk lain akses server tidak langsung.

       If you encounter problems with FTP access, ask your local system administrator for help.
       Jika Anda mengalami masalah dengan akses FTP, mintalah administrator sistem lokal
       untuk bantuan.

      For the Dreamweaver FTP implementation, you must connect to the remote system's root
       folder. Untuk Dreamweaver implementasi FTP, Anda harus terhubung ke sistem remote
       root folder. (In many applications, you can connect to any remote directory, and then
       navigate through the remote file system to find the directory you want.) (Pada banyak
       aplikasi, Anda dapat tersambung ke direktori remote apapun, dan kemudian menavigasi
       melalui sistem file jarak jauh untuk menemukan direktori yang anda inginkan.)

       Be sure that you indicate the remote system's root folder as the host directory. Pastikan
       bahwa Anda menunjukkan sistem remote root folder direktori sebagai tuan rumah. If you
       have problems connecting, and you've specified the host directory using a single slash (/),
       you might need to specify a relative path from the directory you are connecting to and the
       remote root folder. Jika Anda memiliki masalah terhubung, dan Anda telah menetapkan
       direktori host menggunakan satu garis miring (/), Anda mungkin perlu menentukan path
       relatif dari direktori Anda menghubungkan ke remote root dan folder. For example, if the
       remote root folder is a higher-level directory, you may need to use ../../ to specify the host
       directory. Sebagai contoh, jika folder root remote tingkat yang lebih tinggi direktori, Anda
       mungkin perlu menggunakan ../../ untuk menentukan direktori host.

      File and folder names that contain spaces and special characters often cause problems when
       transferred to a remote site. Nama-nama file dan folder yang mengandung spasi dan
       karakter khusus yang sering menimbulkan masalah ketika ditransfer ke sebuah site remote.
      Use underscores in place of spaces, and avoid special characters in file and folder names
       wherever possible—colons (:), slashes (/), periods (.), and apostrophes (') in file or folder
       names can cause problems. Gunakan garis bawah sebagai pengganti spasi, dan menghindari
       karakter khusus dalam file dan nama folder sedapat mungkin-titik dua (:), garis miring (/),
       titik (.), Dan apostrof ( ') pada nama file atau folder dapat menimbulkan masalah. Special
       characters in file or folder names sometimes may also prevent Dreamweaver from creating
    a site map. Karakter khusus dalam file atau nama folder kadang-kadang juga dapat
    mencegah Dreamweaver dari menciptakan sebuah situs peta.
   Many servers use symbolic links (Unix), shortcuts (Windows), or aliases (Macintosh) to
    connect a folder on one part of the server's disk with another folder elsewhere. Banyak
    server menggunakan link simbolik (Unix), pintas (Windows), atau alias (Macintosh) untuk
    menghubungkan folder di salah satu bagian dari server disk dengan folder lain di tempat
    lain.
   For example, the public_html subdirectory of your home directory on the server may really
    be a link to another part of the server entirely. Sebagai contoh, public_html subdirektori
    dari direktori home Anda pada server mungkin benar-benar bisa merupakan link ke bagian
    lain dari server secara keseluruhan. In most cases, such aliases have no effect on your
    ability to connect to the appropriate folder or directory; however, if you can connect to one
    part of the server but not to another, there may be an alias discrepancy. Dalam kebanyakan
    kasus, alias seperti tidak berpengaruh pada kemampuan Anda untuk menyambung ke folder
    atau direktori yang sesuai, namun jika Anda dapat terhubung ke salah satu bagian dari
    server tetapi tidak untuk yang lain, mungkin ada perbedaan nama alias.
   If you encounter an error message such as "cannot put file," your remote folder may be out
    of space. Jika Anda menjumpai pesan kesalahan seperti "tidak bisa file," folder jauh Anda
    mungkin berada di luar ruang. For more information, look at the FTP log. Untuk informasi
    lebih lanjut, lihat log FTP.

    Note: In general, when you encounter a problem with an FTP transfer, examine the FTP
    log by selecting Site > Advanced > FTP Log. Catatan: Secara umum, ketika Anda
    menghadapi masalah dengan transfer FTP, periksa log FTP dengan memilih Situs>
    Advanced> FTP Log. For more information, see the extensive tech note that specifically
    provides FTP troubleshooting information on the Adobe website. Untuk informasi lebih
    lanjut, lihat catatan tech luas yang secara khusus menyediakan informasi pemecahan
    masalah FTP pada situs web Adobe.

				
DOCUMENT INFO
Shared By:
Categories:
Tags:
Stats:
views:1871
posted:2/10/2012
language:English
pages:46
About I'm a teacher. I want to share knowledge and get knowledge. It is important to me to know something and share it to all people. if you want to contact me please send it to docforcash@gmail.com Thank you