Gradient Colour in Content Box
Coding a colour gradient as the background colour of my main content box is a tricky task to do. However, I have found a CSS tutorial that makes doing this easier. By following this tutorial I should be able to include the following CSS to create this background:
<style type="text/css">I will obviously adapt the background colour and background image (and its size) for my own design when making the site in Dreamweaver - but by using this code I should be able to use my gradient colour without too many problems.
<!--
body {
background-color: #CCCCCC;
background-image: url(images/gradient_bkg.jpg);
background-repeat: repeat-y;
}
-->
</style>
Sidebar Google Gadget
Google have a custom search tool available here and it allows you to create a search tool for any website or webpage that you own.
It gives you a ready-made piece of HTML coding which you can then include in your site - it looks like this (the code was programmed for this blog's web address):
Obviously when creating the website, a different URL will have to be used - or a mock box may have to be created - as the site may not be available on a web URL. However, even using a 'dummy' box will still show how the site could use a search tool in order to be functional - and how the site can be easily coded to include such a tool.<div id="cse" style="width: 100%;">Loading</div><script src="http://www.google.com/jsapi" type="text/javascript"></script><script type="text/javascript">google.load('search', '1', {language : 'en'});google.setOnLoadCallback(function() {var customSearchControl = new google.search.CustomSearchControl('010941611730247980388:pa0fg4vkqu4');customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);customSearchControl.draw('cse');}, true);</script><link rel="stylesheet" href="http://www.google.com/cse/style/look/default.css" type="text/css" /> <style type="text/css">.gsc-control-cse {font-family: Arial, sans-serif;border-color: #FFFFFF;background-color: #FFFFFF;}input.gsc-input {border-color: #BCCDF0;}input.gsc-search-button {border-color: #666666;background-color: #CECECE;}.gsc-tabHeader.gsc-tabhInactive {border-color: #E9E9E9;background-color: #E9E9E9;}.gsc-tabHeader.gsc-tabhActive {border-top-color: #FF9900;border-left-color: #E9E9E9;border-right-color: #E9E9E9;background-color: #FFFFFF;}.gsc-tabsArea {border-color: #E9E9E9;}.gsc-webResult.gsc-result {border-color: #FFFFFF;background-color: #FFFFFF;}.gsc-webResult.gsc-result:hover {border-color: #FFFFFF;background-color: #FFFFFF;}.gs-webResult.gs-result a.gs-title:link,.gs-webResult.gs-result a.gs-title:link b {color: #0000CC;}.gs-webResult.gs-result a.gs-title:visited,.gs-webResult.gs-result a.gs-title:visited b {color: #0000CC;}.gs-webResult.gs-result a.gs-title:hover,.gs-webResult.gs-result a.gs-title:hover b {color: #0000CC;}.gs-webResult.gs-result a.gs-title:active,.gs-webResult.gs-result a.gs-title:active b {color: #0000CC;}.gsc-cursor-page {color: #0000CC;}a.gsc-trailing-more-results:link {color: #0000CC;}.gs-webResult.gs-result .gs-snippet {color: #000000;}.gs-webResult.gs-result .gs-visibleUrl {color: #008000;}.gs-webResult.gs-result .gs-visibleUrl-short {color: #008000;}.gs-webResult.gs-result .gs-visibleUrl-short {display: none;}.gs-webResult.gs-result .gs-visibleUrl-long {display: block;}.gsc-cursor-box {border-color: #FFFFFF;}.gsc-results .gsc-cursor-page {border-color: #E9E9E9;background-color: #FFFFFF;}.gsc-results .gsc-cursor-page.gsc-cursor-current-page {border-color: #FF9900;background-color: #FFFFFF;}.gs-promotion.gs-result {border-color: #336699;background-color: #FFFFFF;}.gs-promotion.gs-result a.gs-title:link {color: #0000CC;}.gs-promotion.gs-result a.gs-title:visited {color: #0000CC;}.gs-promotion.gs-result a.gs-title:hover {color: #0000CC;}.gs-promotion.gs-result a.gs-title:active {color: #0000CC;}.gs-promotion.gs-result .gs-snippet {color: #000000;}.gs-promotion.gs-result .gs-visibleUrl,.gs-promotion.gs-result .gs-visibleUrl-short {color: #008000; }</style>
Links to Social Media
As I have chosen to use image and text links as 'buttons' to the respective social networking pages - I do not need any complicated coding, but simply just need to use the <a> HTML tag to link the images to the respective sites. The coding may look something like this:
<a href="http://www.twitter.com">
<img src="twitterimg.png" />
</a>
This would then use an image - such as has been used on the mock-up home page - to link to the Twitter page for the company.
Fading Marquee in the Header
I have previously mentioned how the phone number in the header of my site could be part of a rotating marquee of text which would display different information - such as a slogan, special offer, or the gas safety images that are currently not on the homepage anywhere.
By looking through the internet I found some JavaScript code which can be used to do this:
<!-- Paste this code into an external JavaScript file named: marquee.js -->
/* This script and many more are available free online at
The JavaScript Source :: http://javascript.internet.com
Created by: Mike Hudson :: http://www.afrozeus.com */
function setupFadeLinks() {
arrFadeLinks[0] = "http://javascriptsource.com/snippets/popup-blocker-detection.html";
arrFadeTitles[0] = "1. Popup Blocker Detection";
arrFadeLinks[1] = "http://javascriptsource.com/forms/code-box-editor.html";
arrFadeTitles[1] = "2. Code Box Editor";
arrFadeLinks[2] = "http://javascriptsource.com/miscellaneous/mailto.html";
arrFadeTitles[2] = "3. mailTo";
arrFadeLinks[3] = "http://javascriptsource.com/cookies/delicious-cookies.html";
arrFadeTitles[3] = "4. Delicious Cookies";
arrFadeLinks[4] = "http://javascriptsource.com/snippets/insertafter.html";
arrFadeTitles[4] = "5. insertAfter()";
}
// You can also play with these variables to control fade speed, fade color, and how fast the colors jump.
var m_FadeOut = 255;
var m_FadeIn=0;
var m_Fade = 0;
var m_FadeStep = 3;
var m_FadeWait = 1600;
var m_bFadeOut = true;
var m_iFadeInterval;
window.onload = Fadewl;
var arrFadeLinks;
var arrFadeTitles;
var arrFadeCursor = 0;
var arrFadeMax;
function Fadewl() {
m_iFadeInterval = setInterval(fade_ontimer, 10);
arrFadeLinks = new Array();
arrFadeTitles = new Array();
setupFadeLinks();
arrFadeMax = arrFadeLinks.length-1;
setFadeLink();
}
function setFadeLink() {
var ilink = document.getElementById("fade_link");
ilink.innerHTML = arrFadeTitles[arrFadeCursor];
ilink.href = arrFadeLinks[arrFadeCursor];
}
function fade_ontimer() {
if (m_bFadeOut) {
m_Fade+=m_FadeStep;
if (m_Fade>m_FadeOut) {
arrFadeCursor++;
if (arrFadeCursor>arrFadeMax)
arrFadeCursor=0;
setFadeLink();
m_bFadeOut = false;
}
} else {
m_Fade-=m_FadeStep;
if (m_Fade<m_FadeIn) {
clearInterval(m_iFadeInterval);
setTimeout(Faderesume, m_FadeWait);
m_bFadeOut=true;
}
}
var ilink = document.getElementById("fade_link");
if ((m_Fade<m_FadeOut)&&(m_Fade>m_FadeIn))
ilink.style.color = "#" + ToHex(m_Fade);
}
function Faderesume() {
m_iFadeInterval = setInterval(fade_ontimer, 10);
}
function ToHex(strValue) {
try {
var result= (parseInt(strValue).toString(16));
while (result.length !=2)
result= ("0" +result);
result = result + result + result;
return result.toUpperCase();
}
catch(e)
{
}
}
<!-- Paste this code into the HEAD section of your HTML document.
You may need to change the path of the file. -->
<script type="text/javascript" src="marquee.js"></script>
<!-- Paste this code into the BODY section of your HTML document -->
<div id="fade_base" style="width:250px;border:1px dotted black;padding:5px;height:60px;line-height:1.8em;">
Check out our new scripts:<br>
<strong><em><a id="fade_link"></a></em></strong>
</div>
<p><div align="center">
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</div><p>By using this code I will be able to use the phone number space in my header to contain multiple different messages - something that will be very useful on my website.
It is important to remember though that using JavaScript like this could have a negative affect on the page's loading speed - and also on the accessibility of the site for users which are disabled for example.
Using the site logo as a link to the homepage
In a similar way to how I will link the social networking buttons to their respective websites - I can do the same with the logo / header image in order to make it clickable so that visitors can click it to return to the homepage - which is a feature used on many sites, and thus it is a good idea to include it on this site as it will make the site accessible for users.
No comments:
Post a Comment