DREAMWEAVER QUICK START TABLE OF CONTENT

Transcription

1 DREAMWEAVER QUICK START TABLE OF CONTENT Web Design Review 2 Understanding the World Wide Web... 2 Web Browsers... 2 How Browsers Display Web pages... 3 The Web Process at Sacramento State... 4 Web Server Accounts... 5 Web Site Organization... 5 Introduction to Dreamweaver 7 Document Window... 8 Objects (Insert) Panel... 8 Properties Panel... 9 History Panel... 9 Where to find Help in Dreamweaver Setting Up a Dreamweaver Site 11 How to create a site Formatting and Viewing a Document 12 Page Properties Saving Your Document Previewing in a Browser Formatting and Styling Text 14 Creating Paragraphs <p> Creating Line Breaks <br /> Creating Headings <h1>, <h2>, <h3>, etc Changing text format <font> Adding Content from a Microsoft Word Document 15 How to copy and paste from a word processor Indenting Paragraphs and Creating Lists 15 Indenting a Paragraph <blockquote> Creating Lists <ul>, <ol> Working with Images 16 Inserting an Image <img /> Adding a Horizontal Rule <hr /> Adding Hyperlinks 18 New Text Hyperlink Existing Text Hyperlink New Text Hyperlink Existing Text Hyperlink Using Tables 19 Inserting a Table Modifying a Table Resources 21 Academic Technology & Creative Services 1 Spring 2006

2 Web Design Review Before you get started creating a Web page or Web site using Dreamweaver, it is important that you become aware of a few basic Web design elements. Understanding the World Wide Web The Internet is a collection of computers around the world connected to each other via a highspeed series of networks. The World Wide Web or Web consists of a vast assortment of files and documents that are stored on these computers and written in some form of HyperText Markup Language (HTML) that tells browsers how to display information on the Web. The computers that store the files are called servers because they can process or serve requests from many users at the same time. Users access these HTML files and documents via software applications called browsers. A single Web page viewed in a browser A server (or Web server ) Web pages (HTML) stored on a server Web Browsers A Web browser is a program that displays Web pages and other documents on the Web. Unfortunately, different browsers may interpret the HTML of Web pages somewhat differently, and thus, when you create Web pages remember that they may appear different when viewed in various browsers. The University supports the browsers illustrated below. Internet Explorer ( ) Mozilla Firefox ( ) Note: A visitor can customize many display features of a browser, including: background color font font size text and link colors whether or not to download images. Safari (Mac) ( ) Academic Technology & Creative Services 2 Spring 2006

3 How Browsers Display Web pages When a Web page is opened in a browser, the browser reads and interprets the HTML file and formats the Web page for display. If there are references to external files, such as images or multimedia, these files are downloaded from the server and displayed in the browser window. It is important to note that HTML files are text files that only contain references to the external files you do not embed these files into the Web page. root folder index.htm In Browser images banner.jpg icon.gif Academic Technology & Creative Services 3 Spring 2006

4 The Web Process at Sacramento State This overview shows you the six steps needed to successfully get your information online. It is also available online at 1 Request/Enable a Web server Account SacLink 2 Gather Materials Web page text, files Images, Photographs 3 Create/Edit HTML Files Text Editors [Notepad (PC), SimpleText (Mac)] Web Editors [Macromedia Dreamweaver, Microsoft FrontPage] Note: You may need to convert some materials for use on the Web. 4 Preview HTML Files View the local files using a Web browser o Internet Explorer o Mozilla Firefox o Safari (Mac) Note: Remember to test all of your hyperlinks. 5 Upload to Server Copy the files to a Web server [using one of the following programs] o WS_FTP, Fetch o Dreamweaver 6 View pages on Web View pages on the World Wide Web using a Web browser o Internet Explorer o Mozilla Firefox o Safari (Mac) Academic Technology & Creative Services 4 Spring 2006

5 Web Server Accounts Before you can copy your files to a server, you need to request an account on a Web server. Here at Sac State, students can post Web pages on the SacLink Web server. If you have a SacLink account, you need only enable your Web pages in order to have access to the SacLink Web server. Follow the instructions at to enable your account. root folder index.htm images banner.jpg icon.gif week1 wk1_lesson1.htm wk1 lesson2.pdf week2 wk2_lesson1.ppt Your Web site A Web Server Web Site Organization File Naming Conventions When creating a Web site (or a Web page), there are a few rules for creating filenames. These rules not only apply to HTML files, but to any file or document that is part of your Web site. Use lower-case letters in your filenames. Upper-case letters can be used, but this is something that is not normally used when working with Web files. o Uploading files with capitals into WebCT can create problems. o Some older browsers do not locate files that are not exactly specified. Only use numbers and letters in your filenames. Filenames must begin with a letter (not a number). Special characters (except those noted below) should not be used including #, & and comma. Do not use any spaces within a filename. Representing spaces within a filename: You may use the underscore ( _ ) character or the dash ( - ) character to represent a space in a filename. File Extensions:.htm or.html may be used as a file extension when naming HTML files. Be consistent with what you use. Academic Technology & Creative Services 5 Spring 2006

6 Site Structure Every Web site that you build or inherit should have a consistent and simple organization called a site structure. A site is a collection of HTML files, documents and images contained in a single master folder (the root folder). Within this root folder you can save your documents and subfolders organized in a manner that makes sense to you. A typical Web site root folder index.htm images banner.jpg photo.gif workshop workshop_info.htm procedure.pdf bio intro.htm We recommend that the structure of your Web site include: 1) A root folder that contains the Web site. 2) A Web page entitled index.htm (or index.html) that resides within the root folder to represent the default homepage for the Web site. 3) An images folder that contains the graphics, illustrations, images and photographs used in your Web pages. 4) Additional folders for organizing your content. Academic Technology & Creative Services 6 Spring 2006

7 Introduction to Dreamweaver Macromedia Dreamweaver is a full-featured Web design suite that allows you to create and edit HTML and XHTML documents (Web pages). With Dreamweaver, as with other HTML and XHTML editors, knowledge of the XHTML mark-up language is not required to create professional-grade websites. PC version MX 2004 interface Panels appear as one contiguous screen. Easy drag and drop from one panel to another. Macintosh version MX 2004 interface Panels float can be placed anywhere on the screen. Panels can be resized easily, but may be partially hidden when other panels are activated Legend Document Window Provides a work area to 1 4 insert and arrange text, images, and other elements of your Web page. Properties Panel (Property Inspector) Allows you to view and modify properties of an object that is selected in the Document window. 2 Toolbar Shortcuts to many of the Document window commands, and a text field where you can specify a page title. 3 Objects (Insert) Panel Allows you to add images, tables, and multimedia to your Web pages. 5 6 History Panel Tracks commands you perform and allows you to return your page to a previous state by backtracking through those commands. Site Panel lists the various folders and files associated with the site. Academic Technology & Creative Services 7 Spring 2006

8 Document Window The Document window contains the toolbar, document title, file name, Code View window to view the HTML code, and the WYSIWYG window to view your Web page graphically (Design View). (Code View) (Design View) Toolbar The toolbar is actually part of the Document window and allows you to toggle between the Code View and Design View windows (View Modes), set your page title, check your document for browser-specific errors, preview your page in a browser and select different view options. View Modes View Options Browser Check Preview in Browser Objects (Insert) Panel The Objects (Insert) panel contains various icons that allow you to easily insert different types of elements into your Web documents. For example, insert an anchor, table, picture or horizontal rule. View as drop-down menu or View as tabs Academic Technology & Creative Services 8 Spring 2006

9 Properties Panel Using this panel you can modify the properties of an element selected in the Document window. Text Properties Image Properties HR Tag Properties History Panel This panel makes it easy to undo multiple actions at the same time. To undo a series of actions place your cursor in the Design view document, then within the History panel click and drag the undo slide to the desired position. To activate the History panel: go to Window > History or press Shift+F10. History panel undo slide Academic Technology & Creative Services 9 Spring 2006

10 Where to find Help in Dreamweaver There are a variety of ways to find help in Dreamweaver. Below are just a few of them. Click the Help menu and select Using Dreamweaver. The Help window appears, as shown here. From the Properties panel click the question mark button ( ). This will open the Help window above and display information about each area of the Properties panel. Click the Help menu and select Reference. The Code panel will appear on your screen and open to the Reference tab. Here you can select an HTML or XHTML tag from the Tag dropdown list. You may also choose an option from the Description drop-down list to get more detail about a specific attribute within your chosen tag. This is a great way to learn more about HTML and XHTML. Academic Technology & Creative Services 10 Spring 2006

11 Setting Up a Dreamweaver Site Before creating or editing your Web pages, you should have Dreamweaver help you manage your HTML files, original documents (MS Word, PowerPoint, etc.) and image files by defining a site. Tip: Keeping everything within a master folder enables you to easily transfer files to a Web server without changing the organization of the files and sub-folders. If you do not organize your site files on WebCT the same as they are organized on your local computer, hyperlinks will not work and images will not display properly. How to create a site 1. To set up a local site [on your computer], first select the Manage Sites option from the Site menu. 2. In the Manage Sites window click the New button. 3. From the drop-down menu select Site. 4. When the Site Definition dialog box appears click the Advanced tab. The dialog box allows you to choose a name for your site, define a local folder to serve as the master folder for your site and define a default folder for your images. Academic Technology & Creative Services 11 Spring 2006

12 5. Once you have defined your Dreamweaver site it is visible in the Site panel (example below). Here you can simply double-click any file listed to open and edit it. You can also move and/or rename a file without incurring any broken links. This is possible because your site has been defined within Dreamweaver. Formatting and Viewing a Document Page Properties You can access the Page Properties dialog box from the Modify menu or from the Properties panel (as long as you have not selected an image). The Page Properties dialog box allows you to define a background color and image, link colors and page title, among other items. The list of categories depends upon whether or not you are using CSS. Below are a couple of sample Page Properties windows you may see. Sample window of categories with CSS unchecked in Preferences window (previous page). Academic Technology & Creative Services 12 Spring 2006

13 Saving Your Document To save your document, choose the Save or Save As option under the File menu. After you save your document it will appear in the Site panel as a file. If your Site panel is not visible, you can activate it from Window > Files, or by pressing <F8>. Previewing in a Browser You can preview your pages in a Web browser by either selecting File > Preview in Browser or by clicking the shortcut button on the Toolbar. In addition, you can add to the list any browser installed on your computer e.g. Mozilla Firefox. Academic Technology & Creative Services 13 Spring 2006

14 Formatting and Styling Text Virtually all of the text formatting and styling you wish to apply to your document can be done within the Design view in conjunction with the fields and buttons on the Properties panel (shown below). Creating Paragraphs <p> To create a new paragraph in Dreamweaver place your cursor in the Design view document and press the Enter key (PC) or Return key (Macintosh). This will create a new pair of paragraph tags with a blank space, represented as <p> </p>. Since there is no easy way to indent the first line of a paragraph on a Web page, individual paragraphs are separated by a double space. Creating Line Breaks <br /> Line breaks <br /> are created by holding down the SHIFT key and pressing Enter or Return. Creating Headings <h1>, <h2>, <h3>, etc. To create a heading, click and drag to select the text, and then use the Format drop-down menu on the Properties panel to select the desired heading value. Any text selected to be used as a heading must reside within its own paragraph. Changing text format <font> Selecting a font face, size, color and paragraph alignment for your text can be done using the Properties panel. Font face Font size Font color Alignment Academic Technology & Creative Services 14 Spring 2006

15 Adding Content from a Microsoft Word Document You can easily copy and paste content from a Microsoft Word document (or other word processor) directly into your Dreamweaver document. This can save you valuable time, especially if you have a lengthy document. Unfortunately, you may lose some of your formatting during this process. How to copy and paste from a word processor 1. Open your document using your word processor, such as Microsoft Word. 2. Select your text using the cursor and/or mouse. 3. Copy your text: On the PC press CTRL+C or Command+C on the Macintosh. 4. Open your HTML or XHTML document in Dreamweaver then place the cursor in the document where you want to paste your content. 5. Paste your content into your Dreamweaver document using one of these methods: Paste: On the PC, press CTRL+V or Command+V on the Macintosh. This preserves bolded and italicized text, numbering and bulleting, and table formatting, but not fonts or colors. Paste Formatted: On the PC, press CTRL+Shift+V or Command+Shift+V on the Macintosh. This preserves most formatting, including fonts and colors which are added as new CSS styles. Paste Text: Select Edit > Paste Text. This simply pastes the content with no formatting, except line breaks and paragraph breaks. 6. Format the text in your Dreamweaver document as you would like it to appear on your Web page. Some of the formatting from the word processor may have been lost. Indenting Paragraphs and Creating Lists Indenting a Paragraph <blockquote> You can use the increase/decrease indent buttons on the Properties panel to insert or remove blockquote tags. The blockquote tag, <blockquote>, will indent a given paragraph from both the left and right margins, thereby creating a visual separation similar to those used in research papers when more than two lines from a source are being cited. Increase / Decrease indent (add BLOCKQUOTE tag) Academic Technology & Creative Services 15 Spring 2006

16 Creating Lists <ul>, <ol> You can add a new list by choosing Insert > HTML > Text Objects and then selecting the desired option, Unordered List, Ordered List or List Item. You can also change existing text using the Properties panel to create unordered <ul> and ordered <ol> lists. Unordered and Ordered Lists You can modify an existing list by clicking within any item in the list, then clicking the List Item button ( ) on the Properties panel. The following List Properties window appears. Here you can customize the appearance of your bullets or the numbering of each list item. Working with Images It is important that you prepare your images before inserting them into your Web pages. Use a graphics editor, like Adobe Photoshop Elements. Be sure to save your files as either GIF or JPG files in the images folder within the site folder. Inserting an Image <img /> You can insert an image by clicking the insert image button ( ) on the Common tab of the Objects (Insert) panel. A menu appears where you can select the Image option to insert your image. Academic Technology & Creative Services 16 Spring 2006

17 After inserting an image you can set the image alignment, spacing and hyperlink attributes from within the Properties panel. Image dimensions Image source path and hyperlink Image alternate text Image spacing Image alignment Adding a Horizontal Rule <hr /> You can add a horizontal rule from the Insert menu by selecting HTML > Horizontal Rule. To modify the <hr /> properties, click the horizontal rule in the Design view. You can then modify the attributes from within the Properties panel. Academic Technology & Creative Services 17 Spring 2006

18 Adding Hyperlinks To take full advantage of the Web, you need to add hyperlinks to your Web pages. These links allow your visitors to navigate from one page to another in a non-linear fashion, searching for information that best suits him or her. You can add a hyperlink to your Web page for new text or for existing text. Here are a few ways to include hyperlinks in your Web pages. New Text Hyperlink 1. Click inside your document in the Design view where you want to place the text hyperlink. 2. Click the insert hyperlink button ( ) on the Objects (Insert) panel, and fill out the information on the following window. Existing Text Hyperlink 1. Highlight the desired text in your document in the Design view. 2. In the Properties panel select the file you want to link to by following one of these methods: Click the pointer icon ( ) and drag the mouse pointer to the file in the Site panel. Click the folder icon ( ) and select your file from the Select File window that appears. Type the entire Web address in the space next to Link. For example, Text hyperlink New Text Hyperlink 1. Click inside your document in the Design view where you want to place the text hyperlink. 2. Click the insert link button ( ) on the Objects (Insert) panel, and fill out the information on the window. Academic Technology & Creative Services 18 Spring 2006

19 Existing Text Hyperlink 1. Click and drag using the mouse to highlight the desired text. 2. In the Properties panel type the address in the space next to Link. When creating an hyperlink, your link value should be similar to where you replace with an address. The mailto: text is required to make this an hyperlink. Using Tables Inserting a Table You can insert a table into your document by clicking the insert table button on the Objects (Insert) panel or from Insert > Table. A dialog box allows you to enter your desired table size parameters. Cell Padding determines the number of pixels between a cell s content and the cell boundaries. Cell Spacing determines the number of pixels between adjacent table cells. Width determines how wide the table will be, expressed as a number of pixels or a percentage of the area in which it is placed. Border determines the width of the outline of the table (the table border) a border of zero means the border is not visible in the browser (a dotted line will appear in Dreamweaver but not in the browser). Academic Technology & Creative Services 19 Spring 2006

20 Modifying a Table After your table is inserted you can modify the table and cell properties. To modify cell properties: click inside the cell, then make changes from the Properties panel. Merge / Split Content alignment Width, Height Background image, color and border color To modify table properties: click inside the table then click <table> at the bottom of the Document window in Design view to select the entire table. Make changes from the Properties panel. To insert a row or column: click inside the table then click the Modify menu and select Table. The Modify Table menu is displayed below. You have several options to choose from. o o o Insert Row will insert a single identical row above where you clicked inside the table. Insert Column will insert a single identical column to the left where you clicked inside the table. Insert Rows or Columns will allow you to insert one or more rows or columns, either above or below where you clicked inside the table (a.k.a. the selection ). Academic Technology & Creative Services 20 Spring 2006

21 Resources Information Providers Resource page * Guidelines, Tutorials, Templates, Graphics, Accessibility, Other Resources Books on Dreamweaver * Dreamweaver MX 2004 Bible by Joseph Lowery * Macromedia Dreamweaver MX 2004 Hands-On Training by Garo Green * Dreamweaver MX 2004 for Dummies by Janine Warner, Susannah Gardner * Master VISUALLY Dreamweaver(r) MX and Flash MX by Sherry Kinkoph, Mike Wooldridge * HTML for the World Wide Web (5 th edition) with XHTML and CSS by Elizabeth Castro Academic Technology & Creative Services 21 Spring 2006