Download Web Design Tools - Learn with Masihi

Web Design
Tools
Lesson 3
What will you learn in this
lesson?
 The tools of the trade and their
advantages
 The importance of the Rood folder
 The usefulness of a Master page
 Using web browsers for testing
and troubleshooting

Picture the Scenario
below
You’ve arrived home from school and the last bite
of food prepared by your mother has been
gobbled up by your sibling who got home before
you.
You decide to make yourself an omelet with
tomatoes and peppers.
List the ingredients and the tools that you will
need to make the omelet.
Think for a few minutes
The ingredients and the
Tools
Ingredients –
The Tools
 2 x Eggs
 Frying pan
 Spatula
 Fork to whisk & to eat
with
 Stove
 Plate
 Chopping
knife/board
 1 x tomato (sliced)
 1 x bell pepper
(chopped)
 Some butter or Grape
seed oil
 Salt and pepper to
taste
 Measuring jug
What about Web Design?
 Web Design is similar to any other
profession and requires its unique
Tools to be able to design webpages.
 Web design tools range from ‘plain
text editors’ with simple functions to
multifaceted/multidimensional and
powerful software packages.
Their name?
 There are ‘Plain Text Editors’ such as
TextEdit for Mac and Notepad for
Windows
 To complicated ‘Web Editors’ and
‘Design Tools’ such as BBedit for Mac
and Web Expression for Windows and
WYSIWYG editors such as
Dreamweaver for both platforms.
Before the comparison
 Go online
 Visit www.karinehmasihi.com
 Click the Menu ‘Lesson Files’
 Scroll down to ‘Link to Lesson Files and
Images’
 Click the long link below it
 Click to download Lesson03
 Save on the Desktop
Let’s Compare
 Click Finder on the Dock
 Click Applications on the left pane
 Find the following software and open
them one at a time –
TextEdit, Text Wrangler, BBEdit and
Dreamweaver 6
Let’s compare (cont’d)
 Starting with the simplest plain text
editor; TextEdit, open the file named
‘index.html’ located in Lesson03.
 Repeat by opening the same
document using more sophisticated
web editors such Text Wrangler,
BBEdit and lastly Dreamweaver.
Advantages of the proper
web editor
 Color Coding to differentiate HTML, CSS and
JavaScript programming languages.
 Code completion to reduce fatigue
 Site Management and FTP (File Transfer Protocol)
capability
 Line Numbering for easy access and identification
 Visual aids
 Find and Replace code for updates
 Advanced features for advanced developers
What is A Master page?
A Master page is a web page that
controls the structure and
appearance of multiple attached
pages.
Click the link below to learn about a Master Page
https://youtu.be/Z47YLFYsqA0
Why a Root Folder?!
 A ‘root folder’
also known as’
root directory’ is
the highest folder
in the hierarchy.
 And contains all
the other folders
that will contain
files.
Web design & Development
tools in the Browser
 Modern web browsers do not just display
web pages.
 They include tools for developing and
troubleshooting web pages.
 Launch Chrome > visit a website > click the
‘View’ > click ‘Developer’ > click
‘Developer’ Tool