Session 18/19 [Wed 210911] - Gallery HTML/ Linking In Scripts For Interactivity/ More Advanced CSS Positioning Techniques For Layout

Homework & Final Requirements
All you need to do now is -

1. Use all your knowledge of web building to finish three pages - Home, Links, Gallery
2. Your site must to be live and the navigation, links, and slideshow fully functional for grading.
3. You must also save a copy of your final site to the Drop Box

All the above must be achieved without fail by 6:00pm on Friday 230911

Putting Your Site Live
I will be around on Friday from 12:00 - 4:00pm when I will show you how to upload your site to your own personal space on the free AIU server.

If you can't make Friday's session there are instructions for publishing your site available here or to the right in the HTML/CSS/JS Resources Panel.

Session 17 [Mon 190911] - Preparing Images For The Gallery/ Using Slices in Photoshop/ Using the Export Layers To Files… Command

Homework

1. Keep working on completing the content and styling for your pages including all type, imagery, and layout.
2. Also, be sure that you have at least nine copyright free slides and thumbnails ready for Session 18.

Next session we will attempt to complete our gallery page. As promised, I will be taking an extended class from 2:00pm until 6:00pm.

I will also be taking a final Session on Friday 230911 at 2:00pm. In this session I will be demonstrating how to put your website live which is a requirement of the course.

For your final submission of work I expect to see the following -

• Complete Home page
• Finished Links page with all site reviews corrected and in place
• The completed Gallery page
• Live site
• Final site folder in the drop box

The final deadline for all the above is Friday 230911 @ 6:00pm.

See you next time.

Session 16 [Wed 140911] - Positioning With CSS/ Relative vs Absolute/ Trace Image Set Up/ Creating A Positioning CSS Sheet/ Rules For Positioning

Homework

• Please complete the positioning we started this class for your header and footer elements.
• Also, complete your Gallery comp and have your images ready for processing in the templates folder

See you next time when we will continue positioning our elements and make a start on our gallery page.

Session 15 [Mon 120911] - Working The Homepage/ Recap - HTML Structure & Content/ Recap - Typesetting/ Recap - Image Replacement

Homework

• In preparation for next time please complete your home page in terms of content/ typesetting/ image replacement.
• Also, continue comping your gallery page in accordance with the requirements in the previous blog post below.
• Finally, don't forget to paste all your corrected site reviews into position in your Links page.

See you next time.

Session 14 [Wed 070911] - Final Custom Navbar Instruction/ YAH State/ Positioning With CSS - Introduction/ Centering The Page/ Making The Next Comp

Homework
Two things for next time -

• Finish collecting your nine images for the slideshow
• Start comping the Gallery Page

Starting the Gallery comp

1. To make your comp for the Gallery page, open your homepage comp as go to File > SaveAs…
2. Save the new file as yoursite-gallery-comp.psd into your templates' comps sub-folder.
3. Delete any layers or layer groups that are not shared between pages keeping only the common elements - Header, Footer, Background Elements for example.
4. Create new layers to hold each element unique to your Gallery page [see diagram of required elements for the gallery page below].

PLEASE NOTE: This is not a layout design just a wireframe diagram to show
you what must go on the gallery page

See you next time when we will complete the common shell for all your web pages.

Session 13 [Mon 050911] - CSS Quiz/ Custom Navbar [Part 2]/ Positioning With CSS

Homework

• In preparation for Session 15 [Mon 120911], please create or find nine copyright free images in digital form for your forthcoming gallery page.
• Keep working on your HTML and CSS skills as previously advised.

Thanks for all your work today, see you next time.

Session 12 [Wed 310811] - Quiz#3 Postponed/ CSS Afresh/ Building a Custom Navbar/ Making a Sprite File/ Specificity With CSS

Homework
Please practise your CSS and look back over what we achieved today. The session 12 transcript is available to the right.

In particular try and get all your image replacement parts [logotype/ strapline] in place using the technical information from the session 11 transcript.

That's it. See you next time for part two of the custom navigation process.

Session 11 [Wed 240811] - Styling the Nav Bar Continued/ Working With Link States & Pseudo Classes/ Intro To Inheritance & Cascade/ Image Replacement

Homework
Three things for next time -

1. Write your third site analysis ready for 2:00pm next session [Wed 310811]. Don't forget to add your corrected second analysis to your links page too.
2. React to the feedback on your Home Page comps making any changes that will improve your site and fulfill requirements
3. Keep experimenting with CSS ready to continue at a faster pace next time.

Also, there will be a 5 question quiz on CSS in the next session too.

Have a good Bank Holiday and see you next time.

Session 10 [Mon 220811] - Type Formatting With CSS/ Site Set Up Recalled/ Using a Reset Rule/ Working With Ems/ The Box Model/ Styling a List [Part 1]

Homework
Experiment and get used to working with CSS as you have experienced it so far.

Remember that you are trying to get a close typographic match with the typesetting in your home comp including type formatting, paragraph formatting, and colour. Observe the typography on existing sites for hints of effective hierarchy and text formatting.

Ensure you do this task as we will be moving on quickly with CSS technique from here on.

Also, I do strongly suggest, if you were a bit ruffled by the site set up procedure at the beginning of the session, that you practise this too.

There will be a quiz on CSS in session 12 [Wed 310811].

See you next time.

Cancellation

The Flash workshop has been cancelled for today. Apologies for any inconvenience.

Session 9 [Wed 170811] - Intro To CSS In Properties Panel/Anatomy Of A CSS Rule/ Images & CSS/ Preparing Bgd Graphics/ Embedded Vs External Styles

Homework
For next session -

• Complete your second site analysis improving your content based on criticism from the first analysis [Deadline Mon 220811 2:00pm Hard Copy]
• Experiment with CSS to become comfortable with its structure and syntax

Remember, there is a Flash workshop offered for Fri 190811 from 2:00 - 5:00pm. Still spaces left. Sign up on the second floor.

See you next time.

Session8 [Mon 150811] - Back Up Site/ Return Site Analyses/ Block & Inline Explained/ Library Items/ Propagating Page/ Setting Up Secondary Browser

Homework

• Update the footer nav links in your Footer library item
• Finalise your Home Page Comp ready for next session when we start styling with CSS
• Remember to bring in your sketches for grading
• Correct your site analysis and add it to your links page in place of the dummy content
• And remember, the second site analysis is due by 2:00pm in Session 10 [Mon 220811]

Catching Up
Today, for those of you that didn't have the files, you saw how important it was to be up to date.

Before next session, please complete your links HTML page and propagate pages incorporating library items if you have not already.

I have decided it is best you are not provided with a dummy links page. This will simply put you further behind. Work hard now, using your own site and files to catch up before next session.

So, study the links page code to mark up your page.
Then, create you library items - Header and Footer
Next, propagate the pages as you saw in class, altering the content as you go.
Finally, update the nav bar links via the library items

See you next time.

Session 7 [Wed 100811] - Deadline For First Site Analysis/ Finishing The Home Page Comp

Homework
Please complete the home page comp for Monday ready to return to Dreamweaver. Make sure you name all layers and layer groups appropriately as instructed.

If you were absent, look at the example comp as a guide for completion.

See you next time and thanks for all your hard work today.

Session 6 [Mon 080811] - Quiz 2 On Dummy Comp/ Building A Comp From Scratch/ Working With Gradients, Filters, Layers, and Type In Photoshop

Homework

• Well done on your clear focus and hard work this session. We will continue the comp next time. In the meantime, feel free to further improve your designs based on your final home page rough. Work on colour, texture, and mood.
  
  Remember, it is essential that you bring your final home page design sketch to the next class [Wed 100811] to work from.


• Also, for the same session, remember to bring a hard copy of your first 200 word site analysis to be handed in at 2:00pm sharp.

That's it for now. See you next time.

Session 5 - Completing The Structure For The Links Page/Briefing On Site Analysis

If You Were Absent
Many of you were away today. If you were absent, please get up to speed before next session by using the session outline for Session 5 [Wed 030811] here. Here is a link to the final code for the links page. This code represents what students had at the end of the session. Also, check the briefing for the site analysis task in the same session document.

Homework

• Next session [Mon 080811] we start in Photoshop. Please complete your final homepage sketch and bring it in next session as a guide for production.


• Here is an Example Comp for you to study. Please download it, open it in Photoshop and examine the structure of the file. In particular look in the Layers Panel to see what's going on.
  
  If you are not experienced with Photoshop you can gain a good understanding of the Layers by turning them on one by one. From the bottom of the Layers Panel turn each layer on, one at a time, to understand all the comp's components from the background upwards.
  
  The layers are comparable to physical layers of acetate. Starting from the bottom and stacking up they form the final composite image - in this case it is a web page layout that is formed through the accumulation of the layers.
  
  As your layers become many and complex you can further organise them into Layer Groups. You can see how these gather your layers into logical groupings as you examine the example file.
  
  PLEASE NOTE - There will be a short quiz on this example comp file worth 2.5% of your final grade.

See you all next time.

Session 4 - Quiz#1/ Home Page Sketch Review

Well done on presenting your sketches today. You all have sufficient information to begin your final sketch before creating your composition in Photoshop next week.

Homework

1. You all have corrections and rewrites to make on your home page text. Please make these changes and submit a fresh hard copy next session [Wed 030811] at 2:00pm sharp. Please recognise that only hard copy will be accepted.
2. Before next session, on your links HTML page from session 3, please finish setting up your three web sites for reviewing [titles, absolute text links, screengrabs and dummy text for all three sites].
3. Start work on your final home page sketch based on the feedback you received in class. The sketch is due in session 6 [Mon 080811]. You will use this sketch to build your Photoshop home page comp.

That's it. See you next time.

Session 3 [Wed 270711] - HTML 101 Recap/ New Links Page/ HTML Lists/ Navigation Menus/ Relative & Absolute Links/ HTML5 Elements/ Prepare Web Images

Homework
Please use your homework to -

1. Finish your multiple homepage sketches
2. Gain fluency in the techniques covered so far [For example - try setting up a new site and going through all the motions of building the links page again]

See you next time.

Session 2 [Wed 200711] - Sketches & Page Template/ Page Requirements/ Web Standard/ First HTML Page/ HTML Elements/ Images & Links

Homework
Compositing - before building final pages you need to create Photoshop mock-ups or compositions. Prior to compositing you need to develop the design.

For Session 4 [Wed 270711] please develop and sketch out at least 3 variations for a home page design as instructed in class. Be sure to include all required elements in your sketches and use what you have learnt from looking at related existing sites.

You should also practise and become fluent in using the techniques introduced in class -

• setting up a site
• creating pages
• using the HTML header elements
• optimising images from Photoshop
• inserting images in Dreamweaver
• creating absolute links for both text and images

Finally, there will be a brief open book quiz in Session 3.

See you then.

Session 1 [Mon 180711] - Welcome/ Course Outline/ Choosing Subject/ Studying Existing Sites/ Setting Up A Site In Dreamweaver

Welcome to the Foundation Web Blog. Here you can read the syllabus, download briefs and view other necessary resources.

You can also double-check the homework set after each session, and read the session transcripts if you missed the class. I can't always promise that the session transcripts will be comprehensive but they will at least help you keep on track if you miss a session.

Please feel free to comment or ask questions via the blog. Alternatively, email me at jgosling@aiulondon.ac.uk for same.

Meanwhile, have a great term - James

Session 1 Homework
Remember there is a four hour homework requirement for each session. It should be apparent from the resulting work that you have spent this amount of time on it.

For next session, please carry out the following-

• Look at more sites and take screen grabs and links for future use.
• Write copy for your home page
  1. Web site title
  2. Strapline for your site
  3. 200 words engaging the user in your site from the beginning
• Also, get hold of all required supplies by next session - USB stick/ A3 Layout Pad