Dreamweaver Edulaunch Project 1 - WPHS
Download
Report
Transcript Dreamweaver Edulaunch Project 1 - WPHS
Dreamweaver Edulaunch Project 1
EQ: What are the key concepts when
building the first page of a web site?
Local Root Folder
• Stores the files you’re working on.
• Dreamweaver refers to this folder as your
“local site.”
• This folder is typically on your local computer.
• Eventually this folder would be uploaded to a
remote web server for viewing on the
Internet.
EQ: What are the key concepts when building the first
page of a web site?
File and Folder Names
• No spaces. This creates a file name with %20 for
every space when people attempt to save it.
• Example: an image named Everglades National
Park would actually say
Everglades%20National%20Park if it were
downloaded.
• Use dashes or underscores instead of spaces
• The first page (home page) in a website MUST be
named index.
– This allows search engines to find your web site and
open the home page.
Structure Tags
• There are 4 basic
structure tags that
MUST be present in
order for a web site to
work correctly on the
Internet.
• All structure tags are
paired tabs, meaning
they must have an
opening and a closing
tag.
<html>
<head>
<title>
<body>
</html>
</head>
</title>
</body>
Structure Tags (cont.)
<html>
<head>
<title>
<body>
</html>
</head>
</title>
</body>
Opening tags are shown in red. They begin an
action on a page.
Closing tags are shown in blue. They have a
slash. They stop an action on a page.
Title
• This is the name of a page that shows up on the Title Bar or
a tab on a web browser.
• The title helps search engines find your page.
• The title of this page is Google.
• It is created using title tags. <title> Google </title>
Structure Tags (cont.)
The order of the tags is as shown. Notice I
placed Google where it would be on
Google’s home page.
<html>
<head> <title> Google </title> </head>
<body>
</body>
</html>
Check your work
• Look at your Mt. Rushmore project.
• Click the button to see the code.
• Does your site have all four structure tags?
Structure Tags (cont.)
• <html> tells a computer that a web page is
beginning.
• </html> tells a computer that the web page
ends. Any code places after this tag will not
appear on a web page on the Internet.
Structure Tags (cont.)
• <head> gives information about the
document.
• </head> ends the information section of a
document .
• <title> allows the title to show up on a
browser tab, but also allows a search engine
to find your page.
• </title> ends this description
Structure Tags (cont.)
• <body> contains all the contents of an HTML
document, such as text, hyperlinks, images,
tables, lists, etc.
• </body> ends the content area of the page.
Tables
• Used to divide a page into sections
• Creates an organized visual display
–
–
–
–
Banner
Sidebar
Navigation area
Footer with text links
• Cell padding – the amount of space between a
cell edge and the content.
• Cell spacing – the amount of spacing between
cells.
Try it!
• Change the Cellpadding to 50 on your Mt.
Rushmore page. How does it change the way
the image is displayed in the cell?
• Change the Cellspacing to 10. How does it
change the way the table looks?
• Be sure to change things back to the way they
were.
Pixels v. Inches
• Most measurements for the web are in pixels
instead of inches.
– Image dimensions
– Table size
– Cell size
• We use pixels because that’s what monitors use –
pixels – to display visual content.
• For viewing on the web, 72 pixels = 1 inch.
• Check out this blog for more information
http://babyfaceinteractive.com/blog/developers/
2012/04/designing-for-web-%E2%80%93-printvs-web-%E2%80%93-inches-pixels-dpi-oh-my