Home

Web Authoring 2

01a. HTML Basics  page 1  page 2   page 3

01b. HTML Applied  assignment   spec sheet   Download assets      5%


02a. Muse - Intro to site plans, new pages and Navigation  assignment_part 1    assignment_part 2    material  5%


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


04a. Muse - Creating PSD Buttons with States  PSD Buttons  Apply PSD Buttons in Muse  2%

04b. Muse - Create an original PSD Button with States  3%  
                    • Using your original artwork in Photoshop
                    • Create an Oval shaped Button with 3 states (normal, rollover, mousedown)
                    • Apply it into a web page in Muse
                    • Try applying a transition


05a. Muse - Add Youtube Videos, Google Maps & forms  assignment  3%

05b. 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%

06b. Muse - Outputting to HTML   assignment  2%

06c. FTP Uploading to server   assignment  3%

  • 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 


07a. Muse -Fixed Width Layouts and Pinning Demo  Assignment   3%

07b. Muse -Fluid Width Layouts and Pinning Demo  Assignment   3%


08a. Muse - Scroll Effects - Motion  assignment   2%

08b. Muse - Scroll Effects - Motion  challenge assignment   3%

    ** Lots of Scroll Effects examples: Scrolleffects.com


09a. Muse - Scroll Effects - Opacity  assignment   Download Assets  3%

09b. Muse - Scroll Effects - Slideshow  assignment 1    assignment 2    3%

09c. Muse - Scroll Effects - Animating OAM Files  assignment    Download Assets  3%


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

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


11a. Midterm Test   15%


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


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

                                                                                          assignment - workaround for pre-2017  


13b. Begin Final Assignment (Due by last class)   final assignment criteria   15%


14a. Muse - Work on Final Assignment 


15a. Muse - Final Assignment DUE.

 

Supplemental:

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

  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


External:

Adobe Muse | Introducing Responsive Design   tutorial

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

Parallax Scrolling example



©2018 Daniel Ouellette