Web Authoring 2     Final Assignment   15%

Video Instructions

3 page website - Your original art /design
Theme: Your profile or someone or something that really interests you.

1• Responsive Design using Fluid Grid Layouts - 1200 pixels wide


Master Page:

2• Place Header and Footer content in the Master

3• Create 3 Breakpoints in the Master (fluid layout) starting at 1200, 750 & 520 wide

4• Make sure Mobile Menu is in a layer above all other content


5• Apply a Horizontally repeating background (created in photoshop - max 150px tall) in the browser fill as the background for the Header.

6• Insert a graphic/logo with transparency (png) on the left in the Header that is Hidden in smallest breakpoint and visible in the others. Pin to left.

7• Insert a menu in the Header that is Hidden in the smallest breakpoint and visible in the others. Pin to right. Responsive Width.

8• Menu states: - All states background set to 0% transparency,
                          - Normal, Rollover and Active states must be different from each other using transparency and/or colour changes.

9• Insert an acccodian menu with navigation in the smallest Breakpoint in the Header in place of the menu.
  (Create the 3 lines art for this and place inside accodion top)


10• Insert a menu at the left side in the Footer that appears in all breakpoints. Pin left. No resize.

11• Insert a text box in the Footer of your full name and student number and position it in the center of footer that appears in all breakpoints.

12• Insert a widget to follow Twitter in the Footer at the right side in the Footer that appears in all breakpoints.

13• Adjust all Content for each breakpoint.


Content Pages:
14. Re-create all breakpoints to match Master - Also add as many breakpoints as necessary to guarantee no overlaping elements.

Home Page

15• Apply a colour to the browser background. (keeping the image as well)

16• Include a row of 6 evenly sized photos snapped to each other that will resize using responsive width and height. Group. Make row the width of page.

17• Create a large Text Title in Photoshop on a transparent background exported as SVG. Import to Muse. Make it large.

18• Insert 1 large photo and apply a tooltip to it. Make it resize responsive w/h. Re-adjust at each breaking point to maximize use of space.

19• Include minimum of 2 text boxes that are set to responsive width and height and adjust font sizes at each breakpoint.

Map Page

20• Include a Google Map widget set to the Loyalist College address. Resize on each breakpoint. Set to resize Responsive Width.

21• Include a contact Form widget and set email to your Loyalist email. Change the FONT in the form to Helvetica.
22• Hide this in smallest Breakpoint and replace with a text link to your email.

23• Insert a photo of you or subject matter that will resize responsively and will have a new size and position at each breakpoint. Pin it.


Video Page

24• Include a Youtube widget of your favourite Youtube video. Resize on each breakpoint.

25• Include a text description why you like the video. Minimum 50 words. Text box set to no resize. Reset text box and fonts manually in each breakpoint.

26• Include an original PSD Button (at least 3 states) you designed in Photoshop and have it link to an external website.
27• Place the button in the text box with a wrap set around button.


Going Live

28• Upload site to our school web server.


Hand-In Instructions

29• Name your Muse file "LastName_FirstName" and submit it to Blackboard.
30• Include the link to your live web site.


©2017 Daniel Ouellette