mengubah latar belakang

Tujuan dari Bab ini

By the end of this chapter, you will be able to: Pada akhir bab ini, anda akan dapat:

1. Change the background colour of your whole web page using Dreamweaver CS4 . Ubah warna latar belakang dari seluruh halaman web Anda menggunakan Dreamweaver CS4 .
2. Change the background colour of selected portions of your web page, like the side bar, the main content section, the header and the footer. Ubah warna latar belakang dari bagian yang dipilih dari halaman web Anda, seperti side bar, bagian isi utama, header dan footer.
3. Add a background image as the backdrop to your web page, or selected section of your web page. Tambahkan gambar latar belakang sebagai latar belakang untuk halaman web Anda, atau bagian yang dipilih dari halaman web Anda.

This chapter also introduces the Dreamweaver status bar, a useful tool that allows you to select different elements on your web page for customization. Bab ini juga memperkenalkan status bar Dreamweaver, alat yang berguna yang memungkinkan Anda untuk memilih elemen yang berbeda pada halaman web Anda untuk kustomisasi.

Basic Things to Note About Changing Colours or Adding Background Images Hal-hal dasar untuk Catatan Tentang Mengubah Warna atau Menambahkan Gambar Latar Belakang

Before we change the background colours or add background images to your web page , it is important to note the following. Sebelum kita mengubah warna latar belakang atau menambahkan gambar latar belakang ke halaman web Anda , penting untuk dicatat hal berikut ini.

• Colour Contrast is Important Kontras Warna Penting

  When you change the background colour of your web page, make sure that you choose highly contrasting colours for the foreground text and its background. Bila Anda mengubah warna latar belakang halaman web Anda, pastikan bahwa Anda memilih sangat kontras warna untuk teks latar depan dan latar belakangnya. For example, don't put red words on a blue background (or vice versa), grey words on a black background or yellow words on a white background, to name a few combinations I've seen on websites created by beginning webmasters. Misalnya, jangan meletakkan kata-kata merah di latar belakang biru (atau sebaliknya), kata-kata abu-abu pada latar belakang hitam atau kata kuning pada latar belakang putih, untuk nama beberapa kombinasi Saya telah melihat di situs-situs yang dibuat oleh webmaster awal. Such combinations make your website very hard to read, even for people with normal eyesight. kombinasi seperti membuat website anda sangat sulit untuk membaca, bahkan untuk orang dengan penglihatan normal. They create even worse accessibility problems for those who are colour-blind or have poor eyesight (including older people). Mereka membuat lebih buruk masalah aksesibilitas bagi mereka yang buta warna atau memiliki penglihatan yang buruk (termasuk orang tua).

• Make Sure That Your Background Image Does Not Interfere with Your Foreground Text Pastikan Anda Background Image Itu Tidak Mengganggu dengan latar depan Teks Anda

  If you're adding a background image, make sure that the image is such that it does not make it difficult for visitors to read your page. Jika Anda menambahkan gambar latar belakang, pastikan bahwa gambar sedemikian rupa sehingga tidak membuat sulit bagi pengunjung untuk membaca halaman Anda. This may seem obvious to you, but since I've encountered a few beginning websites with this problem, I thought I should at least mention it. Hal ini mungkin tampak jelas bagi Anda, tapi karena aku sudah mengalami beberapa situs yang dimulai dengan masalah ini, saya pikir saya harus setidaknya menyebutkannya.

The basic principle is that background colours and images are merely the backdrop to your main content. Prinsip dasarnya adalah bahwa latar belakang warna dan gambar yang semata-mata latar belakang untuk konten utama Anda. Change them all you want to make your site pleasing to the eye, but don't let them detract from the content itself. Mengubah mereka semua Anda ingin membuat situs Anda enak dipandang, tapi jangan biarkan mereka mengurangi dari konten itu sendiri. Your site's visitors are not there to gawk at your background colours or image. Teman-pengunjung situs Anda tidak ada untuk memelototi warna latar belakang atau gambar. They are there to buy your products or read your content. Mereka ada untuk membeli produk Anda atau membaca konten Anda.

How to Change the Background Colour or Add a Background Image in Dreamweaver CS4 Cara Mengubah Warna Latar Belakang atau Tambah Gambar Latar Belakang dalam Dreamweaver CS4

If you've not already done so, start up Dreamweaver CS4 and doubleclick the "index.html" file in the FILES pane. Your web page at this point should have the two column layout that we created in chapter 1 , a site logo and possibly other graphics that we added in chapter 2 and any customized font settings that you made in chapter 3 . Jika Anda belum melakukannya, start up Dreamweaver CS4 dan DoubleClick yang "index.html" file dalam pane FILES titik web Anda. Laman ini di harus memiliki tata letak dua kolom yang kita buat dalam bab 1 , sebuah logo situs dan mungkin lain grafis yang kita ditambahkan pada bab 2 dan pengaturan font kustom yang Anda buat dalam bab 3 .
If you were to look at the background colours of your web page as it currently stands, you will see that it basically has a few sets of colours. Jika Anda adalah untuk melihat warna latar belakang halaman web Anda karena saat ini berdiri, Anda akan melihat bahwa itu pada dasarnya memiliki beberapa set warna.

• The header, footer and side bar has different shades of light grey. Bar header, footer dan sisi memiliki berbagai nuansa abu-abu terang.
• The main content section has a white background. Bagian isi utama memiliki latar belakang putih.
• The background behind the two columns, header and footer has a dark shade of grey. Latar belakang belakang, dua kolom header dan footer memiliki warna abu-abu gelap. I shall refer to this as the "page background", since this is actually just the default background colour of your entire page as set by Dreamweaver's two column template. Saya akan mengacu pada ini sebagai "latar belakang halaman", karena ini sebenarnya hanya latar belakang default warna seluruh halaman Anda sebagai ditetapkan oleh kolom template Dreamweaver dua's.

Changing the Page Background Mengubah Latar Belakang Halaman

To either set the colour for the page background or to use a picture as its background image, click anywhere on your page. Untuk baik mengatur warna untuk latar belakang halaman atau untuk menggunakan gambar sebagai gambar latar belakang, klik di manapun pada halaman Anda. It doesn't matter if you click somewhere in the header, the side bar or the main content. Tidak masalah jika Anda mengklik suatu tempat di header, side bar atau isi utama.
In the PROPERTIES panel at the bottom of the Dreamweaver window, you should be able to see a button that says "Page Properties". Pada panel PROPERTI di bagian bawah jendela Dreamweaver, Anda harus dapat melihat tombol yang mengatakan "Page Properties". Click it. Klik itu.
A dialog box entitled "Page Properties" will appear. Sebuah kotak dialog berjudul "Page Properties" akan muncul. Do either one of the following (depending on whether you want to change the background colour or set a background image). Lakukan salah satu dari yang berikut (tergantung pada apakah Anda ingin mengubah warna latar belakang atau menetapkan gambar latar belakang).

• To Change the Background Colour Untuk Mengubah Warna Latar Belakang

  To change the background colour, click the square box beside the word "Background color". Untuk mengubah warna latar belakang, klik kotak persegi di samping kata "Warna latar belakang". A colour picker window will appear, allowing to change the colour. Sebuah jendela akan muncul color picker, memungkinkan untuk mengubah warna. Just click the colour you want and the colour picker window will disappear, leaving your colour change reflected in the square box. Cukup klik warna yang Anda inginkan dan jendela warna picker akan menghilang, meninggalkan perubahan warna Anda tercermin dalam kotak persegi. If, after you click the colour picker, and you decide that you really don't want to change the colour after all, hit the ESC key on your kebyoard to get out of the colour picker without making any changes. Jika, setelah Anda klik color picker, dan Anda memutuskan bahwa Anda benar-benar tidak ingin mengubah warna setelah semua, tekan tombol ESC pada kebyoard Anda untuk keluar dari pemetik warna tanpa melakukan perubahan apapun. When you're satisfied with your change, click the "OK" button to dismiss the Page Properties window. Bila Anda puas dengan perubahan Anda, klik tombol "OK" untuk mengabaikan jendela Page Properties.
  Your web page should immediately reflect the colour change. Halaman web Anda harus segera mencerminkan perubahan warna.

• To Use a Background Image Untuk Gunakan Gambar Latar Belakang

  If you want to use a background image, make sure that you have copied your image into your "images" folder as you did in chapter 2 . Jika Anda ingin menggunakan gambar latar belakang, pastikan bahwa Anda telah menyalin gambar Anda ke dalam "gambar" folder Anda seperti yang Anda lakukan dalam bab 2 . Then, in the Page Properties dialog box, click the "Browse" button beside the "Background image" field. Kemudian, dalam kotak dialog Page Properties, klik tombol "Browse" di samping Gambar latar belakang "lapangan".
  A dialog box with the title bar reading "Select Image Source" will appear. Sebuah kotak dialog dengan judul bar membaca "Sumber Pilih Gambar" akan muncul. Double-click the "images" folder in the dialog box. Klik dua kali "gambar" folder dalam kotak dialog. When the images in the folder appear, select the picture that you want to use as your background. Again, as before when you were adding pictures to your site, you can click each file to see the picture in the "Image preview" window if you cannot remember which filename goes with which picture. Ketika gambar dalam folder tersebut muncul, pilih gambar yang ingin Anda gunakan sebagai latar belakang Anda. Sekali lagi, seperti sebelumnya ketika Anda menambahkan gambar ke situs Anda, Anda dapat mengklik setiap file untuk melihat gambar dalam Gambar "jendela pratinjau" jika Anda tidak dapat ingat yang nama berkas pergi dengan yang gambar. When you've selected your image, click the "OK" button. Bila Anda telah memilih foto Anda, klik tombol "OK".
  The background image file and folder name should now appear in the "Background image" field. Gambar latar belakang nama file dan folder yang seharusnya muncul dalam kolom "Gambar latar belakang".
  Now click the down arrow for the "Repeat" field (just underneath the "Background image" field). Sekarang klik panah bawah untuk bidang "Ulangi" (tepat di bawah kolom "Gambar latar belakang"). If your image is small, and you want it repeated so that duplicate copies of the image fills the entire window (like tiles on a floor), click "repeat" in the drop down box. Jika gambar Anda kecil, dan Anda ingin diulang sehingga salinan duplikat gambar mengisi seluruh jendela (seperti ubin di lantai), klik "ulangi" pada drop down box. If the image is big, or if you simply don't want it repeated, click "no-repeat". It's also possible to make the image only tile horizontally ("repeat-x") or vertically ("repeat-y"). Jika gambar besar, atau jika Anda hanya tidak ingin mengulangi, klik "no-repeat". Ini juga memungkinkan untuk membuat gambar saja genteng horizontal ("repeat-x") atau vertikal ("repeat-y") . Choose whichever is appropriate for your particular image or your personal taste. Pilih mana yang sesuai untuk gambar tertentu atau selera pribadi Anda.
  Note that it's possible to see your web page with the changes you select without leaving that dialog box. Perhatikan bahwa hal itu mungkin untuk melihat halaman web Anda dengan perubahan yang Anda pilih tanpa meninggalkan kotak dialog tersebut. For example, if you clicked "repeat" but are not sure whether it looks good for your site, just click the "Apply" button at the bottom of the "Page Properties" dialog box. Misalnya, jika Anda klik "ulangi" tetapi tidak yakin apakah itu terlihat bagus untuk situs Anda, cukup klik "Terapkan" tombol di bagian bawah Page "kotak dialog Properties". In the background, behind your dialog box, you should be able to see your page with the changes. Di latar belakang, di belakang kotak dialog Anda, Anda harus dapat melihat halaman Anda dengan perubahan. If you're not satisfied with it, just change the repeat pattern and click "Apply" again. When you're satisfied with your choice, click the "OK" button. Jika Anda tidak puas dengan hal itu, hanya mengubah pola ulangi dan klik "Terapkan" lagi. Bila Anda puas dengan pilihan Anda, klik tombol "OK".
  (Note: if you change your mind about using a background image, and have clicked the "Apply" button earlier, clicking the "Cancel" button will not undo your change. To undo it, click the "Background image" field and use the DEL or backspace key to remove the filename and folder. That is, empty that field. You can leave the "Repeat" field as it is.) (Catatan: jika Anda berubah pikiran tentang menggunakan gambar latar belakang, dan telah mengklik tombol "Terapkan" tombol sebelumnya, mengklik tombol "Batal" tombol tidak akan membatalkan perubahan Anda. Untuk membatalkannya, klik "Gambar latar belakang" lapangan dan menggunakan DEL atau tombol backspace untuk menghapus nama file dan folder.. Artinya, kosong yang Anda lapangan. bisa meninggalkan "Ulangi" lapangan seperti itu)

Introducing the Dreamweaver CS4 Status Bar and a Smattering of HTML Memperkenalkan Dreamweaver CS4 Status Bar dan segelintir HTML

Before we can configure the background of the rest of the page, namely the header, footer, side bar (left column) and the main content (right column), you will need to familiarize yourself with the Dreamweaver status bar. Sebelum kita dapat mengkonfigurasi latar belakang dari sisa halaman, yaitu header, footer, side bar (kolom kiri) dan isi utama (kolom kanan), anda perlu untuk membiasakan diri dengan status bar Dreamweaver.
To help you understand the status bar, first put the text cursor somewhere in one of your paragraphs in your side bar. That is, click somewhere in the left column, such as in the paragraph "The background color on this div will only show..." Untuk membantu Anda memahami status bar, pertama kali kursor teks di suatu tempat di salah satu paragraf anda di side bar Anda. Artinya, klik di suatu tempat di kolom kiri, seperti dalam ayat "Warna latar belakang pada div ini hanya akan ditampilkan. .. " (etc). (Dll).
Now look for the status bar, which is located near the bottom of the Dreamweaver window, just between your web page and the PROPERTIES panel. Sekarang mencari status bar, yang terletak di dekat bagian bawah jendela Dreamweaver, hanya di antara halaman web Anda dan panel SIFAT. It looks something like the following picture, although the exact words displayed may differ depending on which portion of your page you clicked and how big your Dreamweaver window or monitor is. Ini terlihat seperti gambar berikut, meskipun kata-kata tepat yang ditampilkan mungkin berbeda tergantung pada bagian halaman Anda diklik dan seberapa besar jendela Dreamweaver atau monitor.
In spite of its innocuous appearance, the status bar is important in Dreamweaver if you want to customize your website's appearance. It allows you to select entire blocks in your web page so that you can change things like colours, fonts, etc, of whole sections of your page in one go. Walaupun penampilan tidak berbahaya tersebut, status bar penting dalam Dreamweaver jika Anda ingin mengubah's website penampilan Anda. Hal ini memungkinkan Anda untuk memilih blok seluruh di halaman web Anda sehingga Anda dapat mengubah hal-hal seperti warna, font, dll, dari seluruh bagian dari halaman Anda dalam satu pergi. Notice that the left side of the status bar contains apparently gibberish text, enclosed in angle brackets, such as " <div#container> <div#sidebar1> <p> ". Perhatikan bahwa sisi kiri dari status bar tampaknya berisi teks omong kosong, ditutupi dalam kurung sudut, seperti " <div#container> <div#sidebar1> <p> ". Again, the exact words appearing here may be different depending on where you clicked on your page and how big your Dreamweaver window is. Sekali lagi, kata-kata yang tepat muncul di sini mungkin berbeda tergantung di mana Anda mengklik pada halaman Anda dan seberapa besar jendela Dreamweaver.
For ease of reference, I shall refer to these words enclosed in angle brackets as "tags" from this point forward. Untuk kemudahan referensi, saya akan mengacu pada kata-kata yang ditutupi dalam kurung sudut sebagai "tag" dari titik ini ke depan. For example, " <p> " is one tag, " <div#sidebar1> " is another tag and " <div#container> " is yet another tag. Misalnya, " <p> "adalah salah satu tag," <div#sidebar1> "tag lain dan" <div#container> "belum tag lain.
Contrary to what you may think, each of these tags in the status bar is actually a clickable button. Clicking each tag will select a different block enclosing the spot where your text cursor is in. Try it. Bertentangan dengan apa yang Anda mungkin berpikir, masing-masing tag di status bar sebenarnya adalah tombol diklik. Mengklik setiap tag akan memilih blok yang berbeda melampirkan tempat di mana kursor teks Anda masuk Cobalah.
For example, if the left side of your status bar looks exactly like mine, click the " <p> " tag. Sebagai contoh, jika sisi kiri dari status bar Anda terlihat persis seperti saya, klik " <p> "tag. Notice how the entire paragraph is selected when you do this. Perhatikan bagaimana seluruh ayat yang dipilih ketika Anda melakukan hal ini. This is because " <p> " refers to a " p aragraph" in the underlying code of your web page. Hal ini karena " <p> "mengacu pada" aragraph p "dalam kode yang mendasari halaman web Anda. (This underlying code, by the way, is called "HTML" in webmaster jargon.) Observe also that the " <p> " tag on the status bar is now enclosed in a white box to show that it's currently selected (because you clicked it). (Ini kode yang mendasari, by the way, disebut "HTML" dalam jargon webmaster.) Perhatikan juga bahwa " <p> "tag pada status bar sekarang tertutup dalam kotak putih untuk menunjukkan bahwa saat ini dipilih (karena Anda diklik itu).
Now click the " <div#sidebar1> " tag. Sekarang klik " <div#sidebar1> "tag. This time, notice how the entire left column is selected. Finally, click the " <div#container> " tag. Kali ini, perhatikan bagaimana seluruh kolom kiri dipilih,. Akhirnya klik " <div#container> "tag. Both the columns, the header and the footer should now be selected. Kedua kolom, header dan footer sekarang harus dipilih.
Each of these tags indicates a block of items on the screen. Masing-masing tag menunjukkan blok item pada layar. The " <p> " block is designed to hold a single paragraph of text, hence its name. The " <p> "blok dirancang untuk memegang satu paragraf teks, maka namanya. This paragraph block lives in a bigger block, the side bar block. Blok paragraf ini hidup dalam sebuah blok yang lebih besar, blok side bar. The side bar block, however, does not use a " <p> " tag, since a " <p> " tag is only used for a paragraph of text. Blok side bar, bagaimanapun, tidak menggunakan " <p> "tag, sejak" <p> "tag hanya digunakan untuk sebuah paragraf teks. Your side bar can contain words, pictures, lists of items, and so on. side bar Anda dapat berisi kata-kata, gambar, daftar item, dan sebagainya. As such, a different tag is needed, namely a " <div> " tag. Dengan demikian, tag yang berbeda diperlukan, yaitu " <div> "tag. The block managed by a " <div> " tag is often called a DIV block (naturally). And as you found out, this side bar DIV block is itself enclosed in an even bigger DIV block that Dreamweaver uses to contain all the columns, header and footer on your page. Blok dikelola oleh " <div> tag "sering disebut blok DIV (alami) keluar. Dan ketika anda ditemukan, side bar DIV blok itu sendiri tertutup dalam sebuah DIV blok lebih besar bahkan yang menggunakan Dreamweaver mengandung semua kolom, header dan footer pada halaman Anda.
To reinforce what I've just said, put your text cursor in a different section of your page, such as the header (the top horizontal bar where you placed the name of your website in chapter one). Untuk memperkuat apa yang saya hanya berkata, menempatkan kursor teks Anda di bagian halaman yang berbeda, seperti header (bar horizontal atas di mana Anda menempatkan nama situs Anda dalam bab satu). Once again click the different tags. Sekali lagi klik tag yang berbeda. Notice that your company name itself is enclosed in a different type of tag, the " <h1> " tag. Perhatikan bahwa nama perusahaan Anda sendiri ditutupi dalam berbagai jenis tag, yang " <h1> tag ". This is in turn enclosed inside a DIV block (" <div#header> " this time). Hal ini pada gilirannya tertutup di dalam blok DIV (" <div#header> "kali ini). And as all things on your Dreamweaver web page is, this is enclosed in an even larger DIV block. Dan segala sesuatu pada halaman web Anda Dreamweaver, ini adalah tertutup dalam sebuah blok DIV lebih besar.
Feel free to put your cursor into different parts of your page, click the different tags on the status bar, and see which sections are selected. Jangan ragu untuk menempatkan kursor Anda ke bagian halaman yang berbeda, klik tag berbeda pada status bar, dan melihat bagian yang dipilih. Don't worry. Jangan khawatir. You don't have to memorize anything you see. Anda tidak harus menghafal apa pun yang Anda lihat. The main point of this exercise is to provide you with some background so that you'll have a greater understanding of what you will be doing later in the practical "how-to" section. Titik utama dari latihan ini adalah untuk menyediakan anda dengan beberapa latar belakang sehingga Anda akan memiliki pemahaman yang lebih besar dari apa yang Anda akan lakukan kemudian dalam praktis "bagaimana-untuk".
(Okay, it's true. I'm also underhandedly sneaking in a bit of HTML knowledge, namely the tags and DIV blocks. Although Dreamweaver lets you design a website completely without knowing anything about things like HTML or CSS , a little knowledge tends to go a long way to help you understand why things work in a certain manner. Otherwise web design will end up being like voodoo.) (Oke, itu benar. Saya juga underhandedly menyelinap dalam sedikit pengetahuan HTML, yaitu blok DIV tag dan sejenisnya. Meskipun Dreamweaver memungkinkan Anda desain website lengkap tanpa mengetahui apa-apa tentang hal-hal HTML atau CSS , sedikit pengetahuan cenderung untuk pergi jauh untuk membantu Anda memahami mengapa sesuatu bekerja dengan cara tertentu.. web Jika desain akan berakhir menjadi seperti voodoo)

Changing the Background of the Header, Footer, Side Bar and the Right Column (Main Content) Mengubah Latar Belakang Header, Footer, Bar Side dan Kolom Kanan (Konten Utama)

Now that you have figured out the status bar, and how to select an entire column or section, we will be able to configure the background of that section. Sekarang bahwa Anda telah tahu status bar, dan bagaimana untuk memilih seluruh kolom atau bagian ini, kita akan dapat mengkonfigurasi latar belakang bagian tersebut.

• Preliminary: Select the Block in Question Awal: Pilih Blok Pertanyaan

  To start, put your cursor somewhere in the column or section that you want to customize. Untuk memulai, tempatkan kursor Anda di suatu tempat di kolom atau bagian yang ingin Anda menyesuaikan. Look at your status bar, and click one of the following items on the bar (depending on which column or section you're in). Lihat di bar status Anda, dan klik salah satu item berikut pada bar (tergantung pada kolom atau bagian Anda berada dalam).
  
  • To change the background of the header, click the <div#header> word in the status bar. Untuk mengubah latar belakang header, klik <div#header> kata dalam status bar.
  • To customize the background of the left column, or side bar, click the <div#sidebar1> word in the status bar. Untuk menyesuaikan latar belakang dari kolom kiri, atau side bar, klik <div#sidebar1> kata dalam status bar.
  • To configure the background of the right column, or main content section, click the <div#mainContent> word in the status bar. Untuk mengkonfigurasi latar belakang kolom kanan, atau bagian isi utama, klik <div#mainContent> kata dalam status bar.
  Or, to put it another way, since you now know the technical lingo, select the DIV block that you want to customize. Atau, dengan kata lain, karena Anda sekarang tahu istilah teknis, pilih blok DIV yang ingin Anda menyesuaikan.

• Procedure for the Header, Footer and Side Bar (Left Column) Prosedur untuk Footer, Header dan Side Bar (Kolom Kiri)

  The procedure for changing the background for the header, footer and side bar, but NOT the right column/main content section, is identical. Prosedur untuk mengubah latar belakang untuk footer, header dan side bar, tapi BUKAN kolom kanan / bagian konten utama, adalah identik. Open the CSS STYLES pane on the right side of Dreamweaver. Buka panel GAYA CSS di sisi kanan dari Dreamweaver. (See the previous chapter if you've forgotten how to do so.) (Lihat bab sebelumnya jika Anda telah lupa bagaimana untuk melakukannya.)
  Double-click the "background" item in the CSS STYLES panel. Klik dua kali "latar belakang" item dalam panel GAYA CSS. (You may have to scroll down the box to find it.) The "CSS Rule Definition" dialog box that you met in the last chapter will appear. (Anda mungkin harus scroll ke bawah kotak untuk menemukannya.) The "CSS Rule Definition" kotak dialog yang Anda temui di bab terakhir akan muncul.
  You should now see the "Background-color", "Background-image" and "Background-repeat" lines that you met in the Page Properties dialog box in the section above . Anda sekarang harus melihat "latar belakang warna", "Background-image" dan "Background-repeat" baris yang Anda temui di kotak dialog Properties Page di bagian atas . (The dialog box is not exactly the same, but those fields work the same way.) Configure them as you wish. If you have skipped that section previously because you didn't want to change the page background, go back and read just the parts "To Change the Background Colour" and "To Use a Background Image". (Kotak dialog tidak persis sama, tetapi mereka lapangan kerja dengan cara yang sama.) Konfigurasi mereka yang Anda inginkan. Jika Anda telah melewatkan bagian yang sebelumnya karena Anda tidak ingin mengubah latar belakang halaman, kembali dan membaca hanya bagian "Untuk Mengubah Warna Latar Belakang" dan "Untuk Gunakan Gambar Latar".

• Procedure for the Main Content (Right Column) Prosedur untuk Konten Utama (Kolom Kanan)

  You cannot customize the right column the same way you did the other DIV blocks. The reason is that the header, footer and side bars all have an existing background already set for their blocks, and you were merely changing those. Anda tidak dapat menyesuaikan kolom kanan dengan cara yang sama Anda melakukan blok lainnya DIV. Alasannya adalah bahwa, footer dan sisi bar header semua memiliki latar belakang yang ada sudah ditetapkan untuk blok mereka, dan Anda hanya mengubah mereka. The main content DIV block however does not have any customized colour settings. Isi blok DIV utama namun tidak memiliki pengaturan warna disesuaikan. The colours you see (the black words on white background) were inherited from its outer " <div#container> " block. Warna yang Anda lihat (kata-kata hitam pada latar belakang putih) yang diwarisi dari luarnya " <div#container> blok ". As such, we will have to add the necessary background properties (whether a colour or a background image) from scratch. Dengan demikian, kita harus menambahkan properti latar belakang yang diperlukan (baik warna atau gambar latar belakang) dari awal.
  With the " <div#mainContent> " button on the status bar selected, expand the CSS STYLES panel on the right side of Dreamweaver if you have not already expanded it. Dengan " <div#mainContent> tombol "pada status bar yang dipilih, memperluas panel GAYA CSS di sisi kanan Dreamweaver jika Anda belum sudah mengembangkannya.
  Look for the line that says 'Properties for ".twoColLiqLtHdr #mainContent"'. Cari baris yang mengatakan 'Properties untuk ". TwoColLiqLtHdr # mainContent"'. Move your mouse to the separator line immediately above those words and drag it upwards until you can see the "Add property" blue link below. Gerakkan mouse anda ke garis pemisah tepat di kata-kata dan tarik ke atas sampai Anda dapat melihat "Tambahkan properti" link biru di bawah ini. Click the link. Klik link tersebut. In its place, a drop down box should appear. Sebagai gantinya, drop-down box akan muncul. (If it doesn't, just click it again.) Click the drop down arrow key beside it to open the entire drop down list box. If you want to set a background colour, select the item "background-color". (Jika tidak, klik saja lagi.) Klik drop-down tombol panah di sampingnya untuk membuka seluruh drop down list box. Jika Anda ingin mengatur warna latar belakang, pilih item "background-color". If you want to set a image for the backdrop, select the "background-image" item. Jika Anda ingin mengatur foto untuk latar belakang, pilih "background-image" item.
  If you selected the background colour item, a square box will appear beside the new property that you created. Jika Anda memilih item warna latar belakang, sebuah kotak persegi akan muncul di samping properti baru yang Anda buat. Click it and set the colour from the colour picker as usual. Klik dan mengatur warna dari color picker seperti biasa.
  If you selected the background image item, a blank box will appear. Jika Anda memilih item gambar latar belakang, sebuah kotak kosong akan muncul. Beside the box, you will see two buttons. Selain kotak, Anda akan melihat dua tombol. Click the button that looks like a folder. Klik tombol yang tampak seperti folder. If you're not sure which button it is, move your mouse over each button (without clicking) and wait until a tooltip for that button appears. Click the button that has a tooltip of "Browse". Jika Anda tidak yakin tombol itu, pindahkan mouse Anda ke setiap tombol (tanpa mengklik) dan tunggu sampai tooltip untuk tombol yang muncul. Klik tombol yang memiliki tooltip dari "Browse". The "Select Image Source" dialog box will appear, allowing you to choose the image for the background. The "Pilih Gambar Sumber" kotak dialog akan muncul, mengijinkan Anda untuk memilih gambar untuk latar belakang. To control whether that background image is repeated (as you did earlier), click the "Add property" link again and select the "background-repeat" item from the drop down box. Untuk mengontrol apakah gambar latar belakang diulang (seperti yang Anda lakukan sebelumnya), klik "Tambahkan properti" link lagi dan pilih "background-repeat" item dari drop down box. Then click the down arrow to open the list of your options and select the appropriate one. Kemudian klik tanda panah bawah untuk membuka daftar pilihan Anda dan pilih satu yang sesuai. (Note: if you don't know what this "repeat" thing means, it means you skipped the section above . Please revisit that section for more information.) (Catatan: jika Anda tidak tahu apa ini "ulangi" hal berarti, itu berarti Anda melewatkan bagian atas .. Harap bahwa kembali bagian lebih untuk informasi)

Saving and Publishing Your Web Page Menyimpan dan Penerbitan Halaman Web Anda

Once you've finished customizing the background of your web page, save everything by using "File | Save All" (that is, click the "File" menu followed by the "Save All" item in the menu that appears). Setelah selesai mengubah latar belakang halaman web Anda, menyimpan segala sesuatu dengan menggunakan "File | Save All" (yaitu, klik menu "File" diikuti oleh "Simpan Semua" item dalam menu yang muncul). Then publish the page as in the previous chapters, and check it in your browser. Kemudian mempublikasikan halaman seperti pada bab-bab sebelumnya, dan periksa di browser Anda.
Congratulations. Selamat. You have now mastered most of the techniques commonly needed by web designers to customize the appearance of a web page -- namely, customizing the text, adding pictures, and designing the background. Anda sekarang telah menguasai sebagian besar teknik umum yang dibutuhkan oleh web designer untuk menyesuaikan tampilan dari suatu halaman web - yaitu, menyesuaikan teks, menambahkan gambar, dan merancang latar belakang.
In the next chapter , we will deal with one of the most important aspects of web page design: adding and customizing links. Dalam bab berikutnya , kita akan berurusan dengan salah satu aspek yang paling penting halaman web desain: menambahkan dan mengubah link. You will learn not only how to make text links, but also make your images into links that either point to other web pages or to larger version of those images (such as commonly found in photo gallery websites). Anda akan belajar tidak saja bagaimana membuat link teks, tetapi juga membuat gambar Anda ke link yang baik mengarah ke halaman web lain atau versi yang lebih besar dari gambar-gambar (seperti umum ditemukan di situs galeri foto).