projectLog_6

This is the final home page in html. I was out of options trying to figure out what it should look like. If given more time I would have added pictures to the homepage, perhaps making each planet a splash screen so that when you click on the picture of the planet it would highlight the outline of the image, then transfer you (should you click it) to its corresponding page. Our site is live on a team member's server. 

For this post I will be using earth as an example for all our pages. When you are directed to any planet page this will be the layout. 

After the planet and the menu bar, you get into the body portion of the page. Here you get the actual information of the planet my group and I determined. The table opacity is changed for easy reading. In the table there are links to other pages. 

the last part of the website has two images and more links. Some have other facts about the planet. 

projectLog_5

The final page I was going to do was the More page. This page was originally supposed to have more images on each plant and information. In the more page you can find information on nebulas, Super massive black holes, pluto and more. Each picture has a link in italics so the user knows that its a link, it also changes colors when you hover over them. 

The picture above shows half an image of a pulsar star and a Super massive black hole. Each is in one bale and that particular rows opacity is either black or a greyish color or color play. 

the code above changes the links in my html pages, and changes the way they look when you click on them and when you hover over them

projectLog_4

Thanks to Jose, a member of my group, I was able to use his opacity code to make our tables transparent. The table contains information and links to other sites for more information. We also added a couple of pictures to our planets pages to give the user a better understanding of where each planet might be in the sky, or its size, or a closer look at it. 

In the next picture I decided to use the milky way logo in each page, and underneath it the menu bar. Underneath the bar you will find the name of the planet and then the table. I still was not sure If I should use plain text above the nav bar, but my team and I like the logo on top and the name on the bottom. 

projectLog_3

This snippet from my jupiter page was should be an outline to all the other planets. At this stage, I was still not sure if I should keep jupiter under the menu bar and put the "Milky-Way" logo on top. It took me a while to figure out how to use more complicated code to make a footer stay at the bottom. Though I might just keep a footer in the homepage to let people know the peoples names in my group.

Mars was also at this stage a work in progress, I completely love the background for this site, however I do wish I would have used more dividers, classes and Id's in my project not only to keep things organized, but to code much faster and simpler. Perhaps in the 2nd part of the semester we will learn more advanced CSS external and internal style. 

ProjectLog_2

The first image was of the table I will use in the homepage to explain how the site works, and give a bit more information to the user should he or she need help getting around. I did play with the opacity levels and also color background. For most of the pages it seems like making the table background slightly see through might do the trick. 

The next picture is of the title I will use on each page. Using some editing software from the Mac computers and school, I was able to remove the background and only leave the Milky Way part. I tried to find the font on my brackets web-editor but I could not find it. My other group members are coding their pages, I was left to code Jupiter, Mars, the homepage, and the "More" page which will have different pictures of phenomenon in the cosmos. 

ProjectLog_1

For the homepage of our "Milky Way" website, I developed a menu bar that will eventually let the user navigate from the home page and the more section, to all the planets. Each planet page will have a picture of its planet, along with the menu bar, more about its information and links to find out more about each planet. I have not yet found a font that works for all the page but I am not liking the Sans-Serif default font. The background also caused troubles when text is front of it. White seems to work better for a black background, but it seems putting the font in a table with opacity worked.

The code for the menu bar is an unordered list in a divider in which i can manipulate everything set in there. I did find a header for all the pages which will be in my second post. To this point, all my coding went well.

Post 1: Documentation Sketch of midterm project

As we begin to brain storm our ideas on the midterm project, my group and I have decided to focus on our solar system. We plan to have all 8 planets and some information about them. As the site progresses we might be able to add more in terms of information. Like any major project, as we go proceed in our coding, we might not always keep to these sketches, as the site changes and grows with new ideas.

The picture up above, is a rough sketch on how we plan to approch our navigation and layout of the website. 

The picture above, includes our homepage and subpages and how one will be able to navigate back and forth from page to page.