this tutorial you will learn to design a site layout, insert images and text, create First, you need to decide what you want to put on your website: images, buttons, videos, PDF docu- Navigating to the Dreamweaver CS5 application. on a Mac . PAYNE'S DREAMWEAVER CS5 TUTORIALS. 2. CONTENTS. Lesson I: Even better is to open this in a iPad pdf reader (such as Good Reader or iAnnotate). Did you know that Packt offers eBook versions of every book published, with PDF and. ePub files available? . Embedding an HTML5 audio element in a Dreamweaver CS5 web page . Then, you will learn to add various CSS3 effects to.
|Language:||English, Dutch, Hindi|
|ePub File Size:||22.35 MB|
|PDF File Size:||13.21 MB|
|Distribution:||Free* [*Sign up for free]|
Preparing Files for Dreamweaver: Before we begin to construct a web page in Dreamweaver (or HTML) we need a plan. Usually the site is designed in. Dreamweaver CS5 . In this course you will learn the basic skills to establish and maintain a simple website using .. be changed into a PDF file using the. Learn Dreamweaver CS6 video tutorials. CS5/CS Using Dreamweaver CS5 & CS (PDF) · Extending Dreamweaver CS5 & CS (PDF).
The practical nature of this guide makes it difficult to follow if you're not doing the things mentioned. 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 CS6 Tutorial , the Dreamweaver CS5. Although the these versions share many similarities, there are some differences between them, so you'll have an easier time if you simply read the tutorial specifically written for that version.
The earlier versions lack certain features used here. A Web Hosting Account You will be placing your website on the Internet from this chapter onwards yes, from chapter one. For this to work, you will need a web host. A web host is loosely speaking a company that has computers that are permanently connected to the Internet. After you've finished designing your web pages, you will need to transfer them to your web host's computer called a "web server" , so that it can be seen by the rest of the world.
There are many web hosts around.
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 downloading a Domain Name? The High Price of "Free". Setting Up Your Website in Dreamweaver's Site Manager 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. Start up Dreamweaver. 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.
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. Click the word "Site" on the menu bar. A drop-down menu will appear. Click the "New Site 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 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.
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 on 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.
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 sites, you'll be pulling your hair out trying to figure out which name belongs to which website. 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.
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.
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. 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. Some, like the Feedback Form Demo site have all their content in a single column. Others, like thesitewizard. 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.
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. Note: if you're reading this article from a modern mobile phone, you'll probably only see 1 column. To experience what I'm talking about here, you'll need to use a device with a wider screen area, such as desktop or laptop computer.
I moved the left column to the bottom of the page for devices with small screens so that you can read the article more comfortably. 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. Click "File New If you remember what I mentioned earlier, this means to click the "File" menu, followed by the "New A dialog box with a title "New Document" will appear.
In the Layout column, look for the line that says "2 column liquid, left sidebar, header and footer" see picture above.
Design with HTML5 in Dreamweaver CS5.5
Click that line once. 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.
Click the "Create" button in the bottom right of the dialog box. Click the "Save" button in that dialog box. 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.
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. Before we continue to replace the default text on the page with your real web page content, it's important to understand the basic principles behind what you'll be doing.
The first page that you'll be designing is your website's "home page". The home page of a website is basically its main page. It is the page that your visitors arrive at if they simply type the domain name of your site.
For example, if you type "thesitewizard. 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.
The web page is currently filled with some placeholder text that you will be replacing with your own content. The content of the right column of the dialog box should change. There should be a large empty list box in the middle of the right side of the dialog box. In the untitled dialog box that appears, click the "Basic" tab at the top of the page. It's probably already selected, so clicking it should not change anything on the screen. In any case, just click it to make sure that you're seeing the same thing I'm describing.
Click somewhere in the "Server Name" field and replace the words there with anything you like. For example, if your website is called "example.
This field is just for your information, and whatever you enter here will appear in that empty list box you saw earlier and nowhere else. It also doesn't affect the operation of Dreamweaver or anything like that. To assuage your fears further, you can also return to this dialog box later to change the name if you find you prefer something else.
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.
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" the technical term or "publishing" the layman's term.
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. 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. 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. 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. Some just ask you to enter your domain name " example. If you are not sure what the FTP address for your site is, ask your web host. Guesswork is pointless. 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. 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.
Candyce Mairs – Adobe Certified Instructor
Note that I will assume that you have left the box checked in this tutorial, since that is what the majority of thesitewizard.
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.
If the test fails, 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.
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. 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 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". 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" without the quotes into the field. If they tell you to just use the default directory when you connect, leave this field blank. One last thing: The capitalisation of words is often important on the Internet.
If they tell you to use "www" to store your website files, make sure you put "www" and not "WWW" in the "Root Directory" field. You'll be returned to the "Site Setup" dialog box. Your entry should also be displayed in the list box on that page. Should you ever need to make changes to your settings, just click the pencil icon. 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.
You'll be returned to the "Manage Sites" dialog box. Click the "Done" button. 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, don't panic.
Just 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. This window will automatically disappear when the editor completes the uploading of your web page. You should now test your home page in a web browser. Although Dreamweaver does a good job of showing you what your page looks like, it is not really a web browser but a web editor.
There are some things that you can't properly check in an editor. To test your home page, type your website's address "URL" into your web browser's address bar. Type it directly into the address bar of your web browser. Do not append " index. If you have set things up properly, you should be able to view your home page in your browser, even though you didn't specify "index. If you get a " File Not Found " error instead of the web page you designed, or you get your web host's preinstalled default page , you may have entered the wrong directory name into the "Root Directory" field I mentioned earlier.
Go back and fix the error. That is, click the "Site Manage Sites You can then change your Root Directory to the correct location. When you've finished, be sure the click the "Save" button in both that dialog box as well as the "Site Setp" dialog box, and finally click the "Done" button in the "Manage Sites" window.
If you get a "No DNS for www. Another possibility is that you're using a web host that has not set up the "www" subdomain for you, and you typed in "www. Not all web hosts do this automatically for you. If this is the case, try typing your URL without the "www" prefix, for example type " http: 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. In the next chapter of the Dreamweaver CS5.
All rights reserved. Get more free tips and articles like this , on web design, promotion, revenue and scripting, from https: Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.
This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form. To link to this page from your website, simply cut and paste the following code to your web page. Switch to your web editor's HTML source mode before pasting. Creating a Two-Column Web Page. Featured Products Dreamweaver Site: You are here: This page was last updated on 27 April Search This Site.
Beginners Created: October 26, Size: Kennesaw State University Downloads: Summary on tutorial Adobe Dreamweaver CS5.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. The capitalisation of words is often important on the Internet. 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.
To use it, go to the code view and right click the part you want to edit. The first step is to give your site a name. In layman's terms, a web host is basically a company that has computers that are permanently connected to the Internet. The web page is currently filled with some placeholder text that you will be replacing with your own content. In fact, you will be replacing everything in this column with your own content in this chapter.