- Internet & the Web
My Computer Dream with DreamWeaver One-on-One
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:
- Dreamweaver MX workspace or
- 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.
- 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”.
- 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.
- 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
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.
- Create the new document using the Template tab in the new document dialog box.
- Edit the editable regions of the document.
- 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.