Site Management
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 create pages.

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

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

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

Local Info
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.

(Double –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.

Input a name in the “Site Name” field. The name is displayed in the “Site Window” Define sites drop-down menu.

Web Server Info
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, or FTP.

Design Notes
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.

Site Map Layout
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.

A sitemap view .In this case the main or index page links to four other pages.
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.

Dreamweaver Environment
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.

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

File View Columns

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

Cache Site
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.

Always create a cache file when you define site first time.

The Document Window
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.

Title Bar
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.

Menu Bar
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

Tag Selector
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.

Window Size
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 Window Dimensions.
Select from a number of represent document window dimensions.

Download Speed
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.

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

Clicking 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 menu.

Properties Inspector
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.

Objects Palette
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.

Copyright © 2006 Vignesh.in Computer Services. All rights reserved.