MULTIMEDIA TOOLS :: CLASS NOTES
|
|
- Della Hodge
- 6 years ago
- Views:
Transcription
1 CLASS :: Hours MULTIMEDIA TOOLS :: CLASS NOTES 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 :: Duplicate Image Folder (for your website) INSERTING IMAGES :: Basic Images EMBEDDING MEDIA :: Webpage :: PDF :: Google Maps :: Social Media Code :: Social Media Video :: Original Video HW-7 :: Original Audio 1
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-50.png, logo.png24, logo-original.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 directly in the root directory (public_html) 2. <img src= images/filename.jpg > if located inside images folder (PREFERRED) 3. <img src= > located on live site (absolute url : in root folder) 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_inserting-images.html (in the code_snippets folder) 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
5 :: 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> Link to a PDF or Word Document Link to PDF (Viewable on Web): <a href= >See PDF</a> Link to Microsoft Word Document (Downloads from Web): <a href= >See PDF</a> :: Google Maps 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 5
6 :: Social Media Video 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> JS LAZY YT (FAST LOADING FOR MULTIPLE EMBEDDED YOUTUBE VIDEOS ON ONE PAGE): [ Download and Substitute with Your Own YouTube IDs: ] AUTOPLAY & LOOP (Change Highlighted Code to Your YouTube Video ID): <iframe style="position: absolute; top: 0; left: 0;" src=" width="100%" height="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> REFERENCES: (video preview thumbnails) :: 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. Ensure You have 3 formats for different web browsers [.mp4,.webm,.ogv ] [ Convert URL: ] 3. Save all of your converted (from HW-4) video files inside the videos folder SAMPLE HTML5 CODE: <video id="video-background" poster="images/still-image.gif" autoplay loop 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> NOTE: Either autoplay OR controls needs to be included in the opening video tag REFERENCES: mobile: 6
7 :: Original Audio 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 w/player (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"> <param name="src" value="audio/musicfile.mp3"> <param name="autoplay" value="false"> <param name="controller" value="true"> <param name="bgcolor" value="#333333"> </object> <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
8 :: Social Media Code The majority of social media sites allow users to embed feeds/timelines/gallery thumbnails/etc. by use of developer tools. Typically the embed code is located on the developer tools page, in settings, or share embedding within a post itself REFERENCE FOR VARIOUS SOCIAL MEDIA EMBED CODE: URL: Example: Embed Twitter into Your Web Page Video Demo This video shows how to embed twitter, as well as screenshot and include the feed in a Photoshop Mock-Up Save As code_embed-twitter.html 1. Login to your Twitter Account OR Go to: [ Skip to Step 6. ] 2. Go to your Twitter Menu Bar > Click Your Profile and settings icon 3. Choose Settings and privacy from dropdown menu 4. Go to Left Column > Locate Widgets > Click Widgets 5. In the center of the page > Click Create New 6. Enter the URL for your Twitter Account > NOTE: You may go directly this page to start the embed code process: 7. Choose the option for your embed code: For this exercise you will choose Embedded Timeline 8
9 8. Click: set customization options 9. Choose the appropriate styles for you feed: // Set Width (You may use percentages) // Set Height (You may use percentages) // Theme: You may choose a light or dark theme and your own link color 10. [Click] Update 11. Copy HTML code [Cmd+C/Ctrl+C] 12. Paste Code within desired element in Dreamweaver [Cmd+V(Mac) / Ctrl+V(PC)] INSTAGRAM: [ SEE EMBED SOCIAL MEDIA PAGE ] URL: LINKED IN: [ SEE EMBED SOCIAL MEDIA PAGE ] URL: 9
10 HW-8 Homework DUE :: REVIEW :: DO :: 1. Review Class Notes 2. Review Intro to CSS Video Tutorials See Review SEE HOMEWORK PAGE FOR COMPLETE DETAILS BRING :: HW-8 1 Flash Drive 2 All Images for Portfolio (To Be Save inside Website images Folder) 3 Printed Copy of Mock-Up 10
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
More informationMULTIMEDIA WEB DESIGN CLASS NOTES
04.06 2018 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
More informationCLASS 6: March 5, 2014 MULTIMEDIA TOOLS: DGIM 601-W01 (127469)
CLASS 6: March 5, 2014 MULTIMEDIA TOOLS: DGIM 601-W01 (127469) AGENDA: Homework Review: Website Logo (Save As: YourInitials_logo.psd ) Photoshop Lesson 6: Start Midterm Set-Up OBJECTIVE: Set-Up Photoshop
More informationMULTIMEDIA TOOLS :: CLASS NOTES THE AGENDA
CLASS :: 05 10.09 2017 3 Hours HOMEWORK [ TURN-IN ] THE AGENDA PHOTOSHOP MOCK-UP PREPARATION :: What is a Photoshop Mock-Up? :: Color Scheme [from paletton.aco file // from Photoshop Swatches ] :: Download
More informationEmbedding and linking to media
Embedding and linking to media Dreamweaver makes it incredibly easy to embed and link media files (these include audio files and movie files) into your web site. We ll start with linking. Linking to media
More informationWebsite Development (WEB) Lab Exercises
Website Development (WEB) Lab Exercises Select exercises from the lists below to complete your training in Website Development and earn 125 points. You do not need to do all the exercises listed, except
More informationCUSTOMER PORTAL. Custom HTML splashpage Guide
CUSTOMER PORTAL Custom HTML splashpage Guide 1 CUSTOM HTML Custom HTML splash page templates are intended for users who have a good knowledge of HTML, CSS and JavaScript and want to create a splash page
More informationAGENDA :: MULTIMEDIA TOOLS :: CLASS NOTES
CLASS :: 14 04.28 2017 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
More information~Arwa Theme~ HTML5 & CSS3 Theme. By ActiveAxon
~Arwa Theme~ HTML5 & CSS3 Theme By ActiveAxon Thank you for purchasing our theme. If you have any questions that are beyond the scope of this help file, please feel free to email us via our user page contact
More informationAdobe Dreamweaver CC Tutorial
Adobe Dreamweaver CC Tutorial The design of the Web site index.html Click main.html header Boys toys Girls toys Media Contact us content Links sidebar1 footer content1.html content2.html content3.html
More informationAGENDA. :: 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
More informationAGENDA. EMBEDDING FONTS [ Font Files & CSS font-family ] :: Online Font Converter :: ADD font-family css code to style.css
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
More informationNP Page: (# ) About 4-H
Web Audit Hands-on Workshop Worksheet 1. Go to Anne s Test Site https://go.unl.edu/mw8q 2. Login to the site 3. Click Find Content on the grey menu bar 4. Find the article (# ) About 4-H 5. Scroll to the
More informationMaraid Design. Login. A note about text. Choose your language. Make Medicines Affordable CMS User Guide - April 2016
Login The website can be found at www.makemedicinesaffordable.org Login to the Wordpress CMS here www.makemedicinesaffordable.org/wp-login.php enter the details that have been provided. You will be taken
More informationHTML5: MULTIMEDIA. Multimedia. Multimedia Formats. Common Video Formats
LEC. 5 College of Information Technology / Department of Information Networks.... Web Page Design/ Second Class / Second Semester HTML5: MULTIMEDIA Multimedia Multimedia comes in many different formats.
More informationA set-up guide and general information to help you get the most out of your new theme.
Hoarder. A set-up guide and general information to help you get the most out of your new theme. This document covers the installation, set up, and use of this theme and provides answers and solutions to
More informationCreating a Website with Wordpress
Creating a Website with Wordpress Wordpress Fundamentals Version 1.6 Fayette County Public Schools June 28, 2013 Sow-Foong Hedman Technology Web Team Contents What is Wordpress?... 4 Overview... 4 Key
More informationCourse Syllabus. Course Title. Who should attend? Course Description. Adobe Dreamweaver CC 2014
Course Title Adobe Dreamweaver CC 2014 Course Description Adobe Dreamweaver CC (Creative Clouds) is the world's most powerful web design program. Our Dreamweaver course ''certified by Adobe ''includes
More informationRRJ.ca Uploading content and managing the site
RRJ.ca Uploading content and managing the site Logging In: To log in, go to: http://rrj.ca/wp admin You will need to use your FCAD login credentials. The first time you log in a WordPress user account
More informationWCMS Responsive Design Template Upgrade Training
WCMS Responsive Design Template Upgrade Training The purpose of this training session is to provide training to site owners, who are upgrading their WCMS content to the new Responsive Design (RD) template.
More informationAdobe Dreamweaver CC Tutorial
Adobe Dreamweaver CC Tutorial The design of the Web site index.html Click main.html header Boys toys Girls toys Media Contact us content Links sidebar1 footer content1.html content2.html content3.html
More informationVideo Embedder. Plugin for Joomla! This manual documents version 9.x of the Joomla! extension.
Video Embedder Plugin for Joomla! This manual documents version 9.x of the Joomla! extension. https://www.aimy-extensions.com/joomla/video-embedder.html 1 Introduction The Joomla! plugin Aimy Video Embedder
More informationDreamweaver Basics. Planning your website Organize site structure Plan site design & navigation Gather your assets
Dreamweaver Basics Planning your website Organize site structure Plan site design & navigation Gather your assets Creating your website Dreamweaver workspace Define a site Create a web page Linking Manually
More informationWeb Development & Design Foundations with HTML5, 8 th Edition Instructor Materials Chapter 11 Test Bank
Multiple Choice. Choose the best answer. 1. Java can be described as: a. a more sophisticated form of JavaScript b. an object-oriented programming language c. a language created by Netscape 2. JavaScript
More informationHTML/CSS Lesson Plans
HTML/CSS Lesson Plans Course Outline 8 lessons x 1 hour Class size: 15-25 students Age: 10-12 years Requirements Computer for each student (or pair) and a classroom projector Pencil and paper Internet
More informationAGENDA. HTML CODING YOUR HOMEPAGE [ Part IV ] :: NAVIGATION <nav> :: CSS CODING FOR HOMEPAGE [ <nav> & child elements ] CLASS :: 13.
:: DIGITAL IMAGING FUNDAMENTALS :: CLASS NOTES CLASS :: 13 04.26 2017 3 Hours AGENDA HTML CODING YOUR HOMEPAGE [ Part IV ] :: NAVIGATION home works
More informationAGENDA :: MULTIMEDIA TOOLS :: CLASS NOTES. INSTALLING FONTS :: Download, Install, & Embed Your Fonts. LECTURE :: Responsive Web Design [RWD]
CLASS :: 14 05.05 2017 3 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
More informationChapter 1 Introduction to Dreamweaver CS3 1. About Dreamweaver CS3 Interface...4. Creating New Webpages...10
CONTENTS Chapter 1 Introduction to Dreamweaver CS3 1 About Dreamweaver CS3 Interface...4 Title Bar... 4 Menu Bar... 4 Insert Bar... 5 Document Toolbar... 5 Coding Toolbar... 6 Document Window... 7 Properties
More informationADOBE 9A Adobe Dreamweaver CS4 ACE.
ADOBE 9A0-090 Adobe Dreamweaver CS4 ACE http://killexams.com/exam-detail/9a0-090 ,D QUESTION: 74 You use an image throughout your Web site. You want to be able to add this image to various Web pages without
More informationAGENDA. :: Homework Upload. :: Photoshop Lesson 4: Creating a PSD Wireframe [Homepage] I. DOCUMENT SET-UP: II. DRAWING SHAPES III.
CLASS :: 04 MULTIMEDIA TOOLS :: CLASS NOTES 10.02 2017 AGENDA :: Homework Upload [ A-2 ] Ultimate Composite! Upload A-2 Project to Student PSD Folder :: Photoshop Lesson 4: Creating a PSD Wireframe [Homepage]
More informationIndex. alt, 38, 57 class, 86, 88, 101, 107 href, 24, 51, 57 id, 86 88, 98 overview, 37. src, 37, 57. backend, WordPress, 146, 148
Index Numbers & Symbols (angle brackets), in HTML, 47 : (colon), in CSS, 96 {} (curly brackets), in CSS, 75, 96. (dot), in CSS, 89, 102 # (hash mark), in CSS, 87 88, 99 % (percent) font size, in CSS,
More informationUser Manual Version
Next FlipBook Maker for Windows User Manual Version 2.5.10 1 Content Cover 1 Content 2 1. Import PDF fires or images 3 2. Setting, Template, Scene and Bookmark 5 3. Publish local flipbook 19 4. Publish
More informationTitle and Modify Page Properties
Dreamweaver After cropping out all of the pieces from Photoshop we are ready to begin putting the pieces back together in Dreamweaver. If we were to layout all of the pieces on a table we would have graphics
More informationStreamingChurch.tv Administrator Guide Updated: November 2016
StreamingChurch.tv Administrator Guide Updated: November 2016 This Administrator Guide contains information on features for your Premium and Premium Plus Account Church Name You may always contact us Support@StreamingChurch.tv
More informationLogging in to the management system.
Welcome to your new site! The Wordpress publishing platform is a robust tool that helps you publish your content to the web without getting too involved with the code. This guide is designed to help you
More information:: MULTIMEDIA TOOLS :: CLASS NOTES
CLASS :: 04 02.15 2017 AGENDA :: Homework Upload [ A-2 ] Ultimate Composite! Upload A-2 Project to Student PSD Folder :: Photoshop Lesson 4: Creating a PSD Wireframe [Homepage] I. DOCUMENT SET-UP: a. Dimensions
More informationHow to Use Moodle's Text Editor
How to Use Moodle's Text Editor The text editor has a variety of tools and icons to assist in formatting text, adding links, and inserting images. Many of them will be familiar to anyone who uses word
More informationDreamweaver Exam Notes Questions
Dreamweaver Exam Notes Questions 1. Site Publishing: Local Site: Not published, sitting on your PC. Remote: Folders on the server. Root folder: All the info for the website Answer: Local Site 2. Email
More informationKinetika. Help Guide
Kinetika Help Guide 1 Hope you enjoy Kinetika theme! 3 Table of Contents Important Links 6 Theme Options - Setting Up Logo 26 Cover Photos 44 Applying Revolution Slider Slides 71 Important Notes 7 Logo
More informationRaiden. A Personal Blogging WordPress Theme with focus on readability and style. Thanks for purchasing a theme from Codestag, you re awesome!
Raiden A Personal Blogging WordPress Theme with focus on readability and style. Thanks for purchasing a theme from Codestag, you re awesome! In this document we will cover the installation and use of this
More informationGoogle Earth. Tutorials. Tutorial 2: Annotating Google Earth
Google Earth Tutorials Tutorial 2: Annotating Google Earth Google Earth makes it easy to create a map with annotations - you can add placemarks (points), paths (lines), polygons in Google Earth, and add
More informationHow to set up a local root folder and site structure
Activity 2.1 guide How to set up a local root folder and site structure The first thing to do when creating a new website with Adobe Dreamweaver CS3 is to define a site and identify a root folder where
More informationAll Adobe Digital Design Vocabulary Absolute Div Tag Allows you to place any page element exactly where you want it Absolute Link Includes the
All Adobe Digital Design Vocabulary Absolute Div Tag Allows you to place any page element exactly where you want it Absolute Link Includes the complete URL of the linked document, including the domain
More informationTechnical Instructions
Technical Instructions This Web Site Tool Kit contains multiple Web assets that you can use to easily customize your Web pages. Web assets included are animated and static banners, a sample Web page, buttons,
More informationWordPress How to Create a Simple Image Slider with the New RoyalSlider
WordPress How to Create a Simple Image Slider with the New RoyalSlider Last update: 2/20/2013 WARNING: DO NOT USE INTERNET EXPLORER you can use Firefox, Chrome, or Safari but the editing screens do not
More informationIntroduction to HTML & CSS. Instructor: Beck Johnson Week 2
Introduction to HTML & CSS Instructor: Beck Johnson Week 2 today Week One review and questions File organization CSS Box Model: margin and padding Background images and gradients with CSS Make a hero banner!
More informationPART I: Formatting the Appearance of the Blog
1 Wordpress Basics PUR4103 Public Relations Visual Communication Tappan Contents Part I: Formatting the Appearance of the Blog Choosing a theme Header image size Choosing a background color Finding a hex
More informationWebsite Administration Manual, Part One
Website Administration Manual, Part One A Guide to the CMS & Widgets Curry School of Education Website http://curry.virginia.edu The Curry Website Administrators Manual - Part One 2 The CMS The content
More informationGetting Started with E-Portfolio For Students Page 1 of 6
Getting Started with E-Portfolio For Students Page 1 of 6 E-Portfolio Instructions For more information, please check out the Brightspace (D2L) resources for eportfolio here: https://documentation.desire2learn.com/en/eportfolio.
More informationWelcome to Book Display Widgets
Welcome to Book Display Widgets Book Display Widgets allow you to create virtual book displays on your website, where covers link to that item s record in your catalog. Bring your own lists of books, or
More informationJSN Sun Framework User's Guide
JSN Sun Framework User's Guide Getting Started Layout Overview & Key concepts To start with layout configuration, Go to Extension Template JSN_template_default The first tab you see will be the Layout
More informationUsing Google sites. Table of Contents
Using Google sites Introduction This manual is intended to be used by those attempting to create web-based portfolios. It s contents hold step by step procedures for various aspects of portfolio creation
More informationPROFILE DESIGN TUTORIAL KIT
PROFILE DESIGN TUTORIAL KIT NEW PROFILE With the help of feedback from our users and designers worldwide, we ve given our profiles a new look and feel. The new profile is designed to enhance yet simplify
More informationChapter 1 Self Test. LATIHAN BAB 1. tjetjeprb{at}gmail{dot}com. webdesign/favorites.html :// / / / that houses that information. structure?
LATIHAN BAB 1 Chapter 1 Self Test 1. What is a web browser? 2. What does HTML stand for? 3. Identify the various parts of the following URL: http://www.mcgrawhill.com/books/ webdesign/favorites.html ://
More informationCreating a Simple Webpage using Microsoft FrontPage 2003
Creating a Simple Webpage using Microsoft FrontPage 2003 Professor Carrie Damschroder ENGL 317: Technical Communication October 27, 2009 Brandi Goodman Heather Stanfield Dylan Thompson Nikki Truong Page
More informationHomepages and Navigation Bars v8.3.0
and Navigation Bars v8.3.0 User Guide March 11, 2008 Contents About this guide Audience Related guides Setting up your course homepage Activating your course homepage Managing your course homepage Creating
More informationWhile editing a page, a menu bar will appear at the top with the following options:
Page Editor ===> Page Editor How Can I Use the Page Editor? The Page Editor will be your primary way of editing your website. Page Editor Basics While editing a page, you will see that hovering your mouse
More informationADDING VIDEO PAGES. DOCUMENT Here is a guide to adding videos to your responsive website in Webdadi. WEBDADI Updated Jan 2016
DOCUMENT Here is a guide to adding videos to your responsive website in Webdadi WEBDADI Updated Jan 2016 ADDING VIDEO PAGES How to add a page of videos to your website, or individual videos featured on
More informationIntegrating Facebook. Contents
Integrating Facebook Grow your audience by making it easy for your readers to like, share or send pages from YourWebShop to their friends on Facebook. Contents Like Button 2 Share Button.. 6 Send Button.
More informationNilmini Theme Documentation
Nilmini Theme Documentation 1. Theme-Installation After downloading the Nilmini theme.zip folder on your WordPress blog just log into your WordPress admin panel and go to design / themes. Next to the tab
More informationMULTIMEDIA WEB DESIGN
CLASS :: 03 02.09 2018 3 Hours THE AGENDA HOMEWORK 2 REVIEW [ Upload to Comm Arts Server ] :: Upload GIF Face assets to Your PSD Folder [ Inside of Folder> Create Gif Face Folder ] GIF ANIMATION :: File
More informationContributor Session: Handout
Contributor Session: Handout Log into training room computer Username : See PC label Password: Tr@inWus Log into OU Campus 1. Open Chrome and go to http://www.sc.edu. 2. Open a new tab in the browser and
More informationADOBE DREAMWEAVER CS4 BASICS
ADOBE DREAMWEAVER CS4 BASICS Dreamweaver CS4 2 This tutorial focuses on the basic steps involved in creating an attractive, functional website. In using this tutorial you will learn to design a site layout,
More informationDOCUMENTATION. Lotos WordPress Theme
DOCUMENTATION Lotos WordPress Theme Lotos Simple & Elegant Blog Theme Lotos is a versatile and powerful multipurpose WordPress blog theme perfect for any personal blog. Lotos makes customizing your blog
More informationDreamweaver CS4. Introduction. References :
Dreamweaver CS4 Introduction References : http://help.adobe.com 1 What s new in Dreamweaver CS4 Live view Dreamweaver CS4 lets you design your web pages under realworld browser conditions with new Live
More information1. Beginning (Important)
Regal Wordpress" Documentation by InkThemes.com Get Your Site Ready in Just 1 Click Thank you for purchasing our theme. If you have any questions that are beyond the scope of this help file, please feel
More informationHTML. Hypertext Markup Language. Code used to create web pages
Chapter 4 Web 135 HTML Hypertext Markup Language Code used to create web pages HTML Tags Two angle brackets For example: calhoun High Tells web browser ho to display page contents Enter with
More informationCreating a Technical Writing Online Portfolio with Wikispaces.com
Creating a Technical Writing Online Portfolio with Wikispaces.com November 11, 2010 Hollie Cookson Tyler Kiefer Allison Knowles Andrew Neutzling 1 Table of Contents I. Getting Started A. Create a Wikispaces.com
More informationAGENDA :: MULTIMEDIA TOOLS :: (1382) :: CLASS NOTES
CLASS :: 13 12.01 2014 AGENDA SIMPLE CSS MENU W/ HOVER EFFECTS :: The Nav Element :: Styling the Nav :: UL, LI, and Anchor Elements :: Styling the UL and LI Elements TEMPLATE CREATION :: Why Templates?
More informationPIC 40A. Lecture 4b: New elements in HTML5. Copyright 2011 Jukka Virtanen UCLA 1 04/09/14
PIC 40A Lecture 4b: New elements in HTML5 04/09/14 Copyright 2011 Jukka Virtanen UCLA 1 Sectioning elements HTML 5 introduces a lot of sectioning elements. Meant to give more meaning to your pages. People
More informationCentricity 2.0 Section Editor Help Card
Centricity 2.0 Section Editor Help Card Accessing Section Workspace In order to edit your section, you must first be assigned Section Editor privileges. This is done by the Director of your Site, Subsite,
More informationChapter 3 HTML Multimedia and Inputs
Sungkyunkwan University Chapter 3 HTML Multimedia and Inputs Prepared by D. T. Nguyen and H. Choo Web Programming Copyright 2000-2018 Networking Laboratory 1/45 Copyright 2000-2012 Networking Laboratory
More informationKaltura Video Package for Moodle 2.x Quick Start Guide. Version: 3.1 for Moodle
Kaltura Video Package for Moodle 2.x Quick Start Guide Version: 3.1 for Moodle 2.0-2.4 Kaltura Business Headquarters 5 Union Square West, Suite 602, New York, NY, 10003, USA Tel.: +1 800 871 5224 Copyright
More informationT4 Content Management System (T4 CMS)
Corporate Web Development Updated 28/03/2018 T4 Content Management System (T4 CMS) Guide for University Content Editors Moderator Access Contents Log in to T4... 3 T4 Interface... 4 Preview... 4 Find Content...
More informationAct! Marketing Automation
Act! Marketing Automation A Guide to Getting Started Helping your business grow with marketing automation Act! Marketing Automation Getting Started Guide 2 Contents Page Page 8 Page 10 Page 11 Page 11
More informationOU Mashup V2. Display Page
OU Mashup V2 OU Mashup v2 is the new iteration of OU Mashup. All instances of OU Mashup implemented in 2018 and onwards are v2. Its main advantages include: The ability to add multiple accounts per social
More information28 JANUARY, Updating appearances. WordPress. Kristine Aa. Kristoffersen, based on slides by Tuva Solstad and Anne Tjørhom Frick
Updating appearances WordPress Kristine Aa. Kristoffersen, based on slides by Tuva Solstad and Anne Tjørhom Frick Agenda Brief talk about assessments Plan for WordPress lessons Installing themes Installing
More informationAttributes & Images 1 Create a new webpage
Attributes & Images 1 Create a new webpage Open your test page. Use the Save as instructions from the last activity to save your test page as 4Attributes.html and make the following changes:
More information1. Setup a root folder for the website 2. Create a wireframe 3. Add content 4. Create hyperlinks between pages and to external websites
A. Pre-Production of Webpage 1. Determine the specific software needed WYSIWYG- design software that manipulates components of the web page without the user writing or editing code Uses graphical layout
More informationIntroduction to WEB PROGRAMMING
Introduction to WEB PROGRAMMING Web Languages: Overview HTML CSS JavaScript content structure look & feel transitions/animation s (CSS3) interaction animation server communication Full-Stack Web Frameworks
More informationEcamm Live for Facebook User Guide
Ecamm Live for Facebook User Guide Ecamm Live is a Facebook Live streaming app for Mac. Use the app to broadcast camera video, pre-recorded video, Skype video calls, or your Mac s screen, along with an
More informationWebsite Design (Weekend) By Alabian Solutions Ltd , 2016
Website Design (Weekend) By Alabian Solutions Ltd 08034265103, info@alabiansolutions.com www.alabiansolutions.com 2016 TECHNOLOGIES DATE TIME Day1 Section 1 HTML Part 1 12am 5pm Intro to the web The web
More informationCreating and Publishing Faculty Webpages
Creating and Publishing Faculty Webpages The UNF Template The template we are using today provides a professional page that is easy to work with. Because the pages are already built, faculty members can
More informationWYSIWYG Editor: Users Manual
WYSIWYG Editor: Users Manual Table of Contents WYSIWYG Editor Overview.... 3 Adding Text... 4 Inserting an Image.... 7 Inserting a File.... 15 Embedding Media.... 21 Inserting an Email Link.... 25 Captiva
More informationBeginners Guide to Snippet Master PRO
Beginners Guide to Snippet Master PRO This document assumes that Snippet Master has been installed on your site. If not please contact the Bakas IT web team at webreg@bakasit.com.au. Initial Login Screen...
More informationMULTIMEDIA WEB DESIGN
CLASS :: 02 02.02 2018 4 Hours THE AGENDA HOMEWORK 1 REVIEW [ Upload to Comm Arts Server ] :: Completed Questionnaire :: Best Works [Saved to Server] GIF ANIMATION DEMO :: Best Practices for GIF Animations
More informationFixed Header edream Market
User s Manual Magento Extension Fixed Header edream Market www.edreamag.com support@edreamag.com Fixed Header for Magento MODERN, SIMPLE AND PROFESSIONAL edream Fixed Header is a unique extension that
More informationThe Dreamweaver Interface
The Dreamweaver Interface Let s take a moment to discuss the different areas of the Dreamweaver screen. The Document Window The Document Window shows you the current document. This is where you are going
More informationUSER GUIDE AND THEME SETUP
Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free ask any questions on the online Support Forum, located at: http://themewich.com/forum.
More informationCS Multimedia and Communications. Lab 10: Sound Editing with Audacity and Incorporating Sound, Animation and Video into a Webpage with KompoZer
CS 1033 Multimedia and Communications Lab 10: Sound Editing with Audacity and Incorporating Sound, Animation and Video into a Webpage with KompoZer NOTE: you will need headphones for this lab to plug into
More informationNew Website User Manual
New Website User Manual General Notes 3 How To Login To Your Website And Access Admin Dashboard 4 Adding / Editing Sliders 5 Home Slider 5 School Slider (Same steps for ALL school pages) - Add a Slide
More informationWPM for Departments Using WPM to Edit Your Department s Website
Overview Web Profile Manager allows Ithaca College community members to easily edit department sites. All of the specialty language and code has been omitted to provide a consistent format and to make
More informationAdobe Dreamweaver CC 17 Tutorial
Adobe Dreamweaver CC 17 Tutorial GETTING STARTED This tutorial focuses on the basic steps involved in creating an attractive, functional website. In using this tutorial you will learn to design a site
More informationHTML and CSS COURSE SYLLABUS
HTML and CSS COURSE SYLLABUS Overview: HTML and CSS go hand in hand for developing flexible, attractively and user friendly websites. HTML (Hyper Text Markup Language) is used to show content on the page
More informationPASTPERFECT-ONLINE TECH TIPS
PASTPERFECT-ONLINE TECH TIPS This section of the User s Guide provides you with additional technical tips on how to have additional, more complex features on your site. You can also check out the searchable
More informationSoundCloud allows you to share an audio recording of a presentation, speech, song or event. It is the equivalent for audio that YouTube is for video.
How to create a SoundCloud widget SoundCloud allows you to share an audio recording of a presentation, speech, song or event. It is the equivalent for audio that YouTube is for video. The UON SoundCloud
More informationCreate, Edit, and Share a Portfolio
Portfolios can be used to save and store your work across multiple courses and groups. Your portfolio is tied to your user account, so even if the courses or groups are deleted, your work is safely stored.
More informatione-portfolios Benefits of an e-portfolio Showcase your best works Progress assessment Job search; present to employers Share with family and friends
1 e-portfolios Digication training objective The objective is to learn the tools and features of Digication and gain the essential skills to use Digication to develop an electronic portfolio. What you
More informationA Quick Introduction to the Genesis Framework for WordPress. How to Install the Genesis Framework (and a Child Theme)
Table of Contents A Quick Introduction to the Genesis Framework for WordPress Introduction to the Genesis Framework... 5 1.1 What's a Framework?... 5 1.2 What's a Child Theme?... 5 1.3 Theme Files... 5
More informationHow to Edit Your Website
How to Edit Your Website A guide to using your Content Management System Overview 2 Accessing the CMS 2 Choosing Your Language 2 Resetting Your Password 3 Sites 4 Favorites 4 Pages 5 Creating Pages 5 Managing
More information