Skip to main content

Week 2

Notes

 Footers are like links to something, such as URLs or emails. <Li> </Li> is an unordered list. 

 A basic menu would have some simple CSS rules, i.e stylings. { = section so have things separated like 'divs', shows when an area starts and finishes. 

 Dropdown menu- 
Have links added- items and subitems, added next to items. 

 Use CSS to hide the items until you scroll over them. 

 All boxes are relative and try to stay on line. 

 You can animate things using CSS. 

 THERE IS ONLY ONE HEAD AND BODY, if you have extras then it confuses the program. 
Codes

 To start we created a new webpage, with a CSS and NAV folder inside of it. Then we have to put the code for the index.html page to work on:

<!DOCTYPE html>
<!-- Standard html5 blank template -->
<html>
<head>
<title></title>
</head>
<body>
<!-- all content goes here. -->
</body>

</html>

Navigation

Within the nav.css file (remember to link to the index.html page) within this you will create a a navigation menu for your webpage.  You use the <nav> tag to create the menu. 
<nav>
            <a href="index.html">Home</a>
            <a href="about.html">About</a>
            <!-- add your own links here… -->

<nav>

Dropdown navigation

This is the type of menu where when you hover over a tab with your mouse, some of the menu options drop down. 

<nav>
    <ul class="drop-menu">
        <li class="active"><a href="#">Home</a></li>
        <li class="active"><a href="about.html">About</a></li>
        <li>
            <a href="#">Gallery</a>
            <ul>
              <li><a href="gallery.html">Photo</a></li>
              <li><a href="video.html">Video</a></li>
            </ul>
        </li>
    </ul>
</nav>

Then you add this into the style.css sheet:

nav{
    background:#005555;
    padding:0;
    margin:0;
    height:30px;
    font-family: Arial, Helvetica, sans-serif;
    width: 100%;
    position: fixed;
    top:0;
}

To highlight the current active link:

nav li a.active {
    background-color: #4CAF50;
}

The drop down options style: 

.drop-menu {
    background: #005555;
    padding: 0;
    margin: 0;
    list-style-type: none;
    height: 30px;

I found it difficult to type all of the code out, so I looked into templates and found a code that looked like it was similar to the one that we were taught. I copied the code and put it into brackets, then I modified it to match the style that I wanted to create on the webpage, I wanted it to look like the Apple website. I also found it really helpful to use the inspect element section on google chrome, since this would allow you to make changes and see them as you do them, then you copy over the changed code and put it into brackets.

Comments

Post a Comment

Popular posts from this blog

Screenshots of website

Post a Comment
Read more

Week 1- Part 2

Codes: -  This will create a basic webpage with some text on it: You need to have a folder for the webpage, with one folder called CSS, and one the name Index (or something similar) <!DOCTYPE html>                                               <html>         <head>                 <title>Web Demo/title>        </head>        <body>                Hello World!        </body> </html> The body tag means the text on the page, so any text they would want on the webpage they should put it where 'Hello World!' is. -  This will change the styles of the webpage that you created in the last tutorial thing. Within the CSS folder make a file called...
Post a Comment
Read more