Learning Center
Plans & pricing Sign in
Sign Out



									Building a Website with Dreamweaver

Starting Dreamweaver CS3
The programming language on which all web pages are designed is the
Hyper Text Markup Language abbreviated as HTML which is already a
declarative language. But even this declarative language is now replaced
by html editors which you can use to design your web page as if you are
writing a word document and it will do the rest of the job for you by
itself. It will write the code, it will format your page, it will link it to
where you want and it can even publish it for you. The most extensively
used html editors are: The Mazola, the FrontPage, the Expression web
and the Dreamweaver. Now designing a web page is no more a science it
became a hand craft that anyone can teach himself to do.

Adobe Dreamweaver Creative Suite are many versions given the codes
CS1, CS2, CS3, CS4 and the last version is CS5 which appeared in 12
April 2010. What we have in our labs and what we are going to use here
is CS3 which is a well-known commercial web editor that enables you to
design, build and manage complex websites. With this Dreamweaver CS3
you can create your web page visually and whatever you see on the
screen while designing is what you will get when your site is loaded in a
normal web browser and it will automatically create the HTML for the

What You Will Learn From This Topic of CMPS100
By the end of this topic, you will create a complete website with multiple
pages, including a home page. Your pages will contain a sophisticated
navigation menu bar, images, multiple columns, a form, links to other
pages within your site, links to other sites, text in different font sizes, etc.
In other words, you will have a fully functional website,.

More importantly, you will have learned how to use Dreamweaver to set
up, design and publish your site. You will thus be able to update your site
and design new sites any time you want.

                                       1   Ali Haleeb Handouts of CMPS100A/B
What You Will Get From These Pages
In these pages of the handouts, you will be taught to create a basic two-
column web page and learn how to publish it, or save it as an html
document so that it can be accessed and viewed with your web browser.

To benefit from these handouts or to even understand it, you need to
follow the steps practically on you computer as I describe them . The
practical nature of this guide makes it difficult to follow or understand if
you're not doing the things mentioned.

How to Set Up Your Website with Dreamweaver
CS3's Site Manager
   1. Start up Dreamweaver.
   2. A window with three layers that looks like the picture below will

      Near the top of the window is a menu bar with the words "File Edit
      View Insert Modify Format Commands Site Window Help". This
      menu bar allows you to access many of Dreamweaver's features.
      We will be using this menu bar extensively in this course.

   3. To create a website that you can manage using Dreamweaver, the
      first thing you should do is to invoke the Site Manager. To do this,

                                     2   Ali Haleeb Handouts of CMPS100A/B
   click "Site" in the menu bar. When the drop-down menu appears,
   click the "New Site..." item on that menu.

   Important note: I shall refer to such a sequence of clicking the "Site" menu,
   followed by clicking the "New Site..." item simply as "Site | New Site..."

4. A dialog box will appear with a title bar that reads "Site Definition
   for Unnamed Site 2".

   The actual 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. You are about to change it anyway.

   If you look at the top of the dialog box, you can see two tabs: the
   "Basic" and the "Advanced" tab. You should currently be using the
   "Basic" tab. If this is not true, click the "Basic" tab to select it. If
   you don't know which is currently selected, click the "Basic" tab to
   be sure.

   In the main part of the dialog box, you should be able to see a field
   just under "What would you like to name your site?" This is where
   you enter your website's name. If you're not sure what to call your
   website at this point, simply enter your name here. For example
   "" (without the quotation marks) into the box. If

                                      3    Ali Haleeb Handouts of CMPS100A/B
      you're creating a company website, enter your company name
      instead. Don't worry too much about this field: it's merely for your
      own personal reference in case you create many websites and need
      to distinguish between them. The words typed here won't appear on
      your site.

      , I will assume that you have typed "Musallam" into the box.
      However, there is no need for you to use this name just because
      you're following this handouts. Use your own name.

      Underneath your site's name is a field for you to enter the web
      address of your website, following the question "What is the HTTP
      Address (URL) of your site?". Of course you don't have any hence
      enter your website address as "" (without
      the quotes).

      Once you've finished entering the above two fields, click the
      "Next" button at the bottom of the window.

   5. In the next screen that appears, accept the default "No, I do not
      want to use a server technology" and click the "Next" button again.
   6. The next window that appears lets you to control 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 should always keep a copy of your website on your own
      computer for publication and for updating. Here just accept the
      default and click "Next".
   7. When the window with the question "How do you connect to your
      remote server?" appears, click the down arrow in the drop-down
      box and select "None". You can change this later if you publish
      your site, but for now, selecting "None" allows you to quickly get
      started with your site. Click the "Next" button.
   8. You will then be presented with a "Site Definition" summary.
      Click "Done".

How to Create a Two Column Web Page with Footer
in Dreamweaver CS3
Now that you have provided Dreamweaver with the basic information
needed for it to manage your website, you will now create your first web

                                    4   Ali Haleeb Handouts of CMPS100A/B
I will guide you to create a two-column web page. By 2 columns, I mean
that the page will have two vertical columns. This is a popular layout
among many websites because it is both space-efficient and familiar to
users. One of the columns is usually used to hold the site's logo and
navigation menu while the other column the main content..

   1. Click File | New... ("File" menu, followed by the "New..." item on
      the menu that appears). A window with the title "New Document"
      will appear.

   2. In the Layout column of the window, locate the line that says "2
      column liquid, left sidebar, header and footer". Select that item by
      clicking it once.
   3. Now glance at the rightmost side of the same window and look for
      the item "Layout CSS". It should be somewhere near the bottom of
      the window. Click the drop-down box and select "Create New
      File". This causes Dreamweaver to place information controlling
      the appearance of your web page (called "CSS") in a separate file.
      We want this because all the pages on your site will share the same
      basic layout, and having such information contained in a single file
      saves disk space, bandwidth and speeds up the loading of your web
      page if you are publishing it.
   4. When you've finished doing the above, click the "Create" button.
   5. Dreamweaver will issue a dialog box with the title "Save Style
      Sheet File As". Accept the default name and location by clicking
      the "Save" button.
   6. Once you've done that, Dreamweaver will proceed to create a 2
      column web page with some meaningless content typed in it.
   7. Dreamweaver CS3 displays a screen layout depending on how
      large your monitor resolution is. To standardize the appearance of
      the Dreamweaver window click "View | Design" from the menu.

                                    5   Ali Haleeb Handouts of CMPS100A/B
    The Home Page

This first page that you'll be designing will be your website's "Home"
page. Since the home page functions almost like the front door of your
website it should contain some information about what your site is about,
as well as links to important pages (or sections) of your website. For
example, a company website that sells products or services should have a
home page that gives visitors an idea of its products and services, as well
as point visitors to individual product description pages where they can
find more information about the product and place an order. Even if your
site is a personal website, you will still want your main page to give
visitors an idea of what to expect on your site, and to link to other pages
(or at least the main sections) on your site.

How to Design your Home Page
Let us 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 labeled "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.

    1. 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.

                                     6   Ali Haleeb Handouts of CMPS100A/B
         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 "My Name", replace "Untitled Document" with "My

   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. 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".

2. Now 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
   "Musallam Company" if that's the name of your site.

3. 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 it with some appropriate content.

   Once you have done with replacing the "Main Content" header,
   proceed to replace the "Lorem ipsum dolor" (etc). 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 Office Word processor. If you need to create
   new paragraphs, hit the ENTER key .

                                  7    Ali Haleeb Handouts of CMPS100A/B
   To format the text the way you want: change its size, change its
   type or change its color go to the Property panel at the bottom of
   the window, click on it and the following window will show:

   As you see you can use it to change: the font Type, the font Size,
   the text Color, the Background color, a Background image and the
   Margins: left, right top or bottom. Just you change and then apply.

   Now to return back to the sample page offered to you by the
   Dreamweaver you see that you have reached to the subtitles. "H2
   level heading" subtitle is there merely to show you that you can
   have subtitles in your documents as well. Replace it, along with
   whatever you want.

   If you are really at a loss as to what to type, write any thing.
   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.

4. Scroll down to the bottom of the page and locate the horizontal bar
   labelled "Footer". Replace the word "Footer" with anything you
   like. For example your full name.
5. 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"

                                 8    Ali Haleeb Handouts of CMPS100A/B
   IMPORTANT: make sure that you type the name "index.html" exactly as it is
   here, 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 "", the web
   server will automatically deliver to them the "index.html" file in your site's
   main folder.

How to Add Pictures to Your Web Page
   First of all make sure that the picture you want to add to your page
   is stored as an image in your computer i.e. stored as type .GIF,
   JPG, JEPG ……. A type name that points to an image; then after
   that put the curser on the point where you want the picture to be
   seen. But take in mind that when you insert your picture it might be
   big in size and might cover some of the existing elements or move
   it from its position, but all of that can be corrected by resizing the
   inserted image by clicking on it and pulling from the correct point
   to the correct direction.

   Now to start click Insert | Image on the menu bar. The window
   shown below will appear. As you see it is asking you to Select
   Image Source. When you select the image source it will
   show you the image on the side of the window. If it is the
   correct one then click OK.

                                      9    Ali Haleeb Handouts of CMPS100A/B
    and your picture will be installed.

    All you need now is to resize your picture and position it where
    you want it to be and this can easily be done by clicking and

How to Link With Other Pages and Sites
    Other sites or other pages within your site can be navigated from
    your home page, all you need is to make hyperlinks between your
    home page and the other pages you want to navigate. However the
    other sites and pages within your site should be installed with
    known addresses and URLs for other sites.

    To make a hyperlink it is first better to decide about the text that
    will indicate the hyperlink to the user showing him where he will
    be taken if he clicked on it. Highlight that text, then click on
    Insert | Hyperlink and the following window will appear :-

                                  10      Ali Haleeb Handouts of CMPS100A/B
    The text you highlighted will automatically show on the Text bar
    of the Hyperlink window. The Link bar you have to fill it
    yourself by the correct address of the site or page you want to
    navigate to. Now click OK and the text you highlighted will
    change color to blue and probably underlined.

    To test the hyperlink you save and open your site on the Internet
    explorer then click on the hyperlink and it will hopefully open the
    correct site for you.

Creating WebPages Without a Guide
    What you have been doing up to know was using an already
    designed sample of a webpage and replace its text by a text that
    satisfies your requirements. However, a new webpage can be
    designed on a blank paper then you add to it the contents and
    format it the way you want. It is not necessary to use a cascading
    style sheet (CSS) the one we used before, or any of the other
    samples provided. You can start by a plank webpage, or by a new
    HTML, or JavaScript webpage specially if you did not find the
    format you want in the provided samples.

    However, using HTML new webpage does not mean that you have
    to write it all in html programming language. You can actually
    jump from the Code view to the Design view and insert the shapes
    you want, the text you want and the background you want.

                                  11   Ali Haleeb Handouts of CMPS100A/B
When you open the Dreamweaver the following window will

Which has the Create New and Create From Samples options. If
we selected from create new the first option (HTML) the following
page will appear:-

                            12   Ali Haleeb Handouts of CMPS100A/B
    It has a code view, a split view and a design view. What is shown
    here is the design view which we can deal with the same way we
    do with any word processing system: Add text to it, insert tables ,
    boarders, frames, background color, images and hyperlinks the
    same way we did it before.

Publishing Your Webpage
    By now you should have designed a multi page web site. If you
    have a web host or an Internet provider like Omantel who have
    assigned a web hosting account for you and provided you with a
    username and a password you can start publishing your webpage
    using this dreamweaver service. Even if you don't you better know
    how and be ready:-

    First start the site manager by clicking Sites | Manage Sites….
    The following dialog box will appear

          Select the site you want to publish and click Edit. The
          following Site Manager withered will open:

                                 13   Ali Haleeb Handouts of CMPS100A/B
Continue with it clicking Next… Next till you reach to the screen with
the message ( How do you connect to your remote server?). Now you
should select FTP. Once you select FTP many question bars will appear
showing the dialog box as shown below:

                                 14   Ali Haleeb Handouts of CMPS100A/B
You should answer all the questions on the box from the information
provided to you by your web host manager. When you finish click on
the Test Connection bar.

If the test result is successful continue clicking Next till you get to final
summary page. Then click Done and click it again to get off the
Manage Sites dialog box. To complete publishing your web page click
Site | Put . Then it will take sometime before the process is completed
and you will be informed about its progress. You might be asked if you
want dependent files to be put. Your answer should be Yes if you want
your CSS files and images to appear on your web page.

Up to here you have known how to use The Dreamweaver to design web
pages and publish it and through practice you will learn more and help
your memory to keep this knowledge.

                                     15   Ali Haleeb Handouts of CMPS100A/B

To top