Tujuan dari Bab ini
By the end of this chapter, you will have: Pada akhir bab ini, Anda akan memiliki:- made your logo into a clickable link that leads to your main page; membuat logo Anda ke sebuah link yang dapat diklik mengarah ke halaman utama Anda;
- learnt how to make any image into a clickable link; belajar bagaimana membuat setiap gambar menjadi sebuah link diklik;
- learnt the basic principles behind a photo gallery or image gallery website; and mempelajari prinsip-prinsip dasar di balik situs galeri foto atau galeri foto, dan
- created one or more text links to other pages on your website. menciptakan satu atau lebih teks link ke halaman lain di situs Web Anda.
Introduction to URLs: Relative and Absolute Links Pengantar URL: Link Relatif dan Mutlak
Technically speaking, the web address of any page on your website is a type of "URL", or "Uniform Resource Locator". Web addresses are not the only types of URLs around. Secara teknis, alamat web dari halaman manapun di situs Web Anda adalah jenis "URL", atau "Uniform Resource Locator" URL Web. Alamat tidak hanya jenis sekitar. For example, while "http ://www.example.com/ " is the URL of a website, indicating that a web page can be accessed by a browser using a communications procedure (or "protocol") known as "HTTP", an address like " ftp ://example.com/example.zip " is also a URL. Sebagai contoh, sementara " http ://www.example.com/ "adalah URL dari sebuah situs web, yang menunjukkan bahwa halaman web dapat diakses dengan browser menggunakan prosedur komunikasi (atau" protocol ") yang dikenal sebagai" HTTP ", alamat seperti " ftp ://example.com/example.zip "juga URL. The latter gives the address of a file, "example.zip", that can be accessed by a browser or some other program using another protocol known as "FTP". Yang terakhir memberikan alamat dari sebuah file, "example.zip", yang dapat diakses oleh browser atau program lain menggunakan protokol lain yang dikenal sebagai "FTP". On a web page, URLs can be absolute or relative. Pada halaman web, URL bisa absolut atau relatif.
An absolute link specifies the full address of a particular page or file, to the very last detail. Link mutlak menentukan alamat lengkap dari suatu halaman tertentu atau file, ke detail yang terakhir. For example, the URL
http://www.example.com/features.html is an absolute URL pointing to the page "features.html" on the www.example.com website. Sebagai contoh, URL http://www.example.com/features.html adalah URL mutlak menunjuk ke "halaman" features.html di situs www.example.com. It's the equivalent of giving your friend your full home address in the real world, that is, not just the name of the street and house number, but also the city, state and country. Ini setara dengan memberikan teman Anda rumah penuh alamat di dunia nyata, yaitu, bukan hanya nama dan rumah nomor jalan, tetapi juga kota, negara bagian dan negara. On web pages, it's also possible to use something known as a relative URL. Pada halaman web, itu juga mungkin untuk menggunakan sesuatu yang dikenal sebagai URL relatif. For example, instead of linking to that "features.html" page mentioned above using an absolute URL, it is also possible to link to it using just the short form
features.html . Sebagai contoh, daripada menghubungkan ke features.html "halaman" yang disebutkan di atas menggunakan URL absolut, juga memungkinkan untuk link ke menggunakan hanya bentuk pendek features.html . This will only work if the page doing the linking is also on the same website and in the same folder (directory) as "features.html". Ini hanya akan bekerja jika halaman melakukan menghubungkan juga pada website yang sama dan dalam folder yang sama (direktori) sebagai "features.html". In the real world, this is like telling someone your home address by merely saying the street name and house number, but omitting other details like the country, state and city. Dalam dunia nyata, ini seperti memberitahu alamat rumah seseorang hanya dengan menyebutkan nama jalan dan nomor rumah, tapi menghilangkan rincian lain seperti negara, negara dan kota. Your friend will automatically assume that your home is in the same country, state and city that you are both in. Teman Anda secara otomatis akan menganggap bahwa rumah Anda adalah di negara bagian, negara yang sama dan kota yang Anda berdua masuk To make sure that this is clear, let's use an example. Untuk memastikan bahwa ini adalah jelas, mari kita gunakan contoh. Let's say that you have a web page at
http://www.example.com/products/index.html . Katakanlah bahwa Anda memiliki halaman web di http://www.example.com/products/index.html . On that page, you link to another page with a relative URL of " prices.html ". Pada halaman tersebut, Anda link ke halaman lain dengan URL relatif " prices.html ". Where does the browser look for that "prices.html" file? Mana browser mencari file "prices.html"? The browser first looks at the URL of the current page. Browser pertama terlihat di URL dari halaman saat ini. In this case, it's "http://www.example.com/products/index.html". Dalam hal ini, itu "http://www.example.com/products/index.html". It then snips off the filename of the current page ("index.html") to leave behind "http://www.example.com/products/". Kemudian snips dari nama file dari halaman saat ini ("index.html") untuk meninggalkan "http://www.example.com/products/". Then it appends the relative URL, resulting in a new URL "http://www.example.com/products/prices.html". Kemudian menambahkan URL relatif, sehingga menghasilkan "http://www.example.com/products/prices.html baru URL". How to Make Your Logo into a Clickable Link to Your Home Page Cara Membuat dengan Anda ke Link diklik untuk Anda Home Page
If you look at thesitewizard.com's logo on the top left corner of this page, and hover your mouse cursor over it, you will notice that it is actually a clickable link pointing to my home page. Jika anda melihat logo 'thesitewizard.com di sudut kiri atas halaman ini, dan arahkan kursor mouse anda ke atas, Anda akan melihat bahwa sebenarnya dapat diklik link yang menunjuk ke halaman rumah saya. Although nobody has dictated that all site logos be clickable links to the home page, so many websites have done this that it is practically a convention today. Meskipun tidak ada yang mendikte bahwa semua logo situs diklik akan link ke halaman rumah, banyak situs sehingga melakukan hal ini bahwa itu adalah praktis hari ini konvensi. As such, it is good that your site also support this feature, since users have come to expect that they can quickly get to a website's home page by clicking the logo. Dengan demikian, adalah baik bahwa situs Anda juga mendukung fitur ini, karena pengguna telah datang untuk mengharapkan bahwa mereka dapat dengan cepat sampai ke halaman home website dengan mengklik logo. Following the established convention of the majority of websites allow you to create a more usable website without much effort, since your visitors will automatically know how to move around and use your site efficiently. Setelah konvensi mapan mayoritas situs web memungkinkan Anda untuk membuat website yang dapat digunakan lebih tanpa banyak usaha, karena pengunjung Anda secara otomatis akan tahu bagaimana untuk bergerak dan menggunakan situs Anda secara efisien.- Start up Dreamweaver and load your "index.html" page. Start up Dreamweaver dan load "index.html" halaman.
- Click your site's logo on the page. Klik logo situs Anda pada halaman. This will select it and load the PROPERTIES panel at the bottom of the Dreamweaver window with the image properties. Ini akan pilih dan memuat panel PROPERTI di bagian bawah jendela Dreamweaver dengan sifat gambar.
- Look at the "Link" field in that panel. Lihatlah kolom "Link" pada panel itu. This is where you will enter the URL to your home page. Ini adalah di mana Anda akan memasukkan URL ke halaman rumah Anda. If your website has an address like "http://www.example.com/", enter "http://www.example.com/" (without the quotation marks) into that field. Jika situs Web Anda memiliki alamat seperti "http://www.example.com/", masukkan "http://www.example.com/" (tanpa tanda kutip) ke dalam bidang tersebut. Alternatively, it's also possible to enter a relative URL like "index.html" (without the quotes) there as well. Atau, juga memungkinkan untuk memasukkan URL relatif seperti "index.html" (tanpa tanda kutip) ada juga.
If you can't decide whether to use the absolute URL for your website ("http://www.example.com/") or just a relative URL ("index.html"), I suggest that you put the full URL to your domain here (for reasons mentioned in another article " Should Your URLs Point to the Directory or the Index Page? "). Jika Anda tidak dapat memutuskan apakah akan menggunakan URL yang mutlak untuk situs web Anda ("http://www.example.com/") atau hanya sebuah URL relatif ("index.html"), saya sarankan anda menaruh URL lengkap ke domain Anda di sini (untuk alasan yang disebutkan dalam artikel lain " Haruskah URL Anda Arahkan ke Directory atau Page Index? "). - Enter "0" (zero, without the quotes) into the "Border" field in the PROPERTIES panel. Masukkan "0" (nol, tanpa tanda kutip) ke kolom "Border" pada panel SIFAT. If you don't do this, certain browsers may show the image with a blue border to indicate that the image is a clickable link. Jika Anda tidak melakukan ini, browser tertentu dapat menunjukkan gambar dengan garis tepi biru untuk menunjukkan bahwa gambar adalah link diklik. The border attribute of "0" makes the border have a size of zero, effectively removing it. Atribut perbatasan dari "0" membuat perbatasan memiliki ukuran nol, efektif menghilangkan itu.
- Save your page and publish it. Simpan halaman Anda dan menerbitkannya. Check out your web page with a browser, and you will find that your mouse cursor changes to a pointing finger when you hover it over your logo, indicating that it's a link. Periksa halaman web Anda dengan browser, dan Anda akan menemukan bahwa perubahan Anda kursor mouse ke jari menunjuk ketika Anda membawa di atas logo Anda, menunjukkan bahwa itu link. Clicking it, however, won't do you much good since you're already at your home page. Mengklik itu, bagaimanapun, tidak akan banyak gunanya bagimu karena Anda sudah di halaman rumah Anda. (Or rather, clicking it will cause your home page to load. Since you're already at your home page, you won't notice anything different.) (Atau lebih tepatnya, mengklik akan menyebabkan halaman rumah Anda untuk me-load.. Karena anda sudah di halaman rumah Anda, akan Anda tidak melihat sesuatu yang berbeda)
Making Other Images into Clickable Links Membuat Gambar lain ke clickable Link
The same method given above can be used to make other images on your page into clickable links. Metode yang sama diberikan di atas dapat digunakan untuk membuat gambar lainnya pada halaman Anda ke link diklik. For example, if your web page has a photo of a product you're selling, and you want your visitors to be able to click that photo and be brought to your order form, use the above procedure to add a link to that image. Misalnya, jika halaman web Anda memiliki foto dari produk yang Anda jual, dan Anda ingin pengunjung Anda untuk bisa klik foto itu dan dibawa ke formulir pesanan Anda, gunakan prosedur di atas untuk menambahkan link ke gambar itu. In this case, however, instead of putting a link to your home page, put "order.html" in the "Link" field. Dalam kasus ini, bagaimanapun, bukan menempatkan link ke halaman rumah Anda, menempatkan "order.html" di Link "lapangan".(At this point, the page "order.html" does not exist. However, it's okay to put the link there now. You can always create the order page later. Of course if you click the link at this time, you'll just get a "404 File Not Found" error in your browser. That's normal. When you create the "order.html" later and upload the page, the error will disappear.) (Pada titik ini, halaman "order.html" tidak ada.. Namun, tidak apa-apa dengan menempatkan link ada sekarang Anda selalu dapat membuat halaman agar kelak. Tentu saja jika Anda mengklik link saat ini, Anda akan hanya mendapatkan "404 File Tidak Ditemukan" kesalahan pada browser Anda.. Itu biasa Ketika Anda menciptakan "order.html" kemudian dan upload halaman, kesalahan akan menghilang.)
How to Make Clickable Images that When Clicked Opens Up a Larger Image Bagaimana Membuat Foto clickable bahwa Ketika Diklik Membuka Up Gambar lebih besar
I'm sure you've seen those photo galleries on the Internet that present you a thumbnail picture (small version of an image), that when clicked, loads a larger image in your web browser. Saya yakin Anda telah melihat galeri foto yang di Internet yang sekarang Anda gambar thumbnail (versi kecil dari suatu gambar), yang ketika diklik, akan menampilkan gambar yang lebih besar pada browser web Anda. You now have sufficient technical knowledge, where Dreamweaver is concerned, to accomplish that. Anda sekarang memiliki pengetahuan teknis yang memadai, di mana Dreamweaver yang bersangkutan, untuk mencapai itu.The trick here is to have two versions of the picture: a small (thumbnail) and large version. trik di sini adalah memiliki dua versi gambar: a (thumbnail) kecil dan versi besar. The large version is your original photo in its full glory. Versi besar foto asli Anda dalam kemuliaan penuh.
To get the thumbnail version, simply use a photo or image editor to resize the original image to smaller dimensions, and save it under a separate filename, so that you now have two files: the original, unchanged large photo and the small resized image. Untuk mendapatkan versi thumbnail, cukup menggunakan editor foto atau gambar untuk mengubah ukuran gambar asli dengan dimensi yang lebih kecil, dan simpan di bawah nama file terpisah, sehingga Anda sekarang memiliki dua file: tidak berubah, foto besar asli dan gambar kecil. Using a photo editor to accomplish this is outside the scope of this Dreamweaver CS4 tutorial (although I wrote about the procedure in another guide ). Menggunakan editor foto untuk melakukannya adalah di luar lingkup ini CS4 Dreamweaver tutorial (walaupun saya menulis tentang prosedur dalam panduan yang lain ).
Once you have both versions, do the following: Setelah Anda memiliki kedua versi, lakukan hal berikut:
- Copy both files into your images folder as you did in chapter 2 . Don't miss this step or Dreamweaver will not upload the pictures to your site. Copy kedua file ke folder foto Anda seperti yang Anda lakukan dalam Bab 2 . Jangan lewatkan langkah ini atau Dreamweaver tidak akan meng-upload gambar ke situs Anda.
- Insert your small thumbnail version of the image into your existing web page (see chapter 2 if you've forgotten how to). Masukkan thumbnail Anda kecil versi gambar ke dalam halaman web yang ada Anda (lihat Bab 2 jika Anda telah lupa bagaimana).
- Click the picture, and locate the "Link" field in the PROPERTIES panel below. Klik gambar, dan cari "Link" lapangan di panel SIFAT di bawah ini. Click the "Browse for File" button (which looks like a folder icon) beside the field. Klik tombol "Browse File" tombol (yang terlihat seperti icon folder) di samping lapangan. A dialog box appears. Sebuah kotak dialog muncul. Double-click the images folder and locate the bigger image. Klik dua kali folder foto dan cari gambar yang lebih besar. Select it and click the "OK" button. Pilih itu dan klik tombol "OK". Dreamweaver CS4 will insert a relative URL to the image into your "Link" field. Dreamweaver CS4 akan memasukkan URL relatif ke gambar ke bidang Anda "Link".
Notice that this relative URL is of the form "images/your-big-file-name.jpg" where "your-big-file-name.jpg" is the name of your large file. Perhatikan bahwa URL relatif ini adalah "bentuk" gambar-/ anda besar-file-name.jpg mana "anda-besar-file-name.jpg" adalah nama file besar Anda. In particular, note that the slash separating the "images" folder and the filename is a forward slash "/". Domains, folders and filenames are always separated by forward slashes ("/") on web pages, even if you are using Windows (where the convention is the backslash character "\"). Secara khusus, perhatikan bahwa memangkas memisahkan "images" folder dan nama file garis miring "/". Domain, folder dan nama file selalu dipisahkan oleh garis miring ke depan ("/") pada halaman web, bahkan jika Anda menggunakan Windows (mana konvensi ini adalah karakter backslash "\").
How to Make a Text Link on Your Web Page Cara Membuat Link Teks pada Halaman Web Anda
In the main content section (right column) of your web page, look for a piece of text that you want to make into a link. For example, if you have a portion of your web page that talks about one of your products, say, "Widget XYZ", you may want to make the words "Widget XYZ" into a clickable link that points to another page "details.html" on your site. Pada bagian isi utama (kolom kanan) dari halaman web Anda, mencari sepotong teks yang ingin Anda buat menjadi link. Sebagai contoh, jika Anda memiliki sebagian dari halaman web Anda yang berbicara tentang salah satu produk anda, mengatakan , "Widget XYZ", Anda mungkin ingin membuat kata-kata "Widget XYZ" ke sebuah link yang dapat diklik yang mengarah ke halaman lain "details.html" di situs Anda. This "details.html" page will presumably give more details about your product, so that prospective customers can see if it suits their needs. Ini "details.html" halaman mungkin akan memberikan rincian lebih lanjut tentang produk Anda, sehingga calon pelanggan dapat melihat apakah itu sesuai kebutuhan mereka.Alternatively, if yours is a personal website you may want a link on your main page to a "hobbies.html" page. Atau, jika Anda adalah sebuah website pribadi, Anda mungkin ingin link pada halaman utama Anda ke halaman "hobbies.html".
At worst, if at this point in time, you have absolutely no idea what other pages of your site you want to link to, look at the footer of your page. Pada terburuk, jika pada titik waktu ini, Anda benar-benar tidak tahu apa halaman lain dari situs Anda, Anda akan dihubungkan, lihat footer dari halaman Anda. If you have put a copyright notice in the footer as was suggested in chapter 1 , you probably have some text saying "Copyright © 2008 by Christopher Heng" or the like. Jika Anda telah memasang pemberitahuan hak cipta di footer seperti yang disarankan dalam bab 1 , Anda mungkin memiliki beberapa teks mengatakan "Hak Cipta © 2008 oleh Christopher Heng" atau sejenisnya. Of course the year may be different for your page (depending on when you're creating this site), and instead of "Christopher Heng" you will have either your company name or your own name. Tentu saja tahun ini mungkin berbeda untuk halaman Anda (tergantung pada saat Anda sedang menciptakan situs ini), dan bukannya "Christopher Heng" Anda akan memiliki nama baik perusahaan Anda atau nama Anda sendiri. Whatever the case may be, you can make the name portion into a clickable link pointing to "feedback.html" (a practice used by a number of sites). Apapun kasusnya, Anda dapat membuat bagian nama menjadi link yang dapat diklik menunjuk ke "feedback.html" (suatu praktek yang digunakan oleh sejumlah situs). We will be creating this "feedback.html" file in the final chapter of this tutorial, so this is generally a safe link to create if you don't really know what else to do. Kami akan menciptakan ini "feedback.html" file dalam bab terakhir dari tutorial ini, jadi ini umumnya merupakan link yang aman untuk menciptakan jika Anda tidak benar-benar tahu harus berbuat apa lagi.
Once you've decided what you want to make into a clickable link, do the following: Setelah Anda memutuskan apa yang ingin Anda jadikan link diklik, lakukan hal berikut:
- Select the word or words that you want to make into a link. Pilih kata atau kata-kata yang ingin Anda buat menjadi link.
- In the PROPERTIES panel at the bottom of the Dreamweaver window, click the "HTML" button if it has not already been clicked. The panel should now show a "Link" field. Pada panel PROPERTI di bagian bawah jendela Dreamweaver, klik "HTML" tombol jika belum sudah diklik. Panel sekarang harus menunjukkan "Link" lapangan. Enter the address that you want to link to. Masukkan alamat yang ingin Anda link. For example, if you want to link to your feedback form, enter "
feedback.html" (without the quotation marks). Sebagai contoh, jika Anda ingin link ke formulir saran Anda, masukkan "feedback.html"(tanpa tanda kutip). If you want to link to some other website like thesitewizard.com, enter an absolute URL for that site, like "http://www.thesitewizard.com/" (again without the quotation marks). The former is a relative link, pointing to a file on your page, while the latter is an absolute link, pointing to a page on another website. Notice that the relative link does not have the "http://" prefix while the latter does. Jika Anda ingin untuk link ke beberapa situs lain seperti thesitewizard.com, memasukkan URL mutlak untuk situs tersebut, seperti "http://www.thesitewizard.com/"(lagi-lagi tanpa tanda kutip). Yang pertama adalah link relatif, menunjuk ke file pada halaman Anda, sedangkan yang kedua merupakan link mutlak, menunjuk ke halaman di situs web lain ". Perhatikan bahwa link relatif tidak memilikihttp://"awalan sedangkan yang kedua tidak.
Incidentally, if you're linking to "feedback.html", make sure that you type the name exactly as I gave it, without changing anything to capital letters or adding spaces. Kebetulan, jika Anda menghubungkan ke "feedback.html", pastikan bahwa Anda ketik nama persis seperti yang saya memberikannya, tanpa mengubah apa pun untuk huruf besar atau menambahkan spasi. As mentioned earlier, we will be creating "feedback.html" in the last chapter, and if you modify the name, your link will not point to the correct page. Seperti disebutkan sebelumnya, kita akan menciptakan "feedback.html" dalam bab terakhir, dan jika Anda mengubah nama, link anda tidak akan mengarah ke halaman yang benar. If you are linking to other pages on your website, you may also want to take a look at the article How to Create Good Filenames for Your Web Pages . Jika Anda menghubungkan ke halaman lain di situs Web, Anda juga mungkin ingin melihat pada artikel Cara Membuat Nama file Baik untuk Halaman Web Anda . - Hit the ENTER key when you've finished entering the link. Tekan tombol ENTER ketika Anda sudah selesai memasukkan link. The word or words you highlighted will now appear as an underlined clickable link. Kata atau kata-kata Anda disorot sekarang akan muncul sebagai yang digarisbawahi link diklik.
Tidak ada komentar:
Posting Komentar