Escolar Documentos
Profissional Documentos
Cultura Documentos
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.
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 a different version, please go to the tutorial series for that version instead, such as either the Dreamweaver CS5.5 Tutorial, the Dreamweaver CS4 Tutorial or the Dreamweaver CS3 Tutorial. Although the CS3, CS4 and CS5/CS5.5 versions of Dreamweaver have many similarities, there are some differences between them (especially between CS5/5.5 and the 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"..
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.
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 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.
contains the large-print title, "Instructions", as well as paragraphs of text interspersed with smaller sub-headings. At the very top of the page is a small rectange labelled "Insert_logo (20% x 90)". Even though it may not be obvious, this rectangle is actually sitting in the corner of a horizontal band cutting across both columns of your web page. The entire top horizontal band is meant for your logo, and you will be working on it in Chapter 2 of this tutorial. Scroll to the bottom of the page. You can do this either by hitting the PgDn key on your keyboard or by dragging the scroll bar on the right of your web page with your mouse. Notice that there's another horizontal band spanning the width of your web page at the bottom. This is the footer. You will be customising the text of this footer later in this chapter. 2. Directly above your web page, in the part of the window that belongs to the Dreamweaver program rather than your page, look for the word "Title" 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 fully-functional 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.
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.
web hosts do this automatically for you. If this is the case, try typing your URL without the "www", for example type "http://example.com/" into your browser. If you get no errors at all, but see the page that you designed earlier, congratulations! You have created and published your first web page using Dreamweaver CS5. It may be a raw and unfinished page (for now), but you have successfully walked through all the essential steps of designing and uploading a web page.