- Creating a Page Using the Template and a Script
- Formatting the Page with CSS
- Adding and Aligning an Image
- Adding Hyperlinks
- Naming and Saving the Page
- Introducing the Branching Circlefinder Interaction
- Exploring the Prepared Files
- Creating the Virtuous File
- Creating the Circle 1 File
- What You Have Learned
Adding and Aligning an Image
There is more to most Web pages than text, and this one does look a bit dull, especially for a welcome page. An image is just the thing to spruce it up.
Click just before the R in the Readings paragraph.
Images are inserted inline with text. There are a variety of alignment options that let you further customize placement. But when you insert a new image, it is always placed at the insertion point. Here, the image needs to be aligned relative to the Readings paragraph, which is why the insertion point is at the beginning of the paragraph.
Click the Insert Image icon in the Common tab of the Insert panel.
The Insert panel contains dozens of prebuilt HTML objects. They are stored in different categories, with Common being the default. You can change categories by clicking the tab name. For now, yours should be set to Common.
This command inserts a simple image. Specifically, it inserts the following block of HTML:
You use the operating system's Open dialog to replace foldername and filename with the proper names.
Navigate to slow_march.jpg, which can be found in the images folder, and click Select.
The image appears in the page, though its alignment leaves something to be desired. By default, text doesn't wrap around images, which end up taking a lot of screen real estate. The consequence of this is that the majority of your content is pushed offscreen. While most users tolerate some scrolling, usability testing has shown that content that has to be scrolled is much more likely to be overlooked or ignored.
Sometimes it is not possible or practical to keep all content on the page without scrolling, but you can minimize the amount of content "below the fold" by having text wrap around images.
With the image still selected (click to select it, if necessary), choose Right from the Align drop-down menu in the Property inspector.
You no doubt noticed that a lot of alignment options are available. The best way to learn them is by trial and error, so take a moment to test each of the alignment options. The Right option sends the image to the far right side of the page and allows text to wrap around it. This text wrapping enables the image to integrate with the rest of the page.
Note that a small yellow icon now appears before the R, indicating the inline placement of the image. This will not appear when you view the page in a browser. It is simply there as an authoring aid: Click it to select the image, or drag it to a different location to move the image.
You can disable or enable visual aids like this by checking or unchecking View > Visual Aids > Invisible Elements.