ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

My Computer Dream with DreamWeaver One-on-One

Updated on July 10, 2015

My Dream Weaver Introduction

I am a poet and a computer geek too. I enjoy coding using Dreamweaver and as being a person who always desires to share, I have taken the challenge to break down my understanding of Dreamweaver with the hope of changing a life.

Dreamweaver helps one to build websites easily. For the sake of those who know nothing about websites, a website can be termed as a collection of pages that are displayed in a web browser.

A page on a web is a document designed to be accessed through the World Wide Web and can contain formatted text, pictures, sounds, videos and links to other web pages.

A browser is simply computer application software used to access information and which displays documents on the World Wide Web (www).

There are links and hyperlinks and these could be word(s), phrase(s), or picture used to move or jump to another piece of information such as a web page on the internet. By clicking it, information it represents is displayed.

The web pages are written in what geeks call the HTML or Hypertext Markup Language, serving as a tool used to link to other documents. Hence, web pages are HTML documents.

In our scenario, Dreamweaver provides tools to help create the HTML documents and also helps to manage websites and to publish websites to the internet or intranet.

At the start

You must first install the Dreamweaver software on your computer to be able to use it. When the software is opened, you either choose:

  1. Dreamweaver MX workspace or
  2. Dreamweaver 4 workspace and you’re good to go.

Dreamweaver MX is an integrated workspace in which all the features of the software are contained in one application window. When chosen, a document window appears along with panel groups. Document window is then used to create the HTML document.

The Property Inspector is there to help one to control various characteristics of an object in the current HTML document.

There are Docked Panels on the right side, represented by a tab. The Answers panel is a quick way to get updated information and assistance when working with Dreamweaver.

An Update Button is there to provide access to information Macromedia.

The Preferences under the Edit Menu opens the Preferences Dialogue Box which lists categories on the left and the options for the selected category on the right.

The Icons Check Box under the Panels category in Preferences, allows one to display icons to open commonly used panels at the bottom of the document window.

There is also Show In Launcher, which enables one to select the panel icons that will appear. Do add or remove buttons by clicking the positive (+ve) or negative (-ve) buttons, respectively.

Window Sizes Area found under the Status Bar category in Preferences helps to add more options to the window size menu.

The Download Time calculation can be changed by changing the default Connections Speed.

Basic Website Step 1

The basic steps that can be adopted to achieve a website creation involves designing the visual elements of the site.

  1. Setting up the site structure for your website

The site structure can refer to the group of folders that will contain the files for your website. Start by storing files on a local computer while the site is being built. When the site is ready, publish its files to a web server. In general, a site needs one main folder which contains subfolders for various files. The site folders can be created before using Dreamweaver or can be created within Dreamweaver as site is being defined. I will recommend using Windows Explorer to organize group folders and subfolders.

Assets subfolder contains image and multimedia files used by the site.

Library folder stores files that are repeated throughout the site.

Templates folder stores templates that can be used to create HTML documents.

Basic Step 2

Defining Your Site

Click on Define Site under the files tab on the group panel to open the Site Definition dialog box. This contains the basic tab and the advanced tab. Basic tab provides a guide through the site setup step by step.

Type the site name and click next. The next screen provides an option to work with server technology. Server technologies provide the ability to create dynamic web pages.

Click No, when creating static site with no dynamic pages.

Click Yes, to use server technology when dynamic pages are involved. Click Next.

Choose Edit Local Copies when site is being developed locally, before uploading to a remote server when site is ready.

The Text Box allows specification of folder on the local disk where Dreamweaver should store local version of site’s files. Click Next.

Open dropdown menu of “How do you connect to your remote server?” to do your selection. For the sake of study, select None and click next.

The final page displays a summary of the site’s settings.

Go ahead and click on the “Done Button”.

Basic Step3

  1. This actually involves three ways and they have been elaborated below.

Creating a New Document

Here, the general properties are defined using page properties dialog box, accessible from the modify menu. Page properties help to specify general characteristics of the document such as name that will be displayed on the browser’s title bar, image to use for background and background color.

After setting page properties, next step is to add elements to the document, such as text and images.

One can work in Layout view and one method for laying out a page is to create one or more tables i.e. a grid of rows and columns which intersect to form cells and store information. These can be used as layout tools to arrange text and images in columns and rows.
They generally do not have visible borders.

Click on insert, layout tab and finally, layout view.

To edit table using the standard table editing tools, click the Standard View button in the insert panel.

Display a grid using the View menu. Click View, Grid and finally show grid.

  1. To draw table, click Draw Layout Table button and then drag the mouse pointer across the page to create the table.

Table area is shaded and the green layout table tab indicates that a table has been inserted.

The length figure tells the number of pixels wide.

Click Draw Layout Cell, and drag from the upper rectangle to the lower rectangle.

The cell area is outlined by a blue border and this is not shaded.

Draw a vertical cell along the left side of the document as this will contain the navigation bar.

Cells can be re-sized by clicking on the cell border and re-sizing. Shaded area implies no cell.

Remove grid by clicking on View, Grid and finally Show grid.

Switch to Standard View by clicking on its button.

Collapse the insert bar from the work area view by clicking the Insert Bar expander arrow.

2. Add text to it now. Text can be added by typing or copying from other documents and pasting into site.

Basic Step 4

4. Importing Word File

Click on file, import and finally Word HTML. Ensure that whatever was typed in MS Word was saved in HTML format.

When creating several HTML documents that contain similar information, consider using a template.

Templates are documents containing fixed elements of the page as well as placeholders for the changing information. These ensure consistent design and one does not have to add each element to every page.

Basic Step 5

Creating Template

The small yellow icon to the left of the first paragraph is called an Anchor Point and it is one of the invisible elements.

Templates consist of Locked Regions and Editable Regions. A locked region cannot be changed when the template is being used to create a new document.

An editable region can be changed when creating a document from the template.

By default, each area of the template is locked until you define it as editable. To define, select it and then select the templates tab from the insert bar. Click on Editable Region and type the product name.

The name appears as an invisible element on the template to identify the type of information to enter. Deselect text to see outline and product name tab. These are both invisible elements.

Creating a document from a template involves three (3) steps.

  1. Create the new document using the Template tab in the new document dialog box.
  2. Edit the editable regions of the document.
  3. Save the document.

The Update Page when Template changes option, instructs Dreamweaver to modify the new document whenever you make changes to the template.

The yellow border around the document indicates that this document is based on a template and only the areas highlighted in blue can be edited.


    0 of 8192 characters used
    Post Comment

    No comments yet.


    This website uses cookies

    As a user in the EEA, your approval is needed on a few things. To provide a better website experience, uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

    For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at:

    Show Details
    HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
    LoginThis is necessary to sign in to the HubPages Service.
    Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
    AkismetThis is used to detect comment spam. (Privacy Policy)
    HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
    HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
    Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
    CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
    Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the or domains, for performance and efficiency reasons. (Privacy Policy)
    Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
    Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
    Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
    Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
    Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
    VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
    PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
    Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
    MavenThis supports the Maven widget and search functionality. (Privacy Policy)
    Google AdSenseThis is an ad network. (Privacy Policy)
    Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
    Index ExchangeThis is an ad network. (Privacy Policy)
    SovrnThis is an ad network. (Privacy Policy)
    Facebook AdsThis is an ad network. (Privacy Policy)
    Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
    AppNexusThis is an ad network. (Privacy Policy)
    OpenxThis is an ad network. (Privacy Policy)
    Rubicon ProjectThis is an ad network. (Privacy Policy)
    TripleLiftThis is an ad network. (Privacy Policy)
    Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
    Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
    Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
    Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
    ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
    Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)