Using CSS to Create Some Style Module 5: Beyond the Basics with Expression Web LESSON 5.

Slides:

Advertisements

Similar presentations

DREAMWEAVER Welcome to our website!

Advertisements

Project 8 Creating Style Sheets.

Creating and Editing a Web Page Using Inline Styles

Using Advanced Cascading Style Sheets

Chapter 8 Creating Style Sheets.

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.

1 After completing this lesson, you will be able to: Create a workbook. Understand Microsoft Excel window elements. Select cells. Enter text, numbers,

1 After completing this lesson, you will be able to: Add a header and footer to a worksheet. Change margins and center a worksheet. Change the orientation.

CREATING A MULTIPLE PAGE REPORT Presented by: Dr. Ennis-Cole.

Project Information: Customizing and Printing Lesson 7.

Microsoft Expression Web-Illustrated Unit L: Using Code Tools.

DAY 26: CHAPTER 2 – DOCUMENT PRESENTATION CHAPTER 3 - COLLABORATION AND RESEARCH Akhila Kondai November 18, 2013.

McGraw-Hill Technology Education © 2004 by the McGraw-Hill Companies, Inc. All rights reserved. Office Word 2003 Lab 3 Creating Reports and Tables.

XP New Perspectives on Microsoft Office FrontPage 2003 Tutorial 9 1 Microsoft Office FrontPage 2003 Tutorial 9 – Using Layout Tables, Styles, and Office.

PowerPoint Practice 1.Click SAVE AS and save this file on your network drive. Rename it “powerpoint practice.” 2.Follow the directions on the slides.

Creating Tables in a Web Site Using an External Style Sheet HTML5 & CSS 7 th Edition.

With Alex Conger – President of Webmajik.com FrontPage 2002 Level I (Intro & Training) FrontPage 2002 Level I (Intro & Training)

Guided Lesson.  In this lesson, you will learn how to modify existing bullets, insert new bulleted and numbered lists, select symbols as bullets, and.

 Using Microsoft Expression Web you can: › Create Web pages and Web sites › Set what you site will look like as you design it › Add text, images, multimedia.

HTML Concepts and Techniques Fourth Edition Project 3 Creating Web Pages with Links, Images, and Formatted Text.

Web Design HTML, Frontpage, DreamWeaver μέρος β ΠΡΥ019 - Πληροφορική Δρ.Βάσος Βασιλείου.

@Ms. Masihi.  Adobe Creative Suite is comprised of several separate applications – Bridge, Version Cue, Photoshop, Fireworks, Flash, InDesign, Illustrator,

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.

Getting Started with Expression Web 3

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

Introduction to PowerPoint 2003 Learning And Research Technical Unit (LARTU)

Basic HTML Hyper text markup Language. Re-cap  … - The tag tells the browser that this is an HTML document The html element is the outermost element.

Web Technologies Website Development Trade & Industrial Education

Using FrontPage Express. Slide 1 Standard toolbars and menus Time indicator: gives an approximation of download time of the page.

WELCOME EF 105 Spring EF 105 Computer Methods in Engineering Problem Solving Week 2: FrontPage Introduction to Software Use to create Web Pages.

Website Development with Dreamweaver

Microsoft Expression Web-Illustrated Unit I: Working with Tables.

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

Guidelines for Paper Formatting Step One: Open Microsoft Word 2007 Step Two: Formatting the Document Step Three: Typing the Final Draft Highland Park High.

XP New Perspectives on Microsoft Office FrontPage 2003 Tutorial 1 1 Microsoft Office FrontPage 2003 Tutorial 1 – Creating a Web Site.

Chapter 1 Creating a Dreamweaver Web Page and Local Site

Creating an External Style Sheet Module 5: Beyond the Basics with Expression Web LESSON 8.

Adding Multimedia to Expression Web Module 5: Beyond the Basics with Expression Web LESSON Ext2.

FrontPage Tutorial Part 2 Creating a Course Web Site.

1. 2 Word Processing Word Processing is writing words and sentences on the computer. It is easy to change or move text in a word document. People use.

Creating a Dynamic Web Page Template Module 5: Beyond the Basics with Expression Web LESSON 10.

Creating Your First Web Page – Topic: Creating a wiki, blog, image blog and podcast Click Arrow - Next Slide 1.

Microsoft Expression Web-Illustrated Unit F: Enhancing a Design with CSS.

HTML Concepts and Techniques Fifth Edition Chapter 3 Creating Web Pages with Links, Images, and Formatted Text.

1 After completing this lesson, you will be able to: Get around the Internet with your browser. Connect to the Internet. Print Web pages. Save Web pages.

McGraw-Hill/Irwin © The McGraw-Hill Companies, All Rights Reserved TECHNOLOGY PLUG-IN T8 Decision Making Using Access.

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.

Creating and Editing a Web Page Using Inline Styles

Web and Multimedia Development Copyright © Genetic Computer School 2007WM LESSON OVERVIEW  Use of Tables  Creating Tables  Try It – 1  Creating.

Creating Web Pages with Links, Images, and Embedded Style Sheets

Word and the Writing Process. To create a document 1.On the Start menu, point to Programs, and then click Microsoft Word. A new document opens in Normal.

Laboratory Exercise # 10 – Microsoft Word Additional Topics Office Productivity Tools 1 Laboratory Exercise # 10 Microsoft Word Additional Topics Objectives:

Opening a File 1.Open Word 2.Click the Microsoft Office button(Very top left hand corner). A menu appears 3.Click Open. The Open dialog box appears 4.Use.

Microsoft Expression Web - Illustrated Unit A: Getting Started With Microsoft Expression Web.

XP New Perspectives on Creating Web Pages With Word Tutorial 1 1 Creating Web Pages With Word Tutorial 1.

Key Applications Module Lesson 12 — Word Essentials Computer Literacy BASICS.

© Ms. Masihi.  A Web page contains text and images that convey specific information to viewers.  To create a new web page, open Dreamweaver and select.

Learning the Basics – Lesson 1

After completing this lesson, you will be able to:

Creating Web Pages and Graphics

Word and the Writing Process

Cheat Sheet CSCI 100 JW Ryder

Microsoft Word Text Basics.

Cheat Sheet CSCI 100 JW Ryder

Word: Styles & Illustrations Participation Project

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.

Using FrontPage Express

Learning the Basics of Microsoft Word 2010 for Microsoft Windows

Presentation transcript:

Using CSS to Create Some Style Module 5: Beyond the Basics with Expression Web LESSON 5

Module 5: Beyond the Basics with Expression Web LESSON 5 Lesson Overview In this lesson, you will:  Format a heading.  Format layers using an internal style sheet.  Align images using class style.

Module 5: Beyond the Basics with Expression Web LESSON 5 Guiding Questions:  In Module 3 you learned about font styles. Which styles work best for computer monitor viewing?  What styles do you think would complement your Current Event Web site?

Module 5: Beyond the Basics with Expression Web LESSON 5 Project Continue working with your Current Event project. In this stage of the project, you will create an internal Cascading Style Sheet (CSS) to format layers within the Web page.

Module 5: Beyond the Basics with Expression Web LESSON 5 Creating a Heading 1. Place the cursor at the beginning of the text. 2. Press Enter (this will create a blank space between the top of the layer and the top line of text. 3. Place the cursor in this blank space. 4. Type the text for the header.

Module 5: Beyond the Basics with Expression Web LESSON 5 Creating a Heading 1. Highlight the heading. 2. Select Heading 1 from the Style dropdown menu. 3. The heading will automatically resize and become bolded.

Module 5: Beyond the Basics with Expression Web LESSON 5 Creating a Heading 1. Using the Split View, look at the code for the heading that was just created in Expression Web. The style should be easily recognized from your HTML work in Module 2.

Module 5: Beyond the Basics with Expression Web LESSON 5 Correcting the Heading Style 1. Click New Style in the Apply Styles or Manage Styles task pane. 2. In the New Style dialog box, select h1. 3. Specify the values desired for the current Web page and click OK.

Module 5: Beyond the Basics with Expression Web LESSON 5 The Corrected Heading  Compare the before and after images of the heading  BeforeAfter

Module 5: Beyond the Basics with Expression Web LESSON 5 Adding an image to a Text Layer  Placing an image at the beginning of a paragraph will cause the text to drop to the bottom right corner of the image and continue inline from that point.

Module 5: Beyond the Basics with Expression Web LESSON 5 Creating a Class Style for an Image 1. Click New Style in the Apply Styles or Manage Styles task pane. 2. Enter.img-right in the Selector field. 3. Select Layout category and set Float to Right. 4. Select the Box category and specify the needed values for the margins. 5. Click OK to save the settings.

Module 5: Beyond the Basics with Expression Web LESSON 5 Applying a Class Style to an Image 1. Click on the image. 2. In the Apply Styles task pane, click on.img-right.

Module 5: Beyond the Basics with Expression Web LESSON 5 Previewing your work 1. On the File menu, point to Preview in Browser. 2. Click on Windows Internet Explorer 7.0 (1024 X 768) or whatever browser is installed on the computer. 3. Observe the preview of the page and take note of details that need to be corrected.

Module 5: Beyond the Basics with Expression Web LESSON 5 Assignment  Begin working on the Style Worksheet (S.5.5_6_7.R_Style)  This worksheet provides a list of modifications to be made to your Current Event Web page. Rubric for Current Event Web page RequirementPoints PossiblePoints Received Create a header using Expression Design to reflect your subject and insert it at the top of your Web page 25 Add a heading to the main text portion of your Web page and format it to match the main text section 10 Move one of the images that you previously placed on the Web page and format it so that it floats to the right and the text wraps around the image. 15 Total Points50 Comments: