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

Slides:

Advertisements

Similar presentations

LIS650 lecture 4 Thomas Krichel today Advice CSS Properties –Box properties –List properties –Classification properties Fun with selectors.

Advertisements

Chapter 7 Page Layout Basics Key Concepts Copyright © 2013 Terry Ann Morris, Ed.D 1.

FORMATTING IN CONTEXT. FOLLOW UPS ANCHOR POINTS MUST BE UNIQUE  If you have more than one, how does it know where to go?  They can be repeated across.

End User Computing An Introduction to CSS Sujana Jyothi Research Lab1, Callan Building, Department of Computer Science

Need to define two things: › The destination › Something to click on to get there  Tag is click here  Can be text, special character or image (next.

Class four: the box model and positioning. is an HTML tag which allows you to create an element out of inline text. It doesn’t mean anything! try it:

Unit 20 - Client Side Customisation of Web Pages

Murach’s ASP.NET 3.5/C#, C5© 2008, Mike Murach & Associates, Inc.Slide 1.

TUTORIAL 4: CREATING PAGE LAYOUT WITH CSS Session 4.3.

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

 CSS ids  Pages  Sites  HTML: class=“name”  Names may define format OR content › Either works  CAN apply multiple classes to the same tag  Multiple.

Kapi’olani Community College Art 258 Interface Programming II In-class Presentation Week 12A.

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

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

Kapi’olani Community College Adobe Flash 2 In-class Presentation Week 2.

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

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

Thesis Presentation IV – Fall Midterm Review NewMediaArts art 127 :: graphic symbolism week 11 :: a.

Kapi’olani Community College Art 258 Interface Programming II In-class Presentation Week 8B.

Interface Design 2 Week 10. Interface Design 2 :: Week 10 :: Calendar.

Kapi’olani Community College Art 258 Interface Programming II In-class Presentation Week 11B.

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

Interface Programming 1 Week 2. Interface Programming 1 CALENDAR.

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

Kapi’olani Community College Art 222 Digital Multimedia In-class Presentation Week 6A.

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

TUTORIAL 8: Enhancing a Web Site with Advanced CSS

Creating A Simple Web Page. Step 1- Open Dreamweaver & Create A New Page (File New) and blank.

ITP 104.  While you can do things like this:  Better to use styles instead:

Eat Your Words! Creating webpage Layout. CONTENT The Layout of a Webpage HEADER FOOTER Each of these sections represents a ‘div’ (or divider). By linking.

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

Cascading Style Sheets Class 1, Lecture 1 Rachel A Ober

 Word doc for you to download › Link at the beginning of class › 10 Questions › Answers to be added inline  Post to Sakai when completed › No resubmits.

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

>> HTML: Structure Elements. Elements in HTML are either Inline or Block. Block-level Elements – Begins on a new line – Occupy the whole width – Stacks.

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

Interface Programming 1 Week 3. Interface Programming 1 CALENDAR.

Week 8 – Part 2 Page Layout Basics Key Concepts 1.

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

Layout with Styles Castro Chapter 11. Tables vs. CSS You can produce “liquid layouts” (layouts that stretch as the browser is resized) using tables or.

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

Internet Technology Dr Jing LU Updated Dr Violet Snell / Dr Kalin Penev 1 Internet Technology (week 6)  Recap: Validating HTML  Page Layout.

INT222 - Internet Fundamentals Shi, Yue (Sunny) Office: T2095 SENECA COLLEGE.

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

Interface Design 2 Week 7. Interface Design 2 :: Week 7 :: Calendar.

 Add one element at a time  If it doesn’t do what you want, › Delete it › DON’T just keep piling on more items.

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

INT222 – Internet Fundamentals Week 8: Using New HTML features 1.

Project 02 Creating and Editing a Web Page Concept Map of Unit Creating and Editing a Web Page Key Learning Understand the elements to create a web page.

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,

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 128 Interface Programming 1 In-class Presentation Week 2B.

Cascading Style Sheets (CSS) Internal Style Sheets Classes

>> Navigation and Layouts in CSS

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

CSS Layouts: Grouping Elements

Concepts for fluid layout

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

Kapi’olani Community College

Styles and the Box Model

Fixed Positioning.

HTML 5 SEMANTIC ELEMENTS.

Kapi’olani Community College

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

Multipage Sites.

Kapi’olani Community College

Kapi’olani Community College

Presentation transcript:

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

Art 128 :: Interface Programming 1 :: Week 3 :: A In-class Presentation :: Calendar

Art 128 :: Interface Programming 1 :: Week 3 :: A In-class Presentation :: Example  Suspire Media 

Art 128 :: Interface Programming 1 :: Week 3 :: A In-class Presentation :: in-class lesson  Intro to elements  generic block-level containers  

Art 128 :: Interface Programming 1 :: Week 3 :: A In-class Presentation :: In-Class Exercise  Make a div with an id=“container”  Set its width: 600px  Set its margin: 0 auto;  Set background-color of container and body (different colors)  Html height and body height: 100%;  NOTE: Scrolling bug - image fix to come later  Add more div sections (header, mainnavigation, content, section1, section2, footer)  Add more content in between the new div tags (some navigation links, 2 sections w/ paragraphs, footer content, etc.)  Give each div its own background color.

Art 128 :: Interface Programming 1 :: Week 3 :: A In-class Presentation :: Assignment  Continue from last week’s html page that you created and add section div elements. This new html document should include the following:  A container, a header section, a main nav section, 2 sections of content, and a footer.   :: the section should have some type of header/title to the page  :: a few navigation links (should be an unordered list )  2 sections of content (ie. and )  One section should have a small image, no bigger than 150px X 150px.  :: a copyright line will suffice  Be sure to try:  Centering your container to the browser window (margin: 0 auto;)  Constraining your container width (ie. 750px)  Giving each div a different background color (to clarify the separation between each section) due next class ::

Art 128 :: Interface Programming 1 :: Week 3 :: A In-class Presentation :: post mortem  How smoothly did today’s class run?  What slowed us down?  What did we skip over?  How can we be more efficient in the future?

Art 128 :: Interface Programming 1 :: Week 3 :: A In-class Presentation :: Examples