Which formula gives you the desired effect? Desired Results ABCD Click on the letter of the correct answer. A is incorrect. The sidebar and main have the.

Slides:



Advertisements
Similar presentations
How to Use This Template Copy the presentation to your hard drive. Open the slides using slide sorter and copy slides #3, 4 and 5 for each question you.
Advertisements

Using the What Am I Template Copy the presentation to your hard drive. Open the slides using slide sorter and copy slides #3, 4 and 5 for each question.
Web Pages Week 10 This week: CSS Next week: CSS – Part 2.
Cascading Style Sheets
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 6 Key Concepts 1 Copyright © Terry Felke-Morris.
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.
Today CSS HTML A project.
Chapter 3 – Designing your web pages Dr. Stephanos Mavromoustakos.
Introduction to CSS. What is CSS? A CSS (cascading style sheet) file allows you to separate your web sites (X)HTML content from it’s style. Use your (X)HTML.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 6 Key Concepts 1 Copyright © Terry Felke-Morris.
INTRODUCTORY Tutorial 7 Creating Liquid Layouts. XP Objectives Discern the differences among various types of layouts Create a liquid layout Create a.
Advance CSS (Menu and Layout) Miftahul Huda. CSS Navigation MENU It's truly remarkable what can be achieved through CSS, especially with navigation menus.
Web Pages and Style Sheets Bert Wachsmuth. HTML versus XHTML XHTML is a stricter version of HTML: HTML + stricter rules = XHTML. XHTML Rule violations:
CSS normally control the html elements. Three Ways to Insert CSS There are three ways of inserting a style sheet: External style sheet Internal style.
Tutorial 6 Creating Fixed-Width Layouts
Murach’s ASP.NET 3.5/C#, C5© 2008, Mike Murach & Associates, Inc.Slide 1.
CSS Basics LIS Webteam April 8, Why CSS? What’s wrong with HTML? Structure vs Style Early web design used hacks to style webpages with HTML – like.
4.01 Cascading Style Sheets
Creating Tables in a Web Site Using an External Style Sheet HTML5 & CSS 7 th Edition.
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.
Creating A Simple Web Page. Step 1- Open Dreamweaver & Create A New Page (File New) and blank.
Advanced CSS - Page Layout. Advanced CSS  Compound Selectors:  Is a Dreamweaver term, not a CSS term.  Describes more advanced types of selectors such.
CSS Style Rules Guang Tong, Zhan L;lo’p[ Css Style Rule Guang Tong Zhan Three ways to insert CSS 1 External style sheet 2 Internal style sheet 3 Inline.
Copyright © Texas Education Agency, All rights reserved. 1 Web Technologies Website Development with Dreamweaver.
CA Professional Web Site Development Class 23 - CSS Positioning, Image Replacement & Print Styles.
ITP 104.  While you can do things like this:  Better to use styles instead:
The Characteristics of CSS
Web Technologies Website Development Trade & Industrial Education
1 Cascading Style Sheets (CSS) Part 2. 2 The Sources of Style Sheets.
creating a page layout With the index.htm and recipe.htm pages you created, you got some hands-on practice creating different kinds of design elements.
Turning Glowing Text into Animated Glowing Text Using Animation Shop.
North to Alaska’s Seas A confluence of science and culture June 24-28, 2012 Anchorage, Alaska NMEA Annual Conference.
Chcslonline.org Text –wrapping around Images. chcslonline.org To wrap text around an image, lets set up a style in our style sheet. open a new notepad.
IT Introduction to Website Development Welcome!
Web Design I Spring 2009 Kevin Cole Gallaudet University
Getting to know California High School Instructions for Completing Assignment Mr. Hawshin Study Skills.
Course created by Sarah Phillips BBCD Melbourne BAPDCOM Version 1 – April 2013.
Web Foundations WEDNESDAY, NOVEMBER 20, 2013 LECTURE 32: DREAMWEAVER SLIDE SHOW AND GOOGLE MAP.
Quick Questions 1. What does HTML stand for? 2. What are the three main languages of the Web? 3. What is the purpose of the tags? 4. Why do we indent different.
Designing an appealing web page. You have already finished the HTML and CSS code for creating and formatting web pages. Now that you have these skills,
Centre#1234, Candidate#00 1 New website for The Relaxing Holiday Company.
11/12/2015 Box Model Reed Crouch. 11/12/2015  HTML elements can be considered as boxes. In CSS, the term "box model" is used when referring to layout.
Web Design (12) CSS Introduction. Cascading Style Sheets - Defined CSS is the W3C standard for defining the presentation of documents written in HTML.
Coding with HTML/CSS Quiz { } Play as a PowerPoint slideshow for answers.
Understanding CSS Cascading Style Sheets control the presentation of content in HTML pages Style Sheets separate formatting from the content –Styles defined.
Stylizing a Navigational Menu Web Design Section 6-3 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development.
Creating a Google Site For a Digital Portfolio Purpose.
Word 2010 Edit Page Layout In this lesson, you will learn how to insert columns and page breaks. How to change the page orientation, paper size, page margins,
>> CSS Layouts. Recall Properties of Box – Border (style, width, color) – Padding – Margin – Display – Background – Dimension Welcome Padding Area Border.
CSS.
Laying out Elements with CSS
The Box Model in CSS Web Design – Sec 4-8
CSS Layouts: Positioning and Navbars
The Box Model in CSS Web Design – Sec 4-8
Creating Your Own Webpage
Fix the CSS syntax errors below
Advanced CSS BIS1523 – Lecture 20.
Cascading Style Sheets (Layout)
The Box Model in CSS Web Design – Sec 4-8
Creating a Baseline Grid
Introduction to Web programming
CSS Borders and Margins.
FIND THE CORRECT ORDER Click Here to begin FIND THE CORRECT ORDER.
Putting it all together
Web Development & Design Foundations with H T M L 5
More CSS Page layout Boriana Koleva Room: C54
Floating and Positioning
Building a website: Putting it all together
YOUR text YOUR text YOUR text YOUR text
Web Programming and Design
Presentation transcript:

Which formula gives you the desired effect? Desired Results ABCD Click on the letter of the correct answer. A is incorrect. The sidebar and main have the width’s switched and the floats switched. Main carries the larger width. B is Correct! Nice Job! C is Incorrect. The widths are equal and the picture does not show equal column lengths. D is Incorrect. The width of the container is 930px. When you add the content area, margins, and padding of both main and sidebar, they equal 945px. Container has a width of 930px.

Create a sidebar and main ABCD Click on the letter for the next step. Create the following styles for the #sidebar id selector. Set the width to 150px Add padding of 10px to all sides Have the text appear in white Set the background color to teal Set the value of the float property to right Create the following styles for the #main id selector Set the width to 700px Set the margin on the right to 10px Add padding of 10px to all sides Set the background color to teal Set the value of the float property to left Set the text indent to 2em Did you check your answers? Did you do it correctly? Click to view the finished product. Does yours look the same? In this assignment, you are to create the sidebar and main id selectors. Open biz.html in notepad and when given instructions type the code in the file.The sidebar goes on the right side and contains the logo. When you click the letter it will give you directions for the next step and the answer to the previous step. Do your best. You should correct your mistakes.

Create your own sidebar and main ABC Click on the letter for the next step. Make sure to set your width. Do you need margins or padding and on which sides? Here is what your finished product should look like. Go ahead and write your code and then come back and click on C. This is an example of what your code could look like. Is yours wrong if It is a little different? No. Just make sure your columns are not bigger than 940 px. In this assignment, you are to take the website below and change it to a two-column layout. Open griff.html in notepad, when given instructions type the code in the file. The width of the container is 940px.