Using InDesign’s Book Feature To Collaborate On A Publication
Whenever you choose New from the File menu in Adobe InDesign, you may have noticed the option to create a new book without ever knowing exactly what a book is. Well, it turns out that books are a pretty cool feature: they allow you to take a bunch of related InDesign document and treat them as a single entity; a book. All documents in the book can then share the same resources such as paragraph and character styles, colour swatches, master pages, sections and page numbering.
Once you have created a book, by choosing File-New-Book, the Book panel is displayed. It features a panel menu with all the necessary Book options. Your first task is to add documents to the book: from the Book panel menu, choose “Add Document” and select the documents you want to be treated as part of the book.
The book file can then be saved. The book is a separate file and a separate entity to the documents it contains and the documents in a book do not have to reside in the same location as the book or indeed as each other. To save the book, choose Save Book in the Book panel menu: to save each document in the book, simply used File-Save, as per usual.
Next specify which of the documents in the book will be treated as the style source. The document elected as the style source will be used as the master document in the process known as synchronization whereby InDesign replaces the colour swatches and styles of all documents in the book with those in the style source document.
To set page numbering across the whole book, choose Book Page Numbering Options in the Book panel menu. The default is “Automatically Update Page & Section Numbers”: this will cause InDesign to number pages in the documents within the book according to the order in which they are listed in the Book panel.
You can replace an existing chapter of a book with another InDesign document by simply selecting an existing book chapte and choosing Replace Document from the panel menu. Next, navigate to the replacement document and double-click to select it. InDesign will then replace the selected chapter with the new document. Deleting chapters from a book is equally straightforward. Just highlight the chapter(s) and choose Remove Document from the panel menu, or click the Remove Document icon at the bottom of the Book panel.
Books are a wonderful tool for division of labour since the fact that a document is part of a book does not stop it from being a regular InDesign document. If a book contains six documents, six different people can work on each of those documents and then, at the end, the whole book can be preflighted, printed and output as PDF as a single unit.
Both tables of contents and indexes can also be generated for an entire book as well as for a single document. Simply create the table of contents or index in the normal way but activate the option “Include Book Documents”.
The writer of this article is a developer and trainer with an independent computer training company offering Adobe InDesign CS4 training courses in London and throughout the UK.
Dreamweaver CS4’s HTML Properties Inspector
Dreamweaver’s Properties Inspector is normally displayed at the bottom of the screen and is extremely versatile. It is context sensitive, in that it displays options which are relevant to the currently selected item. These options provide useful feedback and allow you to modify the attributes of the selected element.
The Properties inspector has two different sets of options: HTML and CSS. These may be accessed by clicking on two buttons on the left of the panel. When formatting text, the HTML section contains options which allow you to assign structural attributes to your text. From the Format drop-down menu, you can specify whether the text is a heading (h1, h2, h3, etc.) or a paragraph (p). In the ID box, you have the option of assigning a unique ID to the item which could then be used in CSS or JavaScript to reference the item.
The drop-down menu labelled “Class” displays any CSS classes which have been defined either within the current HTML page or in a linked external CSS file. These classes or styles can be applied to the selected text simply by choosing one of their names. If an entire paragraph or heading is selected, Dreamweaver will associate the class with the heading or paragraph tag. Thus, your code will read, for example, ‘ p class=”greenpara” ‘. If, on the other hand, only section of a paragraph is selected, Dreamweaver will surround the selected text inside a SPAN element and attach the class to it. Thus, your code will read ‘ span class=”greenpara” ‘.
Below the Class drop-down is the link box, which allows you to convert the selected text into a hyperlink. Dreamweaver offers a variety of methods for creating the link. Thus, for example, if the link is to an external website, you can simply enter the entire URL into the link box. If you are linking to one of your own pages, one of the fastest techniques is to use the Point to File button. Simply drag the Point to File icon onto any page listed in your Files panel and Dreamweaver will create a link to it.
The HTML section of the Properties tab also features buttons for Bold and Italic. These cause Dreamweaver to surround the selected text with the strong and em (short for emphasis) elements, respectively. The default rendering for strong is normally bold, in modern browsers, and for em, italic.
The Unordered List button converts the selected text into a bulleted list; while Order List converts the text into a numbered list. The Text Outdent and Text Indent buttons can be used to promote and demote elements within lists, thus enabling you to create nested lists. If the selected text is not a list item, clicking the Text Indent button converts it into a blockquote element.
Author conducts Adobe Dreamweaver CS4 training courses and HTML/XHTML training all over the United Kingdom.
Customizing Adobe Dreamweaver CS4’s Preview In Browser Settings
When working on your web pages in Adobe Dreamweaver, you constantly need to check them in a web browser. To make this process smoother, Dreamweaver allows you to configure several browsers for previewing your pages. You can specify which browser is your primary, or main, browser; you can then elect a secondary browser and as many further browsers as you want.
Naturally, the first step is to make sure that the browser software is installed on your computer. Next, to specify your preferred browser, go to the Edit menu and choose Preferences. (This is the Windows location of Dreamweaver Preferences: on a Macintosh, go to the Dreamweaver menu and choose Preferences.)
The various types of Preferences are displayed on the left of the window. Click on the Preview in Browser section. If you already have a browser configured as your primary browser, and possibly another as your secondary, you may wish to change these. To do so, simply click on the appropriate checkboxes to specify which is primary and which is secondary.
To add other browsers, just click on the plus sign (+), navigate to the browser software and double-click to open it. You can repeat this procedure as many times as you need to.
To preview a page using one of your configured browsers, use the Preview icon (the globe). This is located on the Document toolbar which is normally displayed at the top of the document window. From the Preview drop-down menu, choose the browser that you’d like to use. You can also make use of the keyboard shortcuts: to preview using your primary browser, Shift-F12 on Windows or option-F12 on a Macintosh; to preview using the secondary browser, Control-F12 on Windows or Command-F12 on a Macintosh. Alternatively, you can simply choose the name of any other browser.
Having looked at the preview, to return to Dreamweaver, simply close the browser window.
It is also possible that sometimes you’d like to preview pages without saving the changes you’ve made to your document. Dreamweaver makes this easy but, first, let’s have a look at what normally happens when you preview a file that has been modified.
Dreamweaver throws up a dialogue box asking us if we’d like to save the changes. If you choose “No”, it gives us a preview of the last version that you saved rather than the version that you’re currently working on, If we choose “Yes”, Dreamweaver saves your changes before previewing the file. This can often be inconvenient, since you may not be ready to save your changes.
If you’d like to be able to preview a file at any time without saving your changes, return to your Browser Preview category of Dreamweaver’s Preferences and activate the option “Preview Using Temporary File”. When this option is activated, Dreamweaver will create a temporary file containing the latest version of your document and then opens it in the browser. When the browser window opens, you will notice that the file name does not correspond to the name of your document it a temporary file name generated by Dreamweaver.
The writer of this article is a developer and trainer with Macresource Computer Solutions, an independent computer training company offering Adobe Dreamweaver training courses at their central London training centre.
Build Website Faster With Adobe Dreamweaver Templates
Adobe Dreamweaver templates are one of the most powerful development aids that the program contains. Basically, a template is a master design which can be copied repeatedly to generate an limitless number of web pages each one containing the same shared elements. Obviously, each time the template generates a new page, the page can be customised and the requisite elements added to it to make it unique. This is achieved by a technique of locked page regions and editable regions.
When the template is applied to a page, locked regions cannot be modified. (You have to return to the template to alter them.) Only the areas of the page designated as editable regions can have content added to them.
To create an editable region on the template, you simply position the cursor in the desired part of the layout and choose Insert – Template Objects – Editable Region. Enter a name for the region and click OK. One frequent problem experienced by new users of Dreamweaver is the accidental placement of and editable region inside a heading or paragraph tag. This means that when the template is applied to a page, only text can be placed in the editable region. To fix this problem, return to the template, click in the editable region and examine the Tag Selector on the left of the Status bar. Having located the offending tag (usually h1, h2, p, etc.), right-click on it and choose Remove Tag from the context menu.
To apply a template to a page that already exists, open the page and choose Modify – Templates – Apply Template to Page. Next, double-click on the name of the template you wish to apply to the page. Strangely enough, there is no Dreamweaver command that enables you to apply a template to several pages at once. However, here are two suggestions for applying a template to multiple pages reasonably quickly.
Begin by selecting multiple pages in the Files panel using the classic techniques of Shift-click or Control-click (Command-click on a Mac). Then, you can right-click one of the selected files and choose Open from the context menu to open all of them. Next, activate the Assets panel (Window – Assets) and click on the Templates button (the second icon from the bottom). Finally, drag the icon of the required template onto each of the open pages. To speed up the process, use Control-Tab to switch from page to page.
To create a brand new page based on a template, choose New from the File menu and, when the New Document window appears, select the Page From Template option, click on the site that contains the template (It should already be highlighted.), then choose the template. To get the most benefit from a template, before clicking the Create button, make sure that the option “Update Page When Template Changes” is activated.
The Author of this article is a developer and trainer with Macresource Computer Solutions, a UK IT training company offering Adobe Dreamweaver Classes in London and throughout the UK.
Creating Dynamic Web Sites Using Adobe Dreamweaver
Hardly any people would argue that Adobe Dreamweaver is one of the most widely used web development packages around. It has gained its popularity by appealing to users with a broad variety of profiles. Its user-friendly interface appeals to inexperienced users with a small amount awareness of the technologies that underpin web pages. At the same time, it allows practiced web developers to interact with code in a variety of constructive ways.
Adobe Dreamweaver enables developers to create dynamic web sites whose content is derived from a data source. Such sites feature server-side pages, written in a scripting language such as PHP, ASP or ASP.Net, which need to be executed on the server. It is therefore crucial to stipulate a testing server as part of the site setup while defining such sites within Dreamweaver.
A Microsoft invention, Active Server Pages (ASP) is one of the easiest such languages to configure. Now referred to as classic ASP to distinguish it from ASP.Net, the current incarnation of Active Server Pages, ASP was initially released in the late nineties and revolutionised the way in which web sites were developed. ASP is designed to run on Windows 2000 server and on Windows XP Professional. It is part of Internet Information Services (IIS), an optional Windows component. Once installed, IIS converts your PC into a web server running a default website located in a folder called “wwwroot” which can be accessed with the web address “localhost/”.
Once ASP is up and running, Adobe Dreamweaver is equipped to start creating dynamic web sites. The features on hand in Dreamweaver for generating the necessary server-side content are to be found in three panels: Databases, Bindings and Server Behaviors. The Databases panel is used to create connections to data sources. In the case of ASP, the most frequent solutions are Microsoft Access and the more powerful Microsoft SQL Server. As soon as a connection to the database is in place, the Bindings panel is used to retrieve data into a recordset. The dialogue box which Adobe Dreamweaver uses for creating recordsets automatically generates fragments of SQL as the user interacts with the related data objects. However, some familiarity with SQL (structured query language) is needed to be able to retrieve specifically the data necessary for a given recordset.
The Server Behaviours panel is where nearly all of the action takes place: It contains a wide variety of pre-built scripts which can be used to add dynamic content to web pages. For example, the Insert Record server behaviour can be used to create a form which adds new records to a database table via a web page or it can be used to create an enquiries sheet which adds every enquiry to an enquires table and afterward takes the visitor to a thank you page.
The Author of this article is a developer and trainer with Macresource Computer Solutions, an independent computer training company offering Adobe Dreamweaver training courses at their central London training centre.
The Best New Additions To Dreamweaver CS4’s List Of Features
Dreamweaver’s New Related Files facility
HTML is a fairly limited environment which relies on files created with other technologies to add functionality to web pages. Typical examples of related files are server-side includes, CSS, JavaScript and XML. Dreamweaver now includes a feature called “Related Files” which enables you to edit the content of such files, without having to open them separately, and to instantly see the effect of your changes on the main file.
In Dreamweaver CS4, the Property Inspector contains buttons which allow you to switch between HTML and CSS options. When working in the CSS options, you can now target a specific CSS rule before choosing an attribute or, if necessary, create a new rule.
Additions to Dreamweaver’s Spry Widgets
There have been some nice new additions to the Spry form validation widgets. The Spry Validation Password widget allows you to specify the minimum and maximum number of characters, numbers, uppercase and special characters which can be included in the password entered. The Spry Validation Confirm widget checks that the entries in two fields are identical and displays a customizable error is they are not. This makes it ideal for creating “Password/Confirm Password” or “Email/Confirm Email” functionality.
Photoshop images are can be inserted using the same techniques as inserting any other image file: Insert – Image; dragging from the Files panel; dragging from the Assets panel; or using the Insert toolbar. A Photoshop-style Optimise window automatically appears and you can choose the settings appropriate for that particular image usually GIF, JPEG or PNG.
Once the image has been imported, an icon is displayed in the upper left of the image indicating that it is a smart object. Also, in the Property Inspector, the location of the original PSD file is shown in a box marked “Original”.
HTML is a notoriously sparse environment which relies on files created with other technologies to add functionality to web pages. Typical examples of related files are server-side includes, CSS, JavaScript and XML. Dreamweaver now includes a feature called “Related Files” which enables you to edit the content of such files, without having to open them separately, and to instantly see the effect of your changes on the main file.
Whenever you open a file which contains linked files, Dreamweaver displays each of the linked files in the Related Files Bar. To access a related file just click on its name. If you make any changes to a related file and asterisk appears next to its name in the Related Files Bar to remind you to save your changes. When you do, the impact of the changes is immediately visible in the main file.
HTML is a notoriously sparse environment which relies on files created with other technologies to add functionality to web pages. Typical examples of related files are server-side includes, CSS, JavaScript and XML. Dreamweaver now includes a feature called “Related Files” which enables you to edit the content of such files, without having to open them separately, and to instantly see the effect of your changes on the main file.
The Photoshop integration which was begun in Dreamweaver CS3 has been enhanced in CS4 to offer via the use of Adobe’s Smart Objects technology. A Photoshop file can be imported directly into Dreamweaver and will automatically come in as a smart object.
New ways to edit CSS
The Property Inspector can be used to change the attributes of any element you select on an HTML page. In previous versions of Dreamweaver, changing the attributes of highlighted text would cause the program to create CSS classes with names like “Style1″, “Style2″, etc. in the head area of the current page. This random creation of styles was often responsible for getting new web developers into bad habits.
The fact that the image is a smart object means that if we resize it in Dreamweaver, it will automatically be re-optimised and a new version of the image will be generated with the new dimensions. (In previous versions, resizing an image would mean that the browser was responsible for resizing leading to poor image quality.
The author is a trainer and developer with TrainingCompany.Com, an independent computer training company offering Adobe Dreamweaver Classes at their central London training centre.
Key Benefits Offered By Adobe Dreamweave CS4r?
Dreamweaver CS4 is the newest release of the leading web development and site management application originally owned by Macromedia. Dreamweaver is the ideal tool for web designers, coders, and application developers of all levels. Web professionals of every level of experience will find a workspace arrangement to fit their style, or they can create one of their own. The Dreamweaver interface has been updated to fall in line with look and overall functionality of the rest of the Adobe Creative Suite 4 programs. The user interface of Dreamweaver CS4 is both highly efficient and aesthetically pleasing.
You can use Dreamweaver to build basic sites using web technologies like XHTML, CSS, and JavaScript as well as more complex sites incorporating server-side technologies such as ASP.Net, Coldfulsion and PHP. It also allows you to create web pages driven by a database as well as admin pages for updating and deleting database records, log in pages and server behaviours for restricting access to certain areas of your site.
In addition, you will find that Dreamweaver is not one of those web development environments which adds tons of proprietary code to the the pages you create. If you are an experienced web developer and have already web sites using other tools, Dreamweaver opens web pages and web sites that were created in other programs without modifying the code. Dreamweaver allows you to work in Code or Design view or to have a split screen where you can do both. Changes that you make in design view generate clean and standards-compliant code which you can modify in Code view as necessary.
Almost all web pages that you work on will have pages linked to them such as CSS style sheets and JavaScript files. Dreamweaver CS4 makes working with such linked files much easier by giving you access to them from the Related Files toolbar.
Dreamweaver boasts an impressive array of, easy-to-use commands for adding interactivity to your web pages. Dynamic effects like rollovers, pop-up windows and the showing and hiding of page content can be achieved without any programming. Dreamweaver automatically generates the necessary JavaScript for you. Similarly, Adobe’s Spry technology, based on CSS and JavaScript, provides easy access to complex, interactive functionality. Using Spry, you can easily create interactive, drop-down menus, advanced layout elements like tabbed panels and add sophisticated form validation to prevent visitors to your site from submitting forms inappropriate data.
Dreamweaver also includes useful and powerful site management tools. Unless you are mainly concerned with create email newsletters and similar promotional material, your web development will consist of creating and editing pages that work together to form part of a web site. You may also need to work on several such sites simultaneously. Dreamweaver’s site management tools make web site development easy to manage. It has tools for collaboration by a team of people working on the same sites, for synchronising local and live versions of a site, for checking links, and browser compatibility and, naturally it incorporates FTP client software.
The writer of this article runs Adobe Dreamweaver CS4 training courses and HTML/XHTML training in London and throughout the UK.
How Adobe InDesign CS4 Handles Graphics
When adding graphics to an InDesign layout, there are two ways in which the graphic can be inserted. Firstly, it can be independent of all other items on the page and, secondly, it can be embedded, or anchored, within a block of text. The first approach perhaps offers the greatest degree of flexibility in terms of how the graphic may be integrated with other elements. The main benefit offered by the anchored approach is that the graphic can then be linked to a given point within the flow of text.
Imagine that you are working on a user manual for a piece of equipment, that the booklet will be translated into several different languages and that each graphic used in the document relates to a particular set of instructions within the manual. This is an example of situation where the use of anchored graphics will be beneficial. Each illustration can be inserted next to the instructions to which it relates. When the instructions are translated, since some languages are more succinct than others, the flow of text will change. However, each image will stay with the related text.
To import an image into InDesign as an independent graphici, choose Place from the File menu, locate and double-click on the image. Next, click on the page where you would like the top left of the image to be positioned. When using this technique, the image is brought in at actual size and placed inside a picture frame which InDesign automatically creates. (Text and images cannot be placed directly on the page in InDesign; they have to be placed inside containers referred to as frames.)
A second method of importing an independent graphic is to create a frame for the graphic at the required size and position then to highlight the frame and choose File – Place. InDesign will place the graphic inside the highlighted frame. The options in the Object – Fitting sub-menu can then be used to determine how the graphic will be sized and positioned within its containing frame.
There are no fewer than three methods of adding an anchored graphic to a page. The first is to position the cursor inside a text block at the required position and then to choose File – Place. The graphic is imported and anchored at the cursor position. The second is to highlight a graphic frame and choose Edit – Cut. Next, position the cursor inside a text block at the required position and choose Edit – Paste. The third method is to position the cursor inside a text block and choose Object – Anchored Object – Insert. When the Insert Anchored Object dialogue box appears, choose Content – Graphic.
InDesign CS4 provides the user with a tremendous degree of flexibility in how anchored graphics may be positioned relative to the text around it. To get access to these options, highlight an anchored graphic and choose Object – Anchored Object – Options. For example, setting the position to Custom allows you to drag the graphic around the page and to wrap text around it as if it were independent. When this is done, it can sometimes be difficult to tell where the anchored graphic is actually inserted. Working in Story Editor, InDesign’s plain text mode, makes it easy to review the position of anchored graphics. Simply highlight the containing text frame and choose Edit – Edit in Story Editor. Each anchored graphic is represented by a little anchor symbol. Conveniently, you can highlight an anchor symbol and drag it to a new location.
Writer runs Adobe InDesign CS4 training courses and HTML/XHTML training throughout the UK.
Organizing In-House Dreamweaver Training
Teaching yourself something new isn’t always easy. However, having someone or something to teach it to you can help. For example, if you’re trying to train yourself or others on how to use a product like Adobe Dreamweaver, you’ll likely experience better success in your endeavors if you invest in training software or a tutoring program. This is because you’ll get a hands-on experience, and get to learn how the program works by using it, rather than reading about how it should work. Knowing your programs is crucial to your success as a web designer. If you run a web design company or firm, having employees that are properly trained is just as important to the success of your business.
To make sure that your employees are properly trained, you should consider using Adobe Dreamweaver training videos. These will allow everyone to see the program, and learn how it works by demonstration, rather than by just reading and memorizing information. When you have staff members who need to be properly trained, having the right software and training programs can make all the difference. Not everyone prefers to learn from a textbook. In fact, many people simply can’t learn from textbooks at all. They find it difficult to make the connection between written information and the actual use of the program without seeing it in live action.
Adobe Dreamweaver training, whether from a tutor-led course or via the medium of training videos, will ensure that your staff learn what they need to know, by making the program more accessible for them. They will learn how Dreamweaver works by seeing how it works, which will help them to better understand the logic of the program and remember how to use the product.
Dreamweaver is an essential piece of kit for anyone looking to break into the field of web design or web development. It gives new users a considerable degree of leverage, allowing them to become productive very quickly. So learning Dreamweaver is definitely a worthwhile exercise. Having staff trained on Dreamweaver can also save companies thousands of pounds a year in outsourcing costs. Suddenly, organisations start to find that their own people can now make modifications to their website, begin creating web pages and, eventually, take over the task of web management and development.
In short, Dreamweaver training will pay for itself both in terms of the savings that companies will make and the profits made by those offering their web design and development services.
The writer of this article is a developer and trainer with OnSiteTrainingCourses.Coms, a UK IT training company offering Adobe Dreamweaver Classes in London and throughout the UK.
Key Steps To Creating A Website With Adobe Dreamweaver
Adobe Dreamweaver is a great piece of software which demystifies the business of creating a web site. However, it is also packed with a whole host of features which can seem a little daunting when you first start using the program. This article aims to explain how create a basic web site, where to start and which tools to use.
It’s always a good idea to sketch out a plan of how the site will work and what kind of user experience it will offer. Dreamweaver will not give you any assistance at this stage, so just use pen and paper. Start by building a basic site, one that you know you can complete without getting bogged down in technologies that you do not understand.
The second important pre-Dreamweaver operation is the creation of a “local root folder”. This is Dreamweaver jargon for the folder that contains all of the files which form part of your site. You can create it anywhere: your desktop, your hard drive, a network volume, etc. However, it is important that you only put your site files in this folder and nothing else.
You should also add an images folder inside the “local root folder”. It can have any name you like but later, when you set up the Dreamweaver site, it will be designated as the default images folder and will help to ensure that your visitors don’t see any blank image icons on your pages.
Now, finally, we launch Dreamweaver and create a new web site by choosing New Site from the Site menu. Click the Advanced tab (”Advanced” here simply means manual, so don’t be intimidated.) You will notice a series of categories on the left of the screen. Only the first two categories need to be completed: Local Info and Remote Info.
In the Local Info window, enter a name for you new site then specify the location of the local root folder and default images folder you created earlier. The easiest way of doing this is to click on the browse icons next to each of these two boxes (the yellow folder icons).
Now activate the Remote Info section on the left. If your website will be an intranet, choose Local/Network from the Access Method drop-down menu. Click on the Browse icon then locate the server and sub-directory where your intranet resides. For a public web-site, choose FTP. Enter the appropriate information in each of the boxes. These details are available from your web hosting company and will have been emailed to you when you signed up.
The next step is to create all of the pages in your website arranged in the appropriate sub-directories. Don’t put any content in the pages at this stage, just create and save each page into your local root folder. This is done, so that later, when you create links on any page, the page that you link to will already exist, so you can just point to it and automatically create the correct link.
There’s still one more step that you should do before you are ready to actually start work on the page content; you should create at least one template. Templates allow you to maintain a consistent look and feel throughout the site. It consists of fixed elements, such as logo and navigation links and what Dreamweaver calls “Editable Regions”. These are the areas of the page which can be altered each time you use the template.
Having finished your template or templates, you are ready to build the web pages that will constitute your site. Simply open each page, choose Modify – Templates – Apply Template to Page and then add the text, images etc. that make up the page.
The author has been running training courses on Adobe Dreamweaver for many years. He is a trainer with Macresource Computer Solutions, an independent IT training company based in London.