Help! My Web page doesn't look like it is supposed to!

  1. Ask yourself, exactly what isn't working (...the header line is just regular text)
  2. Look at your HTML - find the line(s) that are supposed to do the job (...the <h2> tag)
  3. Examine *that* line ... the problem is likely there. Typo, etc.
  4. Also check the line above... Missing the closing tag? Missing the CSS end-of-line semicolon?

I'm making changes in Notepad, saving it but the changes don't show up in my browser!

  1. Are you refreshing / reloading the page in the browser?
  2. Are you looking at (in the browser) the same file you are saving in Notepad?
    • In Notepad, open the Save As dialog to see where you are saving the HTML file.
    • Compare that location with the location of the file you are loading in the browser.
  3. Are you saving the file as an HTML file? It must end in .html or .htm
    • Make sure you have the "Hide extensions of known file types" turned off
    • Otherwise you can't see the file extension actually being used.
    • See pg 15 of the book for guidance.
    • Vista is a bit different...go to Organize->Folder and Search Options->View tab to find it...
top

Restore the student site homepage

Since you yahoos seem to have a tough time copying your pages to the right place and keep destroying the homepage for the student site, I've created a tool that will restore the homepage.

Just click this magic link and all will be as it should be!

top

How to publish your website

I suggest using FireFTP which is a plug-in for Firefox:

  1. Install FireFTP:
    • In Firefox, go to the Add-ons Manager
    • Search for FireFTP, locate it in the list, click the Install button, & follow the instructions
    • You may have to exit all Firefox windows & restart Firefox after installing
  2. Run FireFTP
    • It can be found in the tools menu
    • ...or it can be found in the main menu of Firefox, sometimes under Web Developer
  3. Setup the connection - click the Create an account... button:
    • Account Name: Web Dev Class
    • Category: you can ignore this...
    • Host: 74.220.207.171
    • Login: kingsstudents@mhthompson.com
    • Password: ... see Mr. T for password
    • Click the Connection tab...
    • Port: 21
    • Click OK to close the Account Manager window
  4. Set FireFTP to start with your student folder:
    • Click the Connect button
      • The left panel is your computer...
      • The right panel is the web server computer...
    • In the left panel, browse to your student folder on the Q: drive
    • In the right panel, browse to your student folder
    • Click the Edit button
    • Select the Connection tab
    • In the Initial Directories section click both Use Current buttons
    • Select the Keep directories in sync while navigating option
    • Click OK
  5. To publish a file or folder:
    1. Verify the left and right panels are showing the proper (and same) folder
    2. Select the file/folder(s) in the left hand panel
    3. Click the little arrow pointing to the right in the center bar between the two main panels
    4. You are done!
  6. To view your published web site, browse to students.mhthompson.com/YourFolderName


top

How to resize a picture

You don't need Photoshop do resize a picture. There are many free options:
  • Microsoft Office Picture Manager (well...free if you Microsoft Office...)
  • Picasa from Google
  • GIMP

Unfortunately our classroom computers do not have Microsoft Office Picture Manager on them anymore. So we'll need to use GIMP to resize.

top

How to set matte color using GIMP

  1. Open the image in GIMP
  2. Set background color to desired matte color:
    step 1 step 2
  3. GIMP calls the process "Semi-Flatten" not "Matte":
    step 3
  4. Save as a GIF:
    step 4
top

XHTML & CSS Validators

top

Page Layout Guides

top

How to embed Flash videos *AND* get it to still validate!

YouTube will give you an <object> <param> <embed> set of code to copy-n-past.

Replace it with the following.

<object data="XXX" type="application/x-shockwave-flash" class="YYY">
<param name="movie" value="XXX" />
<param name="allowScriptAccess" value="sameDomain" />
<param name="quality" value="best" />
<param name="bgcolor" value="#FFFFFF" />
<param name="scale" value="noScale" />
<param name="salign" value="TL" />
<param name="FlashVars" value="playerMode=embedded" />
</object>

Also substitute:

  • The URL of the video for the XXXs above.
  • Your CSS movie class name for the YYY (so you can style). Minimally you need to style the width and height.

For an example, see the Pix & Movies page in the Robotics class section.

top