Small group worksheet Lecture Code: 669314

Slides:

Advertisements

Similar presentations

HTML Basics Customizing your site using the basics of HTML.

Advertisements

Quiz #3 - CSS Lecture Code: Get Neighbors’ URLs for MP1

Very quick intro HTML and CSS. Sample html A Web Title.

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.

CSS Menus and Rollovers. Agenda foil Separating style from content 3 pages in one file Rollovers in CSS Horizontal drop-downs Vertical drop-downs.

Cascading Style Sheets By: Valerie Kuna. What are Cascading Style Sheets? Cascading Style Sheets (CSS) are a standard for specifying the presentation.

SM5312 week 11: CSS Menus & Navigation Bars1 An Introduction to Cascading Style Sheets CSS Menus and Navigation Bars Nick Foxall.

Advance CSS (Menu and Layout) Miftahul Huda. CSS Navigation MENU It's truly remarkable what can be achieved through CSS, especially with navigation menus.

Diliev.com & pLOVEdiv.com  DIliev.com.

Unit 20 - Client Side Customisation of Web Pages

TUTORIAL 4: CREATING PAGE LAYOUT WITH CSS Session 4.3.

Lecture Cascading Style Sheets (CSS) Internal Style Sheets Classes.

TUTORIAL 8: Enhancing a Web Site with Advanced CSS

IMAGES Controlling size of images in CSS Aligning images in CSS Adding background images.

CSS/Photoshop Layouts - Quiz #5 Lecture Code:

Web Page Layout With CSS CSS Level 2 vs. Nested Tables Mike Wallick – 11/3/04.

HTML - Quiz #2 Attendance CODE:

Cascading style sheets (CSS)

Image Use. Agenda Ordinary display of image: height, width, alt Rollovers Images as links (remove blue surround) Background images: stretch, tile, xonly/yonly.

CSS Sprites. What are sprites? In the early days of video games, memory for graphics was very low. So to make things load quickly and make graphics look.

Technologies for web publishing Ing. Václav Freylich Lecture 7.

CSS/Photoshop Layouts – Quiz #7 Lecture Code:

Banners - HTML A banner is a zip-package containing a HTML file, CSS file, and optionally JavaScript file and assets in a asset directory. The banner is.

To Proudly supported by ferrycake.com. We will be printing Cash for your Community tokens every week in the Carmarthen Journal and Llanelli Star. The.

Images in HTML Images in the foreground –src loaded separately; relative to home directory –Width & height set aside space in page; do not use this to.

End User Computing More on HTML and CSS Sujana Jyothi Department of Computer Science

Cascading Style Sheets in.NET Lilian Kiilu, Client/Server & Web Applications, Coms 463/563, Section 1pm, Fall 2005, November 16 th 2005.

Introduction to CSS. What is CSS?  Cascading Style Sheets  Used for styling HTML  Also important in javascript and jquery for selectors  External.

CSS - Quiz #4 Lecture Code:

 Remember that HTML is just text  Need to point to pictures  Use the img tag  alt: › screen reader › REQUIRED for this class and to validate.

Add an Image. index.html about.html contact. html contact. html.

Cascading Style Sheets Class 2, Lecture 3 Rachel A Ober

Dynamic Pages – Quiz #11 Feedback (under assignments) Lecture Code:

HTML - Quiz #2 Attendance CODE:

Tutorial #6 – Creating Fixed Width Layouts. Tutorial #5 Review – Box Model Every html element is surround by a box Content, Padding, Border, Margin Can.

Doncho Minkov Telerik Web Design Course html5course.telerik.com Technical Trainer

Lesson 03 // Cascading Style Sheets. CSS Stands for Cascading Style Sheets. We’ll be using a combination of Html and CSS to create websites. CSS is a.

Today’s Agenda Advanced CSS Techniques Floating Z-index Centering Sliding Doors Fluid Layouts CSS3 Advanced CSS Lab Mini Project #2.

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.

Interface Programming 1 Week 3. Interface Programming 1 CALENDAR.

audio video object Options: controls autoplay Need to define height and width Options: controls autoplay.

>> The “Box” Model. Pre-requisite Create a new project in Netbeans called Week5 Create a new html file and name it box.html Create a new css file and.

DIV, Span, CSS.

WEB DEVELOPMENT IMMERSIVE BUILDING PAGE LAYOUTS. 2 Box Model Scaling Positioning Boxes Box Aesthetics HTML 5 Semantic Tags CSS Resets TOPICS GENERAL ASSEMBLYWEB.

Adding a background image with CSS- The absolute basics CIT WINTER SEMESTER 2014 PRESENTED BY COLBY GRIFFITHS.

Dawn Pedersen Art Institute. What Are CSS Sprites? Back in the day, sprites were the images in games that swapped one little image for another in a specific.

3.2 Cascading Style Sheets. 2 Positioning Elements Normally, elements are laid out on the page in the order that they are defined in the XHTML document.

AGENDA Introduction Syntax How to use style specifications. Styles CSS Tutorial Miftahul Huda Speech Signal Processing Research Group Digital Signal Processing.

تقنيات الإنترنت وبرمجة الويب “ العملي “ أ. غادة الرواشدة 1 CSS Cascading Style Sheets.

CSS Cascading Style Sheets A very brief introduction CSS, Cascading Style Sheets1.

Royalton Hartland High School Web Design WEBSITE DRAGSTER IMAGES.

Web Technologies Beginning Cascading Style Sheets (CSS) 1Copyright © Texas Education Agency, All rights reserved.

CSS - Quiz #3 Lecture Code:

Web Design (15) CSS Opacity, Link Colours & Background Images.

Review First – on your own... Go to Day 5 Grab the contents of position review file Place in DW Add styles to recreate – get something close to

CIS234A Lecture 6 Instructor Greg D’Andrea. Span and Div The span and div elements are a generic means by which we can add structure to documents. The.

Cascading Style Sheet (CSS) SAMPLE IT133 Pengembangan Web.

Ch 11 HTML and CSS Web Standards Solutions A Web Standardistas’ Approach.

PERSPECTIVES: TUTORIAL 4 CREATING PAGE LAYOUTS WITH CSS.

CSS Layout Cascading Style Sheets. Lesson Overview  In this lesson, we’ll cover:  Brief CSS review  Creating sections with the tag  Creating inline.

Simple Website Layout Tutorial Using HTML 5 and CSS 3 Ref: layout-tutorial-html-5-css-3/

Creating Image Based Rollovers with CSS Mike Takahashi Office of Instructional Development.

CS 120: Introduction to Web Programming Lecture 10: Extra Features and Website Design Part 1 Tarik Booker CS 120 California State University, Los Angeles.

Introduction to Programming the WWW I CMSC Summer 2004 Lecture 8.

HTML & CSS Contents: the different ways we can use to apply CSS to The HTML documents CSS Colors and Background CSS Fonts CSS Text CSS box model: padding,

Unit 3 - Review. Topics 1. Tag, Attribute, Value 2. CSS Rule Syntax + link 3. Categories of Selectors 4. Inline vs Block Tags 5. CSS Layout 6. CSS Box.

>> CSS Layouts. Recall Properties of Box – Border (style, width, color) – Padding – Margin – Display – Background – Dimension Welcome Padding Area Border.

CSCI 1720 W3.CSS – Part 1 East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design.

CSS Layouts: Grouping Elements

Presentation transcript:

Small group worksheet Lecture Code:

Today’s Agenda Finish Old Quiz & Attendance Announcements Touch on Quiz #6 Small groups to do worksheet

Announcements Mini Project #3 – Part 2 due Tonight Quiz #6 due Tonight No HW over break! Get Started on Final Project Lecture Feedback Feature JavaScript Next

Quiz #6 Was hard. A lot of freedom for implementation Haven’t had much experience combining all concepts from class But good – now we can address lingering issues with XHTML/CSS this class Brief tutorial online: quiz_6 tutorial.pdf under Assignments section By brief I mean ~ 16 pages, but it is mainly examples of code.

What was up with the buttons? All 4 buttons on one image Why? Bottom set for :hover effect Less images means fewer images to load = faster! Since we’ll need all 4 images anyways we’ll just put them together on one file and just transfer one file How do we just display 1? Apply it to a block level element with height = ½ * height_of_image and width = ½ * width_of_image 30px by 87.5px, we round up to 30px by 87px 60px 175px 30px 87.5px

Buttons? HUH? O_o HTML CSS #gallery a { display: block; background-image: url(images/layout/gallery-buttons.png); background-repeat: no-repeat; height: 87px; width: 30px; } #gallery-left { } #gallery-left:hover { background-position: 0 -87px; } #gallery-right { background-position: -30px 0; } #gallery-right:hover { background-position: -30px -87px; }

Centering a Div HTML CSS #centerer { text-align: center; } #toBeCentered { margin: 0 auto; width: 1000px; }

Small group worksheet Lecture Code: