Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
CSS - Quiz #4 Lecture Code: 472962 http://decal.aw-industries.com Web Design: Basic to Advanced Techniques Today’s Agenda Quiz & Attendance Announcements CSS Position Demo Z-Index CSS / Photoshop Layouts – Part 2 Finish Quiz & Attendance Lab Web Design: Basic to Advanced Techniques Announcements Web Design: Basic to Advanced Techniques MP2 Clarifications Headings <h1></h1> already bold font-weight: normal; sets to default font-weight: bold; doesn’t do anything, since already bold text-align: right; Not: text-align: right justified; CSS Parse Terminates on Errors CSS Code Style Convention with multiple rules div { font-weight: bold; text-align: left; } Web Design: Basic to Advanced Techniques CSS Property: z-index Higher numbers stack on top of lower numbers. Object must have position set to relative, absolute, or fixed. If not set, later elements have higher z-index’s that earlier ones. Example: div { position: absolute; z-index: 100; } later Common Values: positive integers Web Design: Basic to Advanced Techniques default default earlier 100 99 99 100 Review Positioning 4 Types of Positioning Static: Default Relative: Offsets relative to static position Absolute: Offsets relative to closest parent who has position set, otherwise relative to document bounds Fixed: Offsets relative to browser window Absolute and Fixed take up no space Web Design: Basic to Advanced Techniques Review Positioning Please see demos Rearranging Facebook DIV Play Web Design: Basic to Advanced Techniques Negative Values Negative Values give us even more control Can be applied to Positioning Offsets top, left, right, bottom margins What effect does a negative margin have? Web Design: Basic to Advanced Techniques right: -Xpx; Web Design: Basic to Advanced Techniques Spring 2010 Tuesdays 7-8pm 200 Sutardja-Dai Hall CSS/Photoshop Layouts – Part 2 Web Design: Basic to Advanced Techniques Where Are We? 1. Website Concept/Idea First lecture 2. Photoshop Mockup of Layout 3. Layout to HTML Not yet, but soon! Prev. and this lecture 1. Identify DIVs 2. Code DIVs 4. CSS to Layout Prev. lecture and this lecture 1. Positioning 2. Background Images 5. HTML and CSS content for Site 6. JavaScript, PHP, MySQL 7. Launch Site First few lectures Not yet. Not yet. So Far Only Solid Colors… But we want this… Web Design: Basic to Advanced Techniques Q: How do we get there? A: Background-Images Where do we see them? Most graphics Logos Gradients and toolbars Backgrounds.. of course! <img /> vs. background-image <img /> tags for instances where the content is the image itself For Example: Profile Pictures Images in a Gallery Background-image for instances where the image is part of the presentation structure For Example: Menu Buttons and Bars Site background Splash pages Container styling Web Design: Basic to Advanced Techniques Applying Background-Image CSS Property: background-image Usage: div { background-image: url(/image.png); } Additional properties background-position background-repeat Web Design: Basic to Advanced Techniques Background-Images in Practice Typically, not one giant image, but rather sub images This gradient also repeats This gradient repeats Multiple Instances of icon Triangles can’t be made from pure HTML and CSS, must be an image Gradient changes Background Tiling (-repeat) Opportunities to optimize code Allows variable length of contents Left cap Middle tile Right cap <div class=“wrapper”> <div class=“leftcap”></div> <div class=“middle”>Projects</div> <div class=“rightcap”></div> </div> .wrapper { width: auto; } .leftcap { width: 5px; background-image: url(leftcap.gif); } .middle { width: auto; background-image: url(middle.gif); background-repeat: repeat-x; } .rightcap { width: 5px; background-image: url(rightcap.gif); } Image Types .jpg, .gif, .png JPEG – 16.7M Colors Medium size, medium quality, no transparency GIF – 256 Colors Smaller size, lower quality, transparency, animation PNG – 16.7M Colors Largest size, best quality, transparency Tradeoffs… Web Design: Basic to Advanced Techniques Not All Transparencies are Equal Please see demo PNG-24, GIF matted white, JPG quality 5 PNG is true transparency under all conditions GIF is transparent if we know the background color it will be placed over JPG is not transparent For basic images PNGs can be small! 28k for PNG, 48k for GIF, 108k for JPG Web Design: Basic to Advanced Techniques Use Case for Images Do we need transparency? yes no Do we know the background color of the object we’ll place our image on top of? yes GIF Web Design: Basic to Advanced Techniques JPEG no PNG Photoshop Layout to HTML/CSS Previously… we dissected our layouts into DIV’s Now… we dissect our DIV’s into images Web Design: Basic to Advanced Techniques Save For Web in Photoshop Web Design: Basic to Advanced Techniques Save For Web in Photoshop …continued Web Design: Basic to Advanced Techniques CSS - Quiz #4 Lecture Code: 472962 Then… Lab http://decal.aw-industries.com Web Design: Basic to Advanced Techniques Citation (websites in this lecture) http://www.jwhanif.net/ http://www.ligatureloopandstem.com/ http://www.artua.com/ http://8interactive.com/ Web Design: Basic to Advanced Techniques