[Quick Tour of Dreamweaver]

[Setting up your Website Files]

1. In your Shared Drive, create a folder called “Tutorial Site”.
2. In that folder create another folder called “Images”.
3. Start Dreamweaver.
4. Set up a new site by going to Site -> New Site
5. Enter your site name, browse to the folder “Tutorial Site” for the root folder, and browse to the “Images” folder for the images folder.

[Inserting Text & Images]

1. Use Dreamweaver in “Design” mode. (Click “Design” where it says “code” & “split” & “design”)
   • Type some text on the page and insert a picture.
   • You can insert a picture by going to “Insert -> Image” or by finding the file in the files panel and dragging & dropping
2. Change the title from “Untitled Document” to “Text & Images”. This will change the header in the web browser as well.
   • The title is located at the top of the main window, underneath the quick buttons.
3. Save the file in the “Tutorial Site” folder called “Text.html”

[Layout Paragraphs & Images Layout]

1. Create a new blank html file by going to “New -> File“
2. Copy the Lorem Ipsum text from www.angieshen.com/lorem.html
3. Paste it on your html file.
4. Insert an image
5. Select the image then  Under the “Align” drop down in the properties panel choose “Left” in order to align the image to the left of the paragraph text.
6. Change the title bar title to “Paragraphs & Image Layout”
7. Save the file in the “Tutorial Site” folder called “paragraph.html”

[Linking to files and websites]

1. At the top of paragraph.html type the text “Go to Text & Images”.
2. Highlight this text and link it to text.html by dragging the circle beside the “link” box to the file you would like to link to.
   
   
3. Highlight any word in the paragraph and in the link box in the properties panel type the full url of your favorite website. Eg. “http://www.pantherathletics.ca”
4. Save the file and preview it in a web browser. File -> Preview in Browser
5. Test the links.
6. Go back to “text.html”
7. Add “Go to Paragraph Layout” to the top of the page and link it to “paragraph.html”.
8. Link the image on “text.html” to another one of your favourite websites.

[Creating Tables]

1. Create a table at the bottom of “text.html” by going to “Insert -> Table“
2. Create a table, with 5 rows and 3 columns.
3. Merge two of the cells together, highlight two cells, then right click on the selection and find the merge cells option.
4. Split a cell into 3 columns, right click on a cell and find the split cell dialog.
5. Resize the table so that it fills up most of the screen. Select the table by clicking on a cell border. Grab the black box in the bottom right of the table, click and drag until the table is bigger.
6. Change some of the cell’s colours by selecting a cell and changing the Bg option on the properties bar
7. Change the table’s border colour by selecting the table and changing Brdr color on the properties bar.
8. Change the table border’s thickness by changing the number in Border from 0 to 2 or 3.
9. Center the table by changing the alignment on the properties bar.
10. Insert some text into one of the cells.
11. Change the vertical alignment of this cell to top.
12. Change the horizontal alignment of this cell to centre
    .
13. Drag an image from the files panel into one of the cells.
14. Link the image to the “paragraph.html” file.

[Today's Task]

Must haves:

1. Create a mini website with 3 pages about you or about anything you want.
2. Each page is one html file.
3. Have the same menu on every page that allows you to link back and forth between pages.
4. Use a main table for the layout of the menu and content.
5. Each page must have a header title, at least one image, and some text (doesn’t need to be alot).

Must Haves:

1. Your name or nickname.
2. At least one letter that has been replaced or manipulated into imagery.

HAND IN:
1. Post your logo to your blog.
2. Answer this:

a) How does your logo represent you?

b) What feeling do you want people to get when they see your logo?

[Examples]

There are a few decisions to make while designing your logo.

In example “b” I used the [eyedrop tool] to get a sample of the wall colour, and filled the background colour the same colour. As you can see the illusion of the floating polaroid is pretty good. However…

Details make a difference!

If you look closely in example “c”, I actually copy the texture of the wall not just the colour…making everything seem even more seamless. Sometimes when you are working with photoshop, you may intentionaly be making things abstract. But in the case that you are trying to make things look realistic every little detail that goes “un-noticed” is what makes the difference.

People FEEL quality.

a) Original Color	b) Eyedropped Color
c) Copied the Texture	d) Cut off kills illusion

[How To]

1. Have your blog visible on the screen with the about page visible.
2. Take a screenshot of your monitor by pressing [Print Screen] on your keyboard.
3. In photoshop open a new canvas. [File -> New]
4. Paste your screenshot on this canvas [Edit -> Paste] or press Ctrl V
5. Use the [eyedropper tool] to sample the color you will use for the background of your polaroid.
6. Open your polaroid PSD file and fill the background layer with this colour.
7. Save the polaroid as a JPG.

“What is a polaroid?”

A Polaroid is an instant camera with self developing film. When people refer to a “polaroid” they are referring to the picture taken with this instant camera.

Task: For the “About” section of your personal blog, you will create a “polaroid” of yourself cropped from a picture taken in class.

**Must haves: Be square, have name, show face, sun is at top left, background color matches theme.

POLAROID TUTORIAL

Grab a picture of yourself.
 
PREPARE THE CANVAS & THE PICTURE

1. Open the picture in photoshop.
2. Using the [Crop Tool] – Crop in the shape of a square an interesting portion of the picture.
3. (hold shift down to make square)
    
4. Resize this picture to be 150px by 150px, 72dpi
5. [Image -> Image Size] or [Right Click the Title Bar of your image -> Image Size]
6. Create a seperate canvas by going to [File -> New] set this canvas to 250px by 250px, 72dpi
7. Choose a background color for this canvas and fill it using the [fill tool]
    
8. Make sure both your picture and your canvas is visible in your window.
9. Move your picture on to the canvas by selecting your whole picture [ctrl - a], then using the [Move Tool] and dragging it over to the canvas. (Name this layer “Picture”)
    
    

CREATE THE “POLAROID” LOOK

Create a new layer and move it under the elephant picture.

1. Create a new layer and move it under the elephant picture.
2. Use the [Marquee Tool] and draw a white rectangle larger than the elephant picture so that it leaves a white border. To give it the real “poloaroid” look leave a larger border at the bottom than on the other sides. (Name this layer “Polaroid”)
    
3. Fill the rectangle on the “polaroid” layer white.
4. Choose a font and type your name on the larger white border at the bottom of the polaroid. (Name this layer “Name”)
    

CREATE THE REAL “3D” EFFECT (DROP SHADOW)

1. Use the [magic wand] and select the white polaroid.
2. Create a new layer and move it under the “polaroid” layer. Name this layer “shadow”
    
3. Select the new layer and feather this selection by going to [select -> feather -> enter # pixels]
4. Fill the selection on the “shadow” layer with black using the [fill tool].
5. Use the [move tool] and move the shadow so that it is as if the sun was coming from the top left.

TILT THE POLAROID – MAKE IT LOOK THROWN ON THE PAGE

1. Link the layers “picture, name, polaroid, & shadow” together by clicking the links.
2. Use the [Transform Tool] (ctrl-t) to tilt the picture as you wish.

Now, save the file as a JPG to be uploaded to your “About” page or as a PSD for later use.
 

Nice! You’re DONE!

A blog is a website that is usually contains regular entries in reverse-chronological order. Like a diary,
commentary, or events.

Task: Create your own blog using WordPress. Include an “About” page and use this blog as your portfolio to display your work throughout the semester.

**Must haves: About page, Personal Polaroid, Personal Profile, hand in this task by leaving a comment to this post indicating your blog web address. (click “comments” to the left)

SIGN UP FOR A BLOG

• Use your ”yourname@limestone.on.ca” email address to sign up for a blog at http://www.wordpress.com
• When you choose a domain name note that your domain is the name that you will use to access your blog on the internet. “http://yourBlogName.wordpress.com”
• Go check your “yourname@limestone.on.ca” email on first class for a confirmation email from WordPress and click the link to activate your blog.

CHOOSE A THEME

1. Go to [Design -> Themes]
2. Scroll down you will see 5 pages of themes you can choose from.
3. Choose one you like and click “Activate Theme” on the top right corner to activate it.

EDIT YOUR “ABOUT” PAGE

There are two sides to your blog. The public view side, and the admin side. The admin side is where you can add/edit your posts etc. The view side is where the
public gets to see what you’re sharing with the world.

1. Sign in to the admin side by going to “http://yourBlogName.wordpress.com/admin”
2. Go to [manage -> page]
3. Click “About” and edit the contents.

ADD YOUR POLAROID
*Skip this step and come back to it if you haven’t created it yet.

1. Click the 1st icon beside the words “Add media” to add an image.
2. Click “Choose files to upload” and choose your polaroid JPEG.
3. Choose “full size” then click “insert to post”.

TYPE YOUR PERSONAL PROFILE

1. In the editor answer the following questions for your Personal Profile in the about section. (use full sentances)

a) Name: Angie “miss ang” Shen
b) Known for: Running around in the sand.
c) Interests: Beach volleyball, Yoga, Ultimate Frisbee…
d) Favourite music, shops, shows…
e) How do you have fun?
f) What are you doing when you feel good about
yourself? How so?
g) Who do you enjoy spending time with? Why?
h) Is freedom important to you? What do you do feels freeing?
i) Picture yourself at your happiest…why so happy?
j) With a million dollars i would…

2. Click Publish.

Congrats! Your own blog!

*To edit your page find your page under ”Manage”
in the main menu and click the title of the page/post you’d like to edit.