Unit 2 Project – School Informational Website
For our Unit 2 Project in Technology, we were told to create a working website with information for those who want to enter our school’s high school.
To get an idea of what the project was supposed to look like, here are the requirements/constraints.
The website has to have a homepage and four other pages or more.
There must be a sample schedule to view, with the period starting and ending times.
Each webpage must have a navigation bar.
On the home page, there must be a review of the school, with general information.
There must be information on the school’s teachers.
There must be photos of the school.
The website must have information about student achievement, the school’s academic policies, including grading, the IB Diploma Program, extracurricular activities, including how to create a club, community service activities and requirements, and the student environment and social activities.
At least 90% of styles must be in an external stylesheet.
Images used must have permission from the creator or be of Creative Commons.
Photos of teachers/students must have permission. Photos of 7th or 8th graders are not allowed at all.
There must be no inappropriate content.
The project is due by November 9.
My project, in particular, has gone over various design changes. However, the main idea of my website has remained throughout.
My Project Home Page: http://tech.bsge.org/students/21vuonge/unit2project/home.html
Here is my initial project design. It looks similar to the final design, but there are noticeable changes. For example, the background in the initial design is red but ended up as dark blue. I changed all heading text to red. Also, the “About the Project” is above the navigation bar in the design, but I changed it so that it was under it. In addition, headings have an underline. I’ve also completely gotten rid of the “Webpages” heading. Furthermore, the initial design shows only a slight box over the text. In the final website, I’ve made it so that paragraphs are covered with a white box that has a black outline.
- Design the layout of your pages
- Design the look of your pages
- Research and/or write your content.
- Find pictures/illustrations for your pages
- Find links for your pages
- Fill your pages with content
- Debug your site
- Upload your site and pray it works
This is my original project plan. Over time, I’ve changed my plan a lot. I’ve changed my plan to allow me to work on things that come ahead before the plan specifies to start doing it. That way, if I find that I have extra time on my hands, I can work ahead. I also have stretched out my plan so that I am to debug and upload the site before November 9th, instead of November 4th, Friday. This is because I originally planned to have everything done by Monday and debug my webpage from then on in my spare time, but the due date was extended, so I simply extended my plan along with it.
<li><a href=”../home.html” target=”_blank”><b>My main home page</b></a></li>
<li><a href=”home.html” target=”_blank”><b>Project Home Page</b></a></li>
<li><a href=”studentenvironment.html” target=”_blank”><b>Student Environment</b></a></li>
<li><a href=”ibdiplomaprogram.html” target=”_blank”><b>IB Diploma Program</b></a></li>
<li><a href=”teachers.html” target=”_blank”><b>Teachers</b></a></li>
<li><a href=”activities.html” target=”_blank”><b>Extracurricular and Community Service Activities</b></a></li>
<li><a href=”academicpoliciesandachievement.html” target=”_blank”><b>Academic Policies and Achievement</b></a></li>
<li><a href=”bib.html” target=”_blank”><b>Bibliography</b></a></li>
This is some of the HTML code that I’ve used. This same set of code is on every web page. This is the navigation bar, and the navigation bar on all of the pages are the same. Notice target=”_blank”. This is an attribute that I’ve included to make pages open in a new tab when clicked on. This is just a personal preference. Also <b> and </b> are to make the text bold, as I felt that it makes it stand out more.
<link rel=”stylesheet” type=”text/css” href=”homecss.css” />
To link the page to my CSS stylesheet so that it can have colors and such, this code is used. All of the pages have this because all of the pages connect to the same CSS external stylesheet, giving it a single theme across the entire website.
border: 10px solid black;
font-family: “Times New Roman”, Times, serif;
This code is used to surround the paragraphs in a white box bordered in black. By writing paragraphs within <div></div>, it creates the box because the stylesheet has that code.
My project might not be the best, the most flashy, or the best-looking. However, I tried my best and I’m pretty proud of what I’ve created.