ET-710 WEB-DESIGN By Bart Chuchro Queensborough Community College.

Slides:

Advertisements

Similar presentations

Chapter 1: Introduction. Contents Whats New in Dreamweaver CS4? The Dreamweaver CS4 Interface Setting Up a Site Creating a Web Page Adding Text to Your.

Advertisements

© 2010 Delmar, Cengage Learning Chapter 9 Positioning Objects with AP Div Tags.

Chapter 3 – Web Design Tables & Page Layout

CSS. CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles were added to HTML 4.0 to solve a problem External Style.

HTML Concepts and Techniques Fourth Edition Project 6 Using Frames in a Web Site.

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.

CSS Menus and Rollovers. Agenda foil Separating style from content 3 pages in one file Rollovers in CSS Horizontal drop-downs Vertical drop-downs.

Click to edit Master title style How to Create a Discussion Silver & VIP members

Using Advanced Cascading Style Sheets

1 Lesson 5 Introduction to Cascading Style Sheets HTML and JavaScript BASICS, 4 th Edition Barksdale / Turner.

Chapter 8 Creating Style Sheets.

Web-based Application Development Lecture 9 February 7, 2006 Anita Raja.

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

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

Macromedia Dreamweaver 4 Advanced Level Course. Add Rollovers Rollovers or mouseovers are possibly the most popular effects used in designing Web pages.

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

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

Creating Tables in a Web Site Using an External Style Sheet

© 2011 Delmar, Cengage Learning Chapter 2 Developing a Web Page.

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

Website design Feng Zhao College of Educatioin California State University, Northridge.

Organizing Content by Using Dreamweaver CS5 Domain 5.

Chapter 4 Dreamweaver: Part II The Web Warrior Guide to Web Design Technologies.

Tutorial 6 Creating Tables and CSS Layouts. Objectives Session 6.1 – Create a data table to display and organize data – Modify table properties and layout.

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

Microsoft Expression Web - Illustrated Unit B: Creating a Web Site.

Adding an Inline Style Sheet Page without Inline Style Sheet Page with Inline Style Sheet.

Advanced CSS - Page Layout. Advanced CSS  Compound Selectors:  Is a Dreamweaver term, not a CSS term.  Describes more advanced types of selectors such.

Robert Vitolo CS430.  CSS (Cascading Style Sheets)  Purpose: To provide a consistent look and feel for a set of web pages To make it easy to update.

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

Chapter 3 Dreamweaver: Part I The Web Warrior Guide to Web Design Technologies.

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.

© Cheltenham Computer Training 2001 Macromedia Dreamweaver 4 - Slide No 1 Macromedia Dreamweaver 4 Advanced Level Course.

© 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

Creating Effective School and PTA Websites Sam Farnsworth Utah PTA Technology Specialist

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.

Website Development with Dreamweaver

Title, meta, link, script.  The title looks like:  The tag defines the title of the document in the browser toolbar.  It also: ◦ Provides a title for.

HTML Concepts and Techniques Fourth Edition Project 6 Using Frames in a Web Site.

Copyright 2007, Information Builders. Slide 1 Understanding Basic HTML Amanda Regan Technical Director June, 2008.

Adobe Dreamweaver CS3 Revealed CHAPTER THREE: WORKING WITH TEXT AND IMAGES.

Chapter 5 Quick Links Slide 2 Performance Objectives Understanding Framesets and Frames Creating Framesets and Frames Selecting Framesets and Frames Using.

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.

CHAPTER 5 Working with Data Tables and Inline Frames.

Web Foundations WEDNESDAY, NOVEMBER 20, 2013 LECTURE 32: DREAMWEAVER SLIDE SHOW AND GOOGLE MAP.

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

Macromedia Dreamweaver 8 Revealed AND GRAPHICS WORKING WITH TEXT.

Microsoft FrontPage 2003 Illustrated Complete Designing Web Pages with Layout Tables.

Photoshop Image Slicing. Reasons to Image Slide To create links out of sliced images To optimise different areas. (flat areas of colour, such as logos,

HTML Comprehensive Concepts and Techniques Second Edition Project 2 Creating a Web Site with Links.

Practice for Chapter 3: Assume that you are a freelance web designer and need to create a website to promote your freelance company.

Learning Aim C.  Creating web pages involves many considerations.  In this section we will look at the different software tools you can use and how.

Group 9: Through examples, explain how to build a css navigation bar. Presented by: Daniel Ku, Matt Iannacci & Iphia Henry.

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

LibGuides Interface Customization Presented By: Christine Tobias ~ Kelly Sattler ~ Jenny Brandon Michigan State University Libraries.

HTML LAYOUTS. CONTENTS Layouts Example Layout Using Element Example Using Table Example Output Summary Exercise.

HTML Comprehensive Concepts and Techniques Second Edition Creating Frames on a Web Page.

Week-12 (Lecture-1) Cascading Style Sheets (CSS): describe how documents are presented on screens. Types of Style Sheets: External Style Sheet - Define.

Using DHTML to Enhance Web Pages

Chapter 2 Developing a Web Page.

Cascading Style Sheets (Layout)

Chapter 6 Working with Publisher Tables

IS333: MULTI-TIER APPLICATION DEVELOPMENT

Tutorial 6 Creating Dynamic Pages

Understand basic HTML and CSS terminology, concepts, and basic operations. Objective 3.01.

Common Page Design Elements

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

One Set of Styles Connected to As Many Pages as You Want!!!

Presentation transcript:

ET-710 WEB-DESIGN By Bart Chuchro Queensborough Community College

Home Page CSS3 Design MS Expression Web Styled into a notebook CSS3 Dropdown Menu Page uses JavaScript to hide and show DIV’s Java Script used to insert text into a DIV for the Image map CSS3 rounded corners and shadow

CSS Dropdown Menu Nested Unnumbered List CSS3 Rounded Corners and Box Shadow Hover pseudo-class used to change appearance on mouse over Issues with browsers not supporting CSS3

Rounded Corners and Shadow Web-Kit Browsers Left and Right Lower Corner Rounded Mozilla Browsers Left and Right Lower Corner Rounded CSS3 Standard Box shadow

Rounded Corners and Shadow Value 15px represents radius of the corner Last is the color of shadow Third value is radius of shadowSecond value is Y-offset First value is X-offset

Link Info for Image Map This Image Map is showing a description for each external link on the image map when you hoover a mouse pointer over the link.

This Java Script goes in to a head tag This is Image map Area tag onMouseOver Text will be added to link_desc Div tag. This is the div containing Description for the link Code for Image Map Description

CSS Calendar Layout This project required a CSS formatting of the calendar contained in the table. Using External style sheets makes it easy to maintain and change the page colors and layout.

My Favorite classes frameset This page was designed using frame set. Each section is a separate frame and a separate html file. Clicking on the link in one frame commands to change the content in another frame.

Tribute Page Linux OS This Page is dedicated to Linux OS. It provides external links to different Linux distributions. Next link will take you to the essay Part and then to gallery. You can also link to different areas using navigation drop down menu

Image Transformation This page was done using Picasa and Photoshop. Using JavaScript onMouseOver property image is toggled between before and after editing. Side div contains description using overflow property I can add scroll bar to the div.

The End