Di atas semua permintaan rakan-rakan, di sini saya postkan tutorial ringkas bagaimana membina website menggunakan Dreamweaver secara basic. Selebihnya diharap rakan-rakan dapat explore sendiri kerana terlalu banyak features dreamweaver dan website untuk dimuatkan di dalam tutorial ini. Diharap membantu...Hamzah
Start up Dreamweaver.
You will be greeted with a window with a top-half looks something like the picture above (without the words "Dreamweaver Tutorial thesitewizard.com" of course). Your picture may be slightly different depending on whether you are using Mac OS X, Windows XP or Windows Vista.
If you look at the top part of the window, you will see a menu bar that reads "File Edit View Insert Modify Text Commands Site Window Help". We will be accessing a lot of Dreamweaver's features via this menu bar.
The first thing you will need to do is to define your site in Dreamweaver's Site Manager. Click the "Site" menu item on the menu bar. A drop-down menu will appear. Click the "New Site..." item in the menu bar.
A dialog box will appear with words to the effect "Site Definition for Unnamed Site 1". The number that follows the word "Site" may be different if you have ever used Dreamweaver to set up a site before. Don't worry about that. We are about to change it anyway.
At the top of the dialog box is the "Basic" tab. If it is not currently selected, click on it to select it. If you're not sure, just click on it.
In the edit box for "What would you like to name your site?", type in the name you wish to give to your site. I will assume that you have typed "Example Company" in the box.
Once you have done the above, enter the web address of your site in the box following the question "What is the HTTP Address (URL) of your site?". - skip this one
Click the "Next" button at the bottom of the window to proceed to the next screen.
Accept the default "No, I do not want to use a server technology" for now. Click the "Next" button again.
The next screen allows you to define where Dreamweaver saves the files you create. The default is to place the files in a folder with the same name as your website. You can change the location if you wish. Note that this folder merely determines where on your computer the website files are saved. You will be taught how to publish those files to your web host in a later step. It is always good practice to keep a copy of your website on your own computer. If you don't know what to do here, just accept the default.
When you click "Next", you will be asked "How do you connect to your remote server?". For now, select "None" in the drop-down box and click "Next" again. You will then be given a "Site Definition" summary. Click "Done".
Creating a Simple Two-Column Web Page with Header and Footer
You will now create the main page of your website. For the purpose of this tutorial, we will be creating a two-column web page for the main page. A two-column web page basically means that the page will have two vertical columns. Websites typically use one of the columns to hold the website's logo and navigation buttons and the other column to hold the main content.Click "File | New". That is, click the "File" menu followed by the "New" item on the menu that appears. A new window entitled "New Document" will appear.
Look in the "Layout" column in the window that appears and locate the item "2 column liquid, left sidebar, header and footer". Select the item by clicking on it once.
Look at the rightmost side of the same window and locate the item "Layout CSS". Click the drop-down box and select "Create New File". This will cause Dreamweaver to save certain types of information about the appearance of the web page (called CSS) in a separate file. One of the ways in which this is useful is that when we design other pages of the site, we can reuse the same information by simply loading it from the same file.
Click the "Create" button.
A dialog box entitled "Save Style Sheet As" appears. Accept the default name and location by simply clicking the "Save" button.
Dreamweaver now presents you with a page with two columns with some dummy content typed in. We will be replacing some of the dummy content with our own content.
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.
