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

  1. Run Expression Web
  2. From the menu, select Site -> Manage Sites List
  3. Click the Add button
  4. Find your student folder on the Q: drive
  5. Click the Add button
  6. In the Managed Sites List window, double-click on your name
  7. Click the Publishing tab at the bottom of the page
  8. Click the Add a publishing destination link
  9. Name: King's Student Site
  10. Location: ftp://ftp.mhthompson.com
  11. Directory: enter the name of your student folder (on the Q: drive) spelled *** EXACTLY *** the same (including capitalization) ... to be clear, this is your name ...
  12. User Name: students@mhthompson.com
  13. Password: see Mr. T...do NOT share this password with others!
  14. Click the Add button
  15. In the left hand panel of the main view you will see the files on your computer.
  16. In the right hand panel of the main view you will see the files on the web site.
  17. To publish a file or folder:
    1. Select the file/folder(s) in the left hand panel
    2. Click the little arrow pointing to the right in the center bar between the two main panels
    3. You are done!
  18. To view your published web site, browse to students.mhthompson.com/YourFolderName
Example: students.mhthompson.com/Christian

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
Here is how you resize a picture using Microsoft Office Picture Manager:
  1. Add your image folder to Picture Manager's list:
    • File > Add Picture Shortcut and browse to the folder holding the picture you want to work with.
  2. Load your picture:
    • Locate your picture in the main window and double-click on it.
  3. Click the Edit Pictures button at the top of the window.
  4. Click the Resize link in the right-hand side panel of options.
  5. At the bottom of the right-hand side panel, it shows the Original size.
  6. To resize to a specified size:
    • Select Custom width x height
    • Enter the new width in the left box.
    • Enter the new height in the right box.
    • Verify proper New size at the bottom of the right-hand side panel.
    • Click the OK button at the bottom of the right-hand side panel.
  7. You can also select one of the Predefined width x height sizes instead of a specific size.
  8. Save the resized picture with a new file name so you don't lose the original picture:
    • File > Save As
  9. Discard the changes made to the original picture:
    • Edit > Discard Changes
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