Page 278 - DCAP109_GRAPHIC_TOOLS

Unit 12: Dreamweaver – Layers and Style Sheets

Objectives Notes

After studying this unit, you will be able to:
z Explain the concept of layers

z Understand layer properties
z Elaborate layer properties
z Discuss style sheets

Introduction

Dreamweaver from Adobe is the web development tool that lets you efficiently design, develop
and maintain standards-based websites and applications. It provides a powerful combination of
visual layout tools, application development features, and code editing support. It includes
many new features to help you create and maintain websites that range from basic home pages
to advanced applications that support best practices and the latest technologies. Dreamweaver
integrates CSS (Cascading Style Sheets) with itself that is used to define that page’s style or
presentation. By presentation we mean how content on a page is displayed. Is it displayed as
simple black text on a white background? Or is it displayed in a more complex layout consisting
of images and content divided into columns? Style sheets are capable of specifying that
presentation without interfering with the content of the page. This means that the same content
can be used with many styles without being modified – a separation of presentation and content.
An enhancement of CSS, initially called CSS-P (for positioning), is the foundation for what have
become commonly known as AP elements.

12.1 Layers

Layers can be used for a page layout or to add special effects. They allow pixel specific positioning
of elements in web pages using x,y coordinates similar to a graph except layers start from the
top and left of the page. Layers are like individual web pages and anything that can be placed on
a web page, such as text, graphics, video, and tables, can be placed in individual layers. They
allow overlapping elements on a web page too. Like in a HTML web page there can be two
“layers”, the background and the content.

Notes Layers are not widely viewable in older Web browsers. Only Internet Explorer 4.0
and Netscape 4.0 and above browsers show layers.

You can layout pages using layers and then convert the layers to backward-compatible tables
with a single menu command. You simply place the various parts of your page, such as images
and text blocks, into separate layers—which normally work only on browsers that support
Cascading Style Sheets (CSS), and then select Modify>Layout>Convert Layers To Table from the
main menu.

!
Caution Dreamweaver can’t convert overlapped layers, so you have to make sure the
Prevent Layer Overlaps switch is on.

LOVELY PROFESSIONAL UNIVERSITY 271