Intro to Web Design

1a. Notepad - Basic HTML  page 1  page 2   page 3

1b. Notepad - HTML (more features)  assignment   spec sheet   Download assets    5%

2a. Notepad - Explore site Structure & Create 2 page HTML Site with CSS    Demo     spec sheet 1  spec sheet 2    Download assets   5%

Full List of CSS Properties:  CSS Keyword Index

What is a SELECTOR?

3a. Photoshop - Image formats (jpg, png, gif) and sizing Demo  assignment   background color  Download assets      5%

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

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

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

06a. 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

07a. Muse - Review & Menu for Mobile Devices    assignment  5%

07b. Muse - Outputting to HTML   assignment  1%

07c. FTP Uploading to server   assignment  1%

• 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 

00. Midterm Break

08a. Muse -Fixed & Fluid Width Layouts and Pinning   Demo-Fixed    Demo Fluid

08b. Review - 5%
- Using Adobe Muse.
- Create 5 page web site.
- Apply a menu widget in the Master page.
- Page 1 has an image and a text box with your full name and make it a link to "video" page.
- Page 2 has a Youtube Video with your favourite video on Youtube.
- Page 3 has a Google Map with Loyalist College as the location.
- Page 4 has an image pinned to the upper LEFT of Browser.
- Page 5 has an image pinned to the upper RIGHT of Browser.
- Create pages for PHONE as well.
- In the PHONE section create a mobile menu.
- Upload to FTP Server.

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

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

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

10b. Muse - Scroll Effects - Opacity - positioning artwork  demo

11a. Midterm Test   20%

12a. Muse - Scroll Effects - Parallax Scrolling  assignment1   Download Assets     3%

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

13a. Muse - Responsive Design - Fluid width (master)  assignment - part 1    Download Assets  7%    

14a. Muse - Responsive Design - Fluid width (master)   assignment - part 2      Download Assets  8%

15a. Install Apache Web Server and PHP

Download WAMP Server

WAMP Basics Tutorial

        TEST Criteria

Supplemental Bonus Lessons:

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

                                                                                        (  assignment - workaround for pre-2017  )

16a. 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

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

External:

Adobe Muse | Introducing Responsive Design   tutorial

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

Parallax Scrolling examples

©2019 Daniel Ouellette