Iris.nyit.edu
CLASS :: 12
|05.04 |
|2018 |
3 Hours
| AGENDA |
| |
|CREATE A WORKS PAGE [ HTML ] |
|:: Open index.html |
|:: Save As… works.html |
|:: Edit works.html to modify header, 3 divisions for works, then add your content |
|:: Edit index.html to have proper hypertext references to your works |
|:: Test hyperlinks in your browser |
| |
|EMBEDDING FONTS [ Font Files & CSS font-family ] |
|:: Online Font Converter |
|:: ADD font-family css code to style.css |
| |
|RESPONSIVE WEB DESIGN [ CSS ] |
|:: Viewport & Basic Syntax for Devices |
|:: ADD rwd.css code to the end of your existing style.css document |
| |
|UPLOAD FILES To SERVER |
| |
|CREATE A works.html PAGE [ HTML ] |
| |
|:: Open index.html and Save As… works.html |
| |
|:: Edit element [ Add class name as shown ]: |
| |
|[pic] |
| |
|:: Edit navigation menu [ Edit Hyperlinks ]: |
|[pic] |
| |
|NOTE: If you wish for the works link to take you back to the homepage works thumbnails you may edit the hyperlink to appear as works. If you wish for the contact link to take you to the bottom of the same page, you may edit the hyperlink to appear as |
|contact |
| |
|:: Edit 1st element [ Add class name ]: |
| |
|[pic] |
|:: EXAMPLE OF SINGLE LARGE IMAGE WITH TITLE & CAPTION |
|[pic] |
|1. DELETE elements |
| |
|[pic] |
|NOTE: [ID names will match the works.html#hyperlinks of the view more buttons |
|(located on your homepage)]. Above are coded example images. Replace the example image paths with |
|your own images |
| |
|2. CHANGE to |
|3. ADD element tags |
|4. DELETE element tags |
|5. EDIT to include details of the image shown |
| |
|:: EXAMPLE OF YOUTUBE EMBEDDED VIDEO, TITLE, & CAPTION |
|[pic] |
| |
|[pic] |
|1. DELETE element tags |
|2. CHANGE with tag |
|3. ADD Embed code (for Vimeo/YouTube), or Original video source code |
|4. DELETE element tags |
| |
|:: SERIES OF THUMBNAIL IMAGES WITH HYPERLINKS TO A LARGER IMAGE |
|[pic] |
| |
|[pic] |
|1. DELETE element tags |
|2. CHANGE with tag |
|3. ADD [hyperlink] & [thumbnail] elements |
|4. DELETE & elements |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
|:: SERIES OF ELEMENTS CONTAINING THUMBNAIL IMAGES, TITLE, & CAPTION |
|[pic] |
| |
|[pic] |
|1. Replace element tags with tag, plus class name |
|:: Select the entire element [ DELETE ENTIRE ELEMENT ] |
|EDIT index.html PAGE |
| |
|:: Edit Hyperlinks to your “view more” buttons (IF NEEDED) |
|[ This will link your view more buttons to named anchors on your work.html page ] |
|[pic] |
|NOTE: Class example images are coded above. Use your own image paths |
|TEST IN BROWSER |
|:: Preview your site in Google Chrome |
|:: Test all of your hyperlinks… |
|CSS QUIZ-ISH |
| |
|:: How do you select an element without an id or class name? |
|:: How do you select an element with an id name? |
|:: How do you select an element without a class name? |
| |
|Style the following: |
| |
|HTML ELEMENT |
|works.html |
|CSS STYLE PROPERTY/VALUE |
|style.css |
| |
|1 |
| |
|ADD selector for HTML Element |
|ADD background image |
|Edit the height [Optional] |
| |
|2 |
| |
|ADD selector for HTML Element |
|Change the height to auto |
|Edit the background color [Optional] |
| |
| |
|SINGLE LARGE IMAGE stylesheet SET-UP |
|[pic] |
| |
|3 |
| |
| |
|ADD selector for HTML Element |
|ADD 5% padding |
|Align text to the center |
| |
| |
|4 |
| |
| |
|ADD selector for HTML Element |
|Make width of images 90% or less of browser window |
| |
| |
|5 |
| |
|ADD selector for HTML Element |
|Change font-size to 3em or less [Optional] |
|Change font color [Optional] |
| |
|6 |
| |
|ADD selector for HTML Element |
|Change font-size to 2em or less [Optional] |
|Change width to 90% or less |
|Change margin [ make sure left and right margins will equal 100% when added to the width. i.e. if you have a width of 100% the left margin should =5%, |
|and the right margin should = 5% --- margin:10px 5% 0 5% --- ] |
| |
| |
| |
| |
| |
| |
| |
|VIDEO, TITLE, & CAPTION stylesheet SET-UP |
|[pic] |
| |
|7 |
|Repeat the same steps for |
| |
| |
|SERIES OF IMAGES with HYPERLINKS stylesheet SET-UP |
|[pic] |
| |
|8 |
| |
|ADD selector for HTML Element |
|Align text to the center |
|ADD padding: top&bottom 7%, left&right 0 |
|Edit background color [Optional] |
| |
| |
|SERIES OF IMAGES with HYPERLINKS stylesheet SET-UP |
|[pic] |
| |
|9 |
| |
|ADD selector for HTML Element |
|Float the elements left |
|Adjust the width to accommodate the number of elments you wish to line up in a row. Keep in minde you’re your browser is 100%... if you wish to have 4 |
|elements in a row the width of each floating element would be 25 minus the amount of left and right padding. i.e. |
|width:23%; padding:7% 1% 0 1%; |
| |
|10 |
| |
|ADD selector for HTML Element |
|Ensure the maximum width is 100% |
| |
|11 |
| |
|ADD selector for HTML Element |
|Align text to the center |
| |
|12 |
| |
|ADD selector for HTML Element |
|Justify text [Optional] |
| |
|UPLOAD TO IRIS |
| |
|:: Define Your Site At Home [Page 1-3] + [Page 7] |
|URL: |
| |
|:: Upload Site or Files to Your Iris Server Space |
|URL: |
| |
|CHANGING YOUR WEBSITE’s FONT w/ WEB SAFE FONTS |
|:: To change your entire website’s font, you will go to your style.css document and type in the selector for the body element. Inside of the curly |
|brackets, you will add the font-family property, then choose a web-safe font from the drop-down menu. |
| |
|body { font-family : “Proper font name”, “sans-serif”; } |
| |
|SEE LIST OF WEB SAFE FONTS: |
|EMBEDDING CUSTOM FONTS |
| |
| |
| |
|:: Embed Fonts & Style Text |
| |
|If you wish to have a non-default web font for your website, you may follow these steps:: |
| |
|Go to or |
|Install the font on your local machine [ How to Install Fonts on Mac & PC ] |
|Go to |
|Click font-face, then choose SELECT FONT(S): |
|[pic] |
|Click “Choose Files” Button [pic] |
|Navigate to your Downloads, Desktop, or System Fonts Folder [Font Book] |
|Select all versions [regular, bold, italic] of the font you will use |
|[pic] |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
|In the lower left corner of the pop-up window, double-click the file(s) icon |
|(the icon at the BOTTOM LEFT will show number of files you selected (“3 files selected”): |
|[pic] |
| |
| |
| |
| |
| |
|Your fonts should appear in the drop zone: |
|[pic] |
| |
|@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) |
|Click “Done” [pic] |
| |
|Choose “SAVE YOUR FONTS” |
|[pic] |
| |
|Click My Device [In the Left Column], then the “Download All Attachments” Button: |
|[pic] |
| |
|Extract or Double-Click your .zip file, then open the extracted file |
| |
| |
| |
| |
| |
| |
|Open the converted-files folder then select all the files: |
|[pic] |
| |
|Copy and Paste the files into your public_html folder |
|In Dreamweaver, Open font.css |
|Copy Code from font.css and paste into your style.css file [at the top of the document ] |
|See Next page for assigning fonts to your webpage |
|HTML CODE |CSS CODE |
| |1. Save the newly edited style.css |
|HOW TO ASSIGN FONT FAMILY TO ELEMENT |2. The code below will ensure your font displays in multiple browsers and platforms |
| | |
| |[pic] |
| | |
| A bunch of text | |
| | |
|GALLERY | |
| | |
| | |
| |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… |
|RESPONSIVE WEB DESIGN |
|REFERENCES: |
|Viewport URL:: |
|Standard Device List [ for queries ] URL:: |
| |
|LECTURE/DEMO: |
|SETTING UP THE FIRST QUERY: |
| |
|@media 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: |
| |
|Queries are used to change the property values of pre-existing styles |
|(to correctly display in smaller/larger devices than originally coded) |
|Media Queries are placed at the end of your existing css document |
|You may add as many queries as you wish and change the min-width & max-width values (based on devices) |
|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: |
| |
|FOR DEVICE WIDTHS BETWEEN 300px – 768px |
| |
|PORTRAIT |
|LANDSCAPE |
| |
|@media only screen |
|and (min-device-width: 300px) |
|and (max-device-width: 768px) |
|and (orientation: portrait) { |
| |
|/*ADD NEW STYLE RULES HERE*/ |
| |
|} |
| |
|@media only screen |
|and (min-device-width: 300px) |
|and (max-device-width: 768px) |
|and (orientation: landscape) { |
| |
|/*ADD NEW STYLE RULES HERE*/ |
| |
|} |
| |
| |
| |
| |
| |
|DOWNLOAD ASSETS [ CSS ] |
|:: Media Query |
| |
|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 [ at The END of the style.css document] |
|For PHONES & HANDHELDS [ portrait ] |
|Styles for the header, nav, & logo element :: |
|[pic] |
| |
|Styles for Works Section :: |
|[pic] |
| |
|Styles for About/Bio Section :: |
|[pic] |
| |
|Styles for Footer :: |
|[pic] |
| |
|Styles for Works Page :: |
|[pic] |
|Media Query Selector |
|For PHONES & HANDHELDS [ landscape ] |
| |
| |
|@media only screen |
|and (min-device-width: 300px) |
|and (max-device-width: 768px) |
|and (orientation: landscape) { |
| |
|/*ADD NEW STYLE RULES HERE*/ |
| |
|} |
| |
| |
|[pic] |
| |
|Media Query Selector For iPad (landscape mode) |
|@media only screen |
|and (min-device-width: 768px) |
|and (max-device-width: 1024px) |
|and (orientation: landscape) { |
| |
|/*ADD NEW STYLE RULES HERE*/ |
| |
|} |
| |
|[pic] |
| |
|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 |
|[pic] |
|EDIT STYLE DECLARATIONS selector { property:value; } TO YOUR LIKING |
|TEST IN BROWSER |
|UPLOAD ALL FILES TO IRIS |
|TEST ON HANDHELD DEVICE [ Phones/iPads/etc. ] |
|OPTIMIZE WEB IMAGES |
|Lessen your page load time by optimizing your images… |
| |
|In Dreamweaver: |
|Go to Your File Panel |
|Open your images folder |
|Right-Click > the image to optimize |
|Choose Open With Adobe Photoshop CC 2017.app |
|[pic] |
| |
|In Photoshop, Go to the Menu Bar > File > Export > Save For Web (Legacy)… |
|[pic] |
| |
|In the pop-up panel, ensure you choose the same file type [ .jpg, .png, .gif ] as the original image in your site |
| |
|You may lessen the quality if your file size is humongous [ NOTE: Don’t confuse File Size with Image Size… ] |
|[pic] |
| |
| |
|Choose Save > Replace the existing File > Close Photoshop |
| |
|In Dreamweaver, refresh the file panel and view the new file size… |
| |
|HW-12 |Homework |
| |DUE :: 05.11 |
| |
|REVIEW :: |
|Class Notes |
| |
|DO :: |
|Ensure your webpage displays correctly |
|Ensure your images are sized correctly |
|Ensure your code is error free |
|Ensure all of your buttons are hyperlinked to the correct location |
|Test and adjust @medias queries to ensure your site display well on |
|laptop & mobile devices |
| |
|SEE HOMEWORK PAGE FOR COMPLETE DETAILS |
| |
|BRING :: HW-12 |
|1 |
|index.html |
| |
|2 |
|style.css |
| |
| |
| |
| |
................
................
In order to avoid copyright disputes, this page is only a partial summary.
To fulfill the demand for quickly locating and searching documents.
It is intelligent file search solution for home and business.