Intro To Web Design with Adobe Dreamweaver CSS Cascading Style Sheets (CSS) is the W3C standard for defining the presentation of documents written in HTML,

Slides:



Advertisements
Similar presentations
Tables Feb. 14, Tables Great way to organize and display information Laid out in columns and rows Think of an excel spreadsheet Defined with tag.
Advertisements

3.02B Authoring Languages 3.02 Develop webpages..
Table, List, Blocks, Inline Style
Intro to HTML. HTML HTML = HyperText Markup Language Used to define the content of a webpage HTML is made up of tags and attributes Content.
CSS Digital Media: Communication and design 2007.
Authoring Languages and Web Authoring Software 4.01 Examine web page development and design.
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.
Cascading Style Sheets. CSS stands for Cascading Style Sheets and is a simple styling language which allows attaching style to HTML elements. CSS is a.
Cascading Style Sheets CSS. What is it? Another file format ! its not like html Describes the looks of “selectors” in a.css file (example.css) in the.
Cascading style sheets CSS
XHTML & CSS 2 By Trevor Adams. Last week XHTML eXtensible HyperText Mark-up Language The beginning – HTML Web Standards Concept and syntax Elements (tags)
CONCEPTS FOR FLUID LAYOUT Web Page Layout. Website Layouts Most websites have organized their content in multiple columns (formatted like a magazine or.
AD Intermediate Computer Graphics | spring 2008 | Daria Tsoupikova | School of Art and Design | UIC CSS Cascading Style Sheets.
Introducing Cascading Style Sheets  Cascading Style Sheet Basics  Creating Styles  Using Styles  Manipulating Styles  Text Formatting with CSS.
Using Cascading Style Sheets CSS Basics. Goals Understand basic syntax of Cascading Style Sheets (CSS) Understand basic syntax of Cascading Style Sheets.
Cascading Style Sheets Scripting with Style. CSS versus HTML  Ways to format in HTML –HTML Tag extensions –Converting Text to images –Page Layout with.
Cascading Style Sheets Controlling the Display Of Web Content.
Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved Chapter 3 Style Sheets: CSS WEB.
Cascading Style Sheets Controlling the Display Of Web Content.
4.01B Authoring Languages and Web Authoring Software 4.01 Examine webpage development and design.
Tutorial 3: Adding and Formatting Text. 2 Objectives Session 3.1 Type text into a page Copy text from a document and paste it into a page Check for spelling.
Working with Text and Cascading Style Sheets Adobe Dreamweaver Chapter 3.
Basic Web Page Design. Text book: HTML, XHTML, and CSS: Visual QuickStart Guide, Sixth Edition written by Elizabeth Castro. Software: Adobe® Dreamweaver®
School of Computing and Information Systems CS 371 Web Application Programming HTML The language of the Web.
Looking Good Online Design and Presentation of Websites 1.
CSS Cascading Style Sheets By Garrett Garman. CSS Why use Style Sheets? Separates Appearance and Structure Modularity Quick and Easy changes Flexibility.
Using Styles and Style Sheets for Design
Cascading Style Sheets CSS.  Standard defined by the W3C  CSS1 (released 1996) 50 properties  CSS2 (released 1998) 150 properties (positioning)  CSS3.
INTRODUCTION TO HTML5 CSS Styles. Understanding Style Sheets  HTML5 enables you to define many different types of content on a web page, including headings,
Tutorial 6 By Sam INE 1020 Introduction to Internet Engineering 1 DHTML & CSS Tutorial 6.
CONCEPTS FOR FLUID LAYOUT Web Page Layout. Website Layouts Most websites have organized their content in multiple columns (formatted like a magazine or.
Administration, Coverage, Review. Exam Administration Midterm exam is in class from 5:15 – 6:30PM on Thursday Feb 20 th. The exam is open book and open.
Form Tag How to use Form Tag Something NEW ? PARAMETER Attribute NAME Specifies the name for a form To specify which form to submit with JavaScript, this.
HTML CSS JAVASCRIPT. HTML - Stands for Hyper Text Markup Language HTML is a ‘language’ that describes web pages. This language is a collection of codes.
Formatting TEXT AND Using CSS. Adobe Dreamweaver CS3 - Illustrated.
Lesson 12: Working with Code-editing Features Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver.
IT204 - Web Scripting and Authoring I Introduction to Dreamweaver Unit 6.
© 2011 Delmar, Cengage Learning Chapter 8 Using Styles and Design Style Sheets for Design.
Cascading Style Sheets Class 2, Lecture 3 Rachel A Ober
Lecture 2 - HTML and CSS Review SFDV3011 – Advanced Web Development 1.
CSS : Cascading Style Sheets Ann Dobbs Class: i385e.
© 2011 Delmar, Cengage Learning Chapter 3 Working with Text and Cascading Style Sheets.
 Computer use language to communicate  A web browser will read these tags and translate it into what you actually see  Viewing Code of ESPN WebsiteESPN.
Cascading Style Sheets CSS.  Standard defined by the W3C  CSS1 (released 1996) 50 properties  CSS2 (released 1998) 150 properties (positioning)  CSS3.
Web Terminology Intro to Web. North Lake College 2 by Sean Griffin HTML vs. XHTML HTML: Hypertext Markup Language XHTML: eXtensible Hypertext Markup Language.
INTRODUCTORY Tutorial 5 Using CSS for Layout and Printing.
4.01B Authoring Languages and Web Authoring Software 4.01 Examine webpage development and design.
CSS Cascading Style Sheets A very brief introduction CSS, Cascading Style Sheets1.
Cascading Style Sheets Primary readings Presentations Explain & review projects with class mates.
Cascading Style Sheets (CSS) EXPLORING COMPUTER SCIENCE – LESSON 3-5.
1 Lecture 7 Style Sheets: CSS. 2 Motivation HTML markup can be used to represent –Semantics: h1 means that an element is a top-level heading –Presentation:
1 ITEC 4830 Graphics Design Chapter 1 Dreamweaver MX 2004 Basics.
Before We Begin Please download the files from as we will be using them in our walkthroughs.
Web Design Terminology Unit 2 STEM. 1. Accessibility – a web page or site that address the users limitations or disabilities 2. Active server page (ASP)
Basic Web Page Design. Text book: HTML, XHTML, and CSS: Visual QuickStart Guide, Sixth Edition written by Elizabeth Castro. Software: Adobe® Dreamweaver®
This is a test Webpage Wow, I’m writing my first webpage.
HTML5 and CSS3 Illustrated Unit B: Getting Started with HTML.
CONCEPTS FOR FLUID LAYOUT Web Page Layout. Essential Questions What challenges do mobile devices present to Web designers? What are the basic concepts.
MIT 511- Web Design & Usability
Cascading Style Sheets (CSS)
Web Basics: HTML/CSS/JavaScript What are they?
Getting Started with CSS
CSS: Cascading Style Sheets
Introduction to HTML.
Concepts for fluid layout
Web development with SharePoint, HTML & CSS
Cascading Style Sheets
Concepts for fluid layout
Web Programming and Design
Presentation transcript:

Intro To Web Design with Adobe Dreamweaver CSS Cascading Style Sheets (CSS) is the W3C standard for defining the presentation of documents written in HTML, XHTML, and, in fact, any XML language. Presentation, again, refers to the way the document is displayed or delivered to the user, whether on a computer screen, a cell phone display, or read aloud by a screen reader.

Intro To Web Design with Adobe Dreamweaver CSS Concepts Types of CSS Tag styles – examples h1, h3, p, ol. (Dreamweaver ex.) Applies globally to individual HTML tags Class styles -.bold,.red (Dreamweaver ex.) You create, name & attach manually to text or an HTML tag. Advanced styles (IDs) - #header, #sidebar Let's you format a unique item on a page. 1 ID per page

Intro To Web Design with Adobe Dreamweaver Descendant Selectors - examples #sidebar p – any p located in the sidebar will be styled #sidebar h3– any h3 located in the sidebar will be styled #header ul – any ul located in the header will be styled Ul li a

Intro To Web Design with Adobe Dreamweaver Inheritance CSS passes from parent to child tag will change everything (dreamweaver ex.)‏

Intro To Web Design with Adobe Dreamweaver Styling for Print Why have a separate style sheet for print and screen? When someone wants to print out a website, they just want certain information, not the excess navigation or images. Also, they want it formatted on a letter size page.