1. DreamWeaver
CS4

2. DreamWeaver

3. DreamWeaver: Set Up the Local Site
Choose the “Advanced” Tab in the Site Definition dialog box
Give your local site a descriptive name
Choose the “Local root folder” this is where you want to store your local site
Appears in lower rt.

4. DreamWeaver Window
The default view in DW is the “Design” view. You can change the view to only show code, or to show a “Split” screen with both the Code and Design views. The new “Live View” button lets you see what your page will look like without having to open a web browser.
[Click] The current file’s title appears in the center of the toolbar. [Click]
[Click] The View Options button, to the right of the Title box, lets you choose color icons, and to add a ruler or grid when designing sites.
If you prefer to have a classic toolbar to the side panel, you can drag and drop to move the panel. Clicking through the tabs, you’ll see various toolbar for different functions. For example, on the Layout Tab, there are buttons for creating dynamic items like drop-down menus. These are called Spry Widgets, and they’re based on Java Script.
[Click] You can alter the workspace set-up by using the drop-down at the top.
[Click] The properties panel at the bottom gets used quite often, and you can toggle between having the panel set to adjust properties for HTML coding and CSS coding. To the right of that, the Files panel and Assets panel give you quick access to the files you need to build your site.

5. DW Home Page: Choose a Layout
File Menu, Choose “New”
Select “Blank Page,” “HTML”
“Liquid” means that they layout adjusts to the user’s Web browser window
Choose a layout
Start by creating a Home Page for your site. From the File Menu, choose “New” and the New Document dialog box appears. Select “Blank Page” and “HTML” and then select a Layout for your page. In this example, I’m using “2 column liquid, left sidebar, header and footer.”
“Liquid” in a layout means that the layout automatically adjusts to the width of the user’s Web browser window – which is typically what you want to select.
Make sure that Layout CSS drop-down menu is set to “Create New File” on the right side, and then click Create.

6. DW Home Page: Save the Style Sheet
DW automatically offers to save the site’s style sheet in the folder you set up to start
Name it based on your site’s name
Click Save
Notice it now appears in your Local Files panel

7. DW Home Page: Page Title
Click inside the Title window and type in your own title for your home page. This is what visitors to your site will see at the top of their browser window – it acts as a label for your site.

8. DW: Save Your Home Page Click “Save As” on the File Menu
In your local file folder, save your home page
Best practice is to name the home page “index” (this helps Web servers know the main entrance to your site)
Note: not the same as the “Title” you already chose
Added to your Files Panel

9. DW Home Page: Add Text
Replace the home page’s placeholder material with your own text. Double-click the header and type in your site’s name. Don’t worry about how it looks, you can change the formatting later.
As you enter text in a main column, press ENTER to start a new paragraph, just as you would in a word processing program. The only things that can’t be added as they would in a word processing program are “special characters.”

10. DW: Add Special Characters
To add special characters (here, I wanted to add an em-dash), from the Insert Menu choose “HTML” and then “Special Characters” and select from the drop-down menu.

11. DW Headings
Just as in print publishing, headings are larger than other text. If you select one of the headings in your sample page, you’ll see its properties in the HTML box below. Notice that the main heading is Heading 1. If you click in the next heading down, you’ll see that it’s called Heading 2 and so on.
Highlight the second heading, and in the Format box, choose Heading 3. Notice the size shrinks.

12. DW Lists
Type in your sidebar items (or other items that you’d like listed), placing a hard return after each. Select all of the items and click the Ordered List button in the Properties panel. The selected items are now numbered in sequence below the heading. If you select the Unordered List button, your list will appear with bullet points instead of numbers.

13. DW: Add a Footer
Scroll to the bottom of the page and select the layout placeholder “Footer”
Replace this with your own text
Choose CSS in the properties panel
Click the Align Center button to center your footer on the page
Site footers often contain copyright information about the site contents or company logos and contact information.

14. DW: Modify Text Properties
Best done with CSS Style Sheet formatting
Can be done using CSS properties panel
Select the text
Fontface
Font size
Font color

15. DW: Add an Image
Place your cursor where you want to add the image, and choose “Image” from the Common Tab on the toolbar. Choose “Image” from the drop-down and then find the image that you’d like to add using the Select Image Source dialog box. If you planned correctly, as suggested at the start of the lecture, all your images will already be in your site folder. If not, when you add the image, DW will ask you if you want to save the image in your site folder.
Choose Yes, create a new folder in your site folder called “images” and save the image there. Type a brief description of the image in the Alternate text box and Click OK.

16. DW: Modify an Image
Notice that your image has sizing handles that allow you to drag to resize the image. When the image is selected, its properties now appear in the properties panel. You can crop the image, adjust the brightness, create thumbnails, and so on.
To alter how text wraps around and aligns with images is best done by adjusting the CSS style sheet, which we don’t have time for – but happens in the CSS Styles panel on the right.

17. DW: Add a Table
Press ENTER to start a new paragraph where you want the table
Click the “Table” Button on the Common Tab
Use the Table dialog box to set:
Table width
Headers
Number of rows & columns

18. Modify a Table
Type your text into the cells (notice the header cells are bolded)
To add rows or columns, use the Layout Tab
To delete rows or columns:
Highlight the row or column to delete
Hit the BACKSPACE key

19. Modify a Table To change cell alignment:
Click in the cell
HTML Properties Panel
Horizon, Vertical alignment
Right clicking inside the table & choosing “Table” will also bring up a menu of table options for formatting

20. Creating Links: Internal
Select the text you want to link to another page in your site
Click the “Point to File” icon (looks like a compass) and drag the file line to the target file in the Files panel
Appears in the Link window on the HTML properties panel
To preview your link, you can always click the Globe icon on the toolbar to preview your page in your web browswer.

21. Creating Links: External
Select the text you want to add an external link to
In the Link text window type the full web address for the outside page, including the ‘
Select “_blank” from the Target drop down menu
Save and test
Choosing “_blank” means that the link opens in a separate window or tab, so that your web site remains open when a user follows an external link.

22. Creating Links: E-mail
Select the text you want to link to
Click the Link Button on the Common Tab
The text appears in the top field, add the address in the bottom field
Click OK

23. Creating Links: Anchors
To create an anchor:
Click where you want the anchor
Click the Anchor Button
Type a distinctive name
An Anchor Icon Appears
Link to the Anchor:
Select the text to link
In the Link text window type #Anchorname
Press ENTER

24. CSS Styles Tab
Style sheets create formatting rules for parts of your site
Element-based styles
Context-based styles
Class-based styles
Grouped on the CSS Styles tab
All
Current
Element-based styles apply to specific HTML elements, like heading tags – you can see one illustrated here. Compound or context-based styles let you apply a style when a certain combination of tags appears, like a page header bar or sidebar. Class-based styles aren’t tied to a particular set of tags, so the can be applied to multiple items on a page.

25. Publish Your Site with DW
Pre-Publishing Options:
Click the Tag Button to
Add Keywords
Site Description
Check & Fix links
From the Site Menu, Choose “Check Links Sitewide”
Fix any broken links

26. The Files Panel
The handy little “Files” panel that we’ve been using to hold all of our local files expands to become a FTP window to transfer files. Click the Expand/Collapse button to see all local files, as well as all files on your Remote Server.
The toolbar will be used to FTP files.

27. Set Up the Remote Site Choose “Remote Info” Access = FTP
FTP host: plaza.ufl.edu
Login: Your username
Password: Your password
Choose “Use passive FTP” unless you’re told otherwise
Click “Test” to test the connection OK

28. FTP Files from Local to Remote
Drag & Drop
Note: this is the one FTP program I’ve seen that reverses the order of the Local and Remote files – Local files are on the right and Remote files are on the left. You can either use the buttons in the toolbar, or simply drag and drop files.
If DW asks if you want to upload dependent files, like images, click Yes.
Make sure all files are moved, then check the site in your Browser. When everything is set, click Disconnect.