Session 8 [Wed 270110] - Navigation Bar In Place/ Common & Unique Structuring/ Block Vs Inline/ Document Flow/ Library Items/ Duplicating Pages

Once again, a lot covered today. You all seem to be handling the technical side well. Thankyou for your professional focus in class.

Homework

For Session 7 homework, you created your content organisation. For this session's homework please create unique content based on this text and apply it, in a strict hierarchy, to your newly made contents.html page. Use the <h5>, <p >, <ul> and <ol> elements to help you render a clearly formatted HTML version of the information.

Feedback for both your introductory pages and your initial blog entries will be available by Friday [290110]. It would serve you well, if you could also produce a few more site analyses early on in the coming week once you have been assured you are on the right track.

Session 7 [Mon 250110] - Setting Up Your Blog Posts/ Screengrabs & Image Optimization/ Organising Content/ Navigation Bar Using HTML Lists

Homework
An excellent class today. A lot covered. Thank you all for your focus.

Now, for Wednesday [270110] please -

• prepare a finished first blog entry
• make a categorised set of your proposed content, and…
• have a bash at the navigation bar structure

By the way, the dummy content list and it's categorisation is available in the Resource links to the right. Use it to understand how to handlie your own content.

Remember to have a couple of relevant images ready for next time.

Working With Lists
We have done a lot of work on lists now, also seeing how, when you have more than one on the page, you can identify them specifically using the id attribute.

Isolating HTML Components
Also, we made the Navbar that will eventually be placed at the top of each page in an isolated HTML file [navbar.html]. This is to make sure we don't compound problems in our work by introducing key elements to the main page too early.

Footer Navigation
As well as the navbar list element at the top of the page, you saw how to make an alternative footer navigation with row of pipe [ | ] separated relative links that mirror the links at the top of the page.

Session 6 [Fri 220110 Make-Up Class] - Flash Workshop

Click the link to the right to review what we did in this workshop. We got as far as the end of Part 3.

Session 5 [Wed 200110] - Browser Set Up & Page Previewing/ Monitor Resolution/ HTML Lists/ Introduction To Hyperlinks/ Putting Your Page Live

Flash Workshop
Remember to attend the Flash workshop tomorrow [Friday 220110] from 2:00 until 6:00pm. There will be a half hour break in the middle of the session.

Homework
Please do the following -

Live Page

By Friday evening please make sure you have put your index.html page live with your completed text outlining, in as much details as you can, all the important aspects of your proposed site, and including at least five absolute links to websites that relate to your subject. [See below for a repeat of the previously hurried (oops) class instructions on putting your page live.]

First Analysis

Finish your first blog text ready for Monday.

Content List

Finally, complete the first draft of your contents list where you must list all the possible things you might put on your final site. We will be using the content information to make a second page in our current planning site soon.

Putting Pages Live
The following steps will have your page live on the web before you can say hypertexttransferprotocol -

1. First of all, make sure you are happy with your index.html page and its content and save it [Apple-S]


2. Then go to Manage Sites from the Site menu or the other places where you can see the words 'Manage Sites'


3. Click Edit in the Manage Sites dialog box.


4. With the Advanced tab selected, click on Remote Info in the Category column on the left


5. In the Remote Info panel enter the details as laid out in the screen grab below [click to enlarge]. There is a new folder for each of you on the webonegallery server called yournametraining.
   
   


6. When you have entered the information click Test and Dreamweaver should connect to the server. If it doesn't connect successfully, check the information you have entered and try the test again.


7. Click OK when you are done here and then click Done in the Manage Sites box.


8. Back in the Files Panel click on the Connect To Host button as shown in the grab below.
   

   



9. If Dreamweaver connects successfully you can now see your remote, named training folder on the left of the FIles panel and your local files on the right.


10. Drag the Local index.html file over the Remote folder to copy your page to the server.


11. In your browser, type in the URL - www.webonegallery.co.uk/web1_win10/yournametraining - and the page should appear. If your page doesn't appear or there are problems with the links, check and fix anything that doesn't work and drag the local page to the remote folder again to replace the existing remote index page.

NOTE: Always work from the local files to make changes and disconnect from the remote server when you are done by clicking the Connect To Host button again.

Congrats! You are now a web page publisher.

Session 4 [Mon 180110] - Blog Set Up / HTML Intro - Page Structure & Semantic Application of Elements/ First Page/ Drmwvr Extensions

Homework
As instructed in class please -

• In a Word or Text Edit document, write your first site analysis breaking the text down into addressing each key tenet of web design - Target Audience/ Content/ Navigation/ Design/ Technology. Be sure to read carefully the Blog Brief to the right before you start writing.
  
  Write a little about each for a site you like or dislike, ideally related to the subject that your own site will be about.


• By way of the web page that you started this session, please tell me all about your site in clearly headed Question & Answer sections down the page.
  
  This is where you can store all your current thoughts and plans for your site while learning how to present content clearly to the user.

Next Time
It was a good session today. Thanks for all your contributions and hard work. Next time we will continue our introduction to HTML looking at links and lists on a web page. We will also try and find the time to look at how to structure your blog entries and introduce Screen Grabbed, Optimzed images to your blog posts.

Session 3 [Wed 130110 Class Cancelled Due To Weather] Update On Progressing With Site/ Written Assignment Brief Available

Class Cancelled
Session 3 was post-poned yesterday due to snow. We will make up the time later in the term. I hope you all got the cancellation email. Make sure the student portal people have your correct email address if you didn't in case of any further cancellations.

Homework

Site Content

by now you will have pinned down your site subject, the target audience, and tested its worthwhileness with the set questions. You should also have a clear single sentence objective for the site.

The next step is to compile a content list. Stretch your imagination to come up with all the possible content you could conceive of being included on your site related to your chosen subject. [Remember to prepare all your planning work on or attached to your planning sheets.]

Site Analysis

As well as continuing with the planning of your site, please download and read the written assignment brief. When you have read and understood, please attempt your first site analysis [there are some hints below about what you should write].

Write your review by hand for the moment and you can type it up when you have set up your blog next session.

Writing Your First Site Analysis
Whether you write about a site you rate or a site you don't, consider the site from the key web aspects outlined in Session1 -

• Marketing - Who is the site aimed at? Remember there is always more than one audience for a site.
• Content - Does the content intrigue or bore you? Why? Is it presented in the correct tone-of-voice? Are the text and image content well integrated.
• Navigation - Describe the navigation and comment on usability.
• Design - Is there a clear visual metaphor in use. Does it make sense. Does the design stand in the way of the communication?
• Technology - It's early days yet in terms of your technological understanding but you can still describe the interactive and dynamic features of the site. Again, do they help or hinder your enjoyment of the site or your access to the information?

Write about a site that has some relation to your chosen subject. Be thorough and clear in your analysis, breaking it down into clear sections if necessary. No site is perfect, be brutal but positive in your criticism. If something could have been done better, then tell the reader how.

See you next session.

Session 2 [Mon 10110] - Site Planning Brief/ Review of Site Ideas/ Introduction to Dreamweaver/ Setting Up Site/ Common Directories

Homework
For next session , please pin down your final site idea and justify it using the questionnaire available from the LINKS on the right. If you don't understand any of the questions then try your best to answer then move on to the next one.

Make sure you record all the thoughts you have on your planning sheets. [The printer is working now!]

The two most important things to define right are probably your possible target audiences and the objective of your site in a clear, single sentence statement. You will probably find it easier to write this statement once you have answered the questions.

Finally, make sure you have some example web sites that you would like to share with the class. These will become the first hyperlinks on your first HTML page next session.

Thank you all for your contributions to the class this session. See you next time.

Session 1 [Wed 060110] - Welcome to Web One for Winter 2010/ Course Outline/ Making The Planning Sheet Template

Welcome to the course web log for Web One. This is the place where you can catch up with any important information you may have missed along the way. It is by no means comprehensive, so don't rely on it over your own copious notes.

Homework First
Each blog entry begins with a reminder of the homework allocated in the session. Please note that homework is officially set at four hours per each two hour class session. With three courses a week of classes and their accompanying homeworks you will have completed a standard working week [without pay ;-) ].

Your first homework is to -

1. brainstorm onto your brand new planning sheets the subjects and ideas you are considering for this term's website. Expand those minds and be sure to impress next time.
2. Find two websites that you like/don't like. Book mark them in Safari for easy retrieval before next session

Oh, and don't forget to download and peruse the syllabus, your lives may depend on it.

Course Outline
So, as you learnt today, this course is a study of Web Standards based site creation. [It is not a Flash course]. This allows you to focus on your graphics skills and how they apply to web design.

This session you received a breakdown of the current standards for building a web page/site. There are three layers of site construction to consider -

1. The Structural Layer - using HTML [More specifically XHTML (Extensible) Hyper Text Markup Language] for meaningful/semantic page structure and hierarchy, also catering for accessibility issues
2. The Presentation Layer - Incorporating CSS [Cascading Style Sheets] for design and styling. [Check the design biased CSS Zen Garden site and book [available in the library] to learn more about this particular technology]
3. The Behavioural Layer - using Javascript to create interactivity.

Planning Sheet
All paper based work that you make this term will be handed in on or attached to an A3 sized planning sheet branded with your name, contact info [telephone/email probably] and with spaces to enter the date and project title [example below/ click image to enlarge].

You can make your sheet template in InDesign or Illustrator and print one to photocopy multiple times as you need more.