Download Web Design Tools - Learn with Masihi

yes no Was this document useful for you?
   Thank you for your participation!

* Your assessment is very important for improving the work of artificial intelligence, which forms the content of this project

Document related concepts

URL redirection wikipedia, lookup

Web Design
Lesson 3
What will you learn in this
 The tools of the trade and their
 The importance of the Rood folder
 The usefulness of a Master page
 Using web browsers for testing
and troubleshooting
Picture the Scenario
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 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
Ingredients –
The Tools
 2 x Eggs
 Frying pan
 Spatula
 Fork to whisk & to eat
 Stove
 Plate
 Chopping
 1 x tomato (sliced)
 1 x bell pepper
 Some butter or Grape
seed oil
 Salt and pepper to
 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
 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
 Click the Menu ‘Lesson Files’
 Scroll down to ‘Link to Lesson Files and
 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)
 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
Click the link below to learn about a Master Page
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
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