MULTIMEDIA WEB DESIGN CLASS NOTES - …iris.nyit.edu/~dmyrick/dgim759/docs/class10.pdf · In your style.css document, add CSS selectors for the 1st and 2nd figure element The selector

MULTIMEDIAWEBDESIGN CLASSNOTES

1

CLASS :: 10

04.13

2018 3 Hours

AGENDA THE BOX MODEL REVIEW :: EXAMPLE: Styles applied to an element CSS SELECTORS FOR ELEMENTS, ID, CLASSNAMES :: Review ----------------------------------------- Exercise --------------------------------------------------- STYLING HOMEPAGE [ PART II ] ELEMENT :: <header> hero image OR background video ELEMENT :: <figure> [ default layout vs. floating ] :: <figcaption> SELECTING CHILD ELEMENTS :: <a> // Setting Up a Ghost Button with A Border Radius PSEUDO SELECTOR, ID NAMES :: Section [ nth-of-type pseudo selector ] :: Positioning Element within a Parent Element [ #pic, #bio ] :: Selecting Child Elements of Element with an ID name [ #story h2, #story p, # story a ]


2

:: Ensure Your Folder Structure is Correct:


3

CSS SELECTORS FOR ELEMENTS, ID, & CLASS NAMES :: How It Works

Basic Rules for Selecting: HTML elements, id names, and class names:

HTML MARKUP CSS SELECTOR

<element> [ Styles element – May occur 1 or more times

per webpage – based on code ] element {property: value;}

<element></element> <element></element>

[ To target the second element, you may use a pseudo selector. The CSS to the right will select

the second element ]

element:nth-of-type(2) {property: value;}

<element id=”name”> Elements with a unique id name

[ Occurring once per webpage ] #name {property: value;}

<element class=”name”> Elements with class name

[ Occurring multiple times per webpage ] .name {property: value;}

NOTE: When assigning id OR class names, be sure to assign a name that is intuitive to the tag/element’s purpose. For instance, if you want an element to contain your bio, you may create a div with the id name of bio. Only one div with the id name of bio may exist per .html page. Here is how a div with the id name of bio would look in the .html file:

<div id=”bio”>

To style the div, with an id name of bio, use the correct selector in CSS. In the example below, the css property and value will make #bio 33% in width:

#bio {width:33%;}


4

STYLING HOMEPAGE [ PART II ] In the exercise to follow, you will style: 1. Your webpage header with a background hero image 2. Your section 1 [WORKS] to include 2 figure elements with nested figcaption elements 3. Your section 2 [BIO] to include a background image & a div with a heading, 2 paragraphs, & a link to your resume or a profile page of your liking

MOCK UP ONE – ELEMENT BREAKDOWN

Draw/Make Notes of HTML5 Element Structure [Based on Mock-Up] :


5

STYLE THE HEADER [ BACKGROUND IMAGE ] SHORTCUT KEY

STEP DESCRIPTION ACTION [Win] [Mac]

1

Add a Background Image to Your CSS selector for the header element

1. Open the style.css document located in your public_html folder. 2. Add the following:

FOR FULL BACKGROUND IMAGE:

ALTERNATIVE:: TO RESIZE BACKGROUND IMAGE:

NOTE: Video Backgrounds will be coded using HTML5, not CSS. 1a

OPTION: Full Width Video in Header

1. Open your index.html document located in your public_html folder. 2. You may copy/paste the video code from your code_video.html file,

and then add the width attribute, followed by 100% for the value. This code will display your existing video at 100% of the browser window size. NOTE: Be sure the video is high resolution to avoid pixilation.

2

Save Document & Preview in Browser

1. Save the index.html and style.css inside of your root folder [ Your root folder is: public_html, NOT code_snippets ]

2. Preview in Browser

[Ctrl+S]

[F12]

[cmd+S]


6

ADD THE FIGURE / FIGCAPTION ELEMENTS [ SECTION ONE - WORKS ] SHORTCUT KEY


1

Add the 4 figure elements to the first section on your webpage

1. Open the index.html document located in your public_html folder. 2. Add 2 figure elements inside your first section element:


7

Add a figcaption and its child elements inside of each figure element

On your webpage, the figure element will contain a background image (previewing your work), plus an element (figcaption) which will appear when when visitors hover over each figure element with their mouse. In order to achieve this, the HTML5 code must be written first:

2

1. Add a figcaption element [plus its child elements] inside of the first figure element on your webpage:

2. Add a figcaption element [plus its child elements] inside of the second figure element on your webpage.

NOTE: <div class=”vert”> will contain all of the text + button in your caption overlay. This element will be styled to contain and vertically align multi-line text/content and is named according to that function. <h2> will be the title of your work. <div class=”description”> will be a brief caption of your work. <a href…> will be the view more button // which will launch a future jQuery gallery.


8

ADD STYLES TO THE FIGURE / FIGCAPTION ELEMENTS SHORTCUT KEY


1

Add Style Rules for the figure elements

1. Open the style.css document located in your public_html folder. 2. Add the following CSS syntax:

width:50%; [ will make each figure element 50% of its parent (section) element’s width ] height:100%; [ will make each figure element 100% of its parent element’s height ] background:red; [ will make each figure element have a red* background ] float:left; [ will allow the figures to line up next to each other instead of default stacking ] text-align:center; [ aligns the text and images on center (horizontally) ] background-repeat:no-repeat; [ will eliminate default repeating of image when used ] background-size:cover; [ will allow future background image to cover the full width/height of each figure ] *Color of your choice (but it will be covered up anyway :^D )

2

Add background images to your figure elements

In your style.css document, add CSS selectors for the 1st and 2nd figure element The selector for each figure (in cascading sequence) is as follows:

Select a different background for each image. Ensure the images folder is located inside of your public_html folder.

Preview In Browser


9

3

Add styles for your figcaption elements

Inside of each figure element is a figcaption element. The figcaption element will serve as a caption for the background image within the respective figure element. When the respective figure element is hovered over, the figcaption element will appear as a transparent overlay with a hyperlink play OR view button, title of the work, & a small caption

position:relative; // required to set up absolute position of <div class=”vert”> background:rgba(0,0,0,.75); // rgba = amount of red, green, blue, alpha channel color:white; // default color of text width:100%; height:100%; // covers the entire figure element when hover opacity:0; // hidden/transparent state (before hover class is applied to element) transition:.25s ease all; // duration = .25 seconds, set to ease in transition, set to transition all properties. NOTE: In order for the viewer to see a transition, an initial property value must be defined in the element selector; then, a new value for a property must be defined (in this case) in the pseudo selector (or hover state). In this example the opacity is set to 0 for all browsers (including the –ms-filter and filter properties required for old versions of Internet Explorer). Next you will create a selector that will change the opacity value of the figcaption when its respective parent element, figure, is hovered over.

3

Change opacity of figcaption when parent element, figure, is hovered over

Add a CSS selector that will target figcaption when figure is hovered over:

NOTE: The new value for opacity is equal to 1 or 100 which means visible without transparency.

4


1. Save the index.html and style.css 2. Preview in Browser

[Ctrl+S] [F12]

[cmd+S]


10

ADD STYLES TO THE FIGCAPTION CHILD ELEMENTS

1

Style <div class=”vert”>

<div class=”vert”> contains the heading, text caption and view more button/link within the figcaption element. Its position must be set to absolute in order for the top property to work. The content will be 50% (halfway) from the top (which vertically aligns content to the center of the figcaption). The width must be set to 100% of figcaption in order for text-align:center to work… Add the following style rules:

2

Style <div class=”description”>

Adds margin to bottom of the description text. (Prevents overlap of button)

3

Style <a> opacity of view photos/play button [buttons/links to future gallery or video]

Original State:

Hover State:

4



[Ctrl+S] [F12]

[cmd+S]


11

ADD THE DIV ID= “PROFILE” & ”BIO” ELEMENT [ SECTION TWO – PROFILE PIC & BIO ] SHORTCUT KEY


1

Add the <div id=”profile”>, <div id=”bio”>, and child elements to the second section on your webpage

3. Open the index.html document located in your public_html folder. 4. Add the <div id=”profile”>, <div id=”bio”>, and child elements inside your

second section [SEE BELOW]:

2


1. Save the index.html 2. Preview in Browser

[Ctrl+S] [F12]

[cmd+S]


12

ADD STYLES THE DIV ID=”BIO” & CHILD ELEMENTS SHORTCUT KEY


1

Add Background Image to the second section element

1. Open the style.css document located in your public_html folder. 2. Add the CSS selector and background image properties/values for

the second section element:

ALTERNATIVE LAYOUT ONLY: NOTE: For Those of You Using The Half and Half Layout,

You may skip the above step of styling the section and add the following to your style sheet:

2

Add same property/value declarations to both the profile and bio div elements

NOTE: Since both the profile and bio div have a class name of “halfway”, both will inherit the above properties and values

3

Style the <div id=”bio”> element

Add the CSS selector and style rules for the <div id=”bio”> element: The styles below will make the set up of child elements vertically align

NOTE: The position:relative; Tells the browsers to accept absolute position placement of child (story) series of elements


13

8



[Ctrl+S] [F12]

[cmd+S]

4

Style the <div id=”story”> element

Style the container <div id=”story”>: This element will contain and position your Name <h2>, Bio <p> <p>, and social media button container <div id=”social”>

5

Style the <h2> element – located inside the <div id=”story”> element

Add the CSS selector and style rules for Your Name - <h2> element:

6

Style the <div id=”story”> paragraph <p> elements

7

Style the <div id=”story”> <a> child element [anchored resume button]

Add the CSS selector and style rules for <div id=”social”><a> element:

NOTE: The width and height are 100px The border radius is 50px. Display black makes the entire circle clickable (instead of just the word resumé) If the border radius is half of the width and height, the radius will create a circle. The line height must equal the height of the div in order to center a single line of text. Float right aligns the circle to the right of the story div


14

Homework

HW-10 DUE :: 04.20

REVIEW ::

1. CSS Basics [DevTips]: https://www.youtube.com/watch?v=tZhmjgLQgXU

2. CSS Selectors [DevTips]: https://www.youtube.com/watch?v=emMO3iCpvrc

3. CSS Properties & Values [DevTips]: https://www.youtube.com/watch?v=4LtwZQ5jxic

4. DEV TIPS: CSS Basics (Part5) — Advanced Selectors: https://youtu.be/oh2JLo2yxCM

5. DEV TIPS: CSS Basics (Part6) — Specificity: https://youtu.be/fy07HYm-geM

6. DEV TIPS: CSS Basics (Part7) — CSS3: https://youtu.be/Qkx3avfK28k

7. DEV TIPS: CSS Floats and Clears Explained: https://youtu.be/xFGBNv2KeVU

8. DEV TIPS: CSS FlexBox Essentials: https://youtu.be/G7EIAgfkhmg

DO ::

Ensure Your Website Header & Two Sections Are Complete (Videos 4-10) URL: http://iris.nyit.edu/~dmyrick/dgim759/finish-line.html#four

SEE HOMEWORK PAGE FOR COMPLETE DETAILS

BRING :: HW-10

1 Class 10 Notes

2 Photoshop Mock-Up Print Out

3 USB/Flashdrive

Documents

MULTIMEDIA WEB DESIGN CLASS NOTES - …iris.nyit.edu/~dmyrick/dgim759/docs/class10.pdf · In your style.css document, add CSS selectors for the 1st and 2nd figure element The selector