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:

Basic concepts:

Web technologies with James Williamson:

How does the web works,
https://www.lynda.com/Web-Foundations-tutorials/Understanding-how-web-works/158666/158675-4.html
HTML, the language of the web:
https://www.lynda.com/Web-Foundations-tutorials/HTML-language-web/158666/158686-4.html?
Structuring HTML:
https://www.lynda.com/Web-Foundations-tutorials/Structuring-HTML/158666/158687-4.html

My pages on HTML and CSS:
http://soma.sbcc.edu/users/ajarabo/intro_Multimedia/what_is_html.htm

http://soma.sbcc.edu/users/ajarabo/intro_Multimedia/what_is_CSS.htm
Controlling presentation through CSS:
https://www.lynda.com/Web-Foundations-tutorials/Controlling-presentation-through-CSS/158666/158688-4.html
Adding functioanlity with JavaScript:
https://www.lynda.com/Web-Foundations-tutorials/Client-side-scripting-JavaScript/158666/158689-4.html

 
 

Web Design:

What is Web Design:
https://www.lynda.com/Web-Design-tutorials/What-web-designer/177837/364268-4.html
Different areas of web Design:
https://www.lynda.com/Web-Design-tutorials/Different-areas-web-design/177837/364270-4.html

  • Generalist web Designer
  • Visual designer
  • UX design
  • Interactive Designer
  • Motion Graphics designer
  • Front end developer
  • CMS specialist

Designing for the screen:
https://www.lynda.com/Web-Design-tutorials/Designing-screen/177837/364293-4.html
Dealing with a multi-device world:
https://www.lynda.com/Web-Design-tutorials/Dealing-multidevice-world/177837/364294-4.html

 
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:

General concepts on Typography,
http://soma.sbcc.edu/users/ajarabo/ interface_design/typography.htm

Text on the web, font families and web fonts,
http://soma.sbcc.edu/users/ajarabo/ interface_design/typography4.htm

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

JavaScript Libraries:
https://www.lynda.com/Web-Foundations-tutorials/JavaScript-libraries/158666/158705-4.html
Working with a content management system:
https://www.lynda.com/Web-Design-tutorials/Working-content-management-system-CMS/177837/364274-4.html

 
 
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

  
     
     

 

 

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.