CFRD OU

Introduction to Dreamweaver

Prof S L Goud
Director CFRD
Central Facilities for Research and Development

DREAMWEAR IS

WYSIWYG (What You See Is What You Get) Web page editor Used to create, design and edit for webpage. To insert images, text, colors Dreamweaver writes underlying code (HTML) Dreamweaver is a good way to learn HTML Have tags and features that is commonly used in webpages (HTML and CSS) Works within existing systems (SSI, CSS, Forms) Flexible and scalable Layout & table assistants JavaScript Layers Style sheets

Works

with template workflow Support for PHP, ASP, JSP, and CFM Set up for database applications such as SQL, MySQL, Oracle and MS Access New Dreamweaver Light for use by multiple users for content updates Templates can be used

 Creating

New Site in Dreamweaver is made

simple In the Menu bar, which is on the top of the application. Go to Site -> New Site

Central Facilities for Research and Development

 Select

the Advanced tab in the Site setup window and name the site which you need to develop and give the path of the site and the images of the site. Select Advanced Tab> Site name > Browse Root folder > create images folder > OK

Central Facilities for Research and Development

 The

user has three different environments in Dreamweaver for designing the website. Code View, Split View, Design View. The Code view is the environment where we write the complete code of HTML. In Design view we will be able to design the site easily without any coding using the tools of Dreamweaver. The Split view is the combination of both the Code view and Design view.

 We

have many tools in the insert window which is located on the right top of the application. There are many tools under this insert window, which are used to create tables, inserting images, media files, editing text , ordered and un ordered list, linking the text, creating mail links, menus, divs, creating forms and many more.

 Various

images, videos and media files comes under the assets of the site which we design. The assets of the site in Dreamweaver can be viewd under one single window under Assets tab. This tab is just next to our files tab, which is in the right bottom of the application.

 Live

view is the new feature of the Dreamweaver CS4 where we can see how the site looks in the run time environment.

Title

of the document is the title of the page which will be seen on the browser head in which we open our file. The title can be named easily here using the title text box on the top of the application

 Properties

window is the one where we can edit the property of every tag which we use in the site. We can also edit the image or some media property (like dimensions, etc.,) in this properties window. This window is located on the left bottom of the application.

 Dreamweaver

has an interesting tool by which we can directly switch from the application to the browser to view our site file on the browser. This tool is useful for debugging the file in runtime and view the design of the file. The tool is with the icon of the web (the globe) on the top panel, which is next to the title box. We can edit the browser list as of our browser choice.

Open

Dreamweaver Menu Bar Select: File> New> HTML>Blank Page> Layout: None You have a blank document Save the file in the new folder Name it index.html
Default

name for ALL home pages

 Select

Modify, Page Properties

Appearance:

 Type

A Quick look at Osmania University Highlight the text

Select

Text, Paragraph Format, Heading 1

Size

1 2 3 4 5 6 7 Color (Black) Alignment (Left) Indent; Outdent (none) Font (Serif, Sans-serif, Monospace) Style (Bold, Italics, etc)

 Line
The

Break vs Paragraph

RETURN key = 2 lines Break (SHIFT-RETURN) goes to next line

Add

a Horizontal Rule

(Create

a Horizontal line on the page) Select: Insert, HTML, Horizontal Rule Click on the line to select options

Height: 3 Width (Change to %): 75%

Look at the code; View, Code AND Design

Paragraph

<p> begin paragraph </p> end paragraph

Horizontal

Rule: <hr>

 Images

have specific width and height

Pixels

Measurement:

Prepare

appropriate sizes before using! Insert an image

Insert,

Image, select a file from your folder Add Alternate Text (a description of the image) Resize (hold shift key) images to fit in each cell

Resizing images Drag corner handles with SHIFT Use Image Format Panel Use Image Format Panel to modify

 If

you have no image editing software: Adjust size using Width/Height boxes in PI or Clickand-drag sizing boxes Numbers in Width and Height boxes will bold to indicate a changed value Use Reset size button if you dont like what you did
Alignment
Top,

Bottom - aligns with Left, right - aligns with margin (and wraps text!) Middle - aligns with middle of text baseline Text top - aligns with tallest character in nearest text Absolute middle - aligns middle of image

JPEG

supports

lots of colors, longer to download, best for complex imagery good for photos
GIF

256

colors (any 256, not predetermined) Easier to download, best for large areas of flat color Good for cartoon-ish images
PNG

new,

captures complex pictures without large file sizes, not supported by all browsers

 Links
Your

are paths to:

own pages Pages on other websites Different parts of same page Email addresses Documents for download
Can

be text or images

Linked

text is usually underlined Linked images, or hotspots within images

Highlight

text Pull up Property Inspector In link box, browse, type or paste new link
Copy-and-paste

from browser will insure you dont misspell it Link box will also pull down recently used links
Click

box

somewhere outside of link

Buttons,

arrows, logos, or

pictures Select the image Pull up Property Inspector In link box, browse, type or paste new link Link box will also pull down recently used links

For

creating a link in section of image

Select

image Select drawing tool (rectangle, oval, irregular) in PI to draw hotspot Type in link
Best

for multiple links from one image

Good

way to design navbar Create hotspots within maps, group photos

Highlight text Use email icon, or Document, Insert, Email link Dialog box will appear Text - what site will say (highlighted text) Email - Actual email address If highlighed text is actual email address, just click OK Default email program of user

computer will be used Alternate mailbox for these responses only may be helpful mailto:email@address in link box another option

Linking

to spots within same

page Linking to sections of a different page Linking to documents Opening a Video files Attaching sound Inserting third party Objects

Insert>Table,

or Use table icon in Objects panel Set options in dialogue box # of rows & columns Table width Border, padding, spacing Header

 Inserting
Use

Tables

the Insert bar or the Insert menu to create a new table. Then you can add text and images to the table in the same way that you add text and images outside of a table.

Table

Formatting

When

formatting Dreamweaver tables in Design view, you can set the properties for the entire table or for selected rows and columns, or cells in the table. You set properties such as background colors for the table, rows, or individual cells.

Splitting
Cells

and Merging Cells

can be merged together to provide a larger single cell. A cell can also be split into two or more cells

 Go

to Insert > Media> Select FLV option >Browse the file > select Skin > Detect Size >OK Allow the files to save in the SITE folder Press Play Button when you open site in Browser Same process can be used to insert SOUND in your site Insert > Media> Select SW option >Browse the file > OK