[ Not for Circulation ]
Creating a Website: Introduction to Dreamweaver Dreamweaver Workspace
Interface The Dreamweaver interface is comprised of six main items: 1. 2. 3. 4. 5. 6.
Document Window Insert Bar Document Toolbar Property Inspector Status Bar Panel Groups
Information Technology Services, UIS
1
[ Not for Circulation ]
Document Window The document window is where you build your Web page. Every time you open Dreamweaver, a blank Untitled Document window appears. At the top of the document window is the Title bar that contains the name of your Web page as well as the file name of your document.
On the bottom of your Document Window is a pop-up menu that lets you resize your window to various preset or custom pixel dimensions.
Next to the Size Window is the approximate download speed in kilobytes.
At the lower left of the page is the Tag Selector. Whenever you highlight elements of your Web page in the Document Window, the corresponding tag is highlighted below in the Tag Selector. If you click on a particular tag in the Tag Selector, then the corresponding element of your Web page will be highlighted. This is handy when you are trying to select a nested table.
Insert Bar The insert bar is one-stop shopping for many operations. Many items found in the Objects palette are also found under the Insert menu at the top of the page. The buttons are organized into several categories, which you can switch by clicking the tabs along the top of the Insert bar.
Information Technology Services, UIS
2
[ Not for Circulation ]
Insert Bar Categories
The Common category lets you create and insert the most commonly used objects, such as images and tables. The Layout category lets you insert tables, div tags, and frames. You can also choose two views for tables: Standard (default) and Expanded Tables. The Forms category contains buttons for creating forms and inserting form elements. The Data category lets you insert dynamic elements like record sets, repeated regions, and record insertion and update forms. The Spry category contains buttons for building Spry pages, including Spry data objects and widgets. The Text category lets you insert a variety of text- and list-formatting tags, such as b, em, p, h1, and ul. The Favorites category lets you group and organize the Insert bar buttons you use the most in one common place. Server-code categories are available only for pages that use a particular server language. This is beyond the scope of this workshop.
Document Toolbar
The Document toolbar contains buttons that let you toggle between different views of your document quickly: Code, Design, and a split view that shows both Code and Design view. The toolbar also contains some common commands and options related to viewing the document and transferring it between the local and remote sites.
Property Inspector
Information Technology Services, UIS
3
[ Not for Circulation ] Usually placed or found at the bottom of your screen is the Property Inspector. The Property Inspector controls many settings. The default Property Inspector is for formatting text. The content of the Properties Inspector is context sensitive and changes depending on what is being edited on screen.
To show the Properties Inspector, choose Window > Properties.
Some properties can only be viewed if the Property Inspector is expanded. To do this, click on the arrow at the lower right corner of the Property Inspector.
Status Bar
The status bar at the bottom of the Document window provides additional information about the document you are creating.
The tag selector shows the hierarchy of tags surrounding the current selection. Click any tag in the hierarchy to select that tag and all its contents. Click to select the entire body of the document.
The Select Tool enables and disables the Hand tool.
The Hand Tool allows you to click the document and drag it in the document window.
The Zoom Tool and Set Magnification Pop-up Menu allows you to set a magnification level for your document.
The Window Size pop-up menu [visible in Design view only] lets you resize the Document window to predetermined or custom dimensions.
To the right of the Window Size pop-up menu are the estimated document size and estimated download time for the page, including all dependent files such as images and other media files.
Panel Groups On the right side of the screen are docked panels. Clicking on the arrow on the left side of panel expands panels. In the expanded version of panels are tabs of the panels that are docked in a particular panel set. At the top right of each panel is a context menu that allows you to perform operations on the panel’s appearance and placement, and provides redundancy of the tasks accessed at the bottom of the panel that manipulate and add functionality to your page. Information Technology Services, UIS
4
[ Not for Circulation ]
Switching between views in the Document window You can view a document in the Document window in Code view, Design view, or Code and Design views. To switch views in the Document window, do one of the following:
Select View > Code. Select View > Design. Select View > Code and Design.
Use the Document toolbar:
Click the Show Code View button.
Click the Show Code and Design Views button.
Click the Show Design View button.
Site Structure Managing your folders is crucial when you construct a website. Dreamweaver has a great tool called the Site Window that allows you to do this in outline and icon form. You can rearrange files and folders within the site window without the consequence of breaking links or disrupting file paths. Dreamweaver, within the site window environment, automatically updates your changes for you.
Information Technology Services, UIS
5
[ Not for Circulation ]
Root Folders To effectively manage your site, Dreamweaver forces you to create a root folder where you keep all of your files for a particular website. A Root Folder is not particularly special except for the fact that you have defined it through Dreamweaver. The Root Folder is the folder from which all other files stem like the roots of a tree. Local Root Folder, Root Folder and just plain Root are all interchangeable terms for the same thing.
Defining a Site 1.
From the Welcome screen of Dreamweaver CS3 you can define your site by selecting DreamWeaver Site… in the Create New row. A site wizard appears and asks you to type in a name for your site. Or Select Site > New Site. A site wizard appears and asks you to type in a name for your site. You do not have to follow file naming conventions, but be sure that your site name is somewhat related to the project you are working on.
2.
Click Next at the bottom of the page. Check the radio button, “No, I do not want to use a server technology.”
3.
Click Next.
4.
Check the radio button, “Edit local copies on my machine then upload to server when ready (recommended).”
5.
Click Next.
6.
Choose None from the drop down menu below the question “How do you connect to your local server?”
7.
Click Next.
8.
Click Done.
Information Technology Services, UIS
6
[ Not for Circulation ] You may also set up a site using the Advanced tab:
1.
Select category Local Info. Click on the folder to the right of the text box labeled Local Root Folder and browse to the folder that contains or will contain your website. Click on Choose to select that folder as the root folder for this lesson.
2.
You will then be prompted to create a cache file that keeps the links you are going to create up-to date. You may want to check the Use Cache to Speed Link Updates check so that you do not have to see this message again.
3.
Click on OK. Note: When you are done defining a site, the site files window appears. It contains all of the folders and files in your root folder. If you look on the right side, you will see the root folder and all of its sub-folders and files. The left side of the window is empty because that will contain the folders you have moved to the server that hosts your website.
Defining a Browser of Choice To preview your Web pages in a browser, you need to choose a browser. 1.
Select File > Preview in Browser > Edit Browser List or Edit > Preferences…Category > Preview in Browser.
Information Technology Services, UIS
7
[ Not for Circulation ]
2.
Click on the plus sign to add a browser, the minus sign to delete, or the Edit…to change the browser from a list of choices.
3.
When prompted, browse the hard disk to select the browser of your choice.
4.
To change a browser, click on Edit… to the right of the plus and minus sign
Page Formatting Creating and Saving a New Page 1.
Select File > New.
2.
Choose HTML in the Page Type list and click the Create button.
3.
Select File > Save and save the page in your website folder. Or Right click on Root folder which is in Files Panel select New File, it creates an untitled html file and save it automatically. Then rename the file and to open the file double click on it.
File-Naming Conventions
Do not use spaces. Avoid uppercase letters. Avoid characters such as periods, quotes, slashes, colons, and exclamation points. Keep file names short.
Information Technology Services, UIS
8
[ Not for Circulation ]
Setting Page Properties
For each page you create in Dreamweaver, you can specify layout and formatting properties using the Page Properties dialog box [Modify > Page Properties]. The Page Properties dialog box lets you specify the default font family and font size, background color, margins, link styles, and many other aspects of page design. You can assign new page properties for each new page you create, and modify those for existing pages
Giving Your Page a Title Type “Name of Page” into the title text field on the document toolbar. Press the return or enter key or click in the work area of the document to set the title.
Creating a Line Break If you want to create a line with no space between it and the previous line, you need to insert a line break. Pressing on return [Macintosh] or enter [Windows], creates a paragraph break that creates a space between two lines. Line breaks are even coded differently in html. Line breaks have the tag
. Paragraphs are denoted as .
Position your cursor and create an insertion point in the heading. Press shift+return [Macintosh] or shift+enter [Windows] depending on your computer operating system.
Information Technology Services, UIS
9
[ Not for Circulation ]
Adding a Horizontal Rule 1.
Choose Insert > HTML > Horizontal Rule.
2.
With the horizontal rule selected, type 70 in the W text field on the property inspector. Choose % from the drop-down menu to the right of the value you just typed.
3.
Deselect Shading. Type 1 in the H text field.
4.
Save your work and preview it in the browser by pressing F12.
Working with Colors in Dreamweaver In Dreamweaver, many of the dialog boxes, as well as the Property Inspector for many page elements, contain a color box, which opens a color picker. Use the color picker to select a color for a page element. To select a color in Dreamweaver, click Text Color box in the Property Inspector. The color picker appears.
Use the eyedropper to select a color swatch from the palette. All colors in the Color Cubes [default] and Continuous Tone palettes are web-safe; other palettes are not.
Use the eyedropper to pick up a color from anywhere on your screen--even outside the Dreamweaver windows. To pick up a color from the desktop or another application, press and hold the mouse button; this allows the eyedropper to retain focus, and select a color outside of Dreamweaver. If you click the desktop or another application, Dreamweaver picks up the color where you clicked. However, if you switch to another application, you may need to click a Dreamweaver window to continue working in Dreamweaver.
To expand your color selection, use the pop-up menu at the top right corner of the color picker. You can select Color Cubes, Continuous Tone, Windows OS, Mac OS, Grayscale, and Snap to Web Safe. Note: The Color Cubes and Continuous Tone palettes are web-safe, whereas Windows OS, Mac OS and Grayscale are not. If you are using a palette that is not web-safe and then select Snap to Web Safe, Dreamweaver replaces the selected color with the closest web-safe color. In other words, you may not get the color you see.
To clear the current color without choosing a different color, click the Default Color button. Information Technology Services, UIS
10
[ Not for Circulation ]
Adding a Date 1.
Place the insertion point where you want to the date to appear.
2.
Click on Date in the Common tab in the insert bar to place the current date on the page.
3.
From the Day Format drop-down menu, choose the Thursday option. From the Date Format drop-down menu, choose March 7, 1974. From the Time Format menu, choose 10:18 PM.
4.
Check the Update automatically on save check box to update the date on your page each time you save your document.
5.
Click OK.
Creating Links Inserting an E-mail Link 1.
Select the text you wish to convert into a link.
2.
Click the Email Link button in the insert bar [Common tab]. The Email Link dialog box is displayed.
3.
In the E-mail text field type the e-mail address.
4.
Click on OK.
Note: There are two kinds of links, relative and absolute. Relative links are those that are defined locally within your website. For example, when you create a link from one document to another, you create a relative link. A link to an external file, such as an external website, is an Absolute link.
Creating a Relative Link 1.
Select a word or a phrase that you wish to convert to a link.
2.
In the Property Inspector, click on the folder icon to the right of the Link text field.
3.
Navigate to your website folder and select a file that you wish to link to.
4.
Click on Open, Choose [Macintosh] or OK [Windows].
5.
Save your work and preview in a browser.
Information Technology Services, UIS
11
[ Not for Circulation ]
Creating an Absolute Link 1.
Select the text you wish to convert into an absolute link.
2.
In the Properties Inspector, type in the URL for the link in the Link text field.
3.
Save your work and preview in browser.
Inserting and Linking to Named Anchors Anchors are a way to define a relative link one area of a page to another or from one area of a page to another area of a separate page. 1.
Position the insertion point before the text you wish to insert an anchor.
2.
Click the Named Anchor button on the Common tab of the Insert bar.
3.
Type a name in the Anchor Name text field and click OK.
4.
Select a word or phrase that you wish to define as a link to the anchor.
5.
In the Property Inspector, type #name_of_anchor in the Link text field.
6.
Insert an anchor at the very top of the page and name it top. At the bottom of your page, type “Back to the Top”.
7.
In the Property Inspector, type #top in the Link text field.
8.
Save the document and preview it in the browser.
Working With Images Placing Graphics on a Page The most common graphic formats for the Web are JPEG and GIF. Note: Photographic images and images with a large tonal range should be saved as JPEGs. Artwork with large areas of solid color with little or no blending should be saved as GIFs. 1.
Place the insertion point in the first line of the document. Choose Insert > Image.
2.
Find the file you wish to insert in the images folder.
3.
Click Open, Choose [Macintosh] or OK [Windows] depending on your operating system.
Information Technology Services, UIS
12
[ Not for Circulation ]
Setting Image Properties
Resizing and Refreshing an Image
Click on the image you wish to re-size. In the Property Inspector, change the width to xx and the height to xx.
Positioning an Image
Click one an image to select it. In the Property Inspector, chose an alignment option from the list.
Adding a Border Around an Image
Click on an image to select. In the Property Inspector, type 1 in the Border text field.
Assigning Names and Tags to Images 1.
Click on an image to select it.
2.
In the Properties Inspector, type “name of image” in Alt text field.
3.
Save your work.
Wrapping Text Around Images 1.
Place the insertion point at the beginning of a paragraph. Insert an image.
2.
Select the image and choose Left from the Align drop-down menu in the Property Inspector.
3.
Save your work.
4.
Preview your work in a browser.
Information Technology Services, UIS
13
[ Not for Circulation ]
Adjusting the Space Around an Image 1.
Click on an image to select it.
2. In the Property Inspector, type 10 in the H Space text field and type 6 in the V Space text field.
Working with Tables One way to have better control of the placement of the elements on your pages is to use tables. Tables allow you to construct Web pages with a greater degree of precision.
Inserting a Table 1.
Place the insertion point where you want the table to appear. On the Insert bar, click on the Layout tab and click on the Table icon. Or Choose Insert > Table.
2.
In the Table dialog box that appears, define the parameters for your table.
3.
Depending on whether the table is used as a data table or layout table, you may want to define the Width in Pixels or Percent. Similarly, you will have to define a Border for the table accordingly.
Click on OK. You can add text or images to table cells the same way that you add text and images outside of a table.
Selecting an Entire Table To select an entire table, do one of the following:
Click the upper left corner of the table or click anywhere on the right or bottom edge.
Click in a table cell, and then select the table tag in the tag selector at the lower left corner of the Document window.
Click in a table cell, and then choose Modify > Table > Select Table.
Click in a table cell, and then select the table tag in the Tag Inspector.
Selecting a Row or Column 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
14
[ Not for Circulation ]
Selecting a Single Cell
Click in the cell, and then select the td tag in the tag selector at the lower left corner of the Document window.
Click in the cell, and then choose Edit > Select All. Choose Edit > Select All again when a cell is selected to select the entire table.
Click in a table cell, and then select the td tag in the Tag Inspector.
Selecting 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 or Command-click is not already selected, it is added to the selection. If it is already selected, it is removed from the selection.
Acknowledgements: Some of the text and images for this handout are from Adobe Dreamweaver, Help Resource Center.
Information Technology Services, UIS
15
