Creating a Website: Intermediate Dreamweaver

Transcription

1 Creating a Website: Intermediate Dreamweaver Selecting Table Elements You can select an entire table, row, or column at once. You can also select one or more individual cells. When you move your pointer over a table, row, column, or cell, Dreamweaver highlights all the cells in that selection so that you know exactly which cells will be selected if you click the selection. Selecting an Entire Table Click the upper left corner of the table, anywhere on the top or bottom edge of the table, or on a row or column's border. Note: The pointer changes to the table grid icon when you can select the table [unless you click a row or column border]. Click in a table cell, then select the <table> tag in the tag selector at the lower left corner of the Document window. Click in a table cell, then select Modify > Table > Select Table. Click in a table cell, click the table header menu, then select Select Table. Selection handles appear on the selected table s lower and right edges. Selecting Rows or Columns You can select an individual row or column or multiple rows or columns. To select individual or multiple rows or columns: 1. Position the pointer to point to the left edge of a row or the top edge of a column. 2. When the pointer changes to a selection arrow, click to select a row or column, or drag to select multiple rows or columns. Information Technology Services, UIS 1

2 To select a single column: 1. Click in the column. 2. Click the column header menu, then select Select Column. Selecting Cells You can select a single cell, a line or block of cells, or nonadjacent cells. To select a single cell, do one of the following: Click in the cell, then select the <td> tag in the tag selector at the lower left corner of the Document window. Control-click [Windows] or Command-click [Macintosh] in the cell. Click in the cell, then select Edit > Select All. Tip: Select Edit > Select All again when a cell is selected to select the entire table. To select a line or a rectangular block of cells, do one of the following: Drag from a cell to another cell. Click in one cell, Control-click [Windows] or Command-click [Macintosh] in the same cell to select it, then Shift-click another cell. All of the cells within the linear or rectangular region defined by the two cells are selected. To select nonadjacent cells: Control-click [Windows] or Command-click [Macintosh] the cells, rows, or columns you want to select. If each cell, row, or column you Control-click [Windows] or Command-click [Macintosh] is not already selected, it is added to the selection. If it is already selected, it is removed from the selection. Information Technology Services, UIS 2

3 Splitting and Merging Cells Use the Property Inspector or the commands in the Modify > Table submenu to split or merge cells. As an alternative approach to merging and splitting cells, Dreamweaver also provides tools for increasing and decreasing the number of rows or columns spanned by a cell. To merge two or more cells in a table: 1. Select the cells in a contiguous line and in the shape of a rectangle. In the following illustration, the selection is a rectangle of cells, so the cells can be merged. In the following illustration, the selection is not a rectangle, so the cells cannot be merged. Do one of the following: Select Modify > Table > Merge Cells. In the expanded Property inspector, click the Merge Cells button. The contents of the individual cells are placed in the resulting merged cell. The properties of the first cell selected are applied to the merged cell. To split a cell: 1. Click in the cell. 2. Do one of the following: Select Modify > Table > Split Cell. In the expanded Property inspector, click the Split Cell button. Note: If you do not see the button, click the arrow in the lower right corner of the Property inspector so that you see all the options. Information Technology Services, UIS 3

4 3. In the Split Cell dialog box, specify how to split the cell. Split Cell Into specifies whether to split the cell into rows or columns. Number of Rows/Number of Columns specifies how many rows or columns to split the cell into. 4. Click OK. Adding and Removing Rows and Columns 1. Click in a cell. 2. Do one of the following: Select Modify > Table > Insert Row or Modify > Table > Insert Column. A row appears above the insertion point or a column appears to the left of the insertion point. Click the column header menu, then select Insert Column Left or Insert Column Right. A column appears to the left or right of the insertion point. To add multiple rows or columns: 1. Click in a cell. 2. Select Modify > Table > Insert Rows or Columns. The Insert Rows or Columns dialog box appears. 3. Select Rows or Columns, then complete the dialog box. Insert indicates whether to insert rows or columns. Number of Rows or Number of Columns is the number of rows or columns to insert. Where specifies whether the new rows or columns should appear before or after the row or column of the selected cell. 4. Click OK. Information Technology Services, UIS 4

5 To delete a row or column, do one of the following: 1. Click in a cell within the row or column you want to delete, then select Modify > Table > Delete Row or Modify > Table > Delete Column. 2. Select a complete row or column, then select Edit > Clear or press the Delete key. To add or delete rows or columns using the Property Inspector: 1. Select the table. 2. In the Property Inspector, do one of the following: Increase or decrease the Rows value to add or delete rows. Dreamweaver adds and removes rows at the bottom of the table. Increase or decrease the Cols value to add or delete columns. Dreamweaver adds and removes columns at the right side of the table. Working with Images Many different types of graphic file formats exist, but three graphic file formats are generally used in web pages--gif, JPEG, and PNG. Currently, GIF and JPEG file formats are the best supported and can be viewed by most browsers. GIF [Graphic Interchange Format] files use a maximum of 256 colors, and are best for displaying noncontinuous-tone images or those with large areas of flat colors, such as navigation bars, buttons, icons, logos, or other images with uniform colors and tones. JPEG [Joint Photographic Experts Group] file format is the superior format for photographic or continuous-tone images, because JPEG files can contain millions of colors. As the quality of a JPEG file increases, so does the file size and the file download time. You can often strike a good balance between the quality of the image and the file size by compressing a JPEG file. PNG [Portable Network Group] file format is a patent-free replacement for GIFs that includes support for indexed-color, gray scale, and true-color images, and alpha channel support for transparency. PNG is the native file format of Macromedia Fireworks. PNG files retain all the original layer, vector, color, and effects information [such as drop shadows], and all elements are fully editable at all times. Files must have the.png file extension to be recognized as PNG files by Dreamweaver. Creating an Image Rollover 1. In the Document window, place the insertion point where you want the rollover to appear. 2. Select Insert > Image Objects> Rollover Image. 3. The Insert Rollover Image dialog box appears. Information Technology Services, UIS 5

6 In the Image Name text box, type a name for the rollover. In the Original Image text box, click Browse and select the image you want displayed when the page loads, or enter the image file s path in the text box. In the Rollover Image text box, click Browse and select the image you want displayed when the pointer rolls over the original image, or enter the image file's path in the text box. If you want the images preloaded in the browser s cache so no delay occurs when the user rolls the pointer over the image, select the Preload Images option. In Alternate Text, enter text to describe the image. In the When Clicked Go to URL text box, click Browse and select the file, or type the path to the file that you want to open when a user clicks the rollover image. Note: If you do not set a link for the image, Dreamweaver inserts a null link (#) in the HTML source code to which the rollover behavior is attached. If you remove the null link, the rollover image will no longer work. 4. Click OK to close the Insert Rollover Image dialog box. 5. Select File > Preview in Browser or press F12. Inserting Flash Media The Flash file [.fla] is the source file for any project and is created in the Flash program. This type of file can only be opened in Flash [not in Dreamweaver or in browsers]. You can open the Flash file in Flash, then export it as an SWF or SWT file to use in browsers. The Flash SWF file [.swf] is a compressed version of the Flash [.fla] file, optimized for viewing on the web. This file can be played back in browsers and previewed in Dreamweaver, but cannot be edited in Flash. This is the type of file you create when using the Flash button and Flash text objects. The Flash template file [.swt] enables you to modify and replace information in a Flash movie file. These files are used in the Flash button object, which lets you modify the template with your own text or links, to create a custom SWF to insert in your document. The Flash element [.swc] is a Flash SWF file that lets you create Rich Internet applications by incorporating them in a web page. Flash elements have customizable parameters that you can modify to perform different application functions. Information Technology Services, UIS 6

7 Creating and Inserting a Flash Button 1. In the Document window, place the insertion point where you want to insert the Flash button. 2. Select Insert > Media > Flash Button. The Insert Flash Button dialog box appears. 3. Complete the Insert Flash Button dialog box, and click Apply or OK to insert the Flash button in the Document window. Modifying a Flash Button 1. In the Document window, click the Flash button object to select it. 2. The Property Inspector displays the Flash button properties. You can use the Property Inspector to modify the button's HTML attributes, such as width, height, and background color. 3. To make changes to content, display the Insert Flash Button dialog box using one of the following methods: Double-click the Flash button object. Click Edit in the Property Inspector. Right-click [Windows] or Control-click [Macintosh], and select Edit from the context menu. 4. In the Insert Flash Button dialog box, make your edits in the text boxes described in Inserting and modifying a Flash button object. In the Design view, you can resize the object easily by using the resizing handles. You can return the object to its original size by selecting Reset Size in the Property inspector Information Technology Services, UIS 7

8 Inserting Flash Text 1. In the Document window, place the insertion point where you want to insert the Flash text. 2. Select Insert > Media > Flash Text. The Insert Flash Text dialog box appears. 3. Complete the Insert Flash Text dialog box, and click Apply or OK to insert the Flash text in the Document window. If you click Apply, the dialog box remains open, and you can preview the text in your document. Working with Templates A template determines the basic structure for a document and contains elements such as text, images, page layout, styles, and editable regions. A template is a special type of document that you use to design a locked page layout. One of the most powerful uses of templates is the ability to update multiple pages at once. A document that is created from a template remains connected to that template, unless you detach the document later. You can modify a template and immediately update the design in all document based on it. You can create a template from an existing document or you can create a template from a new, blank document. Dreamweaver saves templates with the file extension.dwt. Templates are saved in a special Templates folder in the local root folder of the website. Creating a Template from an Existing Document 1. Open the document you want to save as a template in the Document window, by doing one of the following: To open an existing document, choose File > Open and select the document. To open a new blank document, choose File > New. In the document list, select the type of page you want to work with, then click Create. Information Technology Services, UIS 8

9 2. When the document opens, choose File > Save as Template. 3. In the dialog box that appears, select a site to save the template in from the Site pop-up menu, and enter a unique name for the template in the Save As text box. 4. Click Save. The template file is saved in the site s Templates folder, with a.dwt filename extension. Creating a New Template with Editable Regions 1. Create a new document and give the document a name. 2. In the Document window, do one of the following to select the region: Select the text or content that you want to set as an editable region. Place the insertion point where you want to insert an editable region. 3. Do one of the following to insert an editable region: Choose Insert > Template Objects > Editable Region. Note: A dialog box will open stating that Dreamweaver is automatically save your file as a template at this point. Right-click [Windows] or Control-click [Macintosh] the selected text or object, and choose Editable Region from the context menu. In the Insert bar, select Templates, and then click the Editable Region button. 4. The Editable Region dialog box appears. 5. In the Name text box, enter a unique name for the region. You cannot use the same name for more than one editable region in a particular template. Note: Do not use special characters in the Name field. 6. Click OK. The editable region is enclosed in a highlighted rectangular outline in the template. 7. Select a website to save the template in from the Site pop-up menu. 8. Enter a unique name for the template in the Save As text box. 9. Click Save. Information Technology Services, UIS 9

10 Removing an Editable Region If you have marked a region of your template file as editable and you want to lock it [make it non-editable] again, use the Remove Template Markup command. To remove an editable region: 1. In the document or in the tag selector, select the editable region you want to change. Choose Modify > Templates > Remove Template Markup. The region is now no longer editable. Viewing a Site Map You must define a home page for your site before you can display the site map. The site s home page can be any page in your site; it does not have to be the main page for your site. In this case, the home page is simply the starting point of the map. To define a home page for a site: 1. In the Files panel, select a site from the pop-up menu where the current site, server, or drive appears. 2. Right-click [Windows] or Control-click [Macintosh] the file you want to be the home page, then select Set as Home Page. Note: You can also set the home page in the Site Map Layout options in the Site Definition dialog box. View a site map: 1. To display the site map, in the Files panel, do one of the following: In the collapsed Files panel, select Map View from the Site View pop-up. In the expanded Files panel, click the Site Map button in the toolbar, then select Map Only or Map and Files. 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. Information Technology Services, UIS 10

11 The Files panel displays a site map showing the site structure two levels deep. Note: By default, the site map does not display hidden files and dependent files. 2. Click the Plus [+] and Minus [-] next to a filename to show or hide pages linked below the second level. 3. Notice the colors in the site map: Text displayed in red indicates a broken link. Text displayed in blue and marked with a globe icon indicates a file on another site or a special link [such as an or script link]. A green check mark indicates a file checked out by you. A red check mark indicates a file checked out by someone else. A lock icon indicates a file that is read-only [Windows] or locked [Macintosh]. Acknowledgements: Some of the text and images for this handout are from Macromedia Dreamweaver, Using Dreamweaver. Information Technology Services, UIS 11