CIS 205—Web Site Design and Development

Slides:



Advertisements
Similar presentations
Chapter 4 Adding Images. Inserting and Aligning Images Graphics refer to the appearance of most non- text items on a web page, such as: – Photographs.
Advertisements

Working with Graphics – Lesson 21 Working with Graphics Lesson 2.
Learning the Basics – Lesson 1
CSS Cascading Style Sheets. Objectives Using Inline Styles Working with Selectors Using Embedded Styles Using an External Style Sheet Applying a Style.
Web Engineering 1 Ishaq Khan Shinwari MCS City University Peshawar.
1 Cascading Style Sheets Continued Different kinds of selectors in a style sheet –Simple- Pseudo-Class –Contextual- Pseudo-Element –Class Image Styles.
Cascading Style Sheets
CSS The basics { }. CSS Cascading Style Sheets - language used to – describe html appearance & formatting Style Sheet - file that describes – how html.
/k/k 1212 Cascading Style Sheets Part one Marko Boon
CHAPTER 7 STYLING CONTENT WITH CASCADING STYLE SHEETS.
SM5312 week 11: CSS Menus & Navigation Bars1 An Introduction to Cascading Style Sheets CSS Menus and Navigation Bars Nick Foxall.
Cascading Style Sheets Based on Castro, HTML for the WWW, 6 th edition Ron Gerton, Fall 2007.
กระบวนวิชา CSS. What is CSS? CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles were added to HTML 4.0 to.
Chapter 8 Creating Style Sheets.
CSS normally control the html elements. Three Ways to Insert CSS There are three ways of inserting a style sheet: External style sheet Internal style.
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.
Beginning Web Site Creation: Dreamweaver CS4. XHTMLCSS  Describes the structure  Content  Collection of styles  Formatting body { background-color:
Introducing Cascading Style Sheets  Cascading Style Sheet Basics  Creating Styles  Using Styles  Manipulating Styles  Text Formatting with CSS.
Create Unordered and Ordered lists Cascading Style Sheets Insert and align Graphics Image enhancements Background images and site maintenance Working with.
Cascading Style Sheets Controlling the Display Of Web Content.
Cascading Style Sheets Controlling the Display Of Web Content.
Chapter 4 Adding Images. Inserting and Aligning Images Using CSS When you choose graphics to add to a web page, it’s important to use graphic files in.
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.
Who Wants to be a Millionaire? Web Page Development Dreamweaver Chapter 3.
BASIC HTML TUTORIAL Amber Brady. HTML tags are keywords surrounded by angle brackets like HTML tags normally come in pairs like and The first tag in a.
© 2010 Delmar, Cengage Learning Chapter 7 Using Styles and Style Sheets for Design.
Dreamweaver MX. 2 Creating External Style Sheets-1 (p. 400) n A style is a group of formatting attributes identified by a single name. n An ________ style.
Chapter 3 Working with Text and Cascading Style Sheets.
Chapter 4 Adding Images. Chapter 4 Lessons Introduction 1.Insert and align images 2.Enhance an image and use alternate text 3.Insert a background image.
XP Dreamweaver 8.0 Tutorial 3 1 Adding Text and Formatting Text with CSS Styles.
Working with Cascading Style Sheets (CSS) Module 2: HTML Basics LESSON 5.
CO1552 – Web Application Development Cascading Style Sheets.
Macromedia Dreamweaver 8-- Illustrated Introductory 1 Macromedia Dreamweaver 8 Unit D Formatting Text and Using Cascading Style Sheets.
Introduction to Programming the WWW I CMSC Winter 2003 Lecture 7.
Adobe Dreamweaver CS5 - Illustrated Unit D: Working with Text and Cascading Style Sheets.
Adobe Dreamweaver CS3 Revealed CHAPTER THREE: WORKING WITH TEXT AND IMAGES.
CSS Tutorial 1 Introduction Syntax How to use style specifications. Styles.
Working with Graphics – Lesson 21 Working with Graphics Lesson 2.
Macromedia Dreamweaver MX 2004 Design Professional And Graphics WORKING WITH TEXT.
Introducing Cascading Style Sheets. Cascading Style Sheet Basics  Cascading Style Sheet Basics  Creating Styles  Using Styles  Manipulating Styles.
© 2011 Delmar, Cengage Learning Chapter 3 Working with Text and Cascading Style Sheets.
Tutorial 3 Adding and Formatting Text with CSS Styles.
Macromedia Dreamweaver 8 Revealed AND GRAPHICS WORKING WITH TEXT.
© 2011 Delmar, Cengage Learning Chapter 4 Adding Images.
Cascading Style Sheets I Embedded Style Sheets. Page Design ICSS 2Instructor: Sean Griffin What is a Style Sheet? A style sheet is a text file that contains.
1 Preparation for site Create a folder in MyDocuments: beavercheese. Create a subfolder, images Classes, career, DW beginner Download.
OV Copyright © 2008 Element K Content LLC. All rights reserved. Working with Web Pages  An Introduction to Cascading Style Sheets  Format a Web.
NASRULLAHIBA.  It is time to take your web designing skills to the next level with Cascading Style Sheets (CSS). They are a way to control the look and.
XP Dreamweaver MX 2004 Tutorial 3 1 Adding and Formatting Text.
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.
1 Cascading Style Sheets
CSS for Styling Text.
Working with Text and Cascading Style Sheets
Create and edit web pages 4
Unit Objectives Insert an image Align an image Enhance an image
Learning the Basics – Lesson 1
Chapter A - Getting Started with Dreamweaver MX 2004
Madam Hazwani binti Rahmat
CX Introduction to Web Programming
Unit Objectives Create a new page Import text Set text properties
Chapter 4 Adding Images.
Cascading Style Sheets - Building a stylesheet
Web Programming– UFCFB Lecture 11
Tutorial 3 Working with Cascading Style Sheets
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.
Cascading Style Sheets - Building a stylesheet
Lesson 3: Cascading Style Sheets (CSS) and Graphical Elements
Session IV Chapter 15 - How Work with Fonts and Printing
Presentation transcript:

CIS 205—Web Site Design and Development Dreamweaver MX Unit C CIS 205—Web Site Design and Development

Web Resources For some other tutorials on Dreamweaver, Fireworks, and Flash, see http://www.iboost.com/build/software/index.html This discusses the problem of formatting the numbers in an ordered list: http://caheinfo.wsu.edu/webtips/format_lists.html#

Lesson 1—Text & Graphics Avoid large amounts of text. Break text up into sections (with headings) and _____. Three kinds of lists: unordered—use bullets ordered—use numbers or letters in sequence definition—terms followed by _________ paragraphs To create lists in Dreamweaver, select the text and use the ________ inspector. To format lists in Dreamweaver, use the List Properties box. lists indented Property

Lesson 2—Cascading Style Sheets Consistent ___________ appearance of page elements is best achieved using Cascading Style Sheets. You create and apply CSS styles using the CSS Styles _______ in Dreamweaver. A CSS style has two parts, the ________ and the declaration. The declaration has two parts, the property and the _______. .bullets { font-family: Arial, Helvetica, sans-serif } panel selector value

Lessons 3 & 4—Graphics The three major graphic file formats are GIF: limited number of colors, supports _____________ JPG: best for photographs _____: shares advantages of GIF and JPG, not universally accepted by older browsers In Dreamweaver, graphics added to a web site are automatically added to the _______ panel. The _________ of images affects how they appear relative to text around them. The appearance of images can be improved by adding ________ and horizontal/vertical space. __________ text should be added for all images. transparency PNG Assets alignment borders Alternative

Lesson 5—Background Images Background images should be avoided on pages with lots of text and other elements. One of the best choices for a background is ______. A ______ image repeats across and down a web page. A _________ image is a tiled image that is blurred at the edges. Graphics in the assets folder that are no longer used in the web site should be deleted. Non-Web-_____ colors should be avoided and can be removed from your site using Dreamweaver. white tiled seamless safe