- Let's take a look at the default two column web page generated by Dreamweaver. There is a horizontal bar stretching across the top part of your page labelled "Header". This is where you will place the visible name of your website. Under the header are two columns. The narrow left column, called the "sidebar" in Dreamweaver, is where you will eventually place your navigation menu. The wide right column, currently entitled "Main Content" is where you will place the bulk of your web page's content.
- Directly above "Header", in the part of the window that belongs to Dreamweaver rather than your web page, you should be able to see a section that says "Title:" followed by a field that currently contains "Untitled Document". This field is the text that the search engines will show as being the title of your web page when it displays the results of a search. It is also the text shown by a web browser in the title bar of the browser window when it displays your page.
Click somewhere in the word "Untitled", and use the delete or backspace key to remove the existing text. In its place, type the name of your website. For example, if your site is called "Example Company", replace "Untitled Document" with "Example Company".
Note that this title field is an internal field. The web browser does not display it in the body (visible portion) of your web page. As mentioned above, the field is only shown in the title bar of the browser window itself. If you're not sure what I'm talking about, look at the browser window of this tutorial now. Don't use the scroll bar nor scroll to the top in any way. Just glance upwards at the top edge of the browser window. It should have the words "Dreamweaver CS4 Tutorial: How to Create a Website with Dreamweaver CS4 (thesitewizard.com)" or at least the first part of it. I placed those words into the title field for this page when I created it. Although it doesn't show in the body of a web page, it is still an integral part of the page, so you should not leave it set as "Untitled Document".
- Now we move on to the visible portion of your web page. Begin by replacing the word "Header" with the name of your website. As before, you can do this simply by clicking somewhere in the word "Header". A blinking text cursor will appear. This text cursor behaves exactly the way the cursor behaves in a normal word processing program like Office or Word. You can move it with your arrow keys as well as use the DEL and backspace keys to delete characters.
Use the delete or backspace key to remove the existing word and enter your site's name instead. For example, replace "Header" with "Example Company" if that's the name of your site.
- Once you've figured out the above, it's a trivial matter to replace the "Main Content" section of the web page with your real content. As before, click somewhere in the words "Main Content", delete the existing text and replace with some appropriate content.
Once you're done with replacing the "Main Content" header, proceed to replace the "Lorem ipsum dolor" (etc) gibberish. Just click somewhere in the top line, delete them, and type your own words. Typing and editing of text in Dreamweaver works more or less the same as it does under a wordprocessor. If you need to create new paragraphs, hit the ENTER (Windows) or Return key (Mac).
The "H2 level heading" subtitle is there merely to show you that you can have subtitles in your documents as well. Replace it, along with the text below with whatever you want.
If you are really at a loss as to what to type, you can use the following example text, either literally or as a model. However, it's best to write something relevant to your website so that you don't have to go back and re-edit it later.
- Don't change anything in the left column (sidebar). You will be adding a navigation menu to this section in later chapters, so just leave it unchanged for now.
- Scroll down to the bottom of the page and locate the horizontal bar labelled "Footer". Replace the word "Footer" with anything you like. Many webmasters place a copyright notice in this section. Very briefly, a copyright notice is simply a sentence like "Copyright © 2008 by Christopher Heng". The copyright symbol, ©, can be inserted by clicking "Insert | HTML | Special Characters | Copyright" from the menu. For more information about copyright, see my other article on Copyright Issues Relevant to Webmasters, at http://www.thesitewizard.com/general/copyright-issues.shtml
- Once you're satisfied with your web page, save it by clicking "File | Save As...". A dialog box will appear. Type "index.html" (without the quotation marks) into the "File name" field and click the "Save" button.
IMPORTANT: make sure that you type the name "index.html" exactly as I gave it, entirely in small letters (lowercase) with no spaces in the word. Do not use any other name. Files with the name "index.html" are regarded as special files by most web servers. Published correctly, when a visitor accesses your website by just the domain name, like "http://www.example.com/", the web server will automatically deliver to them the "index.html" file in your site's main folder.
0 Response to "Dreamweaver CS4"
Post a Comment