- Brand NewFrom United StatesBuy It Now
Adobe Dreamweaver CS5.5 Windows GENUINE sealed full retail 65101272 Win 7 8 10
Brand NewFrom United StatesBuy It NowAdobe Web Premium CS5.5 Mac will activate OS X Sierra GENUINE retail
Photoshop Ext, Flash CS5, Acrobat X Pro, Illustrator, +From United StatesBuy It Now- Photoshop Ext, Flash CS5, Acrobat X Pro, Illustrator, +From United StatesBuy It Now
Adobe Creative Suite CS 5.5 Design Standard - Full Mac Version w/ product key
Pre-OwnedFrom United StatesBuy It NowADOBE INDESIGN CS5.5 UPGRADE for MAC OSX UNOPENED
Brand NewTime left17h 9m left0 bidsFrom United StatesCustoms services and international tracking provided+$20.22 shippingNEW Adobe Dreamweaver CS5.5: UPGRADE VERSION (Mac) - 65059247
Brand NewFrom Canadaor Best OfferNew ListingAdobe Creative Suite CS6 Master Collection - Full Retail Version
Brand NewFrom United StatesBuy It NowADOBE PHOTOSHOP CS2 Upgrade WINDOWS
New (Other)From United StatesBuy It NowAdobe Creative Suite CS6 Master Collection -Windows - Full Retail Version
Authentic & Genuine Adobe Software -No Subscription FeeFrom United Kingdomor Best OfferNew (Other)From United Statesor Best OfferCustoms services and international tracking providedAdobe Creative Suite CS6 Master Collection -Windows - Full Retail Version
Authentic & Genuine Adobe Software -No Subscription FeeFrom United Kingdomor Best Offer14 WatchingAdobe PhotoShop CS2 (aka Version 9) Windows Retail Full Version CD Serial Number
Pre-OwnedTime left3d 1h left27 bidsFrom United StatesAdobe FrameMaker 5.5 for Windows Retail Full Install CD Serial Number
Pre-OwnedFrom United Statesor Best OfferAdobe Photoshop CS4 for Windows will activate retail full retail version GENUINE
Pre-OwnedFrom United StatesBuy It Now
by Christopher Heng, thesitewizard.comDreamweaver CS5.5 is a web editor (a type of computer program) meant for both newcomers as well asexperienced professionals to design websites. It has a visual interface, often called a'What You See Is What You Get' ('WYSIWYG') interface, that lets you see what your web page looks likeeven as you create it. The editor sports numerous features that are meant to make your job of creatingand maintaining a site easier and more efficient.
Overall Goals of This Tutorial Series
By the end of this tutorial series, you will have created a fully functional website with multiple pages, complete witha home page, a site map, a feedback form, and an 'About Us' page (and any other page you may want to create). Your sitewill have a professional-looking navigation menu with buttons that change colour ('color' if you use adifferent variant ofEnglish) as your mouse hovers over it, and your feedback form will allow your visitors to send you email directlyfrom your website.
More importantly, you will have acquired the skills you need so that you can design other new websites in the future.
Goal of This Chapter
In this chapter, you will design a basic two-column web page that will serve as your website's main page,and place it on the Internet. You will be viewing that web page in your web browser at the completion ofthis chapter.
Please note that this is primarily a practical tutorial. To benefit from it, you will need to actually carry outthe things taught as you read. If you simply sit back and read the tutorial without doing anything,you may find some of the things mentioned here difficult to grasp (not to mention boring).
Requirements: Things You Will Need
Creating a website involves more than just using a web editor to design your web page. There are a few preliminary stepsthat you need to complete before you even start up Dreamweaver, such asregistering a domain name andfinding a web host. If you're new tocreating websites, I recommend that you readHow to Start / Create Your Own Website:The Beginner's A-Z Guide before continuing, otherwise you may end up confused as we proceed through this tutorial,since I will assume you have done those 2 things. Explanations of the meaning of a 'domain name' and 'web host' are alsogiven in that article. Don't worry, you can easily come back to this article when you've finished reading the beginner's guide.
At the very minimum, you will need the following:
Dreamweaver CS5.5
Since this is a Dreamweaver tutorial, you will of course need the Dreamweaver CS5.5 software itself.
If you have a different version of Dreamweaver, please see the appropriate tutorial for those versions instead.
While Dreamweaver CS6, CS5.5 and CS5 are almost identical, there are some differences between these andthe earlier CS4 and CS3. In general, you'll have an easier time learning the software if you read the tutorial specificallywritten for the version you have, since my descriptions and pictures will match what you see on your computer.
Unfortunately, if you have a version of Dreamweaver earlier than CS3, such as Dreamweaver MX / Dreamweaver 8, you will not be able to followany of the above tutorials unless you upgrade, since they use features not present in those early versions.
Web Hosting Account
Somewhere midway through this chapter, you will be transferring your web page to the Internet. For this tohappen, you will need to have a web host. In layman's terms, a web host is basically a company that has computersthat are permanently connected to the Internet. These computers are called web servers, and they run specialisedsoftware that will transmit your web pages to anyone who visits your website. For your website to be visible toothers in the world, you will need to transfer your web pages from your computer to your web host's web server.In other words, you will need to get an account at a web host.
There are many web hosts around. If you don't already have one, you can find a list of them at thefreecountry.com'sBudget Web Hosts pageat https://www.thefreecountry.com/webhosting/budget1.shtml
Note: if you're reading this because your course lecturer/teacher has referred you to this page, there's a chancethat your university or school has already allocated some space on its own web server to host your website.In such a case, you do not have to get a web hosting account. Find out from your lecturer or teacher.
Like I said, the above two are the minimum requirements. You should ideallyget a domain name too,otherwise you will run into the problems I mentioned in some of my other articles, such asIs it Possible to Create a WebsiteWithout Buying a Domain Name? The High Price of 'Free'.
Setting Up Your Website in Dreamweaver's Site Manager
Before you design your web page, you need to provide Dreamweaver with some basic information about your site.
Start up Dreamweaver.
When Dreamweaver starts up, it will probably look something like what you see in the picture below.It will not look exactly alike, since your computer monitor may be bigger than mine, and there may beminor differences depending on whether you're running Windows 7, Vista, XP or Mac OS X. (And theword 'thesitewizard.com' will of course not be there.)
You should be able to spot a line of text near the top of the Dreamweaver window saying 'File Edit ViewInsert Modify Format Commands Site Window Help'. (If your monitor is big enough, this should be at thevery top of the Dreamweaver window.) This is the menu bar. If you were to move your mouse over each ofthese words on that bar, Dreamweaver will highlight the word your mouse is hovering over, indicating thatthe word is a clickable item. For example, in the picture above, I moved my mouse over the 'Modify' menu,and Dreamweaver put a rectangular outline around that word. Clicking any word on this menu bar will causea drop down menu to appear.
(Note: if you have clicked one of the words on the menu bar to experiment, and caused the drop down menu to appear,and now want to get rid of it, just click the same word you clicked earlier, and the menu will disappear.)
We will be using this menu bar extensively in the course of this tutorial. The menu bar allows youto access many of Dreamweaver's features.
Click the word 'Site' on the menu bar. A drop down menu will appear. Click the line 'New Site...' on that menu.
Important: from this point onwards, in the interest of brevity, I shall refer to such a sequence of clicking itemsin the menu bar and in the drop down menus that appear as 'Site | New Site...'. For example, if I ask you toclick 'File | New...', it means that you are to click the word 'File' in the menu bar, followed by the line 'New...' inthe drop down menu that appears. (Please don't actually click 'File | New...' at this time. It's just an example.)
A dialog box will appear. The dialog box will probably have a title like 'Site Setup for Unnamed Site 2'.
Don't worry if it doesn't actually say 'Unnamed Site 2'. If you have experimented with Dreamweaver before readingthis tutorial, it may say 'Unnamed Site 3' or some other bigger number, depending on the number of times you'veactually invoked the site manager. Ignore the number; it's irrelevant. We'll be changing the entire text'Unnamed Site 2' (or whatever it says on your screen) to the name of your website.
There should be 2 fields in the dialog box.
Replace the default name given in the 'Site name' field with the name of your website. Your site name canbe any name that you want to give the site. If you're stuck, just put your domain name into thatfield. For example, if your domain name is 'example.com', type that into the field.
The 'Site name' field is not displayed on your website in any way. It's just an internal name used byDreamweaver, mainly to make it easy for you to distinguish between the different websites that you create.As such, you don't really have to worry too much about what you put here. Having said that, it's bestto put something sensible here instead of leaving the default name there, otherwise, if you eventuallyend up creating, say, 200 websites, you'll have a headache trying to figure which one of'Unnamed Site 2' to 'Unnamed Site 201' is the one you want to update.
The 'Local Site Folder' field refers to the location on your computer where Dreamweaver is to storeyour website files.
By default, Dreamweaver suggests a folder in your Documents folder (at least on Windows; I'm not sure about Macs). Forexample, on my computer, the suggested folder is '
c:UserschristopherhengDocumentsUnnamed Site 2
'. Yourdefault folder name will probably also include some dummy name like 'Unnamed Site 2' (or some other number). You can clickthe folder icon next to this field and select a different location if you wish.I recommend that you at least change the default folder name from 'Unnamed Site 2' to the same name you putin the 'Site name' so that it's easier for you in the future to recognise which folder belongs towhich site. Be careful to change only the portion with the words 'Unnamed Site 2' (or whatever number you are given)and not the preceding words on that line (like 'c:UserschristopherhengDocuments'), otherwise you may accidentallyput your folder in some obscure location on your computer, and not be able to find it later.
If you find the instructions given in the above 2 paragraphs too complicated or stress-inducingbecause you're not sure how to carry it out, just skip it. While it's helpful to change the folder name toyour site's name for your future ease of finding it, the benefit gained is very small, and not worth gettingstuck over.
When you're done changing the two fields above, click the 'Save' button found near the bottom of the'Site Setup' dialog box. The dialog box will disappear, and you'll be returned to the main Dreamweaverwindow. You're now ready to create your first web page.
How to Create a Two Column Web Page with Dreamweaver CS5.5
If you were to carefully observe the websites that you visit, you will notice that some websiteshave all their content laid out in a single column. For example, you'll find such a layout on theFeedback Form Demo Site (a site you will probablyvisit again in chapter 8 of this tutorial). A large number of sites, however, present their contentin 2 columns. You need look no further than this very page you're reading: the left column holdsthings like thesitewizard.com's logo at the very top, followed by a search field and a navigationmenu (the part that looks like a series of buttons laid out vertically). The right column holds thetext of this article, that is, the main content of the page. Web pages can also have more than2 columns; for example, my SiteMap uses a 3 column layout.
Note: if you're reading this chapter from a modern smartphone, you may not be able to see two columnson this page. I've moved the left column to the bottom for devices with very small screens to givemore space to the main article, and hopefully make it more pleasant to read.
In this tutorial, you will be creating a two-column website. This is a popular layout because it is bothspace-efficient and familiar to Internet users. When your visitors are familiar with a layout, they willfind it easy to use, since they will know where to find things on your web page and know how to navigateyour site. Creatinga user-friendly website is very important, since it allows your visitors to achieve their goals onyour site.
Click 'File | New...'. If you will recall from what I said earlier, this means to click 'File' onthe menu bar, followed by 'New...' in the drop down menu that appears.
You will see a dialog box with a title of 'New Document'.
Make sure that 'Blank Page' is selected in the leftmost column. If not, click it once to select it.If you're not sure whether it's selected or not, just click it anyway.
Click 'HTML' in the 'Page Type' column (the 2nd column from the left) once to select it. (It is probablyalready selected by default, but it will do no harm to click it if you're not sure.)
In the 'Layout' column (the 3rd column from the left), click the line that says'2 column liquid, left sidebar, header and footer' once to select it (see the picture above).This action selects a two column layout for your website.
Look for the field 'Layout CSS' in the rightmost column. It's near the bottom of the dialog box(see the picture above). Click the drop down box for that field, and select 'Create New File'.
This action causes Dreamweaver to save all information governing the appearance of your website(called 'CSS') in a separate file. Since the pages on your site share a common layout, locatingthe CSS in a single file avoids duplication of information and reduces the amount of disk spaceyour site needs. It also speeds up the loading of your pages and reduces the bandwidth usedshould your users visit multiple pages of your website.
Click the 'Create' button located near the bottom of the dialog box.
A dialog box with the title 'Save Style Sheet File As' will appear. Click the 'Save' buttonon the dialog box.
Dreamweaver should now display a web page containing some placeholder content for your modification.
Introduction to The Home Page
Since you'll be working on your home page in this chapter, it's important to know what you're actually trying toachieve here.
The first page that you'll be designing is your website's 'home page'. The home page is basically justanother name for the main page, the page your visitors arrive at if they simply type thedomain name ofyour site. For example, if you type 'thesitewizard.com' into your browser, you will end up at myhome page.
Functionally, a site's home page is similar to the combination of a magazine's front cover and its contents page.Like the front cover, your home page should give your visitors an idea of the sort of things that can be found on yourwebsite. And like the 'Contents' page, it should provide links to important pages (or sections) on your websiteso that your visitors can get to wherever they need to go on your site.
In practical terms, this means that if you sell products and services on your site, your home page should probablymention your most important products and services. Not only that, it should also link to other pages on yourwebsite where visitors can find more information and place an order. Even if you are just creating a personalwebsite, or a hobby website, you should still try to give your visitors an idea of the sort of things theycan expect to find on your website.
Designing Your Home Page in Dreamweaver CS5.5
Layout of Your Web Page
Before we get round to modifying the page Dreamweaver created for you, let's familiarise ourselves withits layout.
Horizontally, the web page comprises 3 sections. Notice that the top band currently contains a rectangle withthe words 'Insert_logo (20% x 90)' flushed to the left. You will be removing this placeholder rectangle andreplacing it with your own logo in chapter 2.
Now scroll to the bottom of the page. You can do this by either hitting the PgDn key on your keyboardor by dragging the scroll bar on the right of the screen with your mouse. (If you use PgDn, you mayfind that Dreamweaver highlights some parts of the web page. Just ignore it.) The horizontal band cutting acrossthe bottom of your web page is commonly referred to as the footer. You will replace the dummy textin this footer with your own content later in this chapter.
Return to the beginning of the document (either by using PgUp or by dragging the scroll bar withyour mouse). (If you want to get rid of the highlighting that Dreamweaver puts on your text when you usedPgUp and PgDn, just click somewhere on the page. For example, click the 'Insert logo'rectangle once. The highlighting will disappear.)
The bulk of the web page is divided into 2 columns. The left column contains the skeleton of a navigation menu,somewhat akin to what you find in the left column of thesitewizard.com. The right column currently hasa bunch of instructions written in technical jargon. Don't worry about trying to decipher what it means. Theparts relevant to you will be translated into plain English in thisDreamweaver CS5.5tutorial series. In fact, you will be replacing everything in this column with your own content in thischapter.
Page Title
Directly above your web page, in the portion of the window that belongs to the Dreamweaver program rather thanthe page itself, there is a field called 'Title' that has the default entry of 'Untitled Document'. Look at the picturebelow if you can't find it.
Click your mouse cursor somewhere in the words 'Untitled Document', then use the Backspace or Delete keyson your keyboard to erase the existing text. In its place, type the name of your website. For example, ifyour website is called 'XYZ Company', enter 'XYZ Company' (without the quotes) into that field.
The 'Title' is a very important field on your web page. Although the words you enter there do not appear inthe body of your web page (the visible portion that you surveyed in the first step), they are treated speciallyby both web browsers and search engines. For example, web browsers put the text you enter here into the titlebar of the web browser itself (or perhaps on the browser tab for web browsers that have no title bar). Takea look at the title bar of your web browser now, to see what I mean. Do not scroll upwards or click anywhere.Just glance upwards to the top of your browser window. The title of this document, 'Dreamweaver CS5.5Tutorial: How to Design a Website with Dreamweaver CS 5.5 (thesitewizard.com)', or at least the first partof it, should appear somewhere in the top frame of the browser window (ie, the title bar), or in the browsertab, or both. This same title will appear in search engine listings for the page.
In view of this, you should always make it a point to change the 'Title' field of your web page to something otherthan 'Untitled Document'. For the home page, set it to the name of your website. If you like, youcan also add a few words after the name describing the purpose of your website. For example, at the time I wrote this,Amazon.com's home pagehas its name and the words 'Online shopping' (followed by a very brief summary of things they sell) for its title tag.Try not to make the title too long, though. While there's no arbitrary limit to its length, if your title is too long,web browsers and search engines will truncate it to fit it in the space they allocate for it.
Adding Your Content to the Right Column
You will now modify the text in the right column of your web page. This is the portion that starts off withthe large bold heading 'Instructions'. Essentially, you will be replacing everything in this column withyour real content.
Adding or modifying text in Dreamweaver works pretty much the same as adding or modifying text in a program like MicrosoftWord or any other word processorprogram. That is, click your mouse to put a text cursor in the right column. For example, click somewhere inthe word 'Instructions' in the right column. You can then use the arrow keys (on your keyboard) to move your text cursoraround, and the Backspace and Delete keys (again, on your keyboard) to remove text that you don't want. To inserttext, just type whatever you want, and it will appear on your page at the spot where your text cursor is. (Yes,it's that simple.)
For starters, I suggest that you replace the words 'Instructions' with the name of your website. I know thatyou've already put the name of your company in the Title field. However, as the title field is not actuallydisplayed on your web page, it's a good idea to actually put your site name somewhere on the page as well.(This is not a hard and fast rule, since it's also possible to just put your site name in your logo alone. You'llbe inserting your logo into the blank space above the words 'Instructions' in chapter 2.)
After that, move your cursor to the paragraphs and sub-headings below and replace the existing contentwith your own. If you're not sure what to write, review the sectionIntroductionto the Home Page above. Those who are at a complete loss as to what to say can take a lookat the text for the home page for a fictitious company below. You will obviously not be able to use it verbatim,since your company is unlikely to be selling the same things, but it can be used as a sort of model toget you started on the things you may want to put on your home page.
Example Co.
Example Co. is the world's leading business dealing with all manner of examples. We have examples of famous literature,not-so-famous pulp fiction, pop music, movie and television DVDs, office paraphernalia, and so on. Our selection ofexamples is so extensive that we even have examples of examples.
Featured Products
Dreamweaver Site: This is an example of a Dreamweaver site, created using thesitewizard.com's tutorial onDreamweaver. The tutorial shows you how to create a basic but fully-functional website which you can modify andaugment 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). It even works during ablackout, since it doesn't require electricity. It uses a natural source of power: your fingers.
If you're experiencing writer's block, as I'm sure some of you are, just dump something on the page, evenif it sounds utterly mundane. You can always come back and polish it later. It's generally easier to modifya rough copy of what you want to say than to stare at a blank page hoping that inspiration will strike youwith the ideal set of words.
For now, don't worry about changing fonts, putting text in bold or italics, inserting pictures, or any otherthing that you may feel is necessary to spruce up the appearance of the page. Just concentrate on gettingyour words down. Improving the visual appearance will be done in the chapters to come.
How to Make a Sub-Heading in Dreamweaver CS 5.5
If you have deleted all the placeholder subheadings, and want to insert a new one for your own content,for example, like the 'Featured Products' subheading in my example text above, do the following.
Hit the ENTER key to move your text cursor to a new line. (Yes, the heading must stand on its own line.)
Type the text for your heading on that new, blank line.
Drag your mouse over the words you typed to select it.
Dragging your mouse over the heading means to click your mouse button when the pointer is positioned before the first character, then, without releasing the mouse button, move the mouse pointer to the end of the text you want to select. Notice that all the text in-between is highlighted when you do so. Release the mouse button when you're done. Do not click anywhere else before the next step.
With the text that you want as the header selected, click 'Format | Paragraph Format | Heading 2'. By way of reminder, this means to click the 'Format' menu, followed by 'Paragraph Format' in the drop down menu that appears, and finally 'Heading 2' in the submenu that is displayed.
'Heading 1' is meant to be used as the heading for your entire web page, such as your main page title (the word 'Instructions' that you replaced earlier). 'Heading 2' should be used as the heading for the major sections on your web page. If your major sections have subsections, use 'Heading 3' for each of those subsections. And so on.
About the Left Column
Do NOT change anything in the left column. Ignore the fact that your left and right columns have unevenheights. The left column will be dealt with in chapter 6, since it requires you to have additional knowledgebefore you can work on it.
Customising The Footer
When you have finished working on the right column, scroll down to the bottom of the page to the footer section.If you will remember from the first step, this is the bottommost horizontal band that spans both the left and right columns.
At this time, like the rest of the page, the footer contains some technical instructions. Replace the textwith whatever you want. Many webmasters put a copyright notice in this section. A copyright notice issimply a sentence that says something like 'Copyright © 2011 Christopher Heng'. You caninsert the copyright symbol'©' by clicking 'Insert | HTML | Special Characters | Copyright' from the menu. For more informationabout copyright, please read the articleCopyright Issues Relevantto Webmasters at https://www.thesitewizard.com/general/copyright-issues.shtml
Saving Your Work with the Correct Filename
Once you are 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 clickthe 'Save' button.IMPORTANT: do not use any name other than '
index.html
' as your filename. Make sureyou type it exactly as I mentioned, completely in small letters (lowercase) with no spaces in the word. Do notuse any other name. The name 'Index.html
' is wrong, as is the name'INDEX.HTML
'. Use only 'index.html
'.Reason: the name '
index.html
' is a special name that is recognised by mostweb servers. If it ispublished 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'redesigning your home page.
How to Publish / Upload Your Web Page with Dreamweaver CS5.5
You will now publish your page to your web server. That is to say, you are about to transfer your web page and itsassociated files to your web host's computer so that it can be viewed on the Internet.
I'm sure some of you are probably appalled to read this, since the page is far from complete. But thereis really no cause for concern here. Since your website is new, and you have not advertised your website's address (called'URL' in webmaster lingo) to anyone, no one will even know your website exists. Not even the search engines.As such, you are the only one who will see your unfinished web page. As you will discover in time, it's not that easyto get visitors.
The main reason that we're publishing your page now is to allow you to become familiar with all the major stagesof the design of a web page: that is, creating a web page involves not only crafting the page, but alsogetting it from your computer onto your web host's computer. Once you get this hurdle out of the way, you willhave 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 importantreason for publishing now is to let you test your design in a web browser when your page is onthe Internet. Even though you can always test your site on your own computer, it's not the same. It's possible to makemistakes that don't show when your page is on your computer, but appear only when it is on the Internet. Testing yourpage 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 futurechapters, and you may find it difficult to follow what I'm saying there if you skip this.
Click the 'Site | Manage Sites...' menu. A dialog box, 'Manage Sites' will appear.
Click the 'Edit...' button. This opens up a dialog box 'Site Setup for [your site name]' where'[your site name]' will be replaced with whatever name you entered when youfirstset up your site. The contents of the dialog box should also be familiar from your initial setup.
Notice that the word 'Site' is currently selected in the left column of the dialog box. Click theline with the word 'Servers' under that. 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. Under thatempty box is a sequence of four buttons, a bold '+' (plus sign) and 3 other buttons that are greyed out (disabled).Click the '+' button.
In the untitled dialog box that appears, click the 'Basic' tab at the top of the page. (It's probably alreadyselected, so clicking it should not change anything on the screen. In any case, just click it to make surethat 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.com', you can enter 'example.com's server'. This field is just foryour information, and whatever you enter here will appear in that empty list box you saw earlier and nowhereelse. 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 hostingaccount. Web hosts usually send you a lengthy list of details about your account when you first sign up. Among theseis something known as your 'FTP address' (sometimes called 'FTP hostname' or 'FTP server' by web hosts). FTPstands for 'File Transfer Protocol'. It is the usual method by which you transfer your web page from your computerto your web host's computer. This act of transferring your files from your system to your web host's system isknown 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 anotherwindow on your computer so that you can refer to it. I personally prefer to open it in another window so that I cansimply cut and paste the information from that window into Dreamweaver, thus avoiding typing errors. However, dowhatever 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 webhost, 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
'. Checkthe 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 toyou. 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 surewhat 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.
Enter your FTP user name and password into the 'Username' and 'Password' fields respectively. Obtain this information fromyour 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 youare sharing your computer with others, and don't want Dreamweaver to save your password, click the box containing the tickto uncheck it. Note that I will assume that you have left the box checked in this tutorial, since that is what the majority ofthesitewizard.com's Dreamweaver readers do.
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 themfrom 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 orsome modification of your domain (like '
ftp.example.com
' where 'example.com' is your own domain name? If so, andyou've only just bought your domain namewithin the last 2 days, it's possible that your domain name has not yet propagated throughout the Internet. What this meansis 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 happenfaster.You can also ask your web host for help in checking your settings (in case you actually got your FTP address, username orpassword wrong). But remember that if the problem lies with a new domain name that has not propagated, you just have tobe 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 publishyour web page to any folder you want on the webserver, and expect it to appear on the Internet. Web hosts usually configure their computers so that only files placed inspecific folders are considered as part of your website. This is needed, otherwise anyone on the Internet can read yourprivate 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 youto 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 alsohosts 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 outby asking your web host.
Once you have the information, enter the folder name into the 'Root Directory' field. For example, if your web host tellsyou to publish your files to a 'www' directory, enter 'www' (without the quotes) into the field. If they tell you to justuse 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.The capitalisation of words is often important on the Internet. If they tell you to use 'www' to storeyour website files, make sure you put 'www' and not 'WWW' in the 'Root Directory' field.)
Click the 'Save' button when you've finished configuring the FTP settings.
You'll be returned to the 'Site Setup' dialog box. Your entry should also be displayed in the list box on that page.Notice that the icons next to the '+' that you clicked earlier (under the list box) are now enabled. Should you everneed to make changes to your settings, just click the pencil icon. The pencil icon can be found immediatelyafter the '+' and '-' icons.
For now, click the 'Save' button on this window. Dreamweaver may issue a dialog box with the message 'The cachewill now be recreated because the name, root folder, HTTP address, or cloaking settings of the site have beenchanged.' Click 'OK'. You'll be returned to the 'Manage Sites' dialog box. Click the 'Done' button.
It's now time to publish (upload) your home page. To do this, click 'Site | Put'.
When a dialog box with the title 'Put dependent files' appears, click the 'Yes' button. Dependent files are the additionalfiles 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 yourweb page will notlook 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'tpanic. 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 disappearwhen the editor completes the uploading of your web page.
Testing Your Home Page
You should now test your home page in a web browser. Although Dreamweaver does a good job of showing youwhat your page looks like, it is not really a web browser but aweb editor. Thereare 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. (Note: don'tuse Google, Bing or some other search engine to do this. Type it directly into the address bar of your web browser.)For example, if your domain name is 'example.com', type '
http://www.example.com/
'. Do notappend 'index.html
' to your address. If you have set things up properly, you should be able to view yourhome page in your browser, even though you didn't specify 'index.html'.If you get a '404 File Not Found'error instead of the web page you designed, or you get yourweb host's preinstalleddefault 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...' menu item, click the 'Edit...' button, clickthe 'Servers' line in the left column, click the name of your server in the list box on the right side to select it,and click the pencil icon under the list box. You can then change your Root Directory to the correct location. Whenyou'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.example.com' or 'Domain not found' error, you may be facing the domain propagationissue I mentioned earlier (where a domain is so new that it is still not yet recognised by your Internet broadbandor dialup provider). Another possibility is that you're using a web host that has not set up the 'www' subdomainfor you, and you typed in 'www.example.com' into your browser. 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://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 publishedyour first web page using Dreamweaver CS5.5. It may be a raw and unfinished page (for now), but you have successfully walkedthrough all the essential steps of designing and uploading a web page.
Next Chapter: How to Add Pictures to Your Website
In the next chapterof the Dreamweaver CS5.5 Tutorial, you will learn how toadd pictures and a logoto your website.
Copyright © 2011-2018 Christopher Heng. All rights reserved.
Get more free tips and articles like this,on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.You are here:
Top »Getting Started with Your Website »
How to Create / Make Your Own Website: The Beginner's A-Z Guide »List of All Dreamweaver Tutorials »
Do you find this article useful? You can learn of new articles and scripts that are published onthesitewizard.comby subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds athttps://www.thesitewizard.com/thesitewizard.xml.You can read more about how to subscribe toRSS site feeds from my RSS FAQ.
This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.
It will appear on your page as:
Copyright © 2011-2018 Christopher Heng. All rights reserved.
thesitewizard™, thefreecountry™ and HowToHaven™ are trademarks of Christopher Heng.
This page was last updated on 27 April 2018.
- Blog
- Home
- Face Value Alexander Todorov Pdf Download
- Bink-support For Sr1
- The Spriters Resource
- Arcsoft Showbiz No Video Signal Detected
- Art For Beginners Pdf
- Siberian Mouse Msh 45. 386.7 Mb Torrent
- Focus Mk3
- Ponniyin Selvan Audio Book Free Download
- Old Doordarshan Serials Free Download
- Calibre Reviews Software
- Exe To Apk Converter Online
- Lock Pdf Foxit Reader
- Independent Investigations Group Laser
- How To Grow Microgreens Pdf Free Download
- Chushingura 46 1 Whole Game Download
- How To Activate Adobe Dreamweaver Cs5.5
- Windows Sound Schemes
- Canon Ir3045 Driver Download
- Road to fame mod sims 4 how to downloade
- How do i download dishonored 2
- Teamviewer license key free
- Skype without microsoft account
- Hulu free 30 day trial
- Hacking programs for windows 10
- Pirate bay photoshop cs6
- Vocalign pro and samplitude
- Hp laserjet p1006 manual feed
- Trend micro antivirus download
- Wondershare video converter ultimate mac torrent
- How to extract audio from video sony vegas
- M-audio midisport uno usb