Designer's one-stop resource

The day that everyone has long predicted has arrived: Video is no longer a novelty online and Flash video has become the darling of the Web. In this column, you'll get a quick look at how the well-integrated programs in Adobe CS3 Production Premium make it easy to get your video ready for the Web. And, once your video is ready, just follow the step-by-step instructions to add the file to a webpage with Dreamweaver.

1. Edit your video in premiere pro

Adobe Premiere Pro CS3 is a professional video-editing tool capable of handling a wide range of video formats. Create a new project, load your video, and you'll find all the features you need to edit, enhance, cut, and create transitions for your video.



Total Training

2. Clean up the audio in soundbooth

If you want to improve the sound quality of your video and add audio tracks or other sound effects, open your video file in Soundbooth and you can adjust sound levels, clean up noise, and choose from a wide range of filters to enhance and alter sound quality. The compression you do to video before you put it on the Web can have a negative effect on sound quality, so it's a good idea to start with a video file that sounds as good as possible.



3. After effects

And if you want to really dress up your video, add special effects, or apply any of a wide range of filters to your video, your next step is to open your video in After Effects. The learning curve on After Effects is steep, but you can use this program to make dramatic changes to video and create amazing special effects. Hollywood's got nothing on you, kid.



4. Flash video encoder

Finally, you need to optimize your video and convert it to the Flash format, and the best way to do that is with the Flash Video Encoder. You'll find many settings as you go through the conversion process, but the basic principal is similar to optimizing an image: You want the lowest settings for the fastest download speed, but you have to balance those against the impact on quality. (You can find more detailed instructions for using the Flash Video Encoder in my latest Web tutorial at www.layersmagazine.com. Just navigate to either the Tutorials section or Flash section.)



5. Launch dreamweaver

Once your video is in Flash format, launch Dreamweaver and create a new page or open an existing one. Format the page as you would any other page and make sure to save it before you add your video.



6. Insert flash video

Click to insert the cursor where you want the Flash video file to appear, then select Common from the Insert bar if it isn't already selected. Choose Flash Video from the Media drop-down list in the middle of the Common Insert bar. You can also choose Insert>Media>Flash Video.



7. Select video type

In the Insert Flash Video dialog, specify Progressive Download Video or Streaming Video. (Note:You must have special software on your server for streaming video. Check with your Internet hosting service or system administrator to find out whether your Web server supports streaming Flash files. If not, choose progressive.) Click the Browse button and select the Flash file. If the file isn't in your site root folder, Dreamweaver will offer to copy it there for you. This is important because the Flash file must be uploaded to your Web server when you upload the page that displays the file.



8. Choose a flash video skin

Choose a Skin from the drop-down list. (Dreamweaver calls the controls for a Flash file a skin.) As you can see in this figure, a preview of the selected skin is displayed in the dialog when a skin is selected. You can choose from the nine skins that come with Dreamweaver and you can add new skins created in Adobe Flash.



9. Configure skin options

Click the Detect Size button and Dreamweaver will automatically insert the height and width of the Flash file in the HTML code. If you want the Flash video to play as soon as the page is loaded, click to select the Auto Play checkbox. To automatically rewind the video after it has played, select the Auto Rewind checkbox.



10. Add prompt; customize message

The Prompt Users to Download Player If Necessary option creates a message that's displayed on your page if visitors to your site don't have the Flash player installed. You can edit the message in the Message field if you want to change the words. For example, you might use something like, "Join the modern world" get the latest Flash player already!



11. Make adjustments in the property inspector

Click OK to insert the Flash file and close the dialog. The Flash file is represented in the webpage by a box that's the height and width of the video. Click on the box that represents the video and in the Property inspector at the bottom of the workspace, you can make further adjustments to the settings, such as choosing a different skin for the player.



12. Scripts for optimization

When you insert a Flash video file with a skin, Dreamweaver creates a Flash file with the SWF extension and saves it in your root site folder. This Flash file contains the player controls. Here you can see the file called Halo_Skin_3.swf, which contains the skin. Similarly, when you save the page, Dreamweaver automatically creates a special script, saved in the Scripts folder, which helps the file play better in some Web browsers. For the video to display properly, both the Scripts folder and the SWF file with the player must be uploaded to your website when you publish the page.



13. Preview in browser

To view the Flash video, you need to preview the page in a Web browser. You can do that by clicking on the Preview in Browser button at the top of the workspace, or by choosing File>Preview in Browser. You must have the Flash Player installed on your computer to view the Flash video. (Note: For some of the Flash skins, the play, pause, and other controls only become visible when you roll your cursor over the bottom of the video.) To learn more about Flash video parameters and other more advanced settings, visit www.adobe.com and search for Flash video



Author's URL: www.layersmagazine.com

First, let's explain exactly what a hyperlink is.

Hyperlinks are those underlined words that you see on web pages that take you to another page, or another part of the same
page, or open up your e-mail client to send a message when you click on them with your mouse.

You can use hyperlinks on text and graphics..including banners. When you click on a banner on a web page, it takes you to
another page...right? It is hyperlinked. I'm sure you have also clicked on hyperlinked graphics as well.

Okay. The basic hyperlink, the one that takes you to another page, looks like this:
<a href="http://kwilliams.hypermart.net">The Home Business Files</a>

When this is displayed in a web browser, it actually looks like this:
The Home Business Files


When it is clicked on, it will take you....you guessed it...to our site, The Home Business Files.

Pretty simple, huh?

Okay, let me explain what these tags do.

The <a> tag stands for "anchor". This tag tells the web browser that you are about to use a hyperlink...you are about to "anchor"
something - as in tie it to another page.

The address is then put into the href="" tag. This tells the web browser where you anchored that something to..whether it be text or a graphic. Href stands for Hypertext Reference and is called an attribute of the <a> tag. Of course after this tag, you would put the text or the graphic you want to link to. What you want to appear in the web browser.

You then must close the anchor tag with </a>

An important note...The URL must go between the quotation marks in the href="" tag. This is vital.

Now, I'm sure you noticed that we used one tag for two HTML codes. We put the code for "anchor" and the code for "href" into the same tag...meaning we only used one set of brackets (<>) for these two codes. It is often possible to do this, and you will figure out what can and cannot share a tag as you go along. In this case, it was possible because the href= tag is an attribute of the <a> tag...meaning that they go together.

The next most common hyperlink would be a link to another page in your website. In order for this to work, the page must be in the same directory as the page the hyperlink appears on. If it isn't in the same directory, you must use the long form, as shown above, just like you are hyperlinking to another website.

To link to a page in your website, that is in the same directory, the tag will look like this:
<a href="contents.htm">Contents</a>

In a web browser, this would look like this:
Contents

Next, there is the "jump" link. This is a hyperlink that will take you to another part of the same page when it is clicked on. There are two steps to creating this link.

First you must identify the part of your page that will be "jumped" to. For instance, if I wanted to refer you back to the definition of hyperlinks, I would use the following code in front of the paragraph that defines hyperlinks:

<P ID="definition">Hyperlinks are those underlined words that you see on web pages that take you to another page, or another part of the same page, or open up your e-mail client to send a message when you click on them with your mouse.

Then, later in my page, I would use a hyperlink to jump back to that definition. For example:

<a href="#definition">This will take you back to the definition of hyperlinks</a>

This will give me:

This will take you back to the definition of hyperlinks

Now, the other use of hyperlinks will be to open up the visitors e-mail client, with your e-mail address, and possibly a predefined subject already put in for them. This is also done with the href tag...like this:
<a href="mailto:thao.vivian@gmail.com">Send E-Mail</a>

This gives you:
Send E-Mail

Now, if you wanted to pre define the subject line in your visitors e-mail, you would use this:
<a href="mailto:thao.vivian@gmail.com.com?subject=testing">Send E-Mail</a>

Try it out with your e-mail client...just click this link:
Send E-Mail

And that's all there is to know about hyperlinks!

Author: K.Williams

In this tutorial we are going to create a website layout using Adobe Dreamweaver which could be used for a E-commerce, Portfolio or Ad Sense Website.

Creating Websites In Adobe Dreamweaver

In this dreamweaver tutorial we will be creating this:



Website Url: http://www.local-bathrooms.co.uk/
To build our website we will be using tables, to create tables we will go Insert > Table.

You should now see this, here we will insert the options for our table.



Once we have created the table, we will go to the bottom of our Dreamweaver and look at the table properties. We are going to center the table on the page, to do this we will click Align > Center.



Now if you click of the table you will see a button at the bottom of Dreamweaver named Page Properties, here we can see the page font, size, color and background color.

We have set these options, instead of choosing and page background color we have chosen to have a image as our background.



In the top row of the table, we are going to type in our keywords which will help the search engines know what our website is about, we are going to center the text and bold it.



In the second row we are going to insert out website logo, to insert a image go to Insert > Image.

Find your image and click ok. Now click on the image and we are going to make a horizontal space of 20 pixels so it indented from the size of the table. We are also going to link the logo to our homepage so it will be easier for our visitors to navigate there way back to the home, do this by typing in your home page url in the link form. You use Index.html (.htm or .php can also be used) so the browser will see this page first if they type in our domain.





Now in the third row right click and go Table > Split Cell…



Split the cell into 2 columns and click OK.



Click inside the left column and give it a gray background and a width of 170 pixels.



Now insert a table inside the left column (Insert>Table) using next options.



Click in the top row of the new table and drag down to the bottom table so it highlights all of the tables. We will now give the tables a height of 21 pixels and a background color of green.



You should now be left with this



For our first 7 links we are just going to put text with a small image.

For the next links we are going to, bullet point, resize to 11 pixels, and give a color of yellow.



You should now have this:



Now once we have completed our links we are going to prepare our news letter sign up, something every site should have. For my website's i use a News Letter Software offered by Aweber.com but for the sake of this tutorial we will design the news letter.

Go and click on the Text Field image in the Forms panel or go Insert>Forms>Text Field.

We are going to do this twice the followed by a submit button, Insert>Forms>Button or through the Forms Panel by clicking Button



Now in the right column in the third row we are going to insert another table(Insert>Table).



In our left column of our new table, we are going to add a List Menu, this allows visitors to scroll through a list of pages to find the link there looking for.



The item label is what you want your visitors to see in the list and value is where you want the item to take them. Click ok when finished.



I then added content to the other 2 columns using a couple simple images and text, you should now have this:



Now we are going to make our Links, highlight the text you want to link to a page and go to the bottom to properties and just like when we linked the logo we are going to link to the page we want.



You will be noticed the text changed the blue and underlined

To change the appearance of our links, go to Page Properties and click Links.

I have chosen to have the link as white but on link over to be yellow. We have also chosen never to underline our links.



Adding Ad Sense to our layout is simple, right click where you want to insert Ad Sense (next to our logo in the header for us) and click Insert HTML…

Paste your adsense code and your done.



Finally we are going to go give our web page its page title which helps search engines to find out what out website is about.

After inserting our page content you should be left with this:


Author's URL: www.webdesigndev.com

1. What is a Tag Cloud?
A tag Cloud is a visual depiction of a list of items. You will often see tag clouds on your blogs. In other words, Tag Clouds (provided they are not cluttered and display just the relevant words) help visitors quickly visualize what your website is all about since the topics you frequently cover are mentioned in bold or relatively bigger fonts. Most tag clouds are built based on popularity or the number of pages that are tagged with that particular tag. But you can create a tag cloud out of any list of items on your site that have at least two ways of displaying them.

2. How to add a good looking tag cloud to your Blogger blog:
i. Type your Blogger feed address in RainMaker
http://www.blogger.com/feeds/xyz/posts/default?max-results=999

Remember to replace xyz with your Blog ID. This URL will retrieve your latest 999 posts and supply that for analysis to RainMaker.

ii. For the word link, type the following (where xxx is your blog name, e.g. labnol)

http://xxx.blogspot.com/search?q=%%enc_word%%

iii. You can change the default font size, tag cloud dimension background image and colors to fit your site theme.

iv. Now the tricky part. Once you have generated the tag cloud using RainMaker, right click over your tag cloud and click "View HTML source" - that the code you need to copy paste in your site.

Tip for Tag Clouds - If you really want visitors to spend more time on your site via Tag Clouds, always keep the number of words in Tag Cloud to an absolute minimum and that there is sufficient space around each word.

Source: http://www.labnol.org/

One of the best things the free products giving to us is that each of them carrying out a particular task, which help us finding exactly what we were looking for without spending a cent.

Free Burn MP3-CD
Download at: (http://www.nbxsoft.com/files/burnmp3cd.exe)

1) Click "Add" button to add MP3, WAV, WMA & OGG audio files to the source list ready to burn.

2) Select the CD burning device. Set the burning speed and CD volumn.

3) Click "Burn Now!" button to start burning MP3 to CD.


Free MP3 WMA WAV Converter

Download at http://www.nbxsoft.com/files/mp3converter.exe

1) Click "Add" button to add audio files you want to convert to the source list.



2) Select the output audio format.

3) Click the "Options" tab and select output directory.



Free Create-Burn ISO Image
Download at: http://www.nbxsoft.com/files/createburniso.exe

1) Manage files and folders of the CD / DVD from the right buttons group. You can also drag and drop files / folders from Windows Explorer program.



2) Right click on the Treeview or Listview to select menu item from popup menu.



3) Select the burning device. Select Data CD or Data DVD you want to burn.

4) If you want to burn CD / DVD directly, insert a blank disc into the CD / DVD recorder and click "Burn CD / DVD" button. If you want to create ISO image file and burn it later (or use it in virtual CD/DVD program such as DAEMON, Alcohol), click "Create ISO" button.

5) If you have a data ISO file and want to burn it, click the "Burn ISO" button when the program starts.



6) Select the ISO image file, burning device and appropriate options. Insert blank disc into the recorder and click "Write Disc" button to burn ISO.

Free MP3 Sound Recorder
Download at: http://www.nbxsoft.com/files/mp3recorder.exe

1) Click "New" button to start a sound recording project.


2) On the Device Options dialog

If you want to record audio from Internet streaming, or any Media Player program, check the Stereo Mix or Wave Mix or similar option. This will enable the program to record through the system sound card.

If you want to record audio from microphone, check the Microphone option.

Click "Continue" button.



3) On the Formats dialog
Select output audio format. It can be MP3, WAV, OGG or VOX.

4) Choose the output audio file path on the Save dialog.

5) Click the "Record" button to start recording.



Free Flv to AVI Converter

1) Add source Flv video files to the source list.



2) Click the "Settings" button. Choose output video format on the Settings dialog.



3) Click the "Start" button on the main window to start converting.

Free Screen Recorder

1) Start Free Screen Recorder, click button to open General Options dialog. You can set the region of the screen to be recorded.

2) Click button to open Video Options dialog. You can set the video codec of the AVI file, video quality and framerate.

3) Click button to open Audio Options dialog. You can set the audio format, frequency, bitrate, channel etc.

4) Click button to open Cursor Options dialog. You can set the cursor's shape and highlight options.

5) Click button to open Hotkey Options dialog. You can set the start / pause / stop hotkey of the recording.

6) Click button or press the start hotkey to start recording. And click button or press the stop hotkey to stop recording.