How to make a Skin for da Journals Tutorial
|
|
- Roderick Dixon
- 7 years ago
- Views:
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;}
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 informationIntroduction 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 informationWeb 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 informationWeb 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 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 informationWeb 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 informationWeb 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 informationCreating 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 informationCSS. 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 informationSimply 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 informationHow 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 informationDreamweaver 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 informationCST 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 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 informationCreating 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 informationWhat 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 informationJJY 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 informationChapter 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 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 informationLaGuardia 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 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 informationITNP43: 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 informationCreate 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 informationCSS 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 informationWeb 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 informationCREATING 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 informationFurther 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 informationMobile 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 informationCREATING 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 informationBasic 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 informationSlicing 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 informationCSS - 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 informationLast 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 informationCoding 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 informationDevelopment 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 informationWeb 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 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 informationPositioning 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 informationScoop 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 informationContents. 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 informationCHAPTER 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 informationStyle & 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 informationBase 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 informationSample 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 informationAdobe 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 informationResponsive 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 informationHTML5 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 informationWYSIWYG 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 informationFull 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 informationCode 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 informationBasics 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 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 informationCascading 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 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 informationEdline 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 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 informationEdline 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 informationJoomla! 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 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 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 informationLevel 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 informationCascading 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 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 informationStylesheet 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 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 informationAdvanced 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 informationICE: 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 informationintroduces 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 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 informationJoomla! 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 informationClick 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 informationSizmek 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 informationGoogle 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 informationHow 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 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 informationMCH 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 informationDreamweaver 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 informationThe 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 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 informationJoomla! 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 informationWeb 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 informationITP 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 informationUsing 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 informationBuilding 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 informationPage 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 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 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 informationHow 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 informationIE 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 informationTable 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 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 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 informationFireworks 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 informationDreamweaver. 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 informationOutline 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 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 information7 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 informationHTML 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 informationEnhanced 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 informationKentico 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