Wiki #9
An easy was to make a navigation menu without using sprry
<ul id="nav">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a>
<ul>
<li><a href="#">Link 3.1</a></li>
<li><a href="#">Link 3.2</a></li>
<ul></li>
</ul>
http://woork.blogspot.com/2009/07/10-useful-code-snippets-for-web.html
Wiki #8
This is the code to add a video on your website. Youtube videos are a great addition to any website. It's a great way to add a lot of information.
<embed
width="420" height="345"
src="http://www.youtube.com/v/XGSy3_Czz8k"
type="application/x-shockwave-flash">
</embed>
http://www.w3schools.com/html/html_youtube.asp
WIki #7
How to create a scroll box in CSS. This is a way for the user to quickly scroll through pictures in a professional looking manor. Below is the code used to create this:
<html>
<head>
<title>Scrolling Content Box</title>
<body>
</body>
</html>
I got this from http://www.techrepublic.com/blog/software-engineer/how-do-i-create-a-scrolling-content-box-in-css/
Wiki Entry #6
This CSS is how to create a rollover image on your website. This is very helpful and looks extremely professional.
#clickMe1
{
display: block;
width: 100px;
height: 20px;
background: url("clickme.gif") no-repeat 0 0;
}
#clickMe1:hover
{
background-position: 0 -20px;
}
#clickMe1 span
{
display: none;
}
I got this from http://www.affilorama.com/site-building/how-to-create-a-rollover-button
Wiki Entry #5
This code allows you to do 3D thumbnail hover effects
The markup for the thumbnail structure will be as follows:
<div id="grid" class="main">
<div class="view">
<div class="view-back">
<span data-icon="A">566</span>
<span data-icon="B">124</span>
<a href="http://www.flickr.com/photos/ag2r/5439506585/in/photostream">→</a>
</div>
<img src="images/1.jpg" />
</div>
<div class="view">
<!-- ... -->
</div>
<!-- ... -->
</div>
Each thumbnail goes into a division with another division for the details (view-back). The structure that we want to create for each division with the class view using JavaScript is the following:
<div class="view">
<div class="view-back">
<!-- ... -->
</div>
<div class="s1 slice" style="background-image: url(images/1.jpg); ">
<span class="overlay"></span>
<div class="s2 slice" style="background-image: url(images/1.jpg); ">
<span class="overlay"></span>
<div class="s3 slice" style="background-image: url(images/1.jpg); ">
<span class="overlay"></span>
<div class="s4 slice" style="background-image: url(images/1.jpg); ">
<span class="overlay"></span>
<div class="s5 slice" style="background-image: url(images/1.jpg); ">
<span class="overlay"></span>
</div><!-- /s5 -->
</div><!-- /s4 -->
</div><!-- /s3 -->
</div><!-- /s2 -->
</div><!-- /s1 -->
</div><!-- /view -->
Each slice will have the respective image as it’s background image and since we have a nested structure, this will allow us to control the effect. Additionally, we’ll add an overlay span that we’ll use to make the effects more realistic.
Our JavaScript function looks as follows:
$.fn.hoverfold = function( args ) {
this.each( function() {
$( this ).children( '.view' ).each( function() {
var $item = $( this ),
img = $item.children( 'img' ).attr( 'src' ),
struct = '<div class="s1 slice">';
struct +='<div class="s2 slice">';
struct +='<div class="s3 slice">';
struct +='<div class="s4 slice">';
struct +='<div class="s5 slice">';
struct +='</div>';
struct +='</div>';
struct +='</div>';
struct +='</div>';
struct +='</div>';
var $struct = $( struct );
$item.find( 'img' ).remove().end().append( $struct ).find( 'div.slice' ).css( 'background-image', 'url(' + img + ')' ).prepend( $( '<span class="overlay" ></span>' ) );
} );
});
};
I got this from: http://tympanus.net/codrops/2012/06/18/3d-thumbnail-hover-effects/
@font-face {
font-family:MyFontFamily;
src:url('http://');
}
This code allows you to use custom font without using images 
Comments (11)
Lori said
at 10:14 am on Sep 19, 2013
Entry #1: 0/4. You need to submit your weekly wiki entry from last week.
Lori said
at 9:58 am on Sep 27, 2013
Entry #1: 2/4. Entry was submitted late. This is a useful post but you also need to make sure this approach works on all Web browsers. Also, be sure to include your own step by step directions in addition to a resource link.
Lori said
at 9:58 am on Sep 27, 2013
Entry #2: 0/4. No entry is submitted.
Lori said
at 9:57 am on Oct 9, 2013
Entry #3: 3/4. You are receiving credit for posting but you need to be sure to include all required elements in your post. You need to include a visual and more of a detailed explanation of the final result.
Lori said
at 9:58 am on Oct 9, 2013
Entry #4: 0/4. You need to stay on top of your entries. Late entries are not accepted. The time I provide to you in class to submit your posts should only be used to do that task at hand.
Lori said
at 10:38 am on Oct 28, 2013
Post #5 & #6: 3/4. Both posts of great examples of when to use advance CSS. Although, be sure to post the directions in your own words so that you understand how to implement the code yourself. Also, each post needs a visual.
Lori said
at 11:32 am on Nov 18, 2013
Post #7 & #8: 3/4. Thank you for posting. Try to post on more advance skills in Dreamweaver. Both of these posts were learned in Intro. Also, you need to include an image for each post.
brbenjamin said
at 12:41 pm on Jan 10, 2014
The wiki entries that you submitted were generally very good. My favorite one is the post about custom fonts, as those could be very useful in dreamweaver. The application doesn't really offer the best fonts so that would be helpful to know how to do.
Lori said
at 6:07 pm on Jan 12, 2014
Post #9: 3/4. This is a very useful post especially when designing a larger site. You are missing a visual of the end product.
Post #10: 0/4. Incomplete
viyedidi said
at 6:53 pm on Jan 12, 2014
Although the layout of this page isn't the most organized, I learnt a ton from it. I liked your most recent post; the one about making a menu bar without Sprys. It's very helpful, since I don't really like the look of Spry menu bars, and this will help allow me to create my own rules for the layout, and the colors.
semavaddat said
at 2:38 pm on Jan 14, 2014
The way the wiki is set up is a little confusing for the eye, yet the information on this page is very helpful. I liked how this page is all about different ways to code, something many people struggle at. The font family code was most helpful when i was trying to insert my font into my website.
You don't have permission to comment on this page.