How To Add A Visitor Counter! (So you can see how many people are stalking you)

In the spirit of Halloween, let’s get creepy!

This tutorial. I’ll be showing you how to add a visitor counter widget to your website so that you can keep tabs on how many people are visiting your page.

So to start, open Dreamweaver and then follow these steps:

1) Open the project page that you will be adding this to (most likely your home index page).

2) Go to Google! Type in widgetbox. Choose the first link that comes up. It should be http://www.widgetbox.com/

Image

3) Click on the top of this page where it says “Widgets.”  It is highlighted in the above image.

4) Type into the search box “Visitor Counter.”

5) A search results page will come up now:

Image

You can choose from any of these widgets for the counter, based on your personal preference.  I picked the third one down that read “Free Hit Counter for Your Website or Blog.”

6) Once you choose which widget you want to use, click it and when the page loads, go to the left side of the screen and play around with the option of styles.

Screen Shot 2013-10-31 at 1.55.03 AM

I chose style 8 for my website. but again this is all about personal choice of how you want the numbers to appear.  You can also change the settings of how many digits you want to appear. like 0000000005 of just 005 or maybe 00005. It’s all about how you want to customize your page.

7) Once you are content, press the button that says “Get Widget.”

8) A box will pop-up that has the option to copy the link. Copy it.

Screen Shot 2013-10-31 at 1.56.37 AM

 

9) Head back to DreamWeaver.

10) Once you know where you want to add the counter, click into the editing page and paste. Something like this will appear:

Screen Shot 2013-10-31 at 1.58.57 AM

11) Highlight the text that in the live page appears once you paste.Then press delete. (This won’t delete the actual widget — don’t worry).

Screen Shot 2013-10-31 at 1.59.58 AM

12)SAVE THE PAGE.

13) Preview in the internet and your first “count” should register. Make sure to try this a few times to see if it counts! It should work.

Screen Shot 2013-10-31 at 2.02.39 AM

 

CONGRATS. You can now count your stalkers 🙂

BOO,

TMT

 

 

Advertisements

How to make your kids fully flushed, scalable, and fixed.

Kids as in baby goats of course. Everybody loves baby animals but how do you get an image of baby goats to really make an impression as the background of a website? First, you can make the kids Really Big, in other words you can have your image fully flushed with the internet browser window. Then you can make the kids follow any adjustment made to the browser size, this is where making your image scalable and fixed comes in.

First find your kids and open Dreamweaver…

Image

Once you have new HTML and CSS files opened, we can start by making the image fully flushed. In your CSS file make a new rule called “.background.” You’ll want to make the following settings …

Image

Then link your CSS file to your HTML document. In the “body” tag you’ll want to create the background “class.” This way the CSS rule you’ve created will be applied to this tag. Then just for fun you can add text in an “h1” tag. This text will appear over the background image. You may also want to add some “br” tags to add length to your page. At this point, the image should fully fill the web browser, making the kids Really Big, and your text should appear over the image.

Image

Next you’ll want to further refine the CSS rules for your image to make the kids scalable and fixed on the browser. In your CSS document add the following rules…

background-attachment: fixed;

background-position: center

background-repeat: no-repeat;

These additional rules will cause the kids to scale to the size of the browser. It will also cause the center of the image to always be in the center of the browser window.

Image

Image

And that’s how you make your kids fully flushed, scalable, and fixed.

-AG

Want to make things scroll and bounce?

So you’re making a website. A most ambitious venture, indeed. But maybe a stationary page is not to your fancy. Perhaps you feel the need to make something on your pages move. “How can I do that?” you might ask. Look no further than this blog post!

I’m going to teach you the simple steps to making a marquee for your page! “What is a marquee?” you are asking yourself. Remember back in the Myspace days when people had nice little messages scrolling across their pages?

I can be your guru and teach you how to do that. Hang tight. This gon’ be intense.

First, open up the page you would like to add the effect to in Dreamweaver. Find and isolate the text you want to make scroll.

Screen Shot 2013-10-30 at 10.45.38 PM

Decide which direction you want your text to scroll. Left, right, up, down, it is all up to you. I chose to make it go to the left. On the outside left of the sentence or phrase you chose, type “<marquee direction=left/right/up/down>”. Obviously, only choose one direction for your marquee to scroll.

Screen Shot 2013-10-30 at 10.46.46 PM

Don’t forget to close your html with “</marquee>”!

Screen Shot 2013-10-30 at 10.47.45 PM

If you’d like, you could even make a marquee that bounces back and forth between the edges of the screen!

Find and isolate the text you want to make bounce.

Screen Shot 2013-10-30 at 10.48.23 PM

Type this to the right of the text: <marquee behavior=”alternate”>.

Screen Shot 2013-10-30 at 10.49.10 PM

Once again, don’t forget to close your html!

Screen Shot 2013-10-30 at 10.49.29 PM

To change the speed of your marquee, all you have to do is add this to your code: scrollamount=”#”> You do not need to start a new piece of code for this part.

Screen Shot 2013-10-30 at 10.50.31 PM

Change the number sign to whatever number you choose. The higher the number, the faster your text will scroll across the screen.

Have some fun with this! You can use it like I did and make the titles of your pages move, like here, or even make images slide onto and across the page!

Really, you can use it to spice up almost anything on your website!

Have fun!

-EEP

Personalize your page with interactive pop up windows

Initially, I was going to do my blog post on the roll over effect but, after seeing that a lot of other people did that, I decided to choose something else. So, after doing some more Googling I came across a cool, simple trick. I found that making pop up windows is surprisingly easy, and it can add a personalized feel to your website. For example, upon clicking on the link to go to your photo recovery story, you can add have a message pop up that says “You’re going to love this!” or “Good choice!” It just adds a human-like aspect to your website because of the quick interactions that are possible.

You’re going to want a pop up message to come up and perform the task at hand.

Screen Shot 2013-10-30 at 10.26.12 PM

In your css file, you’ll write:

Screen Shot 2013-10-30 at 10.12.30 PM

In your html code, you’ll make a div calling the class “message.” Within the body of the div, you’ll write the message that you’d like to be displayed in the pop up window. The code will look like this:
<div class=”message”> Get ready for the greatest web page ever! </div>

That’s all there is to it! I would suggest reading some other classmates tutorials in order to perfectly implement this. It could be cool to blur out the back when your message pops up, and then just insert a button at the bottom so the user can continue on. Both of these are explained in detail in previous posts, so I won’t go into detail about them. By knowing the basics behind adding an interactive pop up window, you can combine a bunch of techniques to add a really cool aspect to your webpage.

What’s nice about Dreamweaver is that there are a lot of different ways to make a popup message, so choose whichever makes the most sense to you! Another way to do it is to first highlight the text or image that you want to trigger the popup message when clicked on. This could be an option in your menu, or just a random component of your webpage. Go to the “Behaviors” window and click “+” then choose “Pop-up message.” This will show you a screen where you type in the message you want displayed, then click OK. Now, whenever your trigger is clicked the pop-up message will appear.

Below are some websites where you can find more information about prompt boxes. When I was researching this method, I found a lot of information about how to do this in Javascript. While this is not what I was looking for, it did help me understand the process behind the technique. There are “if-statements” and “else if statements” implemented, which explains the concept well. To me, the Java code worked more like my brain does then the Dreamweaver method did, so it helped me a lot. I included places to find information about the Javascript as well.

http://www.kgv.ac.uk/intranet/it/cer/Unit7Web/unit%207%20ELT/create/dreamweaver/popup/intro2.htm
http://www.webdesign.org/html-and-css/tutorials/creating-a-pop-up-message-with-dreamweaver-cs3.20303.html
http://www.w3schools.com/js/js_popup.asp

Good luck!

– TS

 

Slap a poll on your page! (survey that is)

Who doesn’t enjoy filling our a quick one question survey that asks you a random question about, say, your favorite celeb?  Keep reading and you’ll quickly learn how to add some interaction to your page.

1.  You have to create your survey by registering for an account at http://www.rationalsurvey.com/register/free, it’s super easy.

Image

2.  Once you get into your account you’ll see that they give you sample questions.  You need to delete those by clicking the trashcan that appears on the question when you hover your mouse over them.  Then just click the “+” sign to create your question.

Image

3.  Type up your question and answers.   Then choose the setting you want for your survey.  Then click save!

Image

4.  Now find the tool box on the right hand of the page and click the button that says “get survey embed script” when you hover it.

Image

5. Finally, copy and paste the script into the respective area in your webpage’s HTML.

WHAM, BAM, THANK YA MAA’M.  Ask away at your audience!

ADW

Making Magic Photos!

A very interesting technique I discovered inside Dreamweaver is using the rollover effect on images. This technique makes pictures EXCITING and EXPLOSIVE! Essentially it displays a normal photo until a mouse rolls over top of it, like a hover effect that make links interactive. This could be used for several different innovative and exciting reasons: interactive pictures like in my photo essay, the logo you have on your site (so people love it and want to come back), and, if you’re feeling it, before and after acne pictures!

So I bet you’re wondering how you can be this cool. It’s actually the easiest thing ever.

  • Make your .html page and have it all fancy and spiffy except for your photo/logo.
  • Have the spot where you want your picture to be and click there. You’re going to go to the tool bar at the top and hit

*insert > image > rollover image

When you do this, a box will pop up that looks like this:

Image

  • As mentioned in the picture, it’s very self explanatory. The original picture gets open in the “original image” section. Similarly, the hover picture gets opened in the “rollover image” section. The title is what it will say in the blank box if your page doesn’t load, so it is important to add a title so if all else fails, people can visualize it.
  • Hit okay, and wha-la! Your thingy is now an interactive neat mosquito thingy!

I tried adding a rollover photo to this post, but I couldn’t really figure it out. If you want to see first hand, visit my site:

http://thoughtsandgoodies.x10.bz/photoessay.html

If you’re like me, you won’t click on it so I’ll show you some side-by-side examples!

(They are actually not side-by-side. I’m not sorry.)

Original Picture:

Image

Rollover Picture:

Image

Original Picture:

Image

Rollover Picture:

Image

-Cody

Having multiple columns

Note: I’m not using dreamweaver, so I’ll just write a post on a CSS trick.

Having multiple columns is something that seems like it should be easy, but often times it’s not.  It could be difficult to get the spacing right, and it’s even more difficult to get the text to flow from one column to the next automatically.  There are tricks to get this done, but they’re unnecessarily complicated (programming very much follows Ockham’s Razor: unnecessary complication is bad).

The way that you should create multiple columns is by using the new CSS3 column functionality.  Basically, you just specify the number of columns, spacing between them, and any sort of styling used to separate them, and you’re finished.  For example:

(note: the css3 column feature isn’t fully supported in Firefox, Safari and Chrome yet, so you just have to use the easy -moz and -webkit prefixes.)

.newspaper
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;

-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari and Chrome */
column-gap:40px;

-moz-column-rule:4px outset #ff00ff; /* Firefox */
-webkit-column-rule:4px outset #ff00ff; /* Safari and Chrome */
column-rule:4px outset #ff00ff;
}

See http://www.w3schools.com/css/css3_multiple_columns.asp for more information.

Happy Coding!

– Adam Zerner