Dreamweaver Tutorial

Extract Tool


Extract PSD

OR HTML/CSS of image

Codes it for you


Bootstrap: slice everything up , DIV tags, frames and tables to layout content

Tags for Content

: Header

:Body- Article tag- positioning content, sidebar

Positioning: Float TAG, column spans.

Col.Span 1 – space across number of columns e.. 2 columns Col.Span 2


Adobe Library- upload and share content.

Ways of colour systems : RGB HEX


Scale of Pictures/ PNGs

Pixel ratio of PNGs.



Generate-Image assets


File export= Layers to Files

Compresses to JPGS/PNGS

Send to IMGs Folder


Trim Layers : trims layers for you.













Asset management- file structure

Broken Links

Layout, content wont work or show up on webpage.

SITE- Manage site – Server FTP file transfer protocol.

INTRANET- stored locally

MY SITE: Folders

Images Folder




HTML- Call INDEX- sent to server

Templates are good- does coding for you.


CSS designer


create new CSS

Name as :

save in MYSITE folder

Screen Shot 2017-03-13 at 13.29.47.png

GUI Graphic user interface

PAGE PROPERTIES- Change colour of background/text

Source – stylesheet.css

Make sure CSS is selected IN FILES TAG

selectors: body (select body tags)

PROPERTIES , untick ‘showset’

search for image URL- Select image

Screen Shot 2017-03-13 at 14.10.09.png

Screen Shot 2017-03-13 at 13.16.25.png

Screen Shot 2017-03-13 at 13.18.05.png


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s