Read module 10

These are the Instructions for the Tenth module of this course:

are are again working around Web layout-Design
We will become familar with tems and concepts around web design.

Links to pages and videos on important topics:

Web-layout:	http://soma.sbcc.edu/users/ajarabo/WEB_authoring/designlayout2.htm How to use color and font on your layout: http://www.lynda.com/home/Player.aspx?lpk4=100401&playChapter=False

Typography/font use:	html text versus text contained in an image file, http://soma.sbcc.edu/users/ajarabo/WEB_authoring/text_forweb.htm Fonts in html, print fonts versus screen fonts, serif versus sans-serif fonts, http://www.webstyleguide.com/wsg3/8-typography/4-web-typefaces.html Text layout for legibility, http://www.webstyleguide.com/wsg3/8-typography/3-legibility.html General information on text, http://www.webstyleguide.com/wsg3/8-typography/2-characteristics-of-web.html

Site structure:	http://www.webstyleguide.com/wsg3/3-information-architecture/3-site-structure.html Organizing content into sections, http://soma.sbcc.edu/users/ajarabo/intro_Multimedia/sitemap.htm How to organize your web files in your local computer so they work properly on the server, http://soma.sbcc.edu/users/ajarabo/intro_Multimedia/root_folder.htm

On HTML language:	http://www.webstyleguide.com/wsg3/5-site-structure/2-semantic-markup.html http://soma.sbcc.edu/users/ajarabo/WEB_authoring/whatishtml.htm

Important web elements from "Dreamweaver CS4 Essential Training" at lynda.com Link to home page for the volume	What is Dreamweaver, http://www.lynda.com/home/Player.aspx?lpk4=40233&playChapter=False Current web design practices, http://www.lynda.com/home/Player.aspx?lpk4=39968&playChapter=False What is CSS, http://www.lynda.com/Dreamweaver-CS4-tutorials/essential-training/708-2.html?lpk2=708 What is JavaScript http://www.lynda.com/home/Player.aspx?lpk4=39970&playChapter=False

More basic concepts	File naming conventions, http://www.lynda.com/home/Player.aspx?lpk4=39972&playChapter=False special characters in HTML, http://www.w3schools.com/tags/ref_entities.asp Dreamweaver interface, http://www.lynda.com/home/Player.aspx?lpk4=39972&playChapter=False

from "Dreamweaver CS4 with CSS essential training" at lynda.com	Separating structure from presentation http://www.lynda.com/home/Player.aspx?lpk4=55568&playChapter=False How CSS and html work together: "Undertanding document flow" http://www.lynda.com/home/Player.aspx?lpk4=88034&playChapter=False (more technical, next movie from previous) "Adding meaning with ID and Class atributes" http://www.lynda.com/home/Player.aspx?lpk4=55569&playChapter=False

There is an extra credit assignment assigned to this module.

How to create an html page from a page-design in Photoshop (a page layout).

You will need to use Adobe Photoshop CS4, CS5 or CS6.
You can use my sample file, containing a web page in photoshop format or you can use your own web page designed in Photoshop (if you are more experienced).
If you use your own design make sure it contains a navigation with at least 3 sections, 2 images as part of the page content and at least one paragraph of text as bulk text for the page.

Link to the help page for this assignment, HERE.

To slice a page in Photoshop we use the slicing tools located under the crop tool to make user slices.
Then we optimize all the slices for the page at once from the "Save for Web and devices" window.
You can select groups of slices or one by one and then choose optimization settings for them: Select one slice in the window and hold SHIFT to increase the selection with more slices.

Finally you will Click SAVE from the "Save for Web and devices" window being very careful about the parameters.
Most of the time you want to save:

HTML and images

Default settings

All slices

HTML and images

Default settings

User slices

If the background is a complex image or irregular pattern

If the background is a flat color.
You will set the color later in an html editor, like Dreamweaver.

You should submit the zipped root folder for the page: that is the folder containing the html file and the images folder containing all the sliced and saved images.

Make your post in the Forum Web Layout 2.

Take the quiz on Web layout assigned to this module.