Creating a webpage

Prepping your materials

At this point, you have written and refined the 3 steps of your tutorial AND found or created the images to illustrate your edifying words.

A place for everything
Create a new folder inside your folder (inside the Techno .09 folder) on your computer's hard drive. Name the folder with your last name and the first two letters of your first name-- all lowercase, no spaces, no punctuation. Example: Albert Einstein = einsteinal

This is your web folder. It will hold the .html document and your .jpg/.gif files for your webpage.

This first page will contain at least two of these three elements, depending on how you gathered your images.

Prepare your acquired images in Photoshop.

Place all finished images for your web page in your web folder. They must be present in this folder before you insert/link them in Dreamweaver.

Copy and paste your steps or type them directly into the Dreamweaver .html document.

Spell check!

You must also give proper credit to the original artists and create a link to the original work on the web if you appropriate someone else's artwork or photographs for your web page

Gather the URLs/webpage address along with web-found images

For the purposes of this project, I ask that you follow these design guidelines to create similar looking pages for inclusion in the Techno.09 website. Your own creativity will be unleashed in future pages and projects.

Open Dreamweaver. A new Untitled document window will open.

Choose Modify -> Page Properties, title the page (the title of your Tutorial)

Save in your web folder as [lastnamexx.html] Yes, this is the same naming convention as your folder.

Type your name at the top of the page, hit Return to type your intriguing title on the next line, and select the text.

On the Properties palette, choose Heading 3 from the Format pop-up list.
Choose Arial, Helvetica, sans-serif from the Font pop-up list.

Hit Return again to type (or copy and paste) your introductory and summary words on the next line following your Title. Select this text and choose Paragraph from the Format pop-up list and Arial, Helvetica, sans-serif from the Font pop-up list.

On the Objects palette, click the Insert Table icon.
Create a table with 3 rows, 3 columns, Width=100%, Border = 0 Cell padding=5, Cell spacing=5

Place your cursor in the second column of the table. On the Objects palette, click the Insert Image icon and choose your .jpeg/.gif image from your web folder. repeat for each step and its corresponding image.

From your text/tutorial document, select your text and copy (Edit -> Copy)
Place your cursor in the third column of your web page document, and Paste (Edit -> Paste)

Be sure the text is consistant with your summary statement. (Paragraph and Arial)

Return to the first column, place your cursor there and number your steps accordingly.

Creating a link to give credit where credit is due

If you are unable to contact and get permission for use from the artist by email, you must still give proper credit to the original artist and create a link to their original work on the web if you appropriate their artwork or photographs for your webpage.

In Dreamweaver, select the image or your credit line text on your webpage.

On the Properties palette in the Link field, type (or copy and paste) the address of the webpage where you acquired someone else's images for your web page. The address should begin with [http://www. ] in order to become a clickable link on the webpage.

If the imagery is your own creation; photographs, drawings, etc. give yourself a credit line at the bottom of the page.