AGENDA :: MULTIMEDIA TOOLS :: CLASS NOTES. INSTALLING FONTS :: Download, Install, & Embed Your Fonts. LECTURE :: Responsive Web Design [RWD]

Size: px

Start display at page:

Download "AGENDA :: MULTIMEDIA TOOLS :: CLASS NOTES. INSTALLING FONTS :: Download, Install, & Embed Your Fonts. LECTURE :: Responsive Web Design [RWD]"

Mitchell McKenzie
5 years ago
Views:

1 CLASS :: Hours AGENDA INSTALLING FONTS :: Download, Install, & Embed Your Fonts LECTURE :: Responsive Web Design [RWD] DOWNLOAD ASSETS [ CSS ] :: Media Query [rwd.css] ADD HTML META TAG & IE SCRIPT [ HTML ] :: Add Meta Tag for Viewport (inside of head element): :: Add Script that renders HTML5 elements for older versions of Internet Explorer ADD & EDIT MEDIA QUERIES [ CSS ] :: Open rwd.css :: Copy all of the code :: Paste into your existing style.css document :: Edit Media Queries to match your site s theme/layout OPTIMIZE IMAGES FOR BETTER PAGE LOAD TIME [ Dw, Ps ] 1

EMBED FONTS :: Embed Fonts & Style Text If you wish to have a non-default web font for your website, you may follow these steps:: 1. Go to dafont.com or fontsquirrel.com 2.

2 EMBED FONTS :: Embed Fonts & Style Text If you wish to have a non-default web font for your website, you may follow these steps:: 1. Go to dafont.com or fontsquirrel.com 2. Install the font on your local machine [ How to Install Fonts on Mac & PC ] 3. Go to 4. Click font-face, then choose SELECT FONT(S): 5. Click Choose Files Button 6. Navigate to your Downloads, Desktop, or System Fonts Folder [Font Book] 7. Select all versions [regular, bold, italic] of the font you will use 8. In the lower left corner of the pop-up window, double-click the file(s) icon (shown will number of files you selected: 2

9. Your fonts should appear in the drop zone: @fontface is a set of css style rules that will allow you to use the font of your choice when referenced in HTML & CSS. (SEE EXAMPLE BELOW) 10.

3 9. Your fonts should appear in the drop is a set of css style rules that will allow you to use the font of your choice when referenced in HTML & CSS. (SEE EXAMPLE BELOW) 10. Click Done 11. Choose SAVE YOUR FONTS 12. Click My Device [In the Left Column], then the Download All Attachments Button: 13. Extract or Double-Click your.zip file, then open the extracted file 14. Open the converted-files folder then select all the files: 15. Copy and Paste the files into your public_html folder 16. In Dreamweaver, Open font.css 17. Copy Code from font.css and paste into your style.css file [at the top of the document ] 18. See Next page for assigning fonts to your webpage 3

4 HTML CODE HOW TO ASSIGN FONT FAMILY TO ELEMENT CSS CODE 1. Save the newly edited style.css 2. The code below will ensure your font displays in multiple browsers and platforms <body> <p> A bunch of text </p> <h1>gallery</h1> </body> PASTE CSS CODE body{font-family: Antonio-Bold, sans-serif; font-size:1em;} h1{font-family: Antonio-Bold, sans-serif; font-size:35px;} NOTE: You you downloaded different versions of the font, you will have to repeat the process 4

5 RESPONSIVE WEB DESIGN REFERENCES: Viewport URL:: Standard Device List [ for queries ] URL:: LECTURE/DEMO: SETTING UP THE FIRST only screen and (min-width: 300px) and (max-width: 768px) { } Above is a CSS [ media query ] selector set-up for applying styles to devices between 300px and 768 pixels wide. RULES FOR QUERIES: 1. Queries are used to change the property values of pre-existing styles (to correctly display in smaller/larger devices than originally coded) 2. Media Queries are placed at the end of your existing css document 3. You may add as many queries as you wish and change the min-width & max-width values (based on devices) 4. The new style rules must be placed between the opening { and closing } curly braces In this class, we will be testing your site with the set-up in the images to follow; however, you may add an orientation to the query (i.e. portrait or landscape) to further influence your site s look, and target the device width exclusively: only screen and (min-device-width: 300px) and (max-device-width: 768px) and (orientation: portrait) { FOR DEVICE WIDTHS BETWEEN 300px 768px only screen and (min-device-width: 300px) and (max-device-width: 768px) and (orientation: landscape) { /*ADD NEW STYLE RULES HERE*/ /*ADD NEW STYLE RULES HERE*/ } } 5

6 DOWNLOAD ASSETS [ CSS ] :: Media Query ADD HTML META TAG & IE SCRIPT [ HTML ] :: Add Meta Tag for Viewport (inside of head element): <meta name="viewport" content="width=device-width, initial-scale=1.0"> :: Add Script that renders HTML5 elements for older versions of Internet Explorer  ADD & EDIT MEDIA QUERIES [ CSS ] :: Open rwd.css: :: Copy all of the code :: Paste into your existing style.css document [ at The END of the style.css document] 6

7 For PHONES & HANDHELDS [ portrait ] Styles for the header, nav, & logo element :: Styles for Works Section :: Styles for About/Bio Section :: Styles for Footer :: Styles for Works Page :: 7

8 Media Query Selector For PHONES & HANDHELDS [ landscape only screen and (min-device-width: 300px) and (max-device-width: 768px) and (orientation: landscape) { } /*ADD NEW STYLE RULES only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) { } Media Query Selector For ipad /*ADD NEW STYLE RULES HERE*/ NOTE: You may also create a query for portrait and landscape mode for ipads. Test first to see if you wish to add those options For Laptops EDIT STYLE DECLARATIONS selector { property:value; } TO YOUR LIKING TEST IN BROWSER UPLOAD ALL FILES TO IRIS 8

TEST ON HANDHELD DEVICE [ Phones/iPads/etc.

Open your images folder 3. Right-Click > the image to optimize 4. Choose Open With Adobe Photoshop CC 2017.app 5.

In the pop-up panel, ensure you choose the same file type [.jpg,.png,.gif ] as the original image in your site 7.

9 TEST ON HANDHELD DEVICE [ Phones/iPads/etc. ] OPTIMIZE WEB IMAGES Lessen your page load time by optimizing your images In Dreamweaver: 1. Go to Your File Panel 2. Open your images folder 3. Right-Click > the image to optimize 4. Choose Open With Adobe Photoshop CC 2017.app 5. In Photoshop, Go to the Menu Bar > File > Export > Save For Web (Legacy) 6. In the pop-up panel, ensure you choose the same file type [.jpg,.png,.gif ] as the original image in your site 7. You may lessen the quality if your file size is humongous [ NOTE: Don t confuse File Size with Image Size ] 8. Choose Save > Replace the existing File > Close Photoshop 9. In Dreamweaver, refresh the file panel and view the new file size 9

10 HW-14 Homework DUE :: REVIEW :: Class 14 Notes DO :: Prepare for Final: 1. Header Image or Video Header 2. Working Image or Video Gallery 3. Bio with Background Picture 4. DEMO Working Contact Form 5. DEMO navigation [open/close buttons], links, and scroll BRING:: Your Website & A Flash Drive SEE HOMEWORK PAGE FOR COMPLETE DETAILS 10

AGENDA. :: Add Meta Tag for Viewport (inside of head element): :: Add Script that renders HTML5 elements for older versions of Internet Explorer

AGENDA. :: Add Meta Tag for Viewport (inside of head element): :: Add Script that renders HTML5 elements for older versions of Internet Explorer CLASS :: 14 12.10 2018 3 Hours AGENDA LECTURE :: Responsive Web Design [RWD] DOWNLOAD ASSETS [ CSS ] :: Media Query [rwd.css] ADD HTML META TAG & IE SCRIPT [ HTML ] :: Add Meta Tag for Viewport (inside