MM3311 Production Log

Dreamweaver Tutorial Videos

2008-03-21T09:07:00.000-07:00

Click the image or text to watch the Tutorial Video

Pre and Post Questionnaires

2008-03-08T17:41:00.000-08:00

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

2008-03-08T11:09:00.000-08:00

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

Turn on computer.
Open the Dreamweaver.
Click File > New to create a new blank HTML document.
Create a new folder, named “My Website”.
Click File > Save Ctrl+S (PC) / Command+S (Mac).
Save your blank HTML document in the folder “My Website”, the file name – index.html
In your “My Website” folder, create another folder named “Image”
Chose your workspace Layout.
Click Window > Workspace Layout > Designer.
In your top of HTML document, insert a descriptive name in TITLE column, For Example “My Website | Home”.
Click File > Save or Ctrl+S (PC) / Command+S (Mac).
Click the Global Icon from the top of your HTML document to preview your HTML document.
Select Preview in Internet Explorer or Firefox or any other listed browsers.
You’re see your TITLE appeared on top of the browser.
Go back to Dreamweaver.
Click Table icon from Common Tab of Insert Bar.
Type number for column of rows & columns
Type number for Table Width
Type number for Border Thickness
Click Header – chose None, Left, Top or Both
Click OK button
Click the left-top column of your table
Insert Text
Click the next column of your text
Copy or Move images to your folder “My Website > Image”
Click Image Icon from Common Tab of Insert Bar
Hold down the drop-down menu and then chose Image
You’re see a pop up Dialogue window of Select Image Source
Select an image from you’re folder “My Website > Image”
Click OK button
Give a name to identify your image in the Alternate text column, For Example: myimage
Click OK
Look at the bottom of your HTML document window
You’re see a Properties Inspector
Type numbers 1 & 2 in your document bottom
Highlight the number 1
In the Properties Inspector , there is a LINK column, type index.html
Hit Enter key on your keyboard
Preview your HTML document in the browser
Click the Global Icon from the top of your HTML document to preview your HTML document.
Select Preview in Internet Explorer or Firefox or any other listed browsers.
This is your first web page.
Follow the above steps to create the second HTML document
Save it to the same folder “My Website”
Image should be SAVE to folder “My Website > Image “
Type numbers 1 & 2 in your document bottom
Highlight the number 2
In the Properties Inspector , there is a LINK column, type 2.html
Hit Enter key on your keyboard
Preview your HTML document in the browser
Click the Global Icon from the top of your HTML document to preview your HTML document.
Select Preview in Internet Explorer or Firefox or any other listed browsers.
In your browser, click the number 1 or 2
Now, you’re 2 web pages is linked together.
You’re done your first website.

SOFTWARE NEEDED

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

OPERATING SYSTEM

Windows XP or better
MAC OS 10 or better

GETTING STARTED

Turned on your computer
Connect your wired / wireless mouse to your computer
Connect your wired / wireless keyboard to your computer
Turn on your speakers
Open your web browser application software
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

2008-03-05T11:26:00.000-08:00

Turn on computer.
Open the Dreamweaver.
Click File > New to create a new blank HTML document.
Create a new folder, named “My Website”.
Click File > Save Ctrl+S (PC) / Command+S (Mac).
Save your blank HTML document in the folder “My Website”, the file name – index.html
In your “My Website” folder, create another folder named “Image”
Chose your workspace Layout.
Click Window > Workspace Layout > Designer.
In your top of HTML document, insert a descriptive name in TITLE column, For Example “My Website | Home”.
Click File > Save or Ctrl+S (PC) / Command+S (Mac).
Click the Global Icon from the top of your HTML document to preview your HTML document.
Select Preview in Internet Explorer or Firefox or any other listed browsers.
You’re see your TITLE appeared on top of the browser.
Go back to Dreamweaver.
Click Table icon from Common Tab of Insert Bar.
Type number for column of rows & columns
Type number for Table Width
Type number for Border Thickness
Click Header – chose None, Left, Top or Both
Click OK button
Click the left-top column of your table
Insert Text
Click the next column of your text
Copy or Move images to your folder “My Website > Image”
Click Image Icon from Common Tab of Insert Bar
Hold down the drop-down menu and then chose Image
You’re see a pop up Dialogue window of Select Image Source
Select an image from you’re folder “My Website > Image”
Click OK button
Give a name to identify your image in the Alternate text column, For Example: myimage
Click OK
Look at the bottom of your HTML document window
You’re see a Properties Inspector
Type numbers 1 & 2 in your document bottom
Highlight the number 1
In the Properties Inspector , there is a LINK column, type index.html
Hit Enter key on your keyboard
Preview your HTML document in the browser
Click the Global Icon from the top of your HTML document to preview your HTML document.
Select Preview in Internet Explorer or Firefox or any other listed browsers.
This is your first web page.
Follow the above steps to create the second HTML document
Save it to the same folder “My Website”
Image should be SAVE to folder “My Website > Image “
Type numbers 1 & 2 in your document bottom
Highlight the number 2
In the Properties Inspector , there is a LINK column, type 2.html
Hit Enter key on your keyboard
Preview your HTML document in the browser
Click the Global Icon from the top of your HTML document to preview your HTML document.
Select Preview in Internet Explorer or Firefox or any other listed browsers.
In your browser, click the number 1 or 2
Now, you’re 2 web pages is linked together.
You’re done your first website.

Captivate - record audio

2008-02-27T20:44:00.000-08:00

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

2008-02-06T10:01:00.000-08:00

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

2008-01-23T21:54:00.000-08:00

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

Project Proposal

2008-01-16T10:05:00.000-08:00

Learn how to use Dreamweaver to create a basic website

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 want 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.

Technical Aspects:

The main navigation will include: Home, Study Guide, Tutorial, Learning Material Resources (such as book, or other website), About Us

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.

Resources:
Dreamweaver Templates Tutorial

Creating A New HTML Page

DreamweaverMX Tutorials

Dreamweaver Tutorial - Create a basic Webpage Insert Content