Introduction to Web Designing(Dreamweaver)

8/3/2019 Introduction to Web Designing(Dreamweaver)

1/29

CFRD OU

Central Facilities for Research and Development

Introduction to Dreamweaver

Prof S L GoudDirector CFRD


2/29

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

DREAMWEAR IS


3/29

Works with template workflowSupport for PHP, ASP, JSP, and

CFM

Set up for database applicationssuch as SQL, MySQL, Oracle and

MS Access

New Dreamweaver Light for useby multiple users for content

updates

Tem lates can be used


4/29


5/29

Creating New Site in Dreamweaver is made

simple

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



6/29

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



7/29

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 siteeasily without any coding using the tools of

Dreamweaver.

The Split view is the combination of both the Code

view and Design view.


8/29

We have many tools in the insertwindow which is located on the

right top of the application.

There are many tools under this

insert window, which are used tocreate 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.


9/29

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.


10/29

Live view is the new feature of the DreamweaverCS4 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 titletext box on the top of the application


11/29

Properties window is the one where we can edit

the property of every tag which we use in thesite.

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.


12/29

Dreamweaver has an interesting tool by which we

can directly switch from the application to thebrowser 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) onthe top panel, which is next to the title box.

We can edit the browser list as of our browser

choice.


13/29

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.htmlDefault name for ALL home pages


14/29

Select Modify, Page Properties

Appearance:


15/29

Type A Quick look at Osmania University

Highlight the textSelect 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)


16/29

Line Break vs ParagraphThe 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 DesignParagraph

begin paragraph
end paragraph
Horizontal Rule:


17/29

Images have specific width and height

Measurement: PixelsPrepare appropriate sizes before using! Insert an image Insert, Image, select a file from your folder

Add Alternate Text (a description of theimage)

Resize (hold shift key) images to fit in each cell Resizing images

Drag corner handles with SHIFTUse Image Format Panel

Use Image Format Panel to modify


18/29

If you have no image editing software:

Adjust size using Width/Height boxes in PI or Click-and-drag sizing boxesNumbers in Width and Height boxes will bold to

indicate a changed value

Use Reset size button if you dont like whatyou did

AlignmentTop, Bottom - aligns with

Left, right - aligns with margin (and wraps text!)Middle - aligns with middle of text baselineText top - aligns with tallest character in nearest

textAbsolute middle - aligns middle of image


19/29

JPEG -supports lots of colors, longer to download,

best for complex imagerygood for photos

GIF -256 colors (any 256, not predetermined)Easier to download, best for large areas of

flat color

Good for cartoon-ish imagesPNG -new, captures complex pictures without

large file sizes, not supported by all

browsers


20/29

Links are paths to:Your own pages

Pages on other websites

Different parts of same page

Email addressesDocuments for download

Can be text or imagesLinked text is usually underlined

Linked images, or hotspots within images


21/29

Highlight textPull up Property InspectorIn link box, browse, type or

paste new linkCopy-and-paste from browser willinsure you dont misspell itLink box will also pull down recentlyused links

Click somewhere outside of linkbox


22/29

Buttons, arrows, logos, orpicturesSelect the imagePull up Property InspectorIn link box, browse, type or

paste new linkLink box will also pull down

recently used links


23/29

For creating a link in section of imageSelect image

Select drawing tool (rectangle, oval,

irregular) in PI to draw hotspot

Type in linkBest for multiple links from one imageGood way to design navbar

Create hotspots within maps, group photos


24/29

Highlight textUse email icon, orDocument, Insert, Email linkDialog 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 usedAlternate mailbox for these responses

only may be helpfulmailto:email@address in link box

another option
mailto:email@addressmailto:email@address


25/29

Linking to spots within samepageLinking to sections of a

different pageLinking to documents

Opening a Video filesAttaching sound

Inserting third party Objects


26/29

Insert>Table, orUse table icon in Objects panelSet options in dialogue box

# of rows & columnsTable width

Border, padding, spacingHeader


27/29

Inserting TablesUse 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 outsideof a table.

Table FormattingWhen formatting Dreamweaver tables in Design view,

you can set the properties for the entire table or forselected rows and columns, or cells in the table. You

set properties such as background colors for the

table, rows, or individual cells.

Splitting and Merging CellsCells can be merged together to provide a larger

single cell. A cell can also be split into two or more

cells


28/29

Go to Insert > Media> Select FLV option

>Browse the file > select Skin > Detect Size

>OK

Allow the files to save in the SITE folderPress 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


29/29