Basic Page Layouts - Part 1

Basic Page Layouts - Part 1 - CGS 2585: Desktop/Internet...

Info iconThis preview shows pages 1–9. Sign up to view the full content.

View Full Document Right Arrow Icon
CGS 2585: Basic Page Layouts – Part 1 Page 1 © Dr. Mark Llewellyn CGS 2585: Desktop/Internet Publishing Spring 2011 Basic Page Layouts – Part 1 Department of Electrical Engineering and Computer Science University of Central Florida Instructor : Dr. Mark Llewellyn markl@cs.ucf.edu HEC 236, 407-823-2790 http://www.cs.ucf.edu/courses/cgs2585/spr2011
Background image of page 1

Info iconThis preview has intentionally blurred sections. Sign up to view the full version.

View Full DocumentRight Arrow Icon
CGS 2585: Basic Page Layouts – Part 1 Page 2 © Dr. Mark Llewellyn If you examine the markup of most site designs, they are based on two or three column layouts, even though that fact is sometimes visually well disguised. In this section of notes, we’ll examine the way these layouts are created using XHTML and CSS. We’ll worry about adding more visual components to the layout later, right now we want to focus on the underlying structure of the layout. We’ll examine both fixed-width and liquid layouts (where the layout expands automatically to fill the browser window). Basic Page Layout
Background image of page 2
CGS 2585: Basic Page Layouts – Part 1 Page 3 © Dr. Mark Llewellyn A basic use of columns is to organize a list of navigation links down the left or right side of the page next to the main content area. An example of this is the Jing page (Jing is a new screen recording technology currently under development). The Jing blog at http://blog.jingproject.com is an excellent example of a liquid two-column layout. Their page is shown on the next two slides. Visit this site and then adjust the width of your browser to see the “liquid” effect. The main content area changes its width as the browser changes size. The text automatically rewraps to the new line length as the width changes. Multi-column Layouts
Background image of page 3

Info iconThis preview has intentionally blurred sections. Sign up to view the full version.

View Full DocumentRight Arrow Icon
CGS 2585: Basic Page Layouts – Part 1 Page 4 © Dr. Mark Llewellyn
Background image of page 4
CGS 2585: Basic Page Layouts – Part 1 Page 5 © Dr. Mark Llewellyn Browser window smaller in size – note text wrapping compared to previous slide.
Background image of page 5

Info iconThis preview has intentionally blurred sections. Sign up to view the full version.

View Full DocumentRight Arrow Icon
CGS 2585: Basic Page Layouts – Part 1 Page 6 © Dr. Mark Llewellyn Browser window smaller in size – note text simply disappears
Background image of page 6
CGS 2585: Basic Page Layouts – Part 1 Page 7 © Dr. Mark Llewellyn • Notice that when the browser is shrunk too much, that you reach a point where the layout will become no smaller and the right side of the browser window simply covers it up. • We’ll see how to implement both of these effects – liquid layout and set a minimum width – as we look at layouts in more detail. Multi-column Layouts
Background image of page 7

Info iconThis preview has intentionally blurred sections. Sign up to view the full version.

View Full DocumentRight Arrow Icon
CGS 2585: Basic Page Layouts – Part 1 Page 8 © Dr. Mark Llewellyn • Perhaps the most common layout is three columns, typically with left navigation, content in the middle, and the right column commonly used for advertisements, links to other sites, headlines, etc. • A good example of a three-column layout is Amazon.com. They put the navigation in the header so it can use two columns to tell you about the product and the third column to help you buy it.
Background image of page 8
Image of page 9
This is the end of the preview. Sign up to access the rest of the document.

Page1 / 41

Basic Page Layouts - Part 1 - CGS 2585: Desktop/Internet...

This preview shows document pages 1 - 9. Sign up to view the full document.

View Full Document Right Arrow Icon
Ask a homework question - tutors are online