Kapi’olani Community College

Slides:



Advertisements
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.
Advertisements

Cascading Style Sheets
Part 5 Introduction to CSS. CSS Display - Block and Inline Elements A block element is an element that takes up the full width available, and has a line.
1 Pengantar Teknologi Internet W03: CSS Cascading Style Sheets.
Unit 20 - Client Side Customisation of Web Pages
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.
Interface Programming 1 Week 5. Interface Programming 1 CALENDAR.
Kapi’olani Community College Art 155 Information Architecture In-class Presentation Week 9A.
Art 155 Information Architecture In-class Presentation Week 9B.
Thesis Presentation IV – Fall Midterm Review NewMediaArts art 249 :: interface design II week 7 :: b.
Interface Design 2 Week 9. Interface Design 2 :: Week 9 :: Calendar.
Kapi’olani Community College Art 249 Interface Design 2 In-class Presentation Week 4A.
Information Architecture Week 6. Information Architecture CALENDAR.
Interface Design 2 Week 10. Interface Design 2 :: Week 10 :: Calendar.
Kapi’olani Community College Art 128 Interface Programming 1 In-class Presentation Week 13B.
XP 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks Tutorial 7.
Art 155 Information Architecture In-class Presentation Week 16B.
Art 155 Information Architecture In-class Presentation Week 9A.
Interface Design 2 Week 5. Interface Design 2 :: Week 5 :: Calendar.
Thesis Presentation IV – Fall Midterm Review NewMediaArts art 249 :: interface design II week 7 :: a.
MORE Cascading Style Sheets (The Positioning Model)
Thesis Presentation IV – Fall Midterm Review NewMediaArts art 249 :: interface design II week 4 :: a.
Kapi’olani Community College Art 155 Information Architecture In-class Presentation Week 8B.
Interface Design 2 Week 3. Interface Design 2 :: Week 3 :: Calendar.
Information Architecture Week 7. Information Architecture QUIZ Please put your books away and get ready for this week’s quiz.
Working with Cascading Style Sheets. 2 Objectives Introducing Cascading Style Sheets Using Inline Styles Using Embedded Styles Using an External Style.
Interface Design 2 Week 6. Interface Design 2 :: Week 6 :: Calendar.
Web Development & Design Foundations with XHTML Chapter 6 Key Concepts.
Working with Cascading Style Sheets. Introducing Cascading Style Sheets Style sheets are files or forms that describe the layout and appearance of a document.
XP Tutorial 7New Perspectives on Creating Web Pages with HTML, XHTML, and XML 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks.
Kapi’olani Community College Art 249 Interface Design 2 In-class Presentation Week 6B.
Thesis Presentation IV – Fall Midterm Review NewMediaArts art 249 :: interface design II week 6 :: a.
Interface Design 2 Week 2. Interface Design 2 :: Week 2 :: Calendar.
CNIT 132 – Week 4 Cascading Style Sheets. Introducing Cascading Style Sheets Style sheets are files or forms that describe the layout and appearance of.
Interface Design 2 Week 7. Interface Design 2 :: Week 7 :: Calendar.
Cascading Style Sheets (CSS) Part II IT210: Web-based IT.
Interface Design 2 Week 13. Interface Design 2 :: Week 13 :: Calendar.
Ch 11 HTML and CSS Web Standards Solutions A Web Standardistas’ Approach.
Interface Design 2 Week 14. Interface Design 2 :: Week 14 :: Calendar.
Thesis Presentation IV – Fall Midterm Review NewMediaArts art 249 :: interface design II week 3 :: a.
XP Tutorial 7New Perspectives on HTML and XHTML, Comprehensive 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks Tutorial 7.
Kapi’olani Community College Art 249 Interface Design 2 In-class Presentation Week 2B.
Kapi’olani Community College Art 249 Interface Design 2 In-class Presentation Week 7A.
Kapi’olani Community College Art 249 Interface Design 2 In-class Presentation Week 5A.
Kapi’olani Community College Art 249 Interface Design 2 In-class Presentation Week 2A.
Creating Web Documents CSS examples (do more later) Lab/Homework: Read chapters 15 & 16. Work on Project 3, do postings.
Laying out Elements with CSS
Working with Cascading Style Sheets
CSS Layouts: Positioning and Navbars
Webpage layout using CSS
Kapi’olani Community College
Kapi’olani Community College
Kapi’olani Community College
Objectives Create a reset style sheet Explore page layout designs
Styles and the Box Model
Controlling Layout with Style Sheets
MORE Cascading Style Sheets (The Positioning Model)
Floating and Positioning
Interface Design 2 Week 4.
Kapi’olani Community College
Interface Design 2 Week 11.
Kapi’olani Community College
Kapi’olani Community College
CS7026: Authoring for Digital Media
CSc 337 Lecture 5: Grid layout.
Kapi’olani Community College
Kapi’olani Community College
Kapi’olani Community College
Positioning Boxes Using CSS
Kapi’olani Community College
Presentation transcript:

Kapi’olani Community College Art 249 Interface Design 2 In-class Presentation Week 7B

:: Examples Vine Media Accentuate Clothing http://www.vinemedia.net http://www.accentuateonline.com

:: Calendar Week 5 Week 6 Week 7 Week 8 9.18 9.20 9.25 9.27 10.2 10.4   Week 6 Week 7 Week 8 9.18 9.20 9.25 9.27 10.2 10.4 10.9 10.11 HW - 3 home pg. comps - round 1 - due. HW - 3 home pg. comps - round 2 - due. Client “Comp web site” due. MID-TERM - 2 final comps due - both home and all sub pages due for each theme. CRITIQUE WORK DAY INFORMAL CRITIQUE

:: Today’s Agenda Lesson on css positioning --------break-------- Work on your designs in class 1-1 Meetings

:: Lesson CSS Positioning Online learning guides: The box model margin, border, padding Normal flow Three positioning states: static relative absolute Floats Online learning guides: BarelyFitz Design’s Learn CSS Positioning in Ten Steps http://www.barelyfitz.com/screencast/html-training/css/positioning/ BrianJar’s CSS Poritioning http://www.brainjar.com/css/positioning/ W3Schools Positioning Model: http://www.w3.org/TR/REC-CSS2/visuren.html Box Model: http://www.w3.org/TR/REC-CSS2/box.html

:: Lesson Box Model The CSS box model describes the rectangular boxes that are generated for elements in the document tree and laid out according to the visual formatting model.

:: Lesson Position Schemes In CSS2, a box may be laid out according to three positioning schemes: Normal flow (default) In CSS2, normal flow includes block formatting of block boxes, inline formatting of inline boxes, relative positioning of block or inline boxes, and positioning of compact and run-in boxes. Floats In the float model, a box is first laid out according to the normal flow, then taken out of the flow and shifted to the left or right as far as possible. Content may flow along the side of a float. Absolute positioning In the absolute positioning model, a box is removed from the normal flow entirely (it has no impact on later siblings) and assigned a position with respect to a containing block.

:: Lesson Normal Flow The default positioning scheme for all elements on a given page. Block-level elements stack on top of each other by default. Inline-level elements remain on the same line and follow one another.

:: Lesson Block-level vs. Inline-level Elements Block-level elements are those elements of the source document that are formatted visually as blocks (e.g., paragraphs) Examples: <div>, <p> Inline-level elements are those elements of the source document that do not form new blocks of content; the content is distributed in lines (e.g., emphasized pieces of text within a paragraph, inline images, etc.). <a>, <i>

:: Lesson Absolute Positioning Relative Positing Floats using top and left to control the location of an element in relation to it’s parent. This method breaks normal flow. Relative Positing using top and left to control the location of an element in relation to itself. This still works with normal flow. Floats using float:left and float:right to control how different elements align themselves on a page and to each other. This still works with normal flow, especially if you use a clear:both.

:: Assignment due : 10.09.06 Final comps purpose/objective: To use templates in order to iterate out the designs for an entire site. To design the most effective user interface for your targeted audience. To defend the conceptual merits of your own designs. To meet the needs and deadlines dictated by your client. assignment: Based upon the feedback from your 2nd round of comps, make the necessary changes to transform your designs into their final form for viewing to the client. You need to produce at least two versions. All pages from your site map must be comped to completion (yes, all sub pages). Pay attention to the details (spelling, curve quality, pixel alignment). All comps should include the final images and copy (no lorem ipsums). format: no less than two thematic designs in two different thematic directions. You may do a third if you would like to show a third design to the client. Use Photoshop to execute your designs digitally. Technical details: Post a Client “Comp Site” that includes “x” number of JPEG images (the number x depends upon how many pages are in your site map) – in at least two different thematic directions (1000 x 800 pixels in dimension, 100% max quality compression). Revised site map – along with your comps, please revise your site map, and save it out as an image to show the client during the critique.

:: A heads-up for next week ALL COMPS WILL BE MARKED LATE IF NOT POSTED ONLINE BY 1:45PM ON MONDAY, 10/9/06. I WILL BE GRADING CLASS PARTICIPATION. IF YOU ARE LATE, THIS WILL COUNT AGAINST YOU. IF YOU ARE ABSENT WITHOUT AN EXCUSE, THIS WILL COUNT AGAINST YOU.