Web Design Tools Lesson 3

What will you learn in this lesson? The tools of the trade and their advantages The tools of the trade and their advantages The importance of the Rood folder The importance of the Rood folder The usefulness of a Master page The usefulness of a Master page Using web browsers for testing and troubleshooting 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 – 2 x Eggs 2 x Eggs 1 x tomato (sliced) 1 x tomato (sliced) 1 x bell pepper (chopped) 1 x bell pepper (chopped) Some butter or Grape seed oil Some butter or Grape seed oil Salt and pepper to taste Salt and pepper to taste The Tools Frying pan Frying pan Spatula Spatula Fork to whisk & to eat with Fork to whisk & to eat with Stove Stove Plate Plate Chopping knife/board Chopping knife/board Measuring jug 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 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. Web design tools range from ‘ plain text editors’ with simple functions to multifaceted/multidimensional and powerful software packages.

There are ‘ Plain Text Editors ’ such as TextEdit for Mac and Notepad for Windows 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. 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. Their name?

Before the comparison Go online Go online Visit Visit Click the Menu ‘Lesson Files’ Click the Menu ‘Lesson Files’ Scroll down to ‘Link to Lesson Files and Images’ Scroll down to ‘Link to Lesson Files and Images’ Click the long link below it Click the long link below it Click to download Lesson03 Click to download Lesson03 Save on the Desktop Save on the Desktop

Let’s Compare Click Finder on the Dock Click Finder on the Dock Click Applications on the left pane Click Applications on the left pane Find the following software and open them one at a time – 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. 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. 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. Color Coding to differentiate HTML, CSS and JavaScript programming languages. Code completion to reduce fatigue Code completion to reduce fatigue Site Management and FTP ( File Transfer Protocol ) capability Site Management and FTP ( File Transfer Protocol ) capability Line Numbering for easy access and identification Line Numbering for easy access and identification Visual aids Visual aids Find and Replace code for updates Find and Replace code for updates Advanced features for advanced developers 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

Why a Root Folder?! A ‘root folder’ also known as’ root directory’ is the highest folder in the hierarchy. 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. 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. Modern web browsers do not just display web pages. They include tools for developing and troubleshooting web pages. They include tools for developing and troubleshooting web pages. Launch Chrome > visit a website > click the ‘View’ > click ‘Developer’ > click ‘Developer’ Tool Launch Chrome > visit a website > click the ‘View’ > click ‘Developer’ > click ‘Developer’ Tool