Design for Web - Useful information and initial developments

Potential Content of a website;
Videos
Images
Text
Audio
Animation
External Links
Forms & Fields
JQUERY, a simplified version of javascript which requires a few lines of added html which is linked to your source codes. After a lot of investigation and comparison of websites and the knowledge I'd gained from generating scamps, re-sizing images, saving for web, studio lessons, building initial websites.

Breaking down the html elements into boxes that surround your content: http://www.w3schools.com/css/css_boxmodel.asp

Get started with FlexSlider in 3 easy steps! Step 1 – Link files

Add these items to the <head> of your document. This will link jQuery and the FlexSlider core CSS/JS files into your webpage. You can also choose to host jQuery on your own server, but Google is nice enough to take care of that for us! http://www.woothemes.com/flexslider/

FancyBox is a tool for displaying images, html content and multi-media in a Mac-style "lightbox" that floats overtop of web page.

It was built using the jQuery library.

http://fancybox.net/

No margin would create no borders between boxes, giving you a 'tiled\' effect with boxes edge to edge.

The width that you specify is for the content of your 'box'.

Padding

"Minus 20 pixels because the padding is 10px; around the height and width. This rule applies to all the other editing capabilities, everything that is included in the box model added together."

You'd get your layout perfect and exactly how you've imagined before you begin adding your images etc.

-----

Insert > Image > Choose your image (that you've resized appropriately). Look at your source code to see the coding for your image.

Galleries and Slide shows > different ways to present your images.

http://lokeshdhakar.com/projects/lightbox2/

Lightbox is a simple, unobtrusive script used to overlay images on top of the current page. It's a snap to setup and works on all modern browsers.

Working in an 'Image set' is more appropriate, to install this theme you'll need to download the zip file and

js = subscript for the Java script.

Plan out how you want your thumbnails in order to place them successfully...
e.g.

"ALWAYS WORK IN USER WORK"

1024 pixels wide. preferably abit smaller, maximum recomedation 600 pixels wide

How to make your images the correct size in 'Photoshop'
"Make the size of your Jpeg using the screenshots below as a guideline. Select Jpeg quality 40 / Save for web, Save in root-folder / Save both of your images, save the small desired size as a thumbnail. And save the original bigger one as image."

Developing my first website including jquery which takes you to an interactive page, displaying images singularly (I could of had them in a tiled effect with no margin and slightly different jquery coding)

All the functionality goes into the head of your source code.

Anything thats visible goes into the body.

When you save you'll receive a notification to update...

Click on the column you want to add information too, 'index html' / 'Design' then switch to the 'Code' view, this will allocate you to the place you've selected in design view. This is where you should paste the code, taking you to specified images.

Standard way html works > how to make text hyperlinks look more dynamic than the awkward blue colour.

Nothing thats visible will go into your template folder.

(Linking the image to a thumbnail, making the webpage more attractive....)

The following screenshots show the processes you have to undertake in order to successfully install this interactivity and have your images displayed in a more contemporary and emphasised way.

Inserting the Jquery into your source code, linking it to your webpage.

Just too understand the process more effectively I concentrated on just developing the amount of images, this was so I could see how each line of coding would look in the html, it also gave me the opportunity to see what I could do with a selection of specific images e.g. You could use icons with a background colour the same as your webpage, this would mean you'd be left with a floating set of icons as oppose to a very boxed effect.