Review Chapter 3, 4 & 5 - Dreamweaver. How does defining the site in Dreamweaver help in designing a...

ReviewChapter 3, 4 & 5 - Dreamweaver

How does defining the site in How does defining the site in

Dreamweaver help in designing a web Dreamweaver help in designing a web

page?page?Answer: It shows all the files and images for Answer: It shows all the files and images for the web site. HTML files can be opened by the web site. HTML files can be opened by double clicking them and images can be double clicking them and images can be dragged and dropped onto the page from the dragged and dropped onto the page from the site menu.site menu.

Relative vs. Absolute links

Relative Links Relative Links are the kind of links that link to are the kind of links that link to other files within your website:other files within your website:

home | faculty | sports | clubshome | faculty | sports | clubsindex.htm faculty.htm sports.htm index.htm faculty.htm sports.htm

clubs.htmclubs.htm

Absolute Links Absolute Links are the kind of links that link are the kind of links that link outside your website to other sites:outside your website to other sites:ESPNESPN CNNCNNhttp://www.espn.com http://www.cnn.com

Are these links Relative or Absolute?Index.htm Relative Google.com Absolute

Valley.k12.oh.us Absolute Services.htm Relative

What is a Local Root Folder?

The main folder in which all the files and The main folder in which all the files and images in your web site are located.images in your web site are located.

Open Dreamweaver and look at the site menu, Open Dreamweaver and look at the site menu, open the site with Chapter 5. At the very top open the site with Chapter 5. At the very top of the site window you will see:of the site window you will see:

H: Dreamweaver/Chapter5 – this is the local root H: Dreamweaver/Chapter5 – this is the local root for the Chapter 5 website.for the Chapter 5 website.

What is a File Browser?

Gives you direct access to all of the files and folders on your hard disk. Can use it to easily move files into your local root folder. It ensures your files have the necessary path integrity.

Why do we save the first file of our website index?

Web servers know to display this file 1Web servers know to display this file 1stst – it is – it is a universal rule that the first page of every a universal rule that the first page of every website be called indexwebsite be called index

What do the following things describe?

Must not contain spaces or symbols like ? % ; ,Must not contain spaces or symbols like ? % ; ,

Used by browsers to display webpages properlyUsed by browsers to display webpages properly

Name given when you save a documentName given when you save a document

Must end in .htmMust end in .htm

ANSWER: Filename

What do these desribe?

Used by search engines in the description of Used by search engines in the description of your site when you google it.your site when you google it.

When a user bookmarks a page or adds a When a user bookmarks a page or adds a page to their favorites, this will be the name page to their favorites, this will be the name placed on their bookmark list.placed on their bookmark list.

Should be a descriptive name and can include Should be a descriptive name and can include spaces and any characters/symbols you want.spaces and any characters/symbols you want.

T i t l e

To insert a paragraph in Dreamweaver press?

EnterEnter

To insert a line break in Dreamweaver press?

Shift-EnterShift-Enter

Did they press enter or shift enter in these lines?

March is here, but old man winterMarch is here, but old man winteris still rearing his ugly head.is still rearing his ugly head.

March is here, but old man winterMarch is here, but old man winter

is till rearing his ugly head.is till rearing his ugly head.

What is the <html code> for a paragraph break?

What is the <html> code for a line break?

Switch to this in the Site Menu to show

all images in your web site (hides .htm

files)

Assets PanelAssets Panel

Read these suggestions for setting link color:

Red Shouts (In the jungle red serves as a Red Shouts (In the jungle red serves as a strong warning of danger. Almost all animals strong warning of danger. Almost all animals are more sensitive to red than other colors. Go are more sensitive to red than other colors. Go to a magazine rack and see how red is used to to a magazine rack and see how red is used to stand out. It is the number one flag color. It is stand out. It is the number one flag color. It is why lipstick works. Red says “over here”, “hit why lipstick works. Red says “over here”, “hit me”. Blue says “been there, done that”.me”. Blue says “been there, done that”.

What do you click to change

margins or background color of your

page?

Modify Page Modify Page PropertiesProperties

Name the two ways to link files in Dreamweaver?

Browse for File Browse for File and Point to and Point to FileFile

How do you get your website listed

with a search engine

(google/yahoo)?Officially list it with the various search engines Officially list it with the various search engines (fill out a form giving them information about (fill out a form giving them information about your site.)your site.)

Insert <META> tags in your webpage listing a Insert <META> tags in your webpage listing a description of the site and inserting various description of the site and inserting various keywords a person might type in to search for keywords a person might type in to search for your site.your site.

What do “robots” or “spiders” have

to do with the www (world wide

web)?They are electronic devices that search They are electronic devices that search engines use to search out the web for content.engines use to search out the web for content.

For example, if you put Jake Porter as a For example, if you put Jake Porter as a keyword in your webpage, a search engines keyword in your webpage, a search engines robot or spider would find it and bring it back robot or spider would find it and bring it back as a result when you search for Jake Porter – as a result when you search for Jake Porter – try it – go to dogpile.com and type Jake Porter try it – go to dogpile.com and type Jake Porter Northwest High School (see what you find).Northwest High School (see what you find).

Why do you suppose our school

website is one of the hits?

Click on the link to our website – it should take Click on the link to our website – it should take you to our main high school page.you to our main high school page.

Click View, Source and look for the <meta> tag Click View, Source and look for the <meta> tag at the very top of the code. It has high school, at the very top of the code. It has high school, northwest and Jake Porter in the keywords.northwest and Jake Porter in the keywords.

The robot/spider sent out by dogpile picked up The robot/spider sent out by dogpile picked up our site because it found those keywords.our site because it found those keywords.

What is the <html> tag needed to insertkeywords and a description for search engines.

<meta><meta>

The <meta> should be included

inside which <html> tag?

<Head> <Head>

<title> </title><title> </title>

<meta name="description" content="Northwest <meta name="description" content="Northwest High School, McDermott, OH, Home of the High School, McDermott, OH, Home of the Mohawks.”>Mohawks.”>

<meta name="keywords" content="high school, <meta name="keywords" content="high school, northwest, mohawks, mcdermott, oh, scioto, northwest, mohawks, mcdermott, oh, scioto, Ohio, SOC, Jake Porter,">Ohio, SOC, Jake Porter,">

</Head></Head>

So what are keywords?

Words someone might Words someone might type into a search type into a search engine to find your engine to find your site.site.

Why put a description in your <meta> tag?

Because search engines “might” use this Because search engines “might” use this description in the results of a search to describe description in the results of a search to describe your site.your site.

Try it – go to google.com and type:Try it – go to google.com and type:northwest high schoolnorthwest high school

Scroll down, see our school? Click it. When you Scroll down, see our school? Click it. When you get to our site, click View Source – find the get to our site, click View Source – find the <meta> tag, our description was used by <meta> tag, our description was used by googlegoogle

There is a limit to the number of

keywords a robot will read . . .

10 -1510 -15

What is this calledHome | Clubs | Faculty | Sports

Navigation BarNavigation Bar

Why do some webpages have a

button navbar and a text navbar?

To accommodate blind users. The blind have To accommodate blind users. The blind have text readers that will read all the text on a text readers that will read all the text on a webpage to them. Since buttons are not text, webpage to them. Since buttons are not text, the reader will skip over them. Therefore, they the reader will skip over them. Therefore, they need to have the links as text so the reader need to have the links as text so the reader will tell them there are links to other pages. will tell them there are links to other pages. The readers read the <html> code as well so The readers read the <html> code as well so they know the difference between text and they know the difference between text and text that is linked.text that is linked.

What is the hexadecimal code for NHS Red?

#E60000#E60000

What is the hexadecimal code for NHS blue?

#001e99#001e99

What is a placeholder?

A blank object that you can set the height and A blank object that you can set the height and width of the picture you will eventually put in width of the picture you will eventually put in its place (remember the trees that you its place (remember the trees that you inserted – the placeholder was there holding inserted – the placeholder was there holding its place until the image was ready.its place until the image was ready.

When setting the link color of the

link for the current page . . .

Set it in a different color as the rest of the Set it in a different color as the rest of the links to indicate that it is the current page.links to indicate that it is the current page.

Go to the NHS website and go to Athletics, Go to the NHS website and go to Athletics, Basketball, Boys and see if the webmasters Basketball, Boys and see if the webmasters are doing this for the links that go across the are doing this for the links that go across the top of the pages.top of the pages.

When should “named anchors” be used?

When you want to link to sections within a When you want to link to sections within a long page. You want to jump from the top of long page. You want to jump from the top of the page way down to another section on the the page way down to another section on the page.page.

Set the anchors and then hyperlink to them.Set the anchors and then hyperlink to them.

Code Required for “every” <html> page

<html><html><head><head> <title></title> <title></title> <meta></meta> <meta></meta>

</head></head><body><body> Body goes here Body goes here</body></body></html></html>

What would this code do?

Know these codes:



 or 

 

<a name = “top”> </a>

<Body>

<title>

 

<hr>

<a href=” “> </a>

Print an unordered list like . . . • CatCat

• DogDog

• MouseMouse

What would this do?

<ol ><ol >

<li>cat<li>cat

<li>dog<li>dog

<li>mouse<li>mouse

</ol></ol>

Print an ordered list like . . .1.1. CatCat

2.2. DougDoug

3.3. MouseMouse

What are image maps?

They allow you to open a single image in They allow you to open a single image in Dreamweaver and then link to several Dreamweaver and then link to several different web pages from the same image.different web pages from the same image.

An example of an assignment we did using An example of an assignment we did using image map is the elementary school bus image map is the elementary school bus image where we linked to calendar, what’s image where we linked to calendar, what’s new, and news from the elementary bus new, and news from the elementary bus image we made in Photoshop.image we made in Photoshop.

Review Chapter 3, 4 & 5 - Dreamweaver. How does defining the site in Dreamweaver help in designing a...

Documents

Transcript of Review Chapter 3, 4 & 5 - Dreamweaver. How does defining the site in Dreamweaver help in designing a...