{"id":69,"date":"2020-12-17T14:04:00","date_gmt":"2020-12-17T19:04:00","guid":{"rendered":"https:\/\/pressbooks.library.ryerson.ca\/nps207\/?post_type=chapter&p=69"},"modified":"2020-12-17T14:31:23","modified_gmt":"2020-12-17T19:31:23","slug":"chapter-4-%e2%80%a2-web","status":"publish","type":"chapter","link":"https:\/\/pressbooks.library.torontomu.ca\/nps207\/chapter\/chapter-4-%e2%80%a2-web\/","title":{"raw":"Chapter 4 \u2022\u00a0Web","rendered":"Chapter 4 \u2022\u00a0Web"},"content":{"raw":"

Building the Fixed-Width Web Page<\/h3>\r\n
    \r\n \t
  1. Open a new Dreamweaver document, display Code View vertically on left and Live View on right, delete pre-written code.<\/li>\r\n \t
  2. Add opening and closing tags for the document <html>, invisible head <head>, and visible area <body>.<\/li>\r\n \t
  3. Copy-and-paste the text for the Introduction into the code, add <p> tags.<\/li>\r\n \t
  4. Enter the title of your page and tag with <h1>.<\/li>\r\n \t
  5. Insert Photo 1 with <img>, i.e. <img src=\"image.jpg\" \/>; this is a self-closing tag. Specify a class name for the image, e.g., <img class=\"full-width\" src=\"image.jpg\" \/>.<\/li>\r\n \t
  6. Add a paragraph underneath with the caption for Photo 1, set up a class \"caption,\" i.e., <p class=\"caption\">.<\/li>\r\n \t
  7. Surround the text and image tags with a <div> or grouping tag ID'd as \"page\".<\/li>\r\n<\/ol>\r\n[caption id=\"attachment_77\" align=\"aligncenter\" width=\"1536\"]\"HTML<\/a> Figure 4-1. Fixed-width HTML page.[\/caption]\r\n

    CSS<\/h3>\r\n
      \r\n \t
    1. In the head, write an opening and closing <style> tag.<\/li>\r\n \t
    2. Add a style statement for the body, set background to \"whitesmoke\" (light gray).<\/li>\r\n \t
    3. Style \"#page\" with width 1024px, height 1324px, background white, and center with \"margin: 0 auto;\"<\/li>\r\n \t
    4. Style \"p\" and set font-face, font-size, line-height, width, and center if desired.<\/li>\r\n \t
    5. Style \"h1\" and set as above, center with \"text-align: center;\"<\/li>\r\n \t
    6. Style \".full-width,\" set width to 1024px or less, height to auto, center if desired; optionally add \"border: 1px solid gray;\" and \"box-shadow: 2px 3px 6px gray;\"<\/li>\r\n \t
    7. If you want text to wrap around a smaller image, set the style to \"float: left;\" and add \"margin: 0px 24px 12px 0;\" to push away the text (numbers go clockwise from top).<\/li>\r\n \t
    8. Style \".caption\" to be slightly smaller in size, italic, e.g., \"font-size: 12pt; font-style: italic;\"<\/li>\r\n<\/ol>\r\n

      Linking Photo 1 to Its High-Res Version<\/h3>\r\n
        \r\n \t
      1. To link your 1024px-wide image to its high-res version, add a link tag, e.g.:\r\n<a href=\"image.jpg\"><img class=\"full-width\" src=\"image.jpg\" \/><\/a><\/span><\/li>\r\n<\/ol>\r\nThis way, when readers click on the image, they will see the full-res version, which is helpful in seeing all the detail and in aiding the visually impaired.\r\n\r\n \r\n\r\n[caption id=\"attachment_79\" align=\"aligncenter\" width=\"1536\"]\"\"<\/a> Figure 4-2.<\/strong> Completed fixed-width page with high-res photo linked to low-res photo in page. Note use of the <figure> tag to group the photo (<img>) with the caption (<figcaption>).[\/caption]\r\n

        Setting the Page to Variable Width<\/h3>\r\n
          \r\n \t
        1. All the tags that you styled as fixed-width, like \"width: 1024px;\" either (1) set the width in %, or add another tag, \"max-width: 100%;\"<\/li>\r\n<\/ol>\r\n

          Setting the Page to be Responsive (Look Good on a Smartphone)<\/h3>\r\n
            \r\n \t
          1. Add an \"@media {}\" rule in the <style> statement that specifies the maximum width of the smartphone, usually 750px for iPhones, e.g. \"@media only screen and (max-width: 750px) {}.<\/li>\r\n \t
          2. Inside the braces for the @media rule, enter the styles that apply to the iPhone, i.e.:\r\n
              \r\n \t
            1. tags should be \"max-width: 100%;\" or a smaller percentage<\/li>\r\n \t
            2. any images with text-wrap (\"float\") should be set to \"display: block;\" so they appear separately and take up the full width of the screen.<\/li>\r\n<\/ol>\r\n<\/li>\r\n<\/ol>","rendered":"

              Building the Fixed-Width Web Page<\/h3>\n
                \n
              1. Open a new Dreamweaver document, display Code View vertically on left and Live View on right, delete pre-written code.<\/li>\n
              2. Add opening and closing tags for the document <html>, invisible head <head>, and visible area <body>.<\/li>\n
              3. Copy-and-paste the text for the Introduction into the code, add <p> tags.<\/li>\n
              4. Enter the title of your page and tag with <h1>.<\/li>\n
              5. Insert Photo 1 with <img>, i.e. <img src=”image.jpg” \/>; this is a self-closing tag. Specify a class name for the image, e.g., <img class=”full-width” src=”image.jpg” \/>.<\/li>\n
              6. Add a paragraph underneath with the caption for Photo 1, set up a class “caption,” i.e., <p class=”caption”>.<\/li>\n
              7. Surround the text and image tags with a <div> or grouping tag ID’d as “page”.<\/li>\n<\/ol>\n
                \"HTML<\/a>
                Figure 4-1. Fixed-width HTML page.<\/figcaption><\/figure>\n

                CSS<\/h3>\n
                  \n
                1. In the head, write an opening and closing <style> tag.<\/li>\n
                2. Add a style statement for the body, set background to “whitesmoke” (light gray).<\/li>\n
                3. Style “#page” with width 1024px, height 1324px, background white, and center with “margin: 0 auto;”<\/li>\n
                4. Style “p” and set font-face, font-size, line-height, width, and center if desired.<\/li>\n
                5. Style “h1” and set as above, center with “text-align: center;”<\/li>\n
                6. Style “.full-width,” set width to 1024px or less, height to auto, center if desired; optionally add “border: 1px solid gray;” and “box-shadow: 2px 3px 6px gray;”<\/li>\n
                7. If you want text to wrap around a smaller image, set the style to “float: left;” and add “margin: 0px 24px 12px 0;” to push away the text (numbers go clockwise from top).<\/li>\n
                8. Style “.caption” to be slightly smaller in size, italic, e.g., “font-size: 12pt; font-style: italic;”<\/li>\n<\/ol>\n

                  Linking Photo 1 to Its High-Res Version<\/h3>\n
                    \n
                  1. To link your 1024px-wide image to its high-res version, add a link tag, e.g.:
                    \n<a href=”image.jpg”><img class=”full-width” src=”image.jpg” \/><\/a><\/span><\/li>\n<\/ol>\n

                    This way, when readers click on the image, they will see the full-res version, which is helpful in seeing all the detail and in aiding the visually impaired.<\/p>\n

                     <\/p>\n

                    \"\"<\/a>
                    Figure 4-2.<\/strong> Completed fixed-width page with high-res photo linked to low-res photo in page. Note use of the <figure> tag to group the photo (<img>) with the caption (<figcaption>).<\/figcaption><\/figure>\n

                    Setting the Page to Variable Width<\/h3>\n
                      \n
                    1. All the tags that you styled as fixed-width, like “width: 1024px;” either (1) set the width in %, or add another tag, “max-width: 100%;”<\/li>\n<\/ol>\n

                      Setting the Page to be Responsive (Look Good on a Smartphone)<\/h3>\n
                        \n
                      1. Add an “@media {}” rule in the <style> statement that specifies the maximum width of the smartphone, usually 750px for iPhones, e.g. “@media only screen and (max-width: 750px) {}.<\/li>\n
                      2. Inside the braces for the @media rule, enter the styles that apply to the iPhone, i.e.:\n
                          \n
                        1. tags should be “max-width: 100%;” or a smaller percentage<\/li>\n
                        2. any images with text-wrap (“float”) should be set to “display: block;” so they appear separately and take up the full width of the screen.<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n","protected":false},"author":6,"menu_order":5,"template":"","meta":{"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[],"contributor":[],"license":[],"class_list":["post-69","chapter","type-chapter","status-publish","hentry"],"part":3,"_links":{"self":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/nps207\/wp-json\/pressbooks\/v2\/chapters\/69","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/nps207\/wp-json\/pressbooks\/v2\/chapters"}],"about":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/nps207\/wp-json\/wp\/v2\/types\/chapter"}],"author":[{"embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/nps207\/wp-json\/wp\/v2\/users\/6"}],"version-history":[{"count":6,"href":"https:\/\/pressbooks.library.torontomu.ca\/nps207\/wp-json\/pressbooks\/v2\/chapters\/69\/revisions"}],"predecessor-version":[{"id":81,"href":"https:\/\/pressbooks.library.torontomu.ca\/nps207\/wp-json\/pressbooks\/v2\/chapters\/69\/revisions\/81"}],"part":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/nps207\/wp-json\/pressbooks\/v2\/parts\/3"}],"metadata":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/nps207\/wp-json\/pressbooks\/v2\/chapters\/69\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/nps207\/wp-json\/wp\/v2\/media?parent=69"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/nps207\/wp-json\/pressbooks\/v2\/chapter-type?post=69"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/nps207\/wp-json\/wp\/v2\/contributor?post=69"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/nps207\/wp-json\/wp\/v2\/license?post=69"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}