Using the Course Templates with Nvu by ps0001


									Using the Course Templates with Nvu

     September 23, 2005
     Jeff Hiles, Instructional Web Designer
     Center for Teaching and Learning
     023 Dunbar Library


    Download Nvu ____________________________________________________5
    Set Preferences____________________________________________________5
    Set Up a Site ______________________________________________________5
    Customize the Template ____________________________________________5
    Create a New Page_________________________________________________6
    Title the Page _____________________________________________________6
    Add a Level One Heading___________________________________________6
    Add Paragraphs___________________________________________________7
    Moving Content from Word to Nvu __________________________________7
      Troubleshooting: “Paste Without Formatting” is grayed out _____________________ 7
      Troubleshooting: The space between paragraphs is more than one blank line________ 7
    Make Subheadings ________________________________________________7
    Make Lists _______________________________________________________8
      Change List Numbers to Letters___________________________________________ 8
      Change a List's Starting Value ____________________________________________ 9
    Add Pictures______________________________________________________9
    Add Optional Styles From Template _________________________________10
      Add a Style to Float an Image Left or Right ________________________________ 10
      Add a Style to Set Off a Paragraph________________________________________ 10
      Add a Warning _______________________________________________________ 10
    Make a Table ____________________________________________________11
      Insert a Basic Table ___________________________________________________ 11
      Add Table Headers ____________________________________________________ 11
      Add a Table Caption___________________________________________________ 12
      Add a Table Summary _________________________________________________ 12
    Make Links _____________________________________________________12
      Link Etiquette ________________________________________________________ 12
      Link to Another Site ___________________________________________________ 12
      Link to Another Page in Your Course _____________________________________ 13
      Link to Another Spot within a Page _______________________________________ 13
      Make an Email Link ___________________________________________________ 13
    Customize Your Style Sheet ________________________________________14

Download Nvu
   Nvu is a free Web page editor, available for Windows, Macintosh and Linux
   operating systems. Although it makes a good teaching tool, at this writing it is
   a little too quirky for me to feel comfortable recommending it for day-to-day
   work. To download a copy of Nvu, go to

Set Preferences
   The first time you use Nvu, there are a couple of preferences you should
   change. You need to change them only once, unless you install a new version
   of Nvu.
      1. From the Tools menu in Windows or the Nvu menu on a Mac, choose
      2. Under General preferences, uncheck the box Save images and other
         associated files when saving pages.
      3. Also, select Retain original source formatting.

Set Up a Site
   Before you begin using Nvu, create a folder on your computer for your "site,"
   which will contain all the files for your course. Put into the folder a copy of
   both the template.html file and the folder called template_files for the
   design you want to use. You can create as many sites as you like. For
   example, you will probably want to make a separate folder for each of your
      1. Click Edit sites in the Site Manager.
      2. For Site Name, type whatever you like, such as the name of your
      3. Click Select directory and choose the folder for this site (or course)
         and click OK. You should now see the site listed in your Nvu Site
      4. Click the plus sign (Win) or arrow (Mac) to the left of the site name to
         show the folder's contents. Open files by double clicking them in the
         Site Manager.

Customize the Template
   Before you create pages for your course, change the header and footer of the
   template.html file to include text you want to have on every page in your
   course. You will only need to do this once. But do it carefully. To avoid
   accidentally deleting important parts of the template, follow these directions.

      1. Open the template.html file by double clicking it in the Site
      2. Select only the first word, number, at the top of the page. being
         careful not to select the colon following that word.
      3. Replace the word number with your course number (e.g. ENG 101).
      4. Now, remove the space, pound sign and colon that immediately follow
         your course number.
      5. Select the word name at the end of that first line, taking care not to
         select anything else on that line.
      6. Replace the word name with the name of your course (e.g. Beginning
      7. Remove the word course that remains just in front of the course name
         you just added.
   If you choose to use the footer for some recurring piece of information, such
   as your email address, again highlight only part of the text, type your content,
   then delete the remaining text you don't need.

Create a New Page
      1. Double click template.html in the Site Manager.
      2. From the Nvu File menu, choose Save As and save the new file with a
         new name into your site folder. You are now ready to start editing the

Title the Page
   The page title (not to be confused with your level 1 heading) doesn't show up
   on the Web page itself. When you add the page to a content module in
   WebCT, though, the title will become a link in the module's table of contents.
      1. From bottom of the Format menu, choose Page Title and Properties.
      2. In the Title box, type the title you want and click OK. (Leave the
         boxes on that screen alone.)

Add a Level One Heading
   This top heading, or “Heading 1,” should be the main heading for the page. It
   will probably be the same as your page title, or an expanded version of your
   page title.
      1. Select only part of the line that says H1 Heading. You might want to
         select only the H1, for example.
      2. Type your heading.
      3. Remove what's left of the original H1 Heading text.

Add Paragraphs
  Unfortunately, it’s possible in Nvu to create a block of text that has no
  markup, not even a <p> tag to say it’s a paragraph. In that case, the menu on
  the toolbar simply says, Body Text. To turn a block of text into a real
  paragraph, click anywhere in the block and change that menu to Paragraph.

Moving Content from Word to Nvu
  If you copy text from Microsoft Word and simply paste it into Nvu, your text
  will bring a lot of unneeded markup with it, cluttering and confusing your
  HTML. To prevent that, Nvu has a Paste Without Formatting command.
  Here are the steps for moving text from Word to Nvu:
      1. In your Word document, select the text you want to copy to your Web
          page. (If you want the whole document, choose Select All from
          Word’s Edit menu.)
      2. Copy the text. (From the Edit menu, choose Copy.)
      3. Switch to your Web page in Nvu and click where you want to insert
          the text.
      4. Choose Paste Without Formatting from the Edit menu in Nvu.
      5. Select your newly-pasted text or choose Select All from the Edit menu
          in Nvu.
  With the text still selected, pull down the paragraph format menu, which is
  just below the “New,” “Open,” and “Save” icons on the toolbar, and change it
  to Paragraph. Now you should be ready to begin formatting your text.

  Troubleshooting: “Paste Without Formatting” is grayed out
  If Paste Without Formatting is grayed out when you want to paste into Nvu,
  go ahead and use the regular paste command. Then, still in Nvu, select what
  you just pasted and choose Cut from the Edit menu. Now, use the Paste
  Without Formatting command to put the text back in your page.
  Unfortunately, this trick sometimes fails, especially on the Windows version.

  Troubleshooting: The space between paragraphs is more than one
  blank line
  After you paste text into Nvu, select it, then choose Paragraph, check the
  markup in Source view. If you see a lot of <br> tags among your <p>, you
  will want to remove the the <br> tags.

Make Subheadings
  As you add content, make headings by choosing the appropriate heading level
  from the drop-down menu on the Nvu toolbar. Usually, you want just one
  Heading 1 (see above). For subheadings choose Heading 2. To break a level-
  2 section into smaller subsections, use Heading 3 for the subsection headings.
  Let the style sheet control how these headings look. Don't make fake headings

  by highlighting paragraphs and making the text big and bold. If you want to
  change the way headings look, change the style sheet. To make a heading…
     1. Type the line of text you want to be a heading and press your Return
        or Enter key.
     2. Click once in the heading text to place your cursor there. (You don't
        need to highlight the whole block of text.)
     3. From the Choose a paragraph format drop-down menu on the
        toolbar, choose Heading 2.
  The whole block of text will take on the font, size, color and other
  characteristics declared for second-level headings in the template style sheet.
  You won't have to do any of that formatting.
  Equally important, in the page's HTML, that text will be marked with an h2
  tag, the semantic encoding that will make your page more adaptable and
  accessible. People with visual disabilities using screen readers, software that
  reads Web pages out loud, will hear that that block of text is a heading. What's
  more, they will be able to jump from heading to heading and skim the page,
  much like other people would visually.
  Finally, the search feature in a WebCT content module gives students an
  option to search just on headings. That way they can find where something is
  treated as a topic, rather than just find everywhere a word appears on a page.
  That refined search only works on text that has been encoded as a heading, not
  on headings that have been faked by selecting paragraph text and making it
  big and bold.

Make Lists
  As with headings, properly encoded lists help people with disabilities make
  sense of Web pages. When listening to a page, a screen reader user may hear
  that they have come to list, may hear how many items are on the list, and may
  hear the reader's voice change pitch as it reads down the list to help the
  listener gage where they are in the list.
  To start a list, click either the Numbered list button or the Bulleted list
  button on the Nvu toolbar. You can also make a series of paragraphs into a list
  if you highlight the items then click one of the list buttons on the toolbar.

  Change List Numbers to Letters
   As you may guess, the Numbered list button will number your list items 1, 2,
  3 and so on. You can change that to other ordering schemes, such as A, B, C;
  a, b, c; I, II, III or i, ii, iii.
     1. Click anywhere in the list.
     2. Right click on the ordered list tag (<ol>) on the status toolbar, which is
        in the lower left corner of the Nvu interface.
     3. Choose Advanced Properties.

     4. For Attribute, choose type.
     5. From the Value menu, choose A, or whatever scheme you prefer.
     6. Click OK.

  Change a List's Starting Value
  Suppose you interrupt a list with an explanatory paragraph, then want to
  continue the list after the paragraph, with the numbering taking up where it
  left off.
     1. Click anywhere in the list whose starting number you want to change.
     2. Right click on the ordered list tag (<ol>) on the status toolbar, which is
        in the lower left corner of the Nvu interface.
     3. Choose Advanced Properties.
     4. For Attribute, choose start.
     5. For Value, type the starting number you want.
     6. Click OK.
  If you have changed the list to letters instead of numbers, the list will start
  with the letter that corresponds to the number you set for the start value. For
  example, if the type value is set to A, and the start value is set to 4, the list
  will start with a D.

Add Pictures
  Before you add an image to a Web page, you should make sure it’s the size
  you want it to appear on your Web page. Use an image editor to reduce the
  image size, if necessary. Most digital cameras make high-resolution pictures
  that are too large to use on a Web page straight from the camera. They will
  have to reduced.
  The critical measure is in pixels. Ignore any dimensions you see expressed in
  inches; they don't apply on the Web. Here are some typical pixel dimensions
  to shoot for:
      • Small icon: 35 pixels x 35 pixels.
      • Thumbnail of photo: 75 pixels x 75 pixels.
      • Small headshot: 75 pixels wide x 100 pixels high.
      • Medium headshot: 150 pixels wide x 200 pixels high.
      • Small landscape: 400 pixels wide.
      • Quite large landscape: 600 pixels wide.
  When you add a picture to a Web page, the image doesn't become part of the
  HTML file. Instead it remains a separate image file and is viewed as if
  through a window in the page. So you will have to upload the image file into
  WebCT along with the HTML file.
  Steps for adding a picture:

     1. After you have made the picture the size you want it, put a copy of the
        image file into your site folder. The format should be .jpg or .gif.
     2. The Web page where you want to put the picture needs to be saved
        into your site folder, too.
     3. With both the image the page saved in your site folder, and the page
        open in Nvu, place your cursor where you want the picture on your
     4. Click the Image icon on the Nvu toolbar.
     5. Click the Choose File button, navigate to the image file in your site
        folder and choose Open.
     6. In the Alternate text box, write a brief description of the photo. It may
        take a word or two. Or it may take a short sentence or two. Write only
        what someone who can't see would need to hear to get the message
        you want to convey. If the picture is purely ornamental and would
        have no meaning for someone who can't see, click Don't use
        alternate text instead.
     7. Click OK.

Add Optional Styles From Template

  Add a Style to Float an Image Left or Right
  The template has two class styles made for photos. One, called photo_l, will
  align the image with the left edge of the text column. The other, called
  photo_r, will align the image with the right edge of the text column. Both will
  also add a border around the photo. Here is how to apply a style to an image.
     1. Click once on the image.
     2. Right click the <img> on the Status Toolbar.
     3. From the Classes list, choose photo_r or photo_l.

  Add a Style to Set Off a Paragraph
  The template has two classes that set off, and give extra visual emphasis to, a
  paragraph. The are called setoff and pullquote. Here is how to apply one.
     1. Click once anywhere in the paragraph you want to set off.
     2. Right click the <p> tag in the Status Toolbar
     3. From Classes menu, choose setoff or pullquote.

  Add a Warning
  One class style in the template, called warning, can be applied to a word or
  phrase inside a paragraph to create a warning.
     1. Select the text you want to visually emphasize for a warning.

     2. From the Apply a class to a selection menu on the toolbar, choose
  This will mark the selected text with a <span> tag and will assign that tag the
  class named warning.

Make a Table
  Tables on the Web fall into two broad categories. Layout tables just position
  items on a page. Many Web designers are abandoning that use of tables,
  though. This section is about the other kind, data tables.
  In addition to rows and columns of data cells, a data table has row or column
  labels called header cells. A data table may also have a caption, a label for
  the whole table. Optionally, a table may have a summary, a description to
  assist search engines and people with disabilities. The summary doesn't show
  in most Web browsers, but will be spoken by a screen reader.

  Insert a Basic Table
     1. Click once to place your cursor where you want to add a table to your
     2. Click the Table icon on the tool bar.
     3. Click the Precisely tab and enter the number of Rows and Columns
        you want. If you aren't sure how many you need, give it your best
        guess. You can add or subtract rows or columns later.
     4. Enter a Width in either pixels or % of window.
     5. Set the Border to 0.
     6. Click the Cell tab.
     7. For Horizontal alignment, choose Left, for Vertical alignment,
        choose Right.
     8. Set both Cellspacing and Cellpadding to 0.
     9. Click OK.
  Nvu will show cell borders as dotted red lines. To see how the table will look
  in a browser, click the Preview tab at the bottom of the Nvu window.

  Add Table Headers
     1. Right click in a cell that will hold a header and choose Table Cell
        Properties from the pop-up menu.
     2. Change the Cell Style to Header.
     3. Repeat for other header cells.
   Now when you type in any of the header cells, the text will take on the
  appearance declared for table headers in the style sheet. More important,

  though, a screen reader will now recognize the headers, making it easier for a
  screen reader user to navigate the data.

  Add a Table Caption
  You can add a title, or caption, to your table.
     1. Click once anywhere in your table.
     2. Click the Table button on the toolbar.
     3. Click the Table tab at the top of the box that appears.
     4. For Caption, choose Above Table and click OK.
     5. Click once directly above the top edge of the table. You should see
        your cursor centered over the table.
     6. Type your caption. It will automatically be formatted by the style

  Add a Table Summary
  Sometimes the point of a table full of data is a lot easier to get when you look
  at it than if you listen to the data read by a screen reader. That's when a
  summary can make a big difference. It helps the listener get the gist of what
  the table represents.
     1. Click once anywhere in your table.
     2. Click the Table button on the Nvu toolbar.
     3. Click the Table tab at the top of the box that appears.
     4. Click the Advanced Edit button.
     5. From the Attribute menu, choose summary.
     6. Type your summary text in the Value box.
     7. Click OK.
  You will now have a summary, although you won’t see it on a Web page.

Make Links
  When clicked, a link tells a browser to open another page, jump to a different
  spot in the current page or start a new email message with the address filled

  Link Etiquette
     • Link text should describe its destination.
     • Avoid links that say “click here.”
     • Avoid link text that is just a URL.

  Link to Another Site
     1. Highlight the text you want to make into a link.

   2. Click the Link icon on the toolbar.
   3. For Link Location, type the URL, including the “http://”
      (Tip: To avoid mistyping the URL, go to the page in a browser. Select
      and copy the whole URL from the browser's location bar. Then paste
      that URL into the Link Location box.)

Link to Another Page in Your Course
   1. Create the page you want to link to and put it into the same folder as
       the page you are working on.
   2. Highlight the text you want to make into a link.
   3. Click the Link icon on the toolbar.
   4. Click “Choose File,” find the file you want to link to and click
   5. Click “OK” to finish the link.

Link to Another Spot within a Page
Before you create a link to another spot in a page, you need to give that spot a
unique ID.
   1. Click anywhere in the heading, paragraph or other element you want to
       link to.
   2. Right click (control click on a Mac) the element's tag on the Status
       Toolbar at the lower left of the Nvu window and choose Advanced
   3. For Attribute, choose ID. For Value, type a one-word name that
       describes what you’re linking to. (No two IDs on the same page may
       have the same name.)
Once you have created your ID, you can now create a link to jump to it.
   1. Highlight the text you want to make into a link.
   2. Click the Link icon on the toolbar.
   3. For Link Location, click the arrow to the right of the box. The name
       of the ID you created will show there where you can choose it, then
       click OK.

Make an Email Link
For most people, clicking an email link will open an email program, such as
Outlook, with a new message that has the address already filled in. That won't
work for everyone, though.
   1. Highlight the text you want to make into a link.
   2. Click the Link icon on the toolbar.
   3. Type the email address in the Link Location box.
   4. Check the box that says The above is an email address and click

Customize Your Style Sheet
  You can tweak text colors, background colors, fonts and many other aspects
  of your Web pages’ design. Because your pages all link to the same style
  sheet, a file in the template_files folder, a change made for one page will be
  matched on all pages of your course.
     1. From the Tools menu, choose CSS Editor.
     2. Click the twirly arrow in the upper left corner to reveal the list of
     3. Click on any selector to see or modify its styles.
     4. Select the “General” tab at the top of the CSS Editor to see all styles
        for that selector.
     5. Select other tabs to edit the selector's properties. (It's probably best to
        modify only fonts and colors and not the layout properties under the
        “Box” tab.)


To top