Create Your own Company s Design Theme
|
|
|
- Evan Hood
- 9 years ago
- Views:
Transcription
1 Create Your own Company s Design Theme A simple yet effective approach to custom design theme INTRODUCTION Iron Speed Designer out of the box already gives you a good collection of design themes, up to 27 different look and feels with the Enterprise Edition. But in today s corporate world, every company has its own logo, color scheme and fonts to carry its own branding. In this article, we demonstrate how easy it is to create a unique design theme which uses your company s logo and extends that branding into the web applications you are building. We are going to present a simple yet effective basic level customization process. Remember, this article only applies to the Enterprise Edition because this is the version that allows the users to upload their custom design themes. The customization process can be summarized in 2 parts. Part 1: Create a custom frame and background The Iron Speed Designer s generated design theme has created a shell which wraps the content; we should examine the structure and use that as our foundation. Style sheets will be modified for placing the custom images, changing site background and modifying font properties. Part 2: Create a custom logo, header and footer Create the logo graphics and the background for the logo and footer area in the embedded content of the layout. Note that you will be working with style sheets and creating graphics. A good working knowledge of Cascading Style Sheet and familiarity with graphic are required. Or this can be accomplished by collaborating with a web designer. In this basic level customization you will not have to change anything in Iron Speed s page templates nor program files. (Please note that this article is based on Iron Speed 5.2. There are minor changes from the previous version in terms of how Iron Speed Designer structure and communicate with the design themes.) 1
2 IMPLEMENTATION Step 1: Browse and pick a design theme as a foundation It is highly recommended to pick a design theme from those supplied selections and use it as a foundation. To minimize work, we choose a design theme which resembles the preferred layout, thus utilizing Iron Speed s HTML structure. Our customization will be in the Style Sheet. Now you should select New Application from Iron Speed Designer main menu. The Application Wizard will appear. On the Page Style step, browse and see the design themes available. In this example, we are going to use Matterhorn. Step 2: Copy and Build your own design theme After you have picked the foundation design theme, go into the Design Themes folder under the installation directory of Iron Speed Designer. The default is C:\Program Files\Iron Speed\Designer v5.2.1 \Design Themes. Made a copy of the whole folder and rename it to the preferred name to show up in your Application Generation Wizard. In this example, I am renaming it to PresenceConsulting. 2
3 Right now, if you run the Application Wizard again, your new customized design theme shows up under Application Wizard as one of the selection. 3
4 Step 3: Understanding the Design Theme file structure and layout The main page template: Page with Header and Menu.html This file can be found under the Pages directory in each of Iron Speed Design Themes folder. In our case the file path is C:\Program Files\Iron Speed\Designer v5.2.1\design Themes\ PresenceConsulting\Pages. This particular HTML file is the template for most of Iron Speed generated pages. The highlighted code sections below indicate where the customization should take place and represent the table cells for custom graphic placement. These cells belong to the table mark up of the shell which wraps the inner content generated by Iron Speed. As you can see there are CSS classes already declared and for the most part they are sufficient in this basic level customization. Based on the existing CSS classes you can further change background and font properties. * Page with Header and Menu.html <body id="body1" runat="server" class="pback"> <form id="form1" method="post" runat="server"> <BaseClasses:ScrollCoordinates id="scrollcoordinates" runat="server"> </ BaseClasses:ScrollCoordinates> <BaseClasses:BasePageSettings id="pagesettings" runat="server"> </BaseClasses:BasePageSettings> <GEN:Template Type="Page" Description="A page containing a header, menu and footer."/ > <table cellspacing="0" cellpadding="0" border="0" height="100%" width="100%"> <td class="palign"> <table cellspacing="0" cellpadding="0" border="0" class="pbtable"> <td class="pbtl"><img src="../images/space.gif" alt=""/> <td class="pbt"><img src="../images/space.gif" alt=""/> <td class="pbtr"><img src="../images/space.gif" alt=""/> <td class="pbl"><img src="../images/space.gif" alt=""/> <td class="pbc"> <table cellspacing="0" cellpadding="0" border="0" class="pctable"> <td class="pct" colspan="2"> 4
5 <table cellspacing="0" cellpadding="0" border="0" width="100%"> <td> <GEN:Header Name="PageHeader" File="../Header and Footer/Header.html"/ > </table> <td class="pctr"> <td class="pcl"> <GEN:Menu name="menuv" file="../menu Panels/VerticalMenu.html"/> <td class="pcc"> <table cellspacing="0" cellpadding="0" border="0" width="100%" height="100%"> <td> <GEN:Menu name="menu" file="../menu Panels/HorizontalMenu.html"/> <td> <table cellspacing="0" cellpadding="0" border="0" width="100%"> <td class="pcontent"> <a name="startofpagecontent"></a> <GEN:Insert/> <div id="detailpopup" style="z-index:2; visibility:visible; position:absolute;"> </div> <div id="detailpopupdropshadow" class="detailpopupdropshadow" style="z-index:1; visibility:visible; position:absolute;"></div> </table> </table> <td class="pcr"> <td class="pcbl"> <td class="pcb"> 5
6 <GEN:Footer Name="PageFooter" file="../header and Footer/ Footer.html"/> <td class="pcbr"> </table> <td class="pbr"><img src="../images/space.gif" alt=""/> <td class="pbbl"><img src="../images/space.gif" alt=""/> <td class="pbb"><img src="../images/space.gif" alt=""/> <td class="pbbr"><img src="../images/space.gif" alt=""/> </table> </table> <asp:validationsummary id="validationsummary1" ShowMessageBox="true" ShowSummary="false" runat="server"></asp:validationsummary> </form> </body> For the next steps you will be working with the CSS files. The style sheets: BaseStyles.css, BaseStyles.LeftToRight.css, BaseStyles.RightToLeft.css First make changes to the BaseStyles.css file and then all changes must be duplicated and applied to the other 2 CSS files. BaseStyles.LeftToRight.css is used for applications generated for languages going from left to right (such as English) while BaseStyles.RightToLeft.css is used for the ones that read from right to left (such as Arabic.) This is important because Iron Speed Designer will not load your style sheet if it only applied to 1 of the 3 CSS files. Step 4: Setting the company logo, changing the header and footer To use the customized company logo, we need to replace the file logo.gif with the company graphic of dimension of 400 pixels X 80 pixels under \Design Themes\[Theme Name]\Images, such as C:\Program Files\Iron Speed\Designer v5.2.0\design Themes\PresenceConsulting\Images. The logo is set by Iron Speed Designer in its application code and we only have to maintain the same file name and dimension. 6
7 Under the Page Center Styles portion of the CSS, you will assign the new background for the header and footer. In here you can also change properties such as background color, font color, font size, height, width, etc. The highlighted lines of code are the changes. This is an example and styles could be set in a much extensive manner. /********************************************************************** * Page Center Styles * **********************************************************************/.pctable {.pctl {.pct { background: url(../images/logo_bg.gif) repeat-x; background-color: #666666;.pcTR {.pcl {.pcc { background-color: #FFFFFF; border-top: #CCCCCC solid 1px; vertical-align: top; width: 100%;.pcR {.pcbl {.pcb { background: url(../images/footer_bg.gif) bottom repeat-x;.pcbr { 7
8 Please refer to the diagram above for the table layout. This 9 cells table is a frame which wraps the inner content generated by Iron Speed Designer. The red colored text in the diagram specifies the class names for the style sheet in different regions. The customization here is setting sliced images to be used as background for each of those cells. In certain cells the images need to be set to repeat in order to fill the whole cell, which is a common practice in CSS. Below is the portion of the CSS called Page Background Styles where images should be assigned. /********************************************************************** * Page Background Styles * **********************************************************************/.pagebackground,.pback { background-color: #ffffff; margin: 0px;.pageBorderTL,.pbTL { background: url(../images/topleft.gif) no-repeat; height: 15px; width: 18px;.pageBorderT,.pbT { background: url(../images/topmid.gif) repeat-x; height: 15px; 8
9 .pagebordertr,.pbtr { background: url(../images/topright.gif) no-repeat; height: 15px; width: 18px;.pageBorderL,.pbL { background: url(../images/left.gif) repeat-y; width: 18px;.pageBorderC,.pbC { vertical-align: top;.pageborderr,.pbr { background: url(../images/right.gif) repeat-y; width: 18px;.pageBorderBL,.pbBL { background: url(../images/bottomleft.gif) no-repeat; height: 21px; width: 18px;.pageBorderB,.pbB { background: url(../images/bottommid.gif) repeat-x; height: 21px;.pageBorderBR,.pbBR { background: url(../images/bottomright.gif) no-repeat; height: 21px; width: 18px;.page_yellow,.pContent { background-color: #96C0E6; height: 30px; text-align: left; border-top: #6DA5D9 1px solid; border-right: #6DA5D9 1px solid; border-bottom: #6DA5D9 1px solid; border-left: #6DA5D9 1px solid;.pagealignment,.palign { vertical-align: top;.bordertable,.pbtable { margin: 10px auto 50px auto; 9
10 .divider {.footer { color: #FFFFFF; font-family: Verdana, Geneva, ms sans serif; font-size: 10px; padding-top: 6px;.logoBG { The result should show a layout similar to the following screen shot Step 5: Changing colors, fonts, backgrounds and alignment. Additional CSS classes could always be added although it is recommended to work within the existing classes declared by the design theme. As shown below, you could center the website, apply different color schemes or hide selected graphics which doesn t fit with the new design. /********************************************************************** * Added Custom Styles * **********************************************************************/ body form { background-color: #0060B6; 10
11 html { background-color: #0060B6; img#pageheader LeftImage { display: none;.menu_bg { background-color: #666666; td.pcc table tr td.nav { background-color: #666666; td.pcc table tr td table { margin: 0px auto 0px auto; td.pcb table { margin: 0px auto 0px auto;.footer img { display: block; margin: 0px auto 0px auto; We recommend you to download the sample PresenceConsulting theme folder to examine all changes. It is easier to understand when actual images and codes in action could be seen. Customization can be done before and after the Design theme is loaded. In this tutorial all the work is completed prior to the Application Wizard. Our goal is to create a ready to use Design Theme which can be loaded as one of the selections. In summary we believe that this customization process is manageable for the majority of Iron Speed Designer users. The steps are simple enough yet effective in delivering a basic level customization. Of course more in depth customization is possible where we might have to tread into Iron Speed Designer s territory; that approach should be considered with the level of Iron Speed expertise on a caseby case basis. 11
12 FINAL RESULTS The following screen shots are the custom graphics and CSS applied to different design themes 12
13 Company Background Presence Consulting Group, located in Houston Texas, is an established technical consulting firm servicing a wide range of clients, ranging from land management company to direct mail marketers. Our services include.net consulting, Iron Speed Designer training, database modeling, creative website design, and project management. For more information, please visit or contact
Web 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
HTML TIPS FOR DESIGNING
This is the first column. Look at me, I m the second column.
CHAPTER 10. When you complete this chapter, you will be able to:
Data Tables CHAPTER 10 When you complete this chapter, you will be able to: Use table elements Use table headers and footers Group columns Style table borders Apply padding, margins, and fl oats to tables
Web layout guidelines for daughter sites of Scotland s Environment
Web layout guidelines for daughter sites of Scotland s Environment Current homepage layout of Scotland s Aquaculture and Scotland s Soils (September 2014) Design styles A daughter site of Scotland s Environment
Web Design and Databases WD: Class 7: HTML and CSS Part 3
Web Design and Databases WD: Class 7: HTML and CSS Part 3 Dr Helen Hastie Dept of Computer Science Heriot-Watt University Some contributions from Head First HTML with CSS and XHTML, O Reilly Recap! HTML
JJY s Joomla 1.5 Template Design Tutorial:
JJY s Joomla 1.5 Template Design Tutorial: Joomla 1.5 templates are relatively simple to construct, once you know a few details on how Joomla manages them. This tutorial assumes that you have a good understanding
Dreamweaver CS4 Day 2 Creating a Website using Div Tags, CSS, and Templates
Dreamweaver CS4 Day 2 Creating a Website using Div Tags, CSS, and Templates What is a DIV tag? First, let s recall that HTML is a markup language. Markup provides structure and order to a page. For example,
ICE: HTML, CSS, and Validation
ICE: HTML, CSS, and Validation Formatting a Recipe NAME: Overview Today you will be given an existing HTML page that already has significant content, in this case, a recipe. Your tasks are to: mark it
CREATING A NEWSLETTER IN ADOBE DREAMWEAVER CS5 (step-by-step directions)
CREATING A NEWSLETTER IN ADOBE DREAMWEAVER CS5 (step-by-step directions) Step 1 - DEFINE A NEW WEB SITE - 5 POINTS 1. From the welcome window that opens select the Dreamweaver Site... or from the main
CST 150 Web Design I CSS Review - In-Class Lab
CST 150 Web Design I CSS Review - In-Class Lab The purpose of this lab assignment is to review utilizing Cascading Style Sheets (CSS) to enhance the layout and formatting of web pages. For Parts 1 and
Essential HTML & CSS for WordPress. Mark Raymond Luminys, Inc. 949-654-3890 [email protected] www.luminys.com
Essential HTML & CSS for WordPress Mark Raymond Luminys, Inc. 949-654-3890 [email protected] www.luminys.com HTML: Hypertext Markup Language HTML is a specification that defines how pages are created
mpdf Example 37. Barcodes Contents. 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...
Web Design I. Spring 2009 Kevin Cole Gallaudet University 2009.03.05
Web Design I Spring 2009 Kevin Cole Gallaudet University 2009.03.05 Layout Page banner, sidebar, main content, footer Old method: Use , , New method: and "float" CSS property Think
{color:blue; font-size: 12px;}
CSS stands for cascading style sheets. Styles define how to display a web page. Styles remove the formatting of a document from the content of the document. There are 3 ways that styles can be applied:
Email 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
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
HTML Tables. IT 3203 Introduction to Web Development
IT 3203 Introduction to Web Development Tables and Forms September 3 HTML Tables Tables are your friend: Data in rows and columns Positioning of information (But you should use style sheets for this) Slicing
Using 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
WHITEPAPER. Skinning Guide. Let s chat. 800.9.Velaro www.velaro.com [email protected]. 2012 by Velaro
WHITEPAPER Skinning Guide Let s chat. 2012 by Velaro 800.9.Velaro www.velaro.com [email protected] INTRODUCTION Throughout the course of a chat conversation, there are a number of different web pages that
Web Design and Development ACS-1809. Chapter 9. Page Structure
Web Design and Development ACS-1809 Chapter 9 Page Structure 1 Chapter 9: Page Structure Organize Sections of Text Format Paragraphs and Page Elements 2 Identifying Natural Divisions It is normal for a
Responsive Web Design: Media Types/Media Queries/Fluid Images
HTML Media Types Responsive Web Design: Media Types/Media Queries/Fluid Images Mr Kruyer s list of HTML Media Types to deliver CSS to different devices. Important note: Only the first three are well supported.
ITNP43: HTML Lecture 4
ITNP43: HTML Lecture 4 1 Style versus Content HTML purists insist that style should be separate from content and structure HTML was only designed to specify the structure and content of a document Style
Using 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
Introduction to Adobe Dreamweaver CC
Introduction to Adobe Dreamweaver CC What is Dreamweaver? Dreamweaver is the program that we will be programming our websites into all semester. We will be slicing our designs out of Fireworks and assembling
Self-Service Portal Implementation Guide
Self-Service Portal Implementation Guide Salesforce, Winter 6 @salesforcedocs Last updated: October 0, 05 Copyright 000 05 salesforce.com, inc. All rights reserved. Salesforce is a registered trademark
MCH Strategic Data Best Practices Review
MCH Strategic Data Best Practices Review Presenters Alex Bardoff Manager, Creative Services [email protected] Lindsey McFadden Manager, Campaign Production Services [email protected] 2 Creative
Creating a Resume Webpage with
Creating a Resume Webpage with 6 Cascading Style Sheet Code In this chapter, we will learn the following to World Class CAD standards: Using a Storyboard to Create a Resume Webpage Starting a HTML Resume
LaGuardia Community College 31-10 Thomson Ave, Long Island City, New York 11101 Created by ISMD s Dept. Training Team. Overview
Overview Dreamweaver gives you many options when it comes to setting the properties for your webpages. Within the "Page Properties" dialog box, you can set the appearance of your page, name your page and
Website Login Integration
SSO Widget Website Login Integration October 2015 Table of Contents Introduction... 3 Getting Started... 5 Creating your Login Form... 5 Full code for the example (including CSS and JavaScript):... 7 2
Style & Layout in the web: CSS and Bootstrap
Style & Layout in the web: CSS and Bootstrap Ambient intelligence: technology and design Fulvio Corno Politecnico di Torino, 2014/2015 Goal Styling web content Advanced layout in web pages Responsive layouts
PASTPERFECT-ONLINE DESIGN GUIDE
PASTPERFECT-ONLINE DESIGN GUIDE INTRODUCTION Making your collections available and searchable online to Internet visitors is an exciting venture, now made easier with PastPerfect-Online. Once you have
This document will describe how you can create your own, fully responsive. drag and drop email template to use in the email creator.
1 Introduction This document will describe how you can create your own, fully responsive drag and drop email template to use in the email creator. It includes ready-made HTML code that will allow you to
Kentico CMS, 2011 Kentico Software. Contents. Mobile Development using Kentico CMS 6 2 Exploring the Mobile Environment 1
Contents Mobile Development using Kentico CMS 6 2 Exploring the Mobile Environment 1 Time for action - Viewing the mobile sample site 2 What just happened 4 Time for Action - Mobile device redirection
Outline of CSS: Cascading Style Sheets
Outline of CSS: Cascading Style Sheets nigelbuckner 2014 This is an introduction to CSS showing how styles are written, types of style sheets, CSS selectors, the cascade, grouping styles and how styles
HTML CSS Basic Structure. HTML Structure [Source Code] CSS Structure [Cascading Styles] DIV or ID Tags and Classes. The BOX MODEL
![HTML CSS Basic Structure. HTML Structure [Source Code] CSS Structure [Cascading Styles] DIV or ID Tags and Classes. The BOX MODEL](/thumbs/40/20611446.jpg "HTML CSS Basic Structure. HTML Structure [Source Code] CSS Structure [Cascading Styles] DIV or ID Tags and Classes. The BOX MODEL")
HTML CSS Basic Structure HTML [Hypertext Markup Language] is the code read by a browser and defines the overall page structure. The HTML file or web page [.html] is made up of a head and a body. The head
RESPONSIVE 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
Web Design with CSS and CSS3. Dr. Jan Stelovsky
Web Design with CSS and CSS3 Dr. Jan Stelovsky CSS Cascading Style Sheets Separate the formatting from the structure Best practice external CSS in a separate file link to a styles from numerous pages Style
Building a Horizontal Menu in Dreamweaver CS3 Using Spry R. Berdan
Building a Horizontal Menu in Dreamweaver CS3 Using Spry R. Berdan In earlier versions of dreamweaver web developers attach drop down menus to graphics or hyperlinks by using the behavior box. Dreamweaver
What is CSS? Official W3C standard for controlling presentation Style sheets rely on underlying markup structure
CSS Peter Cho 161A Notes from Jennifer Niederst: Web Design in a Nutshell and Thomas A. Powell: HTML & XHTML, Fourth Edition Based on a tutorials by Prof. Daniel Sauter / Prof. Casey Reas What is CSS?
How To Create A Web Page On A Windows 7.1.1 (For Free) With A Notepad) On A Macintosh (For A Freebie) Or Macintosh Web Browser (For Cheap) On Your Computer Or Macbook (
CREATING WEB PAGE WITH NOTEPAD USING HTML AND CSS The following exercises illustrate the process of creating and publishing Web pages with Notepad, which is the plain text editor that ships as part of
How to use SSO with SharePoint 2010 (FBA) using subdomains. Moataz Esmat EXT.1386
How to use SSO with SharePoint 2010 (FBA) using subdomains Moataz Esmat EXT.1386 I. Browse the web applications using subdomains: After creating the FBA web applications you need to simulate browsing the
Interspire Website Publisher Developer Documentation. Template Customization Guide
Interspire Website Publisher Developer Documentation Template Customization Guide Table of Contents Introduction... 1 Template Directory Structure... 2 The Style Guide File... 4 Blocks... 4 What are blocks?...
Inspiring Creative Fun Ysbrydoledig Creadigol Hwyl. Web Design in Nvu Workbook 1
Inspiring Creative Fun Ysbrydoledig Creadigol Hwyl Web Design in Nvu Workbook 1 The demand for Web Development skills is at an all time high due to the growing demand for businesses and individuals to
Email 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
Development Perspective: DIV and CSS HTML layout. Web Design. Lesson 2. Development Perspective: DIV/CSS
Web Design Lesson 2 Development Perspective: DIV/CSS Why tables have been tabled Tables are a cell based layout tool used in HTML development. Traditionally they have been the primary tool used by web
CSS for Page Layout. Key Concepts
CSS for Page Layout Key Concepts CSS Page Layout Advantages Greater typography control Style is separate from structure Potentially smaller documents Easier site maintenance Increased page layout control
Style Guide Provided courtesy of Innovative Emergency Management Inc.
Style Guide 1. Introduction Louisiana.gov is an enterprise approach for state agencies to work together to provide citizen-centric digital government services and information. Key to achieving this goal
Coding 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.
Magento Responsive Theme Design
Magento Responsive Theme Design Richard Carter Chapter No. 2 "Making Your Store Responsive" In this package, you will find: A Biography of the author of the book A preview chapter from the book, Chapter
Designing 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
CSS - Cascading Style Sheets
CSS - Cascading Style Sheets From http://www.csstutorial.net/ http://www.w3schools.com/css/default.asp What is CSS? CSS stands for Cascading Style Sheets Styles define how to display HTML elements External
Recreate 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)
How 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
Web Building Blocks. Joseph Gilbert User Experience Web Developer University of Virginia Library joe.gilbert@virginia.
Web Building Blocks Core Concepts for HTML & CSS Joseph Gilbert User Experience Web Developer University of Virginia Library [email protected] @joegilbert Why Learn the Building Blocks? The idea
SellerDeck 2014 Responsive Design Guide
SellerDeck 2014 Responsive Design Guide Version: 1.0.0 SellerDeck 2014 Responsive Design 1 Contents Introduction...3 Themes and Wireframe...4 Classic Theme...4 Smart Theme...5 Wireframe...6 How the Responsive
Table of Contents. What is ProSite? What is Behance? How do ProSite & Behance work together? Get Started in 6 Easy Steps.
The Beginners Guide Table of Contents 03 04 05 06 34 35 What is ProSite? What is Behance? How do ProSite & Behance work together? Get Started in 6 Easy Steps See Live Examples Need More Help? What is ProSite?
Fireworks CS4 Tutorial Part 1: Intro
Fireworks CS4 Tutorial Part 1: Intro This Adobe Fireworks CS4 Tutorial will help you familiarize yourself with this image editing software and help you create a layout for a website. Fireworks CS4 is the
Web Design Revision. AQA AS-Level Computing COMP2. 39 minutes. 39 marks. Page 1 of 17
Web Design Revision AQA AS-Level Computing COMP2 204 39 minutes 39 marks Page of 7 Q. (a) (i) What does HTML stand for?... () (ii) What does CSS stand for?... () (b) Figure shows a web page that has been
We 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
GadgetStore. Magento Theme Instructions. 8theme 1 GadgetStore Magento Theme Instructions
GadgetStore Magento Theme Instructions 8theme 1 GadgetStore Magento Theme Instructions Table of Contents Introduction....3 Features.....4 Installation & Configuration...5 Uploading GadgetStore...6 Homepage...10
Web Development 1 A4 Project Description Web Architecture
Web Development 1 Introduction to A4, Architecture, Core Technologies A4 Project Description 2 Web Architecture 3 Web Service Web Service Web Service Browser Javascript Database Javascript Other Stuff:
Last week we talked about creating your own tags: div tags and span tags. A div tag goes around other tags, e.g.,:
CSS Tutorial Part 2: Last week we talked about creating your own tags: div tags and span tags. A div tag goes around other tags, e.g.,: animals A paragraph about animals goes here
RIT Message Center Compose and Send Messages
RIT Message Center Compose and Send Messages Table of Contents Table of Contents... 2 Logging into Message Center... 3 Category Display... 3 Message Center: Create a Message... 4 Create a New Message without
Basics of HTML (some repetition) Cascading Style Sheets (some repetition) Web Design
Basics of HTML (some repetition) Cascading Style Sheets (some repetition) Web Design Contents HTML Quiz Design CSS basics CSS examples CV update What, why, who? Before you start to create a site, it s
Caldes 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
Creating A Webpage Using HTML & CSS
Creating A Webpage Using HTML & CSS Brief introduction. List key learning outcomes: Understanding the basic principles of hypertext markup language (HTML5) and the basic principles of the internal cascading
Adobe 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
A send-a-friend application with ASP Smart Mailer
A send-a-friend application with ASP Smart Mailer Every site likes more visitors. One of the ways that big sites do this is using a simple form that allows people to send their friends a quick email about
Catalog 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
Caldes CM2: Marketing Emails Support Document v1.12
Caldes CM2: Marketing Emails Support Document v1.12 Caldes Enterprise software can be used to send out marketing email. Due to the nature of these being bespoke designs, Caldes make a one off charge to
Microsoft 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,
Further web design: Cascading Style Sheets Practical workbook
Further web design: Cascading Style Sheets Practical workbook Aims and Learning Objectives This document gives an introduction to the use of Cascading Style Sheets in HTML. When you have completed these
Personal Portfolios on Blackboard
Personal Portfolios on Blackboard This handout has four parts: 1. Creating Personal Portfolios p. 2-11 2. Creating Personal Artifacts p. 12-17 3. Sharing Personal Portfolios p. 18-22 4. Downloading Personal
Table of Contents THE DESIGNER S GUIDE TO CREATING NEWZAPP DRAG AND DROP TEMPLATES... 6 THE NEWZAPP SYSTEM... 7
Version 4.0.1 Table of Contents THE DESIGNER S GUIDE TO CREATING NEWZAPP DRAG AND DROP TEMPLATES... 6 THE NEWZAPP SYSTEM... 7 HOW THE SYSTEM WORKS... 7 THE TWO MAIN HTML EMAIL DESIGN OPTIONS FOR NEWZAPP...
WEB DESIGN LAB PART- A HTML LABORATORY MANUAL FOR 3 RD SEM IS AND CS (2011-2012)
WEB DESIGN LAB PART- A HTML LABORATORY MANUAL FOR 3 RD SEM IS AND CS (2011-2012) BY MISS. SAVITHA R LECTURER INFORMATION SCIENCE DEPTATMENT GOVERNMENT POLYTECHNIC GULBARGA FOR ANY FEEDBACK CONTACT TO EMAIL:
Polycom Video Media Center (VMC) 1000 Branding Guide
Polycom Video Media Center (VMC) 1000 Branding Guide 2.0 July 2010 3725-77100-011B Trademark Information Polycom, the Triangles logo, ReadiManager, SoundPoint, SoundStation, ViaVideo, VoiceStation, Vortex,
PORTAL ADMINISTRATION
1 Portal Administration User s Guide PORTAL ADMINISTRATION GUIDE Page 1 2 Portal Administration User s Guide Table of Contents Introduction...5 Core Portal Framework Concepts...5 Key Items...5 Layouts...5
Making a Web Page with Microsoft Publisher 2003
Making a Web Page with Microsoft Publisher 2003 The first thing to consider when making a Web page or a Web site is the architecture of the site. How many pages will you have and how will they link to
Joomla! 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
8 STEPS TO CODE KILLER RESPONSIVE EMAILS
8 STEPS TO CODE KILLER RESPONSIVE EMAILS THAT WILL MAKE YOUR EMAILS BEAUTIFUL 3 BUILD RESPONSIVE EMAIL STEP BY STEP Steps to create a simple responsive email template. (fluid image, main content, two
Google Sites: Creating, editing, and sharing a site
Google Sites: Creating, editing, and sharing a site Google Sites is an application that makes building a website for your organization as easy as editing a document. With Google Sites, teams can quickly
Mobile Web Site Style Guide
YoRk University Mobile Web Site Style Guide Table of Contents This document outlines the graphic standards for the mobile view of my.yorku.ca. It is intended to be used as a guide for all York University
MAGENTO THEME SHOE STORE
MAGENTO THEME SHOE STORE Developer: BSEtec Email: [email protected] Website: www.bsetec.com Facebook Profile: License: GPLv3 or later License URL: http://www.gnu.org/licenses/gpl-3.0-standalone.html 1
How to Customize Support Portals
How to Customize Support Portals 2015 Bomgar Corporation. All rights reserved worldwide. BOMGAR and the BOMGAR logo are trademarks of Bomgar Corporation; other trademarks shown are the property of their
Joomla 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
Create Webpages using HTML and CSS
KS2 Create Webpages using HTML and CSS 1 Contents Learning Objectives... 3 What is HTML and CSS?... 4 The heading can improve Search Engine results... 4 E-safety Webpage... 5 Creating a Webpage... 6 Creating
Web Design & Development - Tutorial 04
Table of Contents Web Design & Development - Tutorial 04... 1 CSS Positioning and Layout... 1 Conventions... 2 What you need for this tutorial... 2 Common Terminology... 2 Layout with CSS... 3 Review the
Website Planning Checklist
Website Planning Checklist The following checklist will help clarify your needs and goals when creating a website you ll be surprised at how many decisions must be made before any production begins! Even
CREATING HORIZONTAL NAVIGATION BAR USING ADOBE DREAMWEAVER CS5
CREATING HORIZONTAL NAVIGATION BAR USING ADOBE DREAMWEAVER CS5 Step 1 - Creating list of links - (5 points) Traditionally, CSS navigation is based on unordered list - . Any navigational bar can be
Designing portal site structure and page layout using IBM Rational Application Developer V7 Part of a series on portal and portlet development
Designing portal site structure and page layout using IBM Rational Application Developer V7 Part of a series on portal and portlet development By Kenji Uchida Software Engineer IBM Corporation Level: Intermediate
NUI Galway Web Training Presentation
NUI Galway Web Training Presentation Welcome Objective To provide training on how best to maintain and update University Web pages while also providing an introduction to systems & services provided by