CIT 256 CSS Intro & Dreamweaver Built-in Layouts Dr. Beryl Hoffman.

Slides:

Advertisements

Similar presentations

1 Web Site Design Overview of the Internet Cookie Setton.

Advertisements

Create your site in the folder Rosary in your My Documents Folder.

Cascading Style Sheets

CSS CSS Precise Aesthetic Control. Cascading Style Sheets Though they can be put in HTML header, usually a separate page that the HTML links to Contains.

UNIT 12 LO4 BE ABLE TO CREATE WEBSITES Cambridge Technicals.

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.

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

Web Pages and Style Sheets Bert Wachsmuth. HTML versus XHTML XHTML is a stricter version of HTML: HTML + stricter rules = XHTML. XHTML Rule violations:

Web Design with Cascading Style Sheet Lan Vu. Overview Introduction to CSS Designing CSS Using Visual Studio to create CSS Using template for web design.

CIT 256 CSS Divs & Buttons Dr. Beryl Hoffman. CSS for Layout We now can make our own divs to divide up a web page : Header Header Navigation Navigation.

Chapter 3 Working with Text and Cascading Style Sheets.

Introducing Cascading Style Sheets  Cascading Style Sheet Basics  Creating Styles  Using Styles  Manipulating Styles  Text Formatting with CSS.

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

Web Workshop: CSS Objectives: - “What is CSS?” - Structure of CSS - How to use CSS in your webpage.

Cascading Style Sheet (CSS) Instructor: Dr. Fang (Daisy) Tang

4.01 Cascading Style Sheets

TUTORIAL 8: Enhancing a Web Site with Advanced CSS

Getting Started with Adobe Dreamweaver CS6. Unit Objectives Define web design software Start Adobe Dreamweaver CS6 View the Dreamweaver workspace Work.

CIT 256 Mobile Web Development Dr. Beryl Hoffman.

Organizing Content by Using Dreamweaver CS5 Domain 5.

CIT 256 Organizing Large Websites: Divs, DW Templates Dr. Beryl Hoffman.

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

Chapter 3 Working with Text and Cascading Style Sheets.

Copyright © Texas Education Agency, All rights reserved. 1 Web Technologies Website Development with Dreamweaver.

Tutorial 4: Using CSS for Page Layout. 2 Objectives Session 4.1 Explore CSS layout Compare types of floating layouts Examine code for CSS layouts View.

© Ms. Masihi.  The Dreamweaver Welcome Screen first opens when you start Dreamweaver.  This screen gives you quick access to previously opened files,

Web Technologies Website Development Trade & Industrial Education

Chapter 2 Developing a Web Page. A web page is composed of two distinct sections: –The head content –The body Creating Head Content and Setting Page Properties.

CIT 256 Dreamweaver Intro. Dr. Beryl Hoffman. Start Dreamweaver Start from Start Menu/Adobe Master Collection CS6/ Adobe Dreamweaver CS6 Choose Create.

Website Development with Dreamweaver

MCS 270 Cascading Style Sheets (CSS) Gustavus Adolphus College.

XP Dreamweaver 8.0 Tutorial 3 1 Adding Text and Formatting Text with CSS Styles.

 This presentation introduces the following: › 3 types of CSS › CSS syntax › CSS comments › CSS and color › The box model.

CIT 256 Dreamweaver Sites and Image Maps Dr. Beryl Hoffman.

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

Macromedia Dreamweaver 8-- Illustrated Introductory 1 Macromedia Dreamweaver 8 Unit D Formatting Text and Using Cascading Style Sheets.

Chapter 2 Developing a Web Page. A web page is composed of two distinct sections: – The head content – The body Creating Head Content and Setting Page.

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

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

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.

© 2011 Delmar, Cengage Learning Chapter 3 Working with Text and Cascading Style Sheets.

DIV, Span, CSS.

Creating a Web Site Review of Concepts. Templates Templates are special HTML files that are used to quickly create pages on a web site. They contain the.

Cascading Style Sheets

Web Design Part I. Click Menu Site to create a new site root.

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

Tutorial 3 Adding and Formatting Text with CSS Styles.

Cascading Style Sheets (CSS). A style sheet is a document which describes the presentation semantics of a document written in a mark-up language such.

Macromedia Dreamweaver 8 Revealed WEB PAGE DEVELOPING A.

CSS Cascading Style Sheets. “Cascading” Example (inline style) HTML

Adobe Dreamweaver CS3 Developing a Web Page. Planning the Page Layout Use White SpaceUse White Space Limit media objectsLimit media objects KISSKISS Use.

Web Design (12) CSS Introduction. Cascading Style Sheets - Defined CSS is the W3C standard for defining the presentation of documents written in HTML.

Lecture 2: Cascading Style Sheets (CSS) Instructor: Dr. M. Anwar Hossain.

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

Positioning Objects with CSS and Tables

1 Preparation for site Create a folder in MyDocuments: beavercheese. Create a subfolder, images Classes, career, DW beginner Download.

Building a Website: Layout Fall Overall Structure: Home Page Title Section Title Frame Picture UNCP Math Menu Content Footer Contact Information.

Understanding CSS Cascading Style Sheets control the presentation of content in HTML pages Style Sheets separate formatting from the content –Styles defined.

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,

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.

Creating Web Documents CSS examples (do more later) Lab/Homework: Read chapters 15 & 16. Work on Project 3, do postings.

CSS HTML and website development.

Positioning Objects with CSS and Tables

Website Design 3

Slightly more CSS.

Working with Text and Cascading Style Sheets

5.00 Apply procedures to organize content by using Dreamweaver. (22%)

Positioning Objects with CSS and Tables

Cascading Style Sheets

Presentation transcript:

CIT 256 CSS Intro & Dreamweaver Built-in Layouts Dr. Beryl Hoffman

CSS CSS (Cascading Style Sheets): set of rules defining the style of a web site. Separates content (in the HTML) from style/appearance/layout (CSS). Can be embedded in HTML page at the top section or attached in a separate.css file (preferred!).

CSS rules for HTML tags body { background-color: #FFFFFF; margin: 0; color: black; } h4 { font-family: "Arial"; color: blue } In the HTML file, use tag and it will have that style: My styled heading My styled heading

Page Properties CSS Unfortunately, Page Properties button only puts CSS in the head section of that page. Can move all generated CSS to a file by selecting all CSS rules (holding down Shift) and right click to choose Move CSS Rules. Or click the + button in CSS window to add a body or h1 tag without using Page Prop. Button.

Making Your Own Style Tags In the CSS (use. (for class) or # (for id (can only be used once)):.mystyle { color:purple; background-color:yellow } In the HTML (use div or span, use class menu at bottom in Dreamweaver): This is some text in my style!

CSS and Divs for Layout CSS is now the preferred method for styling the Layout of a web site. The tag is used to divide a web page into areas with different styles Where the top banner/logo goes Where the top banner/logo goes Navigation Links Navigation Links TEXT: CONTENT AREA TEXT: CONTENT AREA</div> bottom of page bottom of page

Built-in CSS Layouts in Dreamweaver (File/New)

Number of Columns 1 Column used for top navigation. 2 Column used for side navigation. New Grid Layout under new in CS 6 too for many columns in grid.

Fixed vs. Fluid Layouts Fixed Layout uses fixed width/length in pixels or inches. Default width 960px, side nav is 180 px of that. Fluid Layout uses percentages so that it expands or shrinks with different screen sizes. Default 100% with side nav 20% width. Go with Fluid whenever possible. Choose fixed only if client wants site optimized for a certain screen size.

HTML 5 Special Layout Tags HTML 5 adds special HTML tags to replace some tags: … … to replace … to replace ….... … …,,, etc.,,, etc. IE requires hack to recognize these.

Save CSS as new File You can add CSS layout styles to the html file or save it to a.css file (preferrable!):

Edit Generated Text Edit the text, change title

Edit Generated Styles Look at CSS Panel on top right. Click on CSS Styles and All and the + next to to see rules. Click on a rule, change its properties underneath. Or double click a rule (or pencil) for editing window.

Good Tutorial for using Built-in CSS Layouts in Dreamweaver layouts-in-dreamweaver-cs5.html layouts-in-dreamweaver-cs5.html