multimedia web design class notesiris.nyit.edu/~dmyrick/dgim759/docs/class10v2.pdf ·...

MULTIMEDIAWEBDESIGN CLASSNOTES

1

CLASS :: 11

04.10

2020 3 Hours

AGENDA STYLING HOMEPAGE [ PART II - CONTINUED ] SEE PREVIOUS CLASS NOTES PSEUDO SELECTOR, ID NAMES :: Creating Hover Effects with CSS Selectors [ figcaption & figcaption:hover ] :: Positioning Element within a Parent Element [ .vert ] :: Selecting Child Elements of Element with a name [ .vert h2 >OR> figcaption h2 ] :: Selecting Elements with a Class name [ .description ] --------------------------------------- Exercise --------------------------------------------------- STYLING HOMEPAGE [ PART III ] SELECTING ID & CLASS NAMES + CSS HOVER EFFECTS FOR HYPERLINKS :: Section [ nth-of-type pseudo selector vs. ID Name ] :: Styling Child Elements [ #news-feed, #social-feed, .halfway ] :: Applying .vert Class for absolute positioning of news and social feeds :: Selecting Child Elements of Element with an ID name

[ #news-feed h2, #news-feed p, #news-feed a ] STYLING HOMEPAGE [ PART IV ] SELECTING ID & CLASS NAMES :: Section [ #about ] :: Styling Child Elements [ #profile, #bio, .halfway ] :: Applying .vert Class for absolute positioning of news and social feeds :: Selecting Child Elements of Element with an ID name

[ #bio h2, #bio p ] SELECTING CHILD ELEMENTS/ CSS HOVER EFFECT FOR HYPERLINK :: Setting Up a Ghost Button with A Border Radius [ #bio a ]


2

:: Ensure Your Folder Structure is Correct:


3

STYLING HOMEPAGE [ PART III ] In the exercise to follow, you will code & style: 1. Your section 2 [NEWS FEED & SOCIAL MEDIA FEED]

2. Your section 3 [PROFILE & BIO]

MOCK UP ONE – ELEMENT BREAKDOWN

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


4

ADD THE DIV ID= “NEWS-FEED” & ”SOCIAL-FEED” ELEMENTS [ SECTION TWO ]

SHORTCUT KEY STEP DESCRIPTION ACTION

[Win] [Mac] 1

Add the <div id=”news-feed”>, <div id=”social-feed”>, and child elements to the second section on your webpage

1. Open the index.html document located in your public_html folder. 2. Add the <div id=”news-feed”>, <div id=”social-feed”>, and child elements inside

your second section [SEE BELOW]:

SHOWN ABOVE: [LINE 86] Is pasted from the Lightwidget created for Instagram feeds. To generated Instagram code, go to Embedding-Media notes [ pp.11-13: http://iris.nyit.edu/~dmyrick/dgim759/docs/embedding-media.pdf ]

TWITTER FEED

SHOWN ABOVE: [LINE 86] Is pasted from the Twitter Widget. You may COPY/PASTE code from code_snippets/embed_twitter.html OR go to Embedding-Media notes [ pp.9-10: http://iris.nyit.edu/~dmyrick/dgim759/docs/embedding-media.pdf ] NOTE: The data-width and data-height may be adjusted to meet your design needs


5

2

Save Document & Preview in Browser

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

[Ctrl+S] [F12]

[cmd+S]


6

CHANGE BACKGROUND OF 2ND SECTION [ SELECTING ID=”NEWS” ]

ADD STYLES TO DIV ID=”NEWS-FEED”, ID=”SOCIAL-FEED”, & CHILD ELEMENTS

STEP DESCRIPTION ACTION 1

Add same property/value declarations to both the “news-feed” and “social-feed” div elements

Add the selector for elements with the class name of “halfway”. Add properties and values to ensure each element with the class name of halfway is 50% or (half) of the parent element (in this case the 2nd section) NOTE: Since both the profile and bio div have a class name of “halfway”, both will inherit the above properties and values

width: element will be 50% of the browser window height: element will be 100% of its parent element (the parent element is “news”) float: will float (line up) the divs next to each other instead of stacking as a block element position: relative is needed to set up the absolute position of its child element (“vert”)

2

Add Styles to “news-feed” and its child elements

1. Copy the selectors{ as shown below. 2. Change the value of colors, sizes, and font style properties (as needed)

3

Style the <div id=”social-feed”>

OPTIONAL: If you want to change the background behind your social media feed, Add the CSS selector and style rules for the <div id=”social-feed”> element:

REQUIRED: Adjust the height of the the html element <div id=”vert”> which is nested inside of the div with the id name of “social-feed”. This style declaration will influence the height of your Twitter or Instagram feed.


7

4


Save the index.html Preview in Browser

[Ctrl+S]

[cmd+S]


8

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

STEP DESCRIPTION ACTION [Win] [Mac]

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]


9

6


1. Save the index.html and style.css File > Save All

2. Preview in Browser

[Ctrl+S] [F12]

[cmd+S]

ADD STYLES TO THE DIV ID=”PROFILE” + DIV ID=”BIO” & CHILD ELEMENTS STEP DESCRIPTION ACTION

1

Add Background Image to the profile element

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

NOTE: Ensure the filename matches what is in your images folder. Above, the filename is DOM_FABFIVE1200.gif. You may use your .gif image or profile image of your choice (please ensure it is web optimized)

2

Style the <div id=”bio”> element

OPTIONAL: Style the container <div id=”bio”>: This element will contain your name/business name and narrative

3

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

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

4

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

5

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


10

Homework

HW-11 DUE :: 04.17

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 All 3 Sections In Your Website Are Complete

SEE HOMEWORK PAGE FOR COMPLETE DETAILS

BRING :: HW-11

1 Class 10 Notes

2 Photoshop Mock-Up Print Out

3 All 3 Sections Complete <html> & css{

4 USB/Flashdrive

multimedia web design class notesiris.nyit.edu/~dmyrick/dgim759/docs/class10v2.pdf ·...

Documents