Internet & Web development (2)/Course materials/Overview/Web Page Layout
|Internet & Web development (2)|
|Overview||Web Browsers | Web Development Ecosystem | Web Page Layout | Design Components ( Design Tips | Accessibility ) ||
By the end of this page you will be able to:
There are many ways that the layout of a web page can be constructed. These include using:
- Cascading Style Sheets
Follow the link to find out what exactly is on the back of web page.?
Using tables for layout
Tables have traditionally been the way that the layout a web page has been achieved. The web page is sectioned into cells in a table (or tables), and in most cases the table borders are set to "0" to hide them
Current thinking (2009) is that tables should be used to display tabular data, although this too is being challenged as extensible markup (XML) and extensible Style Sheet Language Transformation (XSLT) support is integrated into modern web browsers.
- Searchable by all search engines without causing confusion
- Only one page needs to be downloaded
- Can be used to create separate sections on a page
- Easy to implement
- The whole table needs to be downloaded leading to slower downloading
- If you want to use tables for a navigation bar, it will need to appear on all pages, so..
- a large site can be difficult to maintain if there are lots of links on each page
- Can look different in different browsers
- Can create problems when screen readers are trying to decipher for the vision impaired, as table is used for layout rather than tabular data.
- When SEO's (or Search Engine Optimization) are seeing if the sites content is worthy of higher search engine rankings the information inside tables will not be recognised as content (Bruce Clay, Inc, n.d.).
Using Layers for layout
- included inline using the non-standard <layer> tag (or tag with the positioning set to "absolute" via CSS), or
- loaded from a separate file with <layer src="URL">, or
In modern browsers, this functionality is provided by:
- using an absolutely-positioned div, or
- for loading the content from an external file, an IFrame.
(Layer (HTML tag),2008, December 1)
Using Frames for layout
- As navigation is in a different page, content pages can be smaller and download quicker
- Can be used to hide the URL to some extent
- Hidden frames can contain scripts or images that only need to be loaded once
- Can be easier to maintain as the links page is all that needs editing when links change
- Difficult for some search engines to navigate
- Book-marking can be a problem
- There are significant accessibility issues
- If a page does not load the layout can be spoilt
- Can use a lot of pages so care needed for page names
- One small error in the frameset can create havoc on the site
- Links need to be targeted or you can wind up with frames in frames
- It can be difficult to build a seamless page look
Add the following to each of the individual pages
Using iFrames for layout
An iFrame (or inline frame) allows you to insert an external document into the current html page. It is used extensively for adding connected media (such as a YouTube video) onto your page. The following example inserts an xml file into your html page.
See also Refsnes (2010)
- iFrames are used in some Open Source Applications (like Joomla) to hold pages into a common template. Unfortunately, if the page is bookmarked the template page is used rather than the page displayed in the iFrame.
Using Cascading Style Sheets for layout
A style sheet is a set of formatting definitions that are used by a web page to display the web page data. This means that you can customise the formatting of your web pages and this will be consistent throughout your web site. If at a later stage you want to change any of the formatting features, just changing the style sheet will cause the changes to appear in all the sites pages.
- A CSS lets web designers change the style of their Web pages instantly by amending this one sheet(Kyrnin, 2010).
- The CSS file is downloaded once by the visitor's browser and re-used for different pages on a web site." This differs to the information stored in a table as it requires reloading each time the page is refreshed.(Vord Web Design, n.d.).
The display declaration
To display paragraphs use the Display declaration. This allows you to create tags similar to h1..h6.
- The display declaration (Koch, 2009)
Using XML/XSLT + CSS for layout
XML is used extensively for representing data structures. For example
Using an XML transforamtion (XSLT) we can convert the XML file into structured HTML (amongst other things)
Then we can attach a CSS to this HTML file for display.
- Bruce Clay, Inc., (n.d.). Search Engine Optimization (SEO). Retrieved April 23, 2010, from http://www.bruceclay.com/web_rank.htm
- Layer (HTML tag). (2008, December 1). In Wikipedia, The Free Encyclopedia. Retrieved September 18, 2009 from http://en.wikipedia.org/w/index.php?title=Layer_(HTML_tag)&oldid=255202166
- Refsnes (2010) HTML <iframe> Tag. w3schools. Retrieved March 1, 2010 from http://www.w3schools.com/TAGS/tag_iframe.asp
- Kyrnin, J., (2010, c). Learn HTML / CSS / XML. Retrieved April 23, 2010, from http://webdesign.about.com/od/xhtml/u/htmlcssxml.htm#s5
- Vord Web Design, (n.d.,). Advantage of CSS. Retrieved April 23, 2010, from http://www.vordweb.co.uk/css/advantages-of-css.htm
- Koch, P-P.(2009). The display declaration. Retrieved May 7, 2009 from http://www.quirksmode.org/css/display.html#block