Themed image
VIDEO LINKS: [ themed-image ] click to open video in a new window
if you are having troubles viewing the video's online, please download the video from the link below to view locally on your computer.
The download package includes a web page for viewing the video files, and several SWF or FLV video files.
Just download the zip file, extract, then double click on the 'web page' to view the video.
VIDEO LINKS for download: [ themed-image ]
Overview
The themed image is a transparent PNG image. Transparent meaning the edges of the image are clean, revealing the background of the page, or the image is partially 'transparent' and the image fades ( bleeds ) into the page background behind it.
The reason we've include a themed image, is to give the 'added' BRAND or 'THEME' factor to your web pages. Profession looking images, placed in just the 'right' spot will really add the professional polish that you may be looking for.
The criteria we used in creating the themed image component is:
- themed image must be easy to replace
- change the image 'globally' to update all pages with one change
- also be able to change the image for specific pages
- be able to 'move' or reposition the image, to anywhere on the page ( as it's transparent, it can should be able to blend with other areas of the web page )
- be able to use any size image
We've accomplished this.
You can make site wide changes in just a few seconds, once you know what to do. The themed image is displayed on the template pages via the {Library / themed_image} page, so you can easily update this one page, to update the entire site. The 'themed_image' Library page, is also wrapped inside an editable region, so you also have the option of replacing the themed image for specific pages! to change the 'themed image' globally (change in one location, to update entire site)
INSTRUCTIONS
change the themed image ( site wide )
option 1:
- drag or save your replacement image into the {Site / themed_images} folder
- open the {Library / themed_image} page
- delete the existing image
- drag a new image onto the page
- save to update
option 2:
- determine the size of the replacement image, create a new Blank page ( File Menu >> New > HTML page
- open the {Site / themed_images} folder
- drag the {themed_image.png} image onto the blank page
- switch to code view, you will see the width and height attributes of the
image
- using your favorite graphic editor, resize your replacement image to match the height and width attributes
- save your new image as {themed_image.png} - and save it to the {Site / themed_images} folder to replace the existing image
change the themed image for a specific page
** there are a couple of 'shortcuts' I would like to share with you on this one **
- create your 'page specific' themed image, size may or may not matter, it's something you will need to see for yourself
- give the image a unique identifiable name ( if the image is for the 'services.htm' page, name it 'services_themed_image.png' )
- depending on the template background, you may want to use an image with a transparent background
- if using a JPG, try to 'frame' the jpg image in a black outline or something, so it doesn't look 'slapped' onto the page
- drag or save your new themed image into the {Site / themed_images} folder
**(shortcut alert) once you've imported the new image, right click on it, and select the "Copy" command
- open the template page, you would like to use this image on
- select the current 'themed_image' with your mouse
** for Expression web / FrontPage this will select the 'include' element
** for Dreamweaver this will select the 'Library' code - press delete on your keyboard
- your cursor will remain 'blinking' inside the editable "themed_image" box
**(shortcut alert) press the ( CTRL+V ) keys on your keyboard to "Paste" the "Copied" image into the editable 'themed_image' box
- or, drag your new image into the editable box...it's a lot quicker to copy and paste though