PART I - How to Create Your Page

1. You must have an active student account with username and password. If you need an account, go to Serra 205 to apply for one.
2. Use a Macintosh computer in one of the labs (Serra 185 or 205),turn on the computer, run a web browser such as Internet Explorer or Mozilla Navigator.
3. Log in to the Your Web Page account on the Unet page to see if your account is active and to create a web directory and to add files to this web directory. This account information will also give you the path and directory to publish your web page on campus (using ftp) or off-campus (using https) for a USD Unet account or a History account. If you are using Mozilla Navigator available as the free Mozilla Suite software product from Mozilla.org, pull down the Windows menu and select Composer, then when you are in Composer pull down the File menu and select Publish.

PART II - How to Edit Your Page

1. The above steps only need to be done once. Write or edit your web pages locally, on your own computer or a lab computer, then upload the pages to your student account using the File Manager after you log in to the Your Web Page account Always keep the original web page documents on your computer in a work folder or directory. If you edit or change one of these original documents, it will replace the older document when you upload it with the File Manager.
2. To edit, change, or add to a web page, use can use any text editor such as Notepad or BBEdit, or Mozilla Composer, or a word processing program such as Microsoft Word (make sure Smart Quotes box is not checked under Tools>Preferences, and save as "text only' not as a normal word processing file). For the best results, use an HTML editor such as Pagespinner (for Macs only) that is available from Optima, or a commercial program such as Macromedia Dreamweaver (available in the student labs on campus).
   
3. Refer to the Web Coding section of the USD Help Pages for links to useful guides.
4. To create a new web page:
   • On your computer, open the Pagespinner folder and double-click on the Pagespinner program icon to run the program, click on "Not Yet" and wait several seconds for a new blank document to open.
   • Select a preview browser such as Netscape in the Pagespinner/preferences/helpers menu.
   • Pull down File>Open from the top menu bar of Pagespinner to open a new page. You can open the sample template page in the History Department Web site to edit and save as your own page. If you are viewing this guide with Netscape, click on this sample page link to see the template, pull down the View>Source menu from the top menu bar, pull down the Edit>Select All (or sweep you mouse over then entire page to select everything), pull down Edit>Copy to copy the page into memory, use the Finder to switch to Pagespinner, pull down Edit>Paste Text to paste the page into the Pagespinner window, pull down File>Save As to save the page with a new name such as page2.html, then upload your web page into your public_html directory with the File Manager.
     
     
     • Sample table for pictures - copy and paste this table into your web pages
       
     • Sample table for mp3
       
     • Sample list for bibliography
       
     • Sample guestbook
       
     
     
     
   • Write a link to this new page2.html on your index.html home page. From the top menu bar of Pagespinner pull down File>Open and click on Desktop and open the copy of your index.html file. In the Pagespinner window showing the html version of this page, click where you want to put the link, type the caption of the link (e.g., Page 2), sweep the mouse over this caption to select it, click on the double-link button in the Pagespinner menu, type the address of Page 2 in the URL window (e.g., page2.html), and click OK. Pagespinner will insert the correct tags for this link in your index.html page. Pull down File>Save and switch to Netscape to look at your home page with this new link.
   • Use Pagespinner to add text to this new page. For example, you have made a text file with your word processor at home and have saved this file on a floppy disk as a text file or HTML file (not as a normal word processing file). Put the disk in the computer, open it with Pagespinner, sweep you mouse over the text you want to add to your new page, pull down Edit>Copy from the top menu bar in Pagespinner to copy this text selection into memory, pull down File>Open to open page2.html on the desktop, click on the page2 where you want to insert the text, pull down Edit>Paste Text to past the text selection into page2. Add the necessary HTML tags such as paragraph or break tags at the end of lines, and pull down File>Save to save your edited page 2 to the desktop, switch to Netscape and look at the edited page.
5. Use the flatbed scanners in the Serra 185 or 205 labs to digitize pictures. You should set the scanner for 72 dpi resolution and scale the image size to at least 1280 pixels wide and 960 pixels high. This can later be scaled down to display at VGA (640x480) or XGA (800x600) screen sizes. If the original is black-and-white, scan at 256 shades of gray. If it is color, scan at 24 bit full color (or millions of colors). Save the full size image as a TIFF (.tif) or Photoshop (.psd) uncompressed file for editing. Use Photoshop to change the Brightness/Contrast or Image Size of the digital image. After editing in Photoshop, save a copy of the picture as a jpeg (for example, as "image1.jpg) at High (75%) Quality compression, and make a reduced size thumbnail (at 160x120 pixels) copy of the image (saved as a JPEG at 50% quality, or as a GIF) for use as an in-line graphic on your web page linked to the full-size jpeg image.
6. When scanning pictures, always write down the source of the picture and cite this source with the picture on your web page. The source is the author, title of book, publsher and publication date, and page number of the book that you scanned.

PART III - How to Add Pictures to Your Page

Edit a Picture

• Scan a picture from a book or magazine, or drag and drop a picture from a web page to your work folder, or import a picture from a digital camera.
• Use Photoshop on the computers in S205 or S185 to File>Open the picture in your work folder.
• Change size with Image>Image size menu, set at a resolution of 72 dpi.
• Click on the selection rectangle tool and select area of the picture to save and crop with Image>Crop, or Image>Rotate>Arbitrary to straighten a crooked picture, or Image>Adjust to change brightness and contrast
• Save picture as jpg for full-screen image 800x600 (e.g., map-big.jpg); also, scale the image down and save a thumbnail copy at 106x120 dpi (e.g., map-small.jpg)
• Save the picture in a folder called "images" and upload the pictures to your web account with the File Manager into a folder that you create with the File Manager called "images"

Make Image tag

• Use Pagespinner to open your web page in your work folder from the File>Open menu
• Put the mouse cursor at the location for the picture on the web page
• Click on the image button (three color shapes) and enter the name of the picture in the Filename box; in the Align box select middle or left or right; click "Insert"
• Save web page to your work folder, then use the File manager to upload this edited page to your web account.

Make Table for picture and caption

• See the sample page for a table tag that you can copy and paste into your own web page, changing the name of the picture
• Or, you can make your own table with the Pagespinner table menu, as follows:
  • Make an Image tag with no align selected; highlight the entire tag with mouse
  • Click on the table button and select no border, no cellspacing, no cellpadding, Cell Contents Alignment: Horizontal center or left or right, Vertical Middle, width 200, 1 row, 1 column, click "Apply"
  • Highlight the Image tag again and click center button
  • Add a width tag to the TABLE tag in the first line; click the cursor after the E in the word TABLE (inside the > bracket); pull down the Table>Cell Width Attribute menu; the default tage "Width="50" will be added to the TABLE tag change the number 50 to any number to move the entire table left or right
  • Type your caption before the tag, highlight the caption and click center button

Resources:

• A Beginners Guide to Writing HTML from NCSA will help you learn more about writing HTML pages. Another quick and basic introduction is The Bare Bones Guide to HTML from Kevin Werback
• USD's Academic Computing Information Center
• Premier 4.0 checklist for compiling Quicktime movies.
• Pictures and Multimedia Resources
• Download the fully-functional Mac shareware HTML editor PageSpinner from its own website.
• Download the free Mozilla Suite with the Composer HTML editor from Mozilla software products.
• Download free open source software from VersionTracker such as Audacity to make mp3 sound files, MacTheRipper to extract DVD tracks, Streamclip to demug MPEG files, BBedit Lite text editor.
• Download 30-day trial versions (Mac or Win) of Dreamweaver and Fireworks from Macromedia
• Download HTML editors for Windows such as Cool Page from CNET or Jumbo or Strouds
• CNET has one of the largest collections of shareware on the Internet for Mac or Windows, including free shareware graphic image editors such as GraphicConverter for the Mac.
• Use Gif Wizard to shrink the file size of your GIF pictures.
• Hints and tutorials from C/NET's Builder.Com page, especially see the tutorials on Authoring including the spotlight on HTML and Programming including the Spotlight on Javascript
• List of completed student web page projects