MULTIMEDIA WEB DESIGN CLASS NOTES

Size: px

Start display at page:

Download "MULTIMEDIA WEB DESIGN CLASS NOTES"

Samantha French
5 years ago
Views:

1 EMBEDDING MEDIA INSTRUCTION EXPORTING PSD IMAGES TO FOLDER :: Ensure Your Folder Structure is Correct :: Open Photoshop CC [Creative Cloud] :: Properly Name Your Image Layers :: Turn on Generator :: Duplicate images Folder/Paste in Your Website Folder INSERTING IMAGES :: Basic Images :: Rollover Images EMBEDDING MEDIA :: Webpage :: PDF :: Google Maps :: Social Media Code :: Social Media Video :: Original Video HW-7 :: Original Audio 1

EXPORTING PSD IMAGES TO FOLDER :: Ensure Your Folder Structure is Correct :: Open Photoshop CC (Creative Cloud) :: Properly Name Your Image Layers Ensure you have an empty layer named: default

2 EXPORTING PSD IMAGES TO FOLDER :: Ensure Your Folder Structure is Correct :: Open Photoshop CC (Creative Cloud) :: Properly Name Your Image Layers Ensure you have an empty layer named: default images/ Image layers/groups should be named with no spaces and a file extension ( logo.png, instagram.jpg ) Image layers/groups may contain size & quality info, in addition to multiple file exports :: EXAMPLE: 50% logo.png, logo.png24, logo.png (generates 3 files: 50% size of original, 24 png quality, & original) SOURCE URL: :: Turn on Generator This will generate image file from your image layers/groups [ File > Generate > Image Assets ] :: Copy Image Assets Content > Place in images Folder (for your website) The Generator in Photoshop CC has placed all Photoshop layers & groups (properly named with extensions) inside a folder named Image Assets. This folder is located in the same place as your mock up files. 1. Save your PSD document, then Open your Image Assets folder (Located in same folder as PSD) 2. Duplicate the images folder 3. Locate your website folder: _ARTC301> your-student-folder > website-folder > public_html > 4. Paste the images folder within your public_html folder 2

3 :: Basic Images SOURCE URL: a. Image Tags. INSERTING IMAGES The basic structure for inserting an image consists of a tag, attribute(s), and value. START TAG ELEMENT ATTRIBUTE VALUE END TAG < img src = filename.jpg > or /> image tag Use all lowercase and no spaces when naming your web files. SHOWN ABOVE:.jpg Other image file extensions used in web publishing are:.png,.gif, and.svg alt = Image of filename This text will appear if the image is not displayed in the browser. It may also be read by a screen reader (often enabled for visually impaired site visitors) The image element mark-up is an empty or self-terminating tag. It only requires a > or /> to close the element NOTE: You may also add a title attribute for tooltips: <img src= filename.jpg title= image description > In HTML, The code appears as follows: 1. <img src= filename.jpg > if located in the root directory 2. <img src= images/filename.jpg > if located inside images folder (PREFERRED) 3. <img src= > located on live site (root) 4. <img src= > live site inside images folder CREATE A CODE SNIPPET FILE FOR INSERTING IMAGES 1. Open new HTML 5 File 2. Place cursor BETWEEN the opening and closing <body> tag 3. Type the following: <img src= images/logo.png alt= This is my logo > 4. Save As: code_images.html 5. Click Save 6. Preview in Browser 3

4 EMBEDDING MEDIA :: Webpage Embed a Webpage inside of a Webpage Save As code_embed-webpage.html You may embed an entire live site into your own page. With the correct measurements and styles, you may allow your visitors to have a seamless experience for viewing information and media (external to your site). In the following example, you may view NYIT s website through an element called the iframe: <iframe src=" width="1100" height="575" frameborder="0" scrolling="yes"></iframe> Element: <iframe Markup to open an iframe element. It creates frame for object/media from another page source After you type iframe hit the spacebar before typing the first attribute Attribute 1: src= This attribute tells browser to look up a source Value1: This is the absolute hyperlink/web location (URL) for the page you wish to embed Attribute 2: width= Width of the iframe Value 2: "1100" Value (measurement) for the width attribute Attribute 3: height= Height of the iframe Value 3: "575" Value (measurement) for the height attribute Attribute 4: frameborder= Informs browser a frameborder behavior will be added Value 4: "0" Value of 0 allows webpage to be displayed without a border. Attribute 5: scrolling= Informs browser a scrolling behavior will be added Value: ="yes" yes value for scrolling, adds a scrollbar to the iframe > Closes the opening iframe tag </iframe> Terminates the iframe element (closing tag) NOTE: In this example, you may manipulate the attribute values to see how width, height, and scrolling, affects the look and feel of the web embedment. REFERENCE: 4

:: Google Maps MULTIMEDIA WEB DESIGN CLASS NOTES Embed a Google Map Into a Webpage Save As code_google-maps.html 1. Go To Google Maps: https://www.google.com/maps 2. Type an address: 3.

5 :: Google Maps MULTIMEDIA WEB DESIGN CLASS NOTES Embed a Google Map Into a Webpage Save As code_google-maps.html 1. Go To Google Maps: 2. Type an address: 3. Click the Share Button 4. Copy the HTML Embed Code [See blue highlighted code below]: 5. Paste the code into your Structural (<p>,<div>, <section>, etc.) HTML Element of Choice :: PDF Embed a PDF Inside of a Webpage Save As code_embed-pdf.html NOTE: An absolute URL address must be used as the.pdf location for multi-browsers <object data=" type="application/pdf" width="100% height="100%"> <p>it appears you don't have a PDF plugin for this browser. <a href=" Click here to download the Dreamweaver Help and Tutorials PDF file. </a> </p> </object> 5

6 :: Social Media Video MULTIMEDIA WEB DESIGN CLASS NOTES YouTube Save As code_embed-youtube.html 1. Go to YouTube video of your choice 2. Click The Share Button 3. Choose the Embed Button 4. Copy the highlighted code from the text field 5. Paste the code in your desired location (inside the body tag) SAMPLE CODE: NYIT 10 YEARS OF SOURCE <iframe width="560" height="315" src=" frameborder="0" allowfullscreen></iframe> :: Original Video Embed Original Video in Your Webpage Save As code_embed-original-video.html 1. Create a new folder (inside of your pubic_html folder) named videos 2. Save all of your converted (from HW-4) video files inside the videos folder SAMPLE HTML5 CODE: <video id="video-background" poster="videos/still-image.gif" autoplay loop controls controls> <source src="videos/filename.mp4" type="video/mp4"> <source src="videos/filename.ogv" type="video/ogg"> <source src="videos/filename.webm" type="video/webm"> Your browser does not support the video tag. </video> REFERENCES: mobile: 6

7 :: Original Audio MULTIMEDIA WEB DESIGN CLASS NOTES Embed Audio in Your Webpage Save As code_embed-audio.html CONVERTING FILES: 1. Create a.mp3 and.ogg file from your audio file of choice (use above link) 2. Use one of the following code structures for embedding audio on your page SAMPLE CODE HTML5: AUDIO (The Browser will display the first recognized format) <audio controls="controls"> <source src="audio/musicfile.ogg" type="audio/ogg"> <source src="audio/musicfile.mp3" type="audio/mpeg"> Your browser does not support the audio tag. </audio> MORE MULTI-BROWSER COMPLIANT: <object width="199" height="16"> </object> <param name="src" value="audio/musicfile.mp3"> <param name="autoplay" value="false"> <param name="controller" value="true"> <param name="bgcolor" value="#333333"> <embed TYPE="application/x-mlayer2" src="audio/musicfile.mp3" autostart="false" loop="false" width="199" height="16" controller="true" bgcolor="#333333"> </embed> NOTE: If you wish to autoplay your music once visitors arrive to your page, change the following attributes and values: <param name="autoplay" value="true"> AND src="audio/musicfile.mp3" autostart="true" REFERENCE: 7

:: Social Media Code MULTIMEDIA WEB DESIGN CLASS NOTES REFERENCE FOR VARIOUS SOCIAL MEDIA EMBED CODE: http://iris.nyit.edu/~dmyrick/dgim601-w01/embedmedia.

Go to your Twitter Menu Bar > Click cogwheel icon: Choose Settings from dropdown menu 3. Go to Left Column > Locate Widgets > Click Widgets 4. Click on Create New 5.

8 :: Social Media Code MULTIMEDIA WEB DESIGN CLASS NOTES REFERENCE FOR VARIOUS SOCIAL MEDIA EMBED CODE: Example: Embed Twitter into Your Web Page Video Demo Save As code_embed-twitter-feed.html 1. Login to your Twitter Account 2. Go to your Twitter Menu Bar > Click cogwheel icon: Choose Settings from dropdown menu 3. Go to Left Column > Locate Widgets > Click Widgets 4. Click on Create New 5. Choose the appropriate styles for you feed: - Options: You may exclude replies or auto expand photos (up to you) - Set Height based on your mockup - Theme: You may choose a light or dark theme and your own link color 6. Choose Create widget > copy HTML code > paste in Dreamweaver 8

9 Homework Homework DUE :: Weekly REVIEW :: 1. Embedding Media Instruction DO :: Refer to this material during class for embedding media BRING :: 1 Brings these notes every week until your website is completed 9

AGENDA :: MULTIMEDIA TOOLS :: CLASS NOTES

AGENDA :: MULTIMEDIA TOOLS :: CLASS NOTES CLASS :: 08 03.17 2017 3 Hours AGENDA EXPORTING PSD IMAGES TO FOLDER :: Ensure Your Folder Structure is Correct :: Open Photoshop CC [Creative Cloud] :: Properly Name Your Image Layers :: Turn on Generator