Week 5

 

Creating Web Sites ch. 9& 10:

 

Chapter 9– “Page layout tools: Tables & Styles”. In the early days of HTML and web pages, invisible tables enabled the alignment of text and pictures in a nice grid structure. Since the advent of style sheets, tables are giving way because they are too awkward to manage.

                If you use tables, most browsers only show a solid black line for table borders. If you want something else, you should create a borderless table and then apply borders to the table and td, th attributes in a style sheet. If you do have tables with borders, be aware that any empty cells will collapse and disappear. To prevent this collapse, fill in the cell with a non-breaking space ( ).

                When writing HTML that is going to be positioned using style sheets, it is important to divide up your different sections using div tags (division) and class tags. To really see how style sheets can effect a page, go to CSS Zen Garden (www.csszengarden.com). Each page in the gallery has the same HTML, the only difference is the style sheet applied.

 

 

Chapter 10– “Frames”. Frames help large websites keep a common element (often a navigation bar) in the same place on every page. If you use tables or div tags to do this, you must copy and paste a lot of data onto every page. Using frames avoids this by allowing you to show more than one web page in the same browser window. HTML allows you to split the browser screen into different regions called frames.

                There are some negatives about frames however:

  • Confuse search engines -robots don’t know how to navigate and report the right information back.
  • Frame abuse -not seen much anymore, but some folks used frames to keep part of their website visable when a user clicked on an external link.
  • Future compatibility and accessibility -latest versions of XHTML do not support frames, and frames are not easily used by users with screen reading devices.
  • Less effective URLs -users cannot get a URL to a specific page only the first page and then they have to click through everything to find what they were looking for.

 

 

Principles of beautiful web design ch. 3:

 

Chapter 3– “Texture”. Texture in a website refers to an image, usually used as a background, which imitates the appearance and “feel” of an object (like a brick wall, wood, soap bubbles, etc.). Even a simple line can be used to create feelings. A diagonal line (or series of diagonal lines) gives a sense of movement and draws the attention more than horizontal lines.

 

One can use oval or circular background image behind text to create the illusion of a circular block of text. There are many websites devoted to trying to round the corners of text block boarders by CSS, JavaScript, or the use of background images.

Using light and shadow, one can give depth and dimension to objects such as menu buttons, bullets, etc. One can utilize different textures and images to give a certain “feel” to a website. One example is an “antique” or “worn” look, created using “folded” or “torn” corners of boarders to simulate old or torn paper; the use of “watermarks” or “coffee stains” on the background of the website; and many other creative ideas to promote a “feel”.

 

 

Review the following websites:

 

Colors on the Web http://colorsontheweb.com/

 

“Colors on the web” focuses on the use of colors in design and especially as it is applied to web page design. Many topics are covered including: color theory, color wheel, color combinations, color physics, and colors on the web. The page itself seems to have a nice red and white feel, but does have a lot of ads both on the left and right sides. While these do make the web page more jumbled, they are very appropriate since all have to do with the theme of color or color theory and offer a wide variety of “color” resources available on the internet. Colors on the web (COTW) offers a color wizard which will help generate matching color schemes; a color wheel to generate random color combinations to stimulate creativity; and a contrast analyzer to determine if there is enough contrast in colors (especially good for determining if text will be legible on a color background).

Advertisements