Hello. I am new to web design, and on some websites, if you hover your mouse cursor over a link the colour changes, or a drop down box with more links show, I was wondering how to do this, because I understand that you cant use HTML to do this right? I am learning using Microsoft Expression Web (similar to Adobe Dreamweaver).
Firstly, if i have to use Java Script or similar in the website, is there some way that you can do this easily using expression web, or how do I implement it in my already created code? This is important because if I succeed at learning web design etc, I have been given a job designing my mum's employers website, and this would be a great thing to include to make it look a bit better.
Thanks. Jack
Web design with Java Script help?
These things are all stylistic in nature, and can be done using CSS, but the dropdown list needs some JavaScript to support Internet Explorer 6 (and I think IE7 as well).
I don't know much about WYSIWYG editors, but I highly recommend studying hand coding HTML, CSS and JavaScript, as well as learning about Web Standards. Websites like:
鈥?http://htmldog.com/ (HTML and CSS, plus some tricks and JavaScript basics.)
鈥?http://www.alistapart.com/ (Web Standards in general.)
鈥?http://www.quirksmode.org/ (JavaScript, Unobtrusive JavaScript and cross-compatibility.)
鈥?http://www.alertbox.com/ (Web Standards, Usability, Accessibility and best practices in web design.)
are all good places to learn about web standardism and coding HTML.
HTML Dog is probably one of the best stepping stones that you can find.
For example, let's say that you have a navigational list to the left, the links of which will change to an orange colour (#f71) when hovered over. And will make another list of links appear between the list items when hovered over as well.
%26lt;ul id=%26quot;nav%26quot;%26gt;
聽聽聽聽%26lt;li%26gt;%26lt;h2%26gt;%26lt;a href=%26quot;triangles/%26quot;%26gt;Triangles%26lt;/a%26gt;%26lt;/h2%26gt;
聽聽聽聽聽聽聽聽%26lt;ul%26gt;
聽聽聽聽聽聽聽聽聽聽聽聽%26lt;li%26gt;%26lt;a href=%26quot;triangles/right/%26quot;%26gt;Right Triangle%26lt;/a%26gt;%26lt;/li%26gt;
聽聽聽聽聽聽聽聽聽聽聽聽%26lt;li%26gt;%26lt;a href=%26quot;triangles/acute/%26quot;%26gt;Acute Triangle%26lt;/a%26gt;%26lt;/li%26gt;
聽聽聽聽聽聽聽聽%26lt;/ul%26gt;
聽聽聽聽%26lt;/li%26gt;
聽聽聽聽%26lt;li%26gt;%26lt;h2%26gt;%26lt;a href=%26quot;quadrilaterals/%26quot;%26gt;Quadrilaterals%26lt;/a %26gt;%26lt;/h2%26gt;
聽聽聽聽聽聽聽聽%26lt;ul%26gt;
聽聽聽聽聽聽聽聽聽聽聽聽%26lt;li%26gt;%26lt;a href=%26quot;quadrilaterals/rectangle/%26quot; %26gt;Rectangle%26lt;/a%26gt;%26lt;/li%26gt;
聽聽聽聽聽聽聽聽聽聽聽聽%26lt;li%26gt;%26lt;a href=%26quot;quadrilaterals/parallelogram%26quot; %26gt;Parallelogram%26lt;/a%26gt;%26lt;/li%26gt;
聽聽聽聽聽聽聽聽%26lt;/ul%26gt;
聽聽聽聽%26lt;/li%26gt;
%26lt;/ul%26gt;
The CSS for making links the orange colour would be:
a:hover {
聽聽聽聽color: #f71;
}
The code to make the lists appear only when hovered over is:
li ul {
聽聽聽聽display: none;
}
li:hover ul {
聽聽聽聽display: block;
}
This is a very simple example though, but you can read more about it on the HTML Dog Suckerfish article =)
To link this to your HTML document, you use a link such as:
%26lt;link rel=%26quot;stylesheet%26quot; type=%26quot;text/css%26quot; href=%26quot;navigation.css%26quot; media=%26quot;all%26quot; /%26gt;
in the head of your document. This is very similar to an empty anchor %26lt;a /%26gt; that belongs in the document head and includes a media type. %26quot;navigation.css%26quot; represents your stylesheet's URI.
Another way to add a stylesheet is to use an XML instruction:
%26lt;?xml-stylsheet type=%26quot;text/css%26quot; href=%26quot;navigation.css%26quot; media=%26quot;all%26quot;?%26gt;
I usually put this right after the xml-prologue, but this is only suggested on the server-side because Internet Explorer can't accept HTML documents which are served as an XML application. I hope that this all helps!
Web design with Java Script help?
This site has scripts that you can use:
http://www.dynamicdrive.com/dynamicindex鈥?/a>
