Seminole State College - Web Effects 2 Class

Contact Mr. D school email: dufnerg@seminolestate.edu
School Email:
https://mail.seminolestate.edu
Webcourse@Seminole: https://online.seminolestate.edu/login
School Website: https://my.seminolestate.edu

This class focuses on making graphical website designs using Adobe Muse and the various animations the program can implement

  My YouTube Channel: https://www.youtube.com/channel...


Tutorials:  
1. "Don't Make Me Think" Book Quizes  
2 Adobe Muse 'Mobile Tutorials'  
3. Adobe Muse 'Desktop Tutorials'  
4. Web Accessibility "Blind People using the web"  
5. in-browser Client editing Quiz  
6. Fixed Navigation with Anchored Links to Scroll page  
7. Banner image slideshow  
8. Portfolio Gallery Lightbox  
9. Interactive Google Map, & Social Media Feed Widget  
10. Fly out navigation  
11. One Page Scrolling navigation  
12. Animated navigation  
13. Animation scrolling  
14. eCommerce ECWID (PayPal)  
15. SEO (page properties)  
Projects:  
1. Business 'Desktop' Website Graphic  
2 Muse: 'Desktop' Website  
3. Business 'Desktop' Website Graphic  
4. Muse: 'Desktop' Website  
5. Business 'Mobile' Website Graphic  
6. Muse: 'Mobile' Website  


Syllabus - Syllabus Agreement Form
The difference between Wordpress.org & Wordpress.com
- .org is free to use almost all of the funstions, but you have to set it up on your own server, BUT this is not hard at all! You can go to Godaddy and they will set it up for you.
- .com is a pay for site, they set it up for you, and you're ready to go, BUT you won't have much freedom when it comes to

 

Example Muse Scroll paralax: Shark Five: Save The Fins

Examples of Mobile Website

         

Examples of Mobile Website

      

Muse

- Make the Master in Muse
- Make website pages from Master
- Slice images from Photoshop Graphic to insert into Master
- insert images into Master
- insert images into webpages
- Mention images in Layers panel

 

- Rollover Buttons

 

- Finish Navigation Buttons (Social Media Icons) 

 

- Finish Master page
- Add Navigation text to Footer
- Style the Footer Navigation text (Site properties)
- Add content to pages (images, text)

 
- Finish adding content for design to Home Page
- Make Favicon

 

- Upload to Hosting
- make a folder on server with Dreamweaver or Cyberduck to upload with Muse

 

- Finish content to Home Page
- make template for images to stay at same size for repetition & design

 

 

- Mobile hamburger menu drop down animated: https://youtu.be/dvh6k5p98W0
Download of menu to put in Muse
Example: I used it to make a menu for a website http://www.millsparkdental.com/mobile

- Messing with codes in Muse. Muse has coding? No, but you can add code as an object to push your designs as functionality. Although this tutorial shows you how to create a sliding left to right menu it also shows you how to find the code you are looking for in Muse in a website browser: http://creativedroplets.com/adobe-muse-tips-sliding-menu/

1. Preview your page in Google Chrome (File > Preview Page in Browser)
2. Open the Developer tools (View > Developer > Developer tools)
3. Click on the “Magnifying lens” tool at the bottom.
4. Click on the menu element of your page.
5. Get the “id” (#) of the element.

Example:

Edge Animate Banner 'Cinematic Trailer': http://creativedroplets.com/html5-animation-and-css-filters/

Let your clients update the Muse website

https://helpx.adobe.com/muse/how-to/muse-in-browser-site-editing.html