Artdm171 Week3 Tags Group Projects


Published on

Published in: Technology, Education
  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Click the expand button to see local and remote  
    local on the right, remote on the left.  We’ll be sticking to local for now. 
    click the collapse button to return to normal
    Create a new directory for each section of your website 
    Add a default document to each directory.  Must be named index.html 
    Create utilities directories, images, css, scripts, files, pdf 
    Use hyphens for multiple words.  No spaces allowed.  No illegal characters.
  • Dreamweaver automatically generates most of this when you create a new document. 10 lines of code (including a blank line between head and body.)
    Take a look at these tags in Dreamweaver in a basic HTML document.
  • (Notice the attributes.)
  • Class Exercise:→   Add a page heading, paragraph, bold, italics, link, and an image. Use the image saved in the ARTDM-171 folder. (Drag and drop it into the images folder on your USB drive.)
  • Get started with fonts and CSS in Dreamweaver by clicking Page Properties... in the property inspector.
  • font-family - Font Family. Allows you to choose a font. Order them in priority. The user's Web browser will look on his or her computer for the first font and if it doesn't find it it will move on to the next. Arial and Times are pretty safe choices, though.
    font-size - Font Size. Set a size based on Pixels (px), Percentages (%), Picas (pc), Points (pt), Ems (em), or, just type small, medium, or large. 
    color - Font Color. Set the color of your fonts. This does not affect the color of backgrounds or borders. 
     All declarations end with a semi-colon (;) and are enclosed in curly brackets ({ }).
  • Artdm171 Week3 Tags Group Projects

    1. 1. ARTDM 171, Week3: XHMTL Tags + Group Projects Gilbert Guerrero
    2. 2. Turn in homework • If you uploaded your file to your account: ‣ send me a link to your Web page • If you did not upload the file: ‣ please stay after class and be sure to upload it and send me the link
    3. 3. Create a new folder in Week3 called html
    4. 4. Open Dreamweaver
    5. 5. Site Management • Define a new site using the Advanced mode. • Set the html folder as the local root. • You must do this for ‣ every homework assignment ‣ every new site ‣ whenever you change computers (such as from home to school).
    6. 6. Your Local Site and Your Remote Site
    7. 7. Directory Structure • 
    8. 8. The Magical index.html File  
    9. 9. Absolute URLs • Begins with http:// • Could be a file on your own site or someone elses site.
    10. 10. Relative URLs • filename.html ‣ Look for a file in the same folder • folder/filename.html ‣ Look one level deep, within a folder for the file • ../folder/filename.html ‣ Go up a level, then down into the folder for the file • /filename.html  or /folder/filename.html ‣  Go to top (root) of the site and look for the folders or files
    11. 11. XHTML Tags  
    12. 12. XHTML Reference
    13. 13. Create a new page in Dreamweaver  
    14. 14. Tags used for Page Properties • <!DOCTYPE > - Defines the document type • <html></html> - Starts and ends the document • <head></head> - HTML Header. Comes after the <html> tag and before the <body> tag • <title></title> - HTML Title, the name of the document • <body></body> - Contains your visible content
    15. 15. Meta Tags – <meta /> • <meta /> - Meta tags appear between the <head> tags. Used for page description, keywords, and other data. • Examples: ‣ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> ‣ <meta name="keywords" content="design, technology, Web" />  ‣ <meta name="description" content="This site is about bread." /> ‣ <meta name="robots" content="noindex, nofollow" /> • Using the robots meta tag: Google Webmaster Central Blog
    16. 16. Basic Tags • <p></p> - Paragraph. • <br /> - Line break. This is an empty tag. Always end it with a space and a forward slash. • <em></em> <strong></strong> - Emphasis, Stonger emphasis. These are known as Idiomatic Elements. •  <i></i> <b></b> - Bold, Italic. These are Typographic Elements. They help to add style and texture to a page. (In this class, our preference is toward <em> and <strong>.) • <h1></h1> <h2></h2> <h3></h3> - Headers. Helps with Search Engine Optimization.
    17. 17. <a></a> - Anchor • Link to an external Web site: ‣ <a href="">DVC</a> • Link to a Web page on your own site: ‣ <a href="bread.html">My Page About Bread</a> ‣ <a href="about/history.html">History of Bread</a> • Hooks (invisible): ‣ <a name="croissants"></a> • Link to the hook: ‣ <a href="index.html#croissants">Croissants</a>
    18. 18. <img /> - Image • <img src="images/file.jpg" border="0" height="10" width="10" />  • Border, Width and Height are optional.
    19. 19. <ul>, <ol> — Lists • Unordered Lists (Bulleted) <ul> <li>Eggs</li> <li>Milk</li> <li>Potatoes</li> </ul> • Ordered Lists (Numbered) <ol> <li>Eggs</li> <li>Milk</li> <li>Potatoes</li> </ol>
    20. 20. &nbsp; — non breaking space
    21. 21. <table> — Table • <table></table> - Table. Encloses your table. You can set the width (Pixels or Percentage%), border, and cellpadding and cellspacing as attributes. • <tr></tr> - Row. Encloses a row in your table. • <td></td> - Cell. Encloses what's in each cell of the table. These also create your columns. Make sure you have the same number of cells in each row.
    22. 22. Table Example <table width="540" border="0" cellpadding="0" cellspacing="0">     <tr>         <td valign="top" width="15%">column 1</td>         <td>column 2</td>         <td>column 3</td>     </tr>     <tr>         <td>Eggs</td>         <td>Milk</td>         <td>Potatoes</td>     </tr> </table>
    23. 23. Fonts • For fonts, colors, and sizes, use CSS.  • Placed between the <head></head> tags • <style type="text/css></style> - Style tags. Enclose your CSS code in these. • What about the FONT tag? ‣ <font> tag is no longer used in todayʼs World Wide Web. • Page Elements ‣ CSS uses page elements to specify fonts.  You can set a font on any page element, body, h1, p, a,...
    24. 24. Page Properties... Dreamweaver fonts + CSS
    25. 25. Basic Stylesheet <style type="text/css"> <!-- body, td, th {     font-family: Arial, Helvetica, sans-serif;     font-size: 12px;     color: #996600; } h1 {     font-family: Georgia, Times New Roman, Times, serif;     font-size: 16px;     color: #003366; } --> </style>
    26. 26. Group Projects Form groups No less than 3 to a group
    27. 27. Group Project Files Get them from the materials drive
    28. 28. Group Project Deadlines • Due next week: ‣ Group Name ‣ Group Members (names of people in group) ‣ Goals (significant change to design + layout) ‣ Choose one person to send an email to • Due by September 22  ‣ Presentation of Completed Site
    29. 29. Homework, due September 7 • Read and follow along with Chapter 4 ‣ Create a Web page using text from Project Gutenberg:  Copy text and use paste special, p92  Add headings, p94  Apply HTML text styles, p99  Add a preformated text, p100  Indent text, p102  Add a list, p105 and nested lists, p108  Add special characters, 109 • Email Group Project answers
    30. 30. Thursday • You will have a sub for the next lab. • Be nice to him!
    31. 31. Thank You