Download
1 / 41
410 likes | 526 Views
Review. Chapter 3, 4 & 5 - Dreamweaver. How does defining the site in Dreamweaver help in designing a web page?. Answer: It shows all the files and images for the web site. HTML files can be opened by double clicking them and images can be dragged and dropped onto the page from the site menu.
E N D
Review Chapter 3, 4 & 5 - Dreamweaver
How does defining the site in Dreamweaver help in designing a web page? • Answer: It shows all the files and images for the web site. HTML files can be opened by double clicking them and images can be dragged and dropped onto the page from the site menu.
Relative vs. Absolute links • Relative Links are the kind of links that link to other files within your website: home | faculty | sports | clubs index.htm faculty.htm sports.htm clubs.htm • Absolute Links are the kind of links that link outside your website to other sites:ESPN CNNhttp://www.espn.comhttp://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 images in your web site are located. • Open Dreamweaver and look at the site menu, open the site with Chapter 5. At the very top of the site window you will see: • H: Dreamweaver/Chapter5 – this is the local root 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 1st – it is a universal rule that the first page of every website be called index
What do the following things describe? • Must not contain spaces or symbols like ? % ; , • Used by browsers to display webpages properly • Name given when you save a document • Must end in .htm ANSWER: Filename
What do these desribe? • Used by search engines in the description of your site when you google it. • When a user bookmarks a page or adds a page to their favorites, this will be the name placed on their bookmark list. • Should be a descriptive name and can include spaces and any characters/symbols you want. T i t l e
To insert a line break in Dreamweaver press? • Shift-Enter
Did they press enter or shift enter in these lines? • March is here, but old man winteris still rearing his ugly head. • March is here, but old man winteris till rearing his ugly head.
Switch to this in the Site Menu to show all images in your web site (hides .htm files) • Assets Panel
Read these suggestions for setting link color: • Red Shouts (In the jungle red serves as a strong warning of danger. Almost all animals are more sensitive to red than other colors. Go to a magazine rack and see how red is used to stand out. It is the number one flag color. It is why lipstick works. Red says “over here”, “hit me”. Blue says “been there, done that”.
What do you click to change margins or background color of your page? • Modify Page Properties
Name the two ways to link files in Dreamweaver? • Browse for File and Point to File
How do you get your website listed with a search engine (google/yahoo)? • Officially list it with the various search engines (fill out a form giving them information about your site.) • Insert <META> tags in your webpage listing a description of the site and inserting various keywords a person might type in to search for your site.
What do “robots” or “spiders” have to do with the www (world wide web)? • They are electronic devices that search engines use to search out the web for content. • For example, if you put Jake Porter as a keyword in your webpage, a search engines robot or spider would find it and bring it back as a result when you search for Jake Porter – try it – go to dogpile.com and type Jake Porter 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 you to our main high school page. • Click View, Source and look for the <meta> tag at the very top of the code. It has high school, northwest and Jake Porter in the keywords. • The robot/spider sent out by dogpile picked up our site because it found those keywords.
What is the <html> tag needed to insertkeywords and a description for search engines. • <meta>
The <meta> should be included inside which <html> tag? • <Head> <title> </title> <meta name="description" content="Northwest High School, McDermott, OH, Home of the Mohawks.”> <meta name="keywords" content="high school, northwest, mohawks, mcdermott, oh, scioto, Ohio, SOC, Jake Porter,"> </Head>
So what are keywords? • Words someone might type into a search engine to find your site.
Why put a description in your <meta> tag? • Because search engines “might” use this description in the results of a search to describe your site. • Try it – go to google.com and type:northwest high school • Scroll down, see our school? Click it. When you get to our site, click View Source – find the <meta> tag, our description was used by google
There is a limit to the number of keywords a robot will read . . . • 10 -15
What is this calledHome | Clubs | Faculty | Sports • Navigation Bar
Why do some webpages have a button navbar and a text navbar? • To accommodate blind users. The blind have text readers that will read all the text on a webpage to them. Since buttons are not text, the reader will skip over them. Therefore, they need to have the links as text so the reader will tell them there are links to other pages. The readers read the <html> code as well so they know the difference between text and text that is linked.
What are the vertical lines used in a navigation bar called? Home | Faculty | Sports | Clubs • Pipes (press shift backslash to get them | | | | )
What is a placeholder? • A blank object that you can set the height and width of the picture you will eventually put in its place (remember the trees that you inserted – the placeholder was there holding 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 links to indicate that it is the current page. • Go to the NHS website and go to Athletics, Basketball, Boys and see if the webmasters are doing this for the links that go across the top of the pages.
When should “named anchors” be used? • When you want to link to sections within a long page. You want to jump from the top of the page way down to another section on the page. • Set the anchors and then hyperlink to them.
Code Required for “every” <html> page • <html><head> <title></title> <meta></meta> </head><body> Body goes here</body></html>
What would this code do? • <ul > • <li>cat • <li>dog • <li>mouse • </ul>
Know these codes: <p></p> <strong> or <b> </b> <font> </font> <a name = “top”> </a> <Body> <title> <br> <hr> <a href=” “> </a>
Print an unordered list like . . . • Cat • Dog • Mouse
What would this do? • <ol > • <li>cat • <li>dog • <li>mouse • </ol>
Print an ordered list like . . . • Cat • Doug • Mouse
What are image maps? • They allow you to open a single image in Dreamweaver and then link to several different web pages from the same image. • An example of an assignment we did using image map is the elementary school bus image where we linked to calendar, what’s new, and news from the elementary bus image we made in Photoshop.
