|
Contact Mr. Green
|
Website Design I
Citrix Instructions
Final Exam Review
As promised, your review sheet--> MS Word | PDF
Please email greenk@bmhs.org if you have any questions about the final exam or if you have any concerns (not excuses) about the final website project.
Final Website Project
- Your final website project will be done with a partner of your choice and must be completed by the time and day of the final exam, Wednesday, June 7. You may choose to work independently, but realize that you will have twice the workload to do alone.
- The requirements are the same as for your previous website project, except that you will build a website for an imaginary company/organization of your choice. This means that you must choose or design a logo, banner, slogan, company colors, company mission, etc.
- Your site must include a banner, 700 x 100 pixels in size. If your banner is not this size, you need to have a good reason. Your banner must include:
- the company/organization's logo
- the company/organization's name
- A navigation bar must be included on the left side of your page. If you would like to place your links elsewhere on the page, you must get it approved in advance by Mr. Green. Your navigation bar must include:
- unique styles that are consistent with your design
- working links to all required pages in your site
- When linking to various pages within the site, the top banner and navigation links must remain in the same location. Only the main content will change from page to page.
- Use CSS2 for all page styles. Your CSS document must be kept organized. Use classes where needed, but do not overuse them. A good rule of thumb is if you foresee multiple items having the same style (eg., images with borders, tables being positioned in a certain place, colors/styles on headings or other text), you should accomplish that through use of style sheets. You may not use:
- font tags
- HTML for text coloring
- HTML for background colors or background images
- HTML for alignment
HTML Notes
- HTML: Website Structures ppt
- HTML: Hyperlinks ppt
- HTML: Table Basics ppt
- HTML: Lists ppt
- HTML: Headings, Line Spacing, Block Control, Fonts ppt
- HTML: Basic Tags ppt
- HTML Basics: About Tags and Attributes ppt
- Introduction to HTML ppt
Common font groups
- Arial, Helvetica, sans-serif
- Verdana, Geneva, sans-serif
- Times New Roman, Times, serif
- Georgia, Garamond, Palatino, serif
- Courier New, Courier, monospace
Assignments
- due 9 May 06
- Copy your "Top Songs" website to your css folder. Then, create a style sheet file called topsongs.css. Link all the files in your Top Songs website to topsongs.css. In other words, make sure to include the <link ...> tag in all the HTML documents, supplying the correct href information. (Note: You do not need to include style rules in your style sheet, but I suggest including some basic rule so that you know your style sheet is linked correctly to each of your HTML pages.)
- due 5 May 06
- Create hyperlinks that are the color #000099 with no underline. When you hover over the links their text color should change to #CCCC00 with a background color of #000099. Name your files hyperlink.html and hyperlink.css. Your hyperlinks should look like this:
- due 3 May 06
- Create the list shown below. The files should be called mylist.css and mylist.html. Make sure the lists are controlled through your style sheets.
- due 2 May 06
- Create a style sheet that has rules as shown below. Call your style sheet textandfonts.css. Then create an HTML page that has four paragraphs of text which links to the CSS file. The first two paragraphs are normal. The third paragraph should be of class "coolfont". The fourth paragraph should be placed inside a 1-row, 1-column table.
- Body text:
- garamond, serif
- 14pt
- condensed
- 300 weight
- color #0000ff
- letter spacing 10px
- left
- Paragraph:
- verdana, serif
- 12pt
- italic
- 800 weight
- darker blue than body
- letter spacing 5px
- .coolfont:
- chiller, fantasy
- 10pt
- normal (not italic)
- small-caps
- normal weight
- #009999
- center
- .newspaper
- times, serif
- justify
- text-indent 15px
- letter spacing 3px
- word spacing 20px
- table
- border: thin black solid
- width: 300px
due 10 April 06
- Top Songs: Hierarchical Website Structure
- Create a website with a hierarchical structure that shows the top songs in three different categories according to MTV. The three categories are (1) top single, (2) top R&B/Hip Hop track, and (3) top modern rock track. Below you will see both the folder structure and link structure for the site. The folder structure explains the folder and file names. The link structure explains what hyperlinks to include on each page.
- Here is the content for the site. You can just copy and paste it. The biographical information was taken from wikipedia.com.
- Link Structure:
- Folder Structure (folder names are in bold)
due 10 April 06
- My School Day: Linear Website Structure
- Create a website with a linear structure that follows your class schedule. Start with your homeroom (index.html), followed by the rest of the periods of the school day (period1.html, period2.html, etc.). All HTML files should be saved in your root folder called MySchoolDay. Create an images folder inside your root folder and save your banner (banner.gif) there. The template should look like this without a border:
due 25 March 06
- Information for this assignment is also in the "HTML: Hyperlinks" notes above. Change all the link colors in all your documents for the 21 March assignment (the Food folder structure) to the following:
- link --> #00ff00
- vlink --> #009900
- alink --> #0000ff
due 24 March 06
- Read through the full set of notes for "HTML: Hyperlinks" above.
- Using the same text as for your "Horoscopes" assignment below, create a set of links along the top of the page to link down to each individual horoscope (all within the same file). You should have a list of links along the top of your page under the "Horoscopes" title, each one allowing you to link down to a different horoscope.
- Save your document as horoscopes.html in your links folder.
due 21 March 06
- Use the following folder structure to indicate links between files as listed below.
Here are the files located in certain folders.
Food
index.html |
breads
sourdough.html
wheat.html |
desserts
cheesecake.html
applepie.html |
apples
grannysmith.html
fuji.html |
|
oranges
valencia.html
florida.html |
junkfood
chips.html
skittles.html |
peppers
jalapenos.html |
|
For your links, indicate only the value of the href attribute. In other words, indicate only what appears inside the "quotation marks":
- index to applepie
- index to jalapenos
- jalapenos to index
- applepie to index
- florida to fuji
- grannysmith to jalapeno
- wheat to skittles
- chips to valencia
- jalapeno to sourdough
- skittles to chips
due 14 March 06
- Create the following tables using colspan and rowspan:
due 13 March 06
- Create the following tables:
- sudoku.html Sudoku is a popular numbers game. This table is 600 pixels wide and 600 pixels tall. Make sure to color the cells as shown. After creating the table, print and solve it for bonus points.
- checker.html Duplicate the following table, paying careful attention to alignment of text inside table cells. The colors used are #00FF66 and #FFFF99.
due 9 March 06
- table3.html Create two tables as shown, and then nest them (also shown):
due 8 March 06
- favoritelist.html Shown on board in class
due 7 March 06
- nestedlist.html
Create the following list on a Web page
due Friday, 3 March 06
- list.html Create three lists on a single Web page
- The first list is a bulleted list of the classes you are currently taking at BMHS.
- The second list is a numbered list of your five favorite music artists/bands.
- The third list is a list of terms and definitions. The terms are as follows:
- defenestrate
- discombobulate
- vehement
due Wednesday, 1 March 06
- font1.html Using the assignment from yesterday, render one phrase from each paragraph with the font tag as follows:
- The first two phrases should use these attributes:
- face="Arial, Helvetica, sans-serif" size="5" color="blue"
face="Courier New, Courier, monospace" size="+3" color="orange"
- Use any attributes on the third phrase.
due Tuesday, 28 Feb 06
- three1.html Write three paragraphs about three related things (eg. three favorite foods) and center them on your page using the align attribute in the p tags
- three2.html Leaving the text the same, center the three paragraphs using a division.
due Monday, 27 Feb 06
- Create a Web page that displays your favorite poem (with appropriate line breaks) using the pre tag. Make sure to include a title and name the file mypoem.html.
due Wednesday, 22 Feb 06
- Use this text for the horoscopes
- Use h1 for the main heading "Horoscopes", h3 for the subheadings, and p for the individual paragraphs. Here is a screenshot:
Class Websites -- 1st Semester
Useful Links
World Wide Web Consortium
Webmonkey
ICANN
DNSReport
w3schools
Want to know how to spell internet terms?
|
