Introduction To Dreamweaver
Dreamweaver helps for creating webpages. All webpages are simple
text files that use HTML to describe the pages .HTML is a standardized
language that can be viewed with any web browser or other webpage
application.As webpages are made up of a HTML ,Dreamweaver does
not create special Dreamweaver files. On the Pc you man find that
if you double click on .html files, htmlfiles from within Dreamweaver.
Dreamweaver is an advances webpage which helps to develop webpages
more quickly and easily .It has a lot of advanced tools and options
which helps in inserting various elements to the webpages.
You should have a blank window with untitled Document in the title
There will also be some other small windows visible.Two of them
are labeled Assets and Behaviours and you can close them for now
by clicking the X in the top right corner.You should still have
the property Inspector and the objects Panel windows keep them open.
is a website
A website is a collection of webpages .Sites can consist of one
page to thousands of pages.Before you begin creating individual
webpages,its important to understand the context or environment
within which webpages function.We will examine Site and page Structure.
A web page is effectively a text document , in that any text editor
can read HTML file. Any images or media content ,such as Flash or
Quick Time Movies are referenced When a file is references there
is effectively a link within the HTML file to an external file,
such as :menu.swf’ a flash file. An HTML file you view in a browser
therefore is potentially a collection of multiple files it the file
has any images or content other than text.
Its not uncommon for large site to consist of hundreds or even thousands
of HTML files and image files .Each file is stored in a single folder
.This folder is referred to as the Site Root or Root Folder.Think
of it as a folder on your hard drive .Within the folder you store
all the files required for your website. The larger your website
in terms of number of files, the greater the difficultly in managing
,producing and maintaining the site. How you organize the files
within the Root Folder is entirely up to you.
Organization is a key element of web design .One of Dreamweaver most prominent
organizational tools is its site window. Before we begin looking at the
mechanics of building individual webpages we should spend sometime getting
acquainted with it. The site Window keeps you in touch with the overall
structure of your website and allows you to easily access , manage and
site window .The left side display the “Remote Site” information which
is the folder on the server that others can access.
The right side displays the “Local Folder” information ,which is the folder
stored on your local hard-drive or a local network.
the Define Sites drop down menu. This contains a list of all your current
websites. To create a site ,select Define Sites.
Select Define Sites To define a new website.
The site Definition Dialog-box appears.
site Definition Dialog-Box
The site Definition controls are divided be category ,which include Local
Info,Webserver Info,Check In/Out and Site Map Layout.
Designate the local Folder you are creating your website in be selecting
the path to the folder in the “Local Root Folder” field. Click the browse
icon to open the :Choose Local Folder” dialog –box. Navigate to the “kashi”
folder that you installed before beginning the manual.
–Click) the folder to designate its as the root folder for your website
.The name of the folder appears beside “Select” in the dialog-box.You
will notice that there are already some folders in the directory, These
will be integrated as subfolders to the root folder “kashi”.”select” to
designate the path to the local folder.
a name in the “Site Name” field. The name is displayed in the “Site Window”
Define sites drop-down menu.
Select Web Server Info to designate the server where your website is uploaded
to or placed to after you have finished producing the site.The web server
gives users other than yourself or the production team,access to the site
for viewing .Select the Access drop-down menu and choose from None, Local/Network,
In a collaborative environment ,where multiple persons are working on
the same site, you may need to pass ”notes “ across to each other. Even
of you are the only developer ,you may want to keep notes for yourself
about particular pages or content in pages. In dream weaver you can attach
Design Notes to individual pages or content in pages .To enable Design
Notes Check Maintain Design Notes. If you needs to share notes with other
designers check upload notes for sharing in the site window. A visual
representation of your site structure results.
In addition to displaying your website structurally as files and folders
, the site window can display your site files and links to and from those
files visually with icons be clicking the site map icon.
sitemap view .In this case the main or index page links to four other
Modify the number of columns to display and the column width in the Number
of Columns and Column width fields.You can designate if the icons are
labeled with the name of the file or the title of the file. In addition
you can check Display Files Marked as Hidden to display files that have
been marked as Hidden by the system and display dependent files to display
graphics and other non-HTML files such as Flash movies and images. To
save the Site Map as a graphic file, Select File/Save Site Map As you
can prepare it for the website in an imaging program .You might use it
as an image in a presentation.
The first chapter introduced you to HTML elements and their attributes
as well as the basic document format .The good news is you don’t need
to type code be hand. Dreamweaver is going to make the creation of your
HTML WebPages easy. A number of interface options can be customized .We
focus on default settings and use these for the bulk of the course so
you can focus on learning how to create a website.
default when you first launch or open Dremweaver ,the interface consists
of the objects Palette,the document Window ,the properties Inspector,Html
styles Histroy and assests panels.
Custom columns for your site window be selecting File View Volumes from
the Site definition dialog box. This feature is especially useful if your
site has unique attributes that need to be tracked through out its development
cycle. Some of the options available allow you to adjust a column name
alignment and visibility .You can also associate columns with Designs
Notes so that the information listed can be updated every time the information
the note is changed.
When you have to input all the parameters in the site window to define
your website, Dreamweaver ask you if you would like to create a cache
file for the site? It is essential that you create. A cache file keeps
track of all the links in your website so that if you should ever move
one html file or non HTML file or non HTML file from one folder to another
all the files that are linked to that file are updated to reflect the
change. This prevents broken links.
create a cache file when you define site first time.
The document window to input the content of your web page. For instance
you can input text in the document window as you would in to word processor.
you can insert graphics, create tables, and add many other common elements
that make up a typical web page. You will become familiar with the wide
variety of elements that make up the content of typical WebPages. The
document window is WYSIWYG is a acronym “What you see Is What you Get”
that is the way documents are displayed is how they are going to look
in a web browser. The document Window consist of the Title Bar , The Menu
Bar, The Tag Selector, Code Inspector, etc.
The title bar displays both the title of the HTML document and the file
name of the actual HTML file .The Title bar <title> </title>
tag is contained in the <head> of an HTML document.
Dreamweaver Menu Bar consists of file,edit,view,insert,modify,text,commands,window,and
help you use menu items to perform various tasks and commands as you produce
webpages. To select a menu item such as file the dropdown menu results
Recall that elements in HTML ,such as <b> are also referred to as
tags .At the button of dream weaver document window the Tag selector display
a range of tags depending on when the cursor is in the current document.
As we begin to build a WebPages, the convenience of the Tag selector will
become apparent to you. To select a tag in the Tag selector ,simply click
it Any thing in the tag will be selected in the document window.
The current size of the document window is displayed in the window size
box. The document window is resizable .To resize the document window ,click
hold and drag any corner or edge of the window,
Dimension or size are expressed in terms of pixels. Computer displays
are made up of individual dots called pixels. Currently computers have
a common group of fixed desktop dimensions ranging from 1280*1024 or higher.
Websites are usually designed resolution safe meaning to the lowest common
denominator whish is a desktop display at 640 pixels wide by 840pixels
high (640x480).Designers commonly restrict themselves to a pixel width
of 600 to ensure that everyone can view the content without having to
scroll sideways. in the browser window. By clicking the dropdown menu
arrow in the window size box you can select from a number present Document
Select from a number of represent document window dimensions.
The download speed box displays the current estimated time it will take
a user to download your page from Internet. The estimated time changes
depending on how much content ,such as text and graphics, your web page
contains. The more content there is the longer it takes to download. Download
speed also depends on the speed of the user connection which can vary
from very slow modems, to quick modems to direct connection to the Internet.
By default, Dreamweaver assumes that users are using a 28.8Kbs modem to
connect to the Internet. You can change this setting in Dream weaver’s
Preferences, Which we cover later.
The launcher , in the bottom left hand corner of your Document Window,
CONTAINS SIX INCONS THAT OPEN OR launch major tools that you use in dreamweaver.It
is a miniature version of the full launcher displayed be default when
you first open Dreamweaver.
on Site,Assets,HTML Styles,Css Styles,Behaviours,Histroy, or Code Inspector,
Opens the respective tool, For instance if you click site Dreamweaver
Site Window Appears. If you click on history panel it will appear.The
windows available in the launcher are also available as items in the window
The properties Inspector displays the current settings or properties of
any of the components that make up the content of your web page. For instance
when you are working with text the properties Inspector displays properties
related to text. It you are working with graphics that properties will
appear. Properties inspector is at the bottom of you window.
The object palette consists of objects or elements common to webpages
, such as graphics, tables , horizontal rules, form fields, neta elements,
internal links, linebreaks etc.
HTML Code Inspector
In addition to the document window its a good idea to the HTML source
icon in the document window you can view the source code at any time and
can make changes manually if you are so inclined. As you progress through
this book you may want to examine the code dream weaver generates to familiarize
yourself with HTML .The code Inspector can also be made part of your Document
Window. You can turn the Code Inspector on and off and change some of
this option through the second tier of the menu.
© 2006 Vignesh.in
Computer Services. All rights reserved.