Session 16 [Fri 260208] - Make Up Session

A good extended session today for a number of you. We covered a number of techniques throughout the day -

CSS & Images For Styling

• Taking slices from our page comps
• Using CSS to place backgrounds in our HTML elements
• An Image Replacement technique for HTML text elements that must stay on the page for accessibility purposes

For those that missed the session we will be covering these techniques again next session [Mon 010310].

Flash Based Image Carousel
We completed our flash work from earlier in the term by setting up and inserting a flash based image carousel into an HTML page. For those that missed this, the example can be seen at Autoslideshow Page and the demo files downloaded from Autoslideshow Demo Files.

If I have time before Tuesday I will write a step by step breakdown of the Autoslideshow procedure on the blog.

Setting Up A Thumbshow Gallery
Finally, this session, we saw how to set up, using CSS positioning, a simple thumbnail style gallery that I recommend you all adapt for your site.

Again the example can be seen at Thumbshow Page and the files downloaded from Thumbshow Demo Files

We will try and look at this set up process again if there is time this week.

Session 15 [Wed 240210] - Wireframing with Phsp Shape Layers/ HTML Check/ Placeholder Imgs/ Setting Base CSS Selectors/ Sizing Main Division Sections

Homework - Three Tasks
Please finish wire-framing your Home Page Comp. You can download my example comp at Wire Framing Example.

Also, staying in Photoshop, please prepare a file of images for your slideshow and/or gallery by setting them up to the correct pixel size in individual layers. This will really help in getting ahead with the final pages. Remember Photoshop files go into the Working FIles folder in your site.

Finally, make sure you have created all your raw html pages for the final site based on the cleaned up pages from this session. Use the Save As… technique to achieve this quickly.

Apologies to Laura for not being able to spend more time with you this session. I will look at your HTML and prioritise you on Friday.

See you all then.

Session 14 [Mon 250210] - Review of Home Page Comps Continued/ Introduction to CSS Classes/ Being More Specific with CSS/ Positioning101/

Session 13 [Wed 170210] - Return Of Folders/ Marking Up Page Comps For CSS/ Critical Review of Home Page Comps

Thank you all for the home page art today. You all have something to move on with.

Homework
Finish your blogs for home work. Look closely at the home page designs of your chosen sites. You may be inspired to tweak your own page comp further before marking it up for css.

The only other thing to do before next session [Mon 220210] is to mark up your home page as instructed today. Next time we will begin laying out html pages with css in earnest.

Finally, watch out for your grade forms for the Planning stage in your email over the next few days.

Session 12 [Mon 150210] - Handing In Training Sites So Far/ Styling The Navigation Bar/ Intro To The Box Model in CSS

Homework

• Comp - Please finish the Photoshop Layer comp for you home page making sure to establish a distinctive identity for your site at the same time - logo, logotype, banner graphic.
  
  Design the identity quickly, keep it simple - shape, colours, fonts, etc. Make sure that it is appropriate to your site's subject.
  The ID can be adjusted and improved as you build your final site.
  
  Also, on your comp, include the footer info and all the unique content for the home page just how you would ike to see it on your final web page.


• Blog - remember to complete your blog ASAP, ideally by next Wednesday, as you will not want it hanging over you as you build the final site. The sooner you complete the sooner I can give you feedback for any last changes that may be required.


• Brief - Finally, read the FInal Brief before tomorrow's class and log any questions you may need to ask.

See you next time.

Session 11 [Wed 100210] - Introduction to CSS Continued/ Submitting Planning Work

Good session today. You all seem to be taking to CSS well.

Homework
Please complete your Photoshop Layered Page Comp for Monday's Session [150210].

Keep practising and investigating CSS if you have time.

Remember to ensure that your latest training site files are live by tomorrow morning before 11:00am.

See you next time.

Session 10 [Mon 080210] - Taking Stock of Planning Stage/ Content Boards/ Setting Up Page Comps in Photoshop/ Introduction To CSS

Homework

Planning Brief

In Session 11 [Wed 100210] you must submit your planning stage work. The brief will be graded based on hardcopy and onscreen preparation.

All work that was done on, or attached to, planning sheets must be placed chronologically in an A3 clear sleeved folder.
Put all the most current pages of your training site and dependent files live on your webonegallery space.

Final Site Production

It is time to get started in earnest on the production of your final site. Please start by turning your home page content board into an index page design for your site. Use Photoshop to create a layered page comp for this as instructed in class.

Create a new directory, with the name of your final site, that we can use to set up a new site in Dreamweaver later. Create a working files folder. Inside that, make a page comps folder and save your layered page comp files in there.

You have until Session 12 [Mon 150210] to finish your first page comp.

Site Analyses Blog

Finally, a reminder to you to keep working on your blogs with an aim to finish in the next week and a half.

Don't forget to backup your site directory regularly to USB [and a second computer too if you can]. See you tomorrow.

Session 9 [Mon 010210] - Blog Reviews/ Technical Aspects of a Site/ Image As Content/ Web Photo Workflow/ Next Stage Planning

Class is cancelled for Wednesday [030210]. Despite this we must continue with our work. The homework below will keep you busy until we meet again next Monday [080210].

Homework

1. You are nearing the end of the planning stage for your site and you need to produce the following as part of your homework -
   
   • A Simple Site Map - visualise your organised content in a typical website map schematic as demonstrated and discussed in this session.
   • Page Content boards - make a good start on listing the content that will appear on each page above and below the fold. Remember, you are not designing the page, simply determining what content, both copy and imagery, will appear where on the pages of your final site.


2. Today, we talked about images as content vs. images for styling. You saw a comprehensive web photo workflow in action in an extended demo finishing with inserting images in an HTML page in Dreamweaver using the RoundTrip technology to allow easy image updates.
   • As part of your homework please litter your training site with images as content, at least one for every page.
   • Also, fill the scrapbook page with inspirational images, textures, colour samples, graphic elements, anything that might prove helpful when designing the look of your site.


3. Finally, continue with your blog entries once you have read the feedback for your first. Aim at finishing the blog in the next two weeks.

All the above is due next Monday [080210]. Good luck.