Making a Beautiful Navigation Bar

Personalize Your Navigation Bar

We all know there’s nothing worse, and nothing more 90s than a simple, vertical, bullet-point navigation bar. In fact, people will probably leave your website immediately if they see this on your home page, especially if the links in that bulleted list are bright blue and turn red when clicked. *Mental cringe*. Today, it’s very simple to create a crisp, beautiful navigation bar that reflects your website’s content as well as your wonderful, competent, web-designing self.

The nav bar is of ultimate important (oh yes, we’re speaking in html slang now because we’re all experts right?—or at least we can pretend). It is the first thing visitors to your website see and it should appears on every page of your site. You want to be cognizant and conscious of your choices: choosing appropriate fonts, colors, and styles that are not only reflective of your personality but are also easy to see and use. I think, with nav bars and with all web design really, the key is to be subtle and simple. I designed my home page on my website with a simple navigation menu that utilized simple colors and animation. How did I do it you may ask? I’m not really quite sure, because it took me forever. This html stuff is tough, hence the lateness of this post. But I think we’re all starting to get it down.

I started with writing my html code, which I kept it pretty simple. I wanted to keep my home page as mostly minimalist to feature the home page banner I made in photoshop complete with Amelia Judith Ohm logo. I also like to keep everything in sections or containers or something to keep everything organized and keep the option open of adding a background color or alignment command to those separate sections. The nav bar html is something we went over in class so I won’t explain it too much. I’ll just say to make sure your links are linked to the write pages within your website. There’s nothing more frustrating for a user than to click on “Photo” and you end up on a personal blog. Here is my HTML:

Image

On to the CSS code. First, I wanted to make sure my nav bar was in the center of my screen with centered text in a horizontal line. To do this I first specified {text-align: center;} under ul to center my text. I then centered the entire container holding my nav bar by specifying {left:auto; width:100%;} this trick ensures that your entire nav bar will be centered on the screen. Next I specified {display:inline-block;} under li to get my navigation buttons in a horizontal line as opposed to a vertical list.

Next came the fun part. To get the nav bar to be interactive I utilized the pseudo classes of a (a:link hover active visited) to personalize how my links interact with visitors to my site. The first thing I did was have my links slightly scale up when hovered over and clicked. I kept this scale up very subtle so it didn’t look tacky. To do this I first specified that the links should start out at their normal size, and when interacted with the interaction should “ease-in” and take half a second to complete. Here’s the code:

a {

-webkit-transform: scale(1);

-webkit-transition-timing-function:ease-in;

-webkit-transition-duration: .5s;    }

I then made a pseudo class of a for when it is hovered over and active. Here is the code:

a:hover, a:active {

background-color:#9A9293;

-webkit-transform:scale(1.01,1.01);

-webkit-transition-timing-function:ease-out;

-webkit-transition-duration: .25s;
}

This code specifies that when hovered over or active the links should over the links should take on a new color (I chose a light gray) and should scale up by .01. When they are no longer being hovered over the links should “ease-out” back to their original appearance and this transformation should take one quarter of a second.

Here’s how my entire CSS for the nav bar ended up looking:

Image

I enjoyed working with this code because it was easy to write and tweak, making it a great skill for us beginning coders to have. I hope one or two of the tools I used can help make your nav bars beautiful and modern. Here are some shots of the code in action. I made the banner in photoshop as I mentioned. It seems to be struggling to work online–I’m still working out some bugs–but hopefully  my live website will look just like this representation very soon.

Image

Image

Image

Happy coding

ao

Advertisements

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

 

 

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