Interface Programming 1 Week 2. Interface Programming 1 CALENDAR.

Slides:

Advertisements

Similar presentations

Web Pages Week 10 This week: CSS Next week: CSS – Part 2.

Advertisements

Adding styles. Three alternatives HIT151 Web 'n' Net Web Page Basics /*stylesheet*/ h1,h2,h3 { font-family: verdana, arial, 'sans serif'; } p,table,li.

INTRODUCTORY Tutorial 7 Creating Liquid Layouts. XP Objectives Discern the differences among various types of layouts Create a liquid layout Create a.

Chapter 7 Using Advanced Cascading Style Sheets HTML5 & CSS 7 th Edition.

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

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.

Kapi’olani Community College Art 128 Interface Programming 1 In-class Presentation Week 13B.

Thesis Presentation IV – Fall Midterm Review NewMediaArts art 249 :: interface design II week 9 :: b.

Art 128 Interface Programming 1 In-class Presentation Week 3B.

The.htm/.html Mystery When saving the template files in Internet Explorer, they will be named.htm by default. To be consistent with how the code was written.

Art 128 Interface Programming 1 In-class Presentation Week 11B.

Interface Programming 1 Week 15. Interface Programming 1 CALENDAR.

Web Page Development I Heather Rasmussen (801) Heather Rasmussen (801)

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

Web Design Dreamweaver Semester 2 ATBs. ATB #1 What is a web site?

Working with Cascading Style Sheets. Introducing Cascading Style Sheets Style sheets are files or forms that describe the layout and appearance of a document.

WRT235: Writing in Electronic Environments CSS Classes, IDs, divs.

Working with Cascading Style Sheets (CSS) Module 2: HTML Basics LESSON 5.

CSS Basic (cascading style sheets)

Formatting TEXT AND Using CSS. Adobe Dreamweaver CS3 - Illustrated.

Bare bones slide show. The format is text files, with.htm or.html extension. Hard returns, tabs, and extra spaces are ignored. DO NOT use spaces in file.

© 2011 Delmar, Cengage Learning Chapter 8 Using Styles and Design Style Sheets for Design.

Css. Definition Cascading style sheet (CSS)  It is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents.

Project 4: Yosemite CSS Layout

Planning your site/organization on the Web Please use speaker notes for additional information!

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

Interface Programming 1 Week 3. Interface Programming 1 CALENDAR.

Use CSS to Implement a Reusable Design Selecting a Dreamweaver CSS Starter Layout is the easiest way to create a page with a CSS layout You can access.

Project 6: Kayaking HTML5 Site

Cascading Style Sheets

1 © Netskills Quality Internet Training, University of Newcastle Using Style Sheets in Dreamweaver CS © Netskills, Quality Internet Training, University.

Kapi’olani Community College Art 128 Interface Programming 1 In-class Presentation Week 3A.

Thesis Presentation IV – Fall Midterm Review NewMediaArts art 249 :: interface design II week 9 :: a.

CNIT 132 – Week 4 Cascading Style Sheets. Introducing Cascading Style Sheets Style sheets are files or forms that describe the layout and appearance of.

 Look especially at › File Tips and Shortcuts › Student video.

Designing Web Pages The case for CSS. The Power of CSS css Zen Garden

How to… Cascading Style Sheets. How to Insert a Style Sheet When a browser reads a style sheet, it will format the document according to it. There are.

Cascading Style Sheets Chris Vollmer IT 5610 Chatfield Senior High School.

Interface Programming 1 Week 1. Interface Programming 1 CALENDAR.

ACM 262 INTRODUCTION TO WEB DESIGN Week-7 ACM 262 Course Notes.

Practice for Chapter 3: Assume that you are a freelance web designer and need to create a website to promote your freelance company.

Kapi’olani Community College Art 128 Interface Programming 1 In-class Presentation Week 3B.

Introduction to HTML Hypertext Mark-up Language. HTML HTML = Hypertext Mark-up Language Is just plain simple text marked up by “tags” You can create a.

HTML LAYOUTS. CONTENTS Layouts Example Layout Using Element Example Using Table Example Output Summary Exercise.

Web Page Design The Basics. The Web Page A document (file) created using the HTML scripting language. A document (file) created using the HTML scripting.

Kapi’olani Community College Art 128 Interface Programming 1 In-class Presentation Week 2B.

CASCADING STYLE SHEET CSS. CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles were added to HTML 4.0 to solve a problem.

CSS Introductions. Objectives To take control of the appearance of a Web site by creating style sheets. To use a style sheet to give all the pages of.

Introduction to CSS: Selectors

MIT 511- Web Design & Usability

External Style Sheets.

Web Basics: HTML/CSS/JavaScript What are they?

Art 128 Interface Programming 1 In-class Presentation Week 1B

4.01 Cascading Style Sheets

Art 128 Interface Programming 1 In-class Presentation Week 2B

Introduction to web design discussing which languages is used for website designing

CASCADING STYLE SHEET CSS.

Kapi’olani Community College

Working with Cascading Style Sheets (CSS)

Working with Cascading Style Sheets (CSS)

Web Design and Development

Exercise 9 Skills You create and use styles to create formatting rules that can easily by applied to other pages in the Web site. You can create internal.

Kapi’olani Community College

Art 128 Interface Programming 1 In-class Presentation Week 2A

Kapi’olani Community College

Kapi’olani Community College

4.01 Cascading Style Sheets

Presentation transcript:

Interface Programming 1 Week 2

Interface Programming 1 CALENDAR

Interface Programming 1 EXAMPLES CSS Gallery Sites CSS Mania CSS Vault CSS Beauty CSS Elite CSS Remix CSS Drive CSS Website CSS Reboot CSS Zen Garden (see our class web page for links to all of the above mentioned sites.

Interface Programming 1 LESSON CSS Do not set styles in the header! Use external style sheets: Making a new style sheet Link the style sheet to your html document Controlling the spacing (margins and padding) CSS: selector { property: value; }

Interface Programming 1 IN-CLASS EXERCISE HTML with a linked external style sheet Using Dreamweaver to control basic styling CSS Reset: * { margin: 0; padding: 0; } Setting your type/font settings for body, h1, a, etc. Background color settings

Interface Programming 1 ASSIGNMENT HTML page with a linked CSS file Post this assignment on your class web page OPTIONAL: Work on a custom design for your UH web site. For those who do not have Dreamweaver at home, try these free HTML editors: Taco (MAC) Coffee Cup (PC). Next week we will learn about DIV elements (generic block-level containers). Until then, check out these links: Due :: Week3

Interface Programming 1 POST MORTEM How smoothly have our classes been running? What has slowed us down? What did we skip over? How can we be more efficient in the future?