In the earlier issues we worked with some simple web design tools. Those tools were easy to use and they are ideal to get you started with your web site. Once your site grows larger you will feel the need of a “site management” tool that not only helps you build pages but also keeps track of your entire site. Dreamweaver is one such tool. Dreamweaver tracks your entire site structure and automatically updates links between pages when you move your files.
We are using Dreamweaver MX, but the steps outlined here will work on the earlier versions too. Dreamweaver requires you to define a site before you can start working on individual pages. This “Site Definition” allows Dreamweaver to track your site.
1) Site Definition
a) Before you can create a new site you need to create a new folder on your hard disk. Give a name to this folder "mysite". Avoid using a name that has a space in between ( use "my_site" instead of "my site").
b) Creating a new site
Start up Dreamweaver and from the top menu choose Site -> New Site .
setting up a new site
c) Site Definition: Dreamweaver will open up this window asking you to input some site specific information.
site definition
In the Category field select “Local Info”. Under this section fill in the following information
Under Site Name type in the name you want to give to your site for example " Korea – People and Culture"
The “ Local Root Folder” specifies the folder where your files are stored. Click on the yellow folder icon to select the folder you created in step a.
We will skip the Web Server Info and the remaining items under the Category field as we do not need them now.
Click on the “ OK” button.
There are two distinct regions on the screen. The left hand side shows your "Remote Server" – the web server one which we will eventually transfer your files. Currently, we do not have a remote server, so it shows up blank. The right hand site shows your local files. This area is also blank as we have not created any web pages yet.
The next time you run Dreamweaver on your computer , you may not see your site. To open your site choose Site -> Open Site .
Opening your site.
To change a site definition: Site -> Edit Sites . A window is displayed with all the sites that are defined on that computer. Choose the site you want to work on and click on the “ Edit“ button . This will load up the site properties again for you to modify.
2) Creating a New Web Page
a) To create a new web page inside your site, right click on top most line in the "Local Folder"(the right hand side of the screen) section. From the menu choose - New File.
right click on the topmost line and select “New File”
b) By default this new file has a name - untiltled1.htm. You can change this name by clicking once the file name and overwriting the existing name. Again, avoid spaces in the file name. If this file is going to be your main page, name it “index.htm”.
3) Entering Text in a Dreamweaver Page
Typing into Dreamweaver is just like typing in Word or other text editors. To change the properties (Color, Fonts etc.) of text use the property window. You can get the property window by choosing Window-> Properties from the top menu.
Highlight the text and use the property box to change the color, font etc.
We generally use Tahoma or Verdana font and keep the font size at 2. These two fonts are clearer on the screen.
In Dreamweaver when you type the “Enter” or “Return” key, it takes you to the next paragraph. If you want the next line, type “Shift” and the “Enter” key together.
4) Inserting images and other media files
Before we can insert media files into our web pages, make sure that you have copied them into the folder we are using. Generally, we crate a folder called “images” and store our pictures inside it.
Create a separate folder for your images.
a)An image can be inserted into an html file by selecting the following menu option from the top menu bar
Insert -> Image <specify the image file>
Inserting Images
b)The process for inserting a Video and Audio file
Insert -> Media -> Plugin <specify the AV file>
Embedding a video or Audio file
This process is called embedding . The video or audio is embedded in your page.
c) The process for inserting a Flash File
Insert -> Media -> Flash <specify the .swf file>
Linking Media Files
For large media files it is advisable to link them, instead of embedding them. When you embed a file, it will start loading when the user comes to that particular page. The user will have to wait for the loading.
a) To link just type in a short instruction for e.g. Click here to play a video. Highlight this phrase.
b) Open the property box. From the top menu select Window-> Properties .
b)In the property box browse to the required file by clicking on the folder icon. Select the file.
Now when the user comes to your page, he will see a link. Then he can decide to click on the link if he wants to see the video.
5) Hyperlinking
a) Highlight the text that needs to be hyperlinked.
b) Make sure that your properties box is open. If it is not active you can choose it from Window -> Properties.
c) Fill in the required URL in the Link Field. If it is a local file browse to the file. For an external web page type in the complete path. For e.g.. ( http://www.cnn.com ). The http:// part is required as without it your link will not work.
6) Tables
Tables makes your data look attractive and easy to read. Let's try building some tables.
a) To create a new table, choose Insert -> Table
Dreamweaver will give you this new window. Type in the number of rows and columns you want.
b) Setting table properties: Select the table by clicking on it or right clicking inside the table and choosing Table->Select Table.
The property box displays the numbers of rows and columns and some other table properties. You can change them by changing the numbers in the respective fields.
right click inside the table to get these table options.
7) Uploading the site to a server (using FTP)
a) From the top menu select Site -> Edit Sites. A new window appears that shows all the sites on your computer. Select the required site and click on the "Edit" button.
b) The site definition window appears. In this window select Remote Info. In the Access field type select FTP. Type in your FTP host address. This address is usually in the form - ftp. <your host name> .com for eg.. ftp.geocities.com or ftp.tripod.com. Fill in your login name and password. You may have to refer to your system administrator or the documentation that your ISP gave you to get the ftp address, login and password details. Leave the Host Directory field blank (unless something else is specified by your ISP). Finish by clicking on the “OK” button.
Remote Info – Fill in the FTP, Login and Password fields here.
c) You will get back to your site window. From the top menu select Site -> Connect. Once you are connected, you may see some files on the left hand part of your screen. This part shows the remote server. The right side shows your local files (the files on your computer).
d) (From the right hand side) Click on the file that you want to upload (you can control-click to select multiple files). From the top menu, select Site->Put. This will copy the selected files to the server. You may get a pop-up window asking you if you want to upload the dependent files. “Dependent files” refers to images and other linked files. Click on “OK”.
e) To upload multiple files, you can also choose Site -> Synchronize. The “Synchronize” option automatically updates all the files that have changed since the last uploading session.
This work is dedicated to the Public Domain