Week 5. Module 5: Introduction to Typography

5.1. Theory
5.1.1. Reading: Typography Defined
5.1.2. Reading: Basic Typography Terminology & CSS Translation

5.2. Practice
5.2.1. Reading & Exercise: How to use the File Transfer Protocol (FTP) 

How to use the File Transfer Protocol (FTP)

In order to publish pages on the World Wide Web, you will need to use the File Transfer Protocol (FTP). There are a range of ways of using FTP on the Internet, from command line terms to What-You-See-Is-What-You-Get (WYSIWYG) software packages, like Dreamweaver, built in facilities.
The most common way of using FTP is through a standalone software package. Web sites like http://www.tucows.com and http://www.shareware.com have a range to choose from. Some are free, some are shareware – but most of them are essentially used the same way. FileZilla is a good free package you can download and use.
After you install your FTP software and run it, you will be asked for three important pieces of information any time you try to connect with an online server:

• The Hostname (or domain name of the server you want to transfer your files to)
• Your Username
• Your Password

This information will usually be provided by your Internet Service Provider if they have given you permission to publish web pages on their server. The hostname may not be the same as you'd expect – or at least, not the exact same server name. For example, instead of www.myisp.com , it might be ftp.myisp.com .
When you first start up your FTP software, you will see something like this:

FileZilla is a bit more complicated looking than many others, but they all tend to split your screen into two major windows. One of these windows will show you what is on your harddrive (#1 above). The other window will show you what is on the server you are connected to (#2 above). In the screen view above you will find the two middle windows labeled as “Local Site” (on the left) and “Remote Site” (on the right). In this particular view, we haven't connected to the server yet, so no files are shown in the “Remote Site” window.
To connect to the server in FileZilla, you can either use the Quickconnect fields at the top of your screen (circled above), or by bringing up the Site Manager dialog box as you see below:

After you enter your hostname, username, and password and hit “Connect”, the software will connect you to the Web space you have been provided and display its contents in the right window of FileZilla like you see below:

Keep in mind that various FTP programs display these windows in different positions. Some will place your remote site window on the left, and your hard drive on the right. Others will display them as top and bottom windows. The other widows shown above display the progress of your file transfers as they are taking place.
To actually move files up on or down off your server, you simply drag and drop in FileZilla. You can also usually highlight the files you want to transfer and then select arrow buttons that point towards the window of the area you want to transfer to. The arrow buttons would usually be placed between the two connection windows.
In addition to connecting to private password-protected servers, you can also use FTP software to access files stored on publicly accessible servers. Because you will still need to login to these servers, you will need to use an anonymous login. The usually details for logging in anonymously would be:

• Username: anonymous
• Password: your-email-address

Tutorial Exercise

Try logging in to Curtin's anonymous FTP server and download yourself the latest copy of Mozilla. Curtin's anonymous FTP server can be found here: Hostname: ftp.curtin.edu.au Tip: You usually start by looking in the “pub” folder. Pub is short for “public.” What other anonymous FTP servers can you find on the Internet? What can you find on them? Post your findings on the Flecs-Blackboard discussion board.

5.2.2 Reading & Exercises: Adding a Little Style: Getting Started with CSS
CH.8  P.285-339

Adding a Little Style: Getting Started with CSS         

	Tutorial Exercise
DONE!	Read and do the exercises and quizzes in Chapter 8 of Freeman & Freeman's Head First HTML with CSS & XHTML (pp. 285-339). Learn from your mistakes by checking to see if your solutions are correct.

5.2.3 Reading & Exercises: Expanding your Vocabulary: Styling with Fonts and Colours
CH.9  P.341-383

Expanding your Vocabulary: Styling with Fonts and Colours            

	Tutorial Exercise
DONE!!	Read and do the exercises and quizzes in Chapter 9 of Freeman & Freeman's Head First HTML with CSS & XHTML (pp. 341-383). Learn from your mistakes by checking to see if your solutions are correct.

5.2.4. Photoshop Tutorials
5.2.4.1. Tutorial: Photoshop Palettes Overview
5.2.4.2. Tutorial: Photoshop Image Importation Overview
5.2.4.3. Tutorial: Photoshop Image Navigation Overview
5.2.4.4. Tutorial: Scanning Resolution and Resizing
5.2.4.5. Tutorial: Photoshop Undo Overview
5.2.4.6. Tutorial: Photoshop Output Overview 

Week 4. Module 4: Wireframes and Flowcharting

4.1. Theory


4.1.1. Reading: Visual Hierarchy

Visual Hierarchy

Visual Hierarchy : the arrangement of elements according to importance and emphasis. “What is the message?” Question needs to be answered before knowing which text and graphics should be emphasized.
The ABC's of Visual Hierarchy (according to John Rea, vice president/creative director of McCann Erickson , New York ) are:

1. Where do you look first?
2. Where do you look second?
3. Where do you look third?

To establish a visual hierarchy, decide the order of importance for each piece of information on your page. Create a flow of information from the most important element, which should be the focal point of your page, to the least.
If you try to give equal importance to everything, nothing will be considered important. You will just end up with visual confusion. (Landa 1996)
Try the ABC test (above) on the following layouts:


See http://www.stcroixrods.com/
See http://www.audiusa.com/

See http://www.tazo.com/ [AWESOME TEA SITE!!!]

Things to keep in mind when trying to design a good visual hierarchy...
In general, people from Western cultures will:

• Quickly scan from upper left to bottom right to get an overview of the screen.
• Tend to look at larger items first and smaller items last
• Be attracted to bright colors first, but also look at colors that contrast with or are different from other colors.
• Interpret item places above other items as more important than items placed below.
• Look at items that appear “heavier” first.
• Assume arrows and elements pointing to the right mean forward while arrows pointing to the left mean backward.
• Look at moving elements before static ones.
• Tend to look at moving images of another human (such as a video) before moving on to other elements.

(Graham 1999)
The following list contains some of the visual techniques you can use to emphasis the focal point in your visual hierarchy.

• Make it the biggest
• Make it the brightest
• Enclose the item in a different shape than that of the other content screen.
• Make the item a different shape that that of the other content screen.
• Add a border to the shape around it.
• Change the color of the item to make it contrast with other items onscreen
• Isolate it from other items onscreen
• Add a special effect to it (like texture)
• Make it bright if everything else is dull (or visa versa)
• Make it sharp if everything else is out of focus (or visa versa)
• Position the item so all the other elements lead to or point toward it.
• Animate it (make it blink or change colors, apply a rolling texture to it, or create a looping image animation)
• Use another animated element to call attention to the item.

(Landa 1996)



4.1.2. Reading: Wireframes

Wireframes

Wireframe : A diagram that illustrates the layout of a Web page using different shapes (such as boxes, ovals, and diamonds) to represent content, functional, and navigational elements to show their placement on the page. (Phyo 2003)
Storyboard : A visual document depicting the style, layout, action, navigation, and interactivity on every screen of your Web site (Graham 1999) . Storyboards should contain enough information to serve as a blue print. In theory, a storyboard should be self-explanatory enough to allow a third party to construct your Web site without any needed consultation.
Ani Phyo, author of Return on Design: Smarter Web Design That Works (2003), suggests that initially, wire frames should be used instead of storyboards. She argues that much time and money can be saved in developing a Web site if you can get your client to understand and appreciate the usability of the proposed elements on your site before becoming emotionally involved in the visual style.

A wireframe document showing the general layout of a Web page. See below for detailed explanation.
Components of a Wireframe (see numbers on illustration above):

1. Global Navigation
2. Local Navigation
3. Page Specific Content
4. Administrative Navigation
5. Page Title
6. Search Capability (if available)
7. Page Footer

Global Navigation : Visitors need to know, on every page of the site, where he or she is in the context of the site as a whole. As a result, global navigation should appear consistently on every page. Global navigation refers to the major sections of the Web site, not every single page.
Local Navigation : A submenu of links within each of the major sections of the Web site. Local navigation should appear near the top and at the bottom of every page.
Page-Specific Content : Includes headers (aka headlines), sub headers, text, images (including photos, drawings, charts, etc), video, audio, animation, and captions / copyright notices (for images and other media elements). Most pages will contain a combination of these elements. The most prominent content should appear in the center of the page.
Administrative Navigation: This is a separate group of links to utility information unrelated to the actual content of the site, such as “help”, “site map”, “contact us”, and/or “about us”.
Page Title: Your page title should match the link that led to the page as well as the header for the page. It is often ignored but very important because it is the information listed when bookmarks are displayed and search engines give their results. Page titles are best used in this format: Site Name: Section Name: Page Name. 40 characters or less is best.
Search Capability : Some people can't be bothered browsing – especially if they're in a rush. If you can, implement search facilities for your Web site and make them consistently available on every page.
Page Footer: Be sure to use a consistent footer at the bottom of each of your pages.

The Rule of Five, Plus or Minus Two…
When presenting any kind of information on a page, its best to use no fewer than three and no more than seven groupings of elements. Otherwise you are likely to overwhelm your visitors with too many choices.
For example, your global navigation should have no more than seven top level links. By the same token, other information in your site should be categorized into at least 3 groups instead of just listing a bunch links or other information.

Wireframe Design Guidelines
Global and local navigation on your Web site should be discreet, and not detract from the meat of your content on your site. Once your visitors familiarize themselves with the usability of your site, they tend to tune out repetitive navigation panels and concentrate on your content (as they should). They'll feel confident that they'll always know how to navigate around the site when they need to. Using wireframes to plan your layout helps you concentrate on these issues without getting sidetracked on other visual design issues.
Tips to follow:

• Use a Hierarchical Structure – Place items of higher importance at the top of the page in easy to find places. 
• Text Links in Lists vs in Paragraphs – Better to keep links separate from textual content. 
• The Home Page Is the Doorway to Your Site – As with feng shui, the entry of your site has the power to make people feel welcome or scare them away. You home page design is very important. Be sure it clearly identifies your site. 
• Keep Pages Short and Concise – Long scrolling pages are difficult to read online. 
• Provide a Link to a Site Map on Each Page – This would normally be part of your administrative or utility set of links. 
• Use Consistent Navigation Cues – Keep your link sets in their same locations on each page. Think about conventions you see in the outside world and how they're consistent followed: road signs, street addresses, page numbers, book indexes, etc.. 
• Use Links Thoughtfully – Label your links using clear and obvious terminology. Bury your external links deep in the site to force visitors to use your site before they leave it. Sending external links to new browser windows allows your visitors to easily pick up where they left off on your site. 
• Test As You Go Along – Even at the wireframe stage, you should be getting feedback from others. Show them your pages and see if they can understand how you use your site.

(Phyo 2003)


4.1.3. Reading: Flowcharting

Flowcharting

By way of definition a flowchart is a diagram showing the paths through a particular situation. In this case it is through a Web site. It provides an overview of the presentation strategy.
Flow charts are used for:

• Ensuring all aspects are covered
• Clarifying sequences
• Showing relationships
• Ensuring them are no closed loops (by revealing branching logic)
• Ensuring all responses are considered
• Communicating intentions to team members and clients

Selected Flowchart Symbols

N.B. symbols used vary among designers and companies.

Flowchart Conventions

When producing flowcharts the following guidelines exist :

• Draw top to bottom
• Use arrows to show directions
• Try and avoid lines crossing
• Try and keep a flowchart to one page (A3 or A4)
• Number flowcharts and nest them, beginning with a conceptual level
• At the high level, one box represents a sequence
• Can be three dimensional, e.g. by using plastic children's toys

Examples
Following from the objectives for the table setting training, a basic working model of the flow between the content will be developed.
At this stage we will limit our use to the symbols given above.

Notes:

• The package name section will have the aim, credits and copyright notices as well
• The menu has three menu items, as indicated by chart.
• Help and Quit are always available, (perpetuals)
• Each section must be accessed from the main menu
• Main menu is also always available
• Each subsections can be paged through
• The package title, and each of the subsections need more detail

4.2. Practice

4.2.1 Reading & Exercises: Serious HTML: Standards, Compliance, and All That Jazz

Tutorial Exercise
DONE!	Read and do the exercises and quizes in Chapter 6 of Freeman & Freeman's Head First HTML with CSS & XHTML (pp. 223-264). Learn from your mistakes by checking to see if your solutions are correct.

4.2.2 Reading & Exercises: Putting the ‘X’ into HTML: Moving To XHTML

Tutorial Exercise
DONE!!	Read and do the exercises and quizes in Chapter 7 of Freeman & Freeman's Head First HTML with CSS & XHTML (pp. 265-284). Learn from your mistakes by checking to see if your solutions are correct.

4.2.3 Reading & Exercises: Meeting the Media: Adding Images To Your Pages

Tutorial Exercise
DONE!!!	Read and do the exercises and quizzes in Chapter 5 of Freeman & Freeman's Head First HTML with CSS & XHTML (pp. 165-221). Learn from your mistakes by checking to see if your solutions are correct.

Sharpen your pencil trivia:


How long a line can you draw, with a typical pencil?






CH.5 Project Page: html myPod Page


4.2.3. Photoshop Tutorials

4.2.3.1. Tutorial: Photoshop Rubber Stamp Cloning Tool Overview

4.2.3.2. Tutorial: Photoshop Darkroom Techniques Overview

4.2.3.3. Tutorial: Photoshop Levels Variations and Curves Overview

4.2.3.4. Tutorial: Photoshop Drop Shadow Instructions 

Week 3. Module 3: Navigation

Some of the ideas I am having for my website:

1. How to start a Blog - see: http://asksusib.blogspot.com/ I have been playing with this already
2. Alcohol-Free Living - choices for alcohol free products and places to go like Restaurants, etc.
3. Energy Remedies for Pets - e.g. Flower Essence Remedies for Cats
4. The Art of Vienna - The Artist's Guide to Vienna
5. The Subtle System - Energy Centres and Channels, Chakras, Channels and their qualities 

3.1. Theory
3.1.1 Reading: Basic Navigation: Understanding the User Experience

Basic Navigation: 

Understanding the User Experience

In general, most people need to know some basic things in order to orient themselves — both in the virtual world and the real world:

• Where am I?
• Where can I go?
• How will I get there?
• How can I get back to where I once was?

	The Real World	The Web World
Where am I?	We're surrounded by clues about location: Signs Maps Sounds Smell Color Climate	Very little sense of where you are.
Where can I go?	If you're planning a trip, you can research various transportation systems to see what goes where you want it to go. Where else can you go if you are visiting Perth ?	On the web, you need to determine how to get from the main page to any other page within. You also need to know what possibilities exist in getting there. (links, search engine, site map, etc)
How will I get there?	How do you get to Fremantle, for example, coming from Perth ? If you are not familiar with the Perth metropolitan area, think about how many different ways you could get to Uluru.	How often do you really know the route you're traveling on the Web? How do you find the information you want on the Web? Think about different Search facilities on the Web, for example. What about Web directories? How easy is it for you to recall a site you stumbled across yesterday?
How can I get back to where I once was?	How do you find your way home again? Do you have to go the same way? Can you return another way?	What navigation tools are used to help you re-trace your steps on the Web? What alternatives so you have to using the back button on your browser? (colored links, breadcrumb navigation, etc)

These important questions should be easily answerable on any of your Web pages. (Fleming 1998)

	References
	Fleming, J 1998, Web Navigation: Designing the User Experience, 1st edn, O'Reilly & Associates, Inc., Sebastopol, California.

 Retrieved from:http://lms.curtin.edu.au


3.1.2 Reading: Ten Qualities of Successful Navigation

10 Principles of Successful Navigation

1. Navigation should be easily learned
2. Navigation should remain consistent
3. Navigation should provide feedback
4. Navigation should appear in context
5. Navigation should offer alternatives
6. Navigation should require an economy of action and time
7. Navigation should provide clear visual messages
8. Navigation should use clear and understandable labels
9. Navigation should be appropriate to the site’s purpose
10. Navigation should support user’s goals and behaviours

3.2. Practice
3.2.1. Exercise: Style Sheet Basics

Tutorial Exercise

Tutorial for Manipulating Styles It is important to test your Web designs on a variety of popular Web browsers. While Microsoft's Internet Explorer is still the world's most popular, Mozilla's Firefox has developed increasing popularity over the past few years. One of Mozilla Firefox's greatest strengths is in its expandability. There are a number of free and very useful Web development tools you can add on to Firefox to help you develop Web sites. Download the latest copy of Mozilla Firefox from http://www.mozilla.org and install the software. Once the software is installed on your computer, open it up and choose “extensions” from your Tools menu. A dialog box will open listing any extensions you have previously installed. Choose the link to “Get more extensions” from the bottom of this window and you will be redirected to the Firefox Extensions page at Mozilla. Click on the link to “Developer Tools” on your left, and you will be presented with a range of useful extensions. Find the “Web Developer” extension and follow the instructions to install it on your computer. **Alternatively, you can find the home page for the Web Developer extension here: http://chrispederick.com/work/firefox/webdeveloper/download/ Mozilla Firefox usually requires that you close and restart the software after adding extensions. Do this and see if you can find a new Web Developer tool bar at the base of your other toolbars. You can toggle this Web Developer toolbar on and off under your View > Toolbars menu. Visit some of your favorite Web pages and disable the styles there. You can do this by choosing Disable Styles from your Disable menu (actually under the 'CSS' button on my toolbar) on the Web Developer toolbar. Observe what role style sheets play in the visual design of these Web sites. One of the more interesting tools on this Web Developer toolbar is the “Edit CSS” function found under your “CSS” menu. If you select this, your screen will split in two, showing the Web site your viewing on the right, and the styles for that site on the left. If you fiddle with the text on the styles listed in your left window, your changes will automatically be reflected in the Web page shown in your right window. Visit the CSS Vault at http://cssvault.com/ [old link disabled!] Try here: CSS Zen Garden.com and fiddle with the styles to get a new look for the site. You can use Appendix B in your Castro book on page 439 for a list of possibilities. You can also use the colour table flap on the back cover of Castro's book to choose different colours. [access table here: http://www.elizabethcastro.com/html/extras/cssref.html] Once you're happy with your changes, save the styles you've been editing as yourname.css and upload it to the Flecs-Blackboard discussion board.

3.2.2 Reading & Exercises: Web Page Construction: Building Blocks

Tutorial Exercise
DONE :)	Read and do the exercises and quizes in Chapter 3 of Freeman & Freeman's Head First HTML with CSS & XHTML (pp. 77-123). Learn from your mistakes by checking to see if your solutions are correct.

3.2.3 Reading & Exercises: A Trip to Webville: Getting Connected

Tutorial Exercise
	Read and do the exercises and quizes in Chapter 4 of Freeman & Freeman's Head First HTML with CSS & XHTML (pp. 125-164). Learn from your mistakes by checking to see if your solutions are correct.

3.2.3. Photoshop Tutorials
3.2.3.1. Tutorial: Photoshop Magic Wand Selections Overview

Making selections with the Magic Wand tool*

One of Photoshop’s most powerful selection features is the Magic Wand Tool.  The
Magic Wand Tool allows you to easily select irregular shaped objects.  Just select the
Magic Wand from the Tool Bar, and click on an object in the image you want to select,
and Photoshop will look for and select similar colored and connected pixels.  You can
adjust the Tolerance setting for selection accuracy.


Once a selection has been made with the Magic Wand Tool, its 
borders can be modified in a variety of ways.  By choosing the 
Select > Grow option from your Photoshop Menu, you can increase 
the size of your selection by adding adjacent pixels to the selection. 

Select > Similar will include 
similar colored pixels throughout 
the image. 
Select > Modify > Expand, or 
Contract, or Smooth will allow 
you to refine the borders of your 
selection. 

You can also Inverse selections from your Select Menu.  Sometimes it’s easier to choose 

a solid background with the Magic Wand Tool (as seen with the dog image above), and 

inverse it in order to get a complicated wide-ranging colored object in a photo if it 

happens to be on a solid background.

3.2.3.2. Tutorial: Photoshop Quick Mask Selections Overview
             Using the Quick Mask Mode for difficult selections *

When you’re having difficulty making a selection using the previous standard “marching
ants” options, try selecting the Quick Mask Mode button on your Photoshop Toolbar.
The Quick Mask will allow you to paint a mask blocking the areas you don’t want
selected, and erase the areas you do want in your selection using the basic painting and
editing tools we’ve already learned about.  Double clicking on the Quick Mask Mode
button will allow you to change the color and opacity of the mask to make it easier for
you to see and use.  When you're finished, you can return to Standard Mode by selecting
the Standard Mode button on your Photoshop Toolbar.
                                                       



3.2.3.3. Tutorial: Photoshop Selecting By Color Overview


Making Selections of a Range of Colors 

Photoshop's Magic Wand Tool allows you to make selections of individual colors (with
some degree of leniency via the tolerance setting), but how can you make a selection of
two or more distinctively different colors?
Choose Color Range from your Select Menu
to access the following Color Range Dialog Box.  

Once you're satisfied with the colors you have chosen from your image, select OK to
close the dialog box.  You will find all the colors you have chosen with the eyedroppers
selected and surrounded by "marching ants" on your image.

Use the Fuzziness Slider to adjust the tolerance of your selection

Use this eyedropper to make the first 

color selection off your image 

Use this eyedropper to add other colors to your selection. 

Use this eyedropper to subtract any colors 

you may have accidentally selected. 

Color-correcting a selection 
To replace colors in an image, choose Image > Adjust > Replace Color.  You will be
able to sample the shades of color you want to change with the plain eyedropper then
adjust the Hue, Saturation, and Lightness
sliders to get the color you desire.  You can use
the Eyedropper + (plus) tool to add colors to
your selection mask, or the Eyedropper -
(minus) tool to subtract colors from your
selection — even after starting the color
replacement process.                                                                  
Ticking the Selection option will show you a
mask of those colors in your selection, while
ticking the Image option will give you a
preview of your changes.  The Fuzziness slider      
will determine how exact the color replacement
process is.  You may want to create a selection
beforehand if you only want colors in one part of your image adjusted.





3.2.3.4. Tutorial: Photoshop Selections Overview


Saving selections
1
Your ability to make accurate selections is very important to your success using
Photoshop 4.0.  Making selections of images can be very tedious work.  Photoshop will
allow you to save specific selections you have worked hard to make by choosing Save
Selection from the Select Menu.  The selection will be stored as a separate mask in
Photoshop’s Channel Palette.
Loading a Selection
To load an existing Channel you have previously saved, just choose Load Selection from
the Select Menu.

12.02 Making selections using the pen tool
When you use the Pen Tool on your Photoshop toolbar, your paths are saved under your
Paths Palette.  Using the Pen Tool, you can manually draw selections around the objects
you want by using the pen tools in your Paths Palette.  To make straight lines, select the
regular Pen from the Path Palette and click where you want your points to be —
Photoshop will automatically connect the dots with straight lines.  You can use the Pen+
and Pen- pens to add or remove these connecting dots if you want to make any
modifications.
Using the pen tool to make perfect curves can be a little tricky to get used to and will
require some practice.  Instead of click points, you will need to drag a short straight line
in the direction you want your curve to go, followed by another similar short straight line
at the end of your curve.  Once again, you can use the Pen+ and Pen- pens to add or
remove these connecting dots for making modifications.
The mouse pointer shaped arrow icon can be used to move your anchor points.  The angle
icon can be used to convert curved anchors to angular anchors.
Photoshop 4.0 will allow you to create selections out of paths as well as paths out of
selections.  Try making a selection of part of your image, and then converting it to a path
using the appropriate icon button on the bottom of your Paths Palette (see the Paths
Palette diagram above).






3.2.3.5. Tutorial: Photoshop Changing Selections Overview

            Shifting Selections*

You can shift selections by dragging your mouse within the "marching ants" boundaries
or by using your arrow keys.  If you hold your Ctrl key down while attempting to shift
your selection, you'll also move the contents of your selection.
Alternatively, you can use move your selections around in a variety of ways using your
Move Tool from your Toolbar to move your selection wherever you want.  If fact, your
Move Tool can be used to drag and drop selections into other images.
Adding and Subtracting from selections
You can further adjust selections by manually adding and subtracting areas you want
changed.  To manually add to your selection, use your Lasso or Marquee Tools while
your Shift key is pressed.  To subtract from a selection, use your Lasso or Marquee
Tools while your Alt key is pressed.


3.2.3.6. Tutorial: Photoshop Filling Selections Overview

     6.15 Filling a selection with a color or a pattern*

You can fill selections with varying shades of colors or patterns.  If you choose Edit >
Fill while a selection is highlighted, you will have the option of filling with a variety of
colors and at varying degrees of opacity.
Adobe Illustrator texture files can be used to add patterns to a selection.  Several EPS
Vector (*.ai) Adobe Illustrator textures come with Photoshop, and can be found in your
\photoshp\patterns directory.  To use a pattern, open it from your File > Open menu,
choose Select All from your Select menu, and then choose Edit > Define Pattern.  This
will copy the pattern to your Windows clipboard.  Close the EPS file (without saving
changes), and then choose Edit > Fill, making sure that Pattern has been selected from
the Fill menu’s Content options.
    6.18 Painting with a pattern
In addition to filling a selection with a pattern, Photoshop will also allow you to paint
with patterns using your Rubber Stamp Tool.  You will need to copy the pattern
information (from an EPS Adobe Illustrator file, for example) in the same manner you
did to fill the selection with a pattern (see Section 6.14).  Open a Pattern, choose Select >
All, and then Edit > Define.  Once Photoshop has memorized the pattern, you'll be able
to use your Rubber Stamp Tool with the option Pattern (aligned) checked from Tool
Options Palette to paint in a repetitive pattern.
     6.16 Filling a selection with a gradient
Selections can be filled with gradients that will range from your selected foreground
color to your selected background color or in other ways (see your Gradient Options
Palette).  Just select the colors you want to use, and choose your Gradient Tool from
Photoshop’s Toolbar.  You can drag a line to mark the beginning and ending points of
your gradient.


Gradient tools can be used to create many effects, including three-dimensional shaped
objects.  To create any of the following objects, draw an empty selection in the shape you
want and fill the space with a linear or radial gradient.  For best results, draw your linear
gradients from outside of your selected area through your shape and out past the other
side — this will give you more defined edges.

*

 Your version of Photoshop may vary somewhat from the one illustrated here.  Consult with your help file 

or one of our recommended texts for version specific instructions on how to use the tools highlighted in this document.

WEEK 2: Web Terminology

Module 2: Web Terminology

2.1. Theory
2.1.1. Reading: Internet Protocols & Nomenclature
2.2. Practice
2.2.1. Reading & Exercise: Web Design Basics
2.2.2. Exercise: HTML Introduction
2.2.3. Reading & Exercises: The Language of the Web: Getting to Know HTML
2.2.4. Reading & Exercises: Meeting ‘HT’ in HTML: Going Further, with Hypertext

SEE also:  20-things-i-learned-about-browsers-&-the-web

Internet Protocols & Nomenclature

Readings:

• See A Brief History of the Internet : http://www.isoc.org/internet/history/brief.shtml

• The Living Internet: http://livinginternet.com/

• And Tim Berners-Lee's answers to “Frequently Asked Questions of the Press” http://www.w3.org/People/Berners-Lee/FAQ.html

• More about Uniform Resource Locators
  
  
  

NED11 STARTS!!! Week 1 - Module 1

Week 1. Module 1: History of Web Design

1.1. Theory 

• 1.1.1. Reading: The Internet: A Brief Summarized History 

See A Brief History of the Internet : http://www.isoc.org/internet/history/brief.shtml The Living Internet: http://livinginternet.com/ And Tim Berners-Lee's answers to “Frequently Asked Questions of the Press” http://www.w3.org/People/Berners-Lee/FAQ.html The future of the Internet: A next-generation research network called http://www.internet2.edu/has been launched in the USA for research-only purposes. The Australian Academic Research Network (AARNET) at http://www.aarnet.edu.au/is now connected to this network and rolling it out to Australian universities through AARNET3.

• 1.1.2. Reading & Exercise: Tim Berners-Lee's answers to Frequently Asked Questions by the Press

 Read Tim Berners-Lee's answers to Frequently Asked Questions by the Press: http://www.w3.org/People/Berners-Lee/FAQ.html

Answer the following questions 1 - 7 and list answers on Blackboard

• 1.1.3. Reading & Exercise: Internet Timeline

 Read Read Hobbes' Internet Timeline: http://www.zakon.org/robert/internet/timeline/

After reading through Hobbes’ Internet Timeline, find 5 milestones most relevant to the World Wide Web, screen design, and multimedia design issues – along with the time they happened. List your findings on the Flecs-Blackboard discussion board.

1.2. Practice

• 1.2.1. Ensure you have all materials needed to complete this unit.

Ensure you have all materials needed to complete this unit: Crimson Editor: http://www.crimsoneditor.com/ FileZilla: http://filezilla.sourceforge.net/ Programmer's File Editor: http://www.lancs.ac.uk/people/steveb/cpaap/pfe/default.htm Adobe Photoshop or Creative Suite: http://www.adobe.com/products/photoshop/main.html The required text for this unit. See your Unit Outline for more information. Mozilla Firefox: http://www.mozilla.org/

• 1.2.2 Reading: Freeman & Freeman Intro: How To Use This Book

 Read Intro: How To Use This Book of Freeman & Freeman's Head First HTML with CSS & XHTML (pp. xxv-xxxv).
 Intro: 
Who is this book for?
We know what your brain is thinking
Metacognition
Bend your brain into submission
Technical reviewers
Acknowledgements...

http://www.htmlcodetutorial.com/quicklist.html