CREATIVE WEBSITE SOLUTIONS


Creative Website Solutions, Oxford, Nova Scotia, Canada,
Building Creative Website Solutions That Serve You Best!
With Over 17 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

Anchor LinksHorizontal Navigation Menues Vertical Navigation Menues
Bullet ListsTable Formats Slide Show 1 - SS1 Drop-In Graphics
SS2 Photos w Anchor LinksSS3 Navigation Text/Buttons SS4 Marquee + Reel-In Effects
Multi-View Photo SelectionBasic Animated Graphics Advanced Animated Graphics
Navigation Buttons / Directional ArrowsForms - Feedback/Survey/Etc. Online Conversion Tools

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.

Back to Top

Horizontal Navigation Menues

Horizontal (Text) Navigation Menu
Name / Address
Photo / Graphic
The Main Section For Web Page Content
Such as Products / Services Info Here.
Copyright © 2011 Creative Website Solutions

Simple Horizontal (Text) Menu

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.
Copyright © 2011 Creative Website Solutions

Horizontal (Graphics) Navigation Menu

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.

Multi-Line Multi-Column Horizontal (Text) Menu
Name / Address
Photo / Graphic
The Main Section For Web Page Content
Such as Products / Services Info Here.
Copyright © 2011 Creative Website Solutions

Multi-Line Multi-Column Horizontal (Text)Menu

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.

Back to Top

Vertical Side-Bar Navigation Menues

Welcome
About
Services
Contact

Vertical Side-Bar (Text) Menu - With Defined Borders
Name / Address
Photo / Graphic
The Main Section For Web Page Content (1) Goes In Here.

Products / Services Info Here.
Copyright © 2011 Creative Website Solutions

Vertical Side-Bar (Text) Menu

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.

Products / Services Info Here.
Copyright © 2011 Creative Website Solutions

Vertical Side-Bar (Graphics) Menu

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.

Welcome
About
Services
Contact

Vertical Side-Bar (Text) Menu - Without Defined Borders
Name / Address
Photo / Graphic
The Main Section For Web Page
Content (3) Goes In Here.

Products / Services Info Here.
Copyright © 2011 Creative Website Solutions

Vertical Side-Bar (Text) Menu - Without Borders

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.

Back to Top

Bullet Lists

Bullet List using Standard Symbols


  • Bread
  • Milk
  • Eggs
  • Sugar
  • Flour
  • Cereal
  • Beef
  • Chicken
2nd Bullet List with (css styled)Arrow Bullets

  • Bread
  • Milk
  • Eggs
  • Sugar
  • Flour
  • Cereal
  • Beef
  • Chicken
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

  1. Canada's Food Guide
  2. Exercise Plan
  3. Benefits of Water
  4. Calorie Counter
  5. Mentor Assistance
  6. Goals and Benchmarks
  7. Non-Food Rewards System
  8. 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
    1. Subitem 1
    2. Subitem 2
    3. Subitem 3
  • Chapter 2 - Complex Options
    1. Subsection 1
    2. Subsection 2
  • Chapter 3 - Readability
  • Chapter 4 - Level Distinction
    1. Level 1, Item 1
      1. Level 2, Item 1
        1. Level 3, Item 1
        2. Level 3, Item 2
      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.

Back to Top

Table Formats

Just A Simple Table
Content 1Content 2
Second Row Content 3
Content 4Content 5
Third Row Content 6

Simple Table 1

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
ProductFeaturesPrice
Content 1Content 2Content 3
Content 4Content 5Content 6
Content 7Content 8Content 9
Content 10Content 11Content 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 1Content 2Content 3 Content 4

Content 5Content 6Content 7
Content 8Content 9
Content 10Content 11Content 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.

Back to Top

Slideshows 1 - Using Drop-In Graphics



Creative Graphics 1.1

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.

Back to Top

Slideshows 2 - Photos With Anchor Links



Antique Autos 2.1 - Border Framed Slideshow

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.

Back to Top

Slideshows 3 - Navigation via Text/Buttons with Borders

Check Out These Cakes and Sweets

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.


Slideshow 3.2 - With Text Navigation Buttons

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.


back forth
Or go to a particular slide:
1st slide | 2nd slide | 3rd slide |4th slide

Translucent Slideshow 3.3

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.

Back to Top

Slideshows 4 - Horizontal and Vertical Marquees and Reel-In Effects

Fall Over the Lake Fall Leaves on the Trees Fall in the Park Even More Fall Fall - My Favorite Season Autumn Beauty Fall Leaves on the Ground Fall is Awesome

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.



Was That a Midget Triumpt?

Was That a Lincoln?

Was That a Dodge Monaco?

Was That an Ugly Old Car?

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.

back forth

Reel-In Slideshow 4.3

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.

Back to Top

Slideshows 5 - Multi-View Photo Selection Tools

Dynamic Image Selector - Slideshow 5.1

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.

Back to Top

Basic Animated Graphics


Grand Opening - Ribbon Cutting

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.

Back to Top

Advanced Animated Graphics


Customer Service Desk

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.

Back to Top

Navigation Buttons, Directional Arrows and Icons








Buttons - Don't Push It

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:

Graphic 1 (Up) + Graphic 2 (Down) And (html code) = "Radio Button"

1 + 2 = "This Radio Button" Home
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)

Back to Top

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.

Full Name:

Email Address:

How did you find our website?
Search Engine
Media Advertisement
Word of Mouth
Direct Contact

Are you considering having a website?
Yes
No

Are you considering using Creative Website Solutions to develop or improve your website?
Yes
No

Other Comments:



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.

Full Name:

Email Address:


How would you rate the usefulness of our website?
Poor | Okay | Good | Very Good

What is the purpose of your visit to our website today?

Were you able to complete your task today?
Yes
No


If you were not able to complete your task today, why not?


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.

Full Name:


Address:


Email Address:


Which Products are you interested in?
Photos
Frames
Photo & Frame Package

Are you considering a purchase of our products?
Yes | No

Do you wish details on our shipping and handling costs?
Yes | No

Include Product Codes for Items of Interest Here:



Other Comments:



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.

Back to Top

Online Conversion Tools

Sample Length Conversion Tool
From:
To:
Result:
Sample of Online Length Conversions

UnitConversion.org - online unit converter of length, weight, volume, area, and more.

Unit Converter

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
From:
To:
Result:
Sample of Online Currency Conversions

UnitConversion.org - online unit converter of length, weight, volume, area, and more.

Unit Converter

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
From:
To:
Result:
Sample of Online Fuel Consumption Conversions

UnitConversion.org - online unit converter of length, weight, volume, area, and more.

Unit Converter

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.

Back to Top



Copyright ©  2009 - Creative Website Solutions