Embed Size (px)
Citation preview
Professional
Diploma
in
Web Design
Lesson 3:
Navigation
Course Educator:
Kate Savage
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.
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
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
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!
Where Were We?
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
Professional Diploma In Web Design – Module 1 Professional Diploma In Web Design – Module 1
Professional Diploma In Web Design – Module 1 Professional Diploma In Web Design – Module 1
Professional Diploma In Web Design – Module 1 Professional Diploma In Web Design – Module 1
Professional Diploma In Web Design – Module 1 Professional Diploma In Web Design – Module 1
Let’s Talk Tags!
Let’s Talk Tags
– <li> - List Item
– <ul> - Unordered List
– <a> - Creates a Hyperlink
Sidebar Static Navigation
– Anchored to a section of the screen
– Simple flat navigation
– All links are visible at all times for easy use
Hamburger Menu
– Top left corner of the UI (User Interface)
– Toggles between a hidden menu & an
expanded menu
– Resembles a Hamburger
Multimedia Menu
– Utilises media as links
– Images
– Videos
– Relies on visuals to guide the user
experience.
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.
Navigation Outline
HTML Outline
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!
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
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
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]
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!
LessonTwo
LessonThree
LessonFour
LessonFive
LessonOne
LessonSix
LessonSeven
LessonEight
THANK YOU For attending!
SEE YOU SOON FOR YOUR NEXT LESSON!
Week One Completed!
