Web page design

► Docu m ent tool bar : I t consists o buttons for providing options for different abstraction levels of the Document window Live view, and Code view, a d Design view, diferent viewing

WEB PAGE DESIGN

Web Page Design

© 2017 Aptech Limited

All rights reserved

No part of this book may be reproduced or copied in any form or by any means - graphic, electronic, or

All trademarks acknowledged

Preface

This book, Web Paqe Desiqn, introduces you to various features of Adobe Dreamweaver Adobe Dreamweaver is a Web development tool that is used for creating publishing, monitoring, and managing mobile content and Websites It is a full-fledged programming and HTML Web editor Using this you can create, edit, and manage Web pages in a more user-friendly environment

The ARENA Design team has designed this course keeping in mind that motivation coupled with relevant training and methodology can bring out the best The team will be glad to receive your feedback, suggestions, and recommendations for improvement of the book

Please feel free to send your feedback to the ARENA Design team at the Head Office, Mumbai

ARENA Design Team

Table of Contents

Session 1: Getting Started with Dreamweaver CC

Responsive and Adaptive Website

Session 2: Working with Images, Lists, Tables, Links, and Frames

Images and Text

Working with Tables and Tabular Data

Built-in Dreamweaver Behaviors

Coding Too/bar and Code Collapse

Code Snippets

Assets and Libraries

Summary

Exercise

Session 4: Working with Multimedia Objects

FLV Files

Shockwave

Working with Photoshop Image Properties

Working with Adobe Bridge and Device Central

Creating Editable and Repeatable Regions

Creating Nested Templates

Editing, Updating, and Deleting Templates

Importing and Exporting Template Content

Apply or Remove a Template from an Existing Document Editing Content in a Template-based Document

Summary

Exercise

Session 6: Testing a Website

Site Launch Checklist

Finding and Fixing Broken Links

Session 7: Working with Dynamic Websites

Server Models in Dreamweaver

Setting up Dreamweaver

Creating Dynamic Web Pages

Live View in Dreamweaver

Displaying XML Data in Web Pages

Password Protection for Web Pages

Making a Website Responsive

Summary

Exercise

Session 8: Working with Mobile and Integration

Creating Media Queries

Change Page Orientation for Mobile Devices Create Web Applications for Mobile Devices Creative Cloud Libraries

Synchronizing with Creative Cloud

Summary

Exercise

•••

Session 1 Getting Started with Dreamweaver CC

learning Outco me s

In this session, you will learn to:

► Define Responsive and Adaptive Websites

► Describe Basic Interface and Workspace elements

► Explain Images and text

► Create a Simple Website

System Requirements

Windows Operating System

Microsoft Windows 7, windows 8, windows 10, or higher

Intel Pentium 4 or AMO Athlon processor

2 GM of RAM

Monitor supportin~ 1280 x 1024 resolution with 16-bit video card

1 GB of available hard disk space for the software installation

Adobe Dreamweaver is a fully featured HTML Web and programming editor used for designing Web pages The program provides you a What-You-See-ls-What-You-Get /yl/YSIWYG) interface for creating and editing the Web pages in a supportive and user-friendly environment Dreamweaver supports many markup languages, including HTML CSS, JavaScript and XML As for human languages, it supports

English, Spanish, French, German, Chinese, Japanese (both Simplified and Traditional), Russian,

Italian, and many more

Macromedia originally developed and published Dreamweaver in 1997 Later, adobe purchased Macromedia in 2005 and continued the development of Dreamweaver These features make Dreamweaver a versatile Web editing tool for creating simple as well as very complex Websites

Features

Dreamweaver CC usually combines a visual design editor known as Live View and a code editor which has some standard features such as code completion, code coloring, code collapsing and expanding, and syntax highlighting, and sophisticated features such as real-time syntax checking and code i11t1u,;pet:tiu11 fur ye11e 1 c1ti11y Ille t:uue llint,; tu c1,;,; i ,;t u,;e1 i n w 1 ili11y c1pprup1 i c1te t:ulle Cuml.Jineu w il ll c1 stack of site management tools, Dreamweaver lets users to design code, and manage the Websites and mobile content

Like many other HTML editors Dreamweaver edits the pages on local machine and then uploads them

to the remote Web server using file transfer protocols

1 1 Responsive and Adaptive Website

Nowadays more and more visitors are using mobile devices such as smartphones and tablets to visit Websites Therefore, your site should be easy to view on a mobile device, otherwise you'll be losing

visitors and driving less traffic to your site

It is important that your Website should have a responsive design for getting better search results in search engines, as they give higher priority to these sites

Both adaptive and responsive design can prepare your Website for mobile use, but in different ways

► Responsive Web Design: It provides an optimal viewing experience of a Website, no matter what device the user is using to view the Website Responsive Web design is an initiative for creating sites that will provide the viewers an optimal viewing experience which is easier for navigation and reading with a minimum of resizing, panning, and scrolling across a wide range of devices (from mobile phones to desktop computers) This is achieved by using fluid grids It's a term for a design that works on all screen sizes The layout will automatically respond to that size

► Adaptive Web Design: This Web design is different from responsive design in that there is no one layout that always changes Instead, there are several different layouts for multiple screen sizes In addition, the layout used depends on the screen size being used For example, there could be a specific layout for desktop computers, tablets and mobile phones each of which are created in advance These three designs wait on a standby mode until a user visits the site The site detects the type of the device used and delivers the pre-set layout suitable for that device So instead of a single ball going through several different-sized holes, you'll have several different balls to use depending on the hole size

Creating Responsive Websites in Dreamweaver

Dreamweaver uses the Fluid Grid Layout to create the responsive Web design

Dreamweaver break down the number of devices to three desktop phone and tablet Each device has a set width in percent (%) which you can edit if you like There are also a pre-defined number of columns for each device that you can edit upon you preferences The columns are just visual and won't appear when the

site is viewed out there in the real-time

WHERE THE EXPERTS SPEAK THE EXPERIENCE

1.2 Dreamweaver CC Interface

WhP.n ynu first l,iunr.h thP OrP.'lmWP.'IVP.r ,ipplir.,itinn ,i ()uir.k St,irt mP.nll "flflP.Ms on thP sr.rP.P.n w,ir.h

your preferences

Based on your feedback to these questions, Dreamweaver either opens in a Developer or in standard

M

G

Figure 1.1: Workspace Overview

Code View G Status bar H Toolbar

1.2.1 Workspace Elements

Dreamweaver CC provides various interface elements in the form o windows and panels that enables

pages

► Welcome sc reen : You can do two tasks at this screen You can create a new document r open

designed with the aim of helping users with varying skill levels and enhance their knowledge about

~ I m II B uild i ng Mobile Apps

II 12§J II E nhonced 1 e,y Suppon E) l ! O ! e

Adobe Dreamweaver CC

Figure 1.2: Wel c ome S cr een

► App l ication bar: It is across the top of the CC applcation window and consists of a workspace

sw i tcher , menus (for windows only), nd other applcation controls

► Standard toolb r : For displaying the Sta dard toolbar, select V i ew ➔ Toolbars ➔ St andard The toolbar consists of buttons for common operations from the File and Ed i t menus: New, Open, Browse in Bridge, Save, Save All, Print Code, Cut, Copy, Paste, Undo, and Redo

► Docu m ent tool bar : I t consists o buttons for providing options for different abstraction levels of the Document window (Live view, and Code view, a d Design view), diferent viewing options, and

some general purpose operations such as previewing in a browser

► Coding toolbar : It is only displayed in Code view It consists o buttons that le you to perform many

► Property i n pector: It lets you to view and change various properties for the selected text or object Each object has its own set of properties

► Document window: It isplays the current document as you create and edit it

► Tag selector: The tag selector located in the Status bar, displays the hierarchy of tags that surrounds the current selectio Click a y of the tag for selecting it a d all its contents

► Panels: It h lps you to monitor and modify your work The Insert, CSS Designer, and the Files panel are good examples of pan ls For expanding a panel, just double-click its tab

► Extract p ne l : It enables you to upload and view your Adobe Photoshop Document (PSD) files on Adobe Creative Cloud You can extract CSS, images, text, colors, fonts, measurements, and gradients from your PSD compositions into your Dreamweaver document

► Insert panel: It contains buttons for inserting diferent types of objects (tables, images, CSS) and media elements into your document Each Dreamweaver object is a piece of HTML code through

which you can set its attributes as you insert it For example using the Table button you can insert

a table in the document you are working You need to clck the Table button located in the Insert panel You can also choose to insert objects using the Insert menu in place of the Insert panel

► F i les p a nel : It enables you to manage your files and folders, wh ther they are located on a remote

server or part of a Dreamweaver site You can also access all the files that are located on your local disk

► Snippets panel: It lets you to reuse and save your code snippets across the diferent Web p ges,

sites, and installations of Dreamweaver (using sync settings)

► C SS Desi g ner panel : It is a CSS Property Inspector using which you can create the CSS files, styles, and set their properties, along with the media qu ries

1.2 2 Selecting a Workspace Layout

To select a workspace layout, select Window ➔ Wo r k pace La yout and select the layout You can change the layou from the Ap lication toolbar (Refer to Figure 1.3) The works:>ace layouts are as

follows:

► Standard: It offers a split layout with visual tools and an in-app preview as you code

► Developer: It is a minimal code-focused layout

Files CC

§i!Deskt Local File,

v ~

Standard Reset 'Standard' New Workspace

Manage Workspaces

Save Current

Figure 1 3 : Workspa c e Layout

1 2 3 Rearranging Panels in Dreamweaver

You can customize the appearance and placement of all the Dreamweaver panels according to your

preferences

D o ck a nd undo c k p anel s

► To dock a pan l you can drag it to dock it anywhere near or in between oth r panels

► To dock a pan l group, you can drag it by its title bar

► To remove a panel or pan l grou , you can drag it out f the dock by its tab or title b r You can also make it free-floating or drag it into another dock

Move p a nel s

Whie moving the pan ls, you see the blue highlig ted drop zones These are a·eas where you can move the panel For example by dragging it to the narrow blue drop zone, you car move a pan l up or

down in a dock The panel floats freely in the workspace if you drag the pan l to an area that is not a

drop zone

► To move a pan l, you can drag it by its tab

► To move a pan l group, you can drag the title bar

Add and remove panels

The dock disappears when you remove all the panels from a dock

► To remove a panel, just deselect it from the Window menu or right-click its tab and then select Close

► To add a panel, select it from the Window menu and then dock it to your preferred locatio

Manipulate panel groups

► To move a panel into a group, you can drag the panel's tab to the highlighted drop zone in the panels group

► To rearrange the pan ls in a group, you can drag a pan l's tab to a new location in the group

► To remove a pan l from a group to float it freely, you can drag by it s tab outside the group

► To move a group, you can drag the title bar

Stack floating panels

When you drag a panel o t of its dock, it floats freely {but n t in a drop zone) You can position it anywhere as per your need in the workspace You can stack the floating panels or pan l groups so that they move as a single unit when you drag the topmost title bar

► To stack floating panels, you can drag a panel by its tab to the drop zone at the bottom of another

panel

► To change the stacking order, you can drag a panel up or down by its tab

► To remove a pan l or panel group from the stack, so that it can float by itself, you can drag it out

by its tab or title bar

Resize pane l s

► To minimize or maximize a panel, pan l grou , or the stack o panels, double-clic s a tab

► To resize a panel, you can drag any side of the panel

Collapse and expand panel icons

You can collapse the pan ls to icons for reducing the clutter on the workspace The pan ls are collapsed

to icons in the default workspace (in some cases)

► To collapse or expand all panel icons in a column, you can click the double arrow at the top of the dock

► To expand a single panel icon, just click it

► To resize the panel icons for seeing only the icons, you can adjust the width of the dock u til the

text disappears Make the dock wider to display the icon text again

► To collapse an expanded panel back to its icon, just click its tab, its icon, or the double arrow in panel's title bar

1 2.4 Create Custom Workspaces

You can customize your workspace by adding or removing panels according to you preferences After customizin , you can save these changes to your workspace by saving it for accessing it later from the

Wo r k spa ce Sw i t c h e r in the Document toolbar

By saving the current position and size o the panels as a named workspace, you can restore it even if

you move or close the panel

Select a workspace from the w o rk s pa c e s wi t cher in the Do c ument to ol ba r

For detailed step - by - step procedure , refer demo Dreamweaver Interface and Customization from eResource s 4 Me » My Var s ity >> Web Page De s ign >> Show Me How

1.3 Work Space Elements

1 3.1 Document W i nd o w Overv i ew

The Document window shows the current document Use the view option in the document toolbar to

switch views of the document You can also switch views using the View options in the View menu (Refer to Figure 1.4)

► Live v i ew : I t displays a realistic view of the document in a browser and lets you to interact with the document exactly as you would in a Web browser You can directly edit HTML elements in the Live View and instantly preview your changes in the same view

► D esig n vi e w : It i s a des i g n environmen t for visual editing , v i sual page layout, a d rapid applica ti n

development Dreamweaver displays an editable visual representation o the document th t is similar to the Web that you would see in a Web browser

► Code view : It is a hand-coding environment for writing and editing HTML JavaScript, PHP, and any other kind of code for Web design and development

► Split Code view: It is a split version of Code view that lets you to scroll to work on the differe t

sectio s of the document at the same time

► Code and Design : It lets you to see both Code view and Design view for the same document in a

single window

► Live Code: It isplays the actual code that your Web browser uses to execute the page, nd can dynamically change as you work with the page in the live view

On maximizing, the Document window (the default), tabs appear at top of the Document window

showing the file ames of all the open documents

Switch Views Refresh Design View Refresh Styles

live View

live View Options

live Code Inspect

Visual Aids

Style Renderng

Code View Options

Window Size Magnificaton

Figure 1.4: Document Window Overview

Dreamweaver displays an asterisk (') after the filename if you have made changes in the document that you haven't saved yet

The S tatus bar displays in pixels the Document window' s current dimensions You can adjust the

Document win ow to any of the predetermined sizes, you can create or edit th se pre etermined sizes

for designing a Web page that will look best at its specific size When you change the view size of a page in lve or design view only the dimensions of the view size change The document size is unaltered

In addition to predetermined and custom sizes, Dreamweaver also lsts the sizes specified in a media query When you select a size corresponding to a media query, Dreamweaver uses it to display the

page Yo u can also change the page or i en t ation to p r ev i ew t h e page for mobi e d evices T his is do ne

for the auto rotate feature which most of the mobies have When you change the orientation of the device the layout will automatically change

To resize the document window, select one of the sizes from the Window Size pop-up menu at the

bott m of the Document window (Refer to Figure 1.5)

✓ O r i entat i on lan dscape

Figure 1.5: Window Resize

1.3 3 Document Too/bar Overview

The Document toolbar consists of buttons for you to toggle between diferent views of your document

quickly It also contains some of the common commands and options for viewing and transferring the document between the local and remote sites (Refer to Figure 1.6)

Figure 1.6: Document Too/bar

Following options appear in the Document toolbar:

► Sp l it View : It splts the Document window between the Code and the Live/Design views

Note

Design view option is not available in fluid grid documents

► Live View : It is an interactive preview that accurately renders HTML5 projects and u dates in real

:ime to show you the changes as you make them You can also edit the HTML elements in Live View The drop-down list adjacent to the live o tions enables you to switch between Live and Design views This drop-down list is not available in the fluid grid documents

► Des i gn V i ew : It isplays a representation of the d cument displaying how the user views it in a

Web browser

1.3.4 Standard Too/bar

For displaying the Standard toolbar, select Window ➔Toolbars ➔ S tandard It consists of common

buttons from the File and Edit menus such as New, Open, Save, Save All , Print Code , Cut, Copy, Paste, Undo, a d Redo (Refer to Figure 1 7)

Figure 1.7: Standard Too/bar 1.3.5 Browser Navigation Too/bar

The Browser Navigation toolbar, which is a p rt of standard toolb r becomes active in Live view only

and shows you the ad ress of the page you're looking at in the Document window Live view even acts like a regular browser, so if you browse to a site outside of your local site, Dreamweaver will load

the respective page in the Document window (Refer to Fig re 1.8)

G.aoglc Sc1m:h I'm Feeling b 1cly

1.3 6 Too/bar Overview

The very important toolbar appears vertically on the left side of the Document window (Refer to Figure

1.9), and is visible in all views -Code, Live, and Design The buttons displayed are view-specific and

they only appear in the view in which they are applicable

File Edit View V'lsert Tools Find Sate Window ~efp

Cod,• Split Des:it;1n •

You can customize the toolb r according to your preferences by adding or removing unwanted menu

options from the toolbar

To customize the toolbar, do the following:

1 Clck the Cu sto mize to o lbar (Refer to Figure 19) button

2 Select or deselect the menu options that you want available in the toolbar and click Done to save

your toolbar (Referto Figure 1.10)

To restore the default toolb r butt ns, click Restore Default in the Customize Toolbar dialog box

Deselect options to hide them in the tool bar Click Restore

Defaults to show all options in thetoolbar

~ Live View Options

~ Show/Hide Visual Media Queries bar

~ Collapse Full Tag

~ Collapse Selection

~ Expand All

Figure 1.10 : Cu s tomize Too/bar

1 3 7 Status Bar Overview

Done

Cancel

Restore Default

The Status bar is at the bottom of the Document window (Refer to Figure 1.11) and provides additional

information about the document you are creating

Figure 1 11 : Srarus Bar

A Tag selector B Output panel C Code coloring D Insert and Overwrite toggle E Line and column

Ou tp ut p a nel

Click this icon to display the Output panel that displays coding errors in your document

Co de co l o r i ng ( av a il a ble i n co de view)

Select any of the coding languages from this pop-up menu for changing the coloring of the code to

In s ert and Overwri t e toggle ( a vailable in C ode view)

Allows you to toggle between Insert and Overwrite modes while working in the C ode view

Line a nd column number ( a a il a ble in Code view)

Displays the column number and line number wh re the cursor is located

W i nd o w S ize

elements most common properties, such as image or an inserted object (Refer to Figure 1.12)

The contents of the Property Inspector vary depending on the selected element For example, if you

select a table on your page, the Property Inspector changes to show properties for the table

The Property Inspector is located at the lower edge of the workspace by default, but still you can

undock it and make it as a floating panel in the workspace

It is mostly recommended to use the Tag inspector for viewing and editing every attribute associated with a given tag's properties

View and c h a nge propert i e s o f a page element

1 Select the pa ge element in the Document window: You might have to expand the Property inspector to view all of the properties of the selected element

2 Change any of the properties in the Property inspector

3 If your changes are n t immediately applied in the Document window, then you can apply the

changes in one of these ways:

► Click o u ts i de t he p r o er t y - ed i t i ng t ex t fields

► Press Return (Macintosh) or Press Enter (Windows)

► Press Tab for switching to another property

The Insert panel (Refer to Figure 1.13) contains buttons for creating and inserting objects such as tables, images, links, and so on The buttons in the panel are organized into several categories, which

you can switch by selecting the required category from the drop-down list a the top

I,] Table G:;j Ftgure

Some of the categories have buttons with pop-up menus When you select an option from a particular pop-up menu, it becomes the default action for that button The default action for the button modifies

everytime you select a new option from the pop-up menu

The In sert pan l is organized in the following categories:

► HTML: It lets you to create and insert the most commonly used HTML elements such as div tags and objects, such as tables and images

► Form : It contains buttons for creating forms and inserting form elements, such as month, search, and password

► Templates: It lets you to save the document as a template and mark specific regions as editable,

repeating optional or editable optional regions

► Boot st rap components: It contains Bootstrap components to provide navigation, drop-down,

containers, and more that you can use in the responsive projects

► jQuery Mobile: It contains b ttons for building sites that use the jQu ry Mobie

► jQuery UI: It lets you to insert jQuery UI elements such as accordion, slders, and buttons

► Favorites: It lets you to group and organize the Insert pan l buttons you use the most in one

common place

In sert Object

To insert an object using the Insert panel:

1 Select category from the Category pop-up menu

2 Do one of the following:

► Click an object button or drag the button's icon into the Document window (into Design,

Live, or Code View)

► Click the arrow on a button and then select an option from the menu

A corresponding object-insertion dialog box may appear depending on the object, prompting you to

browse to a file or specify the parameters of an object Dreamweaver might insert code into the document, or open tag editor, or a panel for specifying information before the code is inserted

No dialog box appears for some objects if you insert the object in Design view, but a tag editor appears

if you insert the object in Code view For a few objects, inserting the object in Design view causes the

Dreamweaver to switch to Code view before inserting the object

Edit In sert panel preference s

1 Select Edit ➔ Preferen c es

2 In the General category of the Preferences dialog box, deselect the ' Show Dialog When

In serting Objects' to suppress dialog boxes when you insert objects such as tables, images,

head, and scripts elements or by pressing the Option key (Macintosh) or the Ctrl key (Windows) wh n creating the object

Add, delete, or manage ite m s in the Favorites cat egory

1 Select any c ategory in the Insert panel

2 Ctrl+click (Macintosh) or right-click (Windows) in the area where the buttons appear and select

Favorites

3 In the Customize Favorite Objects dialog box (Refer to Figure 1.14), make the necessary

changes, nd click OK

dd separator

► To add an object, select an object in the Available objects pane on the left and then click the arrow between the two panes or double-click the object in the Available objects pan

► To delete an object or separator, you can select an object in the Favorite objects pane

on the right and then click the Remove Selected Object in Favorite objects List button

above the pane

► To move an object you can select an object in the Favo rite objects pane on the right,

and then click the Up or Down arrow button located above the pane

► To add a separator below an object, you can select an object in the Favorite objects

pane on the right, and then click the Add Separator button below the pane

4 If you're not in the Favorites category then select that category for viewing your changes

1.3 10 Files Panel Overview

Use the Fi l es pan l to view and manage the files on your Dreamweaver Website

You can use the Files panel to view files and folders (Refer to Figure 1.15), check whether they are associated with a Dreamweaver site or not and even perform the standard file mainte ance operations,

such as opening and moving files

The Files pan l also helps you to manage and transfer the files to and from a remote server

+ Sources

bootstrap.css

verniilion-theme css

@Media : GLOBAL GLOBAL

P Filter CSS Rules

All Current

article, aside, detai l s, figcaption, figure, footer, header, hgroup, main, menu,

audio, canvas, progress, video

audio :not([ controls])

[ h i dden ] , temp l ate

abbr [ tle]

b strong dfn

hl mark

All Mode: Lists rules for entire document

Figure 1 16: CSS Designer Panel

The CSS Designer panel consists o the following panes and options:

► All : It lists all the CSS, media queries, and selectors associated with the curren document You can filter for the required CSS rules and modify the properties You can also use this mode to start creating the se l ectors or med i a queries This mode is not sensitive to selection This means, when you select an element on the page, the associated selector, CSS or media query are not highlig ted

in CSS Designer

► Cur ent: It lists all the computed styles for a y selected element in Design or Live view of the current document When you use this mode for a CSS file in Code view, all the properties for the selector in focus are displayed This mode is context-sensitive

► Source s : It lsts all the CSS style sheets associated with the document Using this pane, you can

► @ Medi a : It lists all the media queries in the source selected in the So urces pane If you don't select

a specific CSS, this pane displays all the media queries associated with the document

► Sele tor s: I t lists all the selectors in the source selected in the Sources pane If you also select a

media query, this pane narrows down the lst of selectors for that media q ery If no media qu ry

or CSS are selected, all the selectors in the document are displayed When you select Gl o a in

displayed

► Propertie s : Displays the properties that you can set for the selector

If you expand or colapse the panes in CSS Design r, the sizes of the panes are remembered within a sessio The sources and Me ia panes stick to their custom sizes unless you re-change their sizes

To view all the selectors, you can choose All Sources in the Sources pane To view selectors that do

not belong to any media query in the selected source, click Global in the @ Med i a pane

Note

When you select a page element, the most s pecific Selector i s s ele ted in t he S electors pane To v iew t he properties of a specific Sele tor, cli c k the name of tha t S elector in the pane

1.4 Creating a Website

creating it

1.4 1 Sett i ng up a New Site

Sit •

A Ore a mwe ve r s i e i s a co ll ectio n o a ll of the files a nd assets y ou u se i n yo r

Strvers

w ebsi t e A O r e mwe ve r si t e u s u l ly h as two pa rts : a loc a l fo l de r o n y our

Version C o trol comp ter w he r e you store a d w ork o n files, nd a remote fo l der on a server

► Advan c d Sett i n s wh e r e y ou pos t the same fi l es t o t he web

H e r e y u1I se l e ct t h e l o ca l f o l d r and a n m for your Or eamwea v r s i te

L oca l Sit e f o l d r : I C :lj.Jsers \Swar o oplj)oa,nents 'j.J nnam ed Site 3 I Si

Figure 1 17: Site Setup

► Site

► Servers

► Version Control

1.4.2 Setting up a Testing Site

Developing dynamic pages requires generating and displaying dynamic content The user needs to

setup a testing site for this purpose A testing server can be used as a local computer, development

server, staging server, or a production server

To setup a testing server, go in Site ➔ manage Sites and click New Site (Refer to Figure 1.18)

Figure 1.18: Manage Site

The Site Setup dialog appears (Refer to Figure 1.'19) Fill in the details for Basic and Advanced

configuration

SJ tc Sctu-p f or Uiim1~d Sit e

Figure 1.19: Options in Basic Tab

1.4.3 Creating a New Page

After creating a local site and a testing server, the user can start creating the Web pages

To create a new page, on the File men , clck New or press Ctrl+N key The New Document dialog box

will be displayed (Refer to Figure 1.20)

be used in each of the page type in the adjacent column It can also be used to select differen types of

documents, such as Basic page, Dynamic page, Framesets, and Template page

1.4.4 Page Properties

After creating a Web page, the user can set the properties for the page such as background image, background color, link color, and margins To set r modify the page properties for each Web page, the

Page Properties dialog box (Refer to Figure 1.21) is used To open the Page Properties dialog box, on

the Modify menu, ick Page Properties

The Page Propertie s dialog box enables the user to specify the default font family and font size,

background color, margins, link styles, and many other aspects of a page design New page properties

can be assigned for each new page and modify those for existing pages Changes made in the Page

Properties dialog box apply to the entire page

Top margin:

Right margin:

Bottom margin:

Apply

Figure 1.21: Page Properties

Canr~I

A site map is a visual overview of the site's layout In order to view a site map the user has to create

an in ex.html Web page This index page is gen rally the homepage for any Website The index.html page is always at the top of the Website and all the other files of the Website are lnked to it in the same manner in which they would be displayed on the Website The other files are displayed below the

index.html page

After creating a Web page, it is essential that you valdate the page correctly before visitors using

different Web browsers, such as Internet Explorer or Netscape, view it The user must save the document before previewing it, to reflect the recently made changes To preview a Web page in a

browser, n the Fil e menu, click Prev i ew I n Brow s er Later, select one of the listed browsers or press

the F l 2 key to preview the Web page in the primary browser

For detailed step-by - step procedure, refer demo Create a New Page, set its properties and Preview from eResources 4 Me» My Varsity>> Web Page Design >> Show Me How

1.5 Summary

In t his session , Getting Started with Dreamweaver CC you learned that:

► Online advertising is simiar to traditional advenising in many ways

► Segmentation simply means having a well-defined scope for every campaign

► Having a broad range of ads within your campaigns is necessary for making good performance

comparisons

► Conducting proper research before running a campaign helps to improve the quality of your ad copy

► Several marketing experts have advised tha banner ads should be run in coordination with other

marketing strategies

► Display ads can be created in various shapes, sizes, and formats

► Di!;p l c1y c1tlve1 L i!;i 11y t,;c111 ve ry well wu r k fur " B2B I.Ju!;ill e!;!; ,

► With the h lp of display advertising, you can target users who are already interested in the products

or services offered by you

► Display advertising is a type of online advertising that includes more than just text primariy logos,

photos, animation, and sometimes videos as well

► Dynamic Creative Optimization {DCO) is a display ad technology that creates customized ads

depending on available data regarding the viewer while the ad is being served

d Customize toolbar

_ _ _ lsts all the CSS style sheets associated with the document

Session 2

Working with Images, Lists, Tables, Links,

and Frames

Learning Outcomes

In th is session, you will learn to:

the site

For detailed step-by-step procedure, refer demo Insert Image from eResources 4 Me>> My Varsity» Web Page Design >> Show Me How

2 1 2 Set Image Properties

The Images Property inspector (Refer to Figure 2.1) allows you to set properties for an image If you

do not see all of the image properties, click the expander arrow in the lower-igh corner

Figure 2 1: Image Properties

1 Click the image and select Window ➔ Properties to view the Property inspector for a selected

image

2 In the text box below the thumbnail image, enter a name so tha you can refer to the image while using a Dreamweaver behavior (such as Swap Image) or when using a scripting language such

as VBScript or JavaScript

3 Set any of the folowing image options:

• Wand H: It's the width and height of the image (pixels) When you insert an image in the page, these text boxes are automatically updated with the image's original dimensions If in a particular instance the W and H values are not corresponding to the original width and height

o the image, the image could seem distorted in a browser To restore the original values,

click the W and H text box labels, or the Reset image size button appearing to the right o the

W and H text boxes in e tering a new value

• Src: It specifies the source file for the image file Clck the folder icon to browse to the source

file, or just type the path

• Link: It specifies a hyperlink for the image Drag the Point-To-File icon to a file in the Files

panel, click the folder icon to browse to a document on your site, or manually type the URL

• Al t: It specifies the alternative text that appears in place of the image for text-only browsers or

for browsers that have been set to download images manually For the visually impaired users who use speech synthesizers with text-only browsers, the text is spoken aloud In some browsers, this text also appears when the pointer is over the image

• Map Name and Hot spot tool s: It allows you to label and create a client-side image map

• Target : It specifies the window or frame in which the linked page should load (This option is

not available when the image is not linked to any another file) The names of all the frames,

which are in the current frameset, appear in the Target list

• Edi t : It starts the image editor that you specified in External Editors preferences and opens the selected image

• Edit image settings: It opens the Image Optimization dialog box and lets you to optimize the image

• Update from original: When the image on the Web page is uncoordinated with the original Photoshop file, Dreamweaver detects that the original file has been updated, and shows one

of the Smart Object icon's arrows in red When you choose the Web image in Design view

a d then click the Update fr o m Origin a button in the Property inspector, the image updates automatically, reflecting any of the changes tha you made to the original Ph toshop file

• Crop: It trims the size of an image, removing unwanted areas from the selected image

• Re sa m p le: It resamples a resized image, thus improving its picture quality at its new shape

a d size

• Br ig htne ss and Co ntrast : It adjusts the brig tness and contrast settings of an image

• S h rpen : It adjusts the sharpness of an image

2 1.3 Visually Resize an Im a ge

You can visually resize the elements such as images, plug-ins, Shockwave or SWF files, ActveX controls, and applets in Dreamweaver

Visually resizing an image helps you to see how the image affects the layout at different dimensions

but it does not scale the image file to the proportions that you specify If you visually resize an image in

D r eomweove r w i thou t us i ng the i mage - ed i t i ng app li ca t ion (such as Adobe l"" hotoshop o r fir ewo rk s) to scale the image file to the desired size, the user's browser automatically scales the image when the page is loaded This may cause a delay in the page download time and the improper display of image

in the user's browser To reduce the download time and to ensure th t all instances of an image appear

at the same size, you should use an image-editing application to scale images

Wh n you resize an image in the Dreamweaver, you can resample it to accommodate to its new

dimensions Resampling an image adds or subtracts pixels from a resized PNG and JPEG image to match the appearance o the original image as close as possible Thus, resampling an image reduces

its file size and improves the download performance

Dreamweaver provides the basic image-editing features that le you to modify images without having

to use an external image-editing application such as Photoshop The Dreamweaver image-e iting tools

are designed for letting you to easily work with content designers responsible for creating the image files for use on your Website

You can resample optimize, crop, and sharpen images in Dreamweaver You can also adjust their contrast and brightness

Select Edit ➔ Image To set any of these Dreamweaver image editing features:

► Op t imize : Select a preset, specify the level of qu lity, and specify a file format As you move the

slider across the quality levels, you can see the file size of the image in the dialog box Click OK

when done

► Re s ample : Adds or subtracts pixels from a resized GIF and JPEG image files to match the appearance of o ginal image as close as possible Resampling an image helps to reduce its file size and improve the download performance When you resize an image in the Dreamweaver, you

can resample it to accommodate to its new dimensions When a bitmap object is resampled, the pixels are added to or removed from the image to for making it larger or smaller Resampling an

image to a higher resolution typically causes lt:le loss of qualit Resampling to a lower resolution,

however, always causes data loss and usually a drop in qualty

► Crop: It edit the images by reducing the area of the image Typically, you will want to crop an image

to place more e11phasis on the image subject, and remove any unwanted aspects surrounding the center of interest in the image

► Brigh t ne ss and Co ntra s t: It modifies the brightness or contrast f the pixels in an image This

Brightness/Contrast for correcting images that are too dark or too light

within the image When your take a digital photo, or scan an image, the default action of most of

the image capturing software is to soften the edges of the objects This prevents the extremely fine

d tails from becoming lost in the pixels from which the digital images are composed However, for

bringing out the details in digital image files, it is most often necessary to sharpen the image, thereby

increasing edge contrast, and making the image appear sharper

Note

Dreamweaver image-editing feature s apply only to JPE G , PNG , and G IF image format s

Other image file formats c anno t be edi t ed u s ing the s e image-editing feature s

2 1.5 Crop an Image

Dreamweaver lets you to crop (or trim) the bitmap file images When you crop an image, the source

image file is changed on disk For this reason, you may want to keep a backup copy of the image file

in the event you need to revert to the original image

Web Page Design » Sho w Me Ho w

Note

You can undo the effe c t of the Crop command (and revert to t he original image file) up

until t he t ime th a t you qui t Dreamweaver, o r edit the file in an external image - editing

application

2 1.6 Cre a te a R o llover Image

You can insert rollo•,er images in your page (Refer to Figure 2.2) A rollover is an image that changes

when the pointer moves across it when viewed in the browser

l n rt Rol~r lmoge

ill'IIOt:Ntl'le ~ L adakh

O'iginaf~: file ///C.f/Us ers/Swaroop'()own l oads/14358 ~ ; )

WhMddoed,Gotol.Rl.:

Figure 2.2: Rollover Image Properties

OK

For this, you must have two images to create the rollover: a primary image (displayed when the page first loads) and a secondary image (appears when the pointer moves over the primary image) Both

images in a rollover should be the same size if the images are not of the same size then Dreamweaver resizes the second image to match the size of the fi st image

Rollover images are automatically set to respond to the onMo s eOve r event You can set the image

to respond to a different event (for example on mouse click) or change the rolover image

For detailed step - by - step procedure, refer demo Create Rollover Image from eResources 4 Me » My Varsity » Web Page Design >> Show Me How

2 17 Image Map

An image map is an image which is divided into regions called hotspots: when a user clic s a h tspot,

an action happens (for example, a new file opens)

Client-side image maps stores the hypertext lnk information in the HTML document itself nd not in a separate map file as server-side image maps do When a visitor clcks a h tspot in the image, the associated URL is directly sent to the server In addition, this is what makes the clent-side image maps faster than serverside image maps as the server does n t need to interpre where the visitor clic ed

In the existing documents, Dreamweaver does not alter refere ces to server-side image maps: you can use b th server-side image maps and client-side image maps in the same document However,

browsers th t support both types of image maps give always priority to clie t-side image maps To

include a server-side image map in your document, you must write the appropriate HTML code

For detailed step - by - step procedure , refer demo Inserting Client-Side Image Maps from eResources

4 Me » My Varsity » Web Page Design » Show Me How

2.1 B Add Text to Document

For a ding text to a Dreamweaver document, you can directly type the text in the Document window or you can just cut nd paste the text You can also import text from other documents

Wh n you paste the text into a Dreamweaver document, you can use either the Paste Special or the Paste command The Paste Special command lets you to specify the format f pasted text in differenways For example suppose you want to paste the :ext from a formatted Microsoft Word document into your Dreamweaver document However, you want to remove all o the formatting so that you could apply your own CSS style sheet to the pasted text In this case, you should select the text in Word document, copy it to your Clip oard, a d use the Paste Special command to select the option that allows you to paste the text only

Wh n using the Paste command to paste the te:<t from other applcations, you can set the paste preferences as default options

► Add text to your document by d ing one of the 'olowing:

• Extract text from your PSD compositions by using the Extract panel

• Type the text directly into the Document window

• Copy text from a other application, switch over to Dreamweaver, position the insertion poin in the Design view, and select Edit ➔ Paste or Edit ➔ Paste Special

There are various paste formatting options available when you select Edit ➔ Paste Spec i a l

2.1.9 In sert Special Characters

Some special characters are represented in the HTML by a name or a number, called as an entity

HTML includes entity names for characters such as the registered-trademark symbol (&reg;), the copyright symbol (&co py ;), the ampersand ( &amp; ) Each entity has both a numeric equivalent (such

as &#15 1; ) and a name (such as &mda s h; )

1 In the Document window, first place the insertion point where you want to insert a special character

2 Do one of the following:

• Select name of the character from the In s ert ➔ HTML ➔ Character

• In the HTML category of the I nsert pane l , click the Characters option and then select the character from the pop-up men

2 1 10 Add Space Between Characters

Only one space is allowed between the characters; for adding additional pace in a document, you must

insert a non-breaking space You can even set preference to add non-breaking spaces in a document

Insert a non-breaking spac e

Do one of the following:

1 Select Ins ert ➔ HTM L ➔ Spec ia l Characters ➔ Non -Bre aking Space

2 Press the Ctr l +S hif t +Spacebar

3 From the I nsert pane l , select HTML click the Characters option, and then select the Non

-Breaking Space option

Set A Preferen ce for Adding Non -Bre ak i ng Spaces

1 Select Edit ➔ Preferences

2 In the General category, make sure Allow Multiple Consecutive Spaces is checked

You can create a numbered list, bulleted lst, and a definition lsts from the new or from existing text as

you type in the Document window

Definition lists do not use leading characters such as numbers or bullet points and are often used in

descriptions and glossaries You can also add Nested lists, which are lists that contain other lists For example, you might want a bulleted or ordered list nested within a other numbered or ordered list You use the List Properties dialog box to set the appearance of an individual list or an entire lst item You can set n mber style reset numbering, or set ullet style options for the individual list items or for

the entire lst

Create a New Li st

1 Place the insertion point in the Dreamweaver document wh re you want to add a list, then do one

of the following:

• In the HTML Property in spector, clck either the Ordered List or the List Item

• Select Insert ➔ HTML ➔ and select the type of list you want -Ordered List (numbered lst),

Unordered List {bulleted list) The leading ch racter for the particular list item appears in the Document window

2 Type the list item text and then press r Enter to create anoth r lst item

3 To complete the lst, Enter twice

1 Select a series of paragraphs to make into a lst

2 Select Insert ➔ HTML ➔ Unordered List or Ordered List or List Item

1 Select the list items tha you want to nest

2 Right-click and select L ist ➔ Indent

Dreamweaver in ents the text and creates a separate list by using the HTML attributes of o ginal list

3 Apply a new style or lst type to the indented text by following the same sequence as used above

Set the List Properties for an Entire List

1 In the Document window, you must create at least one lst item The new style will automatically apply to additio al items that you add to the list

2 With the insertion point in the list item's text, right-clck and select List ➔ Properties The system

displays the List Properties dialog box

3 Set the options you want to d fine the list:

• List Type : It specifies list properties while List Iem specifies an individual item in a list Use the pop-up menu to select a bulleted, numbered, directory, or menu lst Depending on the List

Type, you can select ifferent options appear in the dialog box

• Style: It determines the style of numbers or bullets used for a numbered or bulleted lst All items in the lst will have this style unless you specify a new style for items within the lst

• Start Count: This sets the value for the first item in a numbered list

4 Click OK to set the choices