CSUN  Wordmark
Page Description

The following page is a three column layout with a header that contains a quicklinks jump menu and the search CSUN function. Page sections are identified with headers. The footer contains update, contact and emergency information.

Online Instruction >>SOFTWARE >> dreamweaver instructions

Dreamweaver Instructions

DreamWeaver MX Workshop

(Images are from a Mac, but all instructions are the same for Windows)

I. Acquire your csun account for mounting webpages at:

https://www.csun.edu/account/

II. Create and Setup a public_html directory--

(where your webpages will be stored on the csun server) at ftp.csun.edu in Fetch or WS_FTP
  1. General instructions for setting up your CSUN account for webpages--http://www.csun.edu/itr/guides/webpublishing/general-indiv.html.
  2. Uploading webpages with WS_FTP-- http://www.csun.edu/itr/guides/ws_ftp.html

III. Dreamweaver--set up New Site 

  1. Choose Site and then Manage Sites. Click on New and then, in the DropDown Menu, click on Site.
    Dreamweaver Manage Sites Form


















  2. Then click on the Advanced tab if it is not already chosen.

    FILL IN THE LOCAL INFO

  3. Enter a name in the Site Name box. It is only for your reference. In the Local Root Folder box, specify where on your own local computer the site's files will be stored or leave the default. Click the folder icon to select the proper folder. Create a new folder from within the file-browsing dialog box.
  4. In the HTTP Address field, enter the URL that your completed Web site will use. This is optional, but filling it in means that Dreamweaver can verify links in your files that use absolute URLs. 
    Dreamweaver Site Definition for Unnamed Site 1 on advanced tab with catagory local info selected.  



















     




     

      

    FILL IN THE REMOTE INFO:

  5. Click on the dropdown menu by Server Access: FTP  
  6. If you have a csun account with a public directory, fill out the following boxes as in the fig. below. Click OK.
Dreamweaver Site Definition for Unnamed Site 1 on advanced tab with catagory remote info selected.  



















 




 
 

 
 

IV. Create a Dreamweaver webpage

Macromedia Dreamweaver MX 2004 start page with options to Open or Create Dreamweaver files.  Also, start page includes options to tour Dreamweaver and updater 7.0.01 downloads.  



















 
 
  1. Click on File and then New. Click on HTML. Save immediately, since Dreamweaver often doesn't let you continue to add elements unless you have saved first. Click File and Save As.
  2. Click on the second icon from the left (Show Split). This will allow you to see the HTML code in the top box and the WYSIWYG (what you see is what you get) view in the lower box.
  3. Fill in the Title box for this webpage. This will show up as the bookmark name in browsers, but not on the webpage.
    Dreamweaver Split window with sample code  















  4. Click on Modify and then Page Properties.
  5. With Appearance chosen, fill out the form choosing your font, size, and colors. A san sarif font is easiest to read on the backlit screen of a computer. So Ariel has been a popular choice for webpages. Dark text on a light background is also easier to read than light text on a dark background.
  6. If you'd like to use a background image, the appropriate .gif or .jpeg file should have been downloaded or created and stored on your computer in the same folders as your webpages. The image will be tiled completely over your page, so the seams should match, it shouldn't be too busy, it needs to be color compatible with the text, and the size should be no more than a couple of KB for fast download speed. Click on Browse and search your local computer for the image. It's file title, appropriately named as a file like filename.gif, without any spaces or punctuation other than the period before gif or jpeg, should show in the window.
  7. Choose the margin size and then click Apply. Dreamweaver Page Properties with Appearance category selected  



















  8. Create a Heading on your webpage: Click on the Format dropdown box in the bottom Properties Palette and choose Heading One.
  9. Choose Links and Headings and choose those fonts.
    Dreamweaver Page Properties with Headings category selected  


















  10. Click on the icon to the right for Align Center in the bottom properties box and type a heading on your webpage.
    Dreamweaver Page Open with HTML code displayed on top split window and the words "Art 305 homepage" on bottom split window.  



























  11. Create a Link: Type CSUN on your page and then choose the text. In the link box in the bottom properties box, type http://www.csun.edu and click on Enter or Return. This is now a live link.
    Dreamweaver Page Open with HTML code displayed on top split window and the words  "Art 305 Homepage" and "CSUN" on bottom split window.  































 

IV. Rollover buttons

  1. A rollover button is a link that looks like a button and changes appearance when your mouse moves over it. Click on Insert and then Media and then Flash Button.
  2. Fill out the box as in the fig. below. Choose any style. Type in a name or text for the button. Put in the link URL from the page you are linking to. The target is the type of window in which all linked documents should open.
    ? -blank loads the linked document in a new, unnamed browser window.
    ? -parent loads the linked document into the parent frameset or window of the frame that contains the link.
    ? -self loads the linked document in the same frame or window as the link. This target is the default, so you usually don't have to specify it.
    ? -top loads the linked document in the full browser window, thereby removing all frames.

    Then click OK.

  3. Save  and click on File and then Preview in Browser.
    Dreamweaver Insert Flash Button Form  






























 

V. Rollover text

  1. This is very much the same as a rollover button, except that rollover text allows you to create text that changes color when you roll over it with the mouse. Click on Insert and then Media and then Flash Text.
  2. Fill out the box as in the fig. below. Choose any style. Type in a name or text for the button. Put in the link URL from the page you are linking to. Then click OK.
  3. Save  and click on File and then Preview in Browser.
    Dreamweaver Insert Flash Text Form  



























  

VI. Uploading Files

  1. Once you have saved your files, you will need to upload them from your local computer to a remote server or the network so other people can see them on the Web.
  2. folder with the Dreamweaver and image files within it should appear on the right under the Files palette.
    Dreamweaver Page open with Files palette shown on the right hand side  












  3. Select the folder or files you want to upload.

     

    *To transfer the entire site, select the top-level folder. You may want to make this selection the first time you publish the site. Once the site is published you'll probably want to transfer only files that you add or modify.

    *To transfer a single file, select the desired file.

    *To transfer several files, hold down the Control key and click each file to be transferred.

     

  4. Click on the icon of two disconnected plugs (Put File button) at the top of the window to connect to the remote directory server.
  5. Click the blue arrow which points upward to upload the files.
  6. A box appears about Dependent Files. If you want to upload all images and other relevant dependent files, click yes. If those types of files already exist in your remote directory, and you're simply making a small change to the webpage, click no.
    Dreamweaver Page with a box appearing. Box is asking user "Include dependent files?".  Optional buttons Yes, No, or Cancel.  

















Download File--Click the Connects to remote host button to display your remote directory. Then select the desired file(s) and click the green downward-pointing arrow  Get File button.

Delete Files--Choosing the File and click the Delete key.

VII. The Web Address of the Published Site

If your main Web page file is called index.html your Web page address is:

http://www.csun.edu/~account

where account is your campus email account login (for example, ~hcarh001).

The Web page address for any page other than index.html is http://www.csun.edu/~account/filename.html

Where account/filename is your campus email account login and then the name of the file you created and put in your public_html directory (for example, ~hcarh001/myfile.html

Most webpages need the file type, .html, after them.