Ch 1 Dreamweaver


Published on

Use this PPT on Slide Share for NOTES.

Published in: Education
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Ch 1 Dreamweaver

  1. 1. Ch. 1 Creating a Dreamweaver WebPage and Local SiteWhat is Adobe Dreamweaver CS4?Adobe Dreamweaver is a powerful Web page authoring and Web site management software program with an HTML editor that is used to design, code, and create professional-looking Web pages, Web sites, and Web Applications. The visual-editing features of Dreamweaver allow you to create pages without writing a line of code.Dreamweaver provides tools and features:1. Automatic Web page creation2. Web site management3. Standard Adboe Web authoring toolsThe Dreamweaver Environment and Workspace consists of toolbars, windows, objects, panels, inspectors, and tools you use to create your Web pages and to manage your Web site.The Dreamweaver workspace is an integrated environment in which the Document window and panels are incorporated into one larger application window.
  2. 2. Document Tab displays the Web page name and includes Untitled-1 if not named and saved.Document Window displays the current document, or Web page, including text, tables, graphics, and other items.Design view, the design environment where you assemble your Web page elements and design you page.Code view, which is a hand-coding environment for writing and editing code.Split view, which allows you to see both Code view and Design view for the same document in single window.Live view, which allows the page such as it would appear in a browser.Live code, which displays any HTML code produced by Javascript or server- side-programming.Panel groups are sets of related panels docked together below one heading and control over a wide range commands and functions.Insert Bar allows quick access to frequently used commands for creating and inserting various types of objects-such as images, tables, links, dates.Property Inspector displays settings for the selected object’s properties or attributes. Its is context sensitive, meaning it changes based on selected object.
  3. 3. Status Bar located on the Document window provides additional information about the document you are creating.Status Bar presents the following:Tag: click any tag in the hierarchy to select that tag and all its contents.Select tool: use the select tool to return to default editing after using the zoom or hand tool.Hand tool: to pan a page after zooming, use the hand tool to drag the page.Zoom tool: available on Design view and use to check the pixel accuracy of graphics or to better view the page.Set MagnificationWindow sizeEstimated Document size and download timeUnicode(UTF-8) an industry standard that allows computers to consistently represent and manipulate text expressed in most of the world’s writing systems.Application Bar displays the Dreamweaver menu names.
  4. 4. Toolbars: Note: Go to View.• Document toolbar provides different views of the Document window (e.g., Code, Split, and Design).• Standard toolbar contains buttons for common operations from the File and Edit menus.• Style Rendering toolbar which provides options for designing for different media types, such as screen, print, handheld, projection, TTY (teletype), television, CSS Styles, and Style Sheets.Defining a Local SiteIn Dreamweaver, however, the term site can refer to any of the following:Web site, a set of pages on a server that are viewed through a Web browser by visitor to the site.Remote site, files on the server that make up a Web site, from the author’s point of view rather than a visitor’s point of view.Local site, files on your local disk that correspond to the files on the remote site. You edit the files on your local disk, and then upload to remote site.Dreamweaver site definition, set of defining characteristics for a local site, plus information on how the local site corresponds to a remote site.
  5. 5. Local Root FolderWhen Dreamweaver looks for Web pages, links, images, and other files, it looks in the designated root folder by default. Any media within the Web site that are outside of the root folder are not displayed when the Web site is previewed in a Web browser.Root folder can create additional subfolders also called nested folder to organize images and objects.Dreamweaver provides two options to define a site and create the hierarchy: you can create the root folder and any subfolders, or create the pages and then create the folders when saving the files.Path is the succession of folders that must be navigated to get from one folder to another.A typical path structure has a master folder, usually called the root and designated by the symbol “”.Using Site Definition to Create a Local Site (Basic or Advanced)Basic method, or Site Definition Wizard guides step by step.Advanced method is more efficient, uses Wizard as well and:Case-sensitive links: Provide for the use of case-sensitive link checking.Cache: Allocates memory to store frequently used site data; checked by default.Default images folder: An optional feature to specify the location of images in the site.HTTP address: Use to define URL of a Web site and to verify absolute links.
  6. 6. The two main categories in a site definition are Local Info and Remote Info.After a completed site definition, the hierarchy structure is displayed in the Dreamweaver Local Files panel- provides a view of the devices and folders on your computer and shows how these devices and folders are organized.Removing and Editing a Web SiteClick Site on Application Bar and click Manage Sites CommandSelect site name and then click the remove button.Rulers help you measure, organize, and plan your layout.Home page is the starting point for the rest of your Web site. For most Web sites the home page is named index.Page Properties dialog box lets you specify appearance, links, and many other aspects of page design.Adding Text to a Web Page1. Add text to a new document2. open existing HTML document, even if it was not created on DW3. Copy and paste text4. Import a word document
  7. 7. Formatting means to change heading styles, insert special characters, and insert and/or modify other such elements to enhance the appearance of Web page.Property Inspector Features lets you see the current properties of the selected object and allows you to alter or edit them.Format button allows you apply a Paragraph, Heading, or Preformatted style to the textParagraph styleHeading stylesPreformatted styleFormatting Options:Class, Bold and Italic, Unordered list, Ordered List, Definition List, Indent and Outdent, Title, ID, Link, Target, Page Properties, and List Item.
  8. 8. Text HeadingsSix levels of HTML headings are Heading <h1> produces the largest text and Heading<h6> the smallest.Types of ListsOrdered Lists contain text preceded by numbered steps. Unordered lists contain text preceded by bullets or image bullets.Definition lists do not use leading characters such as bullets or numbers.Other Web Page EnhancementsSpecial CharactersCharacter Entities, another name for character codes, allow a browser to show special characters. HTML represents these codes by a named entity or a numbered entity. Both types of entities begin with an ampersand (&) and end with a semicolon(;).Dreamweaver adds an entity- go to Insert on application bar, point to HTML, special characters on the HTML submenu and then click the entity name on the Special Character Submenu.Check Spelling Command on Dreamweaver Option.