Beruflich Dokumente
Kultur Dokumente
CHAPTER 1 Dreamweaver CS5 Tutorial: How to Design a Website with Dreamweaver CS5
Adobe Dreamweaver CS5 is a computer program that you can use to create and maintain a website. It lets you design websites visually on your computer, almost in the same way you would use a wordprocessor like Microsoft Word or Office. It combines ease-of-use with power, making it a favourite (or "favorite" if you use US English) among both new webmasters as well as seasoned professionals.
There's more to creating a website than just using a web editor like Dreamweaver. If you are new to website creation, I strongly recommend that you first read How to Make / Create Your Own Website: The Beginner's A-Z Guide, found at http://www.thesitewizard.com/gettingstarted/startwebsite.shtml At the very least, you will need the following:
Dreamweaver
Since this is a Dreamweaver tutorial, it stands to reason that you will need the aforementioned web editor itself. Note: this tutorial series assumes that you are using the CS5 version of Dreamweaver. If you are using an earlier version, please go to the tutorial series for that version instead, such as either the Dreamweaver CS4 Tutorial or the Dreamweaver CS3 Tutorial. Although the CS3, CS4 and CS5 versions of Dreamweaver have many similarities, there are some differences between them (especially between CS5 and earlier versions), so you'll have an easier time if you simply read the tutorial specifically written for that version. Those using versions of Dreamweaver prior to CS3, such as Dreamweaver 8, will have to upgrade to the current version to use this tutorial. The earlier versions lack certain features used in the three tutorial series.
Note that I've omitted a number of important things from the above list, since you can find such information from the Beginner's A-Z Guide mentioned above. Most crucially, before you start, you should register your own domain name for reasons given in my article on Is it Possible to Create a Website Without Buying a Domain Name? The High Price of "Free"..
Before you begin designing the appearance of your web page itself, you'll need to give Dreamweaver some basic information about your website. This is done using its Site Manager. 1. Start up Dreamweaver. 2. The Dreamweaver web editor will appear, the top half of which should appear something like the picture below. The exact appearance of Dreamweaver on your computer will be slightly different from my picture depending on how big your computer monitor is, and whether you're running Windows 7, Vista, XP or Mac OS X. (And, of course, the words, "thesitewizard.com Dreamweaver CS5 Tutorial" won't appear in your Dreamweaver window either.)
Near the top of the window, you should be able to see a line of text that reads "File Edit View Insert Modify Format Commands Site Window Help". This is the Dreamweaver menu bar, and each word on that menu bar is a clickable item that leads to other menus. We will be using this menu extensively in the course of this tutorial. The menu gives you access to many of Dreamweaver's facilities. 3. Click the word "Site" on the menu bar. A drop-down menu will appear. Click the "New Site..." item on that menu. Important: from now onwards, in the interest of brevity, I shall refer to such a sequence of clicking on the "Site" menu followed by clicking the "New Site..." menu item as "Site | New Site...". That is, if I say click "File | Close" it means to click the "File" menu, and when a menu appears, click the "Close" item on it. (This is just an illustration, do not actually click the File menu at this time.) 4. A dialog box will appear. The dialog box should have a title like "Site Setup for Unnamed Site 2". The actual number that follows the words "Unnamed Site" may be different in your system, depending on whether you've ever used Dreamweaver on your computer before. In any case, the number is unimportant. You're about to change the entire text "Unnamed Site 2" to the name of your website anyway. In the dialog box itself, you should see two fields, one labelled "Site Name" and another "Local Site Folder".
Replace the default value of "Unnamed Site 2" in the "Site Name" field with the name of your website. The name of your website can be any name you want. If you have bought your own domain name, one way is to enter that domain into this field. For example, if you have registered a domain called "example.com", simply type "example.com" (without the quotes) into the field, replacing the words "Unnamed Site 2". Alternatively, if you're creating a company website, you can type your company's name into this field. For example, if your company is called "Example Company", you can enter "Example Company" into that space. The content of the "Site Name" field is for your own reference only. It is not actually displayed publicly on your website, so you don't need to spend too much time coming up with a perfect name to use here. It's there in case you create many different websites using Dreamweaver and need a way to distinguish between them. For the sake of your own sanity, I recommend that you do not leave it as "Untitled Site 2" but give it some sort of informative and descriptive name. Otherwise, in the distant future, if and when you have 100 sites, you'll be pulling your hair out trying to figure out which name belongs to which website. 5. The "Local Site Folder" field tells Dreamweaver where it should save a copy of the files you create. This is a location on your own computer. On Windows systems, if this is the first time you're using Dreamweaver, it gives a default folder name of "Unnamed Site 2" somewhere in your Documents folder. For example, if you're using Windows Vista or Windows 7, you might get a suggested name like "c:\Users\christopherheng\Documents\Unnamed Site 2\". To change the folder to some other location, click the folder icon next to the field, and select a different folder. Alternatively, if you don't mind the default location, but just don't like the "Unnamed Site 2" portion, simply click somewhere in the field, move your cursor to the "Unnamed Site 2" portion and replace it with your site name (eg, "example.com"). Be careful not to overwrite any other part of the text; for instance, don't delete any of the backslashes ("\") unless you know what you're doing. If the above paragraph appears too complicated, and you feel panic rising just trying to understand what I wrote, just leave everything at its default setting. While it's good to have a descriptive folder name, so that you can easily locate your files in the future, it's too minor a matter to be worth getting stuck over. 6. When you're satisfied with your changes, click the "Save" button at the bottom of the "Site Setup" dialog box. The dialog box will disappear, and you'll be returned to the main Dreamweaver window. You are now ready to design your first web page.
Different websites have different layouts. Some, like the Feedback Form Demo site have all their content in a single column. Others, like thesitewizard.com's article pages, have a two column layout. If you don't know what I mean, look at this very article that you're reading. Notice that the leftmost column of the page contains thesitewizard.com's logo (at the top of the page) and its navigation menu. The right column holds the actual article text itself. Websites can of course have more than 2 columns: for example, at the time this was written, I use a 3 column layout for my Site Map. For the purpose of this tutorial, you will be creating a 2 column web page. The two column format is a very popular layout among webmasters because it is both space efficient and familiar to internet users. A layout that is familiar to users tends to be perceived as user-friendly, since its familiarity means that users will know how to navigate a website with that layout. It's always important to strive to make your website as user-friendly as possible, so that your visitors actually know how to use your site. 1. Click "File | New...". If you remember what I mentioned earlier, this means to click the "File" menu, followed by the "New..." item in the menu that appears. A dialog box with a title "New Document" will appear.
2. In the Layout column, look for the line that says "2 column liquid, left sidebar, header and footer" (see picture above). Click that line once. 3. On the rightmost side of the window, look for the field labelled "Layout CSS" (see picture above). Click the drop down arrow in the box next to that label and select "Create New File". This causes Dreamweaver to save the information controlling the appearance of your website (called "CSS") in a separate file. Since all the pages on your
Compiled by: Vipul Sharma
website will share a common layout, placing all the information about the layout into a single file avoids needless duplication of information, saving you disk space and bandwidth, and speeding up the loading of your web pages if your users visit multiple pages on your website. 4. Click the "Create" button in the bottom right of the dialog box. 5. A new dialog box, entitled "Save Style Sheet File As", will appear. Click the "Save" button in that dialog box. 6. By default, Dreamweaver creates your web page in what is known as the "Split" mode. In this mode, your web page as it appears in a real web browser is shown on the right side. This visually pleasing portion is called the "Design" mode in Dreamweaver. The left side shows the underlying "raw" code for your website. This left side is called the "Code" mode in Dreamweaver, and the code it shows is called HTML. If you do not see this "Split" mode, but only see the visually pleasing version of your website (the "Design" mode), or just the seemingly gibberish text of the "Code" mode, don't worry. We are about to standardise the display mode for everyone. No matter what you see on the screen, whether it's the "Split" mode I described earlier or some other mode, click "View | Design" from the menu. The cryptic text of the "Code" mode split screen should disappear, and the entire window should now be filled with the your web page as it appears in a web browser (the "Design" portion). Note that you must take this step if you wish to follow this tutorial series, since all the steps in this tutorial, as well as the screenshots assume that you are working in Design mode. If you do not switch to Design mode, you might get confused later when Dreamweaver does not behave the way I describe. Note: if, in the future, when you've completed this tutorial series, and you want to restore the "Split" mode, just click "View | Code and Design" from the menu. The screen layout will automatically revert to what you saw earlier. So fear not. You can easily restore everything back to its original condition. But for now, please switch to the Design mode.
In terms of function, the home page of a website is similar to a combination of the front cover of a magazine and its contents page. Like the front cover of a magazine, your home page should give your visitors an idea of the sort of things that can be found on your site. And like a magazine's "Contents" page, it should provide links to important pages (or sections) on your site so that your visitors can get to whatever they're looking for on your website. So what does this mean in practical terms? If your website is one that sells products and services, you may want your home page to mention your most important products and services, as well as link to individual product description pages where visitors can find more information and place an order. Even if you are just creating a personal website, or a hobby website, you should still try to give your visitors an idea of the sort of things they can expect to find on your website.
followed by a field that currently contains "Untitled Document" (see picture below).
Click your mouse cursor somewhere in the words "Untitled Document", then use the Delete or Backspace keys on your keyboard to remove the existing text. Replace it with the name of your website. For instance, if your website is called "XYZ Company", type "XYZ Company" into that field. This "title" field is an internal field on your web page. It is not displayed in the body (visible portion) of your web page. It is shown only in the title bar of the web browser window itself. If you're not sure what I'm talking about, look at the top of your browser window now. (Yes, this very moment.) Don't use the scroll bar and don't scroll to the top of this page in any way. Just glance upwards to the top edge of your web browser. You should be able to see the words "Dreamweaver CS5 Tutorial: How to Design a Website with Dreamweaver CS5 (thesitewizard.com)", or at least the first part of it, in the top frame of your browser window. I placed those words into the Title field of this particular web page when I created it. Although the "Title" field is just an internal field, it is an important part of a web page. Search engines use the content of this field to list your website in search engine results. If you leave your title set at "Untitled Document", your web page will appear in search engine results as "Untitled Document" rather than "XYZ Company" or whatever name you've given your website. 3. Now that you've finished replacing the title field, you can start working on the main content of your web page. Typing text in a Dreamweaver window is similar to typing in any wordprocessor. If you have ever used Microsoft Word or any other word processor, the process is the same. First replace the visible heading "Instructions" with the name of your website or some other appropriate text, such as "About XYZ Company" or "Welcome to Shakespeare's Website". To do this, click your mouse cursor somewhere in the word "Instructions" to place the text cursor on the page. You can then use your arrow keys to move the cursor around, the Delete and Backspace keys
to remove existing text, and all the other characters on your keyboard to insert text. After that, move your cursor to the paragraphs and sub-headings below (using the arrow keys on your keyboard or by clicking your mouse on the spot you want to change) and replace them with the content you want on your home page. Bear in mind the things I mentioned about what your home page should include in the section above. If you're at a total loss as to what to write, take a look at the sample block of text below belonging to a fictitious company and use that as a model. Obviously, you won't be able to use it literally (since your company is unlikely to sell the same things), but it can be adapted to suit your own business. If you're experiencing writer's block, many people find it helpful to just type something, even if it sounds utterly mundane. Once you have something down, you can always go back and refine it as the days go by.
Featured Products
Dreamweaver Site: This is an example of a Dreamweaver site, created using thesitewizard.com's tutorial on Dreamweaver. The tutorial shows you how to create a basic but fullyfunctional website which you can modify and augment to suit your needs. Mechanical Typewriter: Return to the glorious days of old, where documents have to be typed on paper, and where, if you want multiple copies, you need carbon paper (not included). No electricity or batteries are needed. This machine is powered by your fingers.
Don't worry about changing fonts, making words bigger or smaller, underlining words, putting text in italics or bold, making links, inserting pictures, making subtitles, and things like that. For now, just concentrate on getting your words down. Polishing your page to make it look nicer will be taught in the next few chapters. 4. Don't change anything in the left column and ignore the fact that the left and right columns have uneven heights. The left column will be dealt with in its
own chapter since it relies on you having additional knowledge before you can work on it. 5. When you've finished with your content, scroll down to the bottom of the page to the horizontal bar at the bottom, which Dreamweaver calls the footer. Move your mouse over any of the words in the footer and click it once to place your text cursor there. Replace the existing text with whatever you wish. Many webmasters place a copyright notice in this section. A copyright notice is simply a sentence like "Copyright 2010 by Christopher Heng". The copyright symbol, , can be inserted by clicking "Insert | HTML | Special Characters | Copyright" from the menu. For more information about copyright, please read the article Copyright Issues Relevant to Webmasters, at http://www.thesitewizard.com/general/copyright-issues.shtml 6. Once you're satisfied with the changes you've made (so far), save the page by clicking "File | Save As..." from the menu. A dialog box, with a title "Save As", will appear. Type "index.html" (without the quotation marks) into the "File name" field and click the "Save" button. IMPORTANT: do not use any name other than "index.html" as your filename. Make sure you type it exactly as I mentioned, completely in small letters (lowercase) with no spaces in the word. Do not use any other name. The name "Index.html" is wrong, as is the name "INDEX.HTML". Use only "index.html". Additional information: the name "index.html" is a special name that is recognised by most web servers. If it is published to the right location, it will be sent to your visitors if they simply type your domain name (eg, "http://www.example.com/") in their browser. This is the behaviour you want, since you're designing your home page.
you will have mastered what is one of the largest technical challenges a newcomer is likely to face. Don't let this scare you, though; it's actually quite easy! Another important reason for publishing now is to let you test your design in a web browser when your page is on the Internet. Even though you can always test your site on your own computer, it's not the same. It's possible to make mistakes that don't show when your page is on your computer, but appear only when it is on the Internet. Testing your page on the Internet after every stage allows you to catch those errors early. Otherwise, when the mistakes accumulate, it may become difficult for you (as a newcomer) to figure out where it went wrong. Please do not skip this step if you're following this tutorial series. I will assume you have done this in future chapters, and you may find it difficult to follow what I'm saying there if you skip this. 1. Click the "Site | Manage Sites..." menu. A dialog box, "Manage Sites" will appear. 2. Click the "Edit..." button. This will open up a dialog box "Site Setup for [your site name]" where "[your site name]" will be replaced with whatever name you entered when you first set up your site. The contents of the dialog box should also be familiar from your initial setup. 3. Look at the left column of the dialog box. The "Site" line should be currently selected. Click the "Server" line to select it. When you do so, the contents of the right side of the dialog box will change. 4. On the right column of the dialog box, look for a "+" (plus sign). It should be just under the blank list box in the middle of that column. Click it. An untitled dialog box will appear. 5. There should be two tabs at the top of the dialog box, "Basic" and "Advanced". To make sure that you're on the correct tab, click the "Basic" tab. 6. Enter anything you like into the "Server Name" field. This field is merely for your own information, so it doesn't really matter what you enter here. One simple way is to enter something like "example.com's server". The name you enter here will be displayed in the blank list box you saw earlier, and you can always change it later if you find you prefer something else. 7. At this point, you will need the information that your web host furnished you when you signed up for a web hosting account. Web hosts usually send you a lengthy list of details about your account when you first sign up. Among these is something known as your "FTP address" (sometimes called "FTP hostname" or "FTP server" by web hosts). FTP stands for "File Transfer Protocol". It is the usual method by which you transfer your web page from your computer to your web host's computer. This act of transferring your files from your system to your web host's system is known as "uploading" or "publishing".
If your web host sent you the information in an email message, either print the message out or open it in another window on your computer so that you can refer to it. I personally prefer to open it in another window so that I can simply cut and paste the information from that window into Dreamweaver, thus avoiding typing errors. However, do whatever suits you best. Put the FTP address that your web host gave you into the field for "FTP Address". If you have your own domain name, and you're hosted on a commercial web host, this address is typically your domain name prefixed with "ftp". For example, if your domain name is "example.com", many web hosts will set up your FTP address to be "ftp.example.com". Check the email you received from your web host for this information, or ask them if you cannot find the information anywhere. If the address is indeed "ftp.example.com" enter that into the "FTP Address" field. (Note that you cannot just randomly guess your FTP address and enter it here. It has to be what your web host has supplied to you. Not all web hosts use the "ftp.example.com" form. Some just ask you to enter your domain name ("example.com") while others supply you a name completely unrelated to your domain name. If you are not sure what the FTP address for your site is, ask your web host. Guesswork is pointless.) 8. Leave the port field set at the default of "21" unless your web host has instructed you to use a different port address. If your web host didn't mention any port number, leave the field alone. 9. Enter your FTP user name and password into the "Username" and "Password" fields respectively. Obtain this information from your web host if you don't already know it. If you don't want to keep entering your password every time you publish a page, leave the checkbox beside "Save" activated (a tick automatically appears in that box when you type your password). If you are sharing your computer with others, and don't want Dreamweaver to save your password, click the box containing the tick to uncheck it. Note that I will assume that you have left the box checked in this tutorial, since that is what the majority of thesitewizard.com's Dreamweaver readers do. 10. To make sure that you've entered your username, password and FTP address correctly, click the "Test" button under the password field. If you are successful, you will get a message saying "Dreamweaver connected to your Web server successfully". Click the "OK" button to dismiss it. Note: If you use Windows Vista, the Windows firewall may issue a message asking you whether to block or unblock the connection. Be sure to click the "Unblock" button, or you'll be blocking FTP connections for Dreamweaver. By default, FTP connections are two-way, requiring the server to which you're connecting to make a connection back to you, hence the warning by the firewall. This is normal, so don't panic when you get that message from Vista.
The interference by the firewall may also cause your first test in Dreamweaver to fail, leading Dreamweaver to issue a dialog box telling you to use Passive connections. Just click OK to that message, and click the "Test" button again. If the "Test" button fails, Dreamweaver will pop up a message advising you to activate either the "Use Passive FTP" or "Use IPv6 transfer mode" options. To do this, click the triangle beside "More Options". You can find the words "More Options" just above the "Help", "Save" and "Cancel" buttons near the bottom of the dialog box. The More Options section will be expanded, revealing a section where you can further configure your FTP settings. Click the "Use Passive FTP" checkbox to activate it and test again. In most cases, setting the "Passive FTP" mode is enough to make the test succeed. If the test continues to fail even after you've checked the "Use Passive FTP" box, it's possible that you've entered your FTP address, username or password wrongly. To make sure that those are typed in correctly, do not manually type them, but copy and paste them from the information supplied by your web host. If, having done that, you still find that you cannot connect, look at your FTP address field. Does it contain your domain name or some modification of your domain (like "ftp.example.com" where "example.com" is your own domain name? If so, and you've only just bought your domain name within the last 2 days, it's possible that your domain name has not yet propagated throughout the Internet. What this means is that when a new domain name is bought, it takes a while (usually about 2 days) before it is recognised throughout the world. In such a case, your only recourse is to wait a day or so before testing again. There's nothing anyone can do to make it happen faster. You can also ask your web host for help in checking your settings (in case you actually got your FTP address, username or password wrong). But remember that if the problem lies with a new domain name that has not propagated, you just have to be patient and wait. There's nothing your web host can do to help you in such a case. 11. The next field that you have to complete is the "Root Directory" field. This is needed because you can't simply publish your web page to any folder you want on the web server, and expect it to appear on the Internet. Web hosts usually configure their computers so that only files placed in specific folders are considered as part of your website. This is needed, otherwise anyone on the Internet can read your private files, like your email, etc. Go back to the information provided by your web host again, and look to see if they mention the name of a folder (or "directory" or "subdirectory") where you need to place your files into. Some hosts tell you to place your website files in a directory called "www". Others say that you need to place them in a folder
called "public_html". Still others tell you to place your files in a folder named after your domain name. And there are also hosts that say that you can simply upload or publish your files into the default directory you see when you connect by FTP. Like your "FTP address", this is not something you can randomly guess. If you don't already have the information, find out by asking your web host. Once you have the information, enter the folder name into the "Root Directory" field. For example, if your web host tells you to publish your files to a "www" directory, enter "www" into the field. If they tell you to just use the default directory when you connect, leave this field blank. (One last thing: note that where most web hosts are concerned "www" and "WWW" are two different words. Hint: for those who can't detect the difference between them, look at the capitalisation of the word. In other words, if they say, use "www" to store your website files, make sure you put "www" and not "WWW" in the "Root Directory" field.) 12. Click the "Save" button when you've finished configuring the FTP settings. 13. You'll be returned to the "Site Setup" dialog box. Notice that your entry is now listed in the list box on that page. Should you ever need to make changes to your settings, click the pencil icon at the bottom of the list box. The pencil icon can be found directly after the "+" and "-" icons. For now, click the "Save" button on this window. Dreamweaver may issue a dialog box with the message "The cache will now be recreated because the name, root folder, HTTP address, or cloaking settings of the site have been changed." Click "OK". You'll be returned to the "Manage Sites" dialog box. Click the "Done" button. 14. Once that you've finished configuring Dreamweaver for your site, it's time to publish your home page. To do this, click "Site | Put". 15. When a dialog box with the title "Put dependent files" appears, click the "Yes" button. Dependent files are the additional files that your web page needs so that it is displayed correctly in a web browser. Don't take too long to click "Yes" or Dreamweaver will automatically select "No" for you, which is not what you want. You must click the "Yes" button or your web page will not look the same in your web browser. (If you've waited too long, and have found that Dreamweaver has automatically dismissed the dialog box for you, click "Site | Put" all over again. This time, be sure to click the "Yes" button when the dialog box appears.) Dreamweaver will then issue a dialog box informing you of its progress. The dialog box will automatically disappear when it has completed the uploading of your web page.
Compiled by: Vipul Sharma
CHAPTER 2 How to Add Pictures and a Site Logo to Your Website Using Dreamweaver CS5
One of the most common operations that every web designer does is to insert images or pictures into a web page. As a webmaster, even if you don't intend your website to be carpeted with graphics, you will still need to add at least one image into your website: your website's logo. This chapter shows you how you can add photos, logos, and other types of pictures to your website using Dreamweaver CS5. If you have only just arrived at this chapter and are otherwise unfamiliar with the Dreamweaver web editor, you may want to start at the first chapter of thisDreamweaver Tutorial series. I will assume that you have already completed all the steps described in chapter 1, namely, created a 2 column website, added content into the main content column, and published a preliminary version of your home page to the Internet. (In fact, if you're reading this article just to find out what creating a website is all about, you may find the article How to Start / Create Your Own Website: The Beginner's A-Z Guide to be a more useful and informative starting point.)
1. Website Logo
If you look at most of the websites on the Internet, you will notice that they all sport some sort of logo on their pages. For example, the logo for thesitewizard.com can be found at the top left corner of its pages. Since you will be adding a logo to your website in this chapter, you will need to have a unique image to serve as that logo if you are to complete this chapter.
Those who are creating a website for a company that already has a logo can simply use a digital copy of that logo for the site. The digital copy must be in either the GIF, JPG or PNG graphics format. If your logo is in some other file format, get an image editor to convert the picture into one of those three formats. There are many image editors around, from famous commercial ones like Adobe Photoshop to free ones like those listed on the Free Image and Photo Editors page. If you don't have a digital copy lying around, but have a printed version, scan or take a digital photograph of that logo and use that image. Again, the scanned output or digital photo must be in either the JPG, PNG or GIF format. This should generally not be a problem since most modern cameras and scanners can output JPG files. If you don't already have a logo, you should create one for use in your website. I don't recommend that you use any of the free images you find around the Internet, even if the copyright owner of that image says that you can use it royalty-free on your site. Logos are like a brand symbol for your website so you will want them to be unique to your site. To create your own logo, either directly create them on your computer or draw them on a piece of paper and scan it. For those who have not created a logo before, and are not sure how to go about it, take a look at the article How to Create a Logo for Your Site the Quick and Easy Way found at http://www.thesitewizard.com/webdesign/make-site-logo-banner.shtml No matter how you obtain your logo, whether by drawing them yourself or by scanning the logo from your letterhead, you will probably want to resize your logo to fit your web page. Since the web page template that you're using from chapter 1 gives you the entire width of the page for the logo, your logo can be quite wide. That is, you don't need to make it as small as thesitewizard.com's logo, which I created so that it could squeeze into the corner. What is a good width for the logo then? There are no hard and fast rules. We'll be (optionally) centring ("centering" in US English) your logo on the page, so don't worry about making it fit perfectly between the left and right edges. There's no way to get a flush fit anyway, since your page width will vary according to how big your visitor's monitor is. Centring the logo means that even if your image isn't very wide, it may still look okay on the page. For example, Google's default logo is actually fairly narrow, not substantially wider than thesitewizard.com's, but it still looks okay on their page because they've put it in the centre. If you're at a complete loss, just pick a random size (eg, 450 pixels wide and 100 pixels high) and work from there. If it doesn't look good, you can always go back later and resize your picture in your image editor, and reinsert it into your web page.
Apart from your website logo, you may want to have other images for display on your site, such as product pictures, photos of yourself, photos of scenery or even drawings to beautify your website. If so, get them ready before you begin this tutorial. If you are selling a digital product that is downloadable from your website, and thus does not have a physical form that you can take a photograph of, you may want to consider creating a picture of it for display purposes anyway. Having a picture on your website of your product somehow makes your product seem more tangible in the minds of readers than just talking about it.
For example, if you're selling computer software, you can draw a picture of a software box for display on your website either using a drawing program like those I mentioned above, or with a specialised 3D box drawing software. Free versions of such software can be found on the Free 3D Software Box Image Makers page. Likewise, if you're selling or giving away an electronic book (or "ebook"), you may want to create an image of your book. There aren't any free ebook cover makers that I know of, so you will either have to use a commercial program like Box Shot 3D or manually draw one using a graphic editor. For example, the picture here of my How to Make / Create a Website: The Beginner's A-Z Guide was created using BoxShot3D. The software can also create things like CD boxes/envelopes (if you're selling your own music), software boxes, bottles, paper bags, cans, etc. Note: there is no such physical book, so please don't email me to ask where you can buy the guide. If you want to read it, the complete guide is available online (and you can read it free of charge; there's no need to buy anything) at http://www.thesitewizard.com/gettingstarted/startwebsite.shtml
How to Add a Logo to Your Dreamweaver CS5 Website 1. Create a Folder for Your Images in Your Local Website Folder
Start up Dreamweaver CS5, if you don't already have it running. You will now need to create a folder to store the images that you want to use on your website. Yes, I know you already got your images stored in some
Compiled by: Vipul Sharma
other folder on your computer. However, in order to use those pictures on your website, you will need to copy those images into the folder hierarchy containing the rest of your website files, or Dreamweaver won't recognise them or publish them to your website. For example, if your local website folder, which you created in chapter 1, is called "c:\Users\chris\mywebsite", then you will need to copy those images either into that folder, or a subfolder like "c:\Users\chris\mywebsite\images". For the purpose of this tutorial, we will create an "images" subfolder. (Note: this is true whether you run Windows or Mac OS X.) Look at the panels in rightmost column in Dreamweaver. You should be able to spot the "FILES" tab midway down the window. (It should be next to a tab labelled "ACCESS".) Under the FILES tab, you should be able to spot a list box with two files listed: "index.html" and "twoColLiqLtHdr.css". You created those files in chapter 1. Move your mouse to a blank spot underneath the two files but still within the FILES panel. Right click your mouse: that is, click the right button on your mouse. A menu should appear. Click the "New Folder" item in that menu. Dreamweaver will create a new folder, temporarily named "untitled", under your two files. The "untitled" should be currently highlighted, allowing you to change its name. Replace the existing name with "images", without the quotes and entirely in small letters (lowercase), and hit the ENTER key (or the RETURN key if you use a Mac). The folder name should now be changed to "images".
copied to your local website's images folder. You can now close both those windows. Don't close Dreamweaver itself. You still need it.
A dialog box entitled "Image Tag Accessibility Attributes" will appear. Enter "[your site name]'s logo" (where "[your site name]" is the name of your website) into the "Alternate text" field. The "Alternate text" (often abbreviated as "alt text" by webmasters) field is a brief description of what the image contains. It is displayed by a web browser if your visitor disables the loading of all graphics in the browser. It is also read aloud by screen readers (used by the blind), and indexed by search engines as the description for that picture. Although this Alternate Text field is optional, you should always complete it to make your website accessible to the blind. Ignore the "Long description" field and click the "OK" button. For better or for worse, your logo will now appear at the top of your web page. If this is your first attempt, there's an even chance that it is "for worse", since you won't have previous experiences to guide you. If the logo is too big or too ugly and you want to get rid of it and start all over again, right-click the logo and click the "Remove Tag <img>" item. Note: if you use Dreamweaver to resize your picture instead of a specialised graphics editor, be sure to right-click the image and select "Optimize..." from the menu after you finish resizing. Dreamweaver will then make the size change permanent and save the resized image over your existing file. Personally, I prefer to use a proper image editor even when doing things like resizing pictures. Image editors tend to give you more control over your pictures; after all, images are their raison d'tre.
Look for the field labelled "W". This field gives the actual width of your image. For example, if the "W" field says "450", it means that your picture is 450 pixels wide. Note down this value somewhere (for example, either memorise it or scribble it down on a piece of paper). You'll need it shortly.
Look for the "CSS STYLES" tab in the right side of your Dreamweaver window. It should be some distance above the "FILES" pane which you used earlier to create your images folder. There should be an "All" tab immediately below the "CSS STYLES" tab. If you do not see the "All" tab, but instead see a "BUSINESS CATALYST" tab directly underneath "CSS STYLES", it means that the CSS STYLES tab has not been expanded. Doubleclick the CSS STYLES tab to expand it. You should now see the "All" tab and a bunch of text that looks like technical gibberish. (Note: if you doubleclicked the CSS STYLES tab and find that you've collapsed the panel, simply doubleclick it again to expand it.) Just above the "BUSINESS CATALYST" tab, in the portion of the column that is actually still part of the "CSS STYLE" panel, you should be able to spot a few small icons. Those are actually clickable buttons. When you hover your mouse over one of those icons, a tool tip window will appear telling you the purpose of each button. Try it to see what I mean, but don't click any button at the moment. Find the icon that has a tool tip window that says "New CSS Rule". If you can't be bothered to hover your mouse over every button to find it, just look at the picture below to see what I'm talking about.
Click the icon that has the "New CSS Rule" tooltip (the icon that is circled in the picture above). A dialog box with a title field "New CSS Rule" will appear. The Selector Type field is a drop-down box probably containing a default value of "Compound (based on your selection)". Click the down arrow at the right of the drop-down box and select the "Class (can apply to any HTML element)" line.
The Selector Name field should now be blank. Click the field to place your text cursor there, and type "logo", without the quotes, and entirely in small letters (lowercase). Below that field, an explanatory comment, "This selector name will apply your rule to all HTML elements with class 'logo'", should appear. Click the "OK" button. A new dialog box, entitled "CSS Rule Definition for .logo in twoColLiqLtHdr.css", should appear. Click the "Block" line in the "Category" column (left column). The contents on the right side of the dialog box should change. Near the bottom of the right side is a drop-down box labelled "Display". Click the down arrow for this field and select the "block" item. Now click the "Box" line in the "Category" column to select it. Enter the width of your image into the "Width" field, and leave the field beside it selected at "px" (pixels). For those who are not sure what I'm talking about, the width of your image is the number you noted down earlier from the PROPERTIES panel. Somewhere below the "Height" field are two columns, although it doesn't appear like 2 columns. The left column has the heading "Padding". The right column has the heading "Margin". Uncheck the box "Same for all" in the "Margin" column (circled in the picture below). Then click the down arrow for the "Right" field in that same column, and select "auto". Do the same for the "Left" field in the "Margin" column: that is, click the down arrow next to that field and select "auto". If you find that both the "Left" and "Right" fields are disabled, it means that you did not uncheck the "Same for all" box. You'll need to uncheck that box first before you can select "auto".
Click "OK". Make sure that your logo is still selected. If you're not sure, just click the logo once. Click the Class field in the PROPERTIES panel at the bottom of the Dreamweaver window. It should show a long list of items. Click the "logo" line in that list. Your logo should now be centred horizontally on your web page.
How to Insert Images into Your Web Page with Dreamweaver CS 5 (Optional)
This section deals with the insertion of product pictures, photographs, artwork, or other images that you want to insert into the main body of your web page. The pictures can be inserted either between paragraphs of text, such as what you see in many of my pictures above, or with your text flowing around it either on the right or on the left, such as what you see in my picture of the How to Create / Set Up a Website: The Beginner's A-Z Guide book. Scroll up to see the different ways pictures can be inserted to see what I mean. Setting background pictures, so that they form the backdrop of your web page, will be taught in a later chapter. 1. The process for inserting an image into a web page is mostly the same as that for adding your site logo. First click the spot in your web page where you want the picture to go. For example, if you want the picture to appear before a particular paragraph of text, put your text cursor at the very start of that paragraph. 2. Click "Insert | Image" and choose your picture from the "images" folder, and click the "OK" button. If your picture isn't in that folder, click the Cancel button, copy the graphic file into that folder, then try again. 3. Enter the alternate text for that picture. For example, if the image is a photo of a book you're selling, put the title of your book into the "Alternate text" field. If it's a photograph of your family at a picnic, say something like "My family at a picnic". In other words, briefly describe your picture. Click the "OK" button when you've finished. 4. Your image will be inserted into your web page, possibly in as awkward a position as that shown in the image below.
If you want your image to appear completely before the paragraph, click anywhere within a word in the paragraph, and use your cursor key to move it to the very start of that paragraph. Hit the ENTER (or RETURN) key. On the other hand, if you want the words to flow to the right of the image, with the picture itself on the left, click the image once to select it. Then, click the down arrow beside the drop down box for "Align" in the PROPERTIES panel. Select "Left" (since you want the picture on the left).
If you want the picture on the right, you should select the "Right" option in the "Align" field instead of "Left". Notice, however, that after you do the Align operation, your words will go right up to the edge of your picture (see the screenshot above). This is usually not what most people want. To adjust the horizontal space between your picture and the words, enter a number into the "H Space" field in the PROPERTIES pane. For example, try typing "5" (without the quotes) into that field and hit the ENTER (or RETURN) key. Dreamweaver will insert a bit of horizontal space between your picture and your words. If this results in a space that is either too narrow or too wide, increase or decrease the number until you get
Compiled by: Vipul Sharma
satisfactory results. To adjust the vertical space between your picture and the words, use the "V Space" field in the same way. 5. Save your work with "File | Save", publish it, and test it in a web browser. Congratulations. You've now polished up your web page so that it now contains a site logo and some pictures, making it look more like a finished product.
CHAPTER 3 How to Change Fonts, Text Size and Colours in Dreamweaver CS5
Even if your website is blanketed in graphics, perhaps to the extent that its primary focus is the graphics, you will still have to deal with text. And any time you need to handle text, you'll probably want to know how to do things like change font size, put words in bold or italics, change text colours ("colors" in American English), and even change the font itself. This is the topic of this chapter of the Dreamweaver CS5 tutorial. For the newcomer who has only just arrived at this page, you may want to start at the first chapter of the Dreamweaver CS 5 tutorial. The current chapter assumes that you have completed all the steps of the previous two chapters, and indeed have all the prerequisite knowledge and skills taught there. (Incidentally, if you are new to making websites, and are here to find out what it involves, the article How to Make / Create Your Own Website: The Beginner's A-Z Guide may be a better starting point.)
By the end of this chapter, you will be able to change fonts, use bold and italics, and modify the size and colour of your text content using Adobe Dreamweaver CS5. This chapter also introduces you to Cascading Style Sheets ("CSS") and shows you how you can take advantage of it to style your text.
change with some arbitrary name. That way, we can easily refer to that specific object by label in our CSS rule. We call such labels "classes" in CSS. For example, we labelled your site logo in chapter 2 "logo" (by selecting "logo" from the Class field in the PROPERTIES panel), and created a CSS rule to put anything labelled "logo" in the centre of the page. Or, in more accurate technical lingo, we assigned your site logo a class of "logo", and created a CSS rule to centre any picture with a class name of "logo". Yes, I know. The above paragraph is a bit of revisionist history. The truth is, we actually created the CSS rule for a class named "logo" first. Then we assigned the class to our actual logo. In fact, this seemingly backwards way of working, where we create the rule for a label first, then label the object later, is what we will do in Dreamweaver for the most part, mainly because it makes our job easier. By the way, the "object" or "element" that I mentioned above can be anything appearing on your web page. It can be pictures, snippets of text, words, whole paragraphs, the left or right columns or even the entire web page. And you can assign many different objects on your website the very same label (class). Don't worry if the above is a bit confusing. Things will clear up as we actually carry out the procedure below. I just wanted to give you an overview of what we're about to do, as well as an explanation as to why we're doing what we're doing. If you've got a headache trying to visualise what I just said, don't bother (to visualise). Just move on to the next section.
How to Change Fonts, Text Size and Text Colour in Dreamweaver CS5
The following steps apply whether you want to change fonts, adjust the size of the text, or change the colour of your words. Note that these steps deal with the changing of your text styles on specific snippets of text or bigger paragraphs of text. If you want to change the default font used on your entire web page, or the entire left or right column, you will find the procedure in a later section (below). However, you will still have to read this section, because those sections don't provide some of the essential background knowledge and skills taught here. (Sorry. But there's just too much information to repeat everywhere.) 1. Start up Dreamweaver and doubleclick the "index.html" filename in the FILES pane on the right. This opens the home page that you have been working on in the last 2 chapters. 2. Click "Format | CSS Styles | New...". If you remember the convention used here, this means to click "Format" from the menu bar. Then, when a drop down menu appears, click the "CSS Styles" item. Following this, click the "New..." item in the submenu that appears.
3. A dialog box, entitled "New CSS Rule", will appear. Select "Class (can apply to any HTML element)" from the drop down box underneath "Selector Type". Do this whether or not it is already selected. 4. If there is any existing text in the "Selector Name" field, delete it. To do this, just click once in the field, and use your backspace or DEL key to get rid of everything in that box. We will be entering the name of a class into this field. This "class" is the label that I mentioned earlier. It's the class that we'll be assigning to the pieces of text for which you want the font changes made (whether it is to change the font itself, or change the text size, etc). To make it easier to understand what I'm talking about here, let's suppose that you want to change the font for all your product names appearing on your website. To do this, you can enter a class (label) like "productname" (without the quotes) into this field. Later, you will assign this "productname" class to every instance of product names on your site. In other words, the name you enter in this field is actually any word of your choosing. You'll have to make it up yourself. The class name should begin with a letter of the alphabet. The rest of the name can contain letters and numbers but must not include any punctuation marks or spaces. For example, "productname" and "welcomemessage" are acceptable names for classes, but not "product name" or "welcome message". Try to make the name descriptive of the content and not the appearance. For instance, "companyname" is better than "bigarialfont", since in the future, you may decide that your company name should not appear in Arial but in Times New Roman. In any case, don't spend too much time trying to figure out a class name. It is just a descriptive label for you to use to make font changes and the like. It is not actually displayed in the web browser so you don't need to come up with anything fancy. If you're really stuck and can't think of a name, just use generic things like "subheadings", "productnames", "productfeatures", "welcomemessage" (all without the quotes) and the like. Once you've decided on a class name, type it into the Selector Name field. 5. Click the "OK" button. 6. A new dialog box, with a title of "CSS Rule Definition for .[your class name] in twoColLiqLtHdr.css", will appear, where "[your class name]" is the name you entered into the Selector Name field. Notice that the right side of this dialog box lets you change many aspects of the fonts on your web page. For example, you can select a font from the "Font-family" drop down box, change the text size from the "Font-size" fields,
put text in bold using the "Font-weight" field, put text in italics through the "Font-style" field, and change the colour of your text with the "Color" box. I will discuss each of these items separately in the paragraphs below. Please read what I have to say about these fields before you go wild on a customisation frenzy.
Font-size
To change text size, enter a number into the "Font-size" field. For example, you can enter "120" (without the quotes). The adjacent field on the right will immediately be enabled. Click the drop-down box for that field and select the appropriate unit of measure for your new font size, eg "%" for percent. Entering "120%" in this way means that your text will now appear 20% larger than its existing size. Although you can use other units of measure besides "%", for things like web pages, it's best to stick to using either "%" (percent) or "em". Things like "pt" (point), which you may be familiar from using wordprocessors like Microsoft Word, are better suited to the print medium than to the computer monitor. In case you're wondering, your current text size is regarded as 100%. Setting it to 90% means that it becomes 10% smaller than its current size. Conversely, setting it to 110% means that it becomes 10% larger.
Underline
Although you can underline any text you want by checking the box here, it's generally best not to underline ordinary text on your web page. By convention, underlined text on web pages is almost universally used only for links, and you will confuse your users if you underline things for emphasis. Use bold or italics to create emphasis instead.
9. In the PROPERTIES panel at the bottom of the Dreamweaver window, click the drop-down box beside "Class". A box will appear, listing all the different classes that have been created so far. You should be able to find the class you created somewhere in the list. (You may have to scroll up or down that list to find your new class.) Click the class name. This assigns the class you created to the piece of text you selected. The font change on your web page should be immediate, although if your changes are very small (eg, increasing the text size to 101% from the default of 100%), they may not be sufficiently distinct for you to notice any difference. 10. Repeat with any other pieces of text that you want to have the same class (and thus also the same text style). That is, highlight another snippet of text that you want to have the same font changes applied, and select the same class name from the "Class" box in the PROPERTIES panel. You can assign the same class to as many pieces of text on your web page as you wish. For example, if you want every instance of your company name on your web page to have the class "companyname" (with its, say, Courier New font setting), then, one by one, highlight the company name and assign the "companyname" class to that snippet. Repeat for the next occurence of your company name until every instance has the "companyname" class. Every piece of text that has that class name assigned to it will share the same font changes (or size changes or colour changes or whatever) that you made for that class. 11. If you want a different text style for some other block of text, you'll have to create a new class for it. That is, go back to the step where you used "Format | CSS Styles | New..." and make a new class with the different text style settings (fonts, colours, sizes, whatever).
What If I Change My Mind About a Font, or the Text Size, Text Colour, etc?
What if, after doing the above, you have a change of heart about the text style options you've used for your page? For example, what if you decide that Comic Sans wasn't a good choice for your company name after all, and you want Times New Roman instead? 1. To change the settings you made earlier, click somewhere in the middle of a block of text that has previously been assigned the class you created earlier. Do not select the text just click to put your cursor somewhere in the middle of that block. Try not to put the cursor at the very first character, in case you accidentally place it outside the block. You can verify that your cursor is in the correct spot by looking down at the PROPERTIES panel. If you do it correctly,
the "Class" field in that panel will show the name of the class you want to change. 2. Now look at the right hand side of Dreamweaver, at the CSS STYLES panel (see picture). Locate the part of the CSS STYLE section that says 'Properties for ".[your class name]"' where "[your class name]" is the actual name of the class you created. If your Dreamweaver window (or computer monitor) is too small that you cannot really see much of that portion, click the scroll bar at the side of that 'Properties for ".[your class name]"' to move its content up and down. (Note: if your window is big enough so that the entire 'Properties for ".[your class name]"' section is shown, there will be no scroll bar, since there's nothing more to see.) If you made a font change for that class, you should be able to see a line under that that says "font-family" followed by the name of the font you set earlier. If you made other changes, you should be able to see the other properties you set in that section as well, such as font-size, etc. To modify those fields, just click the value portion of those fields. For example, if you have set the Comic Sans MS font for your class, and have now changed your mind, click the word Comic Sans MS to change it into a dropdown box which you can modify. Actually, you can also doubleclick the word "font-family" to create the same effect. Note: my use of "font-family" here (as well as in the picture) is just an example. If you didn't change the font, but changed the font size instead, you will see "font-size" in that section, which you can doubleclick to make modifiable.
2. In the "New CSS Rule" dialog box that appears, select "Class (can apply to any HTML element)" for the Selector Type field. 3. Remove any existing text in the Selector Name field by deleting it. Then enter "container" (without the quotes) into that field. (Yes, the name of the preassigned class is "container".) 4. Click the "OK" button. 5. Your entire web page should reflect the change immediately.
How to Change the Font for the Entire Left or Right Columns
If you want to change the font for the entire left or right columns, do the following. We will take advantage of the fact that Dreamweaver has already assigned the class "sidebar1" to the left column, and the class "content" to the right column, for pages based on the particular template that you're currently using. 1. Click "Format | Font" and select the font series you wish to use. 2. Select "Class (can apply to any HTML element)" for the Selector Type field. 3. Delete any existing text in the Selector Name field. Enter "sidebar1" (without the quotes) if you want the font change to be applied to the entire left column. Alternatively, enter "content" (without the quotes) if you want it to be applied to the entire right column. 4. Click the "OK" button. 5. Your entire web page should reflect the change immediately.
Save your web page and its associated CSS file with "File | Save All". (Note the use of "Save All" instead of "Save".) Then publish it to your website with "Site | Put". Remember what I said about the importance of clicking "Yes" when Dreamweaver prompts about your dependent files. Then check your home page in a web browser. Congratulations! Your home page, now with both graphics and appropriate text styling, is well on its way to being completed. Don't worry, I know it's not finished yet. But it's already developing into something that you can be proud of.
If you have only just arrived at this page, and are a newcomer to Dreamweaver CS5, you may want to start with chapter 1 of the Dreamweaver CS5 Tutorial. This chapter builds on the things taught in the previous chapters, and thus glosses over a great many things (both theoretical and practical) already mentioned earlier. In fact, if you are totally new to creating websites, and are here because you're curious about what it involves, you may find the article How to Create / Set Up Your Own Website: The Beginner's A-Z Guide a better starting point.
I know that, by now, your web page probably looks different from what you see in the picture, since you would have changed the text, used your own logo, etc, as a result of following the previous three chapters. However, the basic layout should still be identical, making it possible for you to locate the sections on your site corresponding to those mentioned here. I have labelled certain parts of the web page in the picture with words written vertically (perpendicular to the words in the main content). The label "body" refers to the background behind the 2 columns of your web page. The background of the left
column is labelled "sidebar1", and the right column "content". The background for the horizontal bar at the top of the page containing your site logo is labelled "header". Although not shown in the picture above, the background of the bottom horizontal bar, probably showing your copyright notice at the moment, is labelled "footer". Please make a mental note of these labels mentioned above (including the "footer" label not actually shown in the picture). We will be using them to customize the background of the various sections. Since you have already learned about CSS classes in the chapter on changing fonts and other text styles, you will probably understand me when I say that these labels correspond to the names of the classes Dreamweaver has assigned to those parts of your web page. Yes, the names I used are not arbitrary. I selected them because they are also the class names of those sections. (Note, though, that "body" is not actually a class name, but for the purposes of this chapter, that label will work the same way.) Anyway, there's no need to memorise anything. If you forget which name refers to which section, just scroll back to this section and check the picture. For the observant reader, who may have noticed that I did not give a label to the navigation menu (the part that says "Link one", "Link two", etc), please note that all customisations pertaining to that menu will be taught in the chapter dealing with it.
How to Change the Background Colour or Use a Background Image for Various Parts of Your Web Page 1. Invoke the CSS Rule Definition Dialog Box
What you'll be doing in this section is invoking the CSS Rule Definition dialog box for each section of the web page that you want to customise. Since Dreamweaver has already created all the necessary classes for the various sections, the trick is to get the web editor to show the CSS Rule Definition window for the section we want. Let's say that you want to change the background for the part of your web page labelled "body" in my picture. Click somewhere in the blank space to the left of your left column, in the portion of the page I labelled "body". Do this even if you don't actually want to change the background for that section, otherwise you won't know what I'm talking about in the next paragraph. (Don't worry, you don't have to change anything later if you don't want to. You can always hit the ESC key to get out of dialog boxes you invoke by mistake.) Look at the CSS STYLES panel on the right of the Dreamweaver window (see picture below). The "Rules" section of that panel should have 2 lines: the first line saying "body <body>" and the second ".container <div>". Actually, we don't care what the second line says. The important part is the line that says "body <body>" since it's the "body" that we want to customise. Doubleclick that
Compiled by: Vipul Sharma
"body <body>" line. It doesn't matter whether you doubleclick the "body" word or the "<body>" portion.
The CSS Rule Definition dialog box for "body" will appear. You can verify that this particular CSS Rule Definition window is for the "body" section by reading the entire title of the dialog box: "CSS Rule Definition for body in twoColLiqHdr.css" (emphasis mine). If you really want to configure the background for body, leave this dialog box open so that you can use it in the next step. Otherwise, either click the "Cancel" button or hit the ESC key on your keyboard to get out. Basically, you have to do the same thing for the section of your web page you actually want to change. For example, to configure the "sidebar1" portion, click somewhere in the left column (but not in the menu buttons part, that is, not in the part with the words "Link one", "Link two", etc). The CSS STYLES panel should show "sidebar1 <div>" as one of the lines in the Rules section. Doubleclick it to get the CSS Rule Definition dialog box for "sidebar1". To ensure that you really clicked the right place, always check the title of the dialog box to make sure the rules are for the correct class. In the case of the left column, the title should say that it is "for sidebar1".
For the sake of those not confident that they'll click the right place on the page, I'll just briefly mention where to click to get the correct entries in the "Rules" section of the CSS STYLES panel. To configure the header, click your site logo once. Then doubleclick the ".header <div>" entry in Rules. To change the footer, click somewhere within the words in your footer, then doubleclick ".footer <div>" in Rules. Your right column can be configured by simply clicking somewhere in one of the sentences in your main content, and doubleclicking the ".content <div>" line in Rules. In all cases, you should get a CSS Rule Definition dialog box, and you can, if you like, make sure you clicked the right spot by checking the title.
2. Select "Background"
Click the "Background" line in the left column of the CSS Rule Definition dialog box. The contents of the right side of the dialog box should change.
or "repeat-y" if you only want the image to tile horizontally or vertically respectively. And before you ask, there is no "stretch" option to make your picture fill the entire window. 5. Click the "OK" button to accept your changes. 6. Save your modifications with "File | Save All" and publish it to your website. As always, make sure you test your changes with a web browser. Incidentally, if after testing, you decide that you want a different colour scheme or some other picture as the background image, simply return to the CSS Rule Definition dialog box the same way you invoked it in the first place. That is, just repeat the above procedure and choose some other colour or image. If you had previously set an image as the background and don't want it any more, return to the CSS Rule Definition dialog box and delete the name of the file in the "Backgroundimage" field. If you like, you can also delete your selection in the "Backgroundrepeat" field. In both cases, when I say delete, I mean to use the DEL or Backspace key, found on your keyboard, on the contents of those fields.
CHAPTER 5 How to Make Your Images and Text into Clickable Links with Dreamweaver CS5
Hyperlinks, or "links" for short, are one of the characteristic features of a website. They are the reason why all the sites in the world are collectively referred to as the "World Wide Web", since directly or indirectly, the sites all link to each other like the threads in a spider's web. In this chapter of the Dreamweaver CS5 tutorial, you will learn how to make your pictures and text into clickable links. Note that this tutorial assumes that you've completed the earlier chapters of the Dreamweaver tutorials. If this is not true, and you don't have extensive prior Dreamweaver experience, you may want to start with chapter 1. In fact, if you're completely new to creating websites, you may find the article How to Make / Create a Website: The Beginner's A-Z Guide a better starting point.
only be used if the web browser already know what protocol or domain name to use. It's like telling someone your home address only by mentioning the street name and house number. It is only meaningful if both of you happen to be in the same city, state and country, and that person will interpret the address that way. For example, if I link to a web page using a relative URL of "index.shtml" from the page you're reading at this very moment, your web browser will try to construct an absolute URL for this partial address. First it will strip away the filename of this page from its full URL. This gives the web browser an address likehttp://www.thesitewizard.com/dreamweaver/. It then appends the new filename index.shtml to what remains, giving a final URLhttp://www.thesitewizard.com/dreamweaver/index.shtml. It will use this reassembled URL to retrieve what was linked to. In view of this, you can only use relative URLs to link to pages within your own website. For example, I cannot put a link with a relative URL of "newpage.html" and hope that web browsers will read my mind and figure out that I'm talking about "http://www.example.com/newpage.html" and not my own site. Any link pointing to pages outside your site has to be specified in full form, using an absolute URL. Pages within your own website, on the other hand, can be linked to using either a relative URL or an absolute URL. It's up to you which to use.
How to Make Images, Including Your Site Logo, into Clickable Links
If you hover your mouse over thesitewizard.com's logo, at the top left hand corner of this page, you will find that it is actually a clickable link. (Go ahead and move your mouse over the logo now, to see what I mean.) Clicking it will take you to my home page. This practice of making the site logo a hyperlink pointing to a website's main page is not unique to thesitewizard.com. Many, if not most, websites do this. Since it's such a common practice, experienced users on the Internet have come to expect that any time they need a shortcut to the main page of the site, they can simply click the site logo. Since, as webmasters, we want to make our websites as usable as possible so that visitors find it easy to get to where they want to go on our sites, it is a good idea to add this facility to your website as well. Note that although I mention your site logo in the steps below, the same method can be used for any image on your website. 1. Start up Dreamweaver and open your web page. 2. Click once on your site logo, or any other image that you want to make into a clickable link, to select it. 3. Look at the PROPERTIES panel at the bottom of your Dreamweaver window (see picture).
If you want to use an absolute URL for your link, enter the URL manually into the Link field. For example, if the main page of your site can be found at "www.example.com" and you want your picture to link to it, type "http://www.example.com/" (without the quotes) into that field and hit the ENTER key (or the RETURN key if you use a Mac). If you've forgotten what an absolute URL means, please return to the section on absolute and relative URLs. On the other hand, if you want to use a relative URL for your link, click the icon that looks like a folder near the URL field. (It's actually a clickable button.) A dialog box entitled "Select File" will appear. Select the file you wish to link to, and click the "OK" button. As is obvious from this dialog box, you can only use this method for web pages that you have already created, and that are located on your own website. As mentioned earlier, if you're linking to some other website, you'll have to use an absolute URL. 4. Enter "0" (zero, without the quotes) into the "Border" field of the PROPERTIES panel. If you don't do this, some browsers will show a blue border around your picture to indicate that it is a clickable link. By entering "0", you are giving the border a width of zero, effectively removing it. That's it. Your image is now a clickable link.
If you receive a "404 File Not Found" error message when you test the link on your page, it means that you've linked to a non-existent page. If you intended your link to point to your home page (which should obviously exist, since it is the very page doing the linking), it probably means that you tried to use an absolute URL and you made errors in typing your address. Of course, if you deliberately linked to a page that you have not created yet (but intend to in the future), then the 404 error occurred because you haven't created the page yet. In such a case, don't worry, the error will go away when you actually create the page. On the other hand, if you linked to another website (not your own), and you got a 404 error, it probably means that you typed the link wrongly.
CHAPTER 6
How to Customise Your Website's Navigation Menu Bar with Dreamweaver CS5
Many websites have a common set of links on every page to the main sections of their website. These links afford visitors a quick way to access other parts of the site. They are usually positioned in a standard place on a web page, and are sometimes dressed up to look like clickable buttons. By convention, this set of links is referred to by webmasters as a "navigation menu". This chapter of the Dreamweaver CS5 Tutorial shows you how you can customise the navigation menu on your website. Note that I will assume in this article that you have been following the earlier chapters of the tutorial. If this is not true, you may want to start with chapter 1. In fact, if you are completely new to creating websites, most people find the article How to Make / Create Your Own Website: The Beginner's A-Z Guide a better starting point.
Images and Text into Clickable Links with Dreamweaver CS5. The only difference between what I'm describing here and what you did in the last chapter is that, here, you've got to delete the "#" mark first. You now have a "Home" button as the top button in your navigation menu, pointing to your website's home page. In other words, there are now 2 links on your web page that point to your home page: your site logo and the "Home" button of your navigation menu. This is standard practice on many websites. 3. Now modify the other buttons so that you get the following (in any order you like): o Make a "Site Map" button with a link pointing to "sitemap.html" (without the quotes). If you prefer absolute URLs (explained in chapter 5), make the link point to "http://www.example.com/sitemap.html" (without the quotes). You should of course replace "www.example.com" with your actual web address. Note: I know you don't have a page called "sitemap.html" yet. You'll be creating it in the next chapter. Since it doesn't exist at the moment, if you're using relative URLs, you obviously won't be able to click the folder button to select a file, so just type "sitemap.html" (without the quotes) into the Link field, replacing the "#" sign.
o
Make a "Feedback" button with a link pointing to "feedback.html" (without the quotes). If you don't like the word "Feedback", use "Contact Us", "Contact Form" or "Support" or something like that. As before, if you prefer to use absolute URLs, point the link to "http://www.example.com/feedback.html" instead. Again, replace www.example.com with your actual URL. Important: even if you create a button called "Contact Form" or "Support" or some other thing, the link must point to "feedback.html" (or the absolute URL version of "http://www.example.com/feedback.html"). This is because we'll be creating a feedback form with a filename of feedback.html for your website in chapter 8, and if you change the link here, your button will lead to a 404 File Not Found error. Let me say that again: change the visual label on the button to any word (or words) you like. But the filename must remain feedback.html (or its absolute URL version).
Optional: If you like, you can also make an "About Us" button with a link pointing to "about.html" (without the quotes). As before, you can use an absolute URL if that's what you've been using above.
An "About Us" page is used by some sites, particularly commercial ones, to give visitors some information about the people or company behind the website. For personal websites, some webmasters place their resume or curriculum vitae here, presumably to attract prospective employers. This is an optional button. You don't have to link to an "About Us" page if you don't plan to create such a page later. Depending on whether you created the "About Us" button or not, you either have one unused button (with the words "Link four") or no more buttons left. Don't panic. Just read on. The next sections will show you how to add new buttons and delete buttons from your menu.
If you have created one too many buttons, and want to remove one of them, here's one way of doing it. 1. Select the text on the button you want to delete. For example, you can do this by dragging your mouse over the words on the button to highlight it. 2. Hit the DEL key. This removes the words, but leaves a narrow horizontal gap in your menu. 3. Move your mouse pointer so that it is directly over the narrow space in that gap. Click the right mouse button. 4. A pop-up menu should appear. Click the "Remove Tag <li>" item on that menu. Your button should disappear.
(If you cannot locate those two lines, make sure that you've clicked somewhere in one of the buttons of the menu. You may also have to scroll down the Rules section. If you can't even find the Rules section, please refresh your memory by looking at chapter 4 again.) 3. The CSS Rule Definition dialog box that you're probably familiar with by now will appear. Click the Background line in the left column. The contents of the right side of the dialog box should change. 4. Click the colour picker box next to the "Background-color" field to change the colour. 5. When you're done, remember to click the "OK" button on the CSS Rule Definition dialog box.
How to Solve the Problem of the Uneven Columns on Your Web Page
Depending on your colour scheme and how much text you've placed in your right column, the short left column on your web page may either be a horrifying eyesore or not even noticeable. If you're not sure what I'm talking about here, it probably means that under your current screen resolution, your right column is approximately the same length as your left column. Another possibility is that you've set the same colour for both your columns as well as for the space behind the two columns. Otherwise, you'll probably have noticed that your left column stops short halfway down the page since your left column, in all probability, is shorter than your right column. And it's noticeable all the more because, by default, it has a non-white background, in contrast with the right column and the space behind the two columns. There are two ways of solving this problem.
Fiddle with the Background Colours: Eg, Set the Same Colour for Both Columns and The Space Behind
The easiest way around this is to set the same background colour for your left and right columns as well as for the space behind them. This is the solution I adopted for thesitewizard.com. You only have to look at the page you're reading to see what I mean. The left column is actually very much shorter than the right column. Had I set a different background colour for that column, you will immediately notice that it does not extend all the way down the page. But since I didn't, the left column merely looks like an empty patch of space where I paste my navigation menu and other material. In other words, it doesn't really look like a column. If you want to take this approach, return to the chapter on setting background colours in Dreamweaver CS5 to change the colours of those three sections. Note that your web page background does not have to be all white like mine for this to work. If you are creative, you can still play around with colours and/or background images so as to provide your site with a unique look.
Once you've finished configuring, save your work with "File | Save All" (not "File | Save" if you have changed the colours). Then publish and test your site as before. Now that your home page is complete, you should take the time to check your website under different screen resolutions. You don't have to buy multiple computers to do this. Simply resize your web browser. If you use Windows, one way to do this is to use the method I mentioned in my article How to Test Your Website Under Different Screen Resolutions under Windows the Easy Way. Alternatively (whether you use Windows, Mac, Linux or FreeBSD), download and install the free Operaweb browser, go to its "Tools | Preferences" menu, click the Advanced tab, select the Browsing line in the left column, and check the box "Show Web page dimensions in title bar". Use Opera to load your website, resize the window to some common screen resolutions like 1024x768, 1280x800, 1366x768, 1680x1050 and so on. Look at the top of the Opera window (in its title bar) as you resize so that you can get the screen width you want. Bear in mind as you test your navigation menu on your home page that you haven't actually created any of the other pages your menu links to (other than the Home page). As a result, you will probably get 404 File Not Found errors when you click buttons other than the "Home" button. This is normal so don't panic when it happens. We will fix most of those File Not Found errors in the next chapter. (Of course if you get a File Not Found error when you click your Home button, then you need to fix your link to your Home page, since that already exists.) If everything works, congratulations are in order. You've completed your website's home page.
CHAPTER 7 How to Manage and Auto-Update Multiple Pages on Your Website with Dreamweaver CS5's Template System
Nearly all websites have more than one page. Creating multiple pages for a website is a relatively simple task; things only get troublesome when you want to make a design change that affects all the pages of your website. Imagine having to go through every page on a site with hundreds of pages, just to (say) add a new button to your navigation menu. Here's where Dreamweaver CS5 shines in helping you automate the task of creating and maintaining a multi-page website. Since this is chapter 7 of the Dreamweaver CS5 Tutorial series, you will probably need to start with chapter 1 if you aren't already very familiar with Dreamweaver CS5. I will assume knowledge of all the things I've mentioned in the previous chapters. In addition, for those who are completely new to making a website, I strongly recommend that you read How to Make / Create Your Own Website: The Beginner's A-Z Guide first.
Not only does Dreamweaver allow you to create such a customised ("customized" in other variants of English) template for your website, its template system also includes additional features meant to make a webmaster's typical tasks more productive. In particular, if you ever decide to change the design of your website, all you need to do is to modify the template, and Dreamweaver will automatically update all the pages on your site derived from that template. You do not need to manually go through every page to make those design changes. To facilitate this auto-updating feature, Dreamweaver requires that you indicate which portions of your page constitute the fixed part of your design and which portions contain the content that varies from page to page. We shall do this below.
what you see in your template now, you will need to mark that portion as "editable". You can have as many editable regions in your template as you wish, and your editable regions can be interspersed with the invariant content. Your editable region can be as small as a single word on your page (or even a letter or digit if you like), or as large as the content of the entire column (probably even the whole page, but that will defeat the whole purpose of using a template). In other words, it's up to you to decide what to make editable and what to leave as fixed. To make sure that you are clear about what I'm talking about here, let me draw out the implications of the fixed and editable regions in your template. When you decide that a section of your web page is to remain part of the fixed design, Dreamweaver will not let you change that portion in the individual web pages that are derived from this template (since it's supposed to be fixed). But you're still in control here. Any time you want, you can still modify the design of the fixed portion in the template itself. If you do that, Dreamweaver will assume that you want to change the appearance of your whole website, and proceed to go through every web page based on this template and update it to your new design. As such, if you want to put unique content in certain sections of your web page, you will need to mark those sections as "editable". Let me suggest that this probably include huge swathes of your right column, and the date portion (or more accurately, the year) of the copyright notice in your footer. 6. To mark an area as editable, drag your mouse over that area to select it. As I said earlier, you're not limited in what you can select. If you like, you can even select all the titles, sub-headers, and paragraphs in your right column in one go. 7. Click "Insert | Template Objects | Editable Region" from the menu. 8. A dialog box, entitled "New Editable Region", will appear, asking you to name that editable region. This is just an internal label for your personal reference: the name you give will not be displayed in the visible portion of your actual website. While you can accept the default name given by Dreamweaver (probably some unhelpful name like "EditRegion3" or the like), if you can think of a more meaningful name, use that instead. Examples of useful names: "Page Title", "Page Content", "Copyright Year", "Product Description", "Product Name", etc. Anyway, it's just an internal label, so don't lose sleep over it. Even if you label it with some cryptic name like "Section 1", it's unlikely to hinder you in any way in the future. Most webmasters know what they want the various portions of their web page to contain, whether or not they label it with a relevant name. 9. Click the "OK" button. The section you marked will now be outlined in a blue box, and a small label containing the name you gave will appear on the top left of that box. Don't worry. As I said earlier, you will only see this box and
label within Dreamweaver itself. (It's meant to help you find all the editable regions.) It will not appear when you view your website in a web browser. 10. Go ahead and repeat the above steps for any other region of your web page that you want to make editable, giving each region a different name. The regions do not have to be contiguous or anything like that. 11. When you've completed marking the editable regions of your template, click "File | Save". Depending on what you selected when you created your editable regions, you may get a dialog box appearing with a message like 'You placed the editable region "[Some-name-or-other]" inside a block tag. Users of this template will not be able to create new blocks in this region. Move the region outside the block tag if you want users to be able to do this.' where [Some-name-or-other] is the name of one of your editable regions. Just click the "OK" button.
Make sure that the box "Update page when template changes" is checked. (It should be by default, but make sure anyway.) Click the "Create" button. 5. You should now see a page identical with your home page. Click "File | Save As...". 6. The "Save As" dialog box should appear. Click the "index.html" filename in the window to select it. The filename "index.html" (without the quotes) should appear in the "File name" field. Click the "Save" button. 7. A message box with the text "The file you selected already exists. Would you like to overwrite this file?" will appear. Click "Yes". Your original home page has now been overwritten by a new version. While this new version appears identical to your old one in a web browser, it actually contains some invisible markers that will allow Dreamweaver to automatically update it if you ever make a design change in your template.
You'll need to remember to change this title field every time you create a new page from your template, or all your web pages will have the same title. Don't worry that you did not mark this Title field as editable in your template. The Title field is always considered an editable field by Dreamweaver. 5. Now replace the content of your editable region(s) on the page with a list of links to all the pages on your website. For example, click to put your text cursor into one of the editable regions, and use the DEL or Backspace key to remove the existing content. Then type the name of each page on your site on a separate line, and make it into a link the way you were taught in chapter 5. For those who are not sure what a site map looks like, check out thesitewizard.com's Site Map. It's basically just a list of links to all the pages on my site. (Don't be distracted by my use of 3 columns on that page. The reason I used 3 columns there is because I have so many pages on thesitewizard.com that if I use my default layout, that page will be excessively long.) I realise that, at this point in time, your website contains so few pages that you probably feel silly creating a site map. However, your site map will become useful, over time, as your site grows. The site map has the dual purpose of improving the usability of your website, as well as helping the search engines locate all the pages on your website. You may want to read my article on Appearance, Usability and Search Engine Visibility in Web Design if you're not convinced. If you find that hitting the ENTER (or RETURN) key creates too much blank space in between each line, and you prefer that the lines be more closely spaced, do this instead of hitting the ENTER key. After you type a line, say the word "Home", click "Insert | HTML | Special Characters | Line Break" from the menu. (If you are using Windows, you can hold down the Shift key and hit the ENTER key to accomplish the same thing.) Nothing will appear to happen visually, but if you immediately type "Feedback" after that, you'll see that "Feedback" is placed in a new line below "Home" without an intervening blank line.
For the curious, the reason for this is that the ENTER key creates a new paragraph, hence the extra blank line, while "line break" merely moves what follows to the line below. 6. Click "File | Save As..." and type "sitemap.html" (without the quotes) into the "File name" field of the dialog box that appears. Do not use capital letters (uppercase), insert spaces or otherwise change that filename. If you do, your filename will not match the URL you previously set in your navigation menu, and you will get a 404 File Not Found error when you click your Site Map button later. (I'm assuming here, of course, that you've actually followed my instructions in chapter 6 and created a button for the "Site Map" pointing at "sitemap.html" or its absolute URL equivalent.) 7. Click the "Save" button. Remember to return to your Site Map to add a link to any new page you create for your website. This includes the pages you create later in this chapter.
For important pages, you may also want modify your navigation menu to add buttons to them. What constitutes an important page? It depends on the nature of your site. If you're selling things on your website, the "Order" or "Buy Now" page (where your customers can place an order), the "Price List" page (where you list the prices of your products), and "Products" page (where you list all the products you're selling) should be considered important pages. They should always be in your navigation menu. See my article Is Your Website Design Driving Away Your Customers? Some Basic Usability Tips for Commercial Websites for a discussion of this if you're creating such a site. On the other hand, if you're creating a personal site, put whatever you think visitors will want to access into that menu. Since your navigation menu is probably not in an editable region of your web page, you will need to modify your template to include these new buttons. Which brings us to the topic of the next section.
shown merely to report to you that the job is done. If you want to see a list of files that it updated, put a check in the "Show log" box by clicking it. When you're done, click the "Close" button to dismiss the dialog box. 8. Now click "File | Close" to close your template. (This is to protect you from accidentally working on the template when you mean to work on some individual web page. You can always open it again at a later time when you really mean to change something in the template.) I know that I sound like a broken tape recorder, repeating the same old thing over and over again, but you won't believe the number of email messages I get from users facing problems because they tried to edit the template when they meant to edit an individual web page, or vice versa. Now that you have learnt how to edit both templates and normal web pages, and you have more than one web page to manage, always look at the tab under the menu bar to make sure that you're editing the right thing. Your current template file has a filename of "index.dwt". If you see that on the current active tab, it means you're editing the template. If the tab shows a filename ending in ".html", you're editing a normal web page. (And if you don't know what I mean by a "tab", doubleclick the "index.html" file in your FILES panel to open it. You should be able to see an "index.html" tab, together with an "x" for closing the tab, just under the menu bar near the top of the Dreamweaver window.) Any time you see multiple tabs at the top, it means that you have a few files open at the same time. Learn to recognise the colour of the active tab, the one that indicates which file you're currently working on. This way, you won't accidentally modify the wrong file. There's nothing wrong with having many files open at the same time; most of us do it all the time. You just need to be careful about what you're editing, especially when you're new to working this way.
How to Publish Multiple Web Pages the Easy Way with Dreamweaver CS5: Using Site | Synchronize
Now that your website has many pages, it's no longer efficient to use "Site | Put" to upload your site. That method was useful when you only had one page to publish. With multiple pages to upload, what we want is a way to get Dreamweaver to figure out which pages have been modified (or are new) and automatically upload these changed or new files. 1. Click "Site | Synchronize Sitewide...". 2. A dialog box, "Synchronize Files", will appear. Leave the default options of "Synchronize: Entire '[Your-Website-Name]' Site" and "Direction: Put newer files to remote", and click the "Preview..." button.
Dreamweaver will then connect to your website to find out which files have been previously published (and probably also their date of publication). When it is done, you will see a new dialog box, "Synchronize" with a list of files that need to be uploaded to your website. 3. By default, Dreamweaver will also publish your template file, "Templates/index.dwt". This file is actually not needed for your website to function properly, and if you don't want it to be uploaded, right click the line containing that file (that is, move your mouse pointer over that filename and click your right mouse button). In the menu that appears, click the "Ignore Selection" item. When you do this, the "Action" column will show "Ignore" instead of "Put" for "Templates/index.dwt".
If you want my personal opinion on the matter, the best solution is to really back up your computer on a regular basis, instead of relying on a template file dumped on your public website as a sort of second-rate backup. It seems to me to be almost like storing your dirty linen in public (if I may be allowed to mangle a metaphor). There are many free hard disk backup programs around, so even if you can't afford to buy a commercial program to do the job, there is little excuse not to keep an up-to-date backup of your work yourself. 4. Click the "OK" button to let Dreamweaver "put" the files it deems to have changed. When it has finished uploading everything, the dialog box will disappear on its own accord.
CHAPTER 8 How to Add a Feedback Form to Your Website with Dreamweaver CS5
A feedback form, also called a contact form, allows your visitors to send you a message from a web-based form. The message will be delivered to you via ordinary email. In this final chapter of the Dreamweaver CS5 Tutorial, you will add a feedback form to your website, thereby completing it. As with the other chapters of this Dreamweaver tutorial series, this article assumes that you have completed the earlier chapters, and thus makes references to concepts and techniques taught there. If you are not an experienced user of Dreamweaver CS5, you may want to begin with chapter 1. In fact, if you are new to web design, it's best to start at the real beginning, with the guide How to Make / Create Your Own Website.
this chapter will be based on the exact same technology that the demo form uses. So please do it now before you proceed.
Special Requirements
You will need the following. This list is not optional. You must have the following or your form will not work.
A web host that lets you run scripts that send email
Your website needs to be hosted on a web host that lets you run scripts (computer programs) on their computer. Not only that, they must allow your scripts to send email. Most (if not all) commercial web hosts, including the one I currently use, allow this. If you're not paying for your web hosting, for example, if you're using a free web host, or you're using the free hosting that comes with your broadband connection, or you're using one of those "free starter websites" that some domain registrars give you when you buy a domain name, chances are that the things described in this chapter will NOT work for you. If you're not sure, ask your web host.
The form, by itself, doesn't do anything. Your visitors can click the "Send Feedback" button till they are blue in the face, and nothing will be sent. The real job of sending the email is done by the next component.
How to Add a Contact Form for Your Website in Dreamweaver CS5 1. Generate the Feedback Form and Script
The first thing you will need to do is to go to the Feedback Form Wizard and generate your customised feedback form and script. The wizard can be found at http://www.thesitewizard.com/wizards/feedbackform.shtml o Read the introductory page of the wizard, choose the option to create a PHP feedback form script, and click the "Go to Step 2" button. o In Step 2, enter the information required by the form: Email: Enter the email address at which you wish to receive the mail from your site's visitors. URL of Feedback Form: http://www.example.com/feedback.html URL of "Thank You" Page: http://www.example.com/thankyou.html URL of "Error" Page: http://www.example.com/error.html
o
You should of course replace the www.example.com part with the real address of your website. However, do NOT change the filenames, especially that offeedback.html since you have used that name in your navigation menu in the previous chapters. If you change the name now, the button in your navigation menu (and any other links pointing to your contact form) will break. In addition, if you dislike the names I gave above so much that you plan on changing them, be sure to read the article How to Create Good Filenames for Your Web Pages so that you don't create problematic filenames that will cause trouble. Read the licence agreement. If you agree to the terms, indicate it in the form and click the "Generate script" button to continue. o A new page, containing customised versions of the contact form and script, will appear. Do NOT close this page. Leave it open while you carry out the next few steps in Dreamweaver. We will need the code generated by the wizard for your site.
o
o o o o
Start up Dreamweaver and click "File | New..." from the menu. If you will remember from the previous chapters, this means to click the "File" item from the menu bar, and then the "New..." item in the drop down menu that appears. Click "Blank Page" in the leftmost column. Notice carefully that I said click "Blank Page" and not your template. In the "Page Type" column, click the line that says "PHP". Click the "Create" button. A page that looks blank will appear. Unfortunately, this page is not actually blank, and we need to delete the invisible rubbish that Dreamweaver inserted when it created the page. (Note: if you don't see a blank page, that is, a page that is completely white, but see your 2 column website design, it means you did not follow my instructions above. Close the page without saving it and go back to the beginning of this section. This time, make sure you click "Blank Page" as I mentioned.) VERY IMPORTANT: click "View | Code" from the menu. You should now see the HTML code that Dreamweaver inserted into your PHP page. Select everything on that page. If you use Windows, an easy way to select everything is to use Ctrl+A, that is, hold down the Ctrl key and type "a". (I believe that Mac OS X uses Command+A instead of Ctrl+A.) Alternatively, you can also drag your mouse across everything to highlight it. If you use the mouse method, make sure that you've really selected everything. Then hit the DEL key. Your window should now be blank.
Switch back to your web browser without quitting Dreamweaver. The first section on the web page should have a heading "Feedback Form Script". Notice that there is a box in that section. This box contains your feedback form script. Select everything in that box. The best way to do this is to click your mouse somewhere in the box to put your text cursor there. Then hit Ctrl+A (probably Command+A on the Mac) as you did earlier. This should highlight everything in the box, but not on the rest of the web page. (Note: for most people, simply clicking somewhere in the box should automatically cause all its contents to be selected. If this is the case for you, there's no need to use Ctrl+A to select everything, although doing so will do no harm.)
Copy the selected text to the clipboard. The easiest way to do this in Windows is to type Ctrl+C (hold down the Ctrl key, and type 'c'). Alternatively, you can click your right mouse button (while the mouse pointer is in the box) and select "Copy" from the menu that appears. o Switch back to Dreamweaver. Do NOT close your web browser. We're still not done with it yet. o Click "Edit | Paste" from the menu. The entire script generated by the Feedback Form Wizard should appear in your blank document. The last line in the window should be a red "?>". Above that line, you should see lines in various colours, namely red, blue, green, purple and, if your screen is big enough, some orange.
o
If you don't see the things I mentioned above, close this Dreamweaver window (using "File | Close") without saving anything. Then go back to the start of this section (click the link to find the exact place to go to) and redo everything. WARNING: do NOT change anything in this window. Leave everything as it is. There is nothing that you should be customising here: in spite of the English words in some parts of the file, this is not a web page that you are looking at. It is a computer program. It is not displayed to your visitors. Modifying anything here may cause your feedback form to fail to work correctly. Let me say it again: do not add, subtract or modify anything. Do not even add blank lines.
o
Click "File | Save As...". When the "Save As" dialog box appears, type "feedback.php" (without the quotes) into the "File name" field. Do not use any other name. Do not add spaces to the name. Do not use capital (uppercase) letters. The name must be exactly as I said. Click the "Save" button.
Click "View | Design" from the menu. You should see a blank page. Do NOT type anything here. You're still looking at the feedback form script, albeit in Design view. Click "File | Close" from the menu immediately to close the window before you accidentally add or change something here.
o o
Click "File | New..." from Dreamweaver's menu. Click "Page from Template" in the left column and select the template that you designed in chapter 7. Since your feedback form is part of your website, it should probably have the same layout and design that you've given the rest of your site. Click the "Create" button. You should now be back in familiar territory. As usual, remember to change the "Title" field above your web page to an appropriate title, for example, "Feedback Form", "Contact Us", "Contact Form" or "Support" (or whatever else you like). Add a visible heading of "Feedback Form" (or whatever) into the editable portion of your web page, and delete the placeholder content from your template's editable regions (if any). Switch back to your web browser, and look for the section entitled "HTML Code" (scroll down the page to find it). As before, there should be a box in that section. Select everything in that box and copy it to the clipboard. If you've forgotten how to do it, go back to the above section to refresh your memory. Switch back to Dreamweaver. Click to put your text cursor in the spot on your web page where you want the form fields to appear. Note that the cursor should be on a blank line. If you don't have a blank line, make one by hitting the ENTER key (or the RETURN key on the Mac). Click "View | Code" from the menu. Dreamweaver will display the underlying code for your web page. Your text cursor should be positioned somewhere in a line that says "<p> <p>". In fact, to be specific, the cursor should be after the first "<p>" and before " <p>". Use the arrow keys on your keyboard to move the text cursor to the end of the line, that is, to immediately after "<p> <p>" on the same line.
Click "Edit | Paste" from the menu to paste the HTML code you copied to the clipboard from your browser earlier. o Click "View | Design" to return to Dreamweaver's Design mode. You should now be able to see the form.
o
This section deals with how you can customise the visual appearance of the feedback form. You do not have to customise anything if the form already looks fine to you. If you don't want to change anything, just skip to the next step. Otherwise, read on. The form obeys the same CSS rules as the rest of your web page. As such, you can use the techniques taught in chapter 3 to change the fonts, text size and colours if you wish. I will not go through those steps again below. Instead, I will deal with the things you have not yet learnt in previous chapters, namely, with how to change the widths of the various fields in your form. Before you begin, though, I should probably mention that the width and height of the various fields do not affect how much information your visitors can enter into your form. It's just a visual gimmick. Even if you create a very narrow field, your visitors can still enter very long names, email addresses or comments. The web browser will simply scroll to allow them to continue typing whatever they want to type. Having said that, it's still useful to be able to change the sizes of the various fields so that the form fits better into the visual design of your web page.
o
To change the text appearing on the "Send Feedback" button, click the button once to select it. Change the words "Send Feedback" in the "Value" field in the PROPERTIES panel of Dreamweaver.
o
What Else You Can Change, and What You Should NOT Change
The feedback form and the feedback form script were created to work with each other. The script depends on certain things in the form being left at its original value, and if you change those things, the form may not work correctly. As such, let me mention the things that you can change in the form, and the things that you should not change. The general rule of thumb is that only things that appear (that is, are visible) on your web page can be modified. That is, you can change the words "Name:" and "Email address:" that appear next to the Name and Email Address fields. You can change the word "Comments" that appear above your comments box. You can change the widths and heights of the various fields. You can change the text "Send Feedback" that appears on the button. You can also freely change the colours of the text and the background (as taught in the earlier chapters). Apart from the above, do not change anything else. For example, do not change anything other than "Char width" and "Num lines" in the PROPERTIES panel for your 3 fields. Do not change anything other than the "Value" field for the "Send Feedback" button. I know the PROPERTIES panel provides other tantalising fields that may tempt the compulsive customisers among you to modify. Specifically, do not change the words "fullname", "email", "comments" in the "TextField" boxes in the PROPERTIES panel. The words in those "TextField" boxes are not displayed on your web page, so you don't have to worry about them. They are for internal use by the script.
Message Sent
Your message has been sent to the webmaster. Thank you for your comments. If you are running a business, you may want to give a more customer-friendly message, like:
Like the "Thank You" page, feel free to write whatever you want. One possibility is to say:
you submit the form, it again means there is a name or web address mismatch somewhere. Either you've saved your "Thank You" page with a different name from what you furnished the Feedback Form Wizard, or you saved your page to the wrong folder, or you failed to upload the page.
3. Check if your web host's email system has delivered the message
After you get your "Thank You" page, you should log into your email account and see if you have received your email. If not, go through the checklist of things to do when you don't receive your email. If you run into some other problems testing the script, please see the Frequently Asked Questions (FAQ) about the Feedback Form Wizard. You may also want to reread this chapter to make sure you didn't miss anything crucial.