Adding a sound file to your website

Written by eric on August 27, 2007. Posted in User Guide, Web Site Design. No Comments »

(PLEASE NOTE: the information in this article is now outdated and no longer relevant as SoundUpload.com has stopped offering audio-hosting services… for another solution, please see our new article “Adding sound or music to your web site” instead.)

There are a number of media hosts online that allow users to upload and host their own sound or music files for free. In this post we’ll cover how you can utilize the services of a free media host to embed a sound file into your WebSpawner website so it will play automatically for visitors to hear.

Many free media hosting sites exist, including FileFactory, 4shared, DivShare, MediaMax, and SoundUpload. Some offer paid upgrade options for even more storage capacity for “power users.”

The process of creating an account, uploading a sound file and embedding the hosted sound file in your website is basically the same regardless of which media host you choose, so we’ll walk through the steps using the free services offered by SoundUpload.com. Before you begin, you should have your sound or music file on your computer’s hard drive, located where you can easily find it, and saved in a common audio file format such as MP3.

Open a new window in your web browser, and go to http://www.soundupload.com/.

Click ‘Register.’

SoundUploadRegister

The Register form prompts you for a Username, a Password, and a valid Email Address; enter these (remember your choices) and click the ‘Register’ button.

SoundUploadRegisterButton

A confirmation message will appear stating “Your account has been setup and you may now access it.” Click the ‘Continue…’ link.

SoundUploadRegisterComplete

Next you are prompted to provide your Username and Password; enter them and click the ‘Login’ button.

SoundUploadLoginButton

Under ‘Upload Your Audio’ locate and click the ‘Choose File’ button.

SoundUploadChooseFilebutton

Navigate to the location of your sound file; click on the file name and click the ‘Choose’ button.

Choosebutton

When prompted to “Make it Public?” select ‘No, Please hide it’ (this helps prevent your sound file from being used by other people without your permission). Then click the ‘Upload Now’ button.

UploadNowButton

A confirmation message stating “Successful!” appears to indicate that your file was uploaded. Click the ‘Your Audio’ link in the bar at the top.

YourAudioLink

The ‘Viewing Your Audio’ screen shows the uploaded files in your account. Click on the name of the sound file (be careful to avoid clicking the “Delete Audio” link beneath it).

SoundFileName

Click in the box titled “Embed Audio onto Webpage” and select all of the code within the box by pressing Control-A on a Windows computer or Command-A on a Mac (the Command key has a small apple on it).

EmbedAudioCode

Then, copy the code by pressing Control-C on Windows or Command-A on a Mac.

Now you are ready to embed your sound file into your WebSpawner website. Open a new browser window and go to http://www.webspawner.com.

At the upper right side of the WebSpawner homepage, enter your Username and Password, then click the ‘Login’ button.

In the Member Menu under Step 1, select the webpage to which you would like to add your sound file, and click the ‘Modify’ button under Step 2.

WSModify

Scroll down to the Body Text step and click inside the box (you’ll probably want to click beneath any text you have entered there, so your embedded sound file appears lower than the text on your webpage). Now paste your copied code into the Body Text box, using Control-V on a Windows PC or Command-V on a Mac.

BodyText

At the bottom of the Modification form, click the ‘Continue’ button. Then, at the test page preview, click the ‘I Like It’ button to save and publish your changes.

Your webpage will contain your embedded audio file, which will play automatically for visitors to hear when they view your page. The embedded file will appear on your webpage as shown in the image below, with controls that allow the viewer to pause or replay the sound file and adjust the sound volume.

embeddedsound

Continue Reading

How to take a screenshot and send it via e-mail

Written by eric on August 17, 2007. Posted in User Guide, Using the Internet. No Comments »

Built into both Microsoft Windows and Macintosh operating systems is an easy way to capture the contents of your computer screen into an image file, often referred to as a “screenshot.”

A screenshot can be helpful when you are trying to obtain assistance as it allows your support person to see exactly what your computer screen was showing (a long error message, for example) at the time the screenshot was taken.

In today’s post we’ll cover how to take a screenshot and send it by e-mail for both Windows and Mac users.

Microsoft Windows

1. To capture the contents of the entire screen press the Print Screen key. Or, to take a picture of only the foremost active window or application, press and hold down the Alt key and then press Print Screen.

windowskeyboard2

2. Click the Start menu, and click to select All Programs, Accessories, and then Paint.

Paint

3. In the Paint window, click Edit and pull down the menu to release on Paste as shown; your screen capture image will appear in the window.

paintpaste

4. Click the File menu and pull down and release on Save As.

paintsaveas

5. Enter a File Name for your image, select an appropriate File Type such as .PNG, and click the Save button to save a copy of the screenshot in your ‘My Pictures’ folder.

paintsave2

6. Back in the Paint window, click the File menu and pull down to release on Send.

paintsend

7. Your default e-mail application (likely Outlook Express) will open, and a new message window will appear with your screenshot image attached. Fill in the recipient’s e-mail address, enter an appropriate subject line and message, and click Send to deliver your message with the screenshot image.

Mac OS

Creating a screenshot on a Mac is very easy. To capture the contents of the entire screen press and hold down the Shift, Apple, and 3 keys simultaneously, then release them.

applekeyboard1

A “camera shutter” sound confirms the screen capture, and an image file labeled Picture 1 appears on the Desktop as shown below.

macpicondesktop

The image contains an exact representation of your entire screen at the moment you released the three keys, and is ready to be e-mailed. The file format will depend on your operating system version and how your computer’s preferences are set, but it will likely be in .PNG or .PDF format (either is fine). If you wish you can rename the file but it isn’t necessary to do so.

Note that if you wish to capture only a portion of the screen, press and hold down the Shift, Apple, and 4 keys, then release them.

applekeyboard2

A small gray crosshairs cursor will appear on your screen; click and drag to select the rectangular area to be captured, then release the mouse button. The camera shutter sound confirms your screenshot and the image file automatically appears on your desktop just as with a full screen capture, except the image will only contain the selected area of the screen.

To send a screenshot by e-mail from your Mac, open your preferred e-mail application (probably Apple’s Mail program). Click New to create a new message. Enter the recipient’s address in the To field, and enter appropriate Subject and Message text. Then click the Attach button and select your image file, and click Send to deliver your screenshot and message.

An even easier way to e-mail your screenshot on a Mac is to click on the image file on your desktop and hold the mouse button down, drag the image file over the Dock and hold it over the Mail icon as shown below, then release the mouse button.

floatovermail

The Mail application will automatically open a new e-mail message with your screenshot image attached. Complete the To address, subject line and add a message if needed, then click Send.

Continue Reading

Adding pages to your website

Written by eric on August 7, 2007. Posted in User Guide, Web Site Design. No Comments »

Creating additional pages is easy with an Enhanced WebSpawner account; in fact, you can add as many pages as you like with no limit and no additional cost. In today’s post we’ll show you how.

To begin, login to your WebSpawner Enhanced account with your Username and Password, and you’ll see the Members Menu for your account. Pages you have already created, including your Index or ‘Start’ page, appear in the list under Step 1. To add a new page, click the ‘Create’ button under Step 2 as shown below:

01CreateButton

The page Creation form appears as shown here:

02CreateAddlPageForm

This Creation form is quite simple with only a few steps, as the WebSpawner system will automatically apply some selections (such as Layout Template and Colors) from your Start page in order to create a uniform look among all pages within your website.

The Creation form prompts you to enter the following for your new page:

  1. Headline – the title text to appear at the top of the webpage
  2. Body Text – the content information for the webpage
  3. Image – select whether or not to include an image from your computer

Type in your desired Headline and Body text. It is important to enter some Headline text (do not leave the field blank), as it will be used for the name of your webpage in links and the URL address. Then click ‘Yes’ if you would like to add an image to the webpage, and click the ‘Test My WebPage’ button to continue, as shown in the sample below:

03TestMyWebpageButton

If you have clicked ‘Yes’ to add an image to your page, the following Image Upload screen appears… click the ‘Choose File’ button as shown:

04ImageUploadChooseFile

Next, navigate to the desired image file on your computer; you may use .gif, .jpg, or .png file formats. Select your image file as depicted here:

05ImageUploadSelectFile

Next, click the ‘Transfer Image’ button to begin the image upload:

06ImageUploadTransfer

The upload may take several seconds, depending upon the size of the image file and the speed of your internet connection. When the transfer is complete, a confirmation message appears briefly:

07ImageUploadSuccess

Soon afterwards, a test page preview will display. You can click ‘Let’s Modify It’ to make additional changes if needed; however, you can always Modify your page again later if desired. Click ‘I Like It’ as shown below to save your changes and publish the new page:

08WebpagePreview

After you have clicked ‘I Like It’ your new page immediately becomes available for viewing online. A confirmation screen appears, providing the URL address for your new page as shown below. You can make note of the URL address if you like, but it really isn’t necessary to do so… the WebSpawner webpage builder automatically* links together all pages within your account, so that visitors can easily navigate your multi-page website (more info on links follows below, and be sure to see the special note regarding auto-linking at the end of this post).

Click the green ‘Member Menu’ button to continue:

09WebpagePublishConfirmation

The Member Menu for your account will be displayed, with your newly-created page now appearing in the list of webpages under Step 1:

10PageList

Now you can proceed to ‘Create’ another new page in the same manner by clicking the ‘Create’ button under Step 2 and repeating the process as before. Be sure to click ‘I Like It’ at the test page preview each time in order to complete the process. Remember, with an Enhanced account you can add as many pages as you like to your website with no limit!

Every time you go through the page creation process, your new pages will be added to the list of pages in your Member Menu, as shown in the example below:

11LongerPagesList

For every new page you add, a link will automatically* be added to all of your other website pages for easy “click-able” navigation, as shown here:

12LinksList

Some of WebSpawner’s Layout templates will display a compact pull-down menu of links, rather than displaying the links in a list. Regardless of which Layout template is selected, if you add 9 or more pages to your account, the links list will automatically convert to a pull-down menu, as shown here:

13LinksMenu

The pull-down menu takes up less space on your page, while still providing links to all of your other pages… viewers simply click on the menu and pull down to select the desired page link:

14LinksMenuDropdown

Regardless of how many pages you add to your account, the WebSpawner system will automatically style them all to match your selections for the Start page in your account. If you Modify the Start page and select a new Layout template or Color options, all of the other pages are automatically updated to match when you complete the Modification process (by clicking ‘I Like It’ at the test page preview).

However, if for some reason you do not wish for all of your site’s pages to have the same matching style, you aren’t restricted either… you can enable Expert Mode (discussed in detail in a previous post here) to make pages have different styles.

*One parting note: when you Modify your Start page, there is a checkbox option to “Automatically link all webpages together” as shown below:

15AutoLinkOption

The default is for this option to be selected, and it is highly recommended to keep this box checked. If you click to remove the check-mark from this box, your pages will no longer have automatic links to and from all other pages within your account… this makes your site much more difficult for viewers to navigate.

Continue Reading