Presentation is loading. Please wait.

Presentation is loading. Please wait.

HTML and Dreamweaver November 11th. Agenda Box Model Displaying and positioning elements – Padding – Margin – Float – Display – Position HTML Demo.

Published byDerrick Gibbs Modified over 9 years ago

Similar presentations

Presentation on theme: "HTML and Dreamweaver November 11th. Agenda Box Model Displaying and positioning elements – Padding – Margin – Float – Display – Position HTML Demo."— Presentation transcript:

1 HTML and Dreamweaver November 11th

2 Agenda Box Model Displaying and positioning elements – Padding – Margin – Float – Display – Position HTML Demo

3 Box Model The CSS Box Model represents the way in which an element’s margin, padding and borders are rendered in a document.

4 Box Model – CSS properties Notice, all properties have top, right, bottom and left values.

5 Content The content area represents the dimensions of the element either set via CSS or by default from the dimensions of the content of the element. If we were to set a DIV with an ID of ourDiv to 50px by 50px we would do so with the following CSS #ourDiv { height: 50px; width: 50px; } #ourDiv { height: 50px; width: 50px; }

6 Padding Padding represents the space between the content and the border. Generally defaults to none. Padding extends any background property set to the DIV so keep this in mind when using padding in elements with set backgrounds. Padding can be defined in a variety of ways, let’s take a look. More information http://www.w3schools.com/htmldom/prop_style_padding. asp http://www.w3schools.com/htmldom/prop_style_padding. asp

7 Padding #ourDiv { padding: 5px; } #ourDiv { padding: 5px; } For all sides. #ourDiv { padding: 5px 5px 5px 5px; } #ourDiv { padding: 5px 5px 5px 5px; } For each side clockwise [top right bottom left]. #ourDiv { padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; } #ourDiv { padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; } For each side individually.

8 Border Border represents a divider between the padding and margin of an element. Defaults to none. Border styles can be changed to alter the look of the line. Much like padding the border property can be set in a variety of ways. More information: http://www.w3schools.com/HTMLDOM/prop_sty le_border.asp http://www.w3schools.com/HTMLDOM/prop_sty le_border.asp

9 Border #ourDiv { border: 1px solid #000000; } #ourDiv { border: 1px solid #000000; } For all sides with values for [size style hex-value-color]. #ourDiv { border-top: 1px solid #000000; border-right: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; } #ourDiv { border-top: 1px solid #000000; border-right: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; } For each side individually. #ourDiv { border: none; } #ourDiv { border: none; } Can be set to none in order to overwrite another style.

10 Margin Margin represents white-space between the border of an element and any other elements in the document. Some elements have a default margin set (p, h1 etc..). Margins are set in the same way as padding. More information http://www.w3schools.com/htmldom/prop_st yle_margin.asp http://www.w3schools.com/htmldom/prop_st yle_margin.asp

11 Margin #ourDiv { margin: 5px; } #ourDiv { margin: 5px; } For all sides. #ourDiv { margin: 5px 5px 5px 5px; } #ourDiv { margin: 5px 5px 5px 5px; } For each side clockwise [top right bottom left]. #ourDiv { margin-top: 5px; margin-right: 5px; margin-bottom: 5px; margin-left: 5px; } #ourDiv { margin-top: 5px; margin-right: 5px; margin-bottom: 5px; margin-left: 5px; } For each side individually.

12 Box Model – CSS properties

13 One last thing… Keep in mind the addition to dimensions caused by using these properties on an element. If you set a padding of 5px and a border of 5px with a width of 50px your element is actually 70px wide! 5px (border-left) + 5px (padding-left) + 50px (content) + 5px (padding-right) + 5px (border-right) = 70px

14 Positioning Remember block-level elements by default want to take up an entire line. There are a few ways to override this. – Float Tells the element to “float” to the left or right. – Display You can change the way an element is displayed, so block- level elements can be displayed as inline elements. – Position You can set specific position requirements and avoid the document hierarchy all together.

15 Float Most commonly used with DIV elements to achieve complex layouts. Floating allows you to display block-level elements on the same line next to each other provided there is enough space. Floating elements should always have a set width. Floating occurs on the left or right, lets see. The clear property “turns off” floating, which helps fix layout issues that may arise. More information: http://www.w3schools.com/css/pr_class_float.asp http://www.w3schools.com/css/pr_class_float.asp

16 Float #ourDiv { float: left; } #ourDiv { float: left; } Float an element to the left. #ourDiv { float: right; } #ourDiv { float: right; } Floats an element to the right. Clear floating elements (push content to the next line). #ourDiv { clear: both; } #ourDiv { clear: both; }

17 Display Can alter the way an element is displayed. For example, you can make a paragraph element display “in-line” to achieve a similar effect as using floats. You can also force elements to display as blocks with the “block” property. Display is not commonly used, but you should be aware of it. More information and complete set of properties: http://www.w3schools.com/css/pr_class_display. asp http://www.w3schools.com/css/pr_class_display. asp

18 Position Position is very important as it can drastically change what you can and cannot achieve with HTML. You may position elements in a variety of ways http://www.w3schools.com/Css/pr_class_position.asp http://www.w3schools.com/Css/pr_class_position.asp

19 Position #ourDiv { position: absolute; top: 10px; left: 10px; } #ourDiv { position: absolute; top: 10px; left: 10px; } Position an element at 10px top and 10px left in the document. #ourDiv { position: fixed; top: 10px; left: 10px; } #ourDiv { position: fixed; top: 10px; left: 10px; } Same effect as above but maintains position even when scrolling.

20 Setting up sites in Dreamweaver Review Defining a site in Dreamweaver allows us to specify and manage a collection of files that will be used for our website, locally and remotely (on the web). Adobe has a tutorial on the process: http://www.adobe.com/designcenter/dreamwea ver/articles/lrvid4050_dw.html and more information on directory structure and defining sites: http://tv.adobe.com/#vi+f1592v1758

Download ppt "HTML and Dreamweaver November 11th. Agenda Box Model Displaying and positioning elements – Padding – Margin – Float – Display – Position HTML Demo."

Similar presentations

CSS Layout Crash Course An Advance CSS Tutorial. Inline vs. Block Many HTML elements have a default display setting of Block. Block elements take up the.

CSS Layout Crash Course An Advance CSS Tutorial. Inline vs. Block Many HTML elements have a default display setting of Block. Block elements take up the.
Layout using CSS. Using multiple classes In the head:.important{font-style:italic;}.title{color:red;} In the body: Here's a type of paragraph that is.

Layout using CSS. Using multiple classes In the head:.important{font-style:italic;}.title{color:red;} In the body: Here's a type of paragraph that is.
Very quick intro HTML and CSS. Sample html A Web Title.

Very quick intro HTML and CSS. Sample html A Web Title.
9-May-15 More CSS. 2 A different emphasis CSS is the same for XML as it is for HTML and XHTML, but-- XML contains no display information If you want your.

9-May-15 More CSS. 2 A different emphasis CSS is the same for XML as it is for HTML and XHTML, but-- XML contains no display information If you want your.
Today’s objectives Site performance Padding, Margins, Borders

Today’s objectives Site performance Padding, Margins, Borders
Week 9 Using the Box Properties. 9-2 The CSS Visual Formatting Model Describes how the element content boxes should be displayed by the browser –Based.

Week 9 Using the Box Properties. 9-2 The CSS Visual Formatting Model Describes how the element content boxes should be displayed by the browser –Based.
Tutorial 4: Creating page layout with css

Tutorial 4: Creating page layout with css
CSS: Class 1 Background Images, Controlling Position of Background Images, Add Padding to Page Elements, Add Borders to Elements on a Page.

CSS: Class 1 Background Images, Controlling Position of Background Images, Add Padding to Page Elements, Add Borders to Elements on a Page.
CSS, cont. October 12, Unit 4. Creating a Sidebar We know how to create a sidebar –Use the float property div#sidebar{ float: left; } Item1 Item2 Item3.

CSS, cont. October 12, Unit 4. Creating a Sidebar We know how to create a sidebar –Use the float property div#sidebar{ float: left; } Item1 Item2 Item3.
Streamlining Website Development in Dreamweaver Roger L. Runquist Western Illinois University Roger L. Runquist Western Illinois University.

Streamlining Website Development in Dreamweaver Roger L. Runquist Western Illinois University Roger L. Runquist Western Illinois University.
CSS Box Model margin border padding content 23. Box Model Properties PropertyValid valuesExample border-widththin, medium, thick, numberborder-width:

CSS Box Model margin border padding content 23. Box Model Properties PropertyValid valuesExample border-widththin, medium, thick, numberborder-width:
An Introduction to Cascading Style Sheets CSS Layout, and the CSS Box Model Nick Foxall SM5312 week 9: CSS Layout.

An Introduction to Cascading Style Sheets CSS Layout, and the CSS Box Model Nick Foxall SM5312 week 9: CSS Layout.
XP 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks Tutorial 7.

XP 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks Tutorial 7.
MORE Cascading Style Sheets (The Positioning Model)

MORE Cascading Style Sheets (The Positioning Model)
14-Jul-15 CSS Applications to XML. 2 A different emphasis CSS is the same for XML as it is for HTML, but-- HTML already does a pretty good job of layout.

14-Jul-15 CSS Applications to XML. 2 A different emphasis CSS is the same for XML as it is for HTML, but-- HTML already does a pretty good job of layout.
Working with Cascading Style Sheets. 2 Objectives Introducing Cascading Style Sheets Using Inline Styles Using Embedded Styles Using an External Style.

Working with Cascading Style Sheets. 2 Objectives Introducing Cascading Style Sheets Using Inline Styles Using Embedded Styles Using an External Style.
CSS (Cascading Style Sheets): How the web is styled Create Rules that specify how the content of an HTML Element should appear. CSS controls how your web.

CSS (Cascading Style Sheets): How the web is styled Create Rules that specify how the content of an HTML Element should appear. CSS controls how your web.
CSS Margins. The Margin properties define the space around elements. It is possible to use negative values to overlap content. The top, right, bottom,

CSS Margins. The Margin properties define the space around elements. It is possible to use negative values to overlap content. The top, right, bottom,
Cascading Style Sheets – Block Level. Block Level Style So far we have done text-level CSS With block level CSS, we used a generic container tag Similarly.

Cascading Style Sheets – Block Level. Block Level Style So far we have done text-level CSS With block level CSS, we used a generic container tag Similarly.
Slide 1 of 83 Table Borders To specify table borders in CSS, use the border property. The example below specifies a black border for table, th, and td.

Slide 1 of 83 Table Borders To specify table borders in CSS, use the border property. The example below specifies a black border for table, th, and td.

Similar presentations

Ads by Google