How to make a Skin for da Journals Tutorial

Size: px
Start display at page:

Download "How to make a Skin for da Journals Tutorial"

Transcription

1 How to make a Skin for da Journals Tutorial

2 With this tutorial I wanna explain the basic objects needed to make a Cascading Style Sheet (CSS) for the deviantart Journal. Before to start you need to know: The CSS feature can be used only by subscribed user deviantart accepts CSS/CSS2/CSS2.1/CSS3 The CSSs aren t both in all browser Tools I usually use the Notepad, is simple and works, but you can use a CSS editor like Dreamweaver. You have to know the basilar HTML and CSS references. If you haven t familiarity with these you can visit and read the tutorials you need. Classes You need to know the classes used in da page. Journal (.journalbox).journaltop.boxtop.list ( a and f ).journaltext.journalbottom Free image hosting If you want you can upload your images (if use them in the CSS). I use or The da size

3 In a page with resolution the deviantart journal module has 580 pixel width. The width size is really important when it is showed in the profile page. When you design the graphic remember this. You can make a CSS with a static width or use a repeated image. The use of a repeated image decreases the weight of the page. Footer and Header The footer and the header are two important tools for the creation of a skin. They could be used to include HTML code. da doesn t support the tables (<table>) so you have to use the divs (<div>). You can use this technique for add a submenu or just for a graphic reason. A concrete example: Header Journal entry <b>title</b> <div class="customtopmenu">menu TEXT HERE</div> <div class="customjournalentry"> This is just a journal entry test. This is just a journal entry test. Footer </div> <div class="customfooter">:thumb :</div> CSS.CustomJournalEntry {background: #f2dbdb;.customtopmenu {background: #e5dfec;.customfooter {background: #dbe5f1; TEST TEST Submit in deviantart You have only two ways to submit your journal. The Complete Journal CSS and the Journal Skin. deviantart Related / Journal CSS / Complete Journal CSS deviantart Related / deviantart Skins / Journal Submitting a Complete Journal CSS you can submit what you want, but for a complete skin you have to submit an archive contains the CSS, the images and the other HTML codes (if want add them). Submitting a Journal Skin you have to go in your update journal module and fill the forms with the CSS and the footer and header (if you want add them) in the

4 Options tab, then click How to and copy the code in How to share. Now you have to submit it in the deviantart Related > deviantart Skins > Journal category as Text File (*.txt) after you submit it you have to upload the images when it will be request. When a skin will be installed the da user with subscription can use it with a simple click on Install Skin in the deviation page. The style In the next steps I explain to you how to create a simple layout and a simple style with a low use of colors (3 or 4 maximum). I usually use the same template and I just edit it, this is really helpful to keep an error-free layout. In the next lines I ll wrote a CSS used in my Journal Skin Red Smile. This journal has static width and is compatible with IE and Mozilla Firefox, but the margins and borders aspect change by browser to browser so I have to use the relative positioning. This is the CSS what I ve submitted for the da CSS Normal CSS div.journalbox { background: # url('journalbox.png') repeat-y left top; text-align: center; cursor: default; width: 550px;.journaltop { background: transparent url('journaltop.png') no-repeat left bottom; color: #FF6900; text-align: right; height: 300px; width: 515px; margin: 0px 0px 0px 10px;.journalbox.journaltop img { display: none;.journalbox.boxtop { text-align: right;.journalbox.journaltop span { font-weight: thin; text-align: right;.journalbox.journaltop h2 { font-size: 11px; text-align: right;.journalbox.list.f { background: transparent no-repeat left top; list-style: url('listicon.png') inside;.journalbox.list.a { background: transparent no-repeat left top; list-style: url('listicon.png') inside;

5 journalbox.list { background: transparent no-repeat left top; text-align: left; line-height: 3px; width: 515px; margin: 0px 0px 0px 12px;.journalbox.list.f strong {.journalbox.list.a strong {.journalbox.journaltext { background: transparent no-repeat left top; text-align: center; width: 515px; margin: 0px 0px 0px 10px;.journalbox.journaltext A:link { text-decoration: underline;.journalbox.journaltext A:active { text-decoration: underline;.journalbox.journaltext A:visited { text-decoration: underline;.journalbox.journaltext A:hover { text-decoration: none;.journalbox.journalbottom A:link { text-decoration: underline;.journalbox.journalbottom A:active { text-decoration: underline;.journalbox.journalbottom A:visited { text-decoration: underline;

6 20 21.journalbox.journalbottom A:hover { text-decoration: none;.journalbox.journalbottom { background: transparent url('journalbottom.png') no-repeat right bottom; color: #000000; font-weight: bolder; text-align: left; vertical-align: middle; height: 79px; width: 515px; margin: 0px 0px 0px 15px; Extra CSS journalbox.journaltext.daiontext { background: transparent no-repeat left top; text-align: justify; width: 512px;.journalbox.journaltext.daiontext li { list-style: url('minilisticon.png') inside;.journalbox.journaltext.daiontext hr { border: 1px solid #AA0000; height: 2px; position: relative; top: 8px; left: 0px;.journalbox.journaltext.daiontext strong { border: 1px solid #AA0000; background: #AA0000 url('strong.png') repeat center top; color: #000000; font-size: 14px; font-weight: bolder; text-align: justify; position: relative; top: -10px; left: 5px; padding: 0px 2px 0px 2px; margin: 0px 2px 0px 2px;.journalbox.journaltext.daiontext div.daionscroll { overflow: auto; width: 500px; height: 150px;.journalbox.journaltext.daionlogo { background: transparent no-repeat right top; position: absolute; top: 0px; left: 0px;

7 Images journalbox.png 1 Vertical Repeat journalbottom.png 21 No Repeat journaltop.png 2 No Repeat strong.png 25 Repeat listicon.png 7/8 No Repeat minilisticon.png 23 No Repeat daionlogo.png 27 No Repeat Extra HTML Code Skin Header Skin Footer Breaker Scrollbox <div class="daiontext"> </div><div class="daionlogo"><a href=" title="created by DarkAion"><img src=" alt="created by DarkAion" /></a></div> <hr><strong>text HERE</strong> <div class="daionscroll">text HERE</div>

8 Result Normal With Extra HTML Code OK. Now we can analyze this. I use the numbers of the classes that I named previously. In the next table I ll include an entry of my journal so you can view a concrete example.

9 1 27 2/4/5/6 2 22/12 24/ (Link: 17/18/19/20) 10/9/7 11/9/8 10/9/7

10 Design subdivision Photoshop can help you saving a lot of time. With the tool sections ( ) you can subdivide the graphics so when you save it you obtain the images subdivided. If you use a gradient you can save it with 1px height when you use a 0 or 180 gradient (set repeat to repeat-x) and with 1px width when you use a 90 or 270 gradient (set repeat to repeat-y). If you use a pattern with 45 orientation you can create a square with matching points, you can repeat it so you will save weight of the skin. Example: I ve just repeated a little square. CSS Proprieties and Layout Design You have to know some useful proprieties. I ll explain to you the proprieties showed in an example popular class. I usually use one declaration, for example I use: border: 2px solid #000000; Instead: border-width: 2px; border-style: solid; border-color: #000000; CSS.class { border: 13px solid #FF0000; background: # url('image.png') 0 0 no-repeat fixed top left; color: #FF0000; font: normal normal normal 9px Verdana; text-align: justify; height: 300px; width: 550px; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; Result

11 Properties and Options Property Options Descriptions Values Border Size border-width Sets the width of the border thin medium thick inherit Style border-sytle Sets the border style none USER DEFINED hidden dotted dashed solid double groove Ridge inset outset inherit Color border-color Sets the border color USER DEFINED in Hex (ex. #000000) or Colors (ex. Black) Background Color background-color Sets the background color Image background-image Sets the background image Position backgroundposition Sets the background position Repeat background-repeat Sets the background repeat Attachment backgroundattachment Sets whether a background fixed or scrolls with the rest of the page USER DEFINED in Hex (ex. #000000) or Colors (ex. Black) none URL top left top center top right center left center center center right bottom left bottom center bottom right USER DEFINED the X per cents and the Y per cents USER DEFINED the X position and the Y position repeat repeat-x repeat-y no-repeat fixed scroll Color Color color Sets the font color USER DEFINED in Hex (ex. #000000) or Colors (ex. Black) Font Family font-family Set the font name as generic (ex. Sansserif) or specific family-name generic-name (ex. Verdana) Size font-size Set the font size xx-small x-small small smaller medium

12 Size font-size-adjust Preserve the X height of the font Stretch font-stretch Condenses or Expands the font Style font-style The font style (ex. Italic) Variant font-variant Sets the font as small-caps Weight font-weight Sets the weight of the fonts (ex. Bold) large x-large xx-large larger length USER DEFINED in Per Cents none USER DEFINED in Number normal wider narrower ultra-condensed extra-condensed condensed semi-condensed semi-expanded expanded extra-expanded ultra-expanded normal italic oblique normal small-caps normal bold bolder light lighter Text-Align Alignment text-align Text Alignment justify center left right Height Height height Height USER DEFINED Width Width width Width USER DEFINED Extra Elements Cration Here I ll show how you can create the extra elements like the scrollbox. Hereunder you ll find the CSS and the HTML codes. If you want you can customize it but remember this: da support only <div>, no <table>. One important tool for the creation of menu and navigation bar is the absolute or relative position. Create extra elements is really simple

13 Scrollbox The scrollbox is a div with one or two scrollbars. The scrollbars will be displayed when a div has a static width or height or both. You have to set the overflow property. In the example I ll create a vertical scrollbar. The overflow property has four values: visible, hidden, scroll, auto. The default value is visible..scrollbox { overflow: auto; width: 500px; height: 150px; CSS HTML <div class="scrollbox"></div> Breaker A breaker is a line what can be used to divide paragraphs or elements. I usually use a horizontal line, the <hr> tag, and a strong text, the <strong> tag. So you can do copy and paste when you need it. Hereunder I ll write a code that works in IE and Firefox. You can set a background image in the strong text. The colors I ll use are black and red, but can customize them. CSS.breaker hr { border: 1px solid #AA0000; height: 2px; position: relative; top: 8px; left: 0px;.breaker strong { border: 1px solid #AA0000; background: #AA0000 repeat top center; color: #000000; font: normal normal bolder 14px Verdana; text-align: justify; position: relative; top: -10px; left: 5px; padding: 0px 2px 0px 2px; margin: 0px 2px 0px 2px; HTML <hr><strong>your TEXT HERE</strong>

{color:blue; font-size: 12px;}

{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:

More information

Introduction to Adobe Dreamweaver CC

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

More information

Web Design for Print Designers WEB DESIGN FOR PRINT DESIGNERS: WEEK 6

Web Design for Print Designers WEB DESIGN FOR PRINT DESIGNERS: WEEK 6 Web Design for Print Designers CSS uses a variety of declarations for styling text. Many use the variations of the font declaration. Other styles are done using different declarations. The font declaration

More information

Web Design with CSS and CSS3. Dr. Jan Stelovsky

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

More information

Contents. Downloading the Data Files... 2. Centering Page Elements... 6

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...

More information

Web Authoring CSS. www.fetac.ie. Module Descriptor

Web Authoring CSS. www.fetac.ie. Module Descriptor The Further Education and Training Awards Council (FETAC) was set up as a statutory body on 11 June 2001 by the Minister for Education and Science. Under the Qualifications (Education & Training) Act,

More information

Web Design and Databases WD: Class 7: HTML and CSS Part 3

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

More information

Creating a Resume Webpage with

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

More information

CSS. CSS - cascading style sheets CSS - permite separar num documento HTML o conteúdo do estilo. ADI css 1/28

CSS. CSS - cascading style sheets CSS - permite separar num documento HTML o conteúdo do estilo. ADI css 1/28 CSS CSS - cascading style sheets CSS - permite separar num documento HTML o conteúdo do estilo ADI css 1/28 Cascaded Style Sheets Por ordem de prioridade: Inline

More information

Simply download Beepip from http://beepip.com and run the file when it arrives at your computer.

Simply download Beepip from http://beepip.com and run the file when it arrives at your computer. Beepip User Guide How To's: How do I install Beepip? Simply download Beepip from http://beepip.com and run the file when it arrives at your computer. How do I set up Beepip? Once you've opened up Beepip,

More information

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 (

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

More information

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 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,

More information

CST 150 Web Design I CSS Review - In-Class Lab

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

More information

Web Design Basics. Cindy Royal, Ph.D. Associate Professor Texas State University

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

More information

Creating Web Pages with Dreamweaver CS 6 and CSS

Creating Web Pages with Dreamweaver CS 6 and CSS Table of Contents Overview... 3 Getting Started... 3 Web Page Creation Tips... 3 Creating a Basic Web Page Exercise... 4 Create a New Page... 4 Using a Table for the Layout... 5 Adding Text... 6 Adding

More information

What is CSS? Official W3C standard for controlling presentation Style sheets rely on underlying markup structure

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?

More information

JJY s Joomla 1.5 Template Design Tutorial:

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

More information

Chapter 7 Page Layout Basics Key Concepts. Copyright 2013 Terry Ann Morris, Ed.D

Chapter 7 Page Layout Basics Key Concepts. Copyright 2013 Terry Ann Morris, Ed.D Chapter 7 Page Layout Basics Key Concepts Copyright 2013 Terry Ann Morris, Ed.D 1 Learning Outcomes float fixed positioning relative positioning absolute positioning two-column page layouts vertical navigation

More information

Using Style Sheets for Consistency

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

More information

LaGuardia Community College 31-10 Thomson Ave, Long Island City, New York 11101 Created by ISMD s Dept. Training Team. Overview

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

More information

Essential 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 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 information

ITNP43: HTML Lecture 4

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

More information

Create Your own Company s Design Theme

Create Your own Company s Design Theme 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

More information

CSS for Page Layout. Key Concepts

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

More information

Web layout guidelines for daughter sites of Scotland s Environment

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

More information

CREATING A NEWSLETTER IN ADOBE DREAMWEAVER CS5 (step-by-step directions)

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

More information

Further web design: Cascading Style Sheets Practical workbook

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

More information

Mobile Web Site Style Guide

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

More information

CREATING HORIZONTAL NAVIGATION BAR USING ADOBE DREAMWEAVER CS5

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

More information

Basic tutorial for Dreamweaver CS5

Basic tutorial for Dreamweaver CS5 Basic tutorial for Dreamweaver CS5 Creating a New Website: When you first open up Dreamweaver, a welcome screen introduces the user to some basic options to start creating websites. If you re going to

More information

Slicing and Coding the Navigation Background in CSS

Slicing and Coding the Navigation Background in CSS CSS Template Tutorial Please take your time to visit http://www.freecss.info Table of Contents Step 1 Setting up. page 3 Step 2 Coding the basics.page 5 Step 3 Coding and slicing the header. page 9 Step

More information

CSS - Cascading Style Sheets

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

More information

Last week we talked about creating your own tags: div tags and span tags. A div tag goes around other tags, e.g.,:

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

More information

Coding Standards for Web Development

Coding Standards for Web Development DotNetDaily.net Coding Standards for Web Development This document was downloaded from http://www.dotnetdaily.net/ You are permitted to use and distribute this document for any noncommercial purpose as

More information

Development Perspective: DIV and CSS HTML layout. Web Design. Lesson 2. Development Perspective: DIV/CSS

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

More information

Web Design and Development ACS-1809. Chapter 9. Page Structure

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

More information

Microsoft Expression Web Quickstart Guide

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,

More information

Positioning Container Elements

Positioning Container Elements Advanced Lesson Group 3 - Element Positioning with CSS Positioning Container Elements The position: style property is used to move block elements to a specific location on the web page. The position style

More information

Scoop Hosted Websites. USER MANUAL PART 4: Advanced Features. Phone: +61 8 9388 8188 Email: scoop@scoopdigital.com.au Website: scoopdigital.com.

Scoop Hosted Websites. USER MANUAL PART 4: Advanced Features. Phone: +61 8 9388 8188 Email: scoop@scoopdigital.com.au Website: scoopdigital.com. Scoop Hosted Websites USER MANUAL PART 4: Advanced Features Phone: +61 8 9388 8188 Email: scoop@scoopdigital.com.au Website: scoopdigital.com.au Index Advanced Features... 3 1 Integrating Third Party Content...

More information

Contents. Introduction... 2. Downloading the Data Files... 2

Contents. Introduction... 2. Downloading the Data Files... 2 Creating a Web Page Using HTML Part 3: Multi-page Management and Uploading INFORMATION TECHNOLOGY SERVICES California State University, Los Angeles Version 1.1 Summer 2009 Contents Introduction... 2 Downloading

More information

CHAPTER 10. When you complete this chapter, you will be able to:

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

More information

Style & Layout in the web: CSS and Bootstrap

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

More information

Base template development guide

Base template development guide Scandiweb Base template development guide General This document from Scandiweb.com contains Magento theme development guides and theme development case study. It will basically cover two topics Magento

More information

Sample Table. Columns. Column 1 Column 2 Column 3 Row 1 Cell 1 Cell 2 Cell 3 Row 2 Cell 4 Cell 5 Cell 6 Row 3 Cell 7 Cell 8 Cell 9.

Sample Table. Columns. Column 1 Column 2 Column 3 Row 1 Cell 1 Cell 2 Cell 3 Row 2 Cell 4 Cell 5 Cell 6 Row 3 Cell 7 Cell 8 Cell 9. Working with Tables in Microsoft Word The purpose of this document is to lead you through the steps of creating, editing and deleting tables and parts of tables. This document follows a tutorial format

More information

Adobe Illustrator CS6. Illustrating Innovative Web Design

Adobe Illustrator CS6. Illustrating Innovative Web Design Overview In this seminar, you will learn how to create a basic graphic in Illustrator, export that image for web use, and apply it as the background for a section of a web page. You will use both Adobe

More information

Responsive Web Design: Media Types/Media Queries/Fluid Images

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.

More information

HTML5 and CSS3 Design with CSS Page 1

HTML5 and CSS3 Design with CSS Page 1 HTML5 and CSS3 Design with CSS Page 1 1 12 2 3 3 4 45 5 6 6 7 7 HTML5 and CSS3 DESIGN WITH CSS Styles in HTML Documents Styles provide a method of creating consistent formatting of elements throughout

More information

WYSIWYG Editor in Detail

WYSIWYG Editor in Detail WYSIWYG Editor in Detail 1. Print prints contents of the Content window 2. Find And Replace opens the Find and Replace dialogue box 3. Cut removes selected content to clipboard (requires a selection) 4.

More information

Full report on all 24 clients

Full report on all 24 clients 1 of 6 3/15/2011 11:05 AM Campaign Monitor - Home Features Pricing Customers Resources Support Our Story Blog Sign Up Login Create an Account Tips & Resources Designing and building emails Designing an

More information

Code View User s Guide

Code View User s Guide Code View User s Guide 1601 Trapelo Road Suite 329 Waltham, MA 02451 www.constantcontact.com Constant Contact, Inc. reserves the right to make any changes to the information contained in this publication

More information

Basics of HTML (some repetition) Cascading Style Sheets (some repetition) Web Design

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

More information

Designing HTML Emails for Use in the Advanced Editor

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

More information

Cascading Style Sheets (CSS)

Cascading Style Sheets (CSS) 6 Cascading Style Sheets (CSS) Objectives To control the appearance of a Web site by creating style sheets. To use a style sheet to give all the pages of a Web site the same look and feel. To use the class

More information

GUIDE TO CODE KILLER RESPONSIVE EMAILS

GUIDE 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 information

Edline Manual Design Guide Version: September 2011

Edline Manual Design Guide Version: September 2011 Edline Manual Design Guide Version: September 2011 Copyright Statements: Edline software is a trademark of Edline. Copyright 2011. Microsoft Windows names and logos are registered trademarks of the Microsoft

More information

ADOBE DREAMWEAVER CS3 TUTORIAL

ADOBE 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 information

Edline Manual Design Guide Version: November 2011

Edline Manual Design Guide Version: November 2011 a Blackboard company Edline Manual Design Guide Version: November 2011 Copyright Statements: Edline software is a trademark of Edline, a Blackboard company. Copyright 2011-2012. Microsoft Windows names

More information

Joomla! template JSN Mico Customization Manual

Joomla! template JSN Mico Customization Manual Joomla! template JSN Mico Customization Manual (for JSN Mico 1.0.x) www.facebook.com/joomlashine www.twitter.com/joomlashine www.youtube.com/joomlashine This documentation is release under Creative Commons

More information

Responsive Web Design for Teachers. Exercise: Building a Responsive Page with the Fluid Grid Layout Feature

Responsive 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 information

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 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 information

Level 1 - Clients and Markup

Level 1 - Clients and Markup Level 1 - Clients and Markup The design for the email we ll build In this level The skills you ll need to compete Power Moves HTML and CSS Media queries Signature Move Using external resources An HTML

More information

Cascading Style Sheet (CSS) Tutorial Using Notepad. Step by step instructions with full color screen shots

Cascading Style Sheet (CSS) Tutorial Using Notepad. Step by step instructions with full color screen shots Updated version September 2015 All Creative Designs Cascading Style Sheet (CSS) Tutorial Using Notepad Step by step instructions with full color screen shots What is (CSS) Cascading Style Sheets and why

More information

Email Creator Coding Guidelines Toolbox

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

More information

Stylesheet or in-line CSS CSS attributes, used in stylesheets or in-line, can define:

Stylesheet or in-line CSS CSS attributes, used in stylesheets or in-line, can define: Stylesheet or in-line CSS CSS attributes, used in stylesheets or in-line, can define: body, div, p, h1 - h6, hr, table, thead, tr, th, td, blockquote, address, ol, ul, dl, dt, dd span, a, font class e.g..stylename

More information

Joomla Article Advanced Topics: Table Layouts

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

More information

Advanced Editor User s Guide

Advanced Editor User s Guide Advanced Editor User s Guide 1601 Trapelo Road Suite 329 Waltham, MA 02451 www.constantcontact.com Constant Contact, Inc. reserves the right to make any changes to the information contained in this publication

More information

ICE: HTML, CSS, and Validation

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

More information

introduces the subject matter, presents clear navigation, is easy to visually scan, and leads to more in-depth content. Additional Resources 10

introduces the subject matter, presents clear navigation, is easy to visually scan, and leads to more in-depth content. Additional Resources 10 STYLE GUIDE Style Guide for Course Design Think of your Moodle course page as the homepage of a website. An effective homepage: introduces the subject matter, presents clear navigation, is easy to visually

More information

USER GUIDE. Unit 4: Schoolwires Editor. Chapter 1: Editor

USER 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 information

Joomla! template JSN Boot Customization Manual

Joomla! template JSN Boot Customization Manual Joomla! template JSN Boot Customization Manual (for JSN Boot 1.0.x) www.facebook.com/joomlashine www.twitter.com/joomlashine www.youtube.com/joomlashine This documentation is release under Creative Commons

More information

Click on the links below to find the appropriate place in the document

Click on the links below to find the appropriate place in the document Index Click on the links below to find the appropriate place in the document Masthead Masthead is the large line of colour at the top of the Service Manager Screen. The Masthead also includes; The Customer

More information

Sizmek Features. Wallpaper. Build Guide

Sizmek Features. Wallpaper. Build Guide Features Wallpaper Build Guide Table Of Contents Overview... 3 Known Limitations... 4 Using the Wallpaper Tool... 4 Before you Begin... 4 Creating Background Transforms... 5 Creating Flash Gutters... 7

More information

Google Sites: Site Creation and Home Page Design

Google Sites: Site Creation and Home Page Design Google Sites: Site Creation and Home Page Design This is the second tutorial in the Google Sites series. You should already have your site set up. You should know its URL and your Google Sites Login and

More information

How to make a custom Joomla template!

How to make a custom Joomla template! How to make a custom Joomla template! Part 2 NOTE: This Tutorial has been donated by a Thomas Nielsen. This work is licensed under a Creative Commons Attributon NonCommercial ShareAlike 2.5 License. Lets

More information

Website Editor User Guide

Website 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 information

MCH Strategic Data Best Practices Review

MCH Strategic Data Best Practices Review MCH Strategic Data Best Practices Review Presenters Alex Bardoff Manager, Creative Services abardoff@whatcounts.com Lindsey McFadden Manager, Campaign Production Services lmcfadden@whatcounts.com 2 Creative

More information

Dreamweaver and Fireworks MX Integration Brian Hogan

Dreamweaver and Fireworks MX Integration Brian Hogan Dreamweaver and Fireworks MX Integration Brian Hogan This tutorial will take you through the necessary steps to create a template-based web site using Macromedia Dreamweaver and Macromedia Fireworks. The

More information

The Essential Guide to HTML Email Design

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 information

We automatically generate the HTML for this as seen below. Provide the above components for the teaser.txt file.

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

More information

Joomla! Class Suffix Guides

Joomla! Class Suffix Guides Joomla! Class Suffix Guides By Muhammad Syafiq 29 January 2008 Acknowledgements & License License This document is released under the Joomla! Electronic Documentation License Acknowledgements I would like

More information

Web Design I. Spring 2009 Kevin Cole Gallaudet University 2009.03.05

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

More information

ITP 101 Project 3 - Dreamweaver

ITP 101 Project 3 - Dreamweaver ITP 101 Project 3 - Dreamweaver Project Objectives You will also learn how to make a website outlining your company s products, location, and contact info. Project Details USC provides its students with

More information

Using an external style sheet with Dreamweaver (CS6)

Using an external style sheet with Dreamweaver (CS6) Using an external style sheet with Dreamweaver (CS6) nigelbuckner.com 2012 This handout explains how to create an external style sheet, the purpose of selector types and how to create styles. It does not

More information

Building a Horizontal Menu in Dreamweaver CS3 Using Spry R. Berdan

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

More information

Page layout & typography. graphic design

Page layout & typography. graphic design Page layout & typography graphic design first impressions lecture goals To help you better communicate the purpose of your web pages by visually emphasizing the most important features and relationships

More information

Caldes CM12: Content Management Software Introduction v1.9

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

More information

Create a Poster Using Publisher

Create 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 information

How to craft a modern, mobile-optimized HTML email template. Jason Samuels, NCFR IT Manager DrupalCamp Twin Cities May 2012

How to craft a modern, mobile-optimized HTML email template. Jason Samuels, NCFR IT Manager DrupalCamp Twin Cities May 2012 How to craft a modern, mobile-optimized HTML email template Jason Samuels, NCFR IT Manager DrupalCamp Twin Cities May 2012 Our old email template Pros Simple Lightweight Worked as plain-text Rendered OK

More information

IE Class Web Design Curriculum

IE Class Web Design Curriculum Course Outline Web Technologies 130.279 IE Class Web Design Curriculum Unit 1: Foundations s The Foundation lessons will provide students with a general understanding of computers, how the internet works,

More information

Table of Contents. What is ProSite? What is Behance? How do ProSite & Behance work together? Get Started in 6 Easy Steps.

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?

More information

Using Adobe Dreamweaver CS4 (10.0)

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

More information

Quick Start Guide To: Using the Sage E-marketing Online Editor

Quick 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 information

Fireworks CS4 Tutorial Part 1: Intro

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

More information

Dreamweaver. Introduction to Editing Web Pages

Dreamweaver. Introduction to Editing Web Pages Dreamweaver Introduction to Editing Web Pages WORKSHOP DESCRIPTION... 1 Overview 1 Prerequisites 1 Objectives 1 INTRODUCTION TO DREAMWEAVER... 1 Document Window 3 Toolbar 3 Insert Panel 4 Properties Panel

More information

Outline of CSS: Cascading Style Sheets

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

More information

Email Campaign Guidelines and Best Practices

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

More information

7 th Annual LiveText Collaboration Conference. Advanced Document Authoring

7 th Annual LiveText Collaboration Conference. Advanced Document Authoring 7 th Annual LiveText Collaboration Conference Advanced Document Authoring Page of S. La Grange Road, nd Floor, La Grange, IL 6055-455 -866-LiveText (-866-548-3839) edu-solutions@livetext.com Page 3 of

More information

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 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

More information

Enhanced Formatting and Document Management. Word 2010. Unit 3 Module 3. Diocese of St. Petersburg Office of Training Training@dosp.

Enhanced Formatting and Document Management. Word 2010. Unit 3 Module 3. Diocese of St. Petersburg Office of Training Training@dosp. Enhanced Formatting and Document Management Word 2010 Unit 3 Module 3 Diocese of St. Petersburg Office of Training Training@dosp.org This Page Left Intentionally Blank Diocese of St. Petersburg 9/5/2014

More information

Kentico CMS 7.0 Personal Site Guide

Kentico CMS 7.0 Personal Site Guide Kentico CMS 7.0 Personal Site Guide 2 Kentico CMS 7.0 Personal Site Guide Table of Contents Personal Site Guide 4... 4 Overview Getting Started 6... 6 Editing content... 8 Adding a blog post... 11 Adding

More information