My Publications » Software Tutorials » Customizing Your iWeb Sites » Webpage Content

Adding Webpage Content

At last, at last…the fun part! Add text, images, sound, and video to your pages.

  • Use Text Box to add text
  • Use Show Media, choose the desired tab, and drag-and-drop images, audio, or movies from your hard drive onto a particular page.
  •  
  • Be sure you have the legal right to display/play any of these files on the Internet!

Adding Text


Figure 55. You'll be playing Where's Waldo? almost every time you add a text box. Can you find it??

Use the Text Box to add text to your pages. Ideally, you will have added a text box to hold your primary content when you were first creating the graphic layout for your page(s). One, it saves you a step in having to add and resize a text box every time you open a new page. Two, the text box is already positioned exactly where every previous page's main content is positioned.

  • After clicking Text Box, a gray-outlined square pops into the center of the main window. It's a ridiculous size. Click off the page and then re-click the newly added text box to select it. Drag one of the side handles to widen it so your text doesn't form a few-letter column extending well below your screen.

Figure 55. You'll be playing Where's Waldo? almost every time you add a text box. Can you find it??

It's tempting to add lots of text boxes within one page—DON'T. Once you add more than one text box into your content area, it becomes more difficult to edit that page. Text and object boxes do not move when you add or remove text or objects. You must individually select and move every single box to make room.

SEO Concerns:

If you want your website searchable by the spiders, you must use websafe fonts. iWeb turns non-safe fonts into pictures which does not allow the individual words/phrases to be read by the spiderbots. The safe fonts include:

  • Arial
  • Courier New
  • Georgia
  • Times New Roman
  • Verdana
  • Trebuchet MS
  • Helvetica

Moving Multiple Text Boxes/Objects

Yes, there is a shortcut—hold down OPTION as you select each and every image and text box. Then scroll back up to where the overlap first occurred and move everything. Hopefully, you've caught every single box or image. You can guess how excited this makes me…NOT. If you will be making major changes, you might want to select all the boxes below the area in which you are working and then cut-and-paste them onto a new page—parking the information until you are ready to re-paste it.

Although...you can insert a text box inline. An inline text box will move with the flow if content is added above it. Insert your cursor where you want the inline text box and click the Text Box icon twice. Select the inserted box by clicking inside it twice.

Tables

Tables can only be created in iWeb if you import the table from an iWorks application, another web editing program such as Dreamweaver or through an HTML snippet (you'll need to know HTML coding for tables) although the snippet will not flow with your text.

Tables were the original layout used in creating web pages. Since CSS came along, table layouts are obsolete. Now, tables are used to summarize and clearly present data much as you would use a table in a word processing app.

The iWeb substitute is to use one text box per column.

    Audio file icon

Audio

This placeholder is small and inserted inline.

Any type of audio can be dragged in or inserted inline. Dragged-in files come through Media > Audio > desired audio file. The Audio tab includes GarageBand, iTunes, Movies, podcasts, and all your playlists. Inserting an audio file inline, requires inserting your cursor within the text and then choosing Insert > Choose > desired audio file.

Any audio file comes with volume, play, stop, rewind, and forward buttons; resizing the placeholder down may cause some of the buttons to disappear (note the difference between the smaller placeholder in the title line and the placeholder on the right).

Whether an image appears will depend upon if you created an image to go with the tune or if there is an album cover included. Of course, you cannot use someone else's music on your website unless you have their written permission to use it—it could be a copyright violation.

Figure 56. The above example is an audio file that's been dragged in from Finder. The text on the left is manually ended otherwise it would disappear behind this audio file.

Images

There are two ways to insert images, also known as photos, into your content area: drag-and-drop or inline.

Drag-and-drop simply drags an image onto the webpage from iPhoto through the Media panel or directly from Finder.

Inline is a bit more complex. Insert the cursor within the text and then choose Insert > Choose > find the desired image. iWeb inserts the image on the left side of the page. Shift the image to the right side of the page by choosing Inspector > Text > Wrap > choose the left or right icon. Inline is the ONLY way in which you can force images to move up/down with the text.


Figure 57. The above example, Figure 57, has been wrapped to the right side of the page. Note the icon showing a square with text wrapping around it to the left.
 PlusesMinuses
Drag-and-drop Position anywhere on the page Does not flow with the text
Must be repositioned manually
InlineFlows with the textDifficult and irritating to position
Places only on the right or left side of the text box

Captions

Captions can be applied two different ways:

  1. Insert a text box in iWeb
    1. Position the text box under the image
    2. Must select both the image and the text box and move manually
  2. Group the image AND the caption text box—tedious but effective
    1. Cut image
    2. Open iWork's Pages
      1. Paste image into Pages
    3. Add a text box in Pages
      1. Type the desired text
    4. Use the mouse to drag-select the image and the caption box
      1. Copy the grouped image
      2. Insert the cursor in the webpage where you want the image-caption
      3. Paste it onto the webpage
        1. The inline insertion combined with the Pages step causes the image and the caption to flow with the text

Borders and Shadows

Borders and/or shadows can be applied to images, videos, and shapes:
  1. Select the image, video, or shape to be bordered
  2. Click Inspector > Shapes
  3. Under Stroke, choose None, Line, or Picture Frame
    1. None removes any line or picture frame
           b.    Line allows for 10 line styles, the choice of color, and a width preference

Figure 58. The pink line surrounding the image demonstrates the use of line, color, and line width.
           c.    Picture Frame allows for 21 frame styles and a scale preference, Figure 59

Figure 59. This example shows the use of old-fashioned picture corners (the sixth row, third choice over) to [picture] frame the leftmost image.
  1. Under Shadow, choices include applying a shadow, the color of the shadow, the angle at which it extends from the object, how far it is from the object before it begins (offset), how blurry or sharp the shadow appears, and how transparent

Figure 60. This example shows the use of shadow with an image object.

(Because the Pages-created caption is considered, by iWeb, to be a part of the image, a shadow also projects from the text. Eliminate the text shadow by selecting the image only and creating the shadow in Pages before pasting the image + caption onto your webpage.)

Videos

There are two accepted ways of displaying a movie: within the existing page content or in its own page.

If you choose to place the movie within existing content, you can insert the video via the MobileMe widget, drag-and-drop, or use the inline method choosing Insert > Choose > desired video file.

Figure 61.The placeholder for the MobileMe widget when inserting a movie.

In this example, I told the widget to use the pictures of my kittens that were already existing in my MobileMe Gallery.

If you plan to use a page solely for the purpose of displaying a video, choose the Movie page template (Figure 62) and drag the desired video file onto the video placeholder (Figure 63).


Figure 62. The above example shows where to find the Movie page template.

Figure 63. The above example demonstrates dragging a video on top of the video placeholder, the image surrounded by the eight tiny boxes, on the Movie page template.

Widgets

Widgets are programming shortcuts which permit you to easily add a cool effect. There are nine widgets available in iWeb 09: MobileMe Gallery, YouTube, Google Maps, Google AdSense, iSight Photo, iSight Movie, Countdown, RSS Feed, and HTML Snippet. After dragging any one of the widgets onto your page, a code box (the black box offering choices) appears allowing you to customize the final appearance of the widget.

The MobileMe Gallery widget enables you to quickly insert an Album or movie you have posted to your MobileMe site.


Figure 64. The MobileMe Gallery widget displays all the Albums currently uploaded to your MobileMe page. Choose one and it automatically inserts a slideshow. Note the eight bounding boxes which allow you to resize the final appearance of the widget.

The YouTube widget allows you to paste a link to a YouTube video which then appears on your website:

  1. Drag the YouTube widget onto your page
  2. Search YouTube for the desired video
  3. Copy the URL from the location bar
  4. Paste it into the box titled YouTube URL
  5. Click Apply


Figure 65. The above examples visually display the steps required to create a YouTube linkup:

  • Left is the YouTube widget dragged onto the page
  • Middle displays the URL in its location bar
  • Right shows where to paste the URL and the placeholder's appearance after clicking Apply
The Google Maps widget allows you to create a map that your viewers can use to zoom in/out and get directions to the address you type into the setup box:
  1. Drag the Google Maps widget onto your page
  2. Type in the chosen address
  3. Decide which extras you want your viewer to access: zoom controls, search bar, and/or address bubble

Figure 66. Google Map permits you type in any address in the world and choose which extras the viewer uses, such as, zoom controls, search bar, and/or an address bubble. This is besides the regular choices of Map, Satellite, Hybrid, and getting directions.

The Google AdSense widget allows content-related ads to appear on your pages. Each time a viewer clicks on one of the ads, you earn money.

  1. Drag the Google AdSense widget onto your page
  2. If you already have an account with Google, click Submit
  3. Otherwise, set up an account—it doesn't cost you anything
  4. The format box appears and you can choose the size of the ad and the basic colors


Figure 67. After dragging the Google AdSense widget onto the page, a set up box appears. Once you have submitted it, the format box for Google AdSense appears where you can choose the size of your ad and its appearance.
The iSight Photo widget enables you to quickly take a photograph and post it onto your webpage:
  1. Drag the iSight Photo widget onto your page
  2. Click the red dot in the camera icon, Figure 69
  3. The negative is that it is difficult to aim the viewfinder

Figure 69. The black code box includes the red button that operates the web camera.
 

Figure 68. Both iSight Photo and iSight Movie provide a warning countdown before the camera actually engages.
The iSight Movie widget enables you to quickly take a movie and post it onto your webpage:
  1. Drag the iSight Movie widget onto your page
  2. Press the blue camera button or the white square (Figure 70) to start the countdown to the recording

Figure 70. Pressing the blue camera button or the white square starts the iSight Movie while the digital counter keeps track of the length of the movie.

The Countdown widget is useful to keeping viewers apprised of the time remaining until a scheduled event, a particular date, the end of a sale, etc.:

  1. Drag the Countdown widget onto your page
  2. Choose the desired Style
  3. Choose the type of Countdown display desired: Years - Days - Hours - Minutes - Seconds
  4. Under Countdown To, choose the date you wish to count down to mm/dd/yy as well as the Time

 

Figure 71. The Countdown timer can be adjusted to reflect Years + Days + Hours + Minutes + Seconds (left image). The Display section has adjustable sliders on either end which can reduce the data displayed but only by moving in from either end. The rightmost image shows that I have eliminated Years and Days from the display as evidenced by the grayed out appearance of those times.

From left to right:

    1. Clicking the white down-facing arrow to the right of the Style display reveals four different styles you may choose from for the timer's appearance
    2. Code box shows all times are selected for display
    3. Select a day, c, by clicking the right-facing arrow in d
    4. Select a month in d; the double-headed arrows change the year
    5. Code box shows Hours, Minutes, and Seconds are selected (Years and Days are grayed-out)
    6. Clicking the large icon that looks like a calculator reveals d which can lead to c
    7. Checking the Labels box provides the text in the counter

The RSS Feed widget posts a news feed(s) or blog you subscribe to on your webpage (or provide viewers with an initial peek on your homepage to your own blog):

  1. Drag the RSS Feed widget onto your page
  2. Hunt for the feed://www…/rss.xml address related to the desired news feed


Figure 72. After dragging the RSS Feed widget onto the webpage, paste the feed://… address into the Subscription URL box and click Apply. You can then make the various available choices.

  1. Copy and paste it into the Subscription URL box inside the widget code box, Figure 72
  2. Customize the RSS widget by choosing which layout style you prefer (click the Lorem Ipsum box), the number of articles that will appear, whether the date for each entry shows, the length of the article that is displayed in the feed box, and, IF you choose any layout other than the first text-only choice, the size of any photos that may accompany an entry and its orientation

Figure 73. A scrollable box listing blog entries is inserted; as I chose the first layout (the top Lorem Impsum), there are no images displayed.
The HTML Snippet widget lets you add HTML code to further customize your webpage, i.e., add a table, include JavaScript, animate an object:
  1. Drag the HTML Snippet widget onto your page
  2. Find or write the code needed to create the desired effect
  3. Copy that code
  4. Click on the Paste or type HTML…your page in the grayed code box
  5. Paste the code
  6. Click Apply
    1. You MUST click the Apply button anytime you make changes in the code or else you will lose any of those changes

Figure 74. An example of a newly dragged-on HTML Snippet.

Figure 75. The above example shows three different snippets out of the hundreds, if not thousands, of possible snippet ideas:

  • a is an example of a contact form created through JotForm
  • b creates a Print this Page button courtesy of Eric via Dynamic Drive
  • c is an HTML-coded table.

Publishing and Saving is discussed in the next section.

Return to top

« Previous     Continue »

Questions about some of the terminology used in this tutorial? Get more information (definitions and links) on key computer terms by going to our Glossary of Terms Relating to Art, Computer, Therapy ++.

Hire a pro!
KD Did It will work with you.

Kathy Davie is an artist, educator, and author of the arts marketing series, Your Portfolio & You, aimed at helping artists survive (and thrive) at the business of being an artist.

As a self-taught artist, Kathy was frustrated by the lack of information on taking her career to a more professional level while meeting legal guidelines and learning about legal hiccups. Her drive for information fueled her to interview numerous professionals and compiled the information into a monthly news column. She now leads workshops and is converting the news columns into this continuing series of how-to books.

Kathy has a BS in Technical Writing & Editing with minors in Digital Media and History from Metropolitan State College, Denver, CO and is the author of Accounting for the SMALL Businessperson, How Copyright Applies to the Artist, the Buyer, the Employer/e, the Sold Artwork, Dealing with Photographs, Slides, Digital Images, and Surviving the Outdoor Arts Festival.

Visit her writing or arts websites or reach her by email.