Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Introduction to Dreamweaver


Published on

From a workshop series offered in Fall 2007.

Published in: Education, Technology, Design
  • Be the first to comment

  • Be the first to like this

Introduction to Dreamweaver

  1. 1. Introduction to Dreamweaver MX Sarah Bombich Arc: Library Technology Center 1/6 Introduction to Dreamweaver MX Goals  Familiar with Dreamweaver’s capabilities  Knowledge of when it is (or is not) appropriate to recommend Dreamweaver as a solution  Understanding of learning curve  Familiar with Dreamweaver’s workspace and basic tools What is Dreamweaver?  “…the professional choice for building web sites and applications. It provides a powerful combination of visual layout tools, application development features, and code editing support. With robust features for CSS-based design and integration, Dreamweaver enables web designers and developers to easily create and manage any website.” []  A WYSIWYG (What You See Is What You Get) web page editor  A website development and management tool What Can I Do With Dreamweaver?  Create web pages graphically or with straight HTML  Create web sites, including the use of templates if desired  Maintain web sites  Upload and synchronize local copy of web site with server  View a site map Prerequisite and Helpful Knowledge  Familiarity with the World Wide Web (WWW) required  Understanding of how the WWW works, including familiarity with web servers, web browsers, and web standards, is strongly recommended  Understanding of how a web site is structured, both the underlying files and the user- experienced site structure, is strongly recommended  Working knowledge of HTML is strongly recommended
  2. 2. Introduction to Dreamweaver MX Sarah Bombich Arc: Library Technology Center 2/6 Introduction to the Workspace  Document Window o Code View vs. Design View  Insert Panel o Common, Layout, Text, Tables, Frames, Forms, Template, Characters, Media, Head, Script, Application  Properties Inspector o Changes according to what you have selected  Panel Groups o Design: CSS Styles, HTML Styles, Behaviors o Code: Tag Inspector, Snippets, Reference o Files: Site, Assets (Can remove site files from panel) o Answers
  3. 3. Introduction to Dreamweaver MX Sarah Bombich Arc: Library Technology Center 3/6 Setting Up a Website  Set up a local copy, with structure identical to the site that will be placed on a server. Place all files in the same root folder, with an images folder within it. Macromedia suggests the structure root folder > Assets > Images. All other CSS, scripts, etc. can also be placed in the Assets folder. Set up a local site using the Site Definition Dialog Box  Site > New Site Create a New Page  Enter a descriptive title in the "Title:" textbox at the top of the document window. This is the title that will appear in the title bar of the browser window when people view your page; it is also the text that will be used when someone creates a bookmark to your page.  Save the document. Make sure the main page (in the root folder and any subfolders) is named ‘index.htm’ or ‘index.html’ Page Properties  To set properties that affect the entire page, choose Page Properties from the Modify menu. o Title: You set this when you created the new page. o Background Image: You can specify a relative or absolute path to an image to appear in the background of every page. You may also browse your hard drive for
  4. 4. Introduction to Dreamweaver MX Sarah Bombich Arc: Library Technology Center 4/6 an image and the path will be automatically listed. o Background: Choose from dropdown color palette; use the eyedropper to pick any color on your computer screen (such as a color from the background image if you're using one); or type in the hexadecimal code. o Text, Links, Visited Links, Active Links: For each of these, you can choose from dropdown color palette, use the eyedropper to pick any color on your computer screen, or type in the hexadecimal code. o Left Margin, Top Margin, Margin Width, Margin Height: Keeps your graphics and images away from the edge of the page. Left Margin and Top Margin are supported by Internet Explorer, not part of the official W3C html spec (4.0). Margin Width and Height are part of the official spec and supported by all three browsers. Although supported my most browsers, deprecated in favor of using CSS. o Tracing Image and Image Transparency: The tracing image and its corresponding transparency setting allow you to pick an image which will be displayed in the background of the document design window while you work. Text  You can type text or cut and paste text from another source.  Properties panel allows text formatting. Text options are also available from the Text menu. o Format: Choose Heading levels and other formatting styles from the dropdown menu. o Default Font: For each selection on the dropdown, there are several fonts listed, to allow for differences among computer platforms (e.g., Windows, Macintosh, and Unix). o Size: When specifying a size, you can use font size (1, 2, 3, etc.) or + and - sizes (+1, +2, +3, etc.). None = size 3. o Color: Choose from the dropdown color palette, use the eyedropper to pick any color on your computer screen, or type in the hexadecimal code o Ordered and Unordered Lists: Use the buttons provided to create an ordered (numbered) or unordered (bulleted) list. To customize the formatting of a list, click the List Item button and make selections in the List Properties dialog box. o Increade or Decrease Indent Buttons: Use these in the same way you would in a word processing program.  Inserting Special Characters. To insert special characters, such as the copyright symbol © or the Spanish language character ñ, select Special Characters from the Insert menu and make a choice from the cascading menu that appears. If you choose "Other" a grid will be displayed from which you can make your choice.
  5. 5. Introduction to Dreamweaver MX Sarah Bombich Arc: Library Technology Center 5/6 Links  Absolute and Relative Links. Highlight the text or object that you want to make into a link. Then use Properties panel to enter the appropriate link information. o If you click the Browse for File icon (a folder) you can browse and select a file from within your own site. Pay attention to whether your relative link is within your site folder and whether you have saved your document.  Internal Links (or "Jump Links"). To insert an internal link do the following: o Click on the location you would like an anchor. o Insert > Named Anchor. Name the anchor. An anchor icon will appear in the document. It is not throwing off your formatting, even if it looks like it is. o Select the link text. Type the name of the anchor in the Link: box of the formatting palette.  Email Links o Insert > Email Link Inserting Common Objects  Image o Insert > Image. Locate and select an image within your site (File name:) or type the URL for a non local image (URL:). o Be sure to use the Properties panel to add alternate text that describes the image (Alt). You can also change image alignment (Align) in relation to the text or make the image a Link. You can also vertical and horizontal space (V Space or H Space) or add a border (Brdr) around the image.  Current Date. Using Insert > Date you can insert the current date in a format you specify by selecting options in the dialog box that appears. If you select "Update Automatically on Save", the date will be updated every time you modify and re-save the page. Previewing a Page  Although Dreamweaver is called a WISIWIG program, each web browser has its own rendering engine, none of which are indentical to Dreamweaver’s. To avoid embarrassingly poor page rendering, you should preview your pages in a Netscape-like browser (Mozilla, Firefox), Internet Explorer, and Safari (Mac).  Click the Preview/Debug in Browser button on the Document toolbar and select
  6. 6. Introduction to Dreamweaver MX Sarah Bombich Arc: Library Technology Center 6/6 a browser. To add a browser to the list, you can use Edit Browser List option on the dropdown menu. After adding browsers, you can use the specified Function keys to quickly preview your work. Uploading to a Web Server  Synchronize local and remote site o Site > Synchronize to transfer the latest versions of your files to and from your remote site  Upload specific files o In the Site panel  Click the Put button on the Site panel toolbar  Choose Put from the context menu o If the file is currently open in a Document window, you can instead choose Site > Put from the Document window.  Site Map o Use the site map to lay out site structure and to share graphic images of your site structure with others; it also helps you visually check your links within the site o You must define the home page for your site before you can display the site map o To view a site map select View > Site Map  Select map only to view the site map without the local file structure or site and map to view the site map with the local file structure  Check Links Sitewide o Search for broken links and unreferenced files in an open file or the entire local site o Dreamweaver only verifies links to documents within the site; Dreamweaver compiles a list of external links that appear in the document(s), but does not verify them o When finished checking, results are listed in the Link Checker panel o Site > Check Links Sitewide  Clean Up HTML o Commands > Cleanup HTML o Will correct any poor or invalid HTML