Dreamweaver Tutorial Videos

Dreamweaver Tutorial Website

Click the image or text to watch the Tutorial Video

Tutorial Video: Dreamweaver Tools

Tutorial Video: Create a website

Pre and Post Questionnaires

Pre-Questions:
1. Do you like to surfing the Internet?
2. Do you own a personal computer?
3. Do you have high-speed Internet Connection at home?
3. Are you interested in learning about Dreamweaver?
4. Do you want to create a personal website?
5. Would you like to learn how to make a website in your style?
6. Do you want to learn how to upload your website?
7. Do you learn by watching tutorial videos?

Post-Questions
1. Did you learn how to create a website in Dreamweaver?
2. Did you find the video tutorials useful?

3. Does Dreamweaver tutorial video easy to follow and understand?
3. Would you like to see more tutorials video to learn more about Dreamweaver?
4. Do you like this tutorial website?
5. Do you find out the information and study guide useful from this tutorial video website to help your learning?
6. Would you recommend this website to anyone?

Study Guide

PURPOSE

This site will design to help teach Dreamweaver to beginners. Dreamweaver is a web page editor, designed to allow users to create web pages without having to write the HTML code by hand. I will teach how to add multimedia elements such as flash (.swf) file, quick time (.mov) file into html page, how to make frames, layout, css style list...etc. There are many people wanted to create their own site and this tutorial will be the first step to know how to use Dreamweaver to make their own personal style webpage.

GOALS

The main goal for this site is to educate people how to create a basic website and publish it to the Internet for personal or business purpose.

BASIC NEEDED

• User should know general knowledge of how to operate computer for basic needs.
• Know how to connect their computer to Internet
• Know how to get online
• Know how to use web browsers
• Know how to type URL to open online tutorial video website
• Know how to download things from a website
• 
  

TASK ANALYSIS

1. Turn on computer.
2. Open the Dreamweaver.
3. Click File > New to create a new blank HTML document.
   
4. Create a new folder, named “My Website”.
5. Click File > Save Ctrl+S (PC) / Command+S (Mac).
6. Save your blank HTML document in the folder “My Website”, the file name – index.html
7. In your “My Website” folder, create another folder named “Image”
8. Chose your workspace Layout.
9. Click Window > Workspace Layout > Designer.
10. In your top of HTML document, insert a descriptive name in TITLE column, For Example “My Website | Home”.
11. Click File > Save or Ctrl+S (PC) / Command+S (Mac).
12. Click the Global Icon from the top of your HTML document to preview your HTML document.
13. Select Preview in Internet Explorer or Firefox or any other listed browsers.
14. You’re see your TITLE appeared on top of the browser.
15. Go back to Dreamweaver.
16. Click Table icon from Common Tab of Insert Bar.
17. Type number for column of rows & columns
18. Type number for Table Width
19. Type number for Border Thickness
20. Click Header – chose None, Left, Top or Both
21. Click OK button
22. Click the left-top column of your table
23. Insert Text
24. Click the next column of your text
25. Copy or Move images to your folder “My Website > Image”
26. Click Image Icon from Common Tab of Insert Bar
27. Hold down the drop-down menu and then chose Image
28. You’re see a pop up Dialogue window of Select Image Source
29. Select an image from you’re folder “My Website > Image”
30. Click OK button
31. Give a name to identify your image in the Alternate text column, For Example: myimage
32. Click OK
33. Look at the bottom of your HTML document window
34. You’re see a Properties Inspector
35. Type numbers 1 & 2 in your document bottom
36. Highlight the number 1
37. In the Properties Inspector , there is a LINK column, type index.html
38. Hit Enter key on your keyboard
39. Preview your HTML document in the browser
40. Click the Global Icon from the top of your HTML document to preview your HTML document.
41. Select Preview in Internet Explorer or Firefox or any other listed browsers.
42. This is your first web page.
43. Follow the above steps to create the second HTML document
44. Save it to the same folder “My Website”
45. Image should be SAVE to folder “My Website > Image “
46. Type numbers 1 & 2 in your document bottom
47. Highlight the number 2
48. In the Properties Inspector , there is a LINK column, type 2.html
49. Hit Enter key on your keyboard
50. Preview your HTML document in the browser
51. Click the Global Icon from the top of your HTML document to preview your HTML document.
52. Select Preview in Internet Explorer or Firefox or any other listed browsers.
53. In your browser, click the number 1 or 2
54. Now, you’re 2 web pages is linked together.
55. You’re done your first website.

SOFTWARE NEEDED

1. Internet Explore, Firefox (for PC user) / Safari, Firefox (for Mac user)
2. Flash Player to run Tutorial Video
3. Dreamweaver CS3 to practice to create a website
4. Photoshop CS3 to make / edit your graphics & images

OPERATING SYSTEM

1. Windows XP or better
2. MAC OS 10 or better

GETTING STARTED

1. Turned on your computer
2. Connect your wired / wireless mouse to your computer
3. Connect your wired / wireless keyboard to your computer
4. Turn on your speakers
5. Open your web browser application software
6. Open Dreamweaver application software

FREQUENTLY ASKED QUESTIONS

1.Why my computer can’t play the tutorial video?
Your computer may don’t have ADOBE FLASH PLAYER installed.



2.Why do I need to download ADOBE FLASH PLAYER?
It’s the player lets you play the tutorial video



3.Do I need to know HTML?
No, Dreamweaver can automatically build the basic HTML coding for your basic website.

However, it would be help you to use advance tools and techniques to build your website better if you have some knowledge of HTML.



4.Do I need to know Photoshop?
No. In this tutorial, we are not going to edit any graphic or images in Photoshop.




5.Do I need to know Dreamweaver?
From now on, you’ll learn how to use Dreamweaver whatever you have any prior experience and knowledge of using Dreamweaver, because you will learn the basic tools, insert images, insert text, create tables and publish your website to Internet for this tutorial video.



6.Why can’t hear sound from the tutorial video?
Make sure your speakers are turned on and plugged in to your computer.



7.How to upload my website to my school accounts?
1. You need to know your OLS account’s LOGIN name and PASSWORD.
2. You need to know school FTP host and which folder to save your files.
3. You must have the Internet connection.



8.What is school FTP host?
Host/Server: ftp.yl372.aisites.com



9.Where to save my upload website files and images?
1. You have to create a folder
2. put all of your files in that folder you created
3. put that folder you created under the folder of “public_html”

Main » FileManager » /domains/your account name.aisites.com/”public_html”

Task Analysis

1. Turn on computer.
2. Open the Dreamweaver.
3. Click File > New to create a new blank HTML document.
4. Create a new folder, named “My Website”.
5. Click File > Save Ctrl+S (PC) / Command+S (Mac).
6. Save your blank HTML document in the folder “My Website”, the file name – index.html
7. In your “My Website” folder, create another folder named “Image”
8. Chose your workspace Layout.
9. Click Window > Workspace Layout > Designer.
10. In your top of HTML document, insert a descriptive name in TITLE column, For Example “My Website | Home”.
11. Click File > Save or Ctrl+S (PC) / Command+S (Mac).
12. Click the Global Icon from the top of your HTML document to preview your HTML document.
13. Select Preview in Internet Explorer or Firefox or any other listed browsers.
14. You’re see your TITLE appeared on top of the browser.
15. Go back to Dreamweaver.
16. Click Table icon from Common Tab of Insert Bar.
17. Type number for column of rows & columns
18. Type number for Table Width
19. Type number for Border Thickness
20. Click Header – chose None, Left, Top or Both
21. Click OK button
22. Click the left-top column of your table
23. Insert Text
24. Click the next column of your text
25. Copy or Move images to your folder “My Website > Image”
26. Click Image Icon from Common Tab of Insert Bar
27. Hold down the drop-down menu and then chose Image
28. You’re see a pop up Dialogue window of Select Image Source
29. Select an image from you’re folder “My Website > Image”
30. Click OK button
31. Give a name to identify your image in the Alternate text column, For Example: myimage
32. Click OK
33. Look at the bottom of your HTML document window
34. You’re see a Properties Inspector
35. Type numbers 1 & 2 in your document bottom
36. Highlight the number 1
37. In the Properties Inspector , there is a LINK column, type index.html
38. Hit Enter key on your keyboard
39. Preview your HTML document in the browser
40. Click the Global Icon from the top of your HTML document to preview your HTML document.
41. Select Preview in Internet Explorer or Firefox or any other listed browsers.
42. This is your first web page.
43. Follow the above steps to create the second HTML document
44. Save it to the same folder “My Website”
45. Image should be SAVE to folder “My Website > Image “
46. Type numbers 1 & 2 in your document bottom
47. Highlight the number 2
48. In the Properties Inspector , there is a LINK column, type 2.html
49. Hit Enter key on your keyboard
50. Preview your HTML document in the browser
51. Click the Global Icon from the top of your HTML document to preview your HTML document.
52. Select Preview in Internet Explorer or Firefox or any other listed browsers.
53. In your browser, click the number 1 or 2
54. Now, you’re 2 web pages is linked together.
55. You’re done your first website.

Captivate - record audio

Today I start to record tutorial video in Captivate. It took me some time to practice to use this software. Before I start to record my voice, I have to write down the script to remind myself what should I explain in the particular slide. It is very nice that Captivate allow you to edit your audio/voice in particular slide if you need to cut out some part of your audio/voice.

If you want to record a new voice for your slide, chose the audio icon > record this slide, and a window will pop up, you can type your script in slide note area to remind yourself while you are speaking it to record.

User Persona

My target audience is students who are using Dreamweaver to learn to create a simple website. They just began to learn the detail of web terminology, understanding domain extensions, and how to use Dreamweaver tools. Those are the basic knowledge before to start to create any web pages.

Name: Tommy
Age: 26
Gender: Male
Location: San Jose, CA

Tommy is the new but part-time student who studying the program of web design & interaction media at the Art Institute California – San Francisco. He enjoys spending as much time surfing the Internet, watching TV, movie, taking pictures to capture his most precious moments in his life, and update blog to share his thoughts. He recently took his first web design class in the Art Institute. He is very excited to learn this handy web design software to create his first website with pictures he took and the description of each picture. He does not have any web design experience but he understands how to upload picture and how to update his blog content to his blog. This is also the one of reason that he wants to learn how to create a website with the style he wants, not like the blog had limited style option.

Need Analysis

The reason that we need the Dreamweaver video tutorial is for continue learning after school or we need extra help to remind ourselves what we just learned from school today. Another reason is convenience because we can pay less money to buy a video tutorial DVD or download it for free from Internet, such as YouTube, so we can learn and practice more without going to class or pay for a private tutor.

Dreamweaver is the up-to-date technique to create a website and this is very popular software for today’s web designer and market. Most web design company asks and hire employee who know how to use Dreamweaver, so, this is become the basic knowledge and must to know technique for web & interaction designer.

Tutorial video provide the demonstration, visual, audio and clear steps and it is the best way to learn at home and by yourself only. For audiences, the complete and clear subject is the most important part because they don’t want to waste their time to watch a video didn’t cover the content they need. Hence, video subject is very important.

Online free tutorial video:
Dreamweaver Tutorials and Resouces

Free Dreamweaver 8 Tutorial Video