Professional Diploma in Web Design - Amazon S3€¦ · Professional Diploma in Web Design Lesson 3:...
Transcript of Professional Diploma in Web Design - Amazon S3€¦ · Professional Diploma in Web Design Lesson 3:...
![Page 1: Professional Diploma in Web Design - Amazon S3€¦ · Professional Diploma in Web Design Lesson 3: Navigation Course Educator: Kate Savage. Did you know? • The first web page went](https://reader036.fdocuments.us/reader036/viewer/2022081405/5f0713117e708231d41b2cd4/html5/thumbnails/1.jpg)
Professional
Diploma
in
Web Design
Lesson 3:
Navigation
Course Educator:
Kate Savage
![Page 2: Professional Diploma in Web Design - Amazon S3€¦ · Professional Diploma in Web Design Lesson 3: Navigation Course Educator: Kate Savage. Did you know? • The first web page went](https://reader036.fdocuments.us/reader036/viewer/2022081405/5f0713117e708231d41b2cd4/html5/thumbnails/2.jpg)
Did you know?
• The first web page went live on August 6, 1991. It was dedicated to information on the World Wide Web project and was made by Tim Berners-Lee.
• For 44% of visitors the design of a website goes hand in hand with their credibility.
![Page 3: Professional Diploma in Web Design - Amazon S3€¦ · Professional Diploma in Web Design Lesson 3: Navigation Course Educator: Kate Savage. Did you know? • The first web page went](https://reader036.fdocuments.us/reader036/viewer/2022081405/5f0713117e708231d41b2cd4/html5/thumbnails/3.jpg)
MEETYOUR
Educator
Kate SavageExperienced College Lecturer
Skills
Develop a passion for learning. If you do, you will never cease to grow -Anthony J. D'Angelo
Story
Computer nerd since 2013, I graduated with 15 Distinctions and some great experiences. I am here to share my passion for everything IT with you!
Web Design
Web Development
Programming
Karaoke
![Page 4: Professional Diploma in Web Design - Amazon S3€¦ · Professional Diploma in Web Design Lesson 3: Navigation Course Educator: Kate Savage. Did you know? • The first web page went](https://reader036.fdocuments.us/reader036/viewer/2022081405/5f0713117e708231d41b2cd4/html5/thumbnails/4.jpg)
H o w t o i n t e r a c t
Chat with Morpheus
ASK & ANSWER QUESTIONS HERE
Remember to rate the responses so
we can improve them
Chat with the classroom
![Page 5: Professional Diploma in Web Design - Amazon S3€¦ · Professional Diploma in Web Design Lesson 3: Navigation Course Educator: Kate Savage. Did you know? • The first web page went](https://reader036.fdocuments.us/reader036/viewer/2022081405/5f0713117e708231d41b2cd4/html5/thumbnails/5.jpg)
Did you miss any lessons? Worried you
will fall behind?
DON’T PANIC!
Remember all lessons are recorded and
available for catch up on
shawacademy.com!
You can also reschedule classes to
better suit your time!
Simply go to
https://live.shawacademy.com/login to
find recordings and rescheduling
options!
![Page 6: Professional Diploma in Web Design - Amazon S3€¦ · Professional Diploma in Web Design Lesson 3: Navigation Course Educator: Kate Savage. Did you know? • The first web page went](https://reader036.fdocuments.us/reader036/viewer/2022081405/5f0713117e708231d41b2cd4/html5/thumbnails/6.jpg)
![Page 7: Professional Diploma in Web Design - Amazon S3€¦ · Professional Diploma in Web Design Lesson 3: Navigation Course Educator: Kate Savage. Did you know? • The first web page went](https://reader036.fdocuments.us/reader036/viewer/2022081405/5f0713117e708231d41b2cd4/html5/thumbnails/7.jpg)
Where Were We?
![Page 8: Professional Diploma in Web Design - Amazon S3€¦ · Professional Diploma in Web Design Lesson 3: Navigation Course Educator: Kate Savage. Did you know? • The first web page went](https://reader036.fdocuments.us/reader036/viewer/2022081405/5f0713117e708231d41b2cd4/html5/thumbnails/8.jpg)
![Page 9: Professional Diploma in Web Design - Amazon S3€¦ · Professional Diploma in Web Design Lesson 3: Navigation Course Educator: Kate Savage. Did you know? • The first web page went](https://reader036.fdocuments.us/reader036/viewer/2022081405/5f0713117e708231d41b2cd4/html5/thumbnails/9.jpg)
Professional Diploma In Web Design – Module 1 Professional Diploma In Web Design – Module 1
Lesson
Objectives
– Navigation Types
– HTML Navigation
– Let’s Talk Tags
– Creating Multiple Pages
– Navigation CSS
– Hover
![Page 10: Professional Diploma in Web Design - Amazon S3€¦ · Professional Diploma in Web Design Lesson 3: Navigation Course Educator: Kate Savage. Did you know? • The first web page went](https://reader036.fdocuments.us/reader036/viewer/2022081405/5f0713117e708231d41b2cd4/html5/thumbnails/10.jpg)
Professional Diploma In Web Design – Module 1 Professional Diploma In Web Design – Module 1
![Page 11: Professional Diploma in Web Design - Amazon S3€¦ · Professional Diploma in Web Design Lesson 3: Navigation Course Educator: Kate Savage. Did you know? • The first web page went](https://reader036.fdocuments.us/reader036/viewer/2022081405/5f0713117e708231d41b2cd4/html5/thumbnails/11.jpg)
Professional Diploma In Web Design – Module 1 Professional Diploma In Web Design – Module 1
![Page 12: Professional Diploma in Web Design - Amazon S3€¦ · Professional Diploma in Web Design Lesson 3: Navigation Course Educator: Kate Savage. Did you know? • The first web page went](https://reader036.fdocuments.us/reader036/viewer/2022081405/5f0713117e708231d41b2cd4/html5/thumbnails/12.jpg)
Professional Diploma In Web Design – Module 1 Professional Diploma In Web Design – Module 1
![Page 13: Professional Diploma in Web Design - Amazon S3€¦ · Professional Diploma in Web Design Lesson 3: Navigation Course Educator: Kate Savage. Did you know? • The first web page went](https://reader036.fdocuments.us/reader036/viewer/2022081405/5f0713117e708231d41b2cd4/html5/thumbnails/13.jpg)
Professional Diploma In Web Design – Module 1 Professional Diploma In Web Design – Module 1
Let’s Talk Tags!
![Page 14: Professional Diploma in Web Design - Amazon S3€¦ · Professional Diploma in Web Design Lesson 3: Navigation Course Educator: Kate Savage. Did you know? • The first web page went](https://reader036.fdocuments.us/reader036/viewer/2022081405/5f0713117e708231d41b2cd4/html5/thumbnails/14.jpg)
Let’s Talk Tags
– <li> - List Item
– <ul> - Unordered List
– <a> - Creates a Hyperlink
![Page 15: Professional Diploma in Web Design - Amazon S3€¦ · Professional Diploma in Web Design Lesson 3: Navigation Course Educator: Kate Savage. Did you know? • The first web page went](https://reader036.fdocuments.us/reader036/viewer/2022081405/5f0713117e708231d41b2cd4/html5/thumbnails/15.jpg)
Sidebar Static Navigation
– Anchored to a section of the screen
– Simple flat navigation
– All links are visible at all times for easy use
![Page 16: Professional Diploma in Web Design - Amazon S3€¦ · Professional Diploma in Web Design Lesson 3: Navigation Course Educator: Kate Savage. Did you know? • The first web page went](https://reader036.fdocuments.us/reader036/viewer/2022081405/5f0713117e708231d41b2cd4/html5/thumbnails/16.jpg)
Hamburger Menu
– Top left corner of the UI (User Interface)
– Toggles between a hidden menu & an
expanded menu
– Resembles a Hamburger
![Page 17: Professional Diploma in Web Design - Amazon S3€¦ · Professional Diploma in Web Design Lesson 3: Navigation Course Educator: Kate Savage. Did you know? • The first web page went](https://reader036.fdocuments.us/reader036/viewer/2022081405/5f0713117e708231d41b2cd4/html5/thumbnails/17.jpg)
Multimedia Menu
– Utilises media as links
– Images
– Videos
– Relies on visuals to guide the user
experience.
![Page 18: Professional Diploma in Web Design - Amazon S3€¦ · Professional Diploma in Web Design Lesson 3: Navigation Course Educator: Kate Savage. Did you know? • The first web page went](https://reader036.fdocuments.us/reader036/viewer/2022081405/5f0713117e708231d41b2cd4/html5/thumbnails/18.jpg)
Drop Down Menus
– This Menu types allows items to be expanded
into sub (smaller menus)
– This design works well on sites with a lot of
menu options so as not to overwhelm users.
![Page 19: Professional Diploma in Web Design - Amazon S3€¦ · Professional Diploma in Web Design Lesson 3: Navigation Course Educator: Kate Savage. Did you know? • The first web page went](https://reader036.fdocuments.us/reader036/viewer/2022081405/5f0713117e708231d41b2cd4/html5/thumbnails/19.jpg)
Navigation Outline
![Page 20: Professional Diploma in Web Design - Amazon S3€¦ · Professional Diploma in Web Design Lesson 3: Navigation Course Educator: Kate Savage. Did you know? • The first web page went](https://reader036.fdocuments.us/reader036/viewer/2022081405/5f0713117e708231d41b2cd4/html5/thumbnails/20.jpg)
HTML Outline
![Page 21: Professional Diploma in Web Design - Amazon S3€¦ · Professional Diploma in Web Design Lesson 3: Navigation Course Educator: Kate Savage. Did you know? • The first web page went](https://reader036.fdocuments.us/reader036/viewer/2022081405/5f0713117e708231d41b2cd4/html5/thumbnails/21.jpg)
Your Sneak Peak into Lesson 4:
‘Let’s Talk Theory’
We will be covering the 4 steps of the Web Design Process in detail including:
✓ Layout Types ✓ Color Schemes✓ Key Considerations✓ Graphics✓ Launch
And so much more… So don’t miss out!
![Page 22: Professional Diploma in Web Design - Amazon S3€¦ · Professional Diploma in Web Design Lesson 3: Navigation Course Educator: Kate Savage. Did you know? • The first web page went](https://reader036.fdocuments.us/reader036/viewer/2022081405/5f0713117e708231d41b2cd4/html5/thumbnails/22.jpg)
Professional Diploma In Web Design – Module 1 Professional Diploma In Web Design – Module 1
– UI – User Interface
– Main Navigation types:
– Side Bar Navigation
– Hamburger Menu
– Multimedia Menu
– Drop Down Menu
– New Tags:
– Ul – Unordered List
– <li> List Items
– <a> Creates Link
![Page 23: Professional Diploma in Web Design - Amazon S3€¦ · Professional Diploma in Web Design Lesson 3: Navigation Course Educator: Kate Savage. Did you know? • The first web page went](https://reader036.fdocuments.us/reader036/viewer/2022081405/5f0713117e708231d41b2cd4/html5/thumbnails/23.jpg)
Lesson Challenge
Post on any of our Social media
platforms a Screenshot of your
customised site from today’s lesson.
https://www.facebook.com/shawacademy
![Page 24: Professional Diploma in Web Design - Amazon S3€¦ · Professional Diploma in Web Design Lesson 3: Navigation Course Educator: Kate Savage. Did you know? • The first web page went](https://reader036.fdocuments.us/reader036/viewer/2022081405/5f0713117e708231d41b2cd4/html5/thumbnails/24.jpg)
Congratulations on Completing Lesson 3!
– I hope you all had a great time and learnt
something new!
– Please feel free to send us feedback and any
suggestions.
– Email: [email protected]
![Page 25: Professional Diploma in Web Design - Amazon S3€¦ · Professional Diploma in Web Design Lesson 3: Navigation Course Educator: Kate Savage. Did you know? • The first web page went](https://reader036.fdocuments.us/reader036/viewer/2022081405/5f0713117e708231d41b2cd4/html5/thumbnails/25.jpg)
LessonTwo
LessonThree
LessonFour
LessonFive
LessonOne
LessonSix
LessonSeven
LessonEight
Professonal Diploma in Photography – Module 1
THANK YOU For attending!
SEE YOU SOON FOR YOUR NEXT LESSON!
Week One Completed!
![Page 26: Professional Diploma in Web Design - Amazon S3€¦ · Professional Diploma in Web Design Lesson 3: Navigation Course Educator: Kate Savage. Did you know? • The first web page went](https://reader036.fdocuments.us/reader036/viewer/2022081405/5f0713117e708231d41b2cd4/html5/thumbnails/26.jpg)
LessonTwo
LessonThree
LessonFour
LessonFive
LessonOne
LessonSix
LessonSeven
LessonEight
THANK YOU For attending!
SEE YOU SOON FOR YOUR NEXT LESSON!
Week One Completed!