Creative Website Solutions, Oxford, Nova Scotia, Canada,
Building Creative Website Solutions That Serve You Best!
With Over 20 Years Of Creative Webmaster Experience ~~~ And a World Wide Web of Opportunity Ahead
This is the "Sample Graphics" Section for Creative Website Solutions
The Following are Sample Graphics by Category as Offered via Creative Website Solutions:
This page displays a series of sample graphics by category to help provide a clearer perspective
of the types of graphics that Creative Website Solutions utilizes.
Anchor links are useful tools for a website, especially when a web page contains a lot of text on a single page.
These links, which may sometimes also be called internal links or page jumps, allow people to click on highlighted text and jump
to another part of the page. They are helpful to improve navigation on a web page.
Many times when people have large single page websites they’ll need to create a page index or table of contents.
The index at the top is a perfect place to add anchor links, so that each index entry becomes its own jumping point
to another part of the page. This allows people viewing the webpage to click on the index or table of contents section
and move immediately to access the material they want, instead of having to scan through numerous sections. Anchor links
are commonly user friendly and tend to be preferred by sophisticated Internet users who want to get to applicable material
as quickly as possible.
Simple horizontal text menues such as this are often used for a basic website that only offers a small number
of additional pages of information. These menus are great for maximizing the utilization of the valuable space,
the real estate, at the top part of your website. Using such menues provides for more width space for the key
information you want your clients to see at the very top of your website, as soon as it loads, and before any
real scrolling down the page is needed. The menu links are set up to function as normal but will not pull you
away from this "Horizontal Menues" section.
Horizontal (Graphics) Navigation Menu
Name / Address
Photo / Graphic
The Main Section For Web Page Content
Such as Products / Services Info Here.
This is a simple horizontal (graphics) menu using small button graphics. Sometimes a website may want their menu
to show a bit more color and flair then a typical text menu. These small menu button graphics (a.k.a. links)
are set up to function as normal but will not pull you away from this "Horizontal Menues" section.
This larger multi-line multi-column text menu is what is often used for a more complex website that offers
several additional webpage sections for information. Again the menu links are set up to function as normal but
will not pull you away from this "Horizontal Menues" section.
This simple vertical side-bar (text) menu is what is often used for a basic website that only offers a small number of
additional pages of information. The menu links are set up to function as normal but will not pull you away from
the "Vertical Side-Bar Navigation Menues" section.
Vertical Side-Bar (Graphics) Menu
Name / Address
Photo / Graphic
The Main Section For Web Page Content (2) Goes In Here.
These vertical side-bar (graphics) menues are what is often used for a more visual menu for website that offers
a variety of additional pages of information. We may change the small graphics to ones that have not (as yet) been
used. Something fresh. The menu links are set up to function as normal but will not pull you away from the
"Vertical Side-Bar Navigation Menues" section.
This simple vertical side-bar (without border lines) is what is often used for a more open free flow style
of basic website that only offers a small number of additional pages of information and a larger white space
clutter free area for the site. The menu links are set up to function as normal but will not pull you away
from the "Vertical Side-Bar Navigation Menues" section.
3rd Bullet List with Small Graphic (Push-pin) Bullets
Bread
Milk
Eggs
Sugar
Flour
Cereal
Beef
Chicken
Simple Bullet List
These simple bullet lists are what is often used for a basic listing of items or information.
These lists use either small bullet symbols like circles or squares, while some use more colorful graphics such as small arrows or push-pins.
Right now the 2nd list uses (code) css styling to view small red arrows but they do not print out. The third uses small push-pin graphics.
Tips To Weight Loss
Canada's Food Guide
Exercise Plan
Benefits of Water
Calorie Counter
Mentor Assistance
Goals and Benchmarks
Non-Food Rewards System
Lifestyle Changes
Numbered Bullet List
This numbered bullet list is what is often used for a listing of items like the "Top Eight Ways to Win Friends
or Lose Weight, etc". Often used on a website that wants you to read through each section in numberic order.
Text Book Index Example
Index
Welcome
About
Introduction
New Information
Chapter 1 - Bullet Info
Subitem 1
Subitem 2
Subitem 3
Chapter 2 - Complex Options
Subsection 1
Subsection 2
Chapter 3 - Readability
Chapter 4 - Level Distinction
Level 1, Item 1
Level 2, Item 1
Level 3, Item 1
Level 3, Item 2
Level 2, Item 2
Chapter 4 - Visually Appealing
Biography
Conclusion
Complex Multi-Level Bullet List
These Multi-Level Bulets are often used for a more complex series of lists with additional sublists of information.
The bullets are usually a combination of Alpha and Numeric symbols to better understand the various sub-sections.
This is a simple table format that could be used to seperate content.
This one shows a combination of single and double wide columns.
A Standard or Uniform Table
Product
Features
Price
Content 1
Content 2
Content 3
Content 4
Content 5
Content 6
Content 7
Content 8
Content 9
Content 10
Content 11
Content 12
Table 2 - Standard or Uniform Table
This is a sample of a standard or uniform table format.
This table is a three column wide table. Tables such as these are often used to display information such as a product / price list.
It could include things like product titles, descriptions, features, and a unit price list.
A More Complex Multi-Column Table
Content 1
Content 2
Content 3
Content 4
Content 5
Content 6
Content 7
Content 8
Content 9
Content 10
Content 11
Content 12
Table 3 - A More Complex Multi-Column Table
This is a sample of a more complex multi-row-column table format.
This table combines rows and columns as required. Tables such as these are often used to display complex arrangements of information.
It could include a multitude of items.
This Slideshow uses "Drop-In" Text Graphics.
We have three graphics side by side in this
example. By keeping the text here in short lines
and no width defined then the table graphics stay
tigher together in this three column setup using
this Slideshow "Drop-In" javascript code.
This is a great tool for visual graphics like
logo's if you really want to draw attention.
Website Graphics 1.2
This Slideshow "Drop-In" Text Graphics.
Note that each graphic "Drops In" at a
different rate for a nicer effect. For
these slides we did not set up the first
two graphics with any (hyper) links.
Slideshows 1.3 will demonstrate linking
to further detailed information.
Solutions Graphics 1.3
This Slideshow "Drop-In" Text Graphics.
If you place the mouse pointer over any of
these 3 text graphics (above) it will stop
text from dropping until it is moved away
again. Pretty Cool, Ehh? This graphic is set
up as a link to a details information pages
that shows up "on top" to provide more detailed
information while leaving the original webpage open.
We placed the first slideshow here, (2.1), with a single cell table with a wider black border to give this slideshow a "framed" look.
There are several ways to setup slideshows both with and without borders, and some work better then others depending on the needs of the
slideshow. It largely dedpends on whether you are using a uniform size for your photos or they are different shapes and sizes.
The more variation in sizes the harder it is to keep the slideshow looking really clean and properly centered. Plus it simply looks better
if the photos that are used are all the same size and shape.
Fall Photos 2.2 - Slideshow Without Borders
This Slideshow is of Eight Fall Photos with no border functions. All photos have the same dimensions of 200 w x 200 h so the transition
is much smoother then if we had of used a variety of different size slides. - We have kept these 3 slideshows with having (almost) all images
with the same dimensions so you can see what hapens when the odd sized photo shows up.
Cakes and Sweets 2.3 Anchor Links to "Detail Page"
As in Slideshows 1 (above), If you move your mouse over the photo the picture will stay still,
BUT this slideshow 2.3 uses Anchor Links from each slide that is clicked upon would take you to
more information detail on that particular slide. The link can be to another page or to another part
of your website (like features of that product or the heading for the website section - as 2.1 and 2.2)
or even to an external website for more information. In Slideshow 2.3 clicking on the slide link will
load a new page seperately "on top" rather then leave the slideshow. The options to navigate using
individual slides is pretty neat and useful in many ways to assess more information when they are set up properly.
Slideshows 3 - Navigation via Text/Buttons with Borders
Slideshow 3.1 within Table with Captions and Navigation Buttons
This is a slideshow bordered within a table and using buttons to control the way it is viewed.
Right now there are no links from the photos to further detail although this could be set up if desired.
This slideshow allows for a soft background color to complement the feel of the slideshow. It is a very clean slideshow format.
This is a centered slideshow bordered in green that is controlled via text links as buttons to advance through the slides.
Just click on the text (Previous - Next) links - to rotate through the slides as desired.
Here we have a slideshow with a translucent visual effect. This slideshow has a defined outer border set to the largest
dimensions of the photos used. It will automatically center all photos that are the same size or smaller then the defined
slideshow dimensions. The photos in Slideshow 3.1 and 3.2 are not set up with any links, BUT this slideshow 3.3 is set up
with anchor links to open in a "new window". Just another example of how photo links could be used.
Slideshows 4 - Horizontal and Vertical Marquees and Reel-In Effects
Marquee Slideshow 4.1
Here we have a marquee slideshow with a horizontal slide visual effect. This slideshow has eight images with thin borders.
It will automatically scroll across each photo until you place your mouse over the image. The photos in Slideshow 4.1 are set up
with links to more information in a "new window". Yet another example of how image links could be used.
Slideshow 4.2 - Using Marquee Scrolling
In this slideshow 4.2 we are using the marquee scrolling feature. The marquee option is good if you desire the viewer to
see all the photos. When using this format for a slideshow they cannot interrupt (i.e. pause or stop) the slides from
repeatedly scrolling through. Although that also means that they cannot hover the mouse pointer and stop it on any one slide.
Here we have a Reel-In Slideshow 4.3. whichs pulls in from the right side using an outer thick red border.
Although the coding for this slideshow should center the photos of various dimensions it seems to align to the right side.
Therefore if we used more then one size photo there is a slight margin noticeable to the left side. So this particular javascript should
only use photos of the same dimensions. The photos here, are set up as anchor links to this SS4 section, BUT they are set up to open
in a "new window" as another demonstration of the flexibility of linking.
Here we have your Dynamic Image Selector - Slideshow 5.1. This is a "dynamic" image selector that allows your surfers to see an image
by selecting it from a text selection list. It is dynamic in that the images do NOT have to be of the same dimensions, a limitation that
most other image selector scripts out there have. Great when your photos are a variety of dimensions. The photos are not currently set
up as links to further information although they can be.
Slideshow 5.2 - Thumbnail Gallery Feature
This has a 4 x 2 thumbnail grid of kitten photos from which the main section will automatically display each one.
You can bring any photo to the front by placing the mouse over the desired image.
Each photo can include a caption underneath it. Thumbnails are another great slideshow effect.
Translucent Carousel Slideshow 5.3
Here we have a Translucent Carousel Slideshow 5.3. This slideshow displays eight images in a translucent
fashion that clarifies as the pictures revolve clockwise. All photos are the same size and you may move the
mouse icon over each photo to zoom in on the picture. The photos in Slideshow 5.3 are set up as anchor links
to this SS5 section, BUT links in this slideshow could also be set up to open in a "new window".
If the carousel is scrolling fast, it is because of the number of slideshow scripts running on this one
page and some will effect others on this one webpage. If you click on refresh this carousel slideshow will
resume to its normal speed again. Thank you.
Here we have your Grand Opening Ribbon Cutting. A great little graphic for that "Big Event". We have access to many
catchy Basic Animated Graphics of all sizes that will give your website that extra little punch of visual effect.
Blinking Eyes "C W S"
These are "Alphabet" samples of Basic Animated Graphics. We have access to many catchy
Basic Animated Graphics of all sizes that will give your website that extra little punch of visual effect.
Help Wanted Sign
Here we have your Help Wanted Sign. A great little graphic for that online advertising for your job vacancy.
We have access to many catchy Basic Animated Graphics of all sizes that will give your website that extra little
punch of visual effect.
This is your "Not So Typical - Customer Service Representative". We have access to many catchy
Advanced Animated Graphics of all sizes that will give your website that extra punch of special visual effect.
Kids On A Roller Coaster
Here we have some Kids On A Roller Coaster. A great graphic for that "Extra Fun Event". We have access to many catchy
Advanced Animated Graphics of all sizes that will give your website that extra punch of special visual effect.
Relaxing Professional
Here we have your professional businessman relaxing while his creative website solution markets for him.
Hint! What shameless marketing and self promotion. Don't you think? LOL. We have access to many catchy
Advanced Animated Graphics of all sizes that will give your website that extra punch of special visual effect.
Here we have a few examples of button icons that can be used to assist in navigation of your website.
The buttons can be solid, multi-colored, textured and labled. We have acess to many catchy
Buttons but don't push it. (See Column 3->)
Directional Arrows and Icons
Here we have an example of directional arrows and icons that can be used to assist in navigation of your website.
Often such directional graphics are great for a visual cue then just using text. They can be either stationary or
animated graphics. Some like the animated, others do not. The choice is yours to decide. We have acess to many
catchy arrows and icons of all sizes that will give your website that extra little punch of visual effect.
These text area boxes are great if you want to use a small area of your website for details on a topic, without
scrolling the whole page. Something that doesn't need to be printed off, but which will give your audience more
information without opening another webpage in another window.
Another cool effect is using a background graphic behind a block of text. This is a bit different then a
textarea box. This section is border free and uses a faiding background image to fill the entire section. Pretty Cool!
Small Note: - The background colors and images will not show when printed out. This saves on the use of
colored ink and will give your printout a much cleaner look.
These are example of form submit buttons. The first set of three can work similar to a horizontal menu that actions which clicked on.
The last one (by itself) is just another example of a single form submit button.
Other pressable buttons are often created using two graphics. One that is how the button looks (up), as first seen, and a second graphic
which is what the graphic changes too (down), temporaily when pressed (clicked on). See the two graphics that follow
as an example:
1 +
2 = "This Radio Button"
The result (when coded) can create a pressable graphic "Radio Button" as shown above.
The Fancy Stuff - Like Press(able) Radio Buttons and Icons
Here we have a few examples of the fancy stuff. You may want more fancy buttons or icon graphics that can be used
to assist in navigation of your website. Such buttons can be three dimensional and can even have a raised and pressed
look when you move over or press (click) the button with the mouse. The buttons can be solid, multi-colored, textured
and labled. We have acess to many catchy buttons that provide that extra little punch of visual effect,
but don't push it. (just kidding, LOL)
Forms - Feedback Forms, Surveys/Polls, Order Forms, Product Requests and More
Feedback Form 1
Please complete the following if you wish to send us your feedback. Thank you.
Feedback Form 1 - Example
Here we have an example of a feedback form that can be used to assist in identifying your
customers needs via your website. The functions can include multiple responses via checkboxes
and chose one option answeres via radio buttons. The background can be colored or textured to \
match your website and the results can be emailed to your email account.
Survey / Poll Form 2
Completing this survey will help us to serve you better.
Please use the following survey if you wish to send us your feedback. Thank you.
Survey / Poll Form 2 - Example
Here we have an example of a survey format with sample questions. Such surveys can be used to assist in
further identifying your customers needs via your website. The functions can include an open text field for
comments and also multiple responses via checkboxes and chose one option answers via radio buttons. The
background can be colored to match your website (or textured as here) and the results can be emailed to your email account.
Product Request Form 3
Please complete the following if you wish to request information about any of our products. Thank you.
Product Request Form 3 - Example
Here we have an example of a product request form that can be used to assist in identifying your
customers' product needs via your website. The functions can include multiple responses via checkboxes
and chose one option answeres via radio buttons. The background can be colored or textured to match your
website and the results can be emailed to your email account.
UnitConversion.org - online unit converter of length, weight, volume, area, and more.
Simple Length Conversion Tool
This Online Conversion Tool is an example of Length Measurements that are often useful for a website to
have for their clients when they need to calculate metric to standard. This is only an example of some of the
various lenght measurements that could be used.
Sample Currency Conversion Tool
Sample of Online Currency Conversions
UnitConversion.org - online unit converter of length, weight, volume, area, and more.
Simple Length Conversion Tool
This Online Conversion Tool is an example of Currency Conversion that are often useful for a website to
have for their clients when they need to calculate monetary exchange rates. This is only an example of some of the
various $ currencies that could be used.
Sample Fuel Consumption Conversion Tool
Sample of Online Fuel Consumption Conversions
UnitConversion.org - online unit converter of length, weight, volume, area, and more.
Simple Fuel Consumption Conversion Tool
This Online Conversion Tool is an example of Fuel Consumption Conversion that are often useful for a website to
have for their clients when they need to calculate fuel efficiencies. This is only an example of some of the
various conversion tools that could be used.