[b]BECOME A PROFESSIONAL WEBMASTER TODAY!!!!![/b]Learning the web is quite a simple thing for those that catch the vision at an early stage. It is one very simple aspect of the web that everyone should be acquainted with. Many have been fooled by the so called designing with a notepad, programming JAVA, JAVASCRIPT, VB, PHP, from the scratch when they can automate the entire process with a mouse click using world class software. In these article, I am going to show you tips about designing WebPages without CODES (designing with fun.) using some software well known to us.

INTRODUCTION

Before I start, let introduce you to a general knowledge that would help you understand what they can do for you. The softwares we intend using are listed below:

Macromedia Fireworks
Macromedia Flash Mx
Macromedia Dreamweaver
Frontpage & Swish Max.
Fireworks
Fireworks can help you create graphic that are well optimized for the web, create web buttons without you caring about the up state (ordinary state of a button), over state (when the mouse is over it.) JavaScript, build drop down menus and many more function. To see a sample of a firework created banner, please visit http://www.titanaspride.com for clearer explanation. Also, you can create GIF animation, and other function powered with full JAVASCIPT functions.

Macromedia Flash Mx/Swish Max
With this programmes you can create outstanding animation and animated web buttons that meet the present web demand. Also you can create some little interactivity as present in one of my sites: http://www.ttlafricamovies.com

Dreamweaver

Dreamweaver is one of the most powerful web editor ever known in the world. With the recent snippets added to dreamweaver, you can create the following automatically
HTML PAGES
WEB FORMS
CASCADING STYLE SHEET
PHP WEB APPLICATION
--- registration forms,
----contact form
----simple forum
----admin area
----advanced member area & many more

TIP:
To use php easily, please install WAMP 5

Note:

Please know that as time goes on, I will post an article on how to use the following programs.

For more tutorials: please visit http://www.netpagesonline.com

What is WAMP? Don't even talk about it, it sucks. I have PHP server on my flash disk, in case I need to present to a client, so get XAMPP http://www.apachefriends.org/en/xampp-windows.html.

Nice from you. THis article is for beginner. It is not meant for professionals.

my Prayer is to see Nigerian using Dreamweaver, Fireworks, Macromedia Flash to the maximum. To see samples of my flash work and get a free premium template at cost from me, go to www.rickyswebtemplates.com which was moved from our former netpagesonline. Please, before we can start dreamweaver tutorials, you must no how to use and install WAMP. Addon include a mail server, zend optimizer and many more. By the end of this article, you should know how to build a contact system and fully functional PHP site with dreamweaver. Please don't be deceived, i have used xampp and many others. They perform thesame function. I am a professioanal teacher that have taught in italy. You can see my experience from my template site. So follow carefully through this article or you can book a training with us at www.netpagesonline.com.

Article: Installing WAMP 5

Become a Professional webmaster Pt. 2

Welcome back to our NETPAGES online web tutorial with your host Netpages. Today we would be looking at how to install a local server so that you can work with php files and create application within your desktop.
Meaning of wamp:

W – Window
A – Apache
M – MySQL
P – PHP

First, we would need to have the setup. To download, click here:
http://www.wampserver.com/en/download.php

When you finish downloading it, click on the setup files and follow the instructions. Please make sure you tick it to run automatically. After installations, look at your task bar close to where time and click on the icon representing it.

TIPS:

To start write away with your server, click on icon as show in the attachment and click on PHPMYADMIN, The first thing is to create a user know as the database administrator. Click on
Reload privileges >> Add a new User then enter the login info and finally click CHECK ALL for Global privileges. Next Article, we would continue from here.

Create a Layout in Fireworks

Step 1: Create a new Fireworks Document
Open Fireworks and create a new document [File > New].


In the dialog box enter the width and height of the layout. I usually design for a width of 780 pixels width. This works well in monitors with 800 x1024 resolution as it leaves 20 pixels for the browser scroll bar. The resolution for the web is 72. You can also choose a background color if your webpage will have a background color.


Click OK.

Name and Save the document [File > Save]. Fireworks files have the extension .png. You can name it "layout.png".


If you plan to use stock photos you should find the appropriate images and keep them ready. You should also have logos, bylines and some sample text ready. If your home page has a different layout from the rest your site you will have to create 2 different layouts. For the home page design you should be clear about what you want to communicate, things that you want to highlight and other usability principles. You should also be clear on your navigation based on your site plan.

Insert Images
Insert any images that you plan to use [File > Import]

Browse for the image file
Select the file
Click the 'Open' button
The cursor will change
Click where you want to place the image on the canvas
The image will be placed there
You have many tools to clean up and enhance the image within Fireworks.

You can use auto levels to bring out the best in photos [select photo > Filter > Adjust Color > Auto Levels ].

You can also try out the other filters.

Fireworks Filters

You can undo if you're not happy with it. By default you can undo upto 20 actions in Fireworks. You can increase the number of times you can undo by setting it in {Edit > Preferences > General Tab > Undo Steps].

You can make chages to the images - remove backgrounds, resize etc. You can also create vector shapes. Take some time to explore the options provided in the tools palette [Window > Tools].

Insert Text
Use the text tool to insert text like a sample heading, sample textual content, menu items, byline, sample links, footer - copyright info etc. Style the text by using the options in the Properties Palette.


Step 3 Coming soon

Regards,
www.netpagesonline.com

Step 3: Create the Layout
Once you have put in all the images and text you can rearrange it to create a layout that will be attractive and easy to use. Ensure that the layout passes the trunk test and has the basic layout elements like logo, byline, navigation, copyright, content area, heading and sub heading styles and link styles.

Ensure your layout is something you can recreate in HTML and can be optimized to load fast.

Fonts for content should be one of the common fonts that are available on all computers. Arial or Verdana are usually easy to read on the computer. Logo fonts , button fonts and some title can use special fonts and effects but you will need to export all these as images and any change will have to be made within Fireworks and the images exported again. This is therefore more difficult to maintain, so use image text only when absolutely necessary.

Icons - Design any icons that you will use in your website.

HTML Elements - You can take a screen shot of other webpages with form fields etc. ['Prt Scr' key on your computer keyboard] and paste it into your layout to get an idea of how it will look in your layout.

Images - Resize your images and shape them to work with the rest of the elements of the layout. Check out Fireworks Tips and Tricks for additional ideas.

Flash - You can plan in space for any flash animation that you will be using, within your layout.

The layers panel is useful when there are many objects and you want to get to something behind. You can click on the "eye" icon to to hide a particular layer. You can move a layer over another to bring it in front.

Adobe Fireworks CS3 Tips and Tricks
1. Crop an Image
You can crop a particular image within the canvas by selecting the image and [Edit > Crop Selected Image]

2. Image in Shape
You can put an image into a shape by:

Create a vector shape
Place the image over the shape
Cut the image
Click the shape
Select Edit > Paste Inside
Click the 4 dots icon that appears to move the picture around within the shape till you are stisfied with the position
3. Blend an Image into the Background
When one end of the image needs to be made transparent

Select the image
Click 'Add Mask' icon in the layers panel
A new green rectangle will appear in the layer
Click on this layer
Click the paint bucket tool
Select Gradient > Linear in the properties panel
Click on the image at the part that you want to remain opaque and drag till the end of the image that you want to make transparent.
The image will blend beautifully into the background
When the Image needs to be shaped differently

Select the image
Use the marquee tool to select the area you want to keep
Select > Feather
Specify a radius that you want to feather and click ok
Select > Select Inverse
Hit "Delete"
Your image will blend neatly into the background in the desired shape, if the feather is too much you can undo and repeat the process with a lower (or higher) feather radius.
4. Curve Text around a Shape
Step 1: Create some text and a shape

netpages my guy,
you don try

Dreamweaver Tutorial: Define New Site

Create a folder in which you will store all your project files. Create an 'images' folder within and transfer all the sliced images to this folder.
Open Dreamweaver
Define a new site [Site > New Site > 'Advanced' tab]
Fill in your Site Name in the box provided for 'Site Name'.
Use the yellow folder icon next to the 'Local Root Folder' box to browse for the project folder you had created.
You should be able to see the 'images' folder in your Files panel [Site > Files].

If most of the pages in your web site have the same look and feel it is advisable to create a Dreamweaver template.

The advantages of creating a dreamweaver template include:

All pages will look consistent
When you want to make changes that effect the layout of the entire site you can simply make the changes to the template and update all the pages automatically
The dreamweaver template file has a .dwt extension and will get saved in a folder entitled "Templates". To create a dreamweaver template follow these steps:

File > New
Page Type > HTML template
Layout - select from one of the pre-built layout options and customize it or select <none> and create your own from scratch


Insert Text & Images

Once your template layout (with tables or div tags) and css stylesheet is created, you can insert any images (e.g. logo), common menu items, text (e.g. copyright info) etc. that form part of the general look and feel of the site into the template.

Text

You can type in text just as you would in any text editing software. You can apply styles to it from the Properties panel.

You can also format it with the existing html tags (which you would have redefined in the css file).

To be continued