Slicing in Fireworks for Web export

 

Image Slicing
This cuts up a design into small images for use in a Dreamweaver table layout.

1. Use the slice tool to drag out slice elements.
2. Rename the slice layers.
3. In the slice properties set the file Type, Link, Alt Tag and  Target.
4. Set the optimise panel for the prefered export file type.
5. Select File/Export and fill out the properties for export. (html and images). In the Options/Tables/Space With : select “single table no spaces”
6. For creating dummy html/code/text slice areas, repeat as above but select type as html. You then get an option button to add code/text.
7. To export a single image, select slice then right mouse click and select “Export selected slice”
8. If using the Polygon slice tool keep the number of points small.
9. To automatically slice an image. Select it then Edit/Insert/Rectangle Slices (use shift key for multiple images).

GIF Animating in Fireworks

Animating with a Gif
This creates a simple animation by changing states.

1. Create a simple image.
2. Go to the “States” panel and from the options at the top right select “Duplicate State”
3. Select State 2 then the Layers Tab and change something ie a colour.
4. Now with button State 1/State 2 under the layers panel you can see both states.
5. You can play the animation by selecting the Play icon just above the properties panel.
6. To change the time interval. Go to the states panel and select both states. Then double click one to get the delay panel up.
7. To export the animated gif go to the Optimise tab and select “Animated gif” (no transparency, images only, Html=none, slices=none)
8. To save as a Flash animation select File/Save as (select adobe flash on drop down)

Animating with Twist and Fade

1. Create a design to animate and select it.
2. select Commands/Creative/Twist and Fade. Click animation check box and adjust settings for required animation or select a preset from bottom left.
3. Click on the Run button to view the animation.

Tweened Animation
A Tween is a frame between starting and stopping of an animation sequence.

1. Select your image and change it to a symbol by Modify/Symbol/Convert to symbol (select graphic option.
2. Hold down the Alt key and drag another copy out. position it away from first symbol. repeat for a third copy.
3. Select all symbols then Modify/Symbol/Tween Instance (select 10 steps and distribute to states)
4. Run and test it
5. In the states panel you can select states within animation and use Modify/Transform/Free Transform to alter instances of the shape.
6. To change the animation speed select all the states in the State Panel. Then right mouse click to set speed.

Exporting Web Site Mock ups

HTML Export
This creates an html prototype for displaying as a web site.
- Slice the images only
- Make sure all pages are named and button links entered (home.html)
- Select File/Export/Html and images (export slices, include areas without slices, put images in subfolder, all others unticked).
Default HTML settings can be set in File/HTML Setup

CSS Export
This creates an CSS prototype for displaying as a web site.
- Slice the images only (Right click on image and select insert rectangle splice)
- Foreground slices are images which dictates layout flow.
- Background slices are images for background.
- File/Export/CSS and Images (set up options)

PDF Export
This creates a PDF document of your design.
- Name each page.
- File/Export (adobe pdf).
- Setup the options like allowing commentating

Exporting an area
- Select the export area tool from the side panel
- Select your area by dragging and then double clicking inside.
- Adjust the export properties
Another method is File/Image Profile. This brings up the export pop up dialogue.

Choosing Export Settings
- Open your image or Photo
- Zoom out and select 4 up
- Change settings in each view to show comparisons for different export settings.

Editing Photos in Fireworks

How to Make Parts of your Photo’s appear Moving
- Using the lasso tool select the part of the image you want the effect applied to.
- Select from the top Menu Filters/Motion Blur

How to Apply Blends to photo’s like HDR Effects
- Create a duplicate copy of your photo on a new layer. This can be done by dragging the photo in the layers panel down to the “new bitmap image” button.

- select the top image in the layers panel and apply the blend “multiply” by either the drop down in the layers panel or in the bottom properties panel.

- These methods can be repeated using “overlay” for a different effect. Or Use drawing tools with blend modes.

Selecting and Editing Parts of a Photo
- Use the lasso tool to click points around the image. Click on the first point to close the shape.
- To expand the selection use the Select/Feather feature or Select/Deselect to remove.
-  You can the click and drag the selection or save it Select/Save Bitmap selection for reloading later.

Altering Exposure and Colour
Images can be colour or exposure adjusted by selecting it the Filters/Adjust colour.

The Fireworks Workspace

Guide Lines
Turn the rulers on
Click and drag from the vertical ruler to create a vertical guide.
View/Guides/Snap to Guides.
To measure distance between the guides use the Select tool and hold the Shift key.

Workspace
To undock a panel drag from the gripper away.
To re-dock properties pane drag from the side bar to the bottom of page.
To hide the panels press F4

Capture a Screenshot
Select Commands/Take Screenshot
Select region
Open a new canvas then paste the captured image in.

Master Page
Create a page with your common content on it. ie banners, navigation and titles.  In properties set this as your Master Page.  When ever you create another page it will contain the master Page content. Its like a template.  Only one Master Page per project.

Sharing Layers across Pages
To share a layer, first select the layer then click options. Select Share Layers and pick the pages.

More coming……

Reinstalling OSX to Factory Condition

This procedure has four parts:

1. Erasing the hard drive
2. Completing the Mac OS X Setup Assistant.
3. Restoring the bundled applications using the Applications Install Disc.

Important: This procedure will completely erase your hard drive.

Part One: Erasing the hard drive

1. Turn on the computer.
2. Insert the Mac OS X Install DVD into the optical drive.
3. Press and hold the “C” key while the computer starts up. The computer will start up using the Mac OS X Install DVD.
4. If your are using a wireless mouse, a mouse icon should appear asking you to turn the mouse on so that the computer can discover it.
5. Select a language, then press the right arrow key.
6. Click the Utilities menu, the choose Disk Utility.
7. Select a the hard disk to erase (select top level item).
8. Click the Erase tab.
9. Select Security options and choose “7-Pass Erase” for a secure delete (6hrs) or the derfault “Zeros” for a quick erase.  Then click OK.
10. Back in the Erase dialogue Select Volume Format as “Mac OS Extended”
11. Name the disk as “Macintosh HD”
12. Select the Erase button.
13. This takes about 5 hours.
14. When done Quit the Disk Utility and install OSX.

Part Two: Completing the Mac OS X Setup Assistant

1. When the restart has completed, a welcome video plays, then country/region selection screen appears.
2. Select your country or region and click Continue.
3. Select a keyboard layout and click Continue.
4. A migration screen appears. If you wish to migrate your data from another Macintosh then select. If you do not wish to migrate, or want to migrate later, select “Do not transfer my information now” and click Continue.
5. A Wireless Service screen appears if you have wireless services available within range of your computer. Select “On” and click Continue.
6. If the network is password protected, you be asked for a password when you select it. Type the password and click Continue.
7. An Apple ID screen appears. This is used to purchase content from the iTunes store. You can use MobileMe or .Mac usernames here as well. When complete, click Continue.
8. If you do not have an Apple ID or MobileMe account, click Continue to move to the next screen.
9. A Registration Information screen appears. You are not required to fill this out, but it is helpful if you do. When complete, click Continue and your product registration will be sent immediately.
10. If Mac OS X servers are available on your network, you’ll be asked if you’d like to log on to them. If not, click Continue.
11. A Create Your Account screen appears. This will be used to create a User Account with Login ID and Password for you computer. You should remember this password. You’ll be asked for it when you install new software or perform other administrative tasks on your computer. When complete, click Continue and your account will be created immediately.
    The Full Name will be used as your “User Log in”. The short name will be used to name your documents folder (This cannot be changed without a fresh install)
12. A screen to select your user picture appears. Take a snapshot with the built-in camera or select a picture from your Library. When complete, click Continue.
13. A MobileMe screen appears. Select an option and click Continue.
14. A Thank You screen appears. Click Go to complete the Mac OS X Setup Assistant.
15. Eject the Mac OS X Install DVD by dragging its icon to the Trash.

Part Three: Installing the bundled applications

1. To install the bundled applications, locate the Applications Install Disc that came with your computer.
   Note: You may see a Software Update icon bouncing up and down in your dock. You can quit this for now.
2. Insert the Applications Install Disc into the optical drive.
3. The disc will mount and an Applications Install Disk dialog appears. Double-click on Install Bundled Software to install your iLife applications.
4. A dialog appears asking if you want to run the package. Click Continue.
5. The Bundled Software Applications Installer screen appears. Click Continue.
6. A software license screen appears. Click Continue, then click Agree to accept the terms.
7. A select destination dialog appears. Make sure the partition with the green arrow is the correct destination, then click Continue.
8. To install all the bundled applications, click Install.
9. To select individual applications, click Customize. Click the disclosure triangle next to Bundled Applications to select individual applications, then click Install. Clicking Standard Install on the Customize screen installs all the applications.
10. Type the password you created to start the installation.
11. A restart dialog appears. Click Continue Installation.
12. An Install was Successful screen appears. Click Restart.

The restore process is now complete.

Installing and using Postnuke

 

 

A step by step tutorial, to install and configure a Post Nuke content management system website (CMS). This article includes installing postnuke customisations.

Preparations
1. Create the domain on your host server with php support. Preferably in the root directory.
2. Create the mysql database on your host and note the name, user and password.
3. Using an FTP program connect to the site and up load all the postnuke files to the domains root directory

Installation
1. Navigate to your domain (install.php)
2. Follow the on screen installation notes. Do not tick the box “create database”
3. At the login screen edit the information for your required login details
4. Remember to delete the install directories and files as instructed.

Installing forums
1. Upload the PNPHPBB2 files to the /modules/ directory
2. In postnuke go to admin/modules/ Hit “regenerate” and then find the pnphpbb2 entry and Initiate it
3. To add “forums” to the postnuke menu, go to admin/blocks/main menu. Add the forums entry to the menu configuration. The link entry will be http://faction.cellxgaming.com/index.php?name=PNPHPBB2

Adding a theme
1. Download the runtime client for AT-Lite (postnuke) from www.spidean.com. Upload it to the postnuke directory as its install notes.
2. Initiate it in the admin/modules section. Regenerate if you cant see it in the list
3. Upload your new theme into the /theme/ directory and set its permissions as instructed.
4. In the postnuke setup menu select the theme.
5. If the theme includes install files to theme the forums as well, then install them.

Shout box
1. Create a new block in the postnuke admin area core/html
2. Name it as “shout box”
3. Add to its contents the html shout box code as supplied by the shoutbox hosting site.

Picture blocks
1. Goto postnuke admin/blocks/new block and select core/html
2. Paste your picture html code into it

Search box
1. Goto admin/blocks/newblock
2. Select core/search box

Post calendar
1. download the post calendar files
2. Upload post calendar to the /modules/ directory
2. Install as its instructions
3. Go to blocks/main menu and add an entry in the menu configuration form for postcalendar. Entry will be [postcalendar]

Member list
1. Activate the members _list module
2. Go to blocks/main menu and add an entry in the menu configuration form for the members list. Entry will be [Members_List]

Other customisations
• Deactivate search box
• Remove from the navigation menu [downloads] and [reviews]
• Position “incoming” block to the top left
• Rename “Sections” nav to “information”
• Set up email notification on news articles
• Add information
• Do tags
• Categories and topics

This article attempts to describe the workings of Postnuke so that admins and users can go about organising and using postnuke.

FAQ Section
This allows members to post questions, and for admins to give answers. The results show up under the FAQ section. Each question can be assigned a category and sub category to allow categorisation of FAQ’s. Admin can design the Faq layout and categories, under administration/content/faq.
The FAQ Nav button must be setup in the administration/system/blocks/main menu area [FAQ].

Topics Section
Topics are used to sectionalise “News Articles” and “Stories”. A Nav menu button allows access to sectionalised news articles. Topics are set up in administration/content/topic. Icons can also be setup for each topic category. The Topic category is assigned to “Submit_News” and “Add Story”

Submit News
Users are able to submit news stories to admin for approval and publishing. “Topic” and “Category” can be assigned to them for sorting and displaying via “Topic” and “Category” Nav buttons. Once published they appear on the home page as a new article. They can also be accessed via the “News”, “Category” and “Topic” nav buttons. Options for setting up email notifications are in administration/content/submit_news.

Read more

Static and Dynamic IP addressing

Setting up static IP addressing for your home LAN network, ensures each device and PC on the network has a unique IP with which to connect to the routers Lan. This ensures you always know whose who on your network and prevents the router assigning duplicate IPs to different devices.

The first place to start is looking at your routers Lan setup information. In my case its Sky’s DG834GT router incorporating an adsl modem. In the routers admin area determine the IP address (192.168.0.1) and the subnet mask (255.255.255.0). Also the Starting and ending IP address (192.168.0.2 to 192.168.0.254). For each Device or PC on your network you need to assign it a unique IP within the Starting and ending IP address range. For example if you have three PC’s on your network assign them 192.168.0.2 to 192.168.0.4.

To assign a fixed IP’s to a PC go to your control panel and select network connections. Within this highlight Local area connection, right mouse click and select its properties. Then select Internet protocol TCP/IP. Then properties. Enter the settings in the picture to assign a static IP 192.168.0.5

Restart you PC and repeat for other devices on your network but with a different IP

Most internet providers issue dynamic IP addresses to each client/user. Thus each time you switch your ADSL modem off, it will reboot with a new IP address to the outside world. This presents the problem, that to access your PC or NAS server remotely, requires the new IP address to be known and entered. This is a headache for those with NAS servers, who want to FTP or HTTP into it when its connected the other side of their ADSL modem.

To get over this you can register your IP with a free database, which will assign a domain name to it. Hence you only need to remember the assigned domain name rather than the changing assigned IP. Obviously the assigned IP to the domain in the database will require updating when its changed but their help at hand here too.

To set this up, you firstly need to find out what your current assigned IP is, using www.whatismyipaddress.com/. Then register and set up a dynamic DNS service with DynDNS at www.dyndns.com/. During this process you will enter your current IP and choose a domain name. i.e. mydomain.homedns.org.

Next the dynamic IP information must be entered into the router. My setup is a QNAP NAS TS-101 Server via a Netgear DG834GT and Sky ISP. The router setup page is entered by typing into your browser http://192.168.0.1 then admin/sky at the login panel. In the router setup page, select Advanced/Dynamic DNS. Within this page it lists the approved DynDNS provider. Enter your DynDNS domain name, and its user name and password. Finally enable it.

Once set up, typing in http://mydomain.homedns.org will take you to your network (remember typing this in only works from remote PCs). Now you are left only with the issue that when youre assigned IP changes (by turning off your modem) you need to update the database records at www.dyndns.com/. Well this can be done with a handy utility at www.dyndns.com/support/clients. Install this and let it run on your PC. Walla all you need to remember to access your devices remotely is http://mydomain.homedns.org

QNAP Nas server

The QNAP NAS TS-101 network attached storage device costs about £150. Additionally it requires a hard drive. I fitted a Hitachi Deskstar T7K500 400GB SATA2 costing £55. Specifications for the NAS TS-101 can be found at qnap.com.tw.

The unit is well made in brushed black aluminum with indicators on the front. It’s thermally cooled with just the hard drive noise to prevent it from being totally silent. In the setup the hard drive has a sleep mode, making the unit totally silent with minimal power usage.

I plugged the TS-101 NAS unit into a spare port on my Netgear DG834GT router/ADSL modem. The DG834GT has an Xbox 360 and two other computers on its other ports. Ultimately your speed on the home LAN will be limited to 100mbps via the DG834GT router. When transferring large files between the NAS and PCs this is a bit slow. An improvement is to get a 1000mbp network switch. That way high speeds are maintained between the devices. Each device was set up with a static IP. The TS-101 was assigned an IP of 192.168.0.3

The TS-101 NAS was initially set up using the CD it comes with. This got it up and running, but I personally still found it a bit daunting. Hence I systematically worked my way through setting up each individual function over the course of a few days.

The NAS hard disk is initially divided up into a number of sections Public, Qweb, Qusb, Qdownload, Qmultimedia. Access to these sections is by either a user group or registered individual. (read or read/write). Additional sections can be added. For example I created a Private area for myself. Users can be added and assigned to User groups which can also be added to. Hence each user is assigned to a user group and then either a user group or individual user, is given rights to a section. I broke mine down into User groups : Administrator/Home/Everyone/Friends. Then I assigned users to the groups, and finally users or groups access rights to sections.

Remote access to the NAS server is done using the IP address of your router. The easiest way to get this is by looking at whatismyipaddress.com. Initially this takes you to a default menu page where once logged in access to web based functions and administration are allowed. To assign a fixed domain name to your ISPs assigned dynamic IP see my article entitled Dynamic to static IP from your ISP provider

The default TS-101 menu page allows password access to administration functions and four sub menus.
1. Web file manager for management of individual files on the server
2. Web server accessing your TS-101 hosted web pages.
3. Multimedia station web accessed picture and music viewer.
4. Download station for setting up unattended downloads.

FTP Setup
To allow remote access to the TS-101 behind the router you have to open up ports on the Netgear DG834GT. This is done in the admin panel of the DG834GT. In the admin panel select Security/Services. Then enter three entries. One for FTP on port 21, one for HTTP on port 80 and finally port 6000 for admin access. These are the default ports for the TS-101 but can be changed. Then select TCP/UDP for each. Next under Security/Firewall rules add three inbound entries (one for each). Also I added some outbound entries, although I don’t think they are required. See image. Remote FTP access to the TS-101 drive sections can then be achieved using an FTP client and the IP assigned to your router from your ISP provider.

WEB SERVER
The web server function is activated via the menu Administration/network settings/web server. Once activated your TS-101 default menu page is replaced by your uploaded HTML page. The original admin page can still be accessed via IP 192.168.0.3:6000. I created a link on my new home page to the admin page. Web page files can be uploaded using your FTP client or directly. This works well. Although I wouldn’t recommend hosting large busy sites.

BACKUP UTILITY
On the supplied CD is a Backup program called NetBak. Once installed onto any network PC it allows you to backup either immediately or scheduled any drive or folder contents of that PC to the TS-101. Its straight forward to use. Restore is also provided to retrieve your files or whole disk backup.

DOWNLOAD STATION
The download station is accessed via the admin area of the TS-101 or via the web accessed TS-101 default menu. Its built into the firmware, and allows unattended downloads of torrent tasks and FTP downloads. These are dropped into the Qdownload area. Its functional but limited to the above two methods.

OTHER
Your printer once plugged into the TS-101 becomes networked. Mine was automatically recognized and works flawlessly out of the box. NAS server failures can be set up to remotely email you. 

The QNAP NAS TS-101 is a perfect companion for the XBOX 360. I moved all my photos, Music and videos (inc HD WMV) across to the Qmultimedia section of the NAS drive. Then the Squeezebox UPNP media server firmware of the TS-101 was activated. This is located in the menu Administration/network settings/multimedia station. Click to activate, and leave the squeezebox at its default settings. At the xbox end go into the Media tab, select Music / Source : Computer and the Twonky media server.

 I did find that the preinstalled Squeezebox V4.2Q firmware would not allow access to my videos. This was corrected by downloading and installing the Latest TS-101 firmware 2.1.0 which incorporates Squeezebox version 4.3. Now the wife can access it all easily and with no PCs on. Performance on this is instantaneous as quick as you hit the button its there. On port 9000.

WordPress seo checklist

This article gets a WordPress blog installed and SEO optimised. Its advised that you test the site for W3C HTML and CSS validation each step of the way, especially checking your chosen theme is compliant. The blog files will be located on your web servers domain within the httpdocs folder. If you want to install it into a sub directory of the domain then create this first (ie yourdomain/blog).  Another method is to create a sub-domain for the blog, and a fully optimised index.html file in the domains root.  This index file will then point to the blog in the sub-domain (http://blog.mydomain.com). For Amen the sub domain is created in the user area – Domain TAB – DNS expert – Add record

(1) In your web servers Plesk admin panel create a database and user. Ensure your web server MYSQL version is adequate for the version of WordPress and theme you intend using.

(2) Upload the wordpress files to the web server directory

(3) Open and edit the wp-config-sample.php file to reflect your connection details (ie DBname/User/password/localhost). Then save it as wp-config.php

(4) Install wordpress as instructed in its contained instruction file.

(5) In WordPress enter your new password, web log title and email address

(6) Upload your chosen theme to the wp-content/themes directory.

(7) Upload a blank .htaccess file to the WordPress root directory. Set its permissions to 666

(8) For a more SEO friendly permalink. Change it In settings/permalinks to : /%postname%/%year%/%monthnum%/ This will ensure each page and post has a good SEO link title for google.

(9) Download and upload “all-in-one-seo” into the plugin directory http://wordpress.org/extend/plugins/all-in-one-seo-pack/ This adds extra fields to your post and page creation templates. 

 (10) In themes/header.php replace the <title> with
<title><?php wp_title(’ ‘); ?><?php if(wp_title(’ ‘, false)) { echo ‘ :: ‘; } ?><?php bloginfo(’name’); ?></title>. This gives a well structured name to the page title ie softpages :: Links

(11) From the themes header.php remove :
<meta name=”keywords” content=”<?php bloginfo(’description’); ?>” />
<meta name=”description” content=”<?php bloginfo(’description’); ?>” />
This prevents duplicates by inserting default description mettags based on yout tagline entry

(12) Insert standard metatags in header.php :-
<meta name=”author” content=”your name” />
<meta name=”copyright” content=”your company – 2007″ />

(13) Download google sitemap generator and upload into your plugin directory. Upload 2 blank files to the root directory called sitemap.xml and sitemap.xml.gz, make them writable CHMOD 666 Activate it.

(14) Go to the google analytics page and create a new profile for your site Insert supplied code into the themes header.php. You can now monitor your sites activities.

(15) Set up google webmaster tools.

« Previous Page — Next Page »