Download
1 / 47
470 likes | 632 Views
Building your website. Liquid vs. Fixed Layouts. Your sample.htm file contains some code and content that you could reuse on every page in a multipage website. If you open sample.html now in a Web browser, you might notice that it stretches the full width of the browser window.
E N D
Liquid vs. Fixed Layouts • Your sample.htm file contains some code and content that you could reuse on every page in a multipage website. • If you open sample.html now in a Web browser, you might notice that it stretches the full width of the browser window. • If your Web browser window is very wide, then the page header and navigation bar up top are also very wide, as in this example:
If you make the browser window very narrow, the layout squishes down to try to stay within the width of the browser window, as in this example: Layout.html in a narrow browser window • In the Web design biz, we call that kind of design a liquid layout or fluid layout. • It's the default (natural) way for a page to behave in a Web browser.
Fixed Layout • As an alternative to the liquid layout, you can use a fixed layout, where the page content maintains a constant width. • So if the browser window is very wide, the layout maintains its width and has empty space outside of it. Take a look at this example: Fixed layout in a wide browser window • If the browser window is narrower than the page layout, the layout doesn't squish down to fit. • Instead, some of it is chopped off at the right side of the browser window. • But a horizontal scroll bar appears at the bottom of the browser window automatically, so the user can scroll across the page to see the part that's cut off.
A div is a page division, and we call it a div because we use a <div> tag to start one and a </div> tag to end one. • By default, every div is as wide as its containing element. • In other words, the default width of a div is 100%. • Any element that you apply a width of 100% to will be as wide as its containing element.
Containing Elements • A containing element, as its name implies, is the element in which some other element (or elements) are contained. • The main containing element for a page is the body element. • All of the elements that you see in the browser are contained within the body element. • The <body> tag marks the start of the body element, and the </body> tag that marks the end of the body element. • The other elements on the page are contained within those two tags. • That fact that all of those other elements are contained within the <body>...</body> tags is what makes the body element the containing element for everything inside those tags.
Since the body element is the element that contains all of the stuff you see in the Web browser, it might seem that putting a specific width on the body element would be the easiest way to prevent the page from stretching and squishing down to always fill the width of the browser window. • And in fact, that does work sometimes. • Unfortunately, sometimes isn't good enough. • When Web designers first tried that method, they discovered that some of the programmers who created the Web browsers hadn't considered that possibility. • Putting a fixed width on the body element didn't work quite as well as they'd hoped.
What's needed is another containing element inside the body element that can still contain all of the other elements and take on a specific width. • A div is the perfect for this, because a div doesn't really have any default styling of its own. • You can stick anything in a div—even other divs. • You can style a div however you want with CSS, including giving it a specific width.
This new div will need its own unique identity and style rule, so we can create a CSS style rule—just like we did with the header, nav, and main divs. • ID names are names you get to make up yourself, so you could name a new div anything you like. • Use short, simple, meaningful names. • A name like container or wrapper to this larger containing div is common to use. • Both names make sense, because this new large containing div wraps around all of the other elements inside the body element so that these elements are contained within that new div. • For our working example, we'll use with the name wrapper since it's a little easier to type.
Let's give it a try by adding a wrapper div to your sample.html page. You created that page in Lesson 8, so it should still be in your MyWebsite folder. • Open sample.html for editing (right-click its icon, choose Open With, and then Notepad, Move the cursor to just after the <body> tag, and press ENTER to start a new line under that tag. • Type <div id="wrapper">. Be careful not to make any mistakes or leave anything out! • Move the cursor to the start of the </body> tag, and press ENTER to insert a new blank line above </body>. • Move the cursor to the new blank line above the </body> tag, and type the closing div tag. If you'd like, you can add a comment to help you remember which <div> tag it closes. In other words, you want to type </div><!-- End wrapper -->. As always, be careful not to make any mistakes.
If you were to look at the page in a browser right now, you wouldn't see any difference. • It would still be a fluid layout, same as before. • That's because, by default, a div is as wide as its containing element (the body) and has no special colors, margins, borders, or anything else to distinguish it. • We can apply some CSS to style it however we wish. • It's through the CSS that we'll define a width (and perhaps some other stylistic properties) for our new wrapper div to achieve our fixed layout.
Styling the Wrapper Div Screen Resolution • Every computer screen is actually a set of tiny dots, called pixels, that can be lit in different colors. • Even though all screens have pixels, they don't all have the same number of pixels. • Exactly how many pixels a given screen has is called that screen's resolution. • It's expressed not as a single number, but as two numbers in the format of width x height.
Resolution Example • For example, a small screen might be 800 x 600 (meaning 800 pixels wide and 600 pixels tall). A large, widescreen monitor might be 2560 x 1600, or even higher. • And there are many possibilities in between those two extremes.
A fluid layout will stretch to fit whatever width a user makes his or her browser window on the screen. • A fixed layout, you have to decide on a fixed pixel width. • You won't want to force people to scroll horizontally. • As a rule, people don't like having to scroll across a page. • They don't mind scrolling down, using the scroll bar at the right side of their browser window.
Fixing a width • To minimize the likelihood that anyone will have to scroll horizontally, many designers fix their layout width at 760 pixels. • That leaves some room for the border around the browser window and for the vertical scroll bar, even on a small 800 x 600 resolution screen. • Some designers find that 760-pixel width too confining, and they'll kick it up to 980 pixels or so. • They figure it's reasonably safe to do so because few people these days (less than 3% by some estimates) will be browsing with a resolution of 800 x 600 or less. • More likely, they'll be using 1024 x 768 or better screen resolutions. So going with a width of about 960 pixels allows them to view the entire page width without horizontal scrolling. • Again, using 960 pixels rather than the full 1024 leaves room for any borders and the vertical scroll bar.
When creating your own pages, you can certainly experiment with different widths to see what works for you. • Code is just characters you type and change at any time. • Don't worry about committing to a width right off the bat. • So now you know about width. What about height? You don't have to worry about the height of your layout. • The Web browser program automatically calculates height to ensure that everything on the page is visible, and automatically shows the vertical scroll bar, if necessary, if some content runs past the bottom of the screen
Adding the Wrapper Style Rule • To apply a width to your page layout, you'll want to add a style rule for the wrapper div. • As you may recall, to create a style rule for a named div, you go into your style sheet, type a #, followed by the id of the div you want to style. • (The names are case-sensitive, so be careful to always match the exact spelling and case of the name.) • Then, you put in the curly braces and any CSS property:value pairs you want to style your element.
Wrapper style rule • Let's look at the steps to create a style rule for the wrapper div you put in your page in Chapter 2. • If you closed sample.html, open it in your editor now so you can change it. • Put the cursor right at the end of the line that reads <style type="text/css">. (That marks the top of the internal style sheet. The internal style sheet is where you can put CSS style rules.) • Press ENTER to start a new line, type #wrapper { and then press ENTER twice. • Type } (I had you type the closing brace right after the opening brace so you wouldn't forget to type it later.) • Move the cursor up so it's inside the curly braces, and type the following exactly: width:760px; Your style rule should look like the one below, and it should be inside the internal style sheet, as below.
Assuming your browser window is more than 800 pixels wide, you should be able to see that the layout no longer stretches across the full width of the browser window. • It's a fixed layout now, and its width remains constant no matter how wide or narrow you make your browser window.
Centering a Div • Our page layout now has a fixed width, mainly because all of the content is contained within a div (named wrapper) that has a specific width of 760px. • To center it, we can't use text-align: center as that CSS property: value pair is for centering text inside a div (or another element that contains text). • To center the div, as a whole, we need to set its left and right margins to auto. • The word auto, when applied to the left and right margins of a div that's less than the full width of the page, means "automatically calculate the left and right margin sizes for me, so they're equal." • And when the left and right margins are equal in size, the element in between them is centered horizontally on the page.
Unfortunately, that only works for horizontal centering. • There is basically no such thing as vertical centering in CSS and HTML for divs and other large elements. That's because most pages contain a lot of text that wraps within the browser window, and most pages are so tall you need to scroll down to see content that isn't immediately visible. • Since setting the top and bottom margins to auto won't vertically center the element, most designers just set those to zero. • The code for that, in CSS, is margin: 0 auto; where 0 (zero) applies to the top and bottom margins, and auto applies to the left and right margins.
Let's try it out: • Get back to sample.html in your editor. • Put the cursor at the end of the line that reads width: 760px; and press ENTER to start a new line. • Type margin: 0 auto; making sure to type the number 0 (not the letter O).
Adding a Border • When the layout doesn't extend the full width of the browser window, putting a little border around it can help make it easier to see what constitutes the boundaries of the layout. Fortunately, borders are pretty easy in CSS. Just use this syntax: • border:stylewidthcolor • Replace style with any acceptable style value (typically the word solid for a solid line, but other styles are acceptable, such as dotted and dashed). • Replace width with a number and unit of measure (typically 1px for a border line that's 1 pixel wide). • Replace color with any valid color name or hex code.
For our working example I'll use #fe9900 as the color, which is the same as the background color of the header div up top. The steps to add it are the same as adding the previous property:value; pairs to the wrapper div: • Switch to the Notepad, Textpad, or other editor window that contains the layout.html code for editing. • Click right after the line that reads margin: 0 auto; and press ENTER to start a new line • Type border: solid 1px #fe9900;
Using a Layout Page as a Template • If your site will have multiple pages, users need an easy way to get from one page to the next. • Most multipage sites handle that by presenting a navigation bar near the top of the page, similar to the one we created in layout.html.
Modifying the Navigation Bar • Just because I used file links in the working example, that doesn't mean you need to have pages in your website. • If you want fewer pages, you can remove the table cell for any page you want to remove. • You can remove the row that contains the cells and the link. • For example, if you don't want a products page, you would remove this row from the code: <td style="width: 20%"><a href="products.html">Products</a></td>
Fixing Links that Don't Work • It's a good idea to get your links and page names squared away in your sample.html page, because this prevents you from having to create each page in your site completely from scratch. • That would be a lot of work, and you'd probably make mistakes retyping the code each time. • You'd have to find and correct every mistake on each page. It's much quicker and easier to just get that all squared away in sample.html—once! • Each page has all the code for the header and navbar in place, already typed, tested, and working. • You only need to add something to the main content area of each page to make the pages unique. • Each page in your site, you just have to replace the Main content goes here placeholder text with whatever you really want to show on that page.
The page named index.html is always the site's home page, which means that it's the first page people will see when they browse to your site on the Internet using your site's URL (address). • Your home page should introduce the site. • Once you've created index.html, you can open it with your text editor, same as you've been doing throughout this course, to make any changes to the code you wish. • For instance, near the top of the page, you may want to change this code... <title>My Layout</title> ...to something like this... <title>Home</title>
Using the Main Content Division • You'll want to show something unique in the main content area of the page. • In other words, you want to replace the Main content goes here placeholder text with some words or pictures that describe your site. • Make sure you put it all between the <div id="main">...</div> tags and leave everything else alone.
As an example, you could replace the generic Main content goes here text with a single large image, using an img tag with a width of 100%. Here's what that would look like in the code:
If you don't like the picture idea, and just want text, you could forget that <img> tag and maybe use an h1 tag for a main title, with style="text-align:center" to center the title. • You might have one or more paragraphs of text under that. • Make sure you put the new tags and content in the main content div, as in the example below. • (The style="margin:16px" in the <p> tag just puts a little empty space around the text in that paragraph, which looks neater than lettering the text to touch the borders around the layout.)
Pic and text • Or maybe you like the idea of having a picture and some text • You can even put the picture next to the text by using a simple one-row, two-column table. • The first table cell has a width of 40% (you can use any width you like, under 100%). • It contains a picture that fills the width of that table cell, because the image width is 100%, which makes it as wide as the table cell it's in. • Then, the text is in the next cell over. That cell doesn't need a specific width. It will just naturally grow in width and height to contain whatever you put in it.
Page Layout Summary • While there's no rule that says you must create a page layout for your site, doing so can add some professional polish to the effort. • Use a wrapper div to constrain the width of layout, which converts your pages from a liquid layout to a fixed layout. • Use the sample.html page as a template for other pages in your site. • Copy sample.html to the appropriate file. (Make sure the name of that file matches one of the filenames in your navigation bar.) • You don't have to retype all the code for the header and navigation bar. You can just replace the generic Main content goes here text with whatever tags and content you want that page to show.
