Rapid Weaver: Grafik in die Sidebar einfügen

Guennersen

Guennersen

Aktives Mitglied
Thread Starter
Dabei seit
18.02.2005
Beiträge
419
Reaktionspunkte
44
Moin, Moin!

Hier eine Frage für die zunehmende Rapid-Weaver Gemeinde:
Wie kann ich eine Grafik in die Sidebar (dort, wo auch der RSS Feed erscheint) einbauen? Es müsste eigentlich gehen; hab es schon öfter gesehen... (oh, das reimt sich) :)
 
Wen es interessiert: Hab die Lösung im Rapid-Weaver Forum gefunden:


Users frequently ask how to add web badges or other graphics to the sidebar of the websites they create in RapidWeaver. Although this takes a little HTML code, the process is relatively straight-forward.

First, a little HTML tutorial before we begin. To place a static image, you can use this code snippet:

CODE
<img src="HTTP://WWW.YOUR_WEBSITE/DIRECTORY/IMAGE_FILENAME" width="WIDTH_IN_PIXELS" height="HEIGHT_IN_PIXELS" alt="ALT_TAG_NAME" border="BORDER_SIZE">


NOTE: The width="WIDTH_IN_PIXELS", height="HEIGHT_IN_PIXELS", alt="ALT_TAG_NAME" and border="BORDER_SIZE" are all optional, but make for better design. Including the width and height tags will help your web page to render more quickly, while the alt tag will display a label in the space where the graphic will be loading. The border tag allows you to control the thickness of the border around the graphic image, or to display no boder at all.

EXAMPLE: Let's say you have an image named myimage.jpg that is 20 pixels tall by 40 pixels wide, and you have stored it on your website ("www.mywebsite.com") in the /images/ directory. When the image is displayed, you don't want any border around it; and if you hover your cursor over the image, you want a text tag "This is my image" to appear (browser-dependent). Your code would look like this:

CODE
<img src="http://www.mywebsite.com/image/myimage.jpg" width="40" height="20" alt="This is my image" border="0">


If you do want a border to appear, the number entered will be the width of the border in pixels.

If you want to make the image a clickable link (that is, when you click the image, it takes you to another page on your website, or to an entirely different website), the code snippet would be:

CODE
<a href= "DESTINATION_PAGE"><img src="http://www.YOUR_WEBSITE/DIRECTORY/IMAGE_FILENAME" width="WIDTH_IN_PIXELS" height="HEIGHT_IN_PIXELS" alt="ALT_TAG_NAME" border="BORDER_SIZE"></a>


Using the earlier example, if you wanted to have viewers be taken to www.someotherwebsite.com/page.html, the code would look like this:

CODE
<a href="http://www.someotherwebsite.com/page.html"><img src="http://www.mywebsite.com/image/myimage.jpg" width="40" height="20" alt="This is my image" border="0"></a>


With this all said, we're ready to place a web badge in the side bar.

1) Using the page inspector, select the first page in which you want to add the badges in the sidebar.

2) In the sidebar content area, enter the appropriate HTML code from above.

3) If you want to update all of the sidebars in your existing pages to have the same content, click the "Apply to all pages" button in the page inspector; otherwise, the content will only appear on the specific page you edited.

4) [OPTIONAL] If you want all subsequently-created pages to also include this content in the sidebar, copy the HTML code, select the "Setup" button in RW, and paste the content into the Sidebar area in Setup's "Page Defaults" section.

5) Using an FTP client (many freeware and shareware clients are available), upload the badges or graphics to the directory you referenced in the HTML code.

6) Preview your page(s). Make any needed changes (if any), save your RW Project file, then publish or export the file.

And there you have it! If you'd like to see an example of this, I happen to have a "Love RapidWeaver" badge in the sidebar of my website, located here. Clicking it takes the user to the RapidWeaver page on the Realmac Software website.

Hope this helps. Good luck!

Best,
Tom
 
Zurück
Oben Unten