Rowan Cottage : Graphics

Rowan

Cottage

About

iWeb

Graphics Tips

Normal link

But wait, what about these for rollovers?

Well, you create them with method two above, but then when iWeb has published, you edit the shapeimage rollover png to what you want. Remember that every time iWeb republishes you will lose these changes unless you save a local copy (just make sure you replace the correct png image!)

For more information on hyperlinks in iWeb and modifying their appearance, including changing iWeb’s default rollover colours, please see this new article on CSS in iWeb.

UPDATE: OK, so I hacked these rollovers - I finally updated to iWeb 1.1.1 and I knew that the hyperlink underline remove hack mentioned above had been broken by iWeb 1.1 - but it’s such a nice effect that I reproduced it here by editing the rollovers. So just to tell you it is still possible in iWeb 1.1.1 with a bit of effort. ;-)

Tips on Graphics in iWeb

This is a selection of hints and tips I’ve picked up either myself or from browsing the Apple iWeb discussions forum. Hopefully they will be helpful to some.

How big is the textbox I need for my java applet, javascript, code snippet?

A quick way to determine this is to take a screen grab of the HTML/javascript item concerned and find the size of the screen grab in pixels. You can do this by pressing
SHIFT-COMMAND-4. Click and drag the crosshairs you get over the item. It will be saved to your desktop by default. Double click it, and by default, it should open in the Preview application.

In Preview, go to Tools > Get Info, you will then see the size of the grab in pixels. That will be the size you need. For the actual HTML cut and paste technique see here.

How can I grab web badges, banners for hyperlinking?

Copyright notwithstanding, you can easily grab any image off a webpage by right-clicking (CTRL-CLICK) the item in your browser. For instance in Safari, it will come up with the following contextual menu:

Select either 'Save Image to "Downloads"' (or your default download folder) or select 'Add Image to iPhoto Library'. You can then retrieve it either through the Finder in the former case, and drag it into iWeb, or use the Media button in iWeb to locate it in the latter case. Then select it and make it into a hyperlink with Inspector > Link.

How can I reduce file size of multiple PNGs that form a picture?

The pictures generated on the Articles page and the iWeb wish list page were actually built from multiple PNGs but they are shown as a jpeg. If I had kept the pictures as the default iWeb output, then the size of the pages would have been greater.

Here's how I made the image a smaller size - I took a screen grab of the picture
(SHIFT-COMMAND-4 as above), and then optimised this file in my photo editor (e.g., Photoshop, Graphic Converter). I then saved it as a jpeg. An alternative to this would be to select all the elements that comprise the picture, then open the Preview application and select File > New from Clipboard. You can then save this as a jpeg or gif by selecting the appropriate format in the save dialog. I tend to do screen grabs because I have pages that are not standard white (as you can see!) so I need to capture the background as well.

How do I create a photo album index?

If you want an index page like this that leads visitors to your other photo pages, you can easily create this within iWeb itself and by using no additional tools.

Open a new photo page in iWeb. Drag the images that you want to act as

thumbnails onto the photo area (or use the Media Browser). Add captions if wished. Customise photo frames if wished. Now, over each photo thumbnail and caption area, create a rectangular shape. Make this shape's opacity 1%, using Inspector > Graphic. Then using Inspector > Link, make each shape a hyperlink to your other photo pages. Additionally you can hide these separate photo pages from the navigation bar at the top by unchecking the box 'Include page in navigation menu' under Inspector > Page.

Last thing, cover the 'Start Slideshow' button with an 100% opaque shape the same colour as your background in order to inactivate it (or just delete it).

That's it! No need to manually alter photos or generate your own thumbnails - let iWeb do it all for you.

You can use the technique of covering an image with a shape of opacity 1% in order to make an animated gif a hyperlink. See our homepage for an example or our links page for several!

Reduce the size of iWeb's published PNGs

There is a drag and drop freeware application called PNG Crusher that can be used to further compress PNGs that are generated by iWeb. You sometimes save quite a few K by using it. As they say, every little bit helps!

How do I create links where the text is not underlined?

Not really a graphics tips, but since these are graphical enhancements to text I provide it here. You can create text links without underlines in two ways.

In the first method, create a text box. Type the text you wish to form the link. Now instead of highlighting which bit of the text to make as a link, select the whole text box. Make the whole text box a link using Inspector > Link. You will notice this doesn’t make the text change in any way when you hover over it.

Second method makes the text respond when the mouse hovers over it. Again create a text box, now type the text you wish to form the link. Make the hyperlink using Inspector > Link. Please note this only works for links to external pages. However you can still make it work for your own pages by typing the complete web address into the URL box. Now go within the blue box that forms the link and add a space. Select this space, go to the Fonts menu, and make this space double-underlined. You will find the underline disappears from the rest of the text! Whilst not a true rollover link with underline, you can still see the text change colour to indicate that it is a link. See below for examples.