speaker Multimusen

HTML Lesson II – from Wireframe to Web

November 5th, 2013 by

“The problem with using HTML for formatting is that it just isn’t really very good at it,nor was it generally designed for it.” (“HTML & CSS – the Complete Reference” p. 430)

Agenda

  • Lektion 1-2: Ch. 4 “Introduction to CSS” and from Wireframe to Web and Ch. 5 “CSS Syntax and Property Reference”.
  • Pause
  • Lektion 3-4:  The Zengarden – creative experiments on given HTML and CSS.
  • Frokost
  • Lektion 5-6: Workshop: from Wireframe to Webdesign – coding by personal hacking in Notepad, Notepad++, TextWrangler, Nano, Gedit or similar. No, Dreamweaver is not permitted yet.
CSS - illustration from "HTML and CSS - the Complete Reference Guide" p. 433.

CSS – illustration from “HTML and CSS – the Complete Reference Guide” p. 433.

CSS Mnemotics

/* Selector for IDs */

#wrap { color: red; }

/* Selector for CLASS */

.theLogo { font-size: 32em; }

/* Give all images the same width */

img { width: 100%; }

/* however a class might be more practical */

.myWidth { width: 100%; }

Online Sources

Know thine HTML

As a multimedia designer you need to know how HTML and CSS works. Therefore you are not allowed to use Dreamweaver and similar WYSIWYG programs here. Solve the case by writing the code in a simple text editor such as:

  • TextWrangler, Nano (Mac)
  • Notepad or Notepad++ (Windows)
  • Gedit, Nano or Vi (Linux)
  • Emacs (Linux, Unix, Windows, GNU, Mac)

Save your files as .htm or .css as the case may be. Remember to use a logical file structure, such as:

Web site file structure

Web site file structure

Case

So the designer came in with this wireframe for a CV. Now you have to:

  • Make the relevant pictures and save them in .jpg, .gif, .png or even .svg as you fancy.
  • Develop HTML and CSS (either HTML5 or HTML 4.01 strict).
  • Write the code.
  • Test your page in several browsers.
  • Validate your code.

Perhaps you have a wireframe ready for use from the design lessons. If you have, you can use your own creative work.

 

A wireframe

A wireframe