Video: USE CSS LAYOUT IN EXPRESSION WEB

Presenter:Todd Miranda

Tables used to be the preferred mechanism to layout a web page. Using rows and columns, a designer could position elements on a web page where appropriate. Today, the more correct way to handle layout in web pages is by using divs and ID based styles. This presentation demonstrates how to utilize divs and styles in laying out a web site using Expression Web.

The following text is a software generated transcript of the video. Click on a minute link to jump to a location within the video


Minute 0

The purpose this presentation is demonstrate how easily our existing cascading style sheet expression when this began by creating a new website recused Justice a great website and will go and open our default htm file as opposed to using tables for layout to show had used is an ID based arms now using CSS with begin with a page header from an additive to her page and were created in style for her that IP based file to look outside recalled header were most bizarre right now with our position in a position to sell it relatively that means that it flows within the normal code flow of the page lets that it s high

Minute 1

To say 200 pixels now will plow that style toward development in the city we got a good area now for our header with an another day of its our header field as a child of our header and we need a logo so we ll make this element are logo element so will appropriately called style logo is position is going to be absolute absolute positioning means that it removes development for the normal flow of the code so that other elements can flow around it also enables us to position it more accurately with specify a height and width of just a hundred pixels or not to specify its top left right about them yet

Minute 2

Toolbar opera you can do that by choosing view toolbars style application style is another nice toolbar to have openly or dealing with the cascading style sheets by default your style application might be auto in the auto style positioning by default elements are changed in line with supply the logo will tour due to the gear with a high of us with our code there is to do with the ID attached to it else modify this go through back and look at the code and note that his style has been added in line to the element with the changes this file in London obviously overrides our ID styled logo we ll want to do that we are dealing with layout of positioning is a little bit easier to choose my

Minute 3

All since you have more control over where this element goes and how it s affected once is often applied to an element you can specify the target rule and when you modify the element by positioning it somewhere else this file is a solid change was that look that node that now we have a top in a left specify what we said is what Mobile logo so it s also the more background properties and lists use a background image and will choose the slice waterfall picture we don t want it to be repeated so will choose a background he is not or no repeat and will lead a position at the default position 00 now with our logo in our header

Minute 4

Need some header text as well so will add another day of it was created a style for it will call this subheader and as I will specify a font size they will make it bold and let s give it some color it will be absolutely positioned as well and we won t specify the other property for so this presentation here and let s visit that s actually apply the style that lets mood where we want it to does absolutely positioned pitilessly pretty good header and will add some content for page to have a little more control over content were a poor content could

Minute 5

Will as them your content do so is preinstalled for it or call it content this can be positioned relatively to the one it just flowed normally within the flow of the code and let s apply that style else at paragraph and will say this is my website I hope you like it on the paragraph and then he says to you like my images and they will come and ever and put it in each and this news will and will

Minute 6

Does the putting this image is and how I show another positioning property for less to the big image there were your more place to scroll so let s say this so we can save our evidence is change folder developer you this year for a website with our header and protects our image and scrolls now let s see what happens if we take a look at one of the other properties let s modify the subheader style list

Minute 7

Disposition from absolute to fix the middle of it fixed yet what if it does is it removes the element from a national co folks if you position it where you want but it positions the relative to the window and onto the page so we scroll our page this element will stay where it is positioned with the window with neglect that now we scroll our page notice of our header text stays where it is so modified us take that back to absolute or greatness as a single column layout lets take a look at adding some colors to the wheel to see which do have is where solicitor went to our header to give

Minute 8

Will set the background color to something unobtrusive and will set the background color of us also modify the future properties to specify the width and height is smaller but were not scrolling anymore is modify the contents files will and let s said its background to that letter blue collar and was previously browser noted couple of things first forwarded this white border

Minute 9

Around the page around or else the second thing to notice is that our text butts right up to the very age of RDF so is look at how we might change that will the first way is by creating a style you choose a tag based style and affect the body and in this case we re going to the box model organs that petty and more chips to zero and those who check same for all which makes the top right bottom and left already zero it will occur content will modify that style and Wilson is more to zero but we want to have some padding out of the top but we want maybe 10 pixels

Minute 10

Padding right 10 pixels padding left that where text or images don t let right up to the sides and so will do the same thing for header set to reward in and this time maybe will set 20 pixels top 10 right and left and see robot notes previous surveys that we got rid of abortions amount of page so slick and how we would do it to call this first we want to look at our content of score to its file

Minute 11

In his position relatively we want to specify mala wit and specify a width of 600 pixels now we going to lay out and we are changed to float we want this element to float to the left that means that he gets picked up out of the normal code flow element to wrap around it and it will always flew to the left hand side of its parent Ellis at her other column sort at another diff type notice that it looks like he went right over our first content give Terri is because as I said once you float element that he removes it from the normal code flow does create a new style and will call this content to

Minute 12

Does it will also float left and will specify a width of 200 at supply the style portal at and missed his second callis the browser and now we have a two column design with a header with our positions set absolutely no more control over where everything goes and yet we been able to do some same things we could do with a table just using style sheets another way gets more experience and learn a little bit more about doing position

Minute 13

At layout with CSS is to use some of the CSS templates that come with expression web with Anna page to her site and we use a CSS layout page if you look at these we got a number of different layouts is bigger layout has a header and navigation part two columns and a footer in the same thing with a logo who header area three columns a footer so we can choose one of these layouts and will be given a page that already has the sanctions defined for us I would suggest that you take a look at a number of the CSS templates look at the particular style look and see what they did how they did it and how they positioned these elements

Minute 14

This is a good way to learn more about CSS positioning and how to do layout for CSS this presentation gives you a good introduction to play out of position with CSS pretty soon you ll be able to do all your layouts with no tables just using CSS and gives

Click here to go to original video page