Home

Intro to Web Design

1a. Basic HTML  page 1  page 2   page 3

2a. HTML (more advanced features)  assignment   spec sheet   Download assets      5%

03a. Muse - Intro to site plans, new pages and Navigation  assignment_part 1    assignment_part 2    Download assets  5%

03b. Muse - Content creation and Publishing  assignment_part 1    assignment_part 2   5%

04a. Muse - Add Youtube Videos, Google Maps & forms  assignment  5%

05a. Muse - Adaptive Design for Mobile Devices    assignment  5%
                    • Adapt your desktop website to smartphone website
                   • Copy all the content from the desktop site and re-apply it to the phone layout

06a. Muse - Menu for Mobile Devices    assignment  5%

07. Midterm Break

08a. Muse - Outputting to HTML   assignment  2%

08b. FTP Uploading to server   assignment  2%

  • FTP instructions:
    FTP Server = animation.lcaat.ca
    FTP Address =
    animation.lcaat.ca/first letter of first name + last name (eg. animation.lcaat.ca/dsmith)
    username = first letter of first name + last name + .animation (eg. David Smith = dsmith.animation)
    password = your student number

        Option: FTP USING DREAMWEAVER  instructions 

08c. Muse -Fixed Width Layouts and Pinning Demo  Assignment   3%

08d. Muse -Fluid Width Layouts and Pinning Demo  Assignment   3%

Scrolleffects.com

Lots of Scroll Effects examples

09a. Muse - Scroll Effects - Motion  assignment   5%

09b. Muse - Scroll Effects - Motion  challenge assignment   5%

10a. Muse - Scroll Effects - Parallax Scrolling  assignment1   Download Assets     5%

10b. Muse - Link that scrolls to content  assignment  5%

11a. Midterm Test   15%

12a. Muse - Responsive Design - Fluid width (master)  assignment - part 1    assignment - part 2      Download Assets  5%

13a. Begin Final Assignment (Due by last class)   20%

Download WAMP Server

       1 - Build a simple 3 page Responsive designed website with Master page Navigation,
             images, embeded Youtube video and menu for mobile devices
       2 - Using WAMP install a Local Web Server and PHP on your computer
       3 - Load your website on the server and test locally

14a. Work on Final Assignment 

15a. Final Assignment DUE.

 

Supplemental Bonus Lessons:

16a. Muse - Scroll Effects - Opacity  assignment   Download Assets  5%

17a. Muse - Scroll Effects - Slideshow  assignment 1  2%      

17b. Muse - Scroll Effects - Slideshow  assignment 2    2%

18a. Muse - Responsive Design - Fluid width (pages)   assignment - part 1    assignment - part 2   assignment - part 3   Download Assets  5%

                                                                                        (  assignment - workaround for pre-2017  )

19a. Muse - RSS Feeds - Blogs  (This only works in newer versions of Muse)   5%

  1. Download RSS FEED Widget
  2. How To Embed a Blog Feed in Muse
  3. Video - How to add RSS Feed Widget
  4. How To Add a Blog
  5. Create a Blog in Wordpress
  6. Wordpress Feeds

20a. Muse - Creating PSD Buttons with States  PSD Buttons  Apply PSD Buttons in Muse  5%

External:

Adobe Muse | Introducing Responsive Design   tutorial


------------------------------------------------------------------------------------------------------

Parallax Scrolling examples



©2017 Daniel Ouellette