Web Design/Developemt: Storyboarding, Nested Lists, Cascading Style Sheets, Navigation Bars, and Repeated Images

User Generated

k_Fnqvn

Programming

Description

Part 1: (I have attached 1 screenshot that show the finished example)

  1. Create a storyboard for a four (4) page Website (one (1) home page and three (3) sub pages) and one (1) Cascading Style Sheet (.css). Using Microsoft Word, Microsoft Visio, or Dia, create a diagram of the layout and navigation structure.
  2. Explain the effects that the Cascading Style Sheet (.css) will have on the Web page. There must be a minimum of two (2) changes. Be sure to include detail. (Example: The Cascading Style Sheet (.css) will make the background color grey and change all H1 font to blue.)
  3. Describe what the home page will look like. (Will it have text? Will it have headings? Will it have an image? Etc.)
  4. Describe what the first, second, and third sub pages will look like. (Will they have text? Will they have headings? Will they have images? Etc.)

Deliverables: Storyboard Document depicting diagrams and descriptions (Web pages not necessary).

Part 2: (I have attached 2 screenshots that show the finished example)

  1. Re-create the sample Web pages listed below with nested ordered lists and nested unordered lists. (This Web page will be reused for each part below). (As shown in Figure 1.)
  2. Create the Web page from number 1 with silver background color set by a Cascading Style Sheet (.css). (As shown in Figure 2.)
  3. Create the Web page from number 1 with silver background color and Comic Sans MS font set by a Cascading Style Sheet (.css). (As shown in Figure 3.)
  4. Re-create the Web page set from number 1 with Silver background color and Comic Sans MS font set by a Cascading Style Sheet (.css). Then, using in-page tags to override the CSS, set only the font of the sentence “Here is an Unordered list with several levels of sub-lists” to red, Arial font (different than the rest of the page). (As shown in Figure 4.)

Deliverable: Three (3) Web pages and two (2) Cascading Style Sheets (.css)

Part 3: (I have attached 2 screenshots that show the finished example)

  1. Create a home page with navigation bar to the three (3) pages with images listed below and a Cascading Style Sheet (.css) for bisque color and Arial text.
  2. Create a “single image” page with a Cascading Style Sheet (.css) for background image, bisque color, and Arial text.
  3. Create a “top line image” page with Cascading Style Sheet (.css) for background image, bisque color, and Arial text.
  4. Create a “left side image” page with a Cascading Style Sheet (.css) for background image, bisque color, and centered Arial text.


Deliverable: Four (4) Web pages (the home page and three image pages) and four (4) Cascading Style Sheets (.css) (one for each page

DO NOT FORGET TO REVIEW THE ATTACHED SCREENSHOTS ATTACHED

Unformatted Attachment Preview

Eile Edit View Favorites Tools Help * Google | Search - More » Sign in 4. Safety Tools Page A style sheet is used to change the background color to bisque, the text to Arial and to repeat a single image horizontally as a background Clusers Cindy Documents_Stray D-Cx Club Pogo: Dice. Cynthia Orth-0. Mary Smith Ele Edit View Favorites Tools Help x Google Search More >> Blackboard Learn suggested Sites Page Safety Tools Sign In A style sheet is used to change the background color to bisque to center the Arial style text and to repeat a single image vertically as a background Finished Example *CAUTION: This screen shot may not be an exact match to the assignment. Figure 1 Х C:\Users\Cindy box Mary Smith Eile Edit View Favorites Tools Help This is a page without css applied Notice that the page is white and the text is black These are the default settings for the page Here is an Unordered list with several levels of sub-lists • This is level one • This is also level one This is level two Again in level two This is level three Again in level three I am back to level two again I am now back to level one This is the last line of the nested unordered lists Here is a similar ordered list 1. Level one 1. Level two 1. Level three 2. Level three again 2. Level two again 3. Level two once more 2. level one again 3. Level one once more Back to regular text Figure 2 The Silver background Here is an Unordered list with several levels of sub-lists This is level one This is also level one This is level two Again in level two This is level three Again in level three - I am back to level two again I am now back to level one This is the last line of the nested unordered lists Figure 3 The Silver background and Comic Sans MC font Here is an Unordered list with several levels of sub- lists • This is level one . This is also level one - This is level two Again in level two . This is level three • Again in level three . I am back to level two again . I am now back to level one This is the last line of the nested unordered lists Here is a similar ordered list 1. Level one 1. Level two 1. Level three 2. Level three again 2. Level two again 3. Level two once more 2. level one again 3. Level one once more Back to regular text Here is a similar ordered list 1. Level one 1. Level two 1. Level three 2. Level three again Figure 4 The Silver background and Comic Sans MC font Here is an Unordered list with several levels of sub-lists • This is level one • This is also level one This is level two Again in level two . This is level three . Again in level three I am back to level two again • I am now back to level one • This is the last line of the nested unordered lists Here is a similar ordered list 1. Level one 1. Level two 1. Level three 2. Level three again 2. Level two again 2 Finished Example *CAUTION: This screen shot may not be an exact match to the assignment. Cascading Style Sheet Home Page Page 1 Page 2 Page 3 Finished Example "CAUTION: This screen shot may not be an exact match to the assignment. Sign In la cuUsers Cindy\Documents Stray D-Cx Cynthia Orth-0. Mary Smith Mary Smith Elle Edit View Favorites Tools Help x Gogle More >> Blackboard Leam Suggested Sites Bages Safety Tools 1 Single Background Image Backgroung Image Across Top Background Image DownLeft Side Home Page This page uses a Horizontal navigation bar and also a style sheet to change the background color to bisque and the text to Arial 0 C:\Users Cindy.cox B8 Club Po... Cynthia Mary ... Eile Edit View Favorites Tools Help x Google Search More>> Sign In Page Safety Tools A style sheet is used to change the background color to bisque, the text to Arial and to display a single image as a background
Purchase answer to see full attachment
User generated content is uploaded by users for the purposes of learning and should be used following Studypool's honor code & terms of service.

Explanation & Answer

https://dri...


Anonymous
Great! 10/10 would recommend using Studypool to help you study.

Studypool
4.7
Trustpilot
4.5
Sitejabber
4.4

Related Tags