Web Page Design and Layout
Web Page Design In this unit, the students learn how to segment content in the browser window. Three different methods exist: style rules, tables, and frames. All can be used to create complex layouts like the often-used magazine-style configuration. Curiously, tables, are used by many web designers to organize information on the page because of their near universal support. The concept of frames is introduced which allows more than one document to be loaded and viewed in the browser window at the same time. Finally, we show how to open new document windows.
The Importance of Design User Interface! Entryway! First impressions! Diverse front-end platforms.
Some Basics Why are we building this site? Who is the target audience? What does the audience want? Some Good References: http://www.intranetjournal.com/articles/200103/intranet.html http://www.useit.com http://www.webpagesthatsuck.com
UI Principles User profiling. Metaphor/symbols. Feature exposure. Coherence. State visualization. Shortcuts. Focus. Grammar. Help. Safety. Context. Aesthetics. User testing. Humility. Talin, http://www.sylvantech.com/~talin/projects/ui_design.html
Key Implications Know your user! Provide familiarity and consistency. Guide your user (if they need it). Don’t slow your user down. Don’t turn your user away!
Some Technical Issues Bandwidth. Response time. Screen real estate. Multimedia, BHOs, Plug ins, …
Page Layout Options
Major Options CSS/styles. Tables. Frames.
Sample Page and General Layout This is My Wonderful Web Page Latest News: Sept. 27, 2004. Lately I have been spending most of my time getting ready for class and doing other work stuff. Fall break is coming up soon! Of course, before that I have to make and grade some tests. Yuk! Layout with Style Magazine-Style Layouts – magazine style layout has the title that spans the top of the page, image on left and three columns of text Start with determining the overall height and width of site. Layouts are nominally 600 pixels wide by 450 pixels high Sktech design on paper and figure the size and positions of various elements, think dimensions in exact pixels 5 elements/sections: title section (60X600); image section (design around image or edit to fit area); three columns (200 in length) Normal flow in a HTML document is the elements, tags, and text in a source document loading into a browser’s display in a top to bottom order. The position property allows you to specify the exact placement of an element but this is outside of the normal flow. So a mix of specified and not will not work well. If the text is normal flow then it is formatted and dispalyed as if the image with a position property is not there nt all. Specify the position property for all elements to make this work, using the <div> tag. Using a style definition to specify the absolute position of a web page element (an image, in this case): <style type="text/css"> img.eiffeltower {position:absolute; top:100; left:200} </style> </ head> <body> <img class=“eiffletower” src=“eiffel.gif” alt=“Eiffel Tower Picture” / > < / body> My resume Pictures Fun Stuff Work Stuff Links HPU Web Site HPU E-mail IS Department Microsoft IBM HP
Positioning Web Page Elements div.col1 {position:absolute; left:0; top:290; bottom:500; width:200} div.col2 {position:absolute; left:200; top:290; bottom:500; width:200} div.col3 {position:absolute; left:400; top:60; bottom:500; width:200} div.col1 {position:absolute; left:0; top:340; bottom:500; width:200; padding:5 10} Creating the magazine-style using the styles (<div> element). Use <div> tags to create the different divisions of the document Creating a Layout Using the <div> Element. Define the five elements using classes of the div element, specifying the absolute locations for each using the position property. Each of these divisions can be positioned on the page by using the position property, creating the column layout Graphics and titles can be positioned in a similar fashion The first three are an example of using a style definition to create three columns by specifying the absolute position of <div> elements: Last example is adding equal padding around the inside of a <div> element Adding 5 pixels of padding at the top and bottom of a <div> element and 10 pixels of padding on the left and right sides: (10 pixels worth, in this case): div.col1 {position:absolute; left:0; top:340; bottom:500; width:200; padding:10} Designing a layout takes some trail and error; Hint using the background color property makes it easy to see the area boundaries Make HTML document example page 149 – magazine style layout with <div> elements. Keep in mind; dispite <div> with the height property – the text will overflow its block; to control this add overflow:hidden to the element’s style definition (i.e. <div>)
CSS Box 1 Box 2 Box 3 Box 4 Box 5 Box 6
Table Table 2 Table 1 Table 3 Alternative to creating mag-style is using the HTML table – This is not the recommended approach. Consider creating ------------------------------------- define a table with two rows; 2nd row with two cells; 1st row use colspan to span across the bottom two cells ------------------------------------- | Make HTML document like on page 154 - top Getting rid of the white space between table cells: <table cellspacing="0">...</table> Setting the vertical alignment of a cell’s contents (top, middle, or bottom): <td valign="top"> Nesting a table inside the cell of another table (in this case the nested table has two rows with two cells in the top row and three in the bottom row): <td width="400"> <!--A cell of the outer table--> <table width="400"> <tr> <!--First row of the nested table--> <td>...</td> </tr> <tr> <!--Second row of the nested table--> </table> </td> Table 3
colspan and rowspan colspan rowspan
Frames Frameset 2 Frameset 1 Frameset 3 Alternative create magazine style with frames <frameset> </frameset> in place of the body tag. Creating and Using Frames Giving Body to the Frame: The <frame> Tag Frames are created with the <frame> tag. Frames allow different HTML source documents to be displayed in each region. Table of contents is common use of frames; TOC can display at all times in a frame while another diaplays the HTML doc the TOC links to. This is accomplished using the target attribute that says what frame to display a linked document in. But limit use to 3 or 4 frames per page. There must be one frame for each column or row designation in the frameset declaration. <frameset > has two attributes rows / cols by pixel or % or relative position. Look at page 511 for complete list of attributes for <frame />Make HTML document like 164. The src attribute in the frame tag specifies the source document for that frame. Some browsers don’t support because intro after standard HTML. <noframes> will display a message to users that frames are not support by their browser. The <noframes> tag should be used to display information to browsers that do not support frames Linking Between Frames A frame can be given a name using the “name” attribute of the frame tag The name is used as the target of a hyperlink to send the linked material to another frame – allowing the user to click in one frame and change the contents of another Getting Out of a Frameset Linking to external sites requires that you eliminate the frameset so the external site is not “framed” Use the special target “_top” to break out of a frame set Opening Multiple Windows With Internet Explorer, you can open a new window by setting the target to a name of your choosing However, with Navigator 4.x, the browser will display an “…unable to locate server…” error and after clearing the error, the page will be displayed. Frames, unlike tables and style rules, can be used to load different HTML documents into different segments of the browser window The Potential and Limitations of Frames Framed sites can be designed so that hyperlinks clicked in one frame causes the hyperlinked document to load into a different frame Frames are not supported by some older browsers Bad frame design is prolific because browsers do not render frames exactly the same way; check your design on other browsers and operating systems The Layout Document Using <frameset> The frameset document has a <frameset> tag instead of the <body> element XHTML compliance requires a special document type declaration – frameset Framesets can be created as either rows or columns The size can be specified as either a percentage or pixel count Nested framesets are supported for complex layouts 6.3 Creating and Using Frames Defining a frameset with rows (three, in this case): <frameset rows="25%,45%,30%"> ... </frameset> Defining a frameset with columns (two, in this case): <frameset cols="40%,60%"> ... </frameset> Defining a frameset using pixel measurements instead of window percentages (three columns, in this case, with the asterisk indicating that the middle column gets whatever’s left after the 230 pixels of the other columns are subtracted from the window’s width): <frameset cols="80,*,150"> ... </frameset> Defining a nested frameset (two columns with two and three rows, respectively, in this case): <frameset cols="50%,50%"> <frameset rows="50%,50%"> </frameset> <frameset rows="33%,33%,33%"> Loading documents into a basic frameset: <frameset cols="40%,60%"> <frame src="WelcomePage.htm" /> <frame src="ContactsList.htm" /> Loading documents into a nested frameset: <frameset rows="25%,75%"> <frame src="TableOfContents.htm" /> <frame src="Introduction.htm" /> <frame src="ListOfPictures.htm" /> Displaying a message to surfers who view a page without a frames-capable browser (the <noframes> element is placed inside a <frameset> element): <noframes>This Web page uses frames and requires the use of a frames-capable browser, such as Netscape Navigator 2.0 or above or Microsoft Internet Explorer 3.0 or above.</noframes> Giving identifying names to frames (for use with the target attribute in links—see next example; note that the name attribute is often used instead of the id attribute, but the name attribute is now deprecated): <frame id="leftframe" src="ListOfLinks.htm" /> <frame id="rightframe" src="IntroMessage.htm" /> Specifying that a linked document be displayed in a certain frame (rightframe in this case): <a href="Doc1.htm" target="rightframe">Click here to view document 1</a> Erasing a frameset and going back to a full-window display: <a href="DocumentToDisplay.html" target="_top"> Click here to erase the frames and see the document in the full window </a> 6.4 Opening Multiple Windows HTML document like page 166. Opening a new browser window (where you replace "windowname" with a name of your choice): <p><a href="DocumentToDisplay.html" target=“rightframe"> Click here to see the document displayed in a new window</a></p> Display in full window, set target attribute to :_top” <p><a href="DocumentToDisplay.html" target=“_top"> Click here to see the document displayed in a new window</a></p> Display link in another window <p><a href="DocumentToDisplay.html" target=“windowname"> Click here to see the document displayed in a new window</a></p> Frameset 3
My Recommendation Start with tables – wide support and easy. Plan to move to CSS and Box model. Avoid frames – work and limited support. Exercises 6:1 and 6:2