Frequently Asked Questions for COMS326


"FAQ" lists once were literally that -- topics that came up so many times on Internet discussion groups called "Usenet" that volunteers would compile lists to save participants the trouble of answering them over.  (Some of those old "FAQ" documents grew to dozens of pages.  Sample -- if you like recreational boats.)

Back to COMS 326: I'll add to the top of this list whenever a question comes around a few times. Use Command-F or Control-F within your browser to search for key words, such as "Dreamweaver," "TextEdit" or "menu." All the questions and answers are on a single page, which you can print.

2012-13 additions:

Classroom in a Book problems
Why does changing the CSS style rules for "nav" not affect my vertical navigation menu?

The Adobe folks made the Dreamweaver Classroom in a Book project confusing in the transition from the DWCS5 (HTML4) to the DWCS6 (HTML5) edition of the book by calling two different things "nav."; one was inherited from the original design of the sample page, another was put in to demonstrate one of the new HTML5 page elements added to the Dreamweaver toolbox.

Background: In HTML4 there was no "nav" tag (element) in the HTML language itself; now in HTML5 there is. Authors of the HTML4/CS5 version of the book and designers of Dreamweaver's bundled "layouts" -- like designers in general -- often created a class called ".nav" and applied it to <div> or <ul> elements to create navigation menus. The new "nav" element can do the same thing.

New way with element: <nav><p>Home | Contact | About</p></nav>
or <nav>Home | Contact | About</nav>

Old way with class: <p class="nav">Home | Contact | About</p>
or <div class="nav">Home | Contact | About</div>

There's nothing that says you can't use the same names, but it's definitely confusing to put both in one document -- like having two guys named "Zach" in the same room. Trying to pick the right one from the tiny type of the Dreamweaver style panel doesn't help!

The good news: Once you understand this, you probably understand the difference between classes and elements in HTML! And you'll understand that HTML keeps evolving, so part of the Web designer's job is to keep in touch with new developments...

As HTML5 is more widely used, you'll see more pages using new HTML element names like header, aside, footer, nav, article, section in place of generic div elements with those words as class or ID names. See Schema.org and HTML5 Doctor for more discussions of HTML tags being used to (we can hope) structure pages in clear, meaningful ways.

Back to your exercise:

  1. The horizontal menu "Home | Contact | About" is a <p> paragraph in a <nav> element, so its styles are set as "nav p {}"; having no period in front of "nav" indicates the new HTML "element" called "nav"
  2. BUT the vertical menu (Green News, Green Products etc.) is a <ul> list of a "class" called "nav" -- so its styles are set with "ul.nav {}" (the period before .nav indicates a "class name")
  3. The same vertical menu could have been styled to expect the <ul> element to be inside a <nav> element -- in which case your page would have a style rule block of "nav ul {}" (Because the horizontal menu is a <p> and the vertical one is a <ul>, they would have separate styling.)
  4. Whichever approach you use, remember that each menu also has anchor tags have to be styled as groups of separate rules for each menu. Dreamweaver's layouts often combine some of them -- one set of styles to cover "link" and "visited"; another to cover "active," "hover," and "focus."
  5. Because of the combination of "ul.nav" coding and "nav ul" coding, you also may have to make changes in the exercise that creates a print.css stylesheet for the page.

In my opinion, now that "nav" is available as an element name, pages that have more than one navigation menu should create class names for them -- maybe ".vmenu" for "vertical menu" and ".hmenu" for "horizontal menu."

Even better, they could assign class name that semantically indicated the contents of each menu. The horizontal menu of site information links (home, contact etc) could be "nav.siteinfo" and the the vertical menu of GreenStart topics (News, Products etc) could be "nav.greentopics" -- whichever would be clearer to you and to the people working with you on the project.

If this still isn't clear, ask me in class!

 

Why is this happening? My butterfly is above or below the header graphic and nav menu, not floating neatly on top.

Answer:

The main problem using Dreamweaver's "design view" to position elements: The instructions will tell you to click the mouse inside some page-element of the layout, then to "press the left arrow key" or "press the right arrow key." That means the keyboard's cursor-arrow keys. Pressing either key moves the insertion point OUT of that page element, so that the thing you insert will come before or after it.

If you missed a "press left arrow" or "press right arrow" step, you may have inserted the picture or other item INSIDE an element instead of before or after it. The butterfly should be inserted before the header element. The nav element should be after the header element. The p element should be inside the nav element.

The easiest way to see what happened in Lesson 4 is to look at the code and compare it with the completed page included in Lesson 5. Notice that the div (or ap div) with the butterfly logo comes BEFORE the "header" element, not inside it.

Also notice that the "nav" element, with a "p" element inside it, comes after the "header." Does that empty "header" element look wrong to you? It's not! Remember that you inserted the GreenStart header graphic as a background for the header element -- and background images are linked to the STYLE sheet, not identified here in the HTML for the BODY of the page.

Depending on the edition of the book you are using, this is roughly what the code should look like:

<div class="container"> <!--this functions like the "wrapper" on earlier pages you made-->
<div id="logo"><img src="images/butterfly-ovr.png" width="170" height="158" alt="GreenStart Logo"></div>
<header></header> <!-- The header background image is identified in the style sheet -->
<nav>
<p><a href="#">Home</a> | <a href="#'">About Us</a> | <a href="#">Contact Us</a></p> <!-- Because this is a "p" element, it will have a bottom margin by default, so you should set the "nav p" margins to zero to avoid leaving a full-page-width white bar beneath the menu -->
</nav>
<div class="sidebar1">
<nav>
<ul> <!-- and so on into the page... -->

Caution: If you noticed a problem and tried to fix it by dragging that butterfly, you may have changed some of the code of the page in unpredictble ways. Its position was written into the style sheet by Dreamweaver, based on numbers you typed into a fill-in panel. Dragging the image changed those number.

Help! Chapter 5 says I can move the location of style rules around using the CSS Styles panel, but when I try to click and drag a style name, nothing happens.

Answer: The book expects you to do that exercise in "Design" view; if you are in "code" or "split" view or "live" view, you may not be able to click-and-drag in the CSS Styles panel. Also remember that changing the order of some styles can change the "inheritence" of style values. Read that part of the book carefully.


 


Why do I get a white border beneath the green nav menu?

This problem with the first GreenStart Page (Classroom in a Book p. 90-91) looks like a missing step in the book itself. Blank space is usually created by padding or a margin. It looked like the "nav p" box -- the paragraph element within the nav element -- was showing a bottom margin on the first student versions of this page. I think that was the problem.

That box should have its margins set to zero; either the book skipped that step or three of us missed it! If I'm right and the book is in error, try adding another step to page 91, step 24: With "same for all" checked, set margins for "nav p" to zero as shown in the picture below. (Thanks to Matt Kiyfes and Eric Thornhill for helping spot this problem and figure it out!)

If you see a place in the book where it tells you to set this margin to zero, let me know!

Learning from the problem: The deceptive part of that "CSS Rule definition -- Box" panel below is that the Margin fields all show as blanks when you start, but in CSS coding -- and in these Dreamweave style panels -- blank and "0" don't mean the same thing.

That's because some HTML elements include margins (or padding, or a font size, etc.) by default. The P paragraph element is one example. Remember how plain paragraphs (like the one above and this one) always have space between them? That space we take for granted is a bottom margin of a little over one em, but it doesn't show up in the CSS Rule table because that space is a "default," not a CSS setting.

Why don't my borders appear?

Answer: The problem may be that you are using the one-word CSS property "border" without understanding that it is "shorthand" for several CSS properties, one of which is required: border-width, border-style (required) and border-color. So, if you say border:10px gold;, you won't get a fat gold border, because you haven't said what kind (style) of border. Be sure to include all three values to cover all three properties: border:10px solid gold;.

See your textbook or the W3Schools.com "border" page for even more border properties and values -- for instance, you can give each side of a box a different border style, color or width.

Dr. Stepno, may I use Dreamweaver on my midterm project?

Answer: YES, but your project should demonstrate what you have learned about HTML and CSS, not just be an exercise in picking a Dreamweaver layout. For a quick review of HTML, try CodeAcademy.

See my Notes on using Dreamweaver.

 | Top | 


Styles panel in Dreamweaver
Where does Dreamweaver show all the style attributes I can add to a CSS rule?

The CSS Styles Panel can display an outline list by category or an alphabetical list of attributes. If the Styles panel is hidden, make it appear by choosing it from the Window menu, and resize it as needed to see column details. It can display all the style rules in your document or the rules applied to the "current" style selected in the main editing window.

For example (see image at the right), if you clicked inside a paragraph to select it, then chose the "Current" styles button, you would see a summary of the current styles applied to that Selection, plus a list of properties that can be applied to the paragraph tag.

See the category view at right, with small icons at the bottom to switch to alphabetical view.

The two lists are demonstrated about 5 minutes into this 10-minute CSS Styles Panel tutorial video from Lynda.com

Lynda.com's James Williamson also has a series of lessons on the new Dreamweaver CS6, a software upgrade being installed in our labs just in time for fall semester 2012. Lynda.com courses are available by subscription, but most of them include free samples.

Here's a sample, on using a new "CSS Transitions" panel, and another on using the "quick tag editor" -- a very powerful and easily overlooked feature. From a separate Lynda.com course, here's a video on understanding "document flow" in CSS, from Joe Lowery on Layouts with CSS in Dreamweaver.

 | Top | 


How can I tell whether I'm allowed to use this cool picture on my site?

The screen-captures you did for your midterm review project should fall under the rules of "fair comment" as well as nonprofit educational "fair use" -- you are discussing someone's creative public work, illustrating your discussion, and not just unethically "borrowing" part of someone else's site to make yours look good.

For your final project, create your own images, or use images that are clearly identified as licensed for re-use or in the "public domain," or request permission from the images' creators. Always cite the creators or owners as sources and link back to their originals.

Look for authorship and copyright information on the page where you found the image. "Creative Commons" is a form of copyright in which content creators specify the rights they are and aren't giving away. (Key sentences from that search-aggregation page: "You should always verify that the work is actually under a CC license by following the link...  If you are in doubt you should contact the copyright holder directly, or try to contact the site where you found the content.") For example, someone may provide images for unlimited use as long as they get credit and the images are not altered.

To learn more about images on a particular site, look for the "CC" in a circle, or references to key words like rights, license, ownership, conditions of use, or terms of service.

 | Top | 


If I have a terribly long page like this, how can I link to its paragraphs the way this page does?

Piece of cake. Add id="nameornumber" to the first tag for that block (h2 or h3, p, div, etc.), giving it a unique id name or number (in place of "nameornumber"). A descriptive name would be best, but if you're in a hurry, numbers work. Then make a list of the topics and link each one to "#nameornumber" -- view the source of this page to see an example.

On this page, each topic has an H3 heading, so I added the ID tags there, but you can do the same thing with DIVs, paragraphs -- any HTML box tag. I made my links a numbered list using an OL tag, but you can use bullets or plain paragraphs. It's up to you. I added an ID="0" to the H1 tag, so that I could link to it with the word "Top," like this:

 | Top | 


Oh no! It's time for midterm (or final) grading and all my stuff is gone

Don't Panic! Your professor has had enough computer disasters to give everyone the benefit of the doubt on problems. Just save early and often, backup your work, and be careful. More often, things aren't really "gone," someone just wasn't paying attention to where an editing program was saving the document. If you are shifting between Windows computers and Macintoshes, you may have saved things in a local folder on a lab computer instead of saving them in the coms326 folder of your "H: drive" public_html space. Or, perhaps there is simply a typo in your code that renders something invisible.

It is possible to accidentally delete something from your coms326 folder, your public_html folder, or your H-drive. BUT don't panic! Radford has a backup system for all of those spaces. Call the Help desk at ext7500 if you really have lost something.

For written instructions, see the IT knowledgebase article, Recovering a Deleted File on your H:/ drive (Shadow Copy)

Accidents happen -- be careful with the restoration process to make sure you only restore the latest and greatest. Inspect the file names and creation dates carefully -- don't replace your November version of a page with the September version by mistake! You may want to visit the Help Desk to go over the procedure in person.

 | Top | 


How do I add circles or arrows to a screen capture in my review project?

line tool hidden under pen tool menuI've tried to draw arrows freehand with the paintbrush or spray can in Photoshop, but the results always look sloppy. shapes toolsPhotoshop has a "custom shapes" library as well as a line-drawing tool with arrowheads, so give them a try. The Line Tool is the diagonal-line icon visible on the top menu after you choose the pen-point tool.

The custom-shapes tool is the amoeba-looking blob next to the Line Tool. Experiment with it and the Free Transform Path menu, which will help you rotate your arrow, star or other shape into position. See "Drawing shapes" in Photoshop help or any reference book, or do a Google search for "Photoshop arrows." You'll find downloadable collections of clip-art arrows, but also more Adobe's own tutorial (see "Arrowheads Start And End") and helpful items like these, some of which may be for earlier versions of Photoshop.

 | Top | 


Can I have a search box for my project site?

Yes. Google provides embeddable search codes for you. See Dave Taylor's how-to article

 | Top | 


How do I make part of a page a scrolling box of text?

There are several ways. See my scrolling-demo page, which also uses a CSS drop shadow to make the box stand out on some browsers.

 | Top | 


How do I make something stay in one place while the page scrolls around it?

That's called "fixed positioning," and you do it in the CSS for a div or other object. See this w3.org page about a "fixed position menu" (or this more general page about "absolute" and "fixed" positioning) or w3schools on fixed positioning, or use Google to search for "Css fixed position" with the type of object (image, logo, etc.) you want to stay put.

You also can make everything scroll, while a "fixed" background stands still. The secret -- two extra lines in the "body" section of your CSS:

 | Top | 


How do I put audio on a page?

If you have room in your RU account for the audio files, usually "xyzzy.mp3" files, you can just link to them the way you would an HTML file, and most visitors' browsers will either download the file or launch an external audio player to play them. Just put the file in a folder and link to it with code like this:

<a href="myaudio/firstprogram.mp3">Listen to five minutes from my first radio show</a> (MP3)

W3Schools has a tutorial on several kinds of audio players. Pick one that works for you!

If a browser recognizes the new HTML5 codes, you can also embed a customizable player with the tag "<audio>"

See this page for details at w3.org

Other methods of including audio players involve using a Flash or Javacscript "player" code stored on your computer or elsewhere. Google provides an audio player explained here. You can customize a javascript and css player from JPlayer.org by embedding some code in your page and editiing-in the name and location of your audio files.

You also can embed audio files stored on external servers that provide "object" or "iframe" codes for you to embed, such as the old radio shows I like at archive.org. Note that embedding a device on you page makes the page rely on its original source: If archive.org is "down" or having network trouble, the player will appear on screen, but will not work.

This commercial stream player is from there, with dozens of commercials; your visitor's browser must have Flash installed to use it. Just click the fast forward button to skip to a new one:

 | Top | 


Are there any answers about Dreamweaver here?

Some... But there are more on my "Open Dreamweaver and the textbook..." page, my Dreamweaver links page, and my Beginning Dreamweaver page.

How do I test a styling change quickly?

Enter an "in-line" style temporarily. For example, if half of your page has dark type on a dark background and you want to try a light background, surround a dark section with DIV tags and, instead of fully coding a "class", put the "style declaration" you want to test inside the opening DIV tag, like this:

<div style="background-color:tan;"> ALL OF YOUR CONTENT </div>

Then, if you like the results, make a new class in the page's main style sheet, apply the background color change to that class, and change the DIV tag to apply that class to the DIV. In this case, you might create a class called ".tanbox" in the style sheet, and the DIV tag would become:

<div class="tanbox"> ALL OF YOUR CONTENT </div>

Having "tanbox" as a class would allow you to have more than one tan box on that page, or other pages that use the same style sheet. You probably will want to fine-tune the color choice, too. Most monitors support millions of colors, but browsers only recognize 17 standard color names, with some support for another 130.

How do I put special characters on the screen?

 | Top | 


What can a "Web portfolio" look like?


You will find lots of examples in my Delicious bookmark collection: http://delicious.com/stepno/portfolio or http://delicious.com/stepno/portfolios


What's new in Web journalism?

 | Top | 


What are the rules for official RU pages?

Where were those guidelines for official Radford University Web pages? They were in a PDF file titled Radford University Web Guidelines Revised, linked to the Division of Information Technology newsletter.

 | Top | 


Complaint: My cursor is boring

See HTML CSS Cursor codes that work on all browsers.

Note that some javascript cursor gimmicks only work on Internet Explorer, including the cursor effect scripts in this library, but some work in Firefox too. Hint: When a script's authors say something works in "NS6" they mean Netscape, precursor (no pun intended) of Firefox.

 | Top | 


How to I make a more interesting background for a page?

You can use an image as a background for any block-style element of a page, including the body, a content or wrapper div, even a menu item. Notice how the rollover-menu in the right column of the course home page uses background images: http://www.radford.edu/~rstepno/326/

A word of warning: Just in case someone's browser can't display your image, make sure the background-color of that block is as light or dark as the background-image. That way, any text in the block will still be visible.

Here's an even more advanced background technique, Creating gradients with CSS:

Background gradient with css

 

 | Top | 


What is the easiest way to insert an image on my Dreamweaver page and wrap text around it?

The goal: to have a picture show up to one side of your text, like the ones on the right.

    just a test image of bob
  1. Create a page using any of Dreamweaver's layouts, or open an existing page using Dreamweaver.
  2. SAVE the page as "whatever-you-want.html" somewhere in your website.
  3. For simplicity, put all images you want to use into the same folder as that html page. (Note: You also can use an "images" folder or insert images from any folder on your site, but inspect your code to make sure Dreamweaver doesn't leave you with image addresses that say "file:///blah/blah..." All image addresses should use only folder and file names, not the word "file:///"; that's generally a sign that you inserted an image without saving the HTML file first.)
  4. In Dreamweaver's "Design" view, place your cursor just before the text you want wrapped around the picture. (On a complex layout, use "Split" view to inspect the code and double check that the cursor is really where you want it.)
  5. From the menu at the very top of the screen, choose Insert, then Image.
  6. Navigate to your .jpg or .gif image file, and select it. IF the image conveys information that is not presented elsewhere on the page, type a brief "Alt" (alternative) text phrase. It should be just enough to inform someone browsing on a text-only device. Click "OK." (Not every image needs "alt" text. If the image is purely decorative, say alt=""; but if the image is a graphic logo with the name of your company in fancy type, the "alt" text might repeat the information: "The New York Times." If it is a navigation tool, offer a text equivalent, such as "Next" or "Home." A photo related to a gardening essay might have an "alt" text of "Blanket of pastel flowers outside McConnell Library" IF the scene is mentioned in the essay. More on "alt text." Examples as quick table.
  7. Right-click or Ctrl-click on the image to make a formatting menu pop up.
  8. From the pop-up menu, choose "CSS" and "fltrt" or "fltlft," the two floating "classes" provided in Dreamweaver page layouts. (If you have created a page without using one of Dreamweaver's layouts, you can copy the ".fltrt" ".fltlft" and ".clearfloat" classes from any Dreamweaver page layout to your page's CSS coding to add them to that pop-up menu. Or you can add "float" as an inline style to your image tag with an added margin, in the form style="float:right; margin-left:8px")
  9. If you decide you want the image next to a different paragraph, you can just drag it with the mouse, or move the code in Code view. For example, notice how the top of the image and the #1 in this list are aligned, leaving no extra white space on top of either the text or the picture. (I turned on a border around that image so you can see where it's top and left edges end.)

Note1: Do not float an image to the left of a bullet list or number list. The bullets or item numbers will overlap the image. (If you see a good-looking page that breaks up the natural line of a list this way, send me an address and I'll figure out what the designer did.)

Note2: The older HTML code "align=right" within an image tag still works, but CSS is more modern.

 | Top | 


 

How do I select, create or modify CSS styles from inside Dreamweaver?

Try this CSS Styles Panel tutorial, a 10 minute video, free from the Lynda.com tutorial company as a sampler of a much larger Dreamweaver tutorial ($150, or by subscription). The demo uses Dreamweaver for Windows, which is almost identical to the Mac version, but has useful "outline" lines in the Styles Panel. The tutorial is very good at explaining the difference between "All" and "Current" tabs in the panel.

Lesson 6 in Dreamweaver CS-5 Classroom in a Book is also a great introduction to the Dreamweaver CSS tools.

 | Top | 


 

My menu disappears into the background every time I return to the page! How do I keep my link colors from changing?

Answer: Sounds like your CSS is styling the "visited" state of your links to be the same color as your page background. Remember that links can have different attributes for "link" (unvisited), "visited," "hover" (when the mouse passes over them) and "active" (while you are clicking them). You can also style your links to use different sets of colors on different parts of a page. See my notes on adding special styles for links that are in menus. Also see the basic CSS tutorial for styling links throughout a page on W3Schools CSS link tutorial. (If you have separate background colors for different page divisions, you'll have to provide different link colors for that part of a page, usually using a new set of anchor-link styles for that div. )

 | Top | 


Most frequently asked TextEdit question:

On Tue, Sep 14, 2010 AStudent@radford.edu> wrote:
> Dr. Stepno,
>
> I'm only having one issue: now when I try to open my 'first' file in textedit, for some reason,
> it doesn't open up as the code that I wrote.
> Instead, it opens up what my page would look like in a web browser as a webpage.
> I cannot edit my file anymore!
>

Sounds like you don't have that copy of TextEdit set to ignore Rich Text when
opening an HTML file.

Here are the two "preferences" panes for TextEdit. See the right-hand one.

Preferences for TextEdit - left paneRight pane of TextEdit prefs

The other possibility is that you're just clicking the document icon,
which causes the Mac to open an HTML file in the browser, not an
editor. (You can open HTML files with many different programs.)

Either drag the document icon onto the TextEdit icon or run TextEdit
first and use File:Open to open your document.
 

Back to top of page | Back to COMS326 home page