UNIT 1 DREAMWEAVER WORKSPACE Program Name : Bsc (MGA) Written by: Sonal Ramrao Dalvi SRAJAN Institute, Pune. Structure 1.0 Introduction 1.1 Unit Objectives 1.2 Overview of the Dreamweaver Workspace 1.3 Toolbar Functions 1.3.1 Using the Insert Toolbar 1.3.2 Using the Document Toolbar 1.4 Showing or Hiding Windows Panel 1.4.1 Understanding the Panel Dock 1.4.2 Using the Properties Inspector 1.4.3 Working with the Files Panel 1.5 Summary 1.6 Key Terms 1.7 Questions and Exercises 1.8 Further Reading

1.0 INTRODUCTION Dreamweaver is a very popular and versatile Web development application for designing, building and maintaining websites and mobile applications developed by Adobe Systems. Dreamweaver is available for both Mac and Windows operating system. The latest versions have better integrated support for Web technologies such as JavaScript, CSS and various server side scripting languages and frameworks like PHP(PHP hypertext preprocessor), ASP (Active Server Pages). This unit provides a basic outline of Dreamweaver Workspace. You will learn different windows, Toolbars and menus you’ll use every time you build a web page. You will see how to access, show or hide panels and toolbar as per your requirement.

1.1 UNIT OBJECTIVES: After studying this unit you will be able to Identify and define the various components of Dreamweaver workspace

B. Sc. (MGA)

1

Use of Insert Toolbar Use of Document Toolbar Hide and show various panels

1.2 OVERVIEW OF THE DREMWEAVER WORKSPACE As Dreamweaver is mostly used for designing a webpage, you will explore the workspace using the designer layout. It contains Application bar at the top of the screen, Document window in the center, panel group on the right side and property inspector at the bottom as shown in Figure 1.1

A.DocumentTab

B.Document Toolbar

C.Application Bar

D.Workspace Switcher

E.Insert Panel

F.Coding Toolbar

G.Panel Group

H.Property Inspector

I.Code View

J.Design View

K.File Panel

Figure 1.1 The Dreamweaver Workspace

All these elements work together to assist you with adding and modifying the content in an open document. The workspace consist of following elements Welcome Screen When you launch Dreamweaver, the Welcome Screen will appear automatically. From this screen you can access quick links to recent documents, create a new document, view videos of latest features of Dreamweaver as shown in Figure 1.2. You will also find links to ‘Getting

B. Sc. (MGA)

Started’ and ‘New Features’ both of which will be helpful for new users and users seeking quick details about what’s new in current version of Dreamweaver. You will learn more about ‘Dreamweaver Preferences’ in later units Tip: You can hide or show the Welcome Screen by adjusting its option as follow Edit Preferences General category Show Welcome Screen

Figure 1.2 Welcome Screen

Application Bar Application window includes the Dreamweaver logo, Menubar, Layout button to choose different views of code and design, Extent Dreamweaver option, a quick button to create a new site or manage a previously defined one, Workspace Switcher to change various workspace arrangements of Dreamweaver elements as per user’s need, Search option and link to CS live services. Document Window This Window shows active document as you create and edit it. You can choose any of the following view Code, Split (half code/half design) or Design view Document Toolbar This toolbar holds buttons of Code, Split, and Design view, quick links to ‘Live Code’ and ‘Live View’, It also contains a button to check browser’s compatibility and some common actions such as previewing in a browser, refreshing the design view, Title of the current document and File Management Button.

B. Sc. (MGA)

3

The Coding Toolbar This toolbar holds special quick coding-buttons that let programmer to execute many regular coding tasks. These buttons includes open a document, collapse a tag, selection or expand the code, select parent tag, balance the braces in code, add or remove line numbers, highlight the invalid code, alert the syntax error in info bar, apply and remove comments of code, convert code snippets to CSS format, Indent and Outdent the code snippet. (Note: This toolbar is visible only in code and split view) Insert Panel Insert Panel shows buttons for quick addition several types of items, such as tables, images and media elements, into a current document. Each object’s HTML code will get generated automatically at the backend. You will explore more about Insert panel in ‘Using the Insert Panel’ section later in the unit. The Standard toolbar This toolbar consist of links for regular operations from the File and Edit menus such as New, Open, Browse in Bridge, Save, Save All, Print Code, Cut, Copy, Paste, Undo, and Redo. This toolbar is hidden in default workspace. To show it follow below stepsView Toolbars Standard The Style Rendering toolbar This toolbar consist of buttons that let you understand how your design would look in different media types if you use media-dependent style sheets. It also consists of a button that enables or disables Cascading Style Sheets (CSS) styles. To view this toolbar go through following stepsView

Toolbars

Style Rendering

The Properties inspector The Property inspector shows you variety of properties for the object or text which is selected. Every object has different properties. The contents of the inspector change according to the object or text selected in your document. You will get more details in ‘Using Properties Inspector’ later in this unit. Tag Selector This Status bar area is at the bottom of the open Document window. It displays the hierarchy of tags around the current selection or wherever you have placed the insertion point on the document. Click any tag in the tag selector to quick selection of that tag and all its contents. This tool is very useful when applying CSS to the elements in a document.

B. Sc. (MGA)

Panel Groups In Panel dock, related panels with individual tabs are grouped together into a single panel group. You will get more in-depth description in ‘Accessing panels and panel groups’, later in this unit. Files panel File panel which helps you to access and manage your local or remote site’s files and folders in Dreamweaver. It also lets you access all the other files on your local disk.

Check your progress 1 List elements of Dreamweaver workspace. How to open Style Rendering toolbar and what is its importance? Observe the changes workspace by toggling various options of workspace switcher. List menus of application bar List panels which are grouped in a panel dock

1.3 TOOLBAR FUNCTIONS In this section you will learn in detail about how to use the Insert toolbar panel and how to customize the document toolbar

1.3.1 Using the Insert Toolbar (Panel) Using the Insert Panel The Insert panel consists of buttons for creating and inserting objects such as tables, media, images, date and links as shown in Figure 1.3. The buttons are ordered into several groups, which you can change by selecting the desired type from the type pop-up menu (default is Common). Additional groups appear when the current open document contains server code, such as ASP or PHP documents.

Figure 1.3 Insert Panel

B. Sc. (MGA)

5

The Insert panel is ordered in the following classifications: Common It consists of most commonly used objects such as tag, media and images. Layout It consists of insert tables, table elements (th, tr, td, caption), div tags and spry widgets. Forms It consists of buttons for creating forms, form elements such as input, radio button and spry validation widgets. Spry It consists of buttons for creating spry pages, containing Spry data items and widgets. InContext Editing It consists of buttons for creating Editable Regions and Repeating Regions. Data It Consists of Spry data objects, other dynamic data, recordset, manage records, User authentication. Text It consists of a variety of text- and list formatting tags, such as b,I, em, p, h1, pre and ol. Favorite It Consists of group and organize the Insert panel buttons you use more often. Server-code This is available only for documents that use a certain server language, such as ASP and PHP. Each of these sets provides server-code objects that you can easily insert in Code view. You can use from Insert toolbar option from the menu bar as shown in Figure 1.4 or can also drag the Insert panel out of its default dock place and drop it into a horizontal position at the top of the Document window. When you do so, it converts from a panel to a toolbar.

B. Sc. (MGA)

Figure 1.4 Insert Toolbar

1.3.2 Using the Document Toolbar (Panel) Exploring the Document Window The Document window consists of several sections, some of which are always visible and some are toggled on or off. In the following section you will learn about the Document window along with its sub elementsDocument tab bar, Document toolbar, Ruler, Grids, Guides and Status bar. 1) Document Tab Bar The Document tab bar is situated at the top of the Document window below Application bar. The name of the file appears in the tab and when you point over the filename, a tooltip shows the location of the file. You will also find the current file location at the right side of the tab bar (If sufficient space is available ) .When multiple documents are open, to switch to a next file, just click its tab name. You can drag and drop the tabs to arrange them in a required order.

B. Sc. (MGA)

7

Document Toolbar The Document toolbar contents following buttons and quick links.

Figure 1.5 Document Toolbar

a) Code View It displays only the Code view of the page in the Document window. You can use this view to edit or write your own HTML, JavaScript, PHP or other code in a webpage. b) Split (Code and Design) View It Splits the Document window between the Code and the Design views. It shows whole code enclosed by in Code view and its visual rendering in Design view. c) Design View It displays only the Design view of the document in the Document window. Note: If your page contains script of JavaScript, CSS or other code based file types, you are unable to view files in Design view and the Design and Split buttons are dimmed out. d) Live Code If Live code is enabled, you select an element in Design view, then it highlights the corresponding code in Code view used by the browser to execute it. e) Check Browser Compatibility It checks whether your CSS is compatible across various browsers of PC, tablets and mobile phones. if any error occurs, the result panel displays it. f) Live View It displays your page along with any dynamic content, browser based view of the document. It helps to troubleshoot the display issue. g) Inspect It validates the present document or a selected tag.

B. Sc. (MGA)

h) Preview/Debug in Browser It allows you to preview or debug your document in a browser. Select a browser from the pop-up menu. i) Visual Aids It enables you to use different visual aids to design your pages. j) Refresh Design View It reloads the document’s Design view after you make changes in Code view. Changes you make in Code view don’t automatically appear in Design view until you execute certain actions, such as saving the file or clicking this Refresh button. k) Document Title It allows you to enter a title for your file, to be displayed in the browser’s title bar. If your document already has a title, it appears in this field. l) File Management It displays the File Management pop-up menu. 2) Rulers As the name suggests, this tool helps you measure and design your layout. To enable the Ruler in document Select View

Rulers

Show.

They can appear on the top(Y axis) and left(X axis) borders of the page. By default the origin (0, 0) is at the top left corner of the document. By selecting and dragging the origin square from its default location to any other location, and then by dropping it you can position the origin to any desired point in an open document. Default origin (0, 0) will shift to new co-ordinates. To reset the origin to its default position, Select View

Rulers

Reset Origin.

Measurement unit of the Ruler can be defined in pixels, inches or centimeters. Refer Figure 1.6. 3) Grid The grid shows an arrangement of vertical and horizontal lines in the Document window. To enable the Grid Select View

B. Sc. (MGA)

Grid

Show Grid

9

You will find it useful for placing objects accurately within Grid. By choosing Snap to Grid option, you can place the object with proper alignment to the document. Select View

Grid

Snap to Grid

You can customize the Grid mesh by changing its settings, such color of Grid lines, Spacing between them, Display mode of grid by lines or dots. Select View

Grid

Grid Settings

Refer Figure 1.6. 4) Guides Guides are vertical and horizontal lines that you drag onto the current document from the rulers as shown in Figure 1.6. Guide lines enable you to position and align objects more accurately. To make them visible Select View Guides Show Guides. Or Click on the Ruler and then drag from the ruler. Place the guide in the Document window and then drop it. You can measure the size of page elements with the help of Guide lines. Similar to the Grid system, you can align elements of the page by using ‘snap elements to guides’ or ‘snap guides to elements’ option. You can also lock guides to prevent them from being accidentally moved by another user. Select View Guides Guides Snap to Elements.

Snap to Guides or Select View

Guides

Once the final layout done by you, you can lock the guides, just to avoid the shifting of guides. Select View

Guides

Lock Guides.

You can change the color of the guides and other settings Select View Guides

B. Sc. (MGA)

Edit Guides.

1

Origin square (0, 0)

Ruler (X-Axis)

Grid

Ruler (Y-Axis)

Guide

Figure 1.6 Ruler, Grid and Guides

5) Status Bar The Status bar is located at the bottom of the Document window and gives additional information about the document file you are creating. As shown in Figure 1.7 it contains many useful features. Tag Selector

Hand tool

Select tool

Set Magnification

Zoom Tool

Document Encoding

Window Size Menu

Figure 1.7 The Status Bar

a) Tag Selector This tool helps to quick selection of a tag and its content. Click tag in an open document to select the total body of the document. You can set id, class or other attributes for a tag from the tag selector, just right-click (Windows) or Control-click (Macintosh) the tag and set id or class from the pop up menu as shown in Figure 1.8. It also shows the order of tags surrounding the current selection.

B. Sc. (MGA)

11

Figure 1.8 Tag selector window popup

b) Select Tool It helps you to select the element in an open document. In Design view this is a default tool for selecting elements. c) Hand Tool This tool enables you to click the document and drag it in the Document window. When you zoom in the document, you can use hand tool to reposition the current view. d) Zoom Tool Zoom tool allows you to zoom in and out of the Design view window. Select the tool and click in the Document window to zoom into the page. Double-click on zoom icon e) Set Magnification It shows zoom settings in percentage from 6% to 6,400%.Select a present magnification view from the drop down list or type a number in the percentage field and click Enter (Window) or Return (Mac) to view the page with a custom magnification. f) Document size and download time It shows the expected document size and estimated download time for the webpage, as well as all dependent files such as images and other media files. g) Encoding indicator It shows the text encoding used for the current document.

B. Sc. (MGA)

1

Check your progress 2 List down the elements of Document toolbar How to use grid and guide to align elements in document? Note down different ways of zooming a document. Check options of status bar by selecting any element from document. List components of Insert panel

1.4 SHOWING OR HIDING WINDOWS PANEL Dreamweaver uses panels to assist you to organize and modify content, as well as gives access to common functions. It contains various panels and toolbars. Panel groups are initially docked together, but can be undocked into their individual windows. You can open, resize, undock, dock and close panel/panel group as per your convenience. 1.4.1 Understanding the panel Dock A dock is a collection of panels displayed together, generally in a vertical orientation to the left and/or right edge of the workspace. You dock, undock, expand and collapse the panels. • To dock an individual panel, click and drag it by its tab into the dock, at the top, bottom, or in between other panels and release it. • To dock a panel group, click and drag it by its title into the dock and release the pointer. • To remove a panel or panel group, click and drag it out of the dock by its tab or title bar. You can put it into another dock or make it freefloating in an open workspace. • To resize the dimension of the panel, just hold a pointer on the edge of the panel and pointer will be double sided arrow. Then drag the line as per your need and resize the panel. a) Expanded Mode At the top right corner of the dock, expand/collapse button is provided. When a dock is expanded, the individual panels can either be alone expanded to show panel contents or collapsed with just a panel tab. b) Collapsed Mode When the dock is collapsed, the panels appear in iconic mode with just an icon and panel name, as shown in Figure 1.9.

B. Sc. (MGA)

13

Figure 1.9 Collapsed Mode

c) Option Menu Each panel has an option menu at top-right corner of the panel, gives access to the panel-specific tasks. d) Expand/Collapse To expand or collapse any panel, just double click on the panel tab or panel group window. 1.4.2 Using Properties Inspector The Property inspector helps you notice and edit the most common properties for the currently selected element, such as an image or any element tag. Property inspector’s content may change depending on the element selected. For example, if you select text on your page, the Property inspector changes to show properties for the text such as Font type, font size, color, text alignment and so on. Figure 1.10 shows properties window of an iamge.Here you will see the attributes related to the image file.

1.10 Property Window

B. Sc. (MGA)

1

1.4.3 Working with Files Panels By Using Files Panel you can access, edit and save files and folders in your Dreamweaver sites, as well as files and folders that are not part of a Dreamweaver site. In addition to Dreamweaver sites, you can access a server, a local drive. Before you can access a remote server, you must set up Dreamweaver to work with that server. You can manage the webpages or refresh the Files panel after you make changes. (You will learn how to create a site in next unit.) It lists all the files webpages, images, media, and so on that make up your website. It gives you a quick way to open webpages you want to work on (just double-click the file name in the panel). It also lets you control among different sites you’re building or maintaining, and provides some valuable tools for organizing your files. As shown in Figure 1.11, Files Panel has two dropdown menus to help with site management tasks. Site Management

Site View

Figure 1.11 Files Panel

a) Site Management Dropdown It contains a list of all managed site you have created in Dreamweaver. Site is a collection of all of the files and assets in your website. You need to create a site for each project you work on in Dreamweaver. b) Site View Dropdown There are four types of views 1) Local: It displays the local managed sites and its content. This is the default view of a Dreamweaver. 2) Remote: It displays the file structure of the remote sites. A remote site is a version of your local site which is placed on the hosting server accessible through internet.

B. Sc. (MGA)

15

3) Testing: This view shows a directory listing of both, the testing server and local site files. 4) Repository: This feature is used when Dreamweaver is set up to use Subversion, a version control application. Selecting this option invokes the version control context menu, inside which files can be compared, viewed and reverted. Below the dropdown lists, a series of helpful buttons to aid with transferring file to and from a remote server, a refresh and synchronize buttons. At the bottom right corner of the files panel you will fine Log button. Dreamweaver creates a log of file activity during the transfer that you can view and save.

Check your progress 3 Select various tags from webpage and list down their properties from Properties Inspector. List down all panels from the dock. List elements of File panels What are the types of site View? What is the difference between local and remote view?

1.5 SUMMARY •

The Dreamweaver workspace lets you view documents and object properties. The workspace also places many of the most common processes in toolbars so that you can quickly make changes to your documents.

•

The Welcome screen helps you to open a recent document or create a new document.

•

The Application bar across the top of the application window contains a workspace switcher, menus and other application controls.

•

The Insert panel consists of buttons for put in various types of elements such as text, images, tables and media elements, into a webpage. Each element is a piece of HTML code that lets you set various attributes as you insert it.

•

The Document toolbar contains buttons that provide options for different views of the Document window (such as Code /Split/Design view), various viewing options, and some common tasks such as previewing in a browser.

•

Rulers, grids and guides help to arrange precise positioning and resizing of webpage elements.

B. Sc. (MGA)

1

•

The Property inspector enables you view and change a various properties of the selected element or text. Each element has different properties.

•

The Status bar situated at the bottom of the Document window offers extra information about the document you are creating.

•

You can create a custom workspace by moving and toggling hide/show of Document windows and panels.

•

In the Files panel you can add, delete, and rename files and folders to change the organization as needed. The Files panel also has various tools for managing your site, transferring files to and from a remote server and synchronizing the files on your local and remote sites.

1.6 KEY TERMS • • • • • •

Toggling : It means switching to different options, view or application from one another Status bar: It is a horizontal line of information displayed at the top or bottom of the application window. Windows panel: It is a which helps you to organize, select from and modify content, as well as provide access to common features and functions of an application. Panel dock: It is fixed rectangular area at the left or right edge of the workspace and t contains the currently open panels and panel groups. Expanded table mode: It is feature of the Dreamweaver which increases cell spacing, cell padding and border width of the contents of the table cells easily manipulated. Repository : It refers to a feature that used when Dreamweaver is set up to use subversions, a version control application.

1.7 END QUESTIONS: 1) List down various panels and toolbars of Dreamweaver workspace 2) How to apply precise alignment to the objects? 3) Describe at least 4 classification of Insert toolbar 4) Describe contents of Document Toolbar 5) Use of Properties toolbar. 6) Describe Dreamweaver’s status bar and guides. 7) Describe the tools included in the status bar which are used for editing page content. 8) Explain how resizing is done in panel dock

B. Sc. (MGA)

17

9) Differentiate between expanded and collapsed mode 10) Describe file panel with is menus.

Check your progress 1 Elements of Dreamweaver workspace. A.DocumentTab

B.Document Toolbar

C.Application Bar

D.Workspace Switcher

E.Insert Panel

F.Coding Toolbar

G.Panel Group

H.Property Inspector

I.Code View

J.Design View

K.File Panel

View

Toolbars

Style Rendering

Observe the changes workspace by toggling various options of workspace switcher. Dreamweaver logo, Menubar, Layout button Insert, CSS styles, AP elements, Business catalyst, files and assets

Check your progress 2 Document toolbar consist of buttons of Code, Split, and Design view, quick links to ‘Live Code’ and ‘Live View’, a button to check browser’s compatibility and common actions such as previewing in a browser, refreshing the design view, Title of the current document and File Management Button. By using Snap to Grid or Snap to Guides options. By using status bar or by enabling magnification from View menu Check options of status bar by selecting any element from document. List Common, Layout, Forms, Spry , In Context Editing , Data, Text, Favorite, Server-code

Check your progress 3 Select various tags from webpage and list down their properties from Properties Inspector. Insert, CSS styles, AP elements, Business catalyst, files and assets, databases, bindings, server behavior

B. Sc. (MGA)

1

Site management and site view Local, Remote, Testing, Repository. Local site stores data on local system whereas remote site is sitting on server which is accessible by internet.

1.8 FURTHER READING Dreamweaver manual www.tutorialized.com/tutorials/dreamweaver/1

B. Sc. (MGA)

19

UNIT 2 CREATING WEB PAGES Program Name : Bsc (MGA) Written by: Sonal Ramrao Dalvi SRAJAN Institute, Pune. Structure 2.0 Introduction 2.1 Unit Objective 2.2 Creating a New Web Page 2.2.1 Setting Up a New Site in Dreamweaver 2.3 Opening, Saving and Closing Web Pages 2.3.1 Opening a page 2.3.2 Saving a Page 2.3.3 Creating a Close Button on Web Page 2.4 Previewing Web Pages 2.5 Summary 2.6 Key Terms 2.7 Questions and Exercises 2.8 Further Reading

2.0 INTRODUCTION Dreamweaver is a versatile Web editor that provides the creation, development and management of website. It is one of the easy and favorite tools to create web pages. In following unit, you will learn about the Webpages and how Dreamweaver can be used to create, edit, save and preview a Webpage. You will learn about the basic functions involved in the Webpage management.

2.1 UNIT OBJECTIVES After studying this unit you will be able to Create a Web page using Dreamweaver Open a Web page using Dreamweaver Save a Web page using Dreamweaver Create a close button for Web page Preview a Web page using Dreamweaver

B. Sc. (MGA)

2

2.2 CREATING A NEW WEB PAGE A Webpage is a hypertext document which is connected to the WWW i.e. World Wide Web. Webpages accessed by the Web browsers. Each Webpage is referred by its unique URL (Universal Resource Locator) on internet. A group of inter related webpages is called as ‘Website’. Dreamweaver helps you to create and manage your website. How you can do it is discussed under the following sub-sections. 2.2.1 Setting Up a New Site in Dreamweaver The term ‘site’ means a path to a local or remote location where all the website related documents, images and sub-folders are stored. By defining site you get complete advantage of Dreamweaver features. When we launch Dreamweaver, you will see the welcome screen as shown in Figure 2.1. From this screen from Create new column, click the Dreamweaver site button or from main tool bar as shown in Figure 2.2 Select Site New Site.

Figure 2.1 The Welcome Screen

Figure 2.2 Site Menu

Alternatively, you can choose Manage Sites and the Manage Site dialog box will open, as shown in Figure 2.3.Here you can manage different Website setups. Let’s create a new site definition. Click the New button to start the setup process.

B. Sc. (MGA)

21

Figure 2.3 The Manage site Dialog Box

Now you will see the Site Setup dialog box, where you will enter all the details which are related to the site. You will see 4 tabs on left side of the dialog box. As shown in Figure 2.4 you will start entering details.

Figure 2.4 Site Setup Window

1. In Site tab you will enter Site Name 2. Browse Local Site Folder, where you want to save the site location on your computer system. This will be your root folder.

Now Select the Servers tab as shown in Figure 2.5, here you can set a server which will host webpages on the web. Right now you will create a basic Website, so you don’t need a server.

Figure 2.5 Server Selection Window

B. Sc. (MGA)

2

Next tab is Version Control, which is optional at this stage. So we will move to next Advanced Settings tab as shown in Figure 2.6. Select Default Image Folder. Dreamweaver will store all Website related images to this default folder. (Note: Here for convenience save image folder within your Local site folder)

Figure 2.6 Advanced Settings Tab

1. Click Save button to complete the Site creation. 2. You will now see the Manage Site dialog box.as shown in Figure 2.7, with your new site added to the current list of sites.

Figure 2.7 Manage Site Window with new site added

B. Sc. (MGA)

23

2.3 OPENING, SAVING AND CLOSING WEB PAGES 2.3.1 Opening a Page in Dreamweaver You have created a site. Now go to the Window Menu File (Short key F8) then Files palette will open. Look at the file palette in Dreamweaver you will see all the files that are currently in the folder.

Figure 2.8 The File Palette

To launch a page in Dreamweaver, simply double-click on page from file palette. You can also open a desired webpage as followChoose Page name

Right click

Open

When the palette is expanded, as shown in Figure 2.9, you will see two windows. The window on the right shows all the files in the web folder on the local system.

Figure 2.9 Expanded Palette

B. Sc. (MGA)

2

The window on the left shows all files on web server; this is how you will navigate the remote server later on. Click expand button again to contract the window to smaller palette . Alternatively you can open a page from File menu Choose File

Open or by simply clicking ‘ctrl + o’ from your keyboard

2.3.2 Saving a Page in Dreamweaver Saving a page in Dreamweaver is as same as you save any other document on your computer. To save a page follows these steps 1. Select File

Save

If webpage is untitled then a Save window will appear. 2. Enter a proper File name If you are creating a home page, name the file index.html 3. Select type of the document you want to save. 4. Click Save button.

Other way to save your page is ‘ctrl + s’ from your keyboard. 2.3.3 Creating a Close Button on the Web Page Now let us add a button on the webpage to close the webpage. You should have such a useful feature on your website. Regardless of the version of the Dreamweaver, you can make a close button by writing a simple JavaScript code. Follow these steps; 1. Open Dreamweaver and desired webpage in design view. 2. Select the position on webpage where you want to put the close button. At this point, your mouse cursor would be flickering at the spot clicked. 3. Now go to the Code view, you will see the whole HTML code of the Webpage. But locate the flickering cursor, where you want to put the close button code. 4. Write the code as follow Close the window

This code will then displays a text that reads Close the window .After clicking this current window will get closed. Now check in the browser by pressing F12. 5. Customize the link by adding button or image tag to it.

B. Sc. (MGA)

25



Where close_button.jpg is the name of image file.

Check your progress 1 List down the steps to create a new site setup List down the content of welcome screen. Check in how many ways a webpage can be opened? How to open a webpage from file palette? What JavaScript function you have to write to close a window?

2.4 PREVIEWING WEB PAGES You design your webpage in Dreamweaver’s design mode. The overall look of the webpage in design view is not similar to the actual look appeared in a browser. So it is always necessary to check appearance of webpages of a site in a browser and their performance. You can preview the webpage in following steps 1. Click the Preview in browser button on the Document toolbar: A list of installed browsers is displayed, as shown in Figure 2.10

Figure 2.10 Preview window

You can also choose File

B. Sc. (MGA)

Preview in Browser as show in Figure 2.11

2

Figure 2.11 Preview Option from File menu

2. Select the browser from the list: Dreamweaver opens your webpage in the selected browser for preview. Short-key for previewing is F12. Tips: You can edit the browser list by choosing Edit Browser list from the drop-down list to display the Preferences dialog box. From there, you can add and remove browsers and assign keyboard shortcuts to them.

2.5 SUMMARY •

A Webpage is a hypertext document which is connected to the WWW i.e. World Wide Web. Webpages accessed by the Web browsers.

•

A group of inter related webpages is called as ‘Website’.

•

You can create new pages or open existing pages. •

You can save pages.

•

You can preview the webpage in browser and test how they perform.

2.6 KEY TERMS • Palette: It is a complete range of resources or options which can be used for any application.

B. Sc. (MGA)

27

• Database: It is assimilation of logically- related records or files put together into a common category that provides data for one or more users. • Dynamic site: It is website that shows information that changes using server side coding, usually with information retrieved from database.

2.7 END QUESTIONS: 1. Why creating Site is important? 2. How will you save your Webpage in Dreamweaver? 3. List the steps involved in creating a Close button on the Webpage 4. List down steps to create a new site 5. Create a dummy site and add a page to it which will contain a close button. 6. How will you open a page in Dreamweaver? 7. Explain the various steps involved in previewing a page in a browser.

Check your progress 1 Steps to create a new site setup 1. In site setup window - Enter site name 2. Browse local folder 3. From advanced setting tab, select default image folder. 4. Click save button Content of welcome screen1. Option to open recent files 2. Create new document types 3. Top features videos 4. Help 5. New features 6. Resources We can open file in various ways, one of them is ‘Ctrl+o’ Double click on desired webpage or right click

open

javascript:window.close()

2.8 FURTHER READING

B. Sc. (MGA)

2

www.adobe.com/go/learn_dw_comm08_en.

UNIT 3 USING TEXT Program Name: B.Sc. (M.G.A.) Written by: SRAJAN Institute, Pune Structure: Structure 3.0 Introduction 3.1 Unit Objectives 3.2 Adding Headings 3.3 Adding Paragraphs 3.4 Aligning Paragraphs and Headings 3.4.1 Indenting Entire Paragraphs 3:5 Inserting Text 3.5.1 Cutting, Copying and Pasting 3.5.2 Using Drag and Drop 3.5.3 Inserting Text from Other Text Applications 3.6 Formatting Text 3.6.1 Font Size 3.6.2 Font Color 3.6.3 Font Type 3.6.4 Styling Your Text 3.7 Inserting Special Characters 3.8 Summary 3.9 Key Terms 3.10 Questions and Exercises 3.11 Further Reading

3.0 INTRODUCTION Dreamweaver offers several features that enable you to create and enhance a Web page. Web pages comprise both text and graphics. This unit will be focusing on how to use Dreamweaver applications on textual content. In this unit, you will learn how to classify text into paragraphs and headings. You will learn about the alignment techniques. The unit goes on to explain how text is inserted and formatted using various features offered by Dreamweaver. You

B. Sc. (MGA)

29

will also learn how to insert special characters that are not available on your keyboard to your Web page.

3.1 UNIT OBJECTIVES After going through this unit, you will be able to: Insert new paragraphs and headings and align them in your Web page using Dreamweaver Insert the text with various options made available by Dreamweaver Format text as per your requirements Insert special characters to your Web page using Dreamweaver

3.2 ADDING HEADINGS In HTML document, the content text is mostly composed of headings and paragraphs. Headings isolate and introduce major sections of the document, just as a newspaper uses headlines to announce a story and subheads to highlight essential details. HTML has six levels of headings; the syntax for the heading tags is , where n is a number from 1 to 6. The largest heading is and the smallest is . Dreamweaver is proficient in outputting several types of Web pages, e.g., ASP, ColdFusion, and so on. However, after the page has been executed on the application server, straight HTML is returned to the visitor's browser. So even though you will find numerous references to HTML pages throughout this unit, understand that even though the pages may be stored as ASP pages or other types, HTML is the ultimate result. Different from a word processing program, headings in HTML are not linked to any specific point size. Without CSS targeted rules, headings in a Web document are sized in relation to one another and their final sizes depend on the browser used by the viewer. The sample headlines in Figure 3.1 illustrate the basic headings as rendered through Dreamweaver and as equated to the default paragraph font size. As you can see, some headings are rendered in a size smaller than that used for the default paragraph. Headings are usually presented with a boldface attribute.

Figure 3.1 Six Levels of Headings in HTML

B. Sc. (MGA)

3

In Dreamweaver, there are various techniques to set text according to a particular heading size. In all cases, first you have to select the text you want to change. If you are styling a single line or paragraph as a heading, just position the cursor anywhere in the paragraph to select it. If you want to alter more than one paragraph, click and drag out your selection. You cannot use more than one heading level in a single paragraph. In other words, you cannot have an heading tag in the same line as that of a heading. Furthermore, headings belong to a group of HTML text tags called block elements. All block elements are rendered with a paragraph return both at the beginning as well as at the end, which isolates or blocks the text. To work around both of these constraints, use cascading style sheets (CSS) to achieve the effect of varying sizes for words within the same line or lines close to one another. After the text for the heading is selected, choose your heading level in one of the following ways: •

Choose Format. Select Paragraph Format and then one of the Heading (1 through 6) from the submenu.

•

Click the Heading 1, Heading 2 or Heading 3 button from the Text category of the Insert panel.

Figure 3.2 Paragraph Format Menu

Figure 3.3 From Insert Panel

•

Make your selection from the text Property inspector HTML tab. (If it is not open already, select Window and then Properties. If necessary, choose the HTML tab instead of CSS.) In the text Property inspector, open the Format drop-down list, as shown in Figure 3.2 and choose one of the six headings.

B. Sc. (MGA)

31

Figure 3.4 Accessing Heading Levels through Format Option

You can also use keyboard shortcuts for assigning headings. Headings 1 through 6 correspond to Ctrl+1 through Ctrl+6. The Paragraph option is rendered with Ctrl+ Shift+ P. You can also remove all formatting with Ctrl+ O. Headings are often used in a hierarchical fashion, starting from the largest to the smallest but you do not have to do it that way. You can have a line flowed by an paragraph, if that is what your design needs. However, be careful while using the smallest headings, to ; they are likely to be difficult to read on any resolution higher than 800 x 600.

Check your progress 1 What are the various levels of headings that Dreamweaver offers? How are headings measured in HTML? Can you use more than one heading level in a single paragraph? What are the short keys to assign headings? What are block level elements?

3.3 ADDING PARAGRAPHS Generally the main part of text on any Web page is composed of paragraphs. Paragraphs in HTML are indicated by the and pair of tags. When your Web page is processed, the browser formats everything between those two tags as one paragraph and renders it to fit the user's screen. Word wrapping is done, as required, at the margins. Any extra line breaks and unnecessary whitespaces the HTML code are ignored. Dreamweaver starts a new paragraph every time you press Enter (Return) while writing text in the document window. If you have the Code view or the Code inspector open while working, you can see that Dreamweaver inserts the following code with each new paragraph:  

The code between the tags creates a non-breaking space that enables the new line to be visible. You would not see the new line if you only have the paragraph tags with nothing in between (neither a character nor a character entity such as   ;)

When you continue typing, Dreamweaver replaces the non-breaking space with your input, unless you press Enter (Return) again. You can easily change the format of the text, e.g., it can be altered from a heading to a paragraph. First, select the text you want to alter. Then, in the Property inspector's HTML tab, open the Format drop-down list and choose Paragraph.

B. Sc. (MGA)

3

You can also choose Format, then Paragraph Format and then Paragraph from the menu or you can use the keyboard shortcut Ctrl+ Shift+ P. All paragraphs are initially rendered on the page in the default font at the default size. The user can label these defaults through the browser preferences. If you want to change the font name or the font size for selected paragraphs, you can use the cascading style sheets. Remember that you can always use the Tag Selector on the status bar to select and highlight any tag surrounding your current cursor position. This method makes it easy to see exactly what a particular tag is affecting. Like other programs, Dreamweaver has cut, copy and paste options as well as undo and redo commands. In Dreamweaver, there is a relationship between the Design and Code views of the Document window, giving it a special feature for copying and pasting text and code. This will be discussed in the subsequent sections.

Check your progress 2 How can you create a paragraph in your Web page using Dreamweaver? What is the function of inserting non-breaking space in between paragraph tags? How to change format of the text? How to create a paragraph using a keyboard shortcut? What are the uses of the paragraph?

3.4 ALIGNING PARAGRAPHS AND HEADINGS You can easily align paragraphs and headings in Dreamweaver, just as you can in a traditional word processing program. CSS supports the alignment of text to the left or right margin, to the center of the containing element or even text justify, which causes text to be flushed against both left and right margins, creating a block-like appearance. Like a word processing program, Dreamweaver aligns text one paragraph or a heading at a time. You cannot left align one word, center the next and then right align the third word in the same paragraph. When declaring an alignment while defining a CSS rule, select a value from the Text Align list found in the Block category of the CSS Rule Definition dialog box. To use the Property inspector, switch to the CSS tab and choose any of the Alignment buttons as shown in Figure 3.5. If a CSS rule is already selected, the appropriate property for text alignment is applied to the rule. If not, then the New CSS Rule dialog box appears and you are required to specify the type and name of the selector.

B. Sc. (MGA)

33

Figure 3.5 Text Alignment Using CSS

Headings are aligned using the same methods. The alignment keyboard shortcuts are shown in Table 3.1. Table 3.1 Keyboard Shortcuts for Alignment

Alignment

Windows Shortcut

Mac Shortcut

Left

Ctrl +Alt + Shift + L

Command + Option+ Shift+ L

Centre

Ctrl +Alt + Shift + C

Command + Option+ Shift+ C

Right

Ctrl +Alt + Shill + R

Command + Option+ Shift+ R

Justify

Ctrl +Alt + Shift + J

Command + Option+ Shift+ J

3.4.1 Indenting Entire Paragraphs HTML offers a tag that enables you to indent whole paragraphs, such as inset quotations or name and address blocks. Not too surprisingly, the tag used is called the tag. Dreamweaver gives you instant access to the tag through the indent and outdent buttons located on the HTML tab of the Property inspector, as shown in Figure 3.6.

Figure 3.6 Paragraph Indention

To indent one or more paragraph, select them and click the indent button on the Property inspector. Paragraph can be indented multiple times; each time you click the indent button, another ... tag pair is added. Note that you cannot control how much space a single indents a paragraph; it is determined by the browser. You also have the option of indenting your paragraphs by the menus by choosing Format option and then clicking on the indent button. You can also add the tag by clicking the Block Quote button in the Text category the Insert panel. If you find that you have over indented, use the outdent button also located on the Property inspector. The outdent button has no effect if your text

B. Sc. (MGA)

3

is already at the left edge. Alternatively, you can choose Format option and then click on the outdent option. You can tell how many tags are being used to create a particular look by placing your cursor on the text and looking at the Tag Selector.

3.5 INSERTING TEXT You have already seen how you can position the cursor on the page and directly enter text. In this sense, Dreamweaver acts like a word processing program rather than a page layout program. On a blank page, the cursor starts at the top-left corner of the page. Words automatically wrap to the next line when the text exceeds the right margin. Press Enter (Return) to end the current paragraph and start the next one. By default, if you press Enter (Return) after you type in text formatted as a heading, the next line is formatted as a paragraph. This makes sense because you do not normally want to follow one heading with another. You can, however, control this by setting Dreamweaver Preferences. Select Edit then Preferences, click on the General category and then deselect the Switch To Plain Paragraph after Heading option. Now, pressing Enter (Return) after heading creates another heading. 3.5.1 Cutting, Copying and Pasting Text can be moved from one place to another—or from one Web document to another—using the standard cut-and-paste techniques. Before cutting or copying anything, you must select it. Select by clicking the mouse at the beginning of the text you want to cut or copy, drag the highlight to the end of your selection and then release the mouse button. Here are some other selection methods: • •

• •

• •

•

Double click a word to select it. Move the pointer to the left margin of the text until the pointer changes to a right-facing arrow. Click once to highlight a single line. Click and drag down the margin to select a group of lines. Position the cursor at the beginning of your selection. Hold down the Shift key and the click once at the end of the selection. Select everything in the body of your document by using Edit and then click on Select All or use the keyboard shortcut Ctrl +A (Command +A). Use the Tag Selector in the status bar to select text or other objects contained within specific tags. You can also select text by holding down the Shift key and using the right or left arrow key to select one character at a time. You can also hold down Ctrl + Shift (Command + Shift) and press the right or left arrow key to select one word at a time. Hold down the Shift key and then press the up or down arrow key to select a line at a time. Pressing Ctrl + Shift (Command + Shift) as you press the up or down arrow key selects a paragraph at a time.

B. Sc. (MGA)

35

Dreamweaver provides quick access to the most common editing commands, such as cut, copy and paste with the help of standard toolbar. To enable the toolbar, select View, then Toolbars and then Standard. If you want to move a block of text, first select it, click on Edit and select the Cut button on the Standard toolbar or the keyboard shortcut Ctrl +X (Command +X). This sequence places the text on your system's clipboard. To paste the text, move the pointer to the new location, click once to place the cursor and then select Edit, then Paste or use the keyboard shortcut Ctrl +V (Command +V). The text is copied from the clipboard to its new location. You can continue pasting the same text from the clipboard until another block of text is copied or cut. For copying text, the procedure is much the same. Select the text using one of the preceding methods. Now select Edit and then click on the Copy button on the Standard toolbar or press Ctrl +C (Command +C). The selected text is copied to the clipboard and the original text is left in place. Now, position the cursor in a new location and select Edit and Paste (or use the keyboard shortcut). 3.5.2 Using Drag and Drop The other faster method for moving or copying text is the drag and drop technique. After you have selected your text, release the mouse button and move the cursor over the highlighted area. The cursor changes from an I-beam to an arrow. To move the text, click the selected area with the arrow cursor and drag your mouse to a new location. The arrow cursor now has a box attached to it, representing that it is carrying something. As you move your cursor, a bar (the insertion point) moves with you, indicating where the text will be positioned. Release the mouse button to drop the text. You can duplicate the text in the same manner by holding down the Ctrl (Option) key as you drag and drop the selected text. In this case, the box attached to the cursor is marked with a plus sign (in Macintosh computers, the box is the same size as the text selection and no plus sign appears). To completely remove text, select it and then choose Edit. Now press Clear or Delete button. The only way to recover the deleted text is to use the Undo feature. 3.5.3 Inserting Text from Other Text Applications In Dreamweaver, the paste command can also insert text from another program into Dreamweaver. If you cut or copy text from a file in any other program whether it is a word processor, spreadsheet or database program— Dreamweaver inserts it where the cursor is positioned. However, the results of an ordinary paste operation may be undesirable. To control the inserted text more closely, use Paste Special. Paste Special allows you to choose how you would like to insert the copied text into your document. Choose from a range of options that give you the flexibility to add straight text, structured text, structured text with simple formatting or fully formatted text. The options can be preset in the Copy/Paste category of the Preferences and adjusted on a case-by-case basis.

B. Sc. (MGA)

3

After you have copied text in another application, choose Edit and then select Paste Special. You are presented with a dialog box with four options: •

•

•

Text Only: It pastes completely unformatted text. If the original text is formatted, all formatting, including line breaks and paragraphs, will be removed. Text With Structure: It paste text that retains structure, but does not retain basic formatting. For example, it can paste text and retain the structure of paragraphs, lists, and tables, without retaining bold, italics, and other formatting. Text With Structure Plus Basic Formatting: It adds simple formatting, such as bold, italic and underline to the structured text. If the text is copied from an HTML document, the pasted text retains all HTML text style tags, including , , , , , and .

•

Text With Structure Plus Full Formatting: The pasted text keeps all structure and formatting. If the copied text retains inline CSS styles, Dreamweaver pastes them as well.

Two other options are available for modifying your paste output. •

Retain Line Breaks: This option maintains line breaks in the pasted text; if you choose Text Only, this option is disabled.

•

Clean Up Word Paragraph Spacing: This option works with the Text With Structure and Text With Structure Plus Basic Formatting options to remove additional space between paragraphs.

If you use the standard Paste command, Dreamweaver inserts only plain unformatted text. Any bold, italics or other styling in the original document is not retained in Dreamweaver. Paragraph breaks, however, are retained and reproduced in two different ways. A single paragraph return becomes a line break (a
tag) in Dreamweaver, whereas text separated by two returns is formatted into two HTML paragraphs using the ... tag pair. If you need to import a great deal of text and want to retain as much formatting as possible, you can use another text application, such as Microsoft Word, to save your text as an HTML file. Then, open that file in Dreamweaver with the Import option and then select Word HTML command. Copying and Pasting Code As mentioned earlier in this unit, Dreamweaver includes a couple of twists to the standard cut, copy and paste operations. Dreamweaver's design and code views enable you to copy and paste both text and code. Put simply, in order to copy only text from Dreamweaver to another application, use the Edit and then Copy command in Design view; to copy both text and code, use the Edit and then Copy command in Code view. Within Dreamweaver itself, content copied from Design view and pasted in Code view, using Edit and Paste options, appears as plain text

B. Sc. (MGA)

37

without any code. To insert text and code, you would need to use the Edit and Paste Special commands. Select either of the two options that include formatting: Text With Structure Plus Basic Formatting or Text with Structure plus Full Formatting. Undo , Redo and the History Panel The Undo command enables you to undo any mistake you might have made or in case you change your mind regarding the content. The Undo command reverses your last action, whether you had changed a link, added a graphic or deleted the entire page. Similarly, the Redo command enables you to reverse your Undo actions. To use the Undo command, choose Edit, select Undo or select Undo from the standard toolbar or press the keyboard shortcut Ctrl +Z (Command +Z); any of these commands undoes a single action at a time. Dreamweaver displays all your previous actions on the History panel, so you can easily see what steps you took. Choose Window and then select History to view the History panel. To undo multiple actions, drag the slider in the History panel up to the last action you want to keep, or just click on the slider track at that particular action. Dreamweaver's Undo command allows you to back up as many steps as can be set in Maximum Number Of History Steps option that is found in the General category of Preferences. By using this feature, you can even undo actions that took place before a document was saved. Note that the History panel has additional features besides multiple applications of the Undo command. The complement to the Undo command is the Redo command. To reverse an Undo command, choose Edit and then select Redo or click the Redo button on the Standard toolbar or press Ctrl +Y (Command +Y). When you are trying to decide between two alternatives, such as two different images, replace one choice with another and then use the Undo/Redo combination to go back and forth between them. As Dreamweaver replaces any selected object with the current object from the clipboard, even if one is a block of text and the other is an AP element, you can easily view two separate options with this trick. The History panel enables you to apply this procedure for any number of steps. A variation of the Redo option is the Repeat option. When your last action is an undo command, Edit menu shows the Redo option. However, if the last action you performed is not an Undo command, the Edit menu shows the Repeat command, which allows you to repeat your last action. You can use the same button on the standard toolbar to Repeat and Redo. In addition, the Repeat option has the same keyboard shortcut as Redo: Ctrl +Y (Command +Y). The Repeat option is useful, for example, when you need to create several links to the same location. To do this, create the first link and then select the next text you want link. Now use the Repeat command to add the next link.

Check your progress 3 What is the Windows keyboard shortcut for left alignment of a paragraph or a heading? How can you declare an alignment while defining a CSS rule?

B. Sc. (MGA)

3

What are the functions of outdent and indent buttons? Give any two methods of selecting text for copying. What are the various options available in Dreamweaver for copying text from another application?

3.6 FORMATTING TEXT Dreamweaver puts most of the tools you need for formatting text according to your requirements, right at your fingertips with the help of the Property inspector or the Tag inspector. Nowadays, designers have moved to using cascading style sheets and away from hardcoding text with and other tags. All versions of the major Web browsers support CSS and text formatting enjoys the most widespread browser support of all the CSS rules. 3.6.1 Font Size The best practice for setting font sizes with CSS is to apply an existing style—declared in either an internal or external style sheet—to a tag or selection of text and then selecting the new size from the CSS tab of the Property inspector, as shown in Figure 3.7. If no style has been previously attached to the selection, Dreamweaver displays the New CSS Rule dialog box for you to identify the new style selector, name it and decide where to store it. After the style has been created, it is automatically applied to the current selection.

Figure 3.7 Formatting Font Size Using CSS

In CSS, the option called Font-Size Property controls the size of the text. We can declare it in following ways: tag

p { font-size: 36px; }

Id

#navbar {font-size: 1.2em ;}

class

.foot_note {font-size: xx-small ;}

As you can see, the font-size value may be a precise value (36px), a percentage (1. 2 em) or an absolute-size keyword ( xx-small) . In addition to pixels (abbreviated as px), CSS also supports other measurement systems, e.g. points (pt) , inches (in) , centimeters (cm) , millimeters (mm) and picas (pc) .

B. Sc. (MGA)

39

Many designers advocate using pixel measurements as a way to achieve a consistent look and feel across browsers. Broadly, CSS provides three different measurement systems for sizing text: em, ex and percentage (%). All three undertake that a specific font size has been declared for the parent or containing tag; if no specific font size is defined, the default setting of the parent's font size is used for comparison. A font size of 1em is equivalent to whatever the containing tag's font size is. For example, if the containing tag has a font size of 20px, a selector with a font size set to 1.2em is rendered as 24px because 20 times 1.2 is equal to 24. Percentage measurements work exactly the same way as em measurements 1.2% is the same as 1.2em. The ex-measurement, however, is quite different. Short for x-height, the ex-measurement system is based on the height of a lowercase x in the current font. Character heights vary quite substantially from one font to another. At 72 pixels, an x in Times New Roman font is about 32px high whereas in Arial, it is almost 40px. Due to these differences, the ex-measurement system is rarely used. There are seven font-size keywords, which correspond to the HTML size attribute values 1 to 7. The two are similar in that both rely on the browser for final size interpretation and the sizes for both are relative to each other. CSS specifications include two additional keywords: larger and smaller. These keywords are obviously intended to be used in relation to the current font size. For example, in a tag where the font-size value is 10px, any text whose font-size value is larger would be rendered at about 12px, whereas a smaller value would display text at 8px. 3.6.2 Font Color Unless you assign a color to the text on your Web page, the browser uses its own default, typically black. To change the font color for the entire page, choose Modify option, click on the Page Properties and select a new color from the Text Color swatch in the Appearances (CSS) category as shown in Figure 3.8.

Figure 3.8 Text Color Swatches

When you are done, the style is written into an internal style sheet for body, td and th selectors; as follow

B. Sc. (MGA)

4

body,td,th { color: #0F0; }

Otherwise, the color attribute is added to the tag. You can also apply color to individual headings, words or paragraphs that you have selected in Dreamweaver. As with the text size, when working with CSS, the best way to set a color for a selected tag or text range is to apply an existing style that includes the desired color. Font color is defined under the Type category of the CSS Rule Definition dialog or the color attribute of the Tag inspector's Relevant CSS category. Text color is expressed in either a hexadecimal color number or a color name. The hexadecimal color number is based on the color's red-green-blue value and is written like this: #FFFFFF The preceding example represents the white color. You can also use standard color names instead of the hexadecimal color numbers. In CSS, the same color attribute is used, but written somewhat differently: .pure {color: #FFFFFF ;} .fresh {color: green ;}

If you want to apply the same color that you have already used elsewhere it your site to your text, you can go to the Color category on the Assets panel (choose Window and then select Assets). Just select the text in the document window, select the desired color swatch in the Assets panel and click the Apply button in the Assets panel. Again you have several ways in which you can add color to your text in Dreamweaver. Click the color box in the Property inspector to display the color-picker, displaying a limited palette of colors. Clicking the System Color Picker wheel in the Color Picker as shown in Figure 3.9 enables you to choose from range of colors displayed in dialog box one. With either method, Dreamweaver will either add the new color to the current style or open the new CSS rule dialog box to allow you to create a new one.

Figure 3.9 System Color Picker

B. Sc. (MGA)

41

If you are using units in hexadecimal color values, you are free to enter the hex number directly in the Property inspector Color field, preceded by the by number sign or hash mark like this: #FF00FF. Dreamweaver also accepts the abbreviated format where each of the hexadecimal pairs are the same, so that #FF00FF is the same as #F0F. However, what if you come from a different discipline like print or graphic design? Dreamweaver can also translate RGB function notation. Hence, you can also use rgb (255, 0, 255) or rgb (100%, 0%, 100%). To keep it simple, you can simply use the standard color names like blue, red, magenta, and so on. If you approach your coloring task via the menus, selecting Format and then Color option takes you immediately to the Color dialog box. If you wish to use the Property inspector to color a portion of text, follow these steps: 1. Select the text you want to color or position the cursor where you want the new text color to begin. 2. From the Property inspector, you can: • Type a hexadecimal color number directly into the Text Color text field • Type a color name directly into the Text Color text field • Select the color box to open the Color Picker 3. If you choose to type a color name or number directly into the Text Color text field, press Tab or click on the document window. 4. After selecting the color box, select your colors from the palette of colors available. As you move your pointer over the color swatches, Dreamweaver displays the color and the color's hexadecimal number above. 5. For a wider color selection, open the Color dialog box by selecting the System Color Picker wheel in the upper-right corner of the Color Picker. 6. The New CSS Rule dialog box is displayed so you can assign your new color to a new CSS rule. To access the full-spectrum Color Picker in Windows, follow these steps1. Select your text or position your cursor where you want the new color to begin. 2. Choose the Format option and click on Color to open the Color dialog box as shown in Figure 3.10. 3. Select one of the 48 preset standard colors from the color swatches on the left of the Color dialog box or use either of the following methods: • Select a color by moving the Hue/Saturation pointer and the Luminance pointer. • Enter decimal values directly into either the Red, Green and Blue boxes or the Hue, Saturation and Luminance boxes.

B. Sc. (MGA)

4

4. If you want to create a custom color, you can add it to your palette by clicking Add To Custom Colors. You can add up to 16 custom colors. 5. Click OK when you are finished.

Figure 3.10 Customizing a Color

When you add a custom color to your palette in Windows, the new color swatch goes into the currently selected swatch or, if no swatch is selected, then it goes to the next available swatch. Make sure that you have selected an empty or replaceable swatch before clicking the Add To Custom Colors button. To clear the custom colors, first set the palette to white by bringing the Luminance slider all the way to the top. Then, click the Add To Custom Colors button until all the color swatch text fields are empty. As already discussed, Dreamweaver includes a Color Picker for selecting colors for all HTML elements: text, table cells and page background. Dreamweaver's Color Picker, like Adobe common user interface, offers a number of palettes from the context menu from which to choose your colors: Color Cubes, Continuous Tone, Windows OS, Mac OS and Grayscale. The most common choices for Web designers are Color Cubes and Continuous Tone, both of which display the 216 Web-safe colors common to the Macintosh and Windows palettes. You can toggle between these options by clicking the black arrow near the extreme top- right corner of the color picker box option as shown in Figure 3.9. Once you have opened the text Color Picker by selecting the color box on the Property inspector, the cursor changes into an eyedropper that can sample colors from any of the displayed swatches or from any color onscreen. Simply click the color box and drag the eyedropper over any graphic to choose a color. If you choose a color that lies outside the Web safe range, you have no assurances as to how the color will be rendered on the viewer's browser. Some systems select the closest color in RGB values while some use dithering (positioning two or more colors next to each other to simulate another color) to try to overcome the limitations of the current screen color depth. Therefore, if possible, it is better to stick to the browser-safe colors, especially while

B. Sc. (MGA)

43

coloring text. Select the Snap-To-Web Safe option in the Color Picker's context menu to automatically convert the colors you have chosen to the closest browser-safe color. Mac Users: Click on the System Color Picker button on the Dreamweaver Color Picker. The System Color Picker for Macintosh is far more elaborate than the one available for Windows. The Mac version has several color use: CMYK (for print-related colors), RGB (for screen-based colors), HTML (for Web-based colors) and Crayon (for colors with crayon-like texture). The CMYK, HTML and RGB systems offer you color swatches and three or four sliders with text-entry boxes; they accept percentage values for RGB and CMYK and hex values for HTML. Depending on your OS version, one or more of the color systems may have a Snap-To-Web color option for matching your chosen color to the closest browser-safe color. The Hue, Saturation and Brightness sliders also have color wheels. To access the full-spectrum Color Picker in Macintosh systems, follow these steps: 1. Select the text or position your cursor where you want the new text color to begin. 2. Choose Format option and then click on Color to open the Colors dialog box. 3. In the Macintosh Color Picker, the list of available pickers is displayed across the top of the dialog box like a toolbar, and each particular interface's options are shown below as they are selected. Choose a color picker by clicking on its icon in the top toolbar and create the color you want. (The number and type of color pickers vary from system to system, depending on the version of the operating system and whether you have added any third-party color pickers.) 4. When you have found the desired color, click OK. Along with the size and color, you can also specify the typeface in which you want particular text to be rendered. Because of HTML's unique way of handling fonts, Dreamweaver uses a special method for choosing font names for the selected text. Before you learn how to change a typeface in Dreamweaver, you should more fully examine how fonts in HTML work. 3.6.3 Font Type Page layout designers can incorporate as many different fonts as there are available to their own systems. Web layout designers, on the other hand, can use only those fonts that are available on their viewers' systems. If you choose Bodoni Bold Condensed font type for a paragraph, for instance, and put it on the Web, the paragraph will be displayed with that font only if that exact font is on the user's system. Otherwise, the browser uses the default system font, which is often Times or Times New Roman. Fonts are specified in CSS with the font-family property. As a designer can never be certain which fonts are available on the viewers' computers, HTML enables you to offer a number of options to the browser, as follows:

B. Sc. (MGA)

4

body (font-family: Arial, Helvetica, sans-serif ;}

Thus, the browser first looks for the Arial font type to use it for the enclosed text If Arial font is not there, the browser looks for the next font in the list, which in this case is Helvetica. If it fails to find any of the specified fonts listed, the browser uses whichever font has been assigned next in the category for the font, which is Sans Serif in this case. The W3C and some Web browsers recognize five main categories of fonts. Although Serif and Sans Serif are most commonly used, the most recent versions of Internet Explorer and Netscape Navigator support all five generic font categories. In some browsers, the users can even control which fonts are displayed for each category. The generic font categories include Serif, Sans Serif, Cursive, Monospace and Fantasy. These five font types have been discussed here. •

Serif: These fonts are well-known by serifs, i.e., small cross-strokes that appear at the ends of the main strokes of each character as shown in Figure 3.11.

Figure 3.11 Serifs in Times New Roman Font

Serif fonts tend to be slightly easier to read on paper, but more difficult to read when viewed on a screen. You may want to limit use of Serif fonts to headings or small blocks of text, unless your document is meant to be printed. Examples of Serif fonts include Times New Roman, MS Georgia and Garamond as shown below.

Times New Roman MS Georgia Garamond •

Sans Serif: These fonts are without serifs, meaning that the letters do not have finishing strokes at the top and the bottom. Sans Serif fonts are easier to read on a screen and so they are a good choice for large blocks of text within a Web page. Sans Serif fonts found on many computers include Arial, Helvetica and Verdana.

Arial Helvetica Verdana

B. Sc. (MGA)

45

•

Monospace: The distinguishing characteristic of Monospace fonts is that all their characters are of the same width. These fonts are typically used to depict code samples or in other circumstances that require characters to be precisely aligned. Commonly used Monospace fonts include Typewriter and Courier New.

Courier New Typewriter •

Fantasy: The characters in these fonts are highly decorative, but still represent letters and numbers (as opposed to pictures or symbols). As with Cursive fonts, you may not want to use these for large blocks of text, but rather employ them to lend emphasis or to set the tone for a page. Examples of Fantasy fonts include Curlz MT and Jokerman.

Curlz MT Jokerman •

Cursive: These fonts mimic writing in longhand with strokes joining adjacent letters in a word. They can be difficult to read onscreen; hence, you should avoid using large blocks of cursive text. These fonts are more appropriate for page banners or headings and help in providing an elegant tone for a Web page. Examples of Cursive fonts are Edwardian Script ITC and Lucida Handwriting.

XwãtÜw|tÇ fvÜ|Ñà \gV Lucida Handwriting

Selecting a Font Type The process for assigning a font type to a range of text is similar to that of assigning a font size or color. Instead of selecting one font type, however, you usually select one-font series. The series could contain three or more fonts as previously explained. Font series are chosen from the font list in the CSS Rule Definition dialog's Text category, the Property inspector CSS tab or through menu item. Dreamweaver enables you to assign any font on your system to a font series. To assign a specific font series to your text, follow these steps:

B. Sc. (MGA)

4

1. Select the text or position your cursor where you want the new text font to begin. 2. From the Property inspector CSS tab, open the drop-down list of font names. You can also display the list of fonts by choosing Format Font option from the menu bar. 3. Select a font from the font list. To return to the system font, choose default font from the list. It is also possible to enter the font name or font series directly in the Property inspector's Font drop-down list box. Editing the Font List With the Edit Font List dialog box, Dreamweaver gives you a point-andclick interface for building your font lists. After the Edit Font List dialog box opens, you can delete an existing font series, add a new one or change the order of the list so that your favorite ones are on the top. Figure 3.12 shows the sections of the Edit Font List dialog box: the current font list, the available fonts on your system and the chosen fonts. The chosen fonts are the individual fonts that you have selected to be incorporated into a font series.

Figure 3.12 Dreamweaver's Edit Font List Dialog Box

Follow these steps to construct a new font series and add it to the font list: 1. To open the Edit Font List dialog box, either expand the Font drop-down list in the Property inspector and select Edit Font List or choose Format option, click on the Font option and select Edit Font List. 2. If the Chosen Fonts box is not empty, clear the Chosen Fonts box by clicking the Add (+) button at the top of the dialog box. You can also scroll down to the bottom of the current Font List and select Add Fonts In List Below option. 3. Select a font from the Available Fonts list. The font categories, such as Sans Serif and Cursive, appear at the end of the Available Fonts list. 4. Click the j button to transfer the selected font to the Chosen Fonts list. 5. To remove a font you no longer want or have chosen by mistake, highlight it in the Chosen Fonts list and click the k" button.

B. Sc. (MGA)

47

6. Repeat steps 3 through 5 until the Chosen Fonts list contains the alternative fonts you want. 7. If you want to add another separate font series, repeat steps 2 through 6. 8. Click OK when you have finished adding fonts. To change the order in which font series are listed in the Font List, follow these steps: (i) In the Edit Font List dialog box, select the font series that you want to move. (ii) If you want to move the series higher up the list, click the up arrow button at the top right of the Font List. If you want to move the series lower down the list, click the down arrow button. To remove a font series from the current Font List, highlight it and click the Remove (-) button at the top left of the list. Remember that the fonts that you want to include in your font list must be available on your system. In order to check if a particular font is available on your computer, type the name of the font into the text field below the Available Fonts list and press Enter (Return). 3.6.4 Styling Your Text For the most part, Web designers nowadays use CSS to style their text. Text styles can be applied to heading or paragraph tags to achieve a site-wide change of appearance, such as making all hl headings red and 200% high, or to specific sections of a page through class or ID selectors. All the techniques covered in this section can be applied to dynamically inserted text. Depicting Various Styles HTML contains two types of style tags: logical tags and physical tags. 1. Logical tags: It denote what the text represents (such as code, a citation or something typed from the keyboard) rather than what the text actually looks like. The final displayed appearance of logical styles is up to the viewer's browser. 2. Physical tags: It describes what text looks like; these include tags for bold, italicized and underlined text. By default, Dreamweaver, in recognition of current Web standards, no longer supports physical tags. If you highlight a section of text and choose the Bold button from the HTML tab of the Property inspector, Dreamweaver wraps the selection with a tag. If you choose the Bold button from the CSS tab of the Property inspector, Dreamweaver adds a font-weight bold property to the currently applied style rule. The only way to get a bold button is by changing the Dreamweaver Preferences. Logical styles can be described as structural. They are useful when you are working with documents from different sources—reports from different research laboratories around the country, for instance—and you want certain conformity of style. If you are trying to achieve a particular look using logical styles, you should consider using the cascading style sheets feature instead of,

B. Sc. (MGA)

4

or in addition to, logical styles. You can apply logical style tags and then use CSS to define how that style will look when viewed in a browser. In Dreamweaver, logical style tags can be accessed by choosing Format option, then clicking on Style and selecting from the available style name options. A checkmark appears next to the selected tags. Style tags can be nested (put inside one another) and you can mix such tags within a word, line or document. You can have a bold, strikethrough, variable style; or you can have an underlined and mentioned style. You can also add the most commonly used styles—bold, italics, strong and emphasis-by clicking on the appropriate button in the Text category of the insert panel. Figure 3.13 shows how styles get rendered in chrome browser. These styles may further vary in other browsers and other browser versions.

Figure 3.13 Various Style Tags in Dreamweaver, Internet Explorer and Maxilla Firefox

Two of the physical style tags—bold and italics—are controlled by the Preferences setting. Although you can use the and tags to style your text, it is considered better practice to use the equivalent logical tags, and . Dreamweaver enables you to specify which tags to use via tin Use and In Place Of And option under the General category of Preferences. If this option is checked (set as default), and tags are used to code bold or italic text, respectively; otherwise, and tags are used. To actually apply bold or italic formatting, select the text and click the Bold or Italic button on the Property inspector's HTML tab, or use the keyboard shortcuts Ctrl +B (Command +B) and Ctrl +I (Command +I), respectively. Buttons for bold, italic, strong and emphasis are also available in the Text category of the Insert panel. One physical style, the underline tag , is available only under the Format Style menu. Use this tag with caution. By default, browsers use underlining to designate links; if you style text with an underline, users expect that text to link somewhere. It is good practice to restrict use of underlining to hotspots and to avoid underlining as a way to highlight text, even for headings. Table 3.2 lists out the various physical and logical tags: Table 3.2 HTML Tags for Text Formatting

B. Sc. (MGA)

49

Style

Tag

Description

Bold



Test is rendered with a bold style.

Italic



Test is rendered with an italic style.

Underline



Text is rendered underlined.

Strikethrough



Used primarily in edited documents to depict edited text. Usually rendered with a line through the text.

Teletype



Used to represent an old style typewriter. Rendered in a Monospace font, such as Courier.

Emphasis



Used to highlight certain words relative to the surrounding text. Most often rendered in italics.

Bi-Directional Override



Specifies the direction of text display

Bi-Directional Isolation



Represents text that must be isolated from its surrounding for bidirectional text formatting. It allows embedding a span of text with a different, or unknown, directionality

Big



Specifies big text

Small



Specifies small text

Preformat



Specifies preformatted text

Strong



Used to strongly highlight certain words relative to the surrounding text. Most often rendered in boldface.

Code



Used to depict programming code, usually in a Monospace font.

Variable



Used to mark variables in programming code. Most often displayed in italic.

Keyboard



Used to indicate what the user should input. Often shown in a Monospace font, sometimes in boldface.

Citation



Used to mark citations, references, and titles. Most often displayed in italic.

Definition



Used to denote the first, defining instance of a term. Usually displayed in italic.



Used to denote deleted text, to aid in document authoring and editing. You can often find these tags in documents imported from Word HTML files with the Track Changes feature on. Although not fully supported in some browser versions, this style is typically depicted in the form of a strikethrough line.

Deleted

B. Sc. (MGA)

5

Inserted



Used to denote inserted text. Like the deleted style, this is used during the authoring process to keep track of the changes. You can often find these tags in documents imported from Word HTML files that used the Track Changes feature. The style is usually depicted as underlined text.

Using the Tag The is used to contain any address. This tag rendered as italicized text by the browsers, the ... tag pair often marks the signature and e-mail address of a Web page's creator. If you are applying the tag to multiple lines, use
tags to form line break. The following example shows the proper use of the tags: Director,
School of Continuing Education,
Y.C.M.O.U., Nasik

This code is shown in a Web browser as follows: Director, School of Continuing Education, Y.C.M.O.U., Nasik To remove a standard style, highlight the styled text, choose Format, select Style and select the name of the style you want to remove. The checkmark disappears from the style name. To remove a nonstandard tag such as choose the tag in the Tag Selector and right click (Control + click) to open the context menu; then select Remove Tag. Adding Abbreviations and Acronyms There are two other tags worth noting designate abbreviations, ... and acronyms, .... The abbreviation or acronym is enclosed within the tag pair. Both tags include a title attribute, which is used to specify the full text of the abbreviation or acronym. The following code shows examples of both tags: Inc. Y.C.M.O.U

Chavan

Maharashtra

Open

The and tags are relatively new and are not widely used. These tags are not intended to actually change the visual style of the text in a browser, but instead they enable programs that process the document to clearly identify acronyms and abbreviations. For example, words marked as abbreviations allow the browsers to read the expanded word, rather than

B. Sc. (MGA)

51

sounding out the abbreviation. If recognized as an abbreviation, the letters Pa could be read as Pennsylvania rather than as the word pa. This tag could also be used to provide alternate text for search engines, spell checkers and translation programs. In Dreamweaver, you can insert acronyms or abbreviations by clicking the Acronym or Abbreviation button on the Text category of the Insert panel. You can also choose the appropriate command from the Insert option by selecting HTML and then Text Objects menu. These commands open a dialog box where you can enter the expanded text for the acronym or abbreviation. While developing your Web pages, you may want to insert special characters, such as copyright or trademark symbols, currency signs, etc. that do not appear on your keyboard. The Text category of the Insert toolbar lets you use a variety of symbols and international characters quickly by clicking on an icon.

3.7 INSERTING SPECIAL CHARACTERS Sometimes the content of a website demands use of some special characters such as for depicting the currency or mathematical symbols. In dreamweaver you have multiple ways to add it. 1. You can insert special character from Insert panel as shown in Figure 3.14. Here you can see generally used speacial characters such as Copyright, Yen, Euro and you can insert other special characters by clicking Other, which is the last option in the menu. Insert Panel HTML Special Characters

Figure 3.14 From Insert Panel HTML Menu

2. To insert special characters, choose Text category from the menu on the Insert Panel, as shown in Figure 3.14.

B. Sc. (MGA)

5

Figure 3.15 Insert Panel’s Text Category

If the Insert panel is not visible, choose Window option and click on the Insert button to open it, as shown in Figure 3.15. Now, you will be able to see the pallet, Some of the options allow you to add common HTML tags like bold and strong tags, lists or headings. Some of these can also be applied using the Property inspector. Text category list also features some of the less frequently used tags like , for definition list and Definition term respectively. By clicking the down arrow of the ‘Characters’ on the Insert Text toolbar, new pop up menu will get displayed as shown in Figure 3.16 . It will allow you to insert some general purpose special characters that are not available on the keyboard. You can include a wide range of symbols and international characters. These special characters can be represented in your code by a special name or a number. For example copyright symbol can be written as ©.

Figure 3.16 Special Character Menu

When you click on the Other Characters option at the end of the Insert Text toolbar, it displays the Insert Other Character dialog box shown in Figure 3.17. If the character you want is listed in the menu, you can simply click on the character to place the character in the text content of your Web page.

B. Sc. (MGA)

53

Figure 3.17 Insert Other Character Box

You can select the required character or symbol by clicking on the same. Clicking will show the HTML code for the selected symbol in the Insert Text box. Let us consider an example. Here, the trademark, TM, symbol is selected and the HTML code for the same is (™). So you can use the HTML code of TM and write HTML code as below. This is our Trademark Name Lotus ™ Output of the above code will be

This is our Trademark Name LotusTM Check your progress 4 Which fonts are included in the generic font category? What is the function of tag? How do you select particular font color for your Web page? Why you should select color inside Web safe range? How to insert special characters that are not available on the keyboard?

3.8 SUMMARY • • • • •

Unlike a word processing program, headings in HTML are not linked to any specific point size. Headings belong to a group of HTML text tags called block elements. Dreamweaver starts a new paragraph every time you press Enter (Return) while composing text in the document window. All paragraphs are initially rendered on the page in the default font and the default size. To indent one or more paragraph, select them and click the indent button on the Property inspector.

B. Sc. (MGA)

5

•

• • • • •

•

You can tell how many tags are being used to create a particular look by placing your cursor on the text and looking at the Tag Selector. In Dreamweaver, words automatically wrap to the next line when the text exceeds the right margin. Text can be moved from one place to another--or from one Web document to another—using the standard cut-and-paste techniques. The Retain Line Breaks option maintains line breaks in the pasted text; if you choose Text Only option, this option is disabled. Dreamweaver displays all your previous actions on the History panel, so you can easily see what steps you took. In addition to pixels (abbreviated as px), CSS also supports other measurement systems, e.g. points (pt), inches (in), centimeters (cm), millimeters (mm) and picas (pc). Text color is stated in either a hexadecimal color number or a color name.

3.9 KEY TERMS • •

Cascading style sheets: It refers to a style sheet that defines various attributes related to Web page layout and is supported by all applications. Block elements: It refers to the elements that are rendered with a paragraph return both at the beginning as well as at the end and are thus, isolated from the rest of the text.

3.10 END QUESTIONS 1. 2. 3. 4. 5.

What is the function of the Dreamweaver Property inspector? How can you align paragraphs and headings in Dreamweaver? What are the various generic font types that Dreamweaver accepts? How can you specify font color using Dreamweaver? Write a short note on the insertion of the special characters on a Webpage using Dreamweaver. 6. Explain how headings are added on the Webpages using Dreamweaver 7. Discuss the various steps required to create a new font series and add it to the font list. 8. Explain the various options offered by Dreamweaver regarding text insertion from other text applications. 9. List down 5 text style tags with description. 10. Describe Abbreviation and acronym tags.

Answer to check your progress questions Check your progress -1: Dreamweaver offers six levels of headings; the largest heading is and the smallest is .

B. Sc. (MGA)

55

Headings in a Web document are sized in relation to one another and their final sizes depend on the browser used by the viewer. No, you cannot use more than one heading level in a single paragraph. Headings 1 through 6 correspond to Ctrl+1 through Ctrl+6. Block elements start on their own new line, and anything that follows them appears on its own new line. Check your progress -2: Dreamweaver inserts a new paragraph every time you press Enter (Return) while writing text in the document window. The   between the tags creates a non-breaking space that enables the new line to be visible. By using Format dropdown menu of the Property Inspector’s HTML tab. Keyboard shortcut Ctrl+ Shift+ P Generally the main part of text on any Web page is composed of paragraphs. Check your progress -3: Ctrl +Alt + Shift + L Select a value from the Text Align list found in the Block category of the CSS Rule Definition dialog box. Dreamweaver gives you instant access to the tag through the indent and outdent buttons located on the HTML tab of the Property inspector. Two methods for selection • Double click a word to select it. • Position the cursor at the beginning of your selection. Hold down the Shift key and the click once at the end of the selection. Pasting options are: • Text Only • Text With Structure • Text With Structure Plus Basic Formatting • Text With Structure Plus Full Formatting Check your progress -4: The generic font categories include Serif, Sans Serif, Cursive, Monospace and Fantasy. The is used to contain any address. Modify Page Properties Category Appearances(CSS) Text Color swatch and select a new color from it. If you choose a color that lies outside the Web safe range, you have no assurances as to how the color will be rendered on the viewer's browser. By using Insert Other Characters menu, you can insert special characters.

B. Sc. (MGA)

5

3.11 FURTHER READING Using Adobe Dreamweaver CS5 and CS5.5 http://guides.lib.umich.edu

UNIT 4 HYPERLINKS Program Name : Bsc (MGA) Written by: Sonal Ramrao Dalvi SRAJAN Institute, Pune. Structure 4.0 Introduction 4.1 Unit Objective 4.2 Introduction 4.3 Creating Hyperlinks 4.3.1 Eliminating Underlines from Links 4.3.2 Inserting URLs from the Assets Panel 4.4 Using a Named Anchor to Link within a Document 4.4.1 Addressing Types 4.4.2 Checking Links 4.5 Creating an E-mail Links 4.6 Refreshing the Page and Redirecting Users 4.6.1 Meta tag: Refresh 4.6.2 Window: setTimeOut Method 4.7 Summary 4.8 Key Terms 4.9 Questions and Exercises

4.0 INTRODUCTION You are familiar with how to create a site and webpages, make changes to it, formatting text and inserting special characters, and so on. In this unit, you will learn about the use of hyperlinks in a webpage. Hyperlinks are the links that, when clicked on, navigate the user to other documents located on the same server or some other location within a given document. In this unit, you will learn how to create a hyperlink from Asset panel and if required then how to eliminate the underline of a hyperlink by changing its style. You will learn to use named anchors to move back and forth in a particular document. You will also learn how to create an email link and how it is different from the regular hyperlinks. The unit goes on to explain the various methods used in

B. Sc. (MGA)

57

Dreamweaver by which you can refresh your webpage and redirect the users to a particular page after specific time.

4.1 UNIT OBJECTIVES: After studying this unit you will be able to Describe the meaning and use of hyperlinks. Create hyperlinks. Use a named anchor for linking images and text within a document. Create an e-mail link. Refresh the webpage. Redirect the user to a particular page within your website.

4.2 INTRODUCTION A webpage can contain various links that take you directly to other pages and even specific parts of a given page. These links are known as hyperlinks. Hyperlinks allow visitors to navigate between Web sites by clicking on words, phrases, and images. Thus you can create hyperlinks using text or images available on a webpage. Before going deep into hypertext, let’s see brief about URL first A URL is the internet address of a web page. Each page is represented by a unique URL’s, just like road addresses are unique to each place. They consist of an exact information set that leads the computer where to search for a website. As you supply extra information, the computer will take you to more precise pages of the website. Each time you will see the URL for the current webpage in the Address Bar of your web browser. Now let’s study format of a URL: http://www.ycmou.com/mod/url/view.php?id=41

The above URL consists of following parts: http is the protocol. Http stands for ‘hypertext transfer protocol’. We have one more protocol that is ftp, which stands for ‘file transfer protocol’. These protocols tell the computer system what action to take and direct the transfer of information from one computer system to another. In general,

B. Sc. (MGA)

5

you don’t have to enter http in the address bar when typing a URL, it will be assumed automatically. www (World Wide Web)is the service to be used on the Internet. It is typically www while it can be other things like “mail” or “info”. ycmou is the domain name. This is the name of the university, company, organization, or server that houses this web site. In this case, here it is Yashawantrao Chavan Maharashtra Open University .com is the domain suffix. It helps identify what type of site you are viewing, commercial or otherwise. There are a limited number of domain suffixes and each signifies a different type of site. In above case .com represents ‘commercial’. It includes most business and personal web sites. Examples include www.gmail.com or www.flipkart.com. Here are few other domain suffixes. .org represents nonprofit organizational associations or noncommercial organizations. .edu is used by educational institutions, like technical schools, colleges, and universities. Examples include Pitt’s address at www.pitt.edu and Penn State’s address at www.psu.edu. .net is used by networked organizations or internet service providers, web hosting companies like www.webtv.net or www.netzero.net. .mobi stands for mobile is reserved for websites designed for easy accessing on mobile devices. .co.in stands for Company in India mod/url are folders within main website. You could type www.ycmou.com in the address bar, but this would take you to the main/ index page. By typing in these two folder names, you can go directly to webpage of the precise location you desire within a larger website. view.php is a file name. Usually, files are the equivalent of a web page.

B. Sc. (MGA)

59

?id=41 here ? is a delimiter that enables a variable and value to be passed to the browser; In this parameter passing method, where ‘id’ is a variable to be conveyed to next page and 41 is value for it.

4.3 CREATING HYPERLINKS You can create a hyperlink in design view mode or code view mode. Add a link using the anchor tag in code view mode. A link is defined using HTML tag . This tag is called ‘anchor tag’ and anything between the opening tag and the closing tag turn into part of the link and by clicking that part a user can reach to the linked document. The href (hypertext reference) attribute holds the link URL. A text between the anchor tag pair is getting linked to the URL. Document Link Text

You can also set these attributes for anchor tag by using properties panel as shown in Figure 4.1

Figure 4.1 Set links to anchor tag from Properties panel

If you want, you can link an image, an object or any other file with hyperlink. Let’s link an image with hyperlink. You must enter a tag inside tag pair as shown in Figure 4.2.

Figure 4.2 Image tag inside anchor tag

B. Sc. (MGA)

6

Add a link using the Hyperlink command in Dreamweaver. 1) Place the insertion point in the document where you want the link to appear. 2) Do one of the following to display the Insert Hyperlink dialog box: • Select Insert

Hyperlink.

• In the Common category of the Insert panel, click the Hyperlink button as shown in figure.

Figure 4.3 Insert

Hypelink

3) In hyperlink window as shown in Figure 4.4 enter the text of the link and Link/URL, the name of the file to link to (or click the folder icon to browse to the file).

Figure 4.4 Hyperlink pop-up

In the Target drop down menu, select the window in which the file should open or type its name.

B. Sc. (MGA)

61

The names of all the frames you’ve named in the current document appear in the pop-up list. If you specify a frame that doesn’t exist, the linked page opens in a new window that has the name you specified. You can also select from the following reserved target names: •_blank loads the linked file into a new, unnamed browser window. •_parent loads the linked file into the parent frameset or window of the frame that contains the link. If the frame containing the link is not nested, the linked file loads into the full browser window. •_self loads the linked file into the same frame or window as the link. This target is the default, so you usually don’t need to specify it. •_top loads the linked file into the full browser window, thereby removing all frames. In the Tab Index box, enter a number for the tab order. In the Title box; enter a title for the link. In the Access Key box, enter a keyboard equivalent (one letter) to select the link in the browser. 4) After entering all fields Click OK. An automatic code will be generated in the coding view as shown in Figure 4.5.

Figure 4.5 Anchor tag with hyperlink

4.3.1 Eliminating Underlines from Links Sometimes if you want to style an anchor tag with different format then you can change its way of display that is text link without underline. Disabling the underline for the anchor tag, , which is normally associated with hyperlinked text, is one modification commonly included in style sheets. Underlined text is a standard method of indicating the hyperlinks on the web, and some clients may find it difficult to locate your links if the underline indicator is no longer visible.

B. Sc. (MGA)

6

To disable the underline on the anchor tag, follow these steps: 1) Open CSS style sheet panel by choosing window and then CSS styles. Here you will see all existing styles and provide controls for creating and managing styles. Refer Figure 4.6

Figure 4.6 CSS Styles Panel

2) Create New CSS Rule; this action will open a new window dialog box as shown in Figure 4.7 Select the tag option from the selector type dropdown window. Enter name of as you want to add CSS rule for anchor tag. In Rule definition option select (This document only) to create an internal CSS style sheet or choose an external style sheet from drop-down list. Click OK.

B. Sc. (MGA)

63

Figure 4.7 Add New CSS Rule

CSS style Definition dialog box will open as shown in Figure 4.8. 3) In the Style Definition window, make sure that the correct category is displayed by selecting Type from the list of categories. In Text-decoration section, tick none option to remove underline from the anchor tag. In this panel you can also assign new styles for color or font style of the tag. Click OK when you are finished with applying other styles also.

Figure 4.8 CSS Rule Definition Window

The style gets applied to the anchor tag to eliminate the underline of the text. Now, when viewed from the browser, any links that you insert on your page still function as links. The user’s pointer still changes into a pointing hand and the links are active but no underline appears. 4.3.2 Inserting URLs from the Assets Panel Now a days Internet addresses are getting more complex every day. Trying to remember them all correctly and avoid typo errors can make the web designer’s unnecessarily difficult. You can use the Dreamweaver Asset panel’s URLs category to drag and drop the difficult URLs with ease. The assets panel lists URLs that are already referenced somewhere within your site. If you want to link the same URL again, just drag it from assets panel. To avoid extra effort, after you have typed the URL for a link in a

B. Sc. (MGA)

6

document, test that links in a browser to be sure that it is correct. Thus, when you assign the same URL to other links using the assets panel, you can be confident that the link works as expected. To assign a URL from the assets panel, follow these steps: 1. Choose window and then the assets option to display it or open from panel group. 2. Click the URLs icon on the side of the assets panel to display that category, as shown in Figure 4.9

Figure 4.9 Assets Panel

3. To list the most current links found in the site click the refresh site list button on the assets panel. 4. In the document window, select the text or image you want the link assigned to. 5. Select the link and drag the desired link from the assets panel onto the selected text or image; alternatively highlight the link in the panel and click the apply button. If you do not select text or an image before dragging the URL from the assets panel, a link is still created in your document. In this situation, Dreamweaver uses the URL name as hotspot. The edit button on assets panel is unavailable for the URLs category. Links cannot be edited; they can only be applied as shown in the preview area.

B. Sc. (MGA)

65

Check your progress 1 What is hyperlink? How to assign URL from asset panel? List options of Target drop down menu of insert hyperlink window. Why should you underline the hyperlink? How to make an image as a source of hyperlink?

4.4 USING A NAMED ANCHOR TO LINK WITHIN A DOCUMENT Dreamweaver provides an alternative method of identifying a link – pointing to it. By using the point to file icon on the properties panel, you can quickly feel in the link text box by dragging your mouse to any existing named anchor or file visible in the Dreamweaver environment. With the point to file feature, you can avoid browsing through folders after folder as you search for a file, you can clearly see it in screen. You can point to another open document, to a document in another frame in the same window, or to any named anchor visible on the screen. If your desired link is a named anchor located farther down the page, Dreamweaver automatically scrolls to find it. You can even point to named anchor in another document, and Dreamweaver will enter the full syntax correctly. Perhaps one of the slickest ways of applying the point to file feature is to use it in tandem with the files panel. The files panel lists all the existing files in any given website, and when both the files panel and the document window are on screen, you can quickly point to any file. Pointing to a file uses what could be called a drag-and-release mouse technique, as a post to more ordinary point - and – click or drag – and - drop method. To select a new link using the point to file icon, follow these steps 1) Select the text or the graphic that you would like to turn into a link. 2) In the properties panel, click and hold the point to file icon located to the right of the link text box. 3) Holding down the mouse button, drag the mouse until it is over an existing link or named anchor in the document window or a file in the files panel. As you drag the mouse, a line extends from the point of file icon, and a reminder appears in the link text box as shown in the Figure 4.10.

B. Sc. (MGA)

6

Figure 4.10 Pointing to file using Link Text box

4) When you locate the file you want to link to, release the mouse button. The file name with the accompanying path information is written into the link text box.

4.4.1 Addressing Types You can use three types of URLs as links; those are Absolute addresses, document relative addresses and site root relative addresses. The following list briefly looks at these address types. 1) Absolute addresses require the complete URL of that link, as follows: http://en.m.wikipedia.org/wiki/Hyperlink

This type of address is most often used for referencing links on another webserver. You can also use absolute paths for local links, but that method will create trouble if you move your site to another domain, all of your local absolute-path links will halt. Using relative paths for local links also provides greater flexibility if you need to move files within your site. 2) Document-relative paths are generally used for local links in most websites. They’re mainly useful when the current document and the linked document or asset are in the same folder and are likely to remain together. You can also use a document-relative path to link to a document or asset in another folder by specifying the path through the folder hierarchy from the current document to the linked document. To reference an item in a subfolder, just

B. Sc. (MGA)

67

name the folder enter a forward slash and then enter the item’s file name as follows:

images/backgroung.jpg

The key feature of document-relative paths is to neglect the part of the absolute path that is the similar for both the current document and the linked document or asset, providing only the portion of the path that differs.

3) Site root–relative paths describe the path from the site’s root folder to a document. Site root relative addresses are indicated with a leading forward slash: /contact/contact_us.html

This example links to a file named ‘contact_us.html’ stored in the contact directory at the current site root. Dreamweaver translates site relative links to document relative links when the preview in browser feature is used. You can set you preference for document relative or site root relative links on a site by site basis. Open your site definition dialog box by double clicking on the displayed site name in the files panel dropdown list. In the general category of the site definition dialog box, choose the links relative to option. 4.4.2 Checking Links A webmaster must often perform the monotonous but necessary task of verifying the links on all the Web pages in a site. Because of the web’s fluid nature, links can work one day and breaks the next. Dreamweaver includes powerful link-checking and link updating capabilities. Dreamweaver can generate reports for broken links, for external links (links to file outside your file) and to orphan files (files in your site with no links to them). You can check links for an open document, for all documents in a site or for selected documents in the files panel.

To check links in the current document Select File Check Page Links. The Broken Links report appears in the Link Checker panel as shown in Figure 4.11

B. Sc. (MGA)

6

Figure 4.11 Broken link list

To generate a link report for the entire site, Select Files panel Site menu Check Links Sitewide. To report on links for certain files, select the files or folders in the Files panel. Now right click (control+click) choose Check Links and then Selected Files or Folders option. If the Link Checker panel is open, you can also click the Check Links button and then select the scope of your check: current document, entire site or selected files in the site. All these methods open the Link Checker panel, displaying the results of the link check as shown in Figure 4.11. In the Show drop down list at the top of the Link Checker panel, select the report you want to see: Broken Links, External Links or Orphaned Files. The Orphaned files report is only available if you check the entire site. The Broken Links report verifies not only the clickable hotspots to other HTML files but also references to graphics and other external files. It is especially important to let Dreamweaver write your links for you when target files are located in a different folder. Get into the habit of using the Browse for File and Point to File icons and you will save yourselves from linking errors. You can save the link report by clicking the Save Report button on the Link Checker panel, or by right clicking (control+ clicking) in the panel and choosing Save Results from the pop-up menu. To clear the Link Checker panel, right click (control+ click) in the Link Checker panel and choose Correct Results. Double clicking an entry in the Link Checker panel opens the document where the error occurred, with the broken link selected. You can quickly correct the link using the Properties panel or by choosing Modify and then Change Link option. To remove the link but leave the hotspot text, clear the link field in the Properties panel, or choose Modify and then Remove Link option. If the same URL is referenced in more than one place in your site, you can change all occurrences of it at once. To do this, choose Site and then Change Link Sitewide option from the main menus. Enter the URL to be changed and then the new URL. Finally click OK.

4.5 CREATING AN E-MAIL LINK E-mail links are very common on the web. When a user clicks on an e-mail link, it displays a window for sending a new e-mail message (rather than

B. Sc. (MGA)

69

opening a new web page as a regular link does). The message window is convenient because it is preaddressed to the recipient. All the users have to do is add a subject, enter a message and click send. Dreamweaver includes an object that streamlines the process of adding e-mail links. Just enter the text of the line and the e-mail address, and the link is ready. E-mail links, like other links, do not work when clicked in Dreamweaver. They must be previewed in a browser.

To enter an e-mail link, follow these steps: 1. Position your cursor where you want the e-mail link to appear. 2. From the Common category on the insert panel as shown in Figure 4.12.

Figure 4.12 Email Link

3. Click the E-mail link button. The E-mail Link dialog box, shown in Figure 4.13 appears.

Figure 4.13 Email Link Window

4. Enter the visible text for the link in the Text field.

B. Sc. (MGA)

7

5. Enter the e-mail address in the E-mail field. Note: the e-mail address must be in the format of ‘[email protected]’. Dreamweaver does not check to ensure that you have entered the address in the proper format. 6. Click OK . However, web designers sometimes face a problem. On some browsers, notably Internet Explorer, users may see a dialog box when the e-mail link is first selected. The dialog box informs them that they are about to send an email message over the internet. The user has the option not to see these warnings, but there is no way for the designer to prevent them from appearing when an e-mail link is used. However, another method of collecting data from users- HTML forms- does not require the users to have e-mail software installed on their computer, and it allows users to send information to the server without receiving the warning messages. Note: if you already have the text for the e-mail link in the document, you can use the Properties panel to insert an e-mail link. Just highlight the text, and in the Link field of the Properties panel, enter the URL in the following format: Mail to: [email protected]

Make sure that URL is a valid e-mail address with the @ sign properly placed. Following code will get generated.

Send Query

4.6 REFRESHING THE PAGE AND REDIRECTING USERS In some cases, user may need to refresh any webpage after a particular time interval. To fulfill this you would need a client-side script only. This cannot be done by a server-side script. The reason for this is because the page has to be served to the client at the end. The web is stateless till the time a user comes back and initiates other request. Till this time, a server cannot do anything. Thus you should do this refreshing activity only from the client side. This can be done in two ways: 1. Meta tag: Refresh 2. Window: setTimeout method 4.6.1 Meta Tag: Refresh One of the ways of refreshing the page after certain interval is by using Meta tag: refresh. This tag can be used to specify a delay in seconds before the

B. Sc. (MGA)

71

browser can automatically reload the document. Alternatively, it can also specify an alternative URL to load. For example
onclick="

this text will show up white

Note that HTML is not case-sensitive, so you can mix uppercase and lowercase letters. Nevertheless, it is suggested that all tags be capitalized since it makes code reading, much easier. Finally, naming your files with either .html or .htm as their extensions is very important task. File Structure It is very important to understand the basic structure of an HTML file, and to know exactly where each part of your code must be written which is fairly easy to remember. Good Web design and programming demands efficient and effective use of the available tools. The first thing is the full file, which must always start with the tag and finish with . You should never have any other HTML tags before the opening tag, nor after the closing one. One of the reasons for this occasional error is the fact that most browsers can now ignore major errors like this one and still manage to create a proper-looking output, but always remember to start your files by setting up these two tags.

B. Sc. (MGA)

21

The next section to understand is the header, limited by the tags and < /HEAD>. This section holds all information related to the file. Including its author, keywords, title and sometimes even some JavaScript functions that will be used in the page. Most basic pages use the header only to specify the title that will appear on the browser window. To do this, use the .. tags. Any text written between the opening and closing tags will appear in the title bar of the browser. The final section is the body, starting with and finishing with tag. The body of a page is the actual content of the web page, meaning that the data that will appear inside the browser window. The body tag can accept a set of properties that allow you to set up a background image (background) or color (bgcolor ); specify font colors for text ( color ) , links ( link) , visited links (vlink) ,active links ( alink ) , and even action scripts to run on load or unload of the page. There should always be a body section in a Webpage, unless you are using the page as a frameset definition page. Here is an example of what a "Hello world" HTML page should look like: Hello World Page HELLO WORLD!!
And Have a nice Day!

Note the indentation used. Although it is not required it will improve the readability of your code. The tag
induces a break of line. It is important to realize that any group of white spaces (whether it is a tab, a new line, or basic spaces) is always translated on the screen as a single white space. It is important to know this since the appearance of your code will not necessarily be the same as in the output. Check the following example: Hello World Page HELLO WORLD!! And Have a nice Day!

You probably noticed that this code is almost the same as the previous one except that there is no
tag after HELLO WORLD!! In this example text “And Have a nice Day” would show on the same line as “HELLO

B. Sc. (MGA)

211

WORLD”, even though it is written a line below it because the “new line” will be translated into single white space It is recommended that the six basics tags needed for the proper structure of HTML to be written as soon as a page created and then the blanks be filled. Tag Parameters Similar to the FONT and BODY tags, it is possible to add attributes to an opening HTML tag to make it more effective. Each attribute will affect the area after the opening tag and will finish with the closing tag. It needs to be kept in mind that there is no need to write the attributes in the closing tag. The W3C Website (www.w3c.org) can get you an extensive list of all the attributes that tags can use.

Check your progress 1 What does good Web design and programming demand? What is recommended for the proper structure of HTML? What should you keep in mind about the attributes of the closing tag? Why a tab, a new line, or basic spaces don’t work on browser window? From where you will get an extensive list of all the attributes?

10.3 CODE INSPECTOR The Code inspector makes use of the defined tags to assist the reference editor. Thus, if you want the Code inspector to handle these new tags as HTML, you must add them to the existing reference in the reference editor. 10.3.1 Working with Code View and Code Inspector Although Dreamweaver offers many options for using the visual interface of the Document window, sometimes the code just needs to be twisted a little. Dreamweaver's acceptance by professional coders is due in large part to the easy access to the underlying code. Dreamweaver includes several methods for directly viewing, inputting, and modifying code for the Web page. For largescale additions and changes, you might consider using an external HTML editor such as Notepad++ or UltraEdit, but for many situations, the built-in Code view and Code inspector are perfectly suited and much faster to use. Code view is one of the best tools in Dreamweaver's code-savvy toolbox. You can either view your code full-screen in the Document window, split-screen with Design view or in a separate panel, the Code inspector. The underlying engine for all Code views is the same. You can use either of the following methods to display the full-screen Code view • •

Choose View Code. Click the Show Code View button on the toolbar Code view displays, as shown in. Figure 10.1

B. Sc. (MGA)

21

Figure 10.1 Code View Display

You can access the split-screen Code and Design view with either of the following methods: • •

Choose View Code and Design. Click the Show Code and Design Views (Split) button on the Document toolbar.

To change the relative size of the Code and Design views, drag the splitter bar up or down. In the split-screen Code and Design view, Code view is shown on top of the Design view. You can reverse that order by choosing View Design View On Top or selecting Design View On Top from the View Options button on the toolbar. Another coding option is the Code inspector. You have two ways to open the Code inspector. You can either choose Window Code Inspector or use the keyboard shortcut F10. After you open it, the Code inspector, as shown in Figure 10.2 behaves like any other floating panel in Dreamweaver. The Code inspector can be resized, moved, hidden, and on Windows, docked above or below the Document window or grouped with other panels. When the Code inspector is opened initially, it is automatically selected. If you click in the Document window with the Code inspector open, the inspector dims but still reflects changes made in the document.

Figure 10.2 Code Inspector

To update Design view while still working in the Code view, click the handy Refresh button—either on the Document toolbar or the Property inspector—or press F5.

B. Sc. (MGA)

213

In all Code views, Dreamweaver does not update the Design view of the document immediately— whereas changes in Design view are instantly reflected in any open Code view. This delay is enforced to enable the code to be completed before being applied. To apply modifications made in the code, switch to Design view. If the Design view is open, click anywhere in it to give it focus. Should Dreamweaver detect any invalid HTML, such as an improperly closed tag, the offending code is flagged with a yellow highlight in both Design and Code views. Select the marked tag to see an explanation and suggestions for correcting the problem in the Property inspector. You can also apply code changes to Design view by saving the document or by clicking the Refresh button on the toolbar or the Property inspector. The Refresh button becomes active only when modifications are made in any Code view. You also have a keyboard and menu alternative. Pressing F5 has the same effect as choosing View Refresh Design View. Generally, the Code view and Code Inspector act like a regular text editor. Simply click anywhere in the Code inspector to add or modify code. Double-click a word to select it. Select an entire line by moving your pointer to the left edge of the code, where the pointer becomes a right-pointing arrow— and clicking once. Multiple lines can be selected in this same fashion by dragging the right-pointing arrow. After a section of code is selected, you can drag and drop it into a new location; pressing the Ctrl (Option) key while dragging makes a copy of the selection. You can move from word to word by pressing Ctrl (Command) in combination with any of the arrow keys. 10.3.2 Enabling Code View Options Some special features in Dreamweaver's code editor simplify the task of writing HTML and other types of code. When in any Code view, some of these features can be toggled on and off by choosing the command either from the View Code View Options list as shown in Figure 10.3 or under the View Options button on the Document toolbar which are as follows:

Figure 10.3 Code View Options

•

Word Wrap – It wraps lines within the boundaries of the Code View window or Code Inspector to eliminate the need for horizontal scrolling.

B. Sc. (MGA)

21

•

• •

•

•

•

Line Numbers – It displays a number for every line in the code; this feature is extremely helpful when used in combination with the JavaScript Debugger, which reports the line number of an error in the code. Hidden Characters – It shows paragraph markers for line returns, tabs, and spaces in the code. Highlight invalid HTML - Toggles the highlighting of invalid tags in Code view when Design view is refreshed. Invalid tags are always highlighted in the Design view. Syntax Coloring - Syntax coloring makes code easier to read. Basic tags and keywords are shown in one color, with text in another color. Three different types of code should be given in different colors: Reserved Keywords, Other Keywords and Strings. These colors are set in the Code color category of Preferences. You can also set a color for an individual tag to further differentiate it if you like. Auto Indent-Auto Indent is another feature intended to improve code readability. With Auto Indent enabled, pressing Enter (Return) at the end of a line causes the new line to start at the same indentation as the preceding line. Press Backspace (Delete) to move the indented line closer to the left margin. The number of characters for each indentation is set in the Code Format category of Preferences. Syntax Error Alerts In Info Bar - Toggles a pop-up status bar that appears at the top of the Document window when a syntax error occurs.

You can also easily change the indentation in or out for selected blocks of code. To further indent a block of code, select it and press Tab. To decrease the level of indentation for a selected code block, press Shift + Tab. Alternatively, you can choose Edit Indent Code or use the keyboard shortcut Ctrl+. (Command +.) to indent a code block. Similarly, you can choose Edit Outdent Code or use the keyboard shortcut Ctrl+, (Command+,) to outdent it. Although the keyboard shortcuts for indenting and outdenting code may seem random at first, they're actually easy to remember. The period and comma used in those shortcuts are on the same key as the left angle bracket (>) and right angle bracket (