Presentation is loading. Please wait.

Presentation is loading. Please wait.

... Basic iframe body {color: brown; font-family: "Times New Roman"} this is a test of using iframe This is some text just so I can deal with positioning.

Similar presentations


Presentation on theme: "... Basic iframe body {color: brown; font-family: "Times New Roman"} this is a test of using iframe This is some text just so I can deal with positioning."— Presentation transcript:

1 ... Basic iframe body {color: brown; font-family: "Times New Roman"} this is a test of using iframe This is some text just so I can deal with positioning things so as usual I wil go on and on and on so that I will stand some chance of getting it to wrap on most browsers with most standard settings. The wider the screens, the more I have to go on and on and on... Some older versions of browsers do not support iframes and thus they will be invisible - a problem if you want to work with previous browser generations. Click here to change message in the second frame Here I have set up two iframes next to each other and said that the source for them is a separate page I wrote called iframecontent.html. Next, I have said if you click on the line, I will load a different page into the iframe that ws named second. The results are shown on the next page.

2 ... Basic iframe body {color: brown; font-family: "Times New Roman"} this is a test of using iframe This is some text just so I can deal with positioning things so as usual I wil go on and on and on so that I will stand some chance of getting it to wrap on most browsers with most standard settings. The wider the screens, the more I have to go on and on and on... Some older versions of browsers do not support iframes and thus they will be invisible - a problem if you want to work with previous browser generations. Click here to change message in the second frame I have now clicked and the new page has been loaded into the second frame. The page is very basic - it just has this line of code. Basic iframe content This is the content of the other iframe.

3 This is a very basic setup with two columns. It is controlled by the CSS Two columns using CSS This is the header for the two columns This is the left column where I could put lists of things to click on etc. Note that I have read that sometimes it works well to set the margin to -1 if you encounter problems with older browsers. This is some more text just to fill. This is the main body of the page. This is some more text. The footer Note that the leftcol will be laid out according to the specs in the CSS which say:.leftcol { width: 300px; float: left; margin-left: 0px; padding: 5px; } The colum is 300px and will float to the left with no margin to the left.

4 This is a very basic setup with two columns. It is controlled by the CSS Two columns using CSS This is the header for the two columns This is the left column where I could put lists of things to click on etc. Note that I have read that sometimes it works well to set the margin to -1 if you encounter problems with older browsers. This is some more text just to fill. This is the main body of the page. This is some more text. The footer Note that the maincol will be laid out according to the specs in the CSS which say:.maincol { margin-left: 350px; border-left: 4px solid brown; padding: 5px; } The starts 350 px in and has a left border that is solid brown. This gives the start for the second column and lays out the line that makes it clear that there are two columns.

5 This is a very basic setup with two columns. It is controlled by the CSS Two columns using CSS This is the header for the two columns This is the left column where I could put lists of things to click on etc. Note that I have read that sometimes it works well to set the margin to -1 if you encounter problems with older browsers. This is some more text just to fill. This is the main body of the page. This is some more text. The footer This is a spacer and a good explanation for its use is at: http://css.maxdesign.com.au /floatutorial/.spacer { clear: both; } Essentially this clears the floating that we have on the leftcol so that the columns are clear.

6

7 This is a very basic setup with two columns. It is controlled by the CSS Two columns using CSS This is the header for the two columns This is the left column where I could put lists of things to click on etc. Note that I have read that sometimes it works well to set the margin to -1 if you encounter problems with older browsers. This is some more text just to fill. This is the main body of the page. This is some more text. The footer.header { text-align: center; font-size: 24px; margin-top: 4px; border-bottom: 4px solid brown; margin-bottom: 0px; } This sets up the header as aligned in the center and give the border and margin settings.

8 This is a very basic setup with two columns. It is controlled by the CSS Two columns using CSS This is the header for the two columns This is the left column where I could put lists of things to click on etc. Note that I have read that sometimes it works well to set the margin to -1 if you encounter problems with older browsers. This is some more text just to fill. This is the main body of the page. This is some more text. The footer The footer also is set up using this CSS:.footer { border-top: 4px solid brown; font-size: 24px; text-align: right; padding: 2px 10px 0px 0px; clear: both }

9 Meta tags were used to provide descriptions and key words to browsers. Because they were overused and because people put in key words irresponsibly, most search engines do not give them much or any weight today.

10

11 Images of BCC This is an example of meta used to move on to the next page which is bccpage2.html. This technique is not widely used anymore. Images of BCC This is bccpage2.html and sends the viewer to bccpage3.html


Download ppt "... Basic iframe body {color: brown; font-family: "Times New Roman"} this is a test of using iframe This is some text just so I can deal with positioning."

Similar presentations


Ads by Google