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.

Structure Tags (cont.) 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. Google

Structure Tags (cont.) The order of the tags is as shown. Notice I placed Google where it would be on Google’s home page. Google

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.) tells a computer that a web page is beginning. 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.) gives information about the document. ends the information section of a document. allows the title to show up on a browser tab, but also allows a search engine to find your page. ends this description

Structure Tags (cont.) contains all the contents of an HTML document, such as text, hyperlinks, images, tables, lists, etc. 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 /04/designing-for-web-%E2%80%93-print- vs-web-%E2%80%93-inches-pixels-dpi-oh-my /04/designing-for-web-%E2%80%93-print- vs-web-%E2%80%93-inches-pixels-dpi-oh-my