3:32 AM
3
Steps to Designing Your Dreamweaver Site
Take a look at the page that is displayed. You will see that there is a band spanning the entire top row of the page. The words in that band currently read "Header". Below that there are two columns: a narrow left column, called the sidebar, and a wider right column with the heading "Main Content". All the text that is given in the window can be replaced by your own content.

To replace the content, simply click on the word you wish to replace, delete it and type your own. The first thing you should do is to replace the word "Header" with the name of your website. To do this, click somewhere in the word "Header". A blinking text cursor will appear. Using the delete or backspace key as needed, delete "Header". Type the name of your website. If you don't know what to type, type in your name or your company's name. For the example site that I create here, I will replace "Header" with the words "Example Company".

Directly above where you typed to replace the "Header" text is a small edit box with the words "Untitled Document". Click the word "Untitled". Use the delete or backspace key to remove the existing text and replace it with the name of the site you typed earlier. This will be the text that the search engines show for this web page when it displays the results of a search. Again, for this tutorial's example site, I will simply replace it with the word "Example Company".



You should now replace all the text in the right column with your own text. Simply click on the "Main Content" title and replace it with some appropriate content. You can take a look at the text that I will be using below as an example. When you've finished with that, click on the "Lorem ipsum dolor sit amet" (etc) words, delete them and replace them with your message. Typing and editing of text within the page works more or less like it does under a wordprocessor. If you need to create new paragraphs, simply hit the Enter key (Windows) or the Return key (Mac OS X).

Repeat the process with the "H2 level heading" subtitle and the words that follow. Just replace it with whatever you want your website to display. If you want, you can replace the words with the example text below. However, it's best to write something that is relevant to your site so that you don't need to go back and re-edit it later.

Welcome
Example Company deals with all manner of examples. We have examples of literary works, pulp fiction, text books, movie reviews, scripts, chairs, tables, household appliances, and so on. We even have examples of examples.

Featured Product
Dreamweaver Site: This is an example of a Dreamweaver site, created with the help of thesitewizard.com's tutorial on Dreamweaver. The tutorial teaches you how to create a basic but fully-functional website which you can modify and augment to suit your needs.

Leave the left column (sidebar) alone for now. We will add a navigation menu to this section in later chapters of this tutorial.

Scroll down to the bottom of the page and replace the word "Footer" with anything you wish to put at the bottom of the page. For example, you can place your copyright notice in place of this word. If you need to insert the copyright symbol, "©", click "Insert | HTML | Special Characters | Copyright" from the menu.

Once you are satisfied with your page, click "File | Save As...". A dialog box will appear asking you where to save the page. Type "index.html" (without the quotes) into the "File name" edit box, and click the "Save" button.
Be sure to type the name "index.html" exactly as I gave it — that is, entirely in small letters (lowercase), with no spaces in the word. "index.html" is a special name in that it is regarded as the default file name for most web servers. When you publish that page to your website at (say) http://www.example.com/, the index.html page is the one that will be displayed when a visitor types "http://www.example.com/" without any filename. It is thus very important that you do not change the name of the file to something else.

Uploading or Publishing Your First Web Page with Dreamweaver: Preamble
Before we proceed to polish the page so that it looks at least half-way decent, we need to publish the page to your web host. One reason we're going to do this now, even before we've finished the page, is that Dreamweaver needs the information about your actual website's address (or URL) before it can correctly handle things like links and images on your web page. Even though you entered it earlier when you set up your site, it only integrates such information into its system when you publish your page. So even though the page is probably an embarrassment to you at this stage, please complete the following steps, or you will encounter problems later.

Don't worry about the page being so plain. If you've not advertised your website's address (URL) to anyone, no one will even know your site exists, so this preliminary version of your page will be seen by no one but you. People will not visit your site out of the blue just because you happened to sign up for a web hosting account today. It's not that easy to get visitors.

Another reason that you're publishing your page at this time is so that you can get familiar with both the major stages in the design of a web page. Once you get this hurdle out of the way, and you know how to get your web page from your computer into your web host's computer, you have mastered what is arguably the biggest technical challenge a newcomer is likely to face. Don't let this scare you though — it's actually quite easy!

Steps to Publishing / Uploading Your Dreamweaver Site
To publish your website, start up the Site Manager again. To do this, click "Site | Manage Sites...", that is, click on the "Site" menu followed by the "Manage Sites..." item on the menu that appears. In the dialog box that appears, click on your website's name, then the "Edit..." button.

The dialog box you encountered when you first set up your website appears. Click "Next..." until you come to the screen with the message "How do you want to connect to your remote server?" In the first part of the tutorial, we selected "None". We will now change it to the actual values we need for uploading (publishing) your web page. In the drop down box, select "FTP".

Basically you will need to enter the information that your web host provided you when you first signed up for a web hosting account. Web hosts typically provide you with a whole bunch of details about your account when you first sign up. Among these is something known as your "FTP address". FTP, or File Transfer Protocol, is the usual means by which you transfer your web pages from your own computer to your web host's computer. Transferring your pages from your computer to your web host's computer is known as "publishing" or "uploading" your pages.

In the empty box for "What is the hostname or FTP address of your Web server?" enter the FTP address that your web host gave you. If you have your own domain and are hosted on a commercial web host, this address is typically your domain name prefixed by "ftp". For example, if your domain is "example.com", many web hosts set up your FTP address as "ftp.example.com". Check the email you received from your web host for more details, or ask them if you cannot find the details. If the address is indeed "ftp.example.com", enter that in the box here.

To answer "What folder on the server do you want to store your files in?", check the message from your web host again. Some web hosts tell you that you need to place your web pages in a folder called "www". Others require you to place them in a "public_html" directory. Still others say that you are to place your files in the default directory that you see when you connect by FTP.

If your web host tells you to simply upload the files when you connect via FTP, leave the box blank. Otherwise if they tell you that you need to publish your files in a "www" directory or some other folder name, enter that folder name in the box given. If the host does not mention this at all, chances are that you can simply leave the box blank.

Enter your FTP user name or login name into the box for "What is your FTP login?". Again, this information has to be supplied by your web host.

Enter your password in the box for "What is your FTP password?". Get your password from your web host if you don't already know it. If you don't want to have to keep entering your password every time you publish your page, you can leave the "Save" checkbox activated. Otherwise, if you are sharing your computer with others and don't want Dreamweaver to save your password, you can uncheck the box.

If you like, you can click the "Test Connection" button to check that you have entered all the information correctly. When you are finished, click "Next..." and "Done" to complete the configuration.

Finally, to publish your website, click "Site | Put". When Dreamweaver pops out a message asking you whether it should "Put dependent files?" answer "Yes". This merely means that it is to upload things like your images and CSS files that are required by your web pages.

3 comments: