Web Design Tips

Adobe Dreamweaver Video Tutorials

The following Dreamweaver tutorials were prepared by Alice Hamilton, (Adobe Certified Instructor for Dreamweaver). These demos and tutorials are great if you are just learning how to use Dreamweaver.

An overview of Dreamweaver's Welcome Screen
Panels and Workspaces – Managing the Dreamweaver environment
Defining a Dreamweaver website
Creating new files using the New dialog box
Setting head tags (for search engine visibility)

Dreamweaver Tips, Tricks & Shortcuts

Note: Mac uses should subsitute [CMD] for any instances of [CTRL]

Open a linked document from the design view
Hold down [CTRL] then double click a hyperlink to open the linked file.

Insert a non-breaking space
To insert more than one space character in Dreamweaver, hold down [CTRL] + [SHIFT] + [SPACEBAR] - Repeat to insert additional spaces as required.

Insert a line break
Padding &/or margins are automatically applied after block level elements e.g. paragraph & heading tags. This can be controlled with CSS. Alternatively for the odd time that you don't want vertical space between two elements insert a line break tag by pressing [SHIFT] + [ENTER] at the end of a line.

Quickly hide all panels & the Property Inspector
F4 - Pressing F4 again brings the panels & Property Inspector back

Expand a panel group
Double click the title bar of a panel to collapse all other panels. This is really useful when working with the File / Asset Panel and also the CSS Panel as it allows you to see more items.

Display the Manage Sites dialog box
Double click the Site Name drop down list in the Files panel to quickly open the Manage Sites dialog box.

Deleting files from the server
If you delete a file from your local site remember to delete it from the server otherwise visitors can still access it. You can compare which files are on the server and your local machine side by side by clicking on the 'Expand to show local & remote sites' button on the File Panels toolbar.

Define headings with the keyboard
Hold down [CTRL] + the number of the heading you want to create eg. [CTRL] + [3] for a heading 3. Is quicker than using the Property Inspector.

Positioning your cursor
Sometimes it can be difficult to position your cursor exactly where you want it eg. before an image on the very left of your design. Click the item e.g. the image then press the left arrow (nudge) button on the keyboard.

Custom Submit Buttons for forms
Create and save your custom button image. In Dreamweaver click on the Form tab of the Insert Bar, select Image Field and choose your custom button. Alternatively you may may be ready for more comprehensive training. See our introduction and advanced Dreamweaver courses.

Business Alliance Partners

Forrest Computer Training
Microsoft Office Training and Computer Courses in Sydney’s CBD. Classes available include: Excel, Project, Access, PowerPoint, Outlook, Word, Visio, Publisher, Crystal Reports and Prince2 Foundation.

General Resources for Adobe Software, Web Design & SEO

If you think your site listing would benefit others, please contact us.

Search Engine / Adobe / HTML / CSS

http://www.searchenginecollege.com
If you prefer online search engine training, Search Engine College has courses for Organic SEO, PPC & even website copywriting courses.

http://www.ask-kalena.com
Kalena Jordan is the search industry’s first agony aunt and this is her site where she answers your tricky questions about search engines.

http://www.searchenginewatch.com

http://www.adobe.com
Articles, tips, tutorials for all Adobe software

http://morris-photographics.com/
Contains articles, tips, tutorials and shortcuts for Photoshop

http://www.csszengarden.com
Good for seeing various CSS Layouts applied to the same content.

http://webtypography.net

http://indesignsecrets.com

http://www.indesignmag.com

http://www.sitepoint.com

http://www.alistapart.com
Great article site looking at the many different aspects of the web design process

http://www.css.maxdesign.com.au/listamatic
A website dedicated to creating advanced effects with the humble html list tag, some CSS and lots of imagination. Also has some great css layout tutorials

http://www.xaraonline.com
Webmaster tools

http://www.thefreesite.com
Home of the Web's best freebies, sounds, etc

http://www.download.com
Software dowloads - demos, beta releases, shareware freeware and for purchase

http://www.macfonts.com
Free fonts you can download for your Mac

http://www.coolhomepages.com
If you are looking for inspiration. Look no further. The best of the web is presented here.

http://www.w3.org/MarkUp
The official word on HTML from those officially in charge

http://www.wpdfd.com
Electronic design issues for print graphic designers

http://www.htmlgoodies.com
HTML Goodies claim that if it can be done in HTML, you can find it there – a lot of information and many tutorials.

http://www.webstandards.org
Setting standards to ensure simple, affordable access to web technologies for all (since 98)

http://www.useractive.com
(UserActive Learning-Learn HTML, JavaScript, DHTML, CGI, PERL, SQL and UNIX interactively!)

http://www.webstyleguide.com
Yale C/AIM Web Style Guide – one of the best known resources for web style, the Web Style Guide covers topics from file structure to graphics and interface.

Adobe Print Tips

InDesign Tips, Tricks & Shortcuts

Adding a new page on the fly
To quickly add an extra page to your document, using only a keyboard shortcut and not using the Pages Panel, type in Shift + Cmd or Ctrl p.

Locating an original image on your computer
Sometimes you need to locate a placed image in your InDesign document that is somewhere on your computer. And while you can do a Find / Search back at your desktop, you might find that you have several images with the same name or have several versions. The easiest way to locate that image is to select it in InDesign, and then using the Links Panel (Shift + Cmd or Ctrl + d), choose the flyout menu and select Reveal in Finder or Reveal in Bridge. You will be immediately taken to the desktop and the folder that contains the image.

Quickly hide all panels
To hide all panels, select tab while in any tool except for the Type tool. Hold shift as well as tab to hide all panels except the Toolbox and Control panel. This shortcut works in both Illustrator and Photoshop too. Duplicating Pages: You can easily duplicate a page by selecting it in the Pages panel and holding down Option (Alt for Windows) and dragging down a little. This is along the same lines of duplicating any object in InDesign.

View Menus in Alphabetical Order
Some of InDesign's menus are a little lengthy and it can take a little time to find the commands less used, but if you select Cmd+Option+Shift (or Ctrl+Alt+Shift), the menus will display commands alphabetically.

Enter the first field of Control Panel using keyboard short:
Cmd + 6 (Ctrl + 6 for Windows) will highlight the font field in the Control panel if you are in the Type tool, allowing you to type in the first letter or letters of your desired font. Select Cmd + Option + 7 (Ctrl + Alt + 7 for Windows) and this will automatically take you to the Paragraph Control panel and is a toggle command. If you have an object selected, it will highlight the x value in the Transform Control panel.

Advanced Course Assessment Download

InDesign Assessment

Illustrator Assessment

Photoshop Assessment

Pre-Course Reading PDFs

In an effort to best prepare you for your class, our trainers have prepared PDFs that explain some of the terminology that is important to understand when using your software.

While they will be explaining in detail the contents of the pre reading PDFs, it will be beneficial for yourself to familiarise with some of the basics and that apply to all Adobe programs.

This helps us to get straight into the course content when the class begins, and also helps you to best prepare for the course

PLEASE NOTE - YOU SHOULD ONLY DOWNLOAD THE PDF THAT IS RELEVANT TO YOUR CLASS AND CLASS LEVEL.