Use these resources to help build your websites: 

 This page will contain useful tools to help you build your website. For questions, contact Mike Heine at ext. 4813.

Instructional video

CMS4Schools Instructional Video - Watch this instructional video to learn more about building your website from scratch.

Official School Logos

To download a school logo, click on a thumbnail to enlarge the logo, then, right-click and save the logo to your computer's hard drive. 

Reduce JPEG (.jpg) files for online viewing

Today's cameras often leave the photographer with some really big files to deal with, and those picture files often aren't optimized to view on the web. Large files not only take up server space, they also take a lengthy amount of time to download for users with slow Internet connections.

Unless you're going to actually download and print the photo onto paper or another medium, there is little need to have the photo be kept at its original size from the camera.

As a general rule, photos that are to be displayed online should be no greater than 72 dpi (dots per inch) and about 1500-2000 pixels wide. This should suffice to fill the entire screen width (and then some) of most monitors. Picture file sizes should also be measured in kilobytes (KB), not megabytes (MB). If the photo you're uploading to the web is 1 MB or more, it's probably too big if you just want to view it on a monitor.

One thing to remember... If you reduce a file down to, say, 300 pixels wide, do not force your web page uploader to display it at a size larger than 300 pixels wide. Images that are "stretched" or displayed beyond their original sizes will become pixelated (jagged edges) and possibly distorted, causing them to look bad on screen.

To reduce the size of your photos, use these resources: 

Makeup - Makeup is a free program that you install on your computer. It enables you to resize your jpeg files and do a few other things to them so they're optimized for the web. To use, open the program and click the "Open" button to find the picture you wish to resize. Enter the desired width (in pixels) and click "Resize Image." Click the "Save" button to bring up the save window. You can adjust the compression down to about 70 to reduce your file size even further without severely changing the quality of the image. Click the "Save As" button to save your file with a new name WITHOUT spaces. You can use underscores or dashes in the file name. (*WARNING: Clicking the "Save" button will overwrite the original file. Always use "Save As")

(*Hint: add "WEB" to the end of the file name before the .jpg extension to remind yourself that it's a web-ready photo.) Upload the web-ready file to your website.

reduceyourpicture.com - This is a free online service that reduces your files via the web. Choose which file size you want (200 pixels wide, 600 pixels wide or 1000 pixels wide). Browse for the file on your computer and upload your original image to this website. Once the website converts the image, it will take you to a new page where it displays the photo in the size you chose. Right-click on the photo and save the .jpg file to your hard drive or network drive. Be sure to rename the file first without spaces (* again, adding "WEB" to the file name is useful). Upload that file to your website.

Dropic - For Mac users, download the program Dropic. Follow on-screen instructions.

PDF Converter Tools

PDF files (Portable Document Format) are useful because they can be opened and read easily by almost any computer. Instead of uploading "editable" documents such as Microsoft Word or Excel, first convert them to a PDF file. Many file types can be converted to PDFs using the following tools:

• PDFConverter - A downloadable program that allows you to create PDF files from within a program's "PRINT" menu. First, install the program on your computer. Create a document, choose print and choose "PDFConverter" as your printer. It will create a PDF file for you, which you can then save on your hard drive and upload to the Internet or e-mail.

• ZamZar.com - Upload your file and have a PDF e-mailed to you once it's converted. Site converts files to other file types, as well, including movies.

• freepdfconvert.com - Upload your file and have a PDF e-mailed to you once it's converted. In free mode, site allows only one upload every 30 minutes.

Drop-down Menus

• Drop-down menu creator - Use this site to create source code for drop-down menus. This is ideal for numerous downloadable files (such as PDFs) or links to similar websites. Upload your files to your websites "file upload" storage area. Copy and paste the link to the files in the menu generator. Give each a corresponding name in the "text shown" area and click "generate" to show your code. Click preview to view the menu. Copy and paste the generated code into your website text/graphic editor when you are viewing it in "source" code mode.

EXAMPLE: 

Slide Shows

• Slide show creator - Copy and paste links to images from the web in the "slide image address" field. Add appropriate text. Adjust auto-play timing and slide show title. Click "generate" to make the code and "preview" to view your slide show. If satisfied, copy and paste the generated code into your website text/graphic editor when you are viewing it in "source" code mode.

EXAMPLE:

Principals
Mark Schmitt Tad Wehner Kathy Maher Deb Maki Donna Sorensen

Google Search Bar

• Google search - Add a Google search bar to your webpage using the source code available at this link. Copy and paste the code into your text/graphics editor source code area to allow page viewers to search Google from your webpage. To lose the Google logo that might appear with the search bar, delete these two lines of code: <A HREF="http://www.google.com/">
<IMG SRC="http://www.google.com/logos/Logo_40wht.gif" <br></A>

EXAMPLE: 

Countdown Timer

• Countdown timer - Want to remind students how long they have until the next test or how much longer they have until the next big assignment is due? Use this tool to add a countdown timer. Enter the end date and time you wish. Click  "generate" to make the code and "preview" to view your timer. If satisfied, copy and paste the generated code into your website text/graphic editor when you are viewing it in "source" code mode.

EXAMPLE: Class of 2010 Graduation in: 

Add a customized Youtube video

vtubetools.com - Youtube offers embed codes directly on it's site, but it's hard to customize the code. Use vtubetools.com to make it easy. Copy the youtube video address (the part of the video's web address that follows the = sign). Paste that into the appropriate bar on vtubetools.com. Select the features you want and the size you wish to make the video. Set a desired width and adjust height to add or remove black letterboxes. (*having a height that is too short will crop out portions of the video.)

Good settings include: Autoplay=NO; Border=NO; Allow full screen=YES; Loop=NO; Display related videos=NO (related videos my not be appropriate); High quality=YES; Custom player=NO.

EXAMPLE: 

Aspect ratio calculator

Aspect ratio calculator - Sometimes you'll need to reduce the size of a video so it fits better on your website. Use an aspect ratio calculator to keep the dimensions the same so the video isn't distorted or use black "letterboxes" on the top/bottom or sides of the video. A video's original width and height are usually kept in the "embed" code. Find it and enter it into the aspect ratio calculator. Then, enter the width you'd like in the corresponding box and click "Calculate." The calculator will show you what dimension the height of the video should be to keep the dimensions the same. Replace the original width and height in the video's embed code with the new width and height and you're all set.

(*NOTE: Use this site in conjunction with vtubetools.com to save yourself from guess work when you're preparing your videos.) 

Create RSS feed box

If you manage or follow a blog, twitter sites, news websites or other sites that have regular updates, it might have what's called an RSS Feed available. (RSS=Really Simple Syndication). RSS allows web developers to "pull" headlines and bits of stories onto their own websites using an RSS Feed Reader. For example, the "News, Notes and More" box on the ddschools.org website is an RSS feed reader that pulls in the latest headlines automatically from the ddschools.wordpress.com news blog. When a new post is added to the news blog, a new headline appears in the News, Notes and More box a few minutes later.

To add an RSS feed reader on your website, you may wish to use the following tool: 

rssinclude.com - This site generates code for a feed reader you can add to your website. First, create an account with a username and password. (Don't worry. It's free to sign up.) Once you're registered, click the "Create a New RSS Box" button and choose which style of reader you like from the list provided. (*Note: you have to pay for the "premium only" selections. All others are free.) Copy and paste the URL (web address) of your RSS feed source. To find the feed address, (usually) look for the text "RSS" or this icon (or something like it) somewhere on the page: 

Once the feed is validated, click the "Content and Styling Options" tab. Adjust content and styling options to your liking. Click "Save and Preveiw" to update and review changes. When ready, click the "Include!" tab. Make sure "JavaScript" is selected and copy the code from the "Your Code" box. Paste that code into your websites Text/Graphics Editor window when it is in the Source mode. 

EXAMPLE: