Creating Templates with Artisteer - Jakub Sanecki - E-Book

Creating Templates with Artisteer E-Book

Jakub Sanecki

0,0
20,39 €

-100%
Sammeln Sie Punkte in unserem Gutscheinprogramm und kaufen Sie E-Books und Hörbücher mit bis zu 100% Rabatt.

Mehr erfahren.
Beschreibung

Designing good looking, professional quality web templates or building your own website are rather complicated tasks, demanding a lot of technical and graphical expertise. Artisteer has changed this situation, enabling you to do it by yourself, without the need to learn skills such as HTML, web-programming languages, or drawing."Creating stunning Templates with Artisteer" is a practical, step-by-step guide that will show you how you can prepare an elegant, professional looking website, on your own, using features of Artisteer. It also describes the process of designing templates for various popular CMS platforms like WordPress or Joomla!, by giving you practical hints, showing how to install those templates and how to import the content into CMS. "Creating stunning Templates with Artisteer" leads you through the process of designing a website, including all standard layout elements, from header to the footer, including menus and special boxes. You will learn how to prepare the templates, store them and export them in the form of ready-to-use HTML pages or packages that can be installed in various CMS platforms such as WordPress, Joomla!, Drupal, or DotNetNuke. The last part of the book shows you some tips and tricks that allow you to extend standard themes generated by Artisteer for enriching the website with image gallery, combining two menus, and more.You will learn how to create a professional quality website or CMS template on your own, with the use of Artisteer with minimal technical difficulties.

Das E-Book können Sie in Legimi-Apps oder einer beliebigen App lesen, die das folgende Format unterstützen:

EPUB
MOBI

Seitenzahl: 204

Veröffentlichungsjahr: 2013

Bewertungen
0,0
0
0
0
0
0
Mehr Informationen
Mehr Informationen
Legimi prüft nicht, ob Rezensionen von Nutzern stammen, die den betreffenden Titel tatsächlich gekauft oder gelesen/gehört haben. Wir entfernen aber gefälschte Rezensionen.



Table of Contents

Creating Templates with Artisteer
Credits
About the Author
Acknowledgement
About the Reviewer
www.PacktPub.com
Support files, eBooks, discount offers and more
Why Subscribe?
Free Access for Packt account holders
Preface
What this book covers
What you need for this book
Who this book is for
Conventions
Reader feedback
Customer support
Downloading the example code
Errata
Piracy
Questions
1. Meet the Artisteer
What is Artisteer
Artisteer versus other software tools
Who can use Artisteer
Hobbyists
Designers
Web developers and programmers
Web development companies
Your first template in 10 minutes
Creating a new project
The program interface
The Suggestion tool
Previewing the project
Initial customizations
Saving the project
Exporting the template
Removing the Footnote
Summary
2. The Template Step-by-Step
Templates
The common parts of a website
Elements
Header
Horizontal menu
Vertical menu
Content area
Special blocks
Footer
Attributes
Page width
Typography
Colors
Layout
One-column layout
Two-column layout
Three-column layout
Creating a template
Layout
Columns and their content
Colors
Background
Pages
Adding, removing, and renaming the pages
Page properties
Header
Title and slogan
Pictures
Shapes
Ordering shapes and pictures
Flash
Menu
Horizontal menu
Menu Area
Item
Coloring
Levels
No submenu (no subitems)
One column – multilevel
One column – extended
Multi-column – megamenu
Multi-column – megamenu extended
Vertical menu
Vertical menu behavior
Determining the pages displayed in menus
Content
Writing articles
Inserting images
Inserting a slideshow
Slideshow in the content area
Slideshow in header
Typography
Color theme
Footer
Summary
3. CMS Templates
What is CMS
Static page template versus CMS template
Specific CMS template elements
Post header icons
Post footer icons
Advanced techniques
Displaying positions in a Joomla! template
Additional template position in the header
Additional template positions in the footer
Joomla! templates
Template Areas
Exporting a Joomla! template
Installing a Joomla! template
Setting up the template
Title and Slogan
Horizontal menu
Vertical menu
Footer modification
Importing content
WordPress templates
Widget areas
Exporting a WordPress template
Setting up the template
Title and slogan
Customizing the footer
Menus
Importing content
Drupal
DotNetNuke
Content editing – Artisteer or CMS
Summary
4. Tips and Tricks
Image links in a slideshow
Removing the vertical menu from some pages
Styling a particular module
Styling from scratch
Combinations with other Artisteer-generated classes
Adding additional CSS to the project
Another way of modifying CSS files
Making a copy of a web page
Adding Lightbox
Summary
Index

Creating Templates with Artisteer

Creating Templates with Artisteer

Copyright © 2013 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

First published: March 2013

Production Reference: 1120313

Published by Packt Publishing Ltd.

Livery Place

35 Livery Street

Birmingham B3 2PB, UK.

ISBN 978-1-84969-941-9

www.packtpub.com

Cover Image by Suresh Mogre (<[email protected]>)

Credits

Author

Jakub Sanecki

Reviewer

Mark Conroy

Acquisition Editor

Mary Nadar

Commissioning Editor

Priyanka Shah

Technical Editors

Charmaine Pereira

Amit Ramadas

Copy Editors

Laxmi Subramanian

Ruta Waghmare

Project Coordinator

Sneha Modi

Proofreader

Martin Diver

Indexer

Monica Ajmera

Graphics

Aditi Gajjar

Production Coordinator

Shantanu Zagade

Cover Work

Shantanu Zagade

About the Author

Jakub Sanecki is an experienced web developer and programmer, with over 11 years of experience. He was born in 1977 in Poland. In 2001, right before graduation (he graduated in company management) he founded Fregata—a company where he works until today, and took up his true passion, information technology. Starting with providing services related to a popular ERP system, the company evolved in the direction of programming services and custom software development. With the increasing popularity of the Internet, it concentrated on web applications' and websites' development. Author of many web and desktop applications, Jakub works as an independent IT consultant and freelancer, realizing projects of various size and complexity, for companies of various sizes. He also provides training courses related to IT and web technologies and the techniques to use them in the company environment. For some years he worked as a university teacher, teaching web and desktop programming.

Fregata is an authorized reseller of Extensoft. You can visit www.szablonik.net, as it provides support and additional information about this software tool.

Privately, a husband and father of two children, Jakub lives with his family in Sosnowiec (in Poland), spending little moments of free time playing piano or reading books.

Acknowledgement

Almost every book starts with some words, in which the authors thank people who have supported him/her and allowed him/her to finish the writing of the book. Following this nice and proper tradition, I would also like to thank the people, without whom this book would not have come into existence. First of all, I would like to thank to my wife, Hania, who supported me all the time and forgave all my whims while I was writing, taking care of our home and our son, and forgiving me for spending less time with them.

I would like to thank my parents who bought me my first computers and who always took care and trusted in me, even if my decisions seemed controversial to them. Without their acceptance and trust, I couldn't have realized my passion and started to make a living by founding a small IT company.

I would like to thank the rest of my family and my friends, for their patience and understanding while I was writing, as I didn't find time to meet them.

Last but not least, I would like to thank the people from Packt Publishing, who gave me a chance to write this book and did a great job, spending a lot of their time and work by correcting my initial drafts and providing valuable suggestions. Without their experience, knowledge, and commitment, I wouldn't have been able to finish this project.

About the Reviewer

Mark Conroy is a web developer and public speaker based in Galway, Ireland. A former English teacher by profession, he began designing websites as a hobby for friends' bands and local community groups. Since his humble beginning with Adobe Dreamweaver, he has graduated to working, almost exclusively, with Drupal, embracing open source technology whenever possible. As a speaker, he mostly presents on uses of digital media for effective campaigning. He has also presented at Drupal for Government days in Dublin on creating social networks using Drupal. Mark is a co-organizer of the monthly Galway Drupal Meetup.

As a freelance developer working under the name A Design For Life—www.adesignforlife.net, Mark has worked on a number of large projects, not least of which was the redevelopment of the Ireland Reaching Out website (www.irelandxo.com) that he built single-handedly from the ground up, using a combination of Drupal Commons (and some extra contributed Drupal modules), Artisteer, CSS, and CiviCRM. All functionality on the site was completed using innovative approaches to pre-existing modules from drupal.org. He also built and continues to maintain the political campaigns and contacts website contact.ie, which has become the most popular online method for contacting politicians in Ireland.

This is the first technical book Mark has worked on. He has, however, published a textbook for English students, In Transition: An Anthology of Texts and Tasks for Transition Year Students, is awaiting publication of a second English textbook, and is about to start work on his third.

Mark is available for long and/or short-term freelance work, especially in the area of Drupal and campaign technologies. You can contact him at <[email protected]> or <[email protected]>.

www.PacktPub.com

Support files, eBooks, discount offers and more

You might want to visit www.PacktPub.com for support files and downloads related to your book.

Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.PacktPub.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at <[email protected]> for more details.

At www.PacktPub.com, you can also read a collection of free technical articles, sign up for a range of free newsletters and receive exclusive discounts and offers on Packt books and eBooks.

http://PacktLib.PacktPub.com

Do you need instant solutions to your IT questions? PacktLib is Packt's online digital book library. Here, you can access, read and search across Packt's entire library of books. 

Why Subscribe?

Fully searchable across every book published by PacktCopy and paste, print and bookmark contentOn demand and accessible via web browser

Free Access for Packt account holders

If you have an account with Packt at www.PacktPub.com, you can use this to access PacktLib today and view nine entirely free books. Simply use your login credentials for immediate access.

Preface

Designing good-looking, professional-quality web templates or building your own website is a complicated task. Artisteer has changed this situation, enabling anyone to do it by themselves, without the need to learn things such as HTML, web-programming languages, or drawing. Creating Templates with Artisteer is a practical, step-by-step guide that will show you how to prepare an elegant, professional-looking website on your own, using the features of Artisteer.

This book is great for enthusiasts, Artisteer users, and individuals who want to create professional-looking websites without paying for professional services, expensive tools, and also to speed up the work and automate time-consuming tasks.

What this book covers

Chapter 1, Meet the Artisteer, helps you to learn what Artisteer exactly is and how it can be useful for you. We will familiarize you with the interface and some basic functions of the application. You will also prepare your very first template.

Chapter 2, The Template Step-by-Step, covers the typical process of designing with Artisteer, explaining all the typical elements of the template one by one. At the end of this chapter, you will be able to prepare your simple website all alone.

Chapter 3, CMS Templates, discusses advantages of using a content management system (CMS) over a static website, and how to use Artisteer for designing templates for such solutions. We will convert our example project into Joomla! and WordPress installable packages, and also import the content from Artisteer into CMS.

Chapter 4, Tips and Tricks, shows you some additional effects you can enrich your project with by slightly modifying the source code generated by the program.

What you need for this book

In order to appreciate this book completely, we recommend you to have Version 4 of Artisteer, which can be downloaded from http://www.artisteer.com/, and Notepad++, which can be downloaded from http://notepad-plus-plus.org/.

Who this book is for

This book is addressed to anyone wanting to build their private or company website on their own, without learning technical stuff such as HTML, CSS, or programming, and for professionals considering including Artisteer into their toolkit. It's also addressed to all the less-advanced Artisteer users, looking for a printed guide.

Conventions

In this book, you will find a number of styles of text that distinguish between different kinds of information. Here are some examples of these styles, and an explanation of their meaning.

Code words in text are shown as follows: "Edit the template.css file once again and append the following code at the end:"

A block of code is set as follows:

.customart-nostyle.MySpecialModule { margin-top: 0; border: none; }

New terms and important words are shown in bold. Words that you see on the screen, in menus or dialog boxes for example, appear in the text like this: "Choose the Colors & Fonts tab on the ribbon.".

Note

Warnings or important notes appear in a box like this.

Tip

Tips and tricks appear like this.

Reader feedback

Feedback from our readers is always welcome. Let us know what you think about this book—what you liked or may have disliked. Reader feedback is important for us to develop titles that you really get the most out of.

To send us general feedback, simply send an e-mail to <[email protected]>, and mention the book title via the subject of your message.

If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide on www.packtpub.com/authors.

Customer support

Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.

Downloading the example code

You can download the example code files for all Packt books you have purchased from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.

Errata

Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books—maybe a mistake in the text or the code—we would be grateful if you would report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting http://www.packtpub.com/submit-errata, selecting your book, clicking on the errata submission form link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded on our website, or added to any list of existing errata, under the Errata section of that title. Any existing errata can be viewed by selecting your title from http://www.packtpub.com/support.

Piracy

Piracy of copyright material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works, in any form, on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy.

Please contact us at <[email protected]> with a link to the suspected pirated material.

We appreciate your help in protecting our authors, and our ability to bring you valuable content.

Questions

You can contact us at <[email protected]> if you are having a problem with any aspect of the book, and we will do our best to address it.

Chapter 1. Meet the Artisteer

In this book, you will see that you are able to design and prepare a professional-quality website template all alone, without anybody's help. You don't need to know how to draw or how to code. You don't need to worry about HTML, CSS, PHP, and all that complicated stuff. All you need is your copy of Artisteer.

You may ask, "What is Artisteer?"

What is Artisteer

Artisteer is an Automated Web Designer. What does it mean? In simple words, it's an application that lets you prepare great websites, even if you don't know anything about drawing, programming, web technology, and all that stuff. With Artisteer, you can design your website, fill it with content, and in the end, generate the ready-to-use HTML/CSS files that you can upload to your web server (in fact, this can also be done in Artisteer). You can also automatically generate any layout in the form of a template dedicated to one of several well-known CMS systems, such as Joomla!, Drupal, WordPress, or DotNetNuke. The design process looks totally different in comparison to the traditional way in which it's usually done. While you still have a lot of control and can decide many aspects of your design, the drawing process is done automatically and doesn't demand any graphic skills from you, except a good eye for what looks good on a page. And it's fast. Indeed very, very fast.

Artisteer was the first application of its kind in the market and still remains one of the best tools in this category.

Artisteer versus other software tools

Because Artisteer is a new kind of tool, it is hard to give a proper definition of what it is. There are a lot of easier ways to say what Artisteer is not. This will allow us to avoid any confusion about what it should be compared with. If we consider the typical process of building a website, it usually consists of several stages as follows:

Firstly, a designer prepares a design. He usually works with a graphics editor.When the design is ready, it's analyzed in detail to qualify what can be achieved with HTML/CSS, and what has to stay as pictures. Then the whole layout is sliced into small pictures.A web developer prepares the layout in the HTML language and places every single picture into its proper position with the help of CSS. To illustrate the look of the site and to be able to choose the appropriate typography, the places for content are usually filled with some dummy text (for example, "Lorem ipsum dolor sit amet…). He does this usually with a code editor.The dummy text gets replaced with the target content. This task is usually done with the help of a WYSIWYG editor. At the end of this stage, we have a complete static website.If the website should contain some more sophisticated elements, such as photo galleries, fancy tooltips, movies, forms, and so on, or if it should be transformed into a template for a CMS, an additional code has to be written. This is the job of a programmer, who writes the code in a code editor using a client-side or server-side language (according to what should be achieved).

This allocation of tasks is of course quite hypothetical, and it may vary in particular teams and companies, but the goal was to show you the flow of the overall process. Sometimes the entire process is done by a single person, but in the case of bigger projects, it's not uncommon that every stage is realized by a group of people. Therefore, we're talking about a group of people (a team of various specialists) using different tools, such as graphics editors, WYSIWYG HTML editors, code editors, and so on.

Artisteer is not a graphics editor. In a graphics editor, you must design everything by hand, while in Artisteer all the elements (for example, header, menu, and so on) are generated automatically, according to the parameters you set via the program's interface. Graphic editors offer sophisticated tools, which Artisteer doesn't contain, to process pictures and photos. In a graphics editor you can create any graphic, while in Artisteer the only thing you can design is a website.Artisteer is not a WYSIWYG editor. In a What You See Is What You Get (WYSIWYG) editor, you can type the words and insert the graphic elements into a website in a similar way as you would use a word processor (for example, MS Word) and the application automatically transforms everything into an HTML code. The layout elements in Artisteer are not just graphics, they are highly interactive and you have a lot of control over them. You can resize them, change the color, border, placement, and almost any other aspect of their look and feel. Your actions are not transformed into HTML immediately. You work with a binary Artisteer project (.artx files), and only when you press the Export button, the layout is exported. What it means is that all the layout is processed in one go and the HTML/CSS/JavaScript/PHP code is generated. But it's also true, that the way of working with Artisteer is practically WYSIWYG—you don't see any code, but the final design.Artisteer is not a code editor. You can press the Show the code button and take a look at the HTML file that will be generated (and even change it), but this is not the native way you will work with this application. The native way is "point and click". In a code editor you write the code and preview the results. In Artisteer you modify the results and preview the generated code.Artisteer is also not a collection of predesigned layouts, as many people seem to think. There is no upper limit on the unique layouts that can be created, because the answer is unlimited. It's true that the program contains a limited number of graphics and predefined elements, for example, menu. But the possibility of inserting your own images and determining almost any aspect of the elements (size, colors, fonts, and so on) suggests that you are a real designer, and not just someone who selects a template from the predefined options.

The tools that are most similar to Artisteer are other web builder applications. The difference is in what you can change and set up. As I mentioned earlier, you can change almost everything in Artisteer.

Who can use Artisteer

So who is Artisteer dedicated to? The potential audience of this program is very large. I can't be sure, but I feel that the intention of Artisteer's creators was to create a tool that allows the nongraphic and nontechnician people to create complete and great-looking websites. This would place Artisteer as a tool for hobbyists and enthusiasts, but the scope of users is much larger. Let's consider this problem from several different points of view.

Hobbyists

A hobbyist is somebody who wants to have a website because of his/her private passion. It's not his/her job, it's not his/her business, he/she won't gain any money on it. It may be a private blog on Blogger or WordPress, or just a simple family website, often based on the cheapest hosting service possible. For such a person, hiring a professional web development company or freelancer is usually not an option because of the cost. Usually, the only available option is to try to prepare the page on his/her own (the results will be adequate to his/her skills), or to buy a ready-made template (accepting the fact that there are a lot of different websites that look the same). Artisteer gives such people a third option: buy the program and prepare a unique and good-looking site all alone. The cost will be less than the usual price for a ready-made, standard layout on the market.

Designers

A designer is an artistically talented person who can use the graphics editors and create good-looking designs for web pages. In a team, a designer usually does the first stage of work, creating an overall concept of how the site will look, and preparing the graphics. While a designer is good at drawing, he/she can't code. To create a website a designer needs the help of a web developer. But with Artisteer, he/she can design the template and enrich it with his/her own custom graphic elements, which he/she can prepare. He/she can even enter the content and transfer this all into a CMS skin, offering the end user a complete solution.

Web developers and programmers

The frontier that divides web developers and programmers is often very thin, and various companies use different names for the same jobs. In this book, we assume that a web developer is someone with the skills for creating HTML/CSS code. Additionally, he or she often has good knowledge of administrating the CMSs, can install and configure various extensions, and is able to prepare the whole website, including stylesheet modifications, as there's no requirement of individual programming. The programmers are usually "next-level web developers", with programming skills. Usually, they code the core of the CMS systems or its additional functionality (create extensions). In short, we can assume that a web developer is someone who builds websites using the things that a programmer codes.