Week 08

This week's tutorial is focused on putting everything together in a actual Site, most of this is already done in the last week. I have change the design of the logo and the navigation bar, I also changed the font and improved the "boxes" because some of them would not work on some browsers the way I wanted. Here is some code that links the pages:





<nav id="navegacao">
<div id = "dropbox1">
Cables
<ul class="clearfix">
<li><a href="http://1202236.studentplus.abertay.ac.uk/Week100/Home/MovicelHome.html">Home</a></li>
<li><a href="http://1202236.studentplus.abertay.ac.uk/Week100/Error/UnderConstruction.html">About Us</a></li>
<li><a href="http://1202236.studentplus.abertay.ac.uk/Week100/Error/UnderConstruction.html">Contact Us</a></li>

</ul>
</div>

<div id = "dropbox2">
Equipment
<ul class="clearfix">
<li><a href="http://1202236.studentplus.abertay.ac.uk/Week100/Error/UnderConstruction.html">Mobile phones</a></li>
<li><a href="http://1202236.studentplus.abertay.ac.uk/Week100/Error/UnderConstruction.html">Computers</a></li>
<li><a href="http://1202236.studentplus.abertay.ac.uk/Week100/Error/UnderConstruction.html">Tablets</a></li>
<li><a href="http://1202236.studentplus.abertay.ac.uk/Week100/Error/UnderConstruction.html">Hard Drives</a></li>
<li><a href="http://1202236.studentplus.abertay.ac.uk/Week100/Gallery/MovicelGallery.html">Cables</a></li>
</ul>
</div>
</nav>




Most of the pages still lead to a "Under Construction" Page, but I am currently working on creating more pages to link them to. Another detail is that I decided to call the folder Week 100 because I can no longer separate and create new web pages for each week. Instead I am just improving the old one with the new features, so the folder is the same. The header, navigation bar, and footer all look the same.

Another detail is the logo. I actually change the image of the logo to a blue background to match we color design of the web page, but the actual logo background is red, so I used Paint to paint all the background. I rather boring and time consuming detail, but in the end it is just how expected.

Al the pages went through the Validator and all of them came out with 0 errors.

http://1202236.studentplus.abertay.ac.uk/Index/Index.html

Week 07

We are already in Week 7 and our Web pages are starting to look like a real one. This week, our task was to link the Web pages together in order to start building a Web site, as well as adding a drop down menu in our links. It is a rather important mark today to link all Web pages in one big Web site.

Here is some of the code that allowed us to do that:



<nav id="navegacao">
<div id = "dropbox1">
Home
<ul class="clearfix">
<li><a href="http://1202236.studentplus.abertay.ac.uk/Week07/About/AboutUs.html">About Us</a></li>
<li><a href="http://1202236.studentplus.abertay.ac.uk/Week07/Contact/ContactUs.html">Contact Us</a></li>
<ul>
</div>

<div id = "dropbox2">
Equipment
<ul class="clearfix">
<li><a href="http://1202236.studentplus.abertay.ac.uk/Week07/Error/UnderConstruction.html">Mobile phones</a></li>
<li><a href="http://1202236.studentplus.abertay.ac.uk/Week07/Error/UnderConstruction.html">Computers</a></li>
<li><a href="http://1202236.studentplus.abertay.ac.uk/Week07/Error/UnderConstruction.html">Tablets</a></li>
<li><a href="http://1202236.studentplus.abertay.ac.uk/Week07/Error/UnderConstruction.html">Hard Drives</a></li>
<li><a href="http://1202236.studentplus.abertay.ac.uk/Week06/MovicelGallery.html">Cables</a></li>
<ul>
</div>
</nav>


These are 2 div tags inside the navigation bar and each one of them as it's own drop down menu. I tried to create a class instead of 2 different ID's with rather similar styling, but it did not work for one simple reason: although the colors and styling are the same, the drop down box has to "drop" under each link, meaning it will drop in different places if we put the mouse over the first link or the second, and that detail prevented me to use a class.

Some CSS3 code:



#dropbox1{ border: 2px solid #004C67 ;
background-color:  #5095C9 ;
margin : 2px 20px 0px 20px ;
padding: 5px 20px 5px 20px;
border-radius: 5px;
display: inline;}

#dropbox1 ul{         list-style-type : none ;
display: none;
margin-top: 8px;
margin-left: 16px;
padding : 10px;
float: left;
position: absolute}

#dropbox1:hover ul {display:block;}


I currently have the "Home" page, the "Cable Section" (gallery) page, and an "Under Construction" page. All of these pages are link together, and all of them have a navigation bar so the user has total freedom to navigate through the website, even if there is not much to see for now. I spent part of this week also working on the header, making it the exact same size in all pages and the navigation bar the same. When browsing through the pages those two boxes are exactly in the same place, making it easier to understand where exactly we are on the Web site, and how to go move to another page:



#cabeca { background-color: #A7E8FF ;
margin : auto ;
padding: 10px;
border-radius: 10px;
border : 2px solid #004C67 ;
color : #004C67 ;
text-align: center;
width: 1310px;
height: 150px
                }

In order to be the same, these two properties were made constant throughout the styling pages.
Here are some screenshots:

All HTML files were checked for Errors in the Validator and, as expected, 0 errors.

http://1202236.studentplus.abertay.ac.uk/Index/Index.html