Creating BrightPlates Templates
|
|
- Damon Parsons
- 5 years ago
- Views:
Transcription
1 Creating BrightPlates Templates ON THIS PAGE Generating an HTML Template Editing the HTML for BrightPlates Building Templates for HD/LS Players Additional Steps for Portrait Templates HTML Best Practices for Templates Uploading the HTML Template This page outlines how to create and upload HTML templates for BrightPlates. These are advanced instructions intended for content developers. Adobe Photoshop is used as the example content creation application, but other applications such as Gimp have similar functionality. Tip Download this.zip file for examples of functional BrightPlates templates. Generating an HTML Template Use Photoshop to open the content you wish to convert to a BrightPlates template. Ensure the dimensions of the workspace is either 1920x1080 (landscape) or 1080x1920 (portrait). Enable the Guides feature to create a zone for each dynamic area of the template: This includes dynamic feed areas and editable images. Use the Slice tool, along with the "snap to" feature, to create a slice for each zone. The slices will be named automatically using a number and the file name; however, the HTML editing steps (described below) will be easier if you give each slice a unique name according to its function (e.g. "weekly-specials-graphic", "menu-item-feed-1") Navigate to File > Save for Web and Devices. Select all of the slices (i.e. zones) that you want to be part of the template. Areas that are not selected will automatically be included in the background image of the template.
2 6. 7. Select Edit Output Settings to open the Output Settings window. With HTML selected from the dropdown list, select Output XHTML. Then click Next Under Slice Output, select the Generate CSS option. Click OK to close the Output Settings window, then click Save to generate the HTML template. Editing the HTML for BrightPlates Open the generated.html file using an HTML editing application (e.g. Dreamweaver). If you don't have such an application, use a plain text editor (e.g. pad, Textedit). Edit the body element in the CSS section to include a desired font family. Photoshop will not include fonts from the saved template by default. Create a CSS id named #template and include the properties and values as shown in the screenshot below. Ensure the following: The position is absolute. The width and height properties are 100%. The background-image property matches the name of the background image saved as part of the page files by Photoshop.
3 4. Navigate to the <body> portion of the HTML. Notice that the HTML body consists of a number of <div> templates that correspond to the slices created in Photoshop. 5. (Optional) If you want the background image of the template to be customizable in BrightPlates, you will need to add the following to the < body> tag: data-template-background="background.jpg" In the <div> tags that correspond to editable images, enter data-block-type="image" in the tag. In the <div> tags that correspond to editable videos, enter data-block-type="video" in the tag. In the <div> tags that correspond to dynamic data, enter data-block-type="mrss" in the tag. Because BrightPlates always uses Live Media feeds, you will need to specify the block type as "mrss" even if the feed only contains text. 9. For each item in a dynamic data <div>, do the following: Create a <div> tag for the item formatted as follows. The other <div> elements created in steps b through e will be placed within the boundaries of this <div> element. <div data-block-item="mrss"> </div> If the item contains an image, create a <div> tag formatted as follows: <div data-item-media="image" class="itemimage" /> Video via MRSS is not supported in BrightPlates templates. Create a <div> tag for the title formatted as follows: <div data-item-type="title" class="itemtitle" />
4 4. Create a <div> tag for the description formatted as follows: <div data-item-type="description" class="itemdescription" /> 5. Below the <div> tag for the description, you can add any number of custom data fields by adding additional <div> tags. The dataitem-type of the <div> should equal the name of the custom field in the BSN Live Media Feed (created using the Add Custom Field button in the WebUI). For example, a custom field named "Caloriecount" in the Live Media Feed would correspond to the following: <div data-item-type="caloriecount" class="itemcaloriecount" /> Important We strongly recommend stating the maximum character limit for item titles, item descriptions, and custom data fields in the default text. This will help the end user create dynamic text that does not get cut off when it is displayed in the template. Building Templates for HD/LS Players HDx23, HDx22, and LS423 players support BrightPlates presentations, but these models have a single video decoder (rather than the two video decoders offered by the XD, XT, and 4K models). This leads to several limitations that you need to consider when creating a BrightPlates template: The template can either have one video <div> tag or a set of MRSS <div> tags. By default, a video decoder is used to display the background image (this ensures it is always placed behind other content); however, on single-decoder models, there will be no decoders left to display MRSS content. To work around this limitation, you will need to do the following: Add the background-color:transparent property to the <div> tag for the playlist/mrss block. Ensure the background image is a.png with an alpha channel for transparency, and add a transparent window that is the same size and location of the playlist/mrss block. Example Playlist <div> <div id="playlist" style="position:absolute; left:400px; top:100px; width:500px; height: 800px; background-color:transparent; z-index=0 " data-block-type="dynamic-playlist"> Additional Steps for Portrait Templates If you've created a portrait template for BrightPlates (e.g. 1080x1920, 720x1280), you will need to include the background image as a landscape image. BrightPlates will automatically rotate the background image after it's uploaded: 4. Locate the background image in your template. Open it with an image editing application (e.g. Photoshop). Rotate the image 90 degrees counterclockwise. Save the image. Preview images for the template can remain in portrait orientation.
5 HTML Best Practices for Templates Please note the following when creating and testing BrightPlates templates: The BrightPlates template uploader does not perform error checking on the HTML/CSS code. Test your template thoroughly before uploading it. We recommend creating templates that contain fewer than 100 files. If the template contains close to 100 files, the average file size should not exceed KB. The template upload process may fail if these limits are exceeded. Each browser treats fonts slightly differently: We recommend testing your template on a BrightSign player (rather than just the browser on your computer) to ensure that text is not truncated or misaligned. We recommend using absolute positioning with percentages for all elements. We recommend using inline CSS styling. Avoid nested <div> elements whenever possible. Uploading the HTML Template Take a screenshot of the HTML page in your HTML authoring application or web browser. Save it as "preview.jpg" in the same folder as the HTML page. Place the HTML page, background image, preview image, and any other related content into a.zip folder. 4. Navigate to. Log in to your BrightPlates account.
6 5. Click Manage Templates in the top-right of the page Specify the Orientation of the template Uncheck the Enable JQuery box if you are new to creating BrightPlates templates. This option enables advanced data parsing and server interaction. 14. Click Upload new template. This will open the Upload Template window. Click Browse to locate and select your.zip file. Enter the name of the HTML template file in the Template filename field (e.g. index.html). Select the Category (i.e. vertical) to which the template belongs. Enter a Title for the template. The title will be visible in the Templates browser in the BrightPlates UI. Enter a Description for the template. The description will be visible when the template is selected in the Templates browser. Click Upload to upload the template to BrightPlates. It will be visible in the Templates browser momentarily. If you're encountering errors when uploading a template created on a Mac, see this FAQ for more details and a workaround.
How to lay out a web page with CSS
How to lay out a web page with CSS You can use table design features in Adobe Dreamweaver CS3 to create a simple page layout. However, a more powerful technique is to use Cascading Style Sheets (CSS).
More informationUSER GUIDE. BrightSign Network Enterprise Edition WebUI Version 4.2
USER GUIDE BrightSign Network Enterprise Edition WebUI Version 4.2 BrightSign, LLC. 16780 Lark Ave., Suite B Los Gatos, CA 95032 408-852-9263 www.brightsign.biz 1 TABLE OF CONTENTS Introduction 1 What
More informationCropping an Image for the Web
Cropping an Image for the Web This guide covers how to use the Paint software included with Microsoft Windows to crop images for use on a web page. Opening Microsoft Paint (In Windows Accessories) On your
More informationUniversal CSS Navigation Menu: Advanced Styling Patrick Julicher Universal CSS Navigation Menu: Advanced Styling
Universal CSS Navigation Menu: Advanced Styling Page 1 of 15 Content 1. Introduction... 3 2. How to use... 3 2.1. Editing existing CSS Styles... 3 2.2. Creating new CSS Styles... 6 3. Explanation of styles...
More informationDesigning the Home Page and Creating Additional Pages
Designing the Home Page and Creating Additional Pages Creating a Webpage Template In Notepad++, create a basic HTML webpage with html documentation, head, title, and body starting and ending tags. From
More informationGetting Started with CSS Sculptor 3
Getting Started with CSS Sculptor 3 With CSS Sculptor, you can quickly create a cross-browser compatible layout with custom widths, margins, padding, background images and more. Additionally, you can use
More informationFigure 1 Forms category in the Insert panel. You set up a form by inserting it and configuring options through the Properties panel.
Adobe Dreamweaver CS6 Project 3 guide How to create forms You can use forms to interact with or gather information from site visitors. With forms, visitors can provide feedback, sign a guest book, take
More informationFish Eye Menu DMXzone.com Fish Eye Menu Manual
Fish Eye Menu Manual Page 1 of 33 Index Fish Eye Menu Manual... 1 Index... 2 About Fish Eye Menu... 3 Features in Detail... 4 Integrated in Dreamweaver... 6 Before you begin... 7 Installing the extension...
More informationAdobe Dreamweaver CS6 Digital Classroom
Adobe Dreamweaver CS6 Digital Classroom Osborn, J ISBN-13: 9781118124093 Table of Contents Starting Up About Dreamweaver Digital Classroom 1 Prerequisites 1 System requirements 1 Starting Adobe Dreamweaver
More informationBefore you begin, make sure you have the images for these exercises saved in the location where you intend to create the Nuklear Family Website.
9 Now it s time to challenge the serious web developers among you. In this section we will create a website that will bring together skills learned in all of the previous exercises. In many sections, rather
More informationPositioning in CSS: There are 5 different ways we can set our position:
Positioning in CSS: So you know now how to change the color and style of the elements on your webpage but how do we get them exactly where we want them to be placed? There are 5 different ways we can set
More informationCreating a Navigation Bar with a Rollover Effect
Creating a Navigation Bar with a Rollover Effect These instructions will teach you how to create your own navigation bar with a roll over effect for your personal website using Adobe Dreamweaver CS4. Your
More informationTaking Fireworks Template and Applying it to Dreamweaver
Taking Fireworks Template and Applying it to Dreamweaver Part 1: Define a New Site in Dreamweaver The first step to creating a site in Dreamweaver CS4 is to Define a New Site. The object is to recreate
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 informationHow to lay out a web page with CSS
Activity 2.6 guide How to lay out a web page with CSS You can use table design features in Adobe Dreamweaver CS4 to create a simple page layout. However, a more powerful technique is to use Cascading Style
More informationHTML. Mohammed Alhessi M.Sc. Geomatics Engineering. Internet GIS Technologies كلية اآلداب - قسم الجغرافيا نظم المعلومات الجغرافية
HTML Mohammed Alhessi M.Sc. Geomatics Engineering Wednesday, February 18, 2015 Eng. Mohammed Alhessi 1 W3Schools Main Reference: http://www.w3schools.com/ 2 What is HTML? HTML is a markup language for
More informationFlash MP3 Player DMXzone.com Flash MP3 Player Manual
Flash MP3 Player Manual Page 1 of 16 Index Flash MP3 Player Manual... 1 Index... 2 About Flash MP3 Player... 3 Features in Detail... 3 Before you begin... 7 Installing the extension... 7 Creating a MP3
More informationFlash Image Enhancer Manual DMXzone.com Flash Image Enhancer Manual
Flash Image Enhancer Manual Copyright 2009 All Rights Reserved Page 1 of 62 Index Flash Image Enhancer Manual... 1 Index... 2 About Flash Image Enhancer... 3 Features in Detail... 3 Before you begin...
More informationAdvanced Dreamweaver CS6
Advanced Dreamweaver CS6 Overview This advanced Dreamweaver CS6 training class teaches you to become more efficient with Dreamweaver by taking advantage of Dreamweaver's more advanced features. After this
More informationDreamweaver Domain 5: Organizing Content by Using Dreamweaver CS5
Dreamweaver Domain 5: Organizing Content by Using Dreamweaver CS5 Adobe Creative Suite 5 ACA Certification Preparation: Featuring Dreamweaver, Flash, and Photoshop 1 Objectives Set and modify document
More informationTAG STYLE SELECTORS. div Think of this as a box that contains things, such as text or images. It can also just be a
> > > > CSS Box Model Think of this as a box that contains things, such as text or images. It can also just be a box, that has a border or not. You don't have to use a, you can apply the box model to any
More informationFCKEditor v1.0 Basic Formatting Create Links Insert Tables
FCKEditor v1.0 This document goes over the functionality and features of FCKEditor. This editor allows you to easily create XHTML compliant code for your web pages in Site Builder Toolkit v2.3 and higher.
More informationCreating your first website Part 4: Formatting your page with CSS
Adobe - Developer Center : Creating your first website Part 4: Formatting your page... Page 1 of 23 Dreamweaver Article Creating your first website Part 4: Formatting your page with CSS Jon Varese Adobe
More informationGdes2000 Graphic Design for Internet & MM. Dreamweaver: Simple page construction with DIVs.
Dreamweaver: Simple page construction with DIVs. Websites and the design process 1/17: 1. We're making the assumption that you've been given a project or brief and are looking to create a basic web page
More information1. BSN WebUI New Network Setup User Account Roles Create Tab Edit Tab Library Tab
1. BSN WebUI......................................................................................... 2 1.1 New Network Setup..............................................................................
More informationUSER GUIDE. BrightSign Network Enterprise Edition WebUI Version 3.5
USER GUIDE BrightSign Network Enterprise Edition WebUI Version 3.5 BrightSign, LLC. 16795 Lark Ave., Suite 200 Los Gatos, CA 95032 408-852-9263 www.brightsign.biz TABLE OF CONTENTS Introduction 1 What
More informationLava New Media s CMS. Documentation Page 1
Lava New Media s CMS Documentation 5.12.2010 Page 1 Table of Contents Logging On to the Content Management System 3 Introduction to the CMS 3 What is the page tree? 4 Editing Web Pages 5 How to use the
More informationHow to export and save files
How to export and save files Illustrator is popular with designers because they can create graphics that can be used in a wide variety of applications. You can easily save your work for print, video, or
More informationMicrosoft Expression Web Quickstart Guide
Microsoft Expression Web Quickstart Guide MS-Expression Web Quickstart Guide Page 1 of 24 Expression Web Quickstart Guide (20-Minute Training) Welcome to Expression Web. When you first launch the program,
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 informationUsing Dreamweaver CS6
Using Dreamweaver CS6 4 Creating a Template Now that the main page of our website is complete, we need to create the rest of the pages. Each of them will have a layout that follows the plan shown below.
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 informationLayout with Layers and CSS
Layout with Layers and CSS Today we're going to make a Web site layout. Preparatory Step 1. Inside your folder create a new folder and name it layout. 2. Inside the layout folder create a new folder and
More informationUSER GUIDE. BrightAuthor 4.3. BrightSign, LLC Lark Ave., Suite B Los Gatos, CA
USER GUIDE BrightAuthor 4.3 BrightSign, LLC. 16780 Lark Ave., Suite B Los Gatos, CA 95032 408-852-9263 www.brightsign.biz TABLE OF CONTENTS Chapter 1 Getting Started... 1 What is BrightAuthor?... 1 What
More informationPage Content. Inserting Text To add text to your document, you can type the text directly or use Cut or Copy and Paste or Paste Special.
This section describes how to add content to your pages including text, Microsoft Office documents, images, Flash, and other media content. Inserting Text To add text to your document, you can type the
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 informationCS Multimedia and Communications. Lab 06: Webpage Tables and Image Links (Website Design part 3 of 3)
CS 1033 Multimedia and Communications Lab 06: Webpage Tables and Image Links (Website Design part 3 of 3) REMEMBER TO BRING YOUR MEMORY STICK TO EVERY LAB! Table Properties Reference Guide The Property
More informationUsing Dreamweaver CC. Logo. 4 Creating a Template. Page Heading. Page content in this area. About Us Gallery Ordering Contact Us Links
Using Dreamweaver CC 4 Creating a Template Now that the main page of our website is complete, we need to create the rest of the pages. Each of them will have a layout that follows the plan shown below.
More informationFrontPage 2000 Tutorial -- Advanced
FrontPage 2000 Tutorial -- Advanced Shared Borders Shared Borders are parts of the web page that share content with the other pages in the web. They are located at the top, bottom, left side, or right
More informationStyles, Style Sheets, the Box Model and Liquid Layout
Styles, Style Sheets, the Box Model and Liquid Layout This session will guide you through examples of how styles and Cascading Style Sheets (CSS) may be used in your Web pages to simplify maintenance of
More informationCreating Web Pages with SeaMonkey Composer
1 of 26 6/13/2011 11:26 PM Creating Web Pages with SeaMonkey Composer SeaMonkey Composer lets you create your own web pages and publish them on the web. You don't have to know HTML to use Composer; it
More informationGIMP WEB 2.0 MENUS. Web 2.0 Menus: Horizontal Navigation Bar with Dynamic Background Image
GIMP WEB 2.0 MENUS Web 2.0 Menus: Horizontal Navigation Bar with Dynamic Background Image WEB 2.0 MENUS: HORIZONTAL NAVIGATION BAR DYNAMIC BACKGROUND IMAGE Before you begin this tutorial, you will need
More informationLearning Adobe DreamWeaver CC. Module 1 Contents. Chapter 1: Introduction to DreamWeaver CC
Module 1 Contents Chapter 1: Introduction to DreamWeaver CC Design Considerations...1-1 Types of Graphics...1-2 Backgrounds and Text...1-2 Planning the Navigation...1-2 The DreamWeaver Screen...1-3 Workspaces...
More informationDREAMWEAVER QUICK START TABLE OF CONTENT
DREAMWEAVER QUICK START TABLE OF CONTENT Web Design Review 2 Understanding the World Wide Web... 2 Web Browsers... 2 How Browsers Display Web pages... 3 The Web Process at Sacramento State... 4 Web Server
More informationDreamweaver Basics Outline
Dreamweaver Basics Outline The Interface Toolbar Status Bar Property Inspector Insert Toolbar Right Palette Modify Page Properties File Structure Define Site Building Our Webpage Working with Tables Working
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 informationFigure 1 Properties panel, HTML mode
How to add text Adding text to a document To add text to a Dreamweaver document, you can type text directly in the Document window, or you can cut and paste text. You modify text by using the Properties
More informationTable of contents. DMXzone Ajax Form Manual DMXzone
Table of contents Table of contents... 1 About Ajax Form... 2 Features in Detail... 3 The Basics: Basic Usage of Ajax Form... 13 Advanced: Styling the Default Success and Error Message Sections... 24 Advanced:
More informationCreate a Contact Sheet of Your Images Design a Picture Package Customize Your Picture Package Layout Resample Your Image...
72 71 Create a Contact Sheet of Your Images................... 158 Design a Picture Package............ 160 73 Customize Your Picture Package Layout.... 162 74 Resample Your Image.................... 164
More informationCreate a Web Page with Spry Navigation Bar. March 30, 2010
Create a Web Page with Spry Navigation Bar March 30, 2010 Open a new web page by selecting File on the Menu bar, and pick Open. Select HTML as the page type and none from the layout list. Finally, we press
More informationThe Device Setup feature is supported on Series 4 (XTx44, XDx34, HDx24, LS424) and Series 3 (XTx43, XDx33, HDx23, LS423) mode
Device Setup ON THIS PAGE Introduction Network Setup Ethernet Settings Change Ethernet Settings Wireless Setup Advanced Wireless Setup Network Diagnostics Publishing Options BrightSign Network Sign-In
More informationDreamweaver. An Introduction to editing webpages
Dreamweaver An Introduction to editing webpages Edited: 2/7/18 Salter, Sharina D Contents Session Description... 3 Overview... 3 Introduction to Dreamweaver... 3 Toolbar... 5 Getting Started... 6 Create
More informationTable of contents. Ajax AutoComplete Manual DMXzone.com
Table of contents Table of contents... 1 About Ajax AutoComplete... 2 Features in Detail... 3 The Basics: Creating a Basic AJAX AutoComplete Field... 12 Advanced: Generating an AutoComplete Field using
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 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 informationCSS means Cascading Style Sheets. It is used to style HTML documents.
CSS CSS means Cascading Style Sheets. It is used to style HTML documents. Like we mentioned in the HTML tutorial, CSS can be embedded in the HTML document but it's better, easier and neater if you style
More informationInternet: An international network of connected computers. The purpose of connecting computers together, of course, is to share information.
Internet: An international network of connected computers. The purpose of connecting computers together, of course, is to share information. WWW: (World Wide Web) A way for information to be shared over
More informationAdding Items to the Course Menu
Adding Items to the Course Menu The course menu, located in the upper left of the screen, contains links to materials and tools within the course. To add more items to the menu, click the plus sign at
More informationBRIGHTAUTHOR RELEASE NOTES
Release Notes April 7, 2013 BRIGHTAUTHOR RELEASE NOTES BrightSign, LLC. 16795 Lark Ave., Suite 200 Los Gatos, CA 95032 408-852-9263 www.brightsign.biz BrightAuthor Requirements PC with Windows Vista or
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 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 informationCreating Buttons and Pop-up Menus
Using Fireworks CHAPTER 12 Creating Buttons and Pop-up Menus 12 In Macromedia Fireworks 8 you can create a variety of JavaScript buttons and CSS or JavaScript pop-up menus, even if you know nothing about
More informationBuilding EZ Picture Books for the Kindle. Copyright 2013 by Rob Smith All Right Reserved
Copyright 2013 by Rob Smith All Right Reserved!1 Course Goals The student will be able to recognize HTML documents and understand their structure. The student will be able choose a working resolution for
More informationHTML5/CSS3 Photo Gallery Plug-ins For Adobe Lightroom User Guide V 1.0
HTML5/CSS3 Photo Gallery Plug-ins For Adobe Lightroom User Guide V 1.0 Copyright 2010. Digicrafts. All rights reserved. For license agreement, you can visit www.digicrafts.com.hk/components CONTENTS Installation
More informationUSER GUIDE. BrightSign Network WebUI Version 3.1. BrightSign, LLC Lark Ave., Suite 200 Los Gatos, CA
USER GUIDE BrightSign Network WebUI Version 3.1 BrightSign, LLC. 16795 Lark Ave., Suite 200 Los Gatos, CA 95032 408-852-9263 www.brightsign.biz TABLE OF CONTENTS Introduction 1 What Can I Do with the WebUI?
More informationEDITOR GUIDE. Button Functions:...2 Inserting Text...4 Inserting Pictures...4 Inserting Tables...8 Inserting Styles...9
EDITOR GUIDE Button Functions:...2 Inserting Text...4 Inserting Pictures...4 Inserting Tables...8 Inserting Styles...9 1 Button Functions: Button Function Display the page content as HTML. Save Preview
More informationWeb Designer s Reference
Web Designer s Reference An Integrated Approach to Web Design with XHTML and CSS Craig Grannell Graphical navigation with rollovers The final exercise in this chapter concerns navigation with graphical
More informationHere are some links to get you started in learning more about CSS3 media queries and responsive web design:
of 8 The HTML5 CSS Starter Page Series - Part 13: CSS3 Media Queries and the Mobile Web By: Sheri German In the last installment of the HTML5 CSS Starter Page series, we completed the Stringendo Studios
More informationHow to use CSS text styles
How to use CSS text styles Web typography is an important creative tool web designers use to express style and emotion that enhances the goal and overall message of a website. Image-based text gives you
More informationACA Dreamweaver Exam Notes
ACA Dreamweaver Exam Notes Remember when you need to copy and paste the text you have to open up that actual text file itself and the need to go to edit> select all>, edit> copy>, then go back to the html
More informationIntroduction to Dreamweaver CS4:
Introduction to Dreamweaver CS4: 1.0.0 published by Antall Training http://www.scottantall.com info@scottantall.com 440/623-3738 Copyright 2003-2009 Antall Training All Rights Reserved. No portion of this
More informationDreamweaver CS4: Layout Guide. Převzato z
Dreamweaver CS4: Layout Guide Převzato z www.bewebmaster.com Intro This tutorial will help you: 1. Define a new Dreamweaver web site 2. Create a new HTML file 3. Create a new CSS file and attach it to
More informationPage 1 of 4. Course Outline by Topic: Web Design Fall 2009 Instructor: Mr. O Connell Room 117
Page 1 of 4 Web Design Fall 2009 Instructor: Mr. O Connell Room 117 Texts: Macromedia Dreamweaver MX Hands On Training (Green/Rudner) Adobe Photoshop Elements 5.0 Classroom in a Book (Adobe Systems) Macromedia
More informationObjective % Select and utilize tools to design and develop websites.
Objective 207.02 8% Select and utilize tools to design and develop websites. Hypertext Markup Language (HTML) Basic framework for all web design. Written using tags that a web browser uses to interpret
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 informationFile: SiteExecutive 2013 Core Modules User Guide.docx Printed September 30, 2013
File: SiteExecutive 2013 Core Modules User Guide.docx Printed September 30, 2013 Page i Contact: Systems Alliance, Inc. Executive Plaza III 11350 McCormick Road, Suite 1203 Hunt Valley, Maryland 21031
More informationSiteAssist Professional Help Documentation. Copyright 2008 WebAssist.com Corporation All rights reserved.
SiteAssist Professional Help Documentation Copyright 2008 WebAssist.com Corporation All rights reserved. User Interface Access WebAssist Category of Insert toolbar SiteAssist Professional Wizard SiteAssist
More informationDeccansoft Software Services
Deccansoft Software Services (A Microsoft Learning Partner) HTML and CSS COURSE SYLLABUS Module 1: Web Programming Introduction In this module you will learn basic introduction to web development. Module
More informationPage Layout. 4.1 Styling Page Sections 4.2 Introduction to Layout 4.3 Floating Elements 4.4 Sizing and Positioning
Page Layout contents of this presentation are Copyright 2009 Marty Stepp and Jessica Miller 4.1 Styling Page Sections 4.2 Introduction to Layout 4.3 Floating Elements 4.4 Sizing and Positioning 2 1 4.1
More information[PACKT] HTML5, CSS3, and jquery. Dreamweaver CS5.5 Mobile. and Web Development with
Dreamweaver CS5.5 Mobile and Web Development with HTML5, CSS3, and jquery Harness the cutting edge features of Dreamweaver for mobile and web development David Karl ins [PACKT] PUBLISHING BIRMINGHAM -
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 informationSite Owners: Cascade Basics. May 2017
Site Owners: Cascade Basics May 2017 Page 2 Logging In & Your Site Logging In Open a browser and enter the following URL (or click this link): http://mordac.itcs.northwestern.edu/ OR http://www.northwestern.edu/cms/
More informationFlash Album Generator 2 Manual Version 1.0. About Flash Album Generator 2. Flash Album Generator 2 Manual version 1.0 DMXzone.com
Flash Album Generator 2 Manual Version 1.0 Flash Album Generator 2 Manual Version 1.0...1 About Flash Album Generator 2...1 Converting a Flash Album Generator 1 gallery...6 Creating a new album...7 Editing
More informationIntroducing Cascading Style Sheets. Cascading Style Sheet Basics Creating Styles Using Styles Manipulating Styles Text Formatting with CSS
Introducing Cascading Style Sheets Cascading Style Sheet Basics Creating Styles Using Styles Manipulating Styles Text Formatting with CSS Cascading Style Sheet Basics CSS has many benefits: The pages look
More informationAPPLICATION ADMINISTRATOR GUIDE
APPLICATION ADMINISTRATOR GUIDE BrightSign Network Enterprise Edition Version 4.2 BrightSign, LLC. 16780 Lark Ave., Suite B Los Gatos, CA 95032 408-852-9263 www.brightsign.biz TABLE OF CONTENTS Introduction
More informationLarge images added to a webpage can have a detrimental effect to your site.
1. Photo Resizing Large images added to a webpage can have a detrimental effect to your site. Large images are slow to load and can frustrate users of your site who may leave your site rather than wait
More informationChapter 1 Getting Started with HTML 5 1. Chapter 2 Introduction to New Elements in HTML 5 21
Table of Contents Chapter 1 Getting Started with HTML 5 1 Introduction to HTML 5... 2 New API... 2 New Structure... 3 New Markup Elements and Attributes... 3 New Form Elements and Attributes... 4 Geolocation...
More informationWorking with Images and Multimedia
CHAPTER Working with Images and Multimedia You can make your web page more interesting by adding multimedia elements. You can download the files featured in this chapter from www.digitalfamily.com/tyv.
More informationTo illustrate how to set TAG styles the <body> and <h1> tags (for the BODY and the HEADING 1 styles) will be adjusted.
Chapter The formatting of CSS pages is carried out by setting the required styles. There are four different types of styles: Class which are custom styles that you create. You did this in Chapter 12. Tag
More informationGetting Started with Universal
Getting Started with Universal Email Universal Email adds email power to your website. This Getting Started Guide shows you how to use Universal Email to enable a contact form that you have on your site,
More informationBRIGHTAUTHOR USER GUIDE
BRIGHTAUTHOR USER GUIDE Software Version 3.5 BrightSign, LLC. 16795 Lark Ave., Suite 200 Los Gatos, CA 95032 408-852-9263 www.brightsign.biz TABLE OF CONTENTS Chapter 1 Getting Started... 1 What is BrightAuthor?...
More informationLayout Manager - Toolbar Reference Guide
Layout Manager - Toolbar Reference Guide Working with a Document Toolbar Button Description View or edit the source code of the document (for advanced users). Save the contents and submit its data to the
More informationWorking with Rounded Corner Layouts in CSS Sculptor 2.0
Working with Rounded Corner Layouts in CSS Sculptor 2.0 Eric Meyer s CSS Sculptor 2.0 includes three layouts that feature rounded corners. These rounded corners use images to create the rounded effect,
More informationHow to lay out a web page with CSS
How to lay out a web page with CSS A CSS page layout uses the Cascading Style Sheets format, rather than traditional HTML tables or frames, to organize the content on a web page. The basic building block
More informationCreating Jump Searches
Creating Jump Searches Jump Searches are created in Website Administration, and they are used to create dynamic hyperlinks for ReeceAndNichols.com property search pages. 1. Open your web browser, and go
More informationWHAT YOU WILL LEARN IN THIS PHOTOSHOP TRAINING PROGRAM
With Increase the online presence of business, create a website is first step for create online identity for any business. Every small and large enterprise need web designer, so they hire their own web
More informationDear Candidate, Thank you, Adobe Education
Dear Candidate, In preparation for the Web Communication certification exam, we ve put together a set of practice materials and example exam items for you to review. What you ll find in this packet are:
More informationHow to create a prototype
Adobe Fireworks Guide How to create a prototype In this guide, you learn how to use Fireworks to combine a design comp and a wireframe to create an interactive prototype for a widget. A prototype is a
More informationSOEN287: Web Programming
Concordia University Department of Computer Science and Software Engineering SOEN287: Web Programming Summer 2016 Programming assignment #1 Deadline: Friday, July, 22, 2016 @ 23:55 Late submission: Type
More informationver Wfl Adobe lif Sams Teach Yourself Betsy Bruce Robyn Ness SAMS 800 East 96th Street, Indianapolis, Indiana, USA WlM John Ray ^lg^
Betsy Bruce John Ray Robyn Ness Sams Teach Yourself Adobe Wfl lif ver W ^msssi^ mm WlM ^lg^ SAMS 800 East 96th Street, Indianapolis, Indiana, 46240 USA Table of Contents Introduction What Is Dreamweaver
More information