This document will describe how you can create your own, fully responsive. drag and drop template to use in the creator.
|
|
- Daniel Johnson
- 8 years ago
- Views:
Transcription
1 1
2 Introduction This document will describe how you can create your own, fully responsive drag and drop template to use in the creator. It includes ready-made HTML code that will allow you to copy, paste and use. PLEASE NOTE: This coding guide is intended for users who have experience with HTML coding. Users who are not experienced in coding are recommended to use our pre-made templates from our extensive library. 2
3 Standard HTML tags Insert your To ( ), From ( ), From (name) and Subject. Then choose your Newsletter folder and newsletter from the dropdowns. Basic HTML tags These tags are always required to ensure that the newsletter renders correctly in all modern browsers and clients. Meta Viewport This tag is for the responsive behavior on mobile devices. It contains instructions for the browser to render the newsletter based on the width of the device screen and manages the zoom function. 3
4 CSS Media Queries statement is used to set the width of the newsletter when viewed on a mobile device. 4
5 Important classes for the Creator gm-template This class identifies the newsletter as an Creator file. There only has to be one of these and it is typically assigned to the first <div> which can be before or within the <body> tag. ui-sortable This class identifies the areas where a new content block may be dropped. This class can be assigned to any element that should accept a new content block, but it should not be placed within an element that already has a gm-element class. *Content blocks will be dropped into areas identified by a red dashed line. 5
6 gm-element This class identifies a content block that will become the editable area in the Creator. Assign this class to the div which should be editable. *A content block is the area in a newsletter that can be dragged, duplicated or edited using the tools. Mousing over a content block highlights it with a blue tool border. 6
7 Code Guidelines The following code guidelines are recommended to be used in conjunction with best coding practices to ensure that the newsletter renders correctly in modern browsers and desktop clients. Note: Some of the tags below are automatically injected into the newsletter s code when it is opened in the Creator. Additionally, some necessary code is removed when the newsletter is saved and closed. Tags that are automatically injected or removed are marked with A. Image width A An image must have both the inline style width set to 100% as well as the width attribute set to the desired image size. This will ensure that the image is responsive, automatically resizes on small screens, as well as displays correctly in Outlook. The width will be automatically included in the Creator based on the content block or containing cell size or the size set in the tool bar. 7
8 No px on attributes A We found that px on a width or height attribute breaks the layout of some templates in various versions of Outlook for desktop. The attribute is not needed in any of the other browsers or clients, so it is automatically removed. Note: It is required on styles such as padding: 40px;. Inline max-width If at any stage a specific image should not scale larger than a certain %, then this can be specified by using the max-width inline style value. gm-preserve This class can be used to let the Creator know that it should not make any changes to the element with this class. Please use this class only where needed and with stringent testing, as the creator only changes code where explicitly required. 8
9 gte mso 9 This section of commented code is a fix for Outlook for desktop. Side by side columns tend to wrap in Outlook when a certain amount of content is added. Wrapping a table around the section and adding the comment between the columns resolves this. Below is a snippet. The full code can be seen in the example below. gm-element-pad This class allows you to edit the padding of the cell it is assigned to using the top tool bar in the Creator. 9
10 mob_full_width This class need to be present in each element when designing a responsive newsletter. The class forces the cells to take the full width of the device screen. Additional style sheet elements - 3 column template The following styles have been included in the three column template. They are used to force the padding widths of the three cells and their content to ensure that there is no wrapping or other issues in various browsers and devices. Note: The supplied 3 column template has restricted and less padding than single and 2 column templates. This is because of the constraining 650px standard newsletter width. The padding can be removed or edited if that width is increased, but this is not recommended. 10
11 11
12 Classes for internal use only data-gm-initial-style A This attribute is used by the Creator to keep track of the original style the template was loaded with and allows you to restore the template style to the original state. This attribute is removed when the newsletter is closed. data-video-thumb-width A This attribute is used to keep track of the video thumb size to allow for changes to it. This attribute is removed when the newsletter is closed. data-view, data-gm-type, data-sub-view and data-type A These attributes are used to keep track of various elements that can be edited after they have been inserted. For example, changes to a link s properties from the side menu. This attribute is removed when the newsletter is closed. 12
13 gm-text-highlight A This class is used to highlight your personalization tags when editing the newsletter. The tag is removed when the Creator is exited, the highlights fall away and are replaced with data at sending. data-gm-locale A This is an internal tracking or management tag. This attribute is removed when the newsletter is closed. 13
14 Structuring your Newsletter The entire body of a newsletter can be structured in a single table. There are three main elements to include in order to build a newsletter discussed below. Repeating the third element will, build your content areas. Consider this newsletter: 14
15 Element 1 - Main Table The main table is a single row, single column table creating the the frame or foundation of the newsletter. There are three important elements to consider: 1. A div class= gm-template is required to trigger the Creator. In this example it has been included in a surrounding div. 2. The width= 650 in the table tag ensures your newsletter does not scroll horizontally in mail clients and browsers. 650px is the accepted industry standard. 3. The gm-editable ui-sortable class in the cell identifies the point where the editable elements of the newsletter will begin. Note: The HTML above is a basic example of the structure required. Add styles attributes the the table and it s tags tags to set an overall style of your newsletter. 15
16 Element 2 - DIV The div elements in the cell of the main table are the content blocks identified in the Creator by the blue tool frame. These blocks can be moved, duplicated or deleted and their content can be edited. 1. The required attribute on this div is the class= gm-element Note: This div is repeated in the main table cell to create the rows of content in your newsletter. Adding additional styles to this div is also acceptable. 16
17 Element 3 - Content Table (Designer s Canvas) The table within the div is where all the layout and formatting of the content is coded. You can essentially add anything to this area as long as you remain within best practice limitations. The behaviour of this content is governed by the styles and classes created. Attributes for responsive design will have an impact here, changing font sizes and wrapping cells on mobile devices. Elements to consider: 1. A width= 100% on the main table will maintain the integrity of the layout. 2. Padding on the cells improves the visual layout of the newsletter. 17
18 Structuring your Newsletter - Variation 1 Locking content areas Omitting the class= gm-element from a div will result in that area not responding to the Creator. The content will be visible, but you will not be able to move, edit or delete it. This is typically used for a header or footer section where the content will always remain the same. Structuring your Newsletter - Variation 2 Complex content blocks The example above uses a full width editable content block. This is a guideline however, and more complex layouts can be built by creating a base table with multiple columns. Each column may have a <div class= gm-element > which will result in multiple side by side content blocks which can be moved, edited or duplicated. When doing this bear the following in mind: 1. When dragging a content block to a new position in the Creator, it will always snap to the dimensions of the ui-sortable class in the div. This typically results in the content block taking the same dimensions as the content block closest to the drop point. 2. Owing to 1. above, you should keep the number of content block sizes to a minimum. A full width block spanning two or three columns is best. 18
19 Example Code Below is the full HTML for the two row newsletter in the main example above. 19
20 20
21 21
22 22
23 The Problem: Outlook desktop clients Note: The issues discussed in this section are relevant to Microsoft Outlook version 2003 and later. Some versions are not affected by all the issues, but assume each one is relevant to one or more version. This section is not relevant to the outlook.com browsers mail client. Outlook uses MS Word to render s! In 2007 Outlook switched from Internet Explorer s rendering engine to the MS Word engine to render s. This configuration is still being used. What does that mean? 1. Not all HTML and CSS code is supported Code that is supported by the majority of modern clients and browsers that is not supported by MS Word will not be supported. This mean that various content or layout elements will be affected. A simple example of this 2. Page breaks and boundaries are inserted In short, just after 1790 pixels from the top of the newsletter Outlook ends the first text boundary, inserts a break and begins the next text boundary. This repeats. Unfortunately these breaks, depending on the layout of your newsletter, tend to stack one on top of the next resulting in your right hand column appearing below the left. 23
24 The Solution 1. The basic templates available for the Creator have been designed for and tested in all supported version of Outlook. In addition to that, the Creator injects additional code where necessary to mitigate Outlook problems. Testing is however important. Nested tables can result in the injected code not being at the correct level for the Outlook client to render it. 2. The gte mso 9 fix discussed earlier in this document is used to stop the columns from wrapping. It does however become more complicated when the left and right columns overlap. Keeping the content short, with a read more link, is a better practice and is more useful when tracking content interest. 24
25 More Outlook Problems 1. Outlook does not format lists (<oi> or <ul>) correctly often affecting the spacing. The safest solution here if lists are that important is to use a table similar to this: 2. Outlook does not automatically fix mismatched rowspan attributes. Most web browsers will automatically align the cell correctly if the rowspan value is higher than the actual number of rows. Outlook will force a space for the missing rows. 3. Outlook has a minimum 2 drink (2px :) requirement on a <td>. For example, if you are using a 1px gif as a spacer or to create a thin line Outlook will force the <td> to be 2px high, in turn making your space or line thicker. 25
The Essential Guide to HTML Email Design
The Essential Guide to HTML Email Design Index Introduction... 3 Layout... 4 Best Practice HTML Email Example... 5 Images... 6 CSS (Cascading Style Sheets)... 7 Animation and Scripting... 8 How Spam Filters
More informationCoding HTML Email: Tips, Tricks and Best Practices
Before you begin reading PRINT the report out on paper. I assure you that you ll receive much more benefit from studying over the information, rather than simply browsing through it on your computer screen.
More informationCreate a Web Page with Dreamweaver
Create a Web Page with Dreamweaver Dreamweaver is an HTML editing program that allows the beginner and the advanced coder to create Web pages. 1. Launch Dreamweaver. Several windows appear that will assist
More informationGUIDE TO CODE KILLER RESPONSIVE EMAILS
GUIDE TO CODE KILLER RESPONSIVE EMAILS THAT WILL MAKE YOUR EMAILS BEAUTIFUL 3 Create flawless emails with the proper use of HTML, CSS, and Media Queries. But this is only possible if you keep attention
More informationPrinciples of Web Design 6 th Edition. Chapter 12 Responsive Web Design
Principles of Web Design 6 th Edition Chapter 12 Responsive Web Design Objectives Recognize the need for responsive web design Use media queries to apply conditional styles Build a basic media query Create
More informationWorking with the new enudge responsive email styles
Working with the new enudge responsive email styles This tutorial assumes that you have added one of the mobile responsive colour styles to your email campaign contents. To add an enudge email style to
More informationUsing Style Sheets for Consistency
Cascading Style Sheets enable you to easily maintain a consistent look across all the pages of a web site. In addition, they extend the power of HTML. For example, style sheets permit specifying point
More informationKOMPOZER Web Design Software
KOMPOZER Web Design Software An IGCSE Student Handbook written by Phil Watkins www.kompozer.net CONTENTS This student guide is designed to allow for you to become a competent user* of the Kompozer web
More informationWP Popup Magic User Guide
WP Popup Magic User Guide Introduction Thank you so much for your purchase! We're excited to present you with the most magical popup solution for WordPress! If you have any questions, please email us at
More informationJoomla! template Blendvision v 1.0 Customization Manual
Joomla! template Blendvision v 1.0 Customization Manual Blendvision template requires Helix II system plugin installed and enabled Download from: http://www.joomshaper.com/joomla-templates/helix-ii Don
More informationEmail Creator Coding Guidelines Toolbox
Email Creator Coding Guidelines Toolbox The following information is needed when coding your own template from html to be imported into the Email Creator. You will need basic html and css knowledge for
More informationWP Popup Magic User Guide
WP Popup Magic User Guide Plugin version 2.6+ Prepared by Scott Bernadot WP Popup Magic User Guide Page 1 Introduction Thank you so much for your purchase! We're excited to present you with the most magical
More informationRESPONSIVE EMAIL DESIGN BY COMMUNIGATOR
RESPONSIVE EMAIL DESIGN BY COMMUNIGATOR RESPONSIVE EMAIL DESIGN According to stats from Litmus, in 2014 at least 53% of emails were opened on a mobile device. That is a huge increase from 2011 when the
More informationCreating Web Pages with Microsoft FrontPage
Creating Web Pages with Microsoft FrontPage 1. Page Properties 1.1 Basic page information Choose File Properties. Type the name of the Title of the page, for example Template. And then click OK. Short
More informationRecreate your Newsletter Content and Layout within Informz (Workshop) Monica Capogna and Dan Reade. Exercise: Creating two types of Story Layouts
Recreate your Newsletter Content and Layout within Informz (Workshop) Monica Capogna and Dan Reade Exercise: Creating two types of Story Layouts 1. Creating a basic story layout (with title and content)
More informationDesigning HTML Emails for Use in the Advanced Editor
Designing HTML Emails for Use in the Advanced Editor For years, we at Swiftpage have heard a recurring request from our customers: wouldn t it be great if you could create an HTML document, import it into
More informationDecision Support AITS University Administration. Web Intelligence Rich Client 4.1 User Guide
Decision Support AITS University Administration Web Intelligence Rich Client 4.1 User Guide 2 P age Web Intelligence 4.1 User Guide Web Intelligence 4.1 User Guide Contents Getting Started in Web Intelligence
More informationMicrosoft Access 2010 handout
Microsoft Access 2010 handout Access 2010 is a relational database program you can use to create and manage large quantities of data. You can use Access to manage anything from a home inventory to a giant
More informationDESIGN A WEB SITE USING PUBLISHER Before you begin, plan your Web site
Page 1 of 22 DESIGN A WEB SITE USING PUBLISHER Before you begin, plan your Web site Before you create your Web site, ask yourself these questions: What do I want the site to do? Whom do I want to visit
More informationMicrosoft Publisher 2010 What s New!
Microsoft Publisher 2010 What s New! INTRODUCTION Microsoft Publisher 2010 is a desktop publishing program used to create professional looking publications and communication materials for print. A new
More informationInformz for Mobile Devices: Making Your Emails PDA and Phone-Friendly
Informz for Mobile Devices: Making Your Emails PDA and Phone-Friendly The use of personal digital assistants (PDAs) has increased exponentially since the early days of rudimentary Palm Pilots and similar
More informationEssential HTML & CSS for WordPress. Mark Raymond Luminys, Inc. 949-654-3890 mraymond@luminys.com www.luminys.com
Essential HTML & CSS for WordPress Mark Raymond Luminys, Inc. 949-654-3890 mraymond@luminys.com www.luminys.com HTML: Hypertext Markup Language HTML is a specification that defines how pages are created
More informationJoomla Article Advanced Topics: Table Layouts
Joomla Article Advanced Topics: Table Layouts An HTML Table allows you to arrange data text, images, links, etc., into rows and columns of cells. If you are familiar with spreadsheets, you will understand
More informationResponsive Web Design for Teachers. Exercise: Building a Responsive Page with the Fluid Grid Layout Feature
Exercise: Building a Responsive Page with the Fluid Grid Layout Feature Now that you know the basic principles of responsive web design CSS3 Media Queries, fluid images and media, and fluid grids, you
More informationUsing Adobe Dreamweaver CS4 (10.0)
Getting Started Before you begin create a folder on your desktop called DreamweaverTraining This is where you will save your pages. Inside of the DreamweaverTraining folder, create another folder called
More informationYour Guide to the All New, Drag & Drop, Mobile-Responsive Email Builder
Your Guide to the All New, Drag & Drop, Mobile-Responsive Email Builder The All New Drag & Drop Email Builder from Net-Results Contents I. Introduction II. Overview - The Canvas & Builder Tools III. The
More informationUSER GUIDE. Unit 4: Schoolwires Editor. Chapter 1: Editor
USER GUIDE Unit 4: Schoolwires Chapter 1: Schoolwires Centricity Version 4.2 TABLE OF CONTENTS Introduction... 1 Audience and Objectives... 1 Getting Started... 1 How the Works... 2 Technical Requirements...
More informationMicrosoft Office PowerPoint 2013
Microsoft Office PowerPoint 2013 Navigating the PowerPoint 2013 Environment The Ribbon: The ribbon is where you will access a majority of the commands you will use to create and develop your presentation.
More informationGarfield Public Schools Fine & Practical Arts Curriculum Web Design
Garfield Public Schools Fine & Practical Arts Curriculum Web Design (Half-Year) 2.5 Credits Course Description This course provides students with basic knowledge of HTML and CSS to create websites and
More informationWebsite Editor User Guide
CONTENTS Minimum System Requirements... 3 Design Your Website... 3 Choosing your Theme... 4 Choosing your Header Style... 4-5 Website Content Editor... 6 Text Editor Toolbar features... 6 Main Menu Items...
More informationWeb Design Basics. Cindy Royal, Ph.D. Associate Professor Texas State University
Web Design Basics Cindy Royal, Ph.D. Associate Professor Texas State University HTML and CSS HTML stands for Hypertext Markup Language. It is the main language of the Web. While there are other languages
More informationCatalog Creator by On-site Custom Software
Catalog Creator by On-site Custom Software Thank you for purchasing or evaluating this software. If you are only evaluating Catalog Creator, the Free Trial you downloaded is fully-functional and all the
More informationChapter 1: Outlook Isn t Going Anywhere... 2. Chapter 2: 17 Must-Know Tricks for Outlook 2007, 2010 & 2013... 3
Table of Contents Chapter 1: Outlook Isn t Going Anywhere... 2 Chapter 2: 17 Must-Know Tricks for Outlook 2007, 2010 & 2013... 3 Chapter 3: 3 Way to Remove Unwanted Gaps Between Tables... 12 Chapter 4:
More informationMobile Optimise your Emails. Code & examples to make your email campaigns mobile friendly
Mobile Optimise your Emails Code & examples to make your email campaigns mobile friendly Email Marketing Guide June 2013 CONTENTS Introduction...01 The Growing Importance of Mobile...02 Key Mobile Devices...03
More informationInstructions for Creating a Poster for Arts and Humanities Research Day Using PowerPoint
Instructions for Creating a Poster for Arts and Humanities Research Day Using PowerPoint While it is, of course, possible to create a Research Day poster using a graphics editing programme such as Adobe
More informationAdobe Dreamweaver CC 14 Tutorial
Adobe Dreamweaver CC 14 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 informationRESPONSIVE DESIGN FOR MOBILE RENDERING
WHITEPAPER RESPONSIVE DESIGN FOR MOBILE RENDERING DELIVER MOBILE-SPECIFIC CONTENT USING MEDIA QUERIES EXECUTIVE SUMMARY With the widespread adoption of smartphones and tablets, proper email rendering in
More informationContent Builder: How-To Guide
Content Builder: How-To Guide In-Line Editing Several of the components have in-line editing where you can format the text and include hyperlinks. To access the in-line editing, click the pencil button
More informationUmbraco v4 Editors Manual
Umbraco v4 Editors Manual Produced by the Umbraco Community Umbraco // The Friendly CMS Contents 1 Introduction... 3 2 Getting Started with Umbraco... 4 2.1 Logging On... 4 2.2 The Edit Mode Interface...
More informationWebFOCUS BI Portal: S.I.M.P.L.E. as can be
WebFOCUS BI Portal: S.I.M.P.L.E. as can be Author: Matthew Lerner Company: Information Builders Presentation Abstract: This hands-on session will introduce attendees to the new WebFOCUS BI Portal. We will
More informationFile types There are certain image file types that can be used in a web page. They are:
Using Images in web design (Dreamweaver CC) In this document: Image file types for web pages Inserting an image Resizing an image in Dreamweaver CSS properties for image alignment and responsiveness nigelbuckner
More informationCaldes CM12: Content Management Software Introduction v1.9
Caldes CM12: Content Management Software Introduction v1.9 Enterprise Version: If you are using Express, please contact us. Background Information This manual assumes that you have some basic knowledge
More information3 What s New in Excel 2007
3 What s New in Excel 2007 3.1 Overview of Excel 2007 Microsoft Office Excel 2007 is a spreadsheet program that enables you to enter, manipulate, calculate, and chart data. An Excel file is referred to
More informationWe automatically generate the HTML for this as seen below. Provide the above components for the teaser.txt file.
Creative Specs Gmail Sponsored Promotions Overview The GSP creative asset will be a ZIP folder, containing four components: 1. Teaser text file 2. Teaser logo image 3. HTML file with the fully expanded
More informationHow to Properly Compose E-Mail HTML Code : 1
How to Properly Compose E-Mail HTML Code : 1 For any successful business, creating and sending great looking e-mail is essential to project a professional image. With the proliferation of numerous e-mail
More informationWeb Development. Owen Sacco. ICS2205/ICS2230 Web Intelligence
Web Development Owen Sacco ICS2205/ICS2230 Web Intelligence Introduction Client-Side scripting involves using programming technologies to build web pages and applications that are run on the client (i.e.
More informationHTML TIPS FOR DESIGNING
This is the first column. Look at me, I m the second column.
More informationHow to Use Swiftpage for Microsoft Outlook
How to Use Swiftpage for Microsoft Outlook 1 Table of Contents Basics of the Swiftpage for Microsoft Outlook Integration.. 3 How to Install Swiftpage for Microsoft Outlook and Set Up Your Account...4 The
More informationMicrosoft Expression Web Quickstart Guide
Microsoft Expression Web Quickstart Guide Expression Web Quickstart Guide (20-Minute Training) Welcome to Expression Web. When you first launch the program, you ll find a number of task panes, toolbars,
More informationWebsite Builder Documentation
Website Builder Documentation Main Dashboard page In the main dashboard page you can see and manager all of your projects. Filter Bar In the filter bar at the top you can filter and search your projects
More informationIntroducing our new Editor: Email Creator
Introducing our new Editor: Email Creator To view a section click on any header below: Creating a Newsletter... 3 Create From Templates... 4 Use Current Templates... 6 Import from File... 7 Import via
More informationAgenda2. User Manual. Agenda2 User Manual Copyright 2010-2013 Bobsoft 1 of 34
Agenda2 User Manual Agenda2 User Manual Copyright 2010-2013 Bobsoft 1 of 34 Agenda2 User Manual Copyright 2010-2013 Bobsoft 2 of 34 Contents 1. User Interface! 5 2. Quick Start! 6 3. Creating an agenda!
More informationGuide to B2B email marketing. Part Three: Building great emails
Guide to B2B email marketing Part Three: Building great emails Executive Summary of Recommendations Take a look at our guidelines for building great emails in this quick, at-a-glance format Technical Email
More informationEmail Campaign Guidelines and Best Practices
epromo Guidelines HTML Maximum width 700px (length = N/A) Maximum total file size, including all images = 200KB Only use inline CSS, no stylesheets Use tables, rather than layout Use more TEXT instead
More informationCONTENTM WEBSITE MANAGEMENT SYSTEM. Getting Started Guide
CONTENTM WEBSITE MANAGEMENT SYSTEM Getting Started Guide Table of Contents CONTENTM WEBSITE MANAGEMENT SYSTEM... 1 GETTING TO KNOW YOUR SITE...5 PAGE STRUCTURE...5 Templates...5 Menus...5 Content Areas...5
More informationIntroduction to Microsoft Word 2008
1. Launch Microsoft Word icon in Applications > Microsoft Office 2008 (or on the Dock). 2. When the Project Gallery opens, view some of the available Word templates by clicking to expand the Groups, and
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 informationHow To Change Your Site On Drupal Cloud On A Pcode On A Microsoft Powerstone On A Macbook Or Ipad (For Free) On A Freebie (For A Free Download) On An Ipad Or Ipa (For
How-to Guide: MIT DLC Drupal Cloud Theme This guide will show you how to take your initial Drupal Cloud site... and turn it into something more like this, using the MIT DLC Drupal Cloud theme. See this
More informationCreative Guidelines for Emails
Version 2.1 Contents 1 Introduction... 3 1.1 Document Aim and Target Audience... 3 1.2 WYSIWYG editors... 3 1.3 Outlook Overview... 3 2 Quick Reference... 4 3 CSS and Styling... 5 3.1 Positioning... 5
More informationHow To Design A Website For The Decs
ONLINE COMMUNICATION SERVICES FACTSHEET - DESIGN Created by: Mark Selan Version 1.1 Date Last Modified: April 2008 DESIGN GUIDELINES FOR GENER8 WEBSITES The purpose of this document is to provide Online
More informationWeb Page Design (Master)
St. Michael-Albertville High School Teacher: Ben Rusin Web Page Design (Master) September 2014 CEQ: WHAT IS HTML CODING AND HOW IS IT USED TO CREATE WEB SITES? AND HOW CAN IT BE USED TO CREATE WEB SITES?
More informationSoftware User's Guide
BROTHER QL-500/550/650TD/1050/1050N Software User's Guide QL-500 QL-650TD QL-550 QL-1050/1050N 1 Contents Contents....................................................................................2................................................................................4
More informationIntroduction... 3. Designing your Common Template... 4. Designing your Shop Top Page... 6. Product Page Design... 8. Featured Products...
Introduction... 3 Designing your Common Template... 4 Common Template Dimensions... 5 Designing your Shop Top Page... 6 Shop Top Page Dimensions... 7 Product Page Design... 8 Editing the Product Page layout...
More informationChat Window Skinning Creation Guide
Chat Window Skinning Creation Guide Throughout the course of a chat conversation, there are a number of different web pages that are displayed to your website visitors, including: The pre-chat survey The
More informationDesigning HTML emailers
24 SEPTEMBER 2015 Designing a beautiful but functional HTML emailer can be challenging for the most experienced designer, especially if you don t have a lot of experience working with code. This guide
More informationMS Word 2007 practical notes
MS Word 2007 practical notes Contents Opening Microsoft Word 2007 in the practical room... 4 Screen Layout... 4 The Microsoft Office Button... 4 The Ribbon... 5 Quick Access Toolbar... 5 Moving in the
More informationFairsail PDF Template Generator: A Complete Guide
Fairsail PDF Template Generator: A Complete Guide Version 12 FS-HCM-PTG-COMP-201506--R012.00 Fairsail 2015. All rights reserved. This document contains information proprietary to Fairsail and may not be
More informationBasic Excel Handbook
2 5 2 7 1 1 0 4 3 9 8 1 Basic Excel Handbook Version 3.6 May 6, 2008 Contents Contents... 1 Part I: Background Information...3 About This Handbook... 4 Excel Terminology... 5 Excel Terminology (cont.)...
More informationJoomla! 2.5.x Training Manual
Joomla! 2.5.x Training Manual Joomla is an online content management system that keeps track of all content on your website including text, images, links, and documents. This manual includes several tutorials
More informationDrupal Training Guide
Drupal Training Guide Getting Started Drupal Information page on the IT site: http://it.santarosa.edu/drupal On this page is information about Drupal sign up, what Drupal is, which is a content management
More informationANDROID TRAINING COURSE MODULES. Module-I: Introduction to Android. Introducing Android. Installing Development Tools. Using the Emulator.
ANDROID TRAINING COURSE MODULES Module-I: Introduction to Android Introducing Android. Installing Development Tools. Using the Emulator. Android developer tools. Eclipse, IDEs and Tools. Module-II: Introduction
More informationADOBE DREAMWEAVER CS3 TUTORIAL
ADOBE DREAMWEAVER CS3 TUTORIAL 1 TABLE OF CONTENTS I. GETTING S TARTED... 2 II. CREATING A WEBPAGE... 2 III. DESIGN AND LAYOUT... 3 IV. INSERTING AND USING TABLES... 4 A. WHY USE TABLES... 4 B. HOW TO
More informationUsing Microsoft Word. Working With Objects
Using Microsoft Word Many Word documents will require elements that were created in programs other than Word, such as the picture to the right. Nontext elements in a document are referred to as Objects
More informationCommunication Manager Email Template Library
Communication Manager Email Template Library Create and edit email templates for use in mass email and drip campaigns. Email templates can be stored in Template Tags for easy access to frequently used
More informationContents. Downloading the Data Files... 2. Centering Page Elements... 6
Creating a Web Page Using HTML Part 1: Creating the Basic Structure of the Web Site INFORMATION TECHNOLOGY SERVICES California State University, Los Angeles Version 2.0 Winter 2010 Contents Introduction...
More informationIn this session, we will explain some of the basics of word processing. 1. Start Microsoft Word 11. Edit the Document cut & move
WORD PROCESSING In this session, we will explain some of the basics of word processing. The following are the outlines: 1. Start Microsoft Word 11. Edit the Document cut & move 2. Describe the Word Screen
More informationUSER GUIDE. Unit 2: Synergy. Chapter 2: Using Schoolwires Synergy
USER GUIDE Unit 2: Synergy Chapter 2: Using Schoolwires Synergy Schoolwires Synergy & Assist Version 2.0 TABLE OF CONTENTS Introductions... 1 Audience... 1 Objectives... 1 Before You Begin... 1 Getting
More informationPublisher 2010 Cheat Sheet
April 20, 2012 Publisher 2010 Cheat Sheet Toolbar customize click on arrow and then check the ones you want a shortcut for File Tab (has new, open save, print, and shows recent documents, and has choices
More informationInstructions for Formatting MLA Style Papers in Microsoft Word 2010
Instructions for Formatting MLA Style Papers in Microsoft Word 2010 To begin a Microsoft Word 2010 project, click on the Start bar in the lower left corner of the screen. Select All Programs and then find
More informationCreating Web Pages with HTML Simplified. 3rd Edition
Brochure More information from http://www.researchandmarkets.com/reports/2248215/ Creating Web Pages with HTML Simplified. 3rd Edition Description: Are you new to computers? Does new technology make you
More informationSite Maintenance. Table of Contents
Site Maintenance Table of Contents Adobe Contribute How to Install... 1 Publisher and Editor Roles... 1 Editing a Page in Contribute... 2 Designing a Page... 4 Publishing a Draft... 7 Common Problems...
More informationBUSINESS OBJECTS XI WEB INTELLIGENCE
BUSINESS OBJECTS XI WEB INTELLIGENCE SKW USER GUIDE (Skilled Knowledge Worker) North Carolina Community College Data Warehouse Last Saved: 3/31/10 9:40 AM Page 1 of 78 Contact Information Helpdesk If you
More informationThe Essential Guide to HTML Email Design
The Essential Guide to HTML Email Design Emailmovers Limited, Pindar House, Thornburgh Road Scarborough, North Yorkshire, YO11 3UY Tel: 0845 226 7181 Fax: 0845 226 7183 Email: enquiries@emailmovers.com
More informationCreate a Google Site in DonsApp
Create a Google Site in DonsApp 1 Google Web Site Interactive. Constructivist. Collaborative. Communities. WHAT IS GOOGLE SITE? With one single click, you can create a website without any knowledge of
More informationCreate a Poster Using Publisher
Contents 1. Introduction 1. Starting Publisher 2. Create a Poster Template 5. Aligning your images and text 7. Apply a background 12. Add text to your poster 14. Add pictures to your poster 17. Add graphs
More informationMicrosoft Word 2010 Tutorial
1 Microsoft Word 2010 Tutorial Microsoft Word 2010 is a word-processing program, designed to help you create professional-quality documents. With the finest documentformatting tools, Word helps you organize
More informationOn the Email Marketing home page, click the arrow to expand the Admin Tools area. Admin Tools
Email Marketing How-To Document November 2010 Email Marketing Admin Tools On the Email Marketing home page, click the arrow to expand the Admin Tools area. Admin Tools Global Email Settings Design Templates
More informationQuick Start Guide To: Using the Sage E-marketing Online Editor
Quick Start Guide To: Using the Sage E-marketing Online Editor When you first enter the Sage E-marketing online editor, you will see two tabs on the left-hand side of the screen: Content Editor and Customize
More informationTable of Contents Desktop PC and Apple Mac email applications Web and mobile device email readers Find out more about NewZapp
Table of Contents Why is email display an issue in email marketing?... 2 Expert Email Design... 3 Quick look-up overview... 4 Desktop PC and Apple Mac email applications... 5 Outlook 2007-2016... 6 Content
More informationThemes and Templates Manual FOR ADVANCED USERS
Manual FOR ADVANCED USERS Table of Contents Introduction... 3 Key Information... 3 Portal Structure... 4 Portal Structure: Template... 5 Overview... 5 1) Editing a Portal Template... 6 2) Adding a Portal
More informationAccess 2007 Creating Forms Table of Contents
Access 2007 Creating Forms Table of Contents CREATING FORMS IN ACCESS 2007... 3 UNDERSTAND LAYOUT VIEW AND DESIGN VIEW... 3 LAYOUT VIEW... 3 DESIGN VIEW... 3 UNDERSTAND CONTROLS... 4 BOUND CONTROL... 4
More informationTerminal 4 Site Manager User Guide. Need help? Call the ITD Lab, x7471
Need help? Call the ITD Lab, x7471 1 Contents Introduction... 2 Login to Terminal 4... 2 What is the Difference between a Section and Content... 2 The Interface Explained... 2 Modify Content... 3 Basic
More informationWellesley College Alumnae Association. Volunteer Instructions for Email Template
Volunteer Instructions for Email Template Instructions: Sending an Email in Harris 1. Log into Harris, using your username and password If you do not remember your username/password, please call 781.283.2331
More informationSage Accountants Business Cloud EasyEditor Quick Start Guide
Sage Accountants Business Cloud EasyEditor Quick Start Guide VERSION 1.0 September 2013 Contents Introduction 3 Overview of the interface 4 Working with elements 6 Adding and moving elements 7 Resizing
More informationIntroduction 3. Getting Familiar With Presence Builder... 4. Creating and Editing Websites 6
Contents Introduction 3 Getting Familiar With Presence Builder... 4 Creating and Editing Websites 6 Importing Sites from SiteBuilder 4.5... 7 Editing Websites... 9 Structure: Pages and Navigation... 9
More informationDeveloping Website Using Tools
7 Developing Website Using Tools 7.1 INTRODUCTION A number of Software Packages are available in market for creating a website. Among popular softwares are Dreamweaver, Microsoft FrontPage and Flash. These
More informationTerminal Four (T4) Site Manager
Terminal Four (T4) Site Manager Contents Terminal Four (T4) Site Manager... 1 Contents... 1 Login... 2 The Toolbar... 3 An example of a University of Exeter page... 5 Add a section... 6 Add content to
More informationWebsite Development Komodo Editor and HTML Intro
Website Development Komodo Editor and HTML Intro Introduction In this Assignment we will cover: o Use of the editor that will be used for the Website Development and Javascript Programming sections of
More informationIAS Web Development using Dreamweaver CS4
IAS Web Development using Dreamweaver CS4 Information Technology Group Institute for Advanced Study Einstein Drive Princeton, NJ 08540 609 734 8044 * helpdesk@ias.edu Information Technology Group [2] Institute
More informationWHAT S NEW IN OBIEE 11.1.1.7
Enterprise Data Management OBI Author Training, March 2015 WHAT S NEW IN OBIEE 11.1.1.7 NEW PRESENTATION FEATURES VIEWS 1) Recommended Visualizations Feature When you create a new view, OBIEE looks at
More information