Wiki Entry #7 - Media Queries

Media queries are used to define which CSS document to follow at certain screen sizes. This allows the browser to deliver different styles to different devices with different sizes. There are two ways to add media queries to a webpage: through Dreamweaver, or through the code itself. 

 

Dreamweaver

How to add media queries through Adobe Dreamweaver (version 12.0):

• See how to set up new site/page
• Once your new site/page is set up go to the index.html
• Insert → Media Queries
• Press the + button to add a new media query
• Give the new media query a name/description
• Give the parameters for the screen’s min and max width
• Link the media query to the correct CSS style sheet
• Repeat for the amount of different media queries

 

Code

How to add media queries through code:

• See how to set up new site/page
• Once your new site/page is set up go to the index.html
• Use the code to link external CSS style sheets: 
  < link href="/css/tablet.css" rel="stylesheet" type="text/css" media="only screen and (min-width:401px) and (max-width:800px)" >
• Edit the min and max widths
• Link to each style sheet by repeating steps for different screen sizes

 

 

For more information, see these websites:

http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

 

 

---

 

 

Wiki Entry #6 - Sticky Nav Bar

When making a navigation bar it usually stays at the top of the webpage.  However certain websites use a "sticky" nav bar to keep it fixed at the top of the window as the user scrolls down.  This is especially helpful because the nav bar is used to navigate the website, and it helps save the user from scrolling all the way back to the top to go to the side pages.  Also, making this cool and useful effect is relatively simple.  In order to create a sticky nav bar using HTML and CSS, follow these steps:

 

1. Create nav bar in HTML document	<!-- Nav Bar --> <header> <div id="title"><h1>Natick High Web Design</h1></div> <div id="navbar"> <nav class="nav-collapse">   <ul>     <li><a href="#">Contact</a></li>     <li><a href="#">Our Class</a></li>     <li><a href="#">About us</a></li>     <li><a href="#">Home</a></li>   </ul> </nav> </div> </header>
2. Go to linked style sheet
3. Enter the following code in the CSS document	header {  position: fixed; top: 0; z-index: 9999; height: 105px; width: 100%; margin-bottom: 5px; background-color: white;  opacity: 0.9; filter: alpha(opacity=90);  }

 

In the HTML it can be simpler to create a nav div and using the CSS with that id/class tag.  When adding the CSS code, you can do whatever you like to change the look and feel of the nav bar, however the three bolded properties: position, top, and z-index.  The end result of the code above looks like this:

 

 

For more info, go to http://avexdesigns.com/sticky-nav-bar/ 

 

---

 

Wiki Entry #5 - JavaScript

JavaScript is used to program the behavior of web pages alongside HTML and CSS.  JavaScript is able to change HTML content.  One of the easiest methods is to use: getElementById().  This method "finds" an HTML element and is able to change it by using the  .innerHTML. 

 

<p id="demo">JavaScript can change HTML content.</p> <button type="button" onclick="document.getElementById("demo") .innerHTML = 'Hello JavaScript'"> Click Me!</button>

 

 

An example of JavaScript works with HTML is by changing the HTML attributes.  In order to change an HTML image, change the src attribute in the <img> tag.  

 

<img id="myImage" onclick="changeImage() "src="pic_bulboff.gif" width="100" height="180">   <p>Click the light bulb to turn on/off the light.</p>   <script> function changeImage() {     var image = document.getElementById('myImage');     if (image.src.match("bulbon")) {         image.src = "pic_bulboff.gif";     } else {         image.src = "pic_bulbon.gif";     } } </script>

 

 

To learn more about how JavaScript works go to http://www.w3schools.com/js/js_intro.asp. 

 

---

 

 

Wiki Entry #4 - Favicon

A favicon is an image or icon that is associated with the web page or web site.  The image must be a 8x8, 16x16, or 32x32 pixels in the form of PNG, GIF, or ICO.  You can edit the image in Adobe Photoshop so that it is the correct size, color, and image.  To add this to the website, go to the HTML code and in the <head> section use the following code:

 

<link rel="icon" type="image/png" href="/pathto/favicon.png" />

 

Adjust the above code to fit your situation.  Here is an example of a couple favicons:

 

 

To learn more about how to do this go to this link:

http://www.creativebloq.com/illustrator/create-perfect-favicon-12112760?page=1

 

 

---

 

 

Wiki Entry #3 - CSS Background

Any element can have a background, this includes color and images.  Most of us already know how to put color in the background using CSS, however I will show you just in case.  In order to put a color in the background you must use the hex value, RGB values, or the color name.  Here is an example:

 

h1 {
    background-color: #6495ed;
}

p {
    background-color: #e0ffff;
}

div {
    background-color: #b0c4de;
} 

 

Using an image as a background with CSS is a little different and not as commonly used, however it can be a cool effect for the elements on your website.  The CSS code is very similar to the background-color property; to make a background image you use the background-image property instead.  Here is an example:

 

body {
    background-image: url("paper.gif");
}

 

 

By default the image, is repeated horizontally and vertically.  This can look awkward for some images, so you can decide if you want this by using the property background-repeat.  Here is an example:

 

body {     background-image: url("gradient_bg.png"); }

body {     background-image: url("gradient_bg.png");     background-repeat: repeat-x; }

 

 

 

To learn more go to this link: http://www.w3schools.com/css/css_background.asp

 

 

---

 

 

Wiki Entry #2 - HTML Entities and Symbols

There are certain characters or symbols that can not be placed in HTML code. Instead there are reserved character entities that HTML understands and inserts the symbol in its place.  This could be useful because less than or greater than signs, < or >, might confuse the code.

 

Here is a table containing some, but not all, HTML entities: 

 

As you can see there is a entity name and number that is understood by the HTML code.  An example of this can be seen in this HTML code: 

 

<p>I will display €</p>
<p>I will display €</p>

 

These two lines of code will result in the following text:

 

I will display €
I will display €

 

To read more about HTML entities and symbols or view a full list of entity names and numbers visit these links:

http://www.w3schools.com/html/html_entities.asp

http://www.w3schools.com/html/html_symbols.asp

  

---

Wiki Entry #1 - Image Opacity

 

When using images on a website, you can use effects right with in CSS.  An example of this is making an image more transparent, or by adding opacity.  You would do this by using the opacity property in CSS.

 

img {
    opacity: 0.4;

}

 

Here is an example of this working on an image.

 

Another thing you can do with this property is create hover effects.  When the user scrolls the mouse over the image, it can become more clear or more transparent.  You would do this by using the same property in CSS for the img and img:hover.

  

img {
    opacity: 0.4;
}

img:hover {
    opacity: 1.0;
}

 

Here is an example of the before and after effects of hovering over the image:

                    

 

For more info on how to use this property go to: 

http://www.w3schools.com/css/css_image_transparency.asp