web de

Configure the Image Gallery. Modify the external style sheet (pacific.css). - a text editor. Add styles to configure the video on the home page as 2. There is an issue with the print version displaying either a gray box or a blank space where the video should be. The following code toggles brint or screen/mobile version. 3. Open pacific.css and make the following modifications in the / main / area 1. Addmain video and main embed to the following rule main img, main video, main embed ffloat: left; padding: 0p 20px 20px0;; 2. Create a class named displayImage and configure its value 3. Create a class named displayVideo and configure its value to display:block 4. In pacific.css within @media print \{\} which is for the print version, 1. Configure displayImage to display:block; 2. Configure displayVideo to display:none; 3. Validate the CSS. Correct and retest if necessary 5. There are no changes needed for the mobile version. 6. Save and validate the file. Correct and retest if necessary. 2. Within that div configure andigure adiv with an id of gallery. four li> elements. 3. Each element will contain an imgtag, one for each of the four thumbnails. The thumbnail images will function as image links with a : hover pseudo-class that causes the larger image to display on the page. 4. Within each l i > element, configure an anchor element to contain both the thumbnail image and a element that contains the larger image along with the descriptive text. (p. 479 \#4 gives and example). 5. Configure the image attributes - Each thumbnail must have height of 75px, width of 100px, and alt attributes as described in the next item. - Each full size image must have height of 150px, width of 200px, and alt attributes as described in the next item. 6. Add title attribute within the anchor a tag which will be used when hovering over the images and as a caption for each image in the print version. The text for each image must be approximately the same length the alt and title attributes are as as follows: Coasts Waves Sunsets Beaches 7. Instructions are helpful for the user. Otherwise, they may miss some of the functionality of the website. There will be three options, mouse over for screen users, click/tap for mobile users, and no instructions for the print version. Above the closing main > for the gallery (right after ) 1. For the benefit of Screen Users: Add a div > with an id of desktopGallery with the following text: Mouse over an image for a better view. 2. For the benefit of Mobile Users: Add another div> with an id of mobilegallery with the following text: Select an image for a better view. 3. For the benefit of the Print users. No additional coding is needed since this text will not be shown in the print version. 8. Save and validate the file. Correct and retest if necessary. fe Irails Resort Activities at Pacific Trails Resort Hiking Pacific Trails Resort has 5 miles of hiking trails and is adjacent to a state park. Go it alone or join in one of our guided hikes. Kayaking Ocean kayaks are available for guest use. Bird Watching Trails, we offer guided bird watching trips ats anytime is a good time for bird watching at Pacific figure the CSS for the Image Gallery. the external style sheet (pacific.css). Open pacific.css in a text editor. Add to configure the gallery on the activities page as shown below. Screen Version 1. Place all of the CSS selectors related to the gallery in one area of the CSS file. Separate and identify this area using comments, similar to what was done previously. This will make the code easier to read and update as needed. Example: l 2. The gallery id is used for relative positioning. This does not change the location of the gallery, but instead sets the stage to use absolute positioning on the element in relation to its container (\#gallery) instead of relative to the entire web document. This won't matter too much for our very basic example, but would be very helpful if the gallery was part of a more complex web page. 3. Configure the gallery with a position of relative, height of 250px, and clear all floats \#gallery position:relative; height:260px; clear:both; } 4. Configure the unordered list with a width of 300px and no list markers. \#gallery ul \{width:300px; list-style-type:none; 5. Configure the list items with inline-block display and left, right padding of 10px. and top bottom padding of 5px \#gallery li\{display:inline-block; padding:5px 10px;} 6. Configure the images to have no borders. Also since the images inherit a float:left from main img, this must be removed. Style a float: none. \#gallery img \{border-style:none; float:none; 7. Configure the anchor tags with no underline, color of dark gray (\#333), and a font-style of italic \#gallery a text-decoration:none; color:\#333; font-style:italic; 8. Configure the to display only when the web visitor however the mouse over the thumbnail image link. Set the location of the span to use absolute positioning. Locate the 10 pixels down from the top and 300px from the left. Center the text within the span. * gallery span fdisplay:none; - gallery a:hover span idisplay:block; position:absolute: top: 10px; left: 340px text-align:centeri| 9. Modify the rule to clear all floats. clear:both; 10. Configure the mouse over/select images text so that the mouse over is displayed but the select is not. \# desktopGal lery \{display:block; \} \#mobileGallery \{display: none; 11. Save and validate the file. Correct and retest if necessary. 2. Print Version 1. In pacific.css within @media print \{\} which is for the print version, 1. It looks more professional with all the content displayed on one page. Since there are four images, two rows of two images would be optimum. If there were more images, if there were six then it might be two rows of three. If there were nine, maybe three rows of three. Change the width of the unordered list in the gallery \#gallery ul to 425px. This will allow for two images to be displayed across the pages. This number would be increased or decreased depending on the size of the images and the number that are to be in each row. \#gallery ul \{width:425px; 2. The text that will be displayed is the value assigned to the title property in the a tag. Pseudo elements will be used for this. \#gallery a:after \{content:attr(title); 3. Float the thumbnail images to the left so the description can be on the right \#gallery ul a img\{ float:left; \} 4. Do not display the mouse over/select text. This can be done by setting display to none. \#desktopGallery\{display:none; \#mobileGallery display: none; 5. Save and validate the file. Correct and retest if necessary. 3. Mobile Version 1. In pacific.css within @media only screen and (maxwidth:768px) which is for the mobile version, 2. Configure the mouse over/select images text so that the select message is displayed but the mouse over is not. \#desktopGallery { display:none; } \#mobileGallery { display:block; } 3. "Remove" the styles for \#gallery a:hover span since the user will not be using mouse over on the mobile version. \#gallery a:hover span \{display:none; 4. Display the images in the galleries. This is needed because the other images are not being displayed in the mobile versions. \#gallery img { display:block; } 5. Save and validate the file. Correct and retest if necessary. Chapter 13 - Web Promotion Task 1: Write a Description. Review the Pacific Trails pages that you created in earlier chapters. Write a brief paragraph that describes the Pacific Trails site. Edit the paragraph down to a description that is only a few sentences and less than 25 words in length. 1. Ensure that the charset and viewport meta tags are coded into each of the webpages. 2. Add a custom meta tag that includes your name as the author.(required for this course) 3. Code a description meta tags (required) Each web page will contain a possibly similar but different description. 4. Create keyword meta tags (optional) > Task 2: Update Webpages with Metatags. 1. Open each page in a text editor 2. Add > tags as described above to the section 3. Save and validate the file. View web pages in the browser. They will not look different, but they are much friendlier to search engines! 4. If needed, correct and retest if necessary