Web Design

responsivegridsystem

To view locked code.

Site Sucker

To view source code in Safari Browser
View/View Source

Different Browsers offer different views. A lot of source code includes corrective code for Internet Explorer  and other browsers. ie Opera , Safari, chrome,  Test website on PC/Internet Explorer

Netrenderer.com set up to test websites on Internet Explorer (Has to be live though)

Test websites on every browser and every device.  Iphone, Blackberry, PC Mac. ( Simon charges £200 to have it tested). Simon goes down to Internet Explorer 6 Always design to the lowest common denominator.

Wordpress is a Content management System also create blogs and websites

Can be confusing for non-techncal websites

CushyCMS free with their branding/ mthly fee for your own.
Maximum of five sites on free version.

Uses Editable ranges from your Web Template.

Give [divclass-=cushycms] on your template

Add domain name
Add a customers details with their email address to create an account.
Sign up to Cushy and create a name and email address

To use Cushy need to add code in editable region on your tempalte if on every page or on each page if specific area eg  index .html:
<div class="cushycms">

To add your Domain name

http://html.adobe.com/webstandards/

Design from print tutorial

PDF file

When a file is exporting can see progess:

Windows /utilities/ background task

Postscript files

To make

print/printer = Postscript file
PPD=Adobe PDF 9.0 (enables you to print up to A0)

Can use to create positives for screen printing bigger than A3

The output/Colour= separations is only available if its a laser printer or for postscript files

This creates a .ps file

Open in preview this converts to a pdf

To convert to a pdf adobe acrobat pro/ acrobat distiller converts .ps files inro pdfs

Can create printers spreads rather than readers spreads

Possibilities for working with using multiples

Printing large quantities - eg 40 on A2

Save as a pdf with bleed and crop marks

file and place into your A2 document

With image selected Can use Edit/step and repeat

Horizantally and vertically offset by the width and height of your document

cmd G

and align

If there is a mistake change in your original file and reexport that. 

OR

file and place the Indesign file.

Click show import options

Need to add Crop marks in the slug bounding box in the original Indesign file

To make your workflow quicker 

 A Booklet using a Printers spread pdf

Printing double sided

To print an 8 page book. need to rotate page 2 and 7 /4 & 5 180º around it centre point

This is a work and turn method

Print first side then turn page and feed in so get duplicate pages

To find certain symbols wither use glyph or use keyboard shortscuts

system preferences

Language and text

Add a shortcut on your top tool bar

Can click on amy key to see what shortcut gives

Design for web - Dreamweaver

Open html page where you want the images to display.

In Design view
click in page where you want the images to display

go to code page

The cursor will flash in the code page.

Copy the code from lightbox into the code page at this point

Edit the image #1 to the name of your image

Can put your own titles in on the blue 'my caption' just edit this to your title name

Add the thumbnail to the code replacing 'image 1'

Insert image/

To link imagesgive them a group name then add [folder] to the code as follows next to lighbox.

There are loads of variations of image galleries code available on the net:

To add video use Flexslider 2

Slimbox

Fancy box

How to customise light box

click on Lightbox .css on Dreamweaver

Original CSS

Changed the opacity and colour

Can change the colour opacity

Can delete the border by just deleting the border code ie white above.

to get rid of the border delete the following lne:

Design for print tutorial

Paragraph style
Can control how Indesign hypenates texts.

To stop a word being hypenated by click in the word and add a dicretionary hypenation Type menu/inset special character/discretionary hypen.  Put the dicretionary

Soft return is shift return

More advanced application of Paragraph styles
Character styles - type menu

Select the character work with

Any attributes which dont have a value will remain as they were before the style was applied.  ie pint size left blank.  Could use to underline words, italics. create headings

can indent here using cmd\.  Add a tab then highlight text want to indent.

Can include the Chraracter style within the paragraph style.

Can apply to just one word - through one word.

Master pages

THE SPREADS IN INDESIGN ARE READERS SPREADS (how they will read once the book is printed)

The default is the A-Master

Any content you add to the master will be added to the other pages.
Empty frames, colour, headers, empty text frames

Any frames you add to the master page are locked apart from the text frame .  Press cmd and shift to unlock the text frames

Can setup serval Master pages within one document.

Page numbering
Create a text frame
Typemenu/insert special character/marker/currentpage

If need to start the page numbering differently,  need to be on a page  pages pallet menu/numbering.

Saddlestcih there is a maximum number of pages before pages start creeping.  Could print 40 plus pages in booklet section then bound/

Dreamweaver tutorial

A box model

http://www.w3schools.com/css/css_boxmodel.