讲解 CS006: Lab 3 Retro CSS Webpage讲解 R编程

Section Number	Days & Time
001	MWF 8:00-8:50 AM
002	MWF 10:00-10:50 AM
003	MWF 12:00-12:50 PM

Example -  If your NetID was klynn001 then your lab 1 folder name would be one of the following based on your lecture section.

kflynn001_lab3_section001, kflynn001_lab3_section002,  or kflynn001_lab3_section003.

Part 1: Color Palette

1. Download the following files from the folder the lab3_specs is located in. Then upload these files to your lab3_section00# folder on AWS  Cloud9:

index.html, elements.css, profile.css, Thanos_happy.jpg, Thanos_serious.jpg. NOTE: You will NOT make any edits to profile.css.

2. Once you have all files uploaded to the lab3 folder, Preview index.html. You should see a similar rendering as the webpage in the image below.

Webpage Color Palette

1. Current Webpage colors

The web page currently consists of five colors. Two dark primary colors (purple, green), one bright primary color (orange), and a lighter shade of colors green and orange. Each color has an encoding in rgb format below, e.g., purple is rgb(88,38,128). There is also a web page ColorHexa for each color that has the hexadecimal color encoding. Visit some of the links below to familiarize yourself with this web resource.

dark purple  https://www.colorhexa.com/582680 

         rgb(88,38,128)

         green  https://www.colorhexa.com/006e00 

         rgb(0,110,0)

lime green   https://www.colorhexa.com/91d060 

                                  rgb(145,208,96)

      orange   https://www.colorhexa.com/ffa500

         rgb(255,165,0)

          light orange   https://www.colorhexa.com/f8eadb 

         rgb(248,234,219)

2. Select a Color Theme (Five-color Palette)

How aesthetically pleasing your webpage looks is important. You are required to use a color palette that has a cohesive look and feel. Below are four websites that contain acceptable color schemes. Choose a color-scheme from one of the four sites listed below. If you choose a scheme with less than 5 colors, create additional colors by using a different shade of one of the colors already in the scheme.

● Visme - 50 Gorgeous Color Schemes From Stunning Websites

● Shutterstock - 30 Color Palettes for Websites – Choose Your Website Colors

● Canva - Best website color scheme examples

● Coolors -  The Super fast Color Palettes Generator

COLOR REQUIREMENTS: Best website color scheme examples | Canva. Students are required to research and select a color scheme from one of the websites provided. Penalties will be applied for the following::    ● Color-schemes that clash or do not use a full 5 color palette. ● Reuse any of the 5 colors provided in elements.css. ● Use of hexadecimal color codes. For this lab, students must use RGB decimal color codes only: e.g. rgb(255, 88, 12). ● Minor increments or decrements  to the existing rgb decimal values for colors provided in starter code. For example: rgb(128,128, 64) is changed to rgb(132, 132, 60).

3. Once you have selected your colors, record each color’s code in RGB format: e.g., rgb(234,45,22). If you originally have the hexadecimal value, you need to get the RGB value. Copy and paste the hex color codes into a text file (name it colors.txt) for convenience.

Example: to choose the green color, rgb(0,110,0), used above, located at https://www.colorhexa.com/006e00, scroll down to see the following view. You can click on one of the lighter shades to select that color.  

Replace Website Colors

Replace each of the colors in elements.css with the colors you selected. It is good practice to perform. one color change at a time to completion, testing the website after each change, by preview. If a mistake is made, it is easier to find and fix for a single color.

1. Replace purple: Change the rgb value for purple with your color 1.

2. Replace green: Change the rgb value for green with your color 2.

3. Replace orange: Change the rgb value for orange with your color 3.

4. Replace lime green: Change the rgb value for lime green with your color 2 (4) (light shade).

5. Replace light orange: Change the rgb value for light orange with your color 3 (5) (light shade).

An example outcome for the div style. rule in elements.css after color replacement would be:

● rgb(0,110,0)in border and border-bottom: replaced with student’s rgb color 2 (green replacement)

● rgb(248,234,219) in background-color: replaced with student’s rgb color 5 (light orange replacement)

 

Note: there is a light green in the body style. rule. Change it to the same color you chose to replace lime green (rgb color 4).

 

For the header CSS rule below, three declarations need new colors: border (replace purple), border-bottom (replace purple), background-color (replace light orange). Be sure to check the other style. rules (e.g. h1, nav, and nav a.) in elements.css. Not all style. rules therein are present in lab specs.

 

Part 2: Duotone

Duotone color filtering combines two colors to represent an image. Examples are sepia and monochrome. Currently, if you hover your mouse over the images in the webpage, the image will change to monochrome. It uses black and white as color filters. The code to choose the two colors is in index.html (see below). Check this now, place your mouse over Thanos’s image in preview mode.  Note: to see the duotone color effect, you must hover over the image in the browser with a mouse.

1. Pick two colors you want to blend the images with. These colors do not have to be from your color palette. Replace the column on the  left, (0.00000000, 0.000000000, 0.00000000) with rgb percentages of a color of your choice. The color is currently black, since rgb(0,0,0),

Duotone Contrast: One duotone color should be dark and the other light, since one color will be used for shadows and the other for the lighter portions of the image. Points will be deducted for duotone color selection if there is not high enough contrast between the two colors and the image content is obscured or difficult to see clearly. See Duotone Color Contrast Comparison for an example of good versus poor duotone color contrast

2. Replace the column on right, (1, 1, 1) with the rgb percentages of the second color of your choice. The color is currently white, since rgb(255,255,255).

For example, to use lime green from our current webpage, one can replace the 1,1,1 column with the percentage for lime green. The adjusted code is listed below with lime green. To compute a color’s rgb percentages, divide each color’s integer value divided by 255.

rgb(145,208,96); /* lime green, https://www.colorhexa.com/91d060 */

Red component: 145/255 = 0.568627451

Green component: 208/255 = 0.815686275

Blue component: 96/255 = 0.376470588

If we hover over the image of Thanos on the right in index.html, you can see that the image changes color to green mixed with black. Which is exactly the two colors above, since black has rgb(0,0,0). The color percentages for black in the matrix above are all 0.0:

Red component: 0/255 = 0.000000000

Green component: 0/255 = 0.000000000

Blue component: 0/255 = 0.000000000  

Duotone by ShapeFactory:

What two colors should you choose for the duotone portion of the lab? Check out this resource where you can try different colors and adjust the color values until you find what meets your expectations.https://duotone.shapefactory.co

Personalize Content:

1. Change h1 content in the header to be  your name “Firstname Lastname:: Homepage”.

2. Change title tag content to be: “Firstname Lastname: Homepage”

3. Add your own About Me: paragraph from a previous lab.

4. Replace the paragraph content for the <h3>My Hometown</h3> with your paragraph from the previous lab.

5. Replace the paragraph content for the <h3>Interests and Hobbies</h3> with your paragraph from the previous lab.

6. Replace the paragraph content for the <h3>UCR</h3> with your paragraph from the previous lab.

7. Replace the name and email in the address element with your own.

8. Add images of yourself to the website. Upload two images to your lab 5 folder on AWS. Then change the value of the img tag src attributes to have the value of the filenames of your two images.Choose a font that appeals to you. Currently the font is Fjalla One. Use one of the other 5 fonts below by copying and pasting that line at the bottom of the body rule.

Part 3: Customize hyperlink colors

1. In index.html, inside of the <head>...</head> element and inside a <style>...</style> element (add a style. element), add the following rules to this style. element.

 

    a {

            text-decoration: none;

            text-shadow: 1px 1px 1px #000000;

        }

 

        a:link {

            color: green;

        }

 

        a:visited {

            color: green;

        }

 

        a:hover {

            color: red;

        }

 

        a:active {

            color: yellow;

        }

The first rule a { text-decoration: none; text-shadow: 1px 1px 1px #000000; } gives some shadow to text and turns off underlined display for links.

The (:link, :visited, :hover and :active) are called pseudo classes. They allow for styles to be applied based on an HTML element’s state. Namely: a link not visited (a:link), a link already visited (a:visited), a link hovered over by a mouse (a:hover), and a link being actively (a:active) clicked on . Rather than using the default browser colors and behaviors for hovering over, clicking on, and visiting a link, we will choose custom colors.

2. Change color value in a:link to a color that will stand out from the rest of the text in the body of the webpage. This is for hyperlinks not yet visited in the browser.

3. Change color value in a:visited to a color that is different from a:link. This is for hyperlinks already visited in the browser..

4. Change color value in a:hover to a color that compliments the color you chose for the text in your paragraph About Me and sections on: My Hometown, Interests and Hobbies, and UCR. When a link in the webpage is hovered over, the text will change to this color.

5. Change the a:active color to red. Must be  in rgb decimal format. From the rubric for this lab.
-15 does not use rgb decimal color codes throughout the lab

    e.g., rgb(255,128,0)

6. Save the file. From the menu, File->Save. Or CTRL-S on Windows. Command-S on Mac.  Preview.

7. Open index.html in Preview mode. For the three colors for linked text on the image of the webpage on the next page of these specs, the following CSS rules were used. The mouse was hovered over the link for “ACADEMICS.” in the image:  

● a:link { color: rgb(255,83,73); }      /* red-orange */

● a:visited { color: rgb(255, 165, 0); } /* light orange */

● a:hover { color: rgb(255, 255, 255); } /* white */

Part 4: Vertical Navigational Menu

1. Open index.html in edit mode.

2. Add   <ul ></ul> around <nav>..</nav>.  (See image above)

3. Enclose each of the <a>...</a> elements in a list item (<li></li>) element. (See image below)

4. Next add the following CSS declaration to list-style-type: none;  to <ul ></ul>. After the style. attribute should be This will hide the bullets in the list or have a list-style. on none.

5. Open elements.css in edit mode.

6. Add the following two declarations to the nav style. rule in elements.css.

○ font-size: 18px;

○ text-align: left;

7. Save the file. From the menu, File->Save. Or CTRL-S on Windows. Command-S on Mac.

8. Open index.html in Preview mode.

9. Your navigational menu should look like the image below (with different colors and font style).

Part 5: background-image, transparency, and gradient 

1. Choose an image you would like to add for style. to the webpage. Upload the image file to your lab3 folder. Then open the image in Cloud9 (double click) for editing.

2. Resize the image to have a width of 1024 pixels. Be sure that the Maintain Aspect Ratio box is checked. This will ensure that the image keeps its appearance and scales correctly in the horizontal and vertical directions. See image below.

3. Save the file. From the menu, File->Save. Or CTRL-S on Windows. Command-S on Mac.

4. Open elements.css in edit mode. Add the declaration for background-image to the nav {.....}

style. rule. Copy-and-paste so you get the syntax correct. You treat the entire block of code below as a single CSS declaration. To learn more about linear-gradient go here: https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient()

background-image: linear-gradient(

        to right,

        rgba(88, 38, 128, 0.301),

        rgba(40, 180, 133, 0.699)),

        url("saturn.png");

5. Replace saturn.png with the name of the image file you uploaded.

For steps 6 and 7. Use two of your five colors chosen above.

6. Replace first color: Change the RGB values (88, 38, 128) for the first rbga() color above. You will use the three numbers from 0-255 that represent the red, greed, and blue components of color for a pixel. Do not change the a-value of 0.301.

7. Replace second color: Change the RGB values (40, 180. 133) for the second rbga() color above. Do not change the a-value of 0.699.

8. View image and gradient - open index.html in preview mode. A linear gradient background-image for the body element. The linear gradient of purple-to-green (your color1-to-color2) from left-to-right should also be visible (see below). The right image has been hovered over.

Lab 3 Turn-in:

Students will upload a single .zip file that contains: index.html, profile.css, elements.css, Thanos_happy.jpg, Thanos_serious.jpg, student’s two personal image files and background image file in .png, .jpg, or .jpeg format. Follow the instructions below.

1. Configure AWS to download .zip file as default

○ Instructions for this are at the end of this document in: Cloud9 - zip file set-up.

2. Download .zip file from AWS   

● Select your lab 3 folder (in Cloud9) -  for example:  kflynn_lab3_section001. For Windows users right-click, for Mac press and hold down two fingers on the trackpad, until a drop down menu opens.

● Select Download from the menu. This will download a zipped archive file to your local machine. Warning: Do not download your entire home folder. Only your lab 2 folder

● If a student’s NetID  was  kflynn001, then the .zip file downloaded would be one of the following file names, depending on the lecture section.

■ kflynn001_lab3_section001.zip

■ kflynn001_lab3_section002.zip

■ kflynn001_lab3_section003.zip

3. Test HTML code from downloaded .zip file on local machine   

● Locate the .zip  file you downloaded from Cloud9 in the previous step.

This is typically in your local machine's Downloads, Desktop or Documents folder, unzip it (extract the lab 3 folder and its contents into a folder in the same folder the .zip file is currently in).

● Unzip the downloaded .zip file:  

For Windows OS: https://www.howtogeek.com/668409/how-to-zip-and-unzip-files-on-windows-10

For Mac OS: https://www.howtogeek.com/672240/how-to-zip-and-unzip-files-and-folders-on-mac/

● Verify unzipped files are correct:

○ Open index.html in a Chrome web browser. You can refer to the sample solution. Your web page should appear different but have the same functionality. You only need to create an index.html file. Not an academics.html, professional.html, or personal.html.

■ Does your background image display?

■ Do your personal images display?

■ Did you use two different colors for the DUOTONE? Students need to replace both the white and black colors.

■ Did you choose at least 5 colors to use on your web page?

■ Did you choose a color palette from the resources provided?

■ Did you replace the colors in the background image gradient?

■ Did you replace all colors from the example, or at least repurpose some colors?

■ Points will be deducted for: not using RGB colors and not replacing colors as directed.

■ Are your two images roughly the same size and shape on the page?

4. Submit .zip file to Canvas:

○ Correct code in previous step -  If your code passed all tests in the previous step (Test HTML code from downloaded .zip file on local machine), upload the .zip file on your local machine to Canvas Lab 3 turn-in.

If there were errors and you still have time before the deadline, go back to Cloud9 and continue working on lab 3. Seek help in office hours if you get stuck. Then repeat this Lab 3 Turn-in process from step 2 (Download .zip file from AWS).  

 

 

 

 

index.html: sample solution (with original colors)

 

 

Duotone Color Contrast Comparison

 

Duotone image with good color contrast:	Duotone image with poor color contrast:

 

 

Cloud9 - zip file set-up

1. Open Cloud9 in AWS. Refer to the screen image below when completing the following steps.

2. Click on the Cloud9 icon (shape of a cloud) in the upper-left corner of the page (above home folder).

3. From the menu that opens select Preferences. This will open the Preferences settings menu in Cloud9.

4. In Preferences select User Settings (blue text).

5. In the User Settings section, select Tree and Go Portal (blue text below).

6. In the Tree and Go Portal section go to Download File As and change the drop down menu item to zip. By default the setting is auto (see menu below: auto, tar.gz, zip).

7. Click on the Cloud9 icon (shape of a cloud) in the upper-left corner of the page (above home folder).

8. From the menu that opens select Preferences. This will close the Preferences settings menu in Cloud9.