Dreamweaver Dr. Kristen Landreville Wed. 09/29/10 – Fri. 10/08/10.

DreamweaverDreamweaverDr. Kristen Landreville

Wed. 09/29/10 – Fri. 10/08/10

DREAMWEAVERDREAMWEAVERFamiliarizing Yourself with Dreamweaver

DREAMWEAVER.HTMDREAMWEAVER.HTMLL

• Open Dreamweaver. Create a blank HTML document.• Use the “split” view.• Save file as “dreamweaver.html” in your “basic folder”• Change <title>Untitled Document</title> to your

name.• Remember all visible code goes between the <body>

and </body> tags• Create 3 large headings that read:

o <h1>Background</h1>o <h1>Hobbies</h1>o <h1>Career Goals</h1>

• Click “refresh” to see your changes on the “design view” side.


• Create paragraphs under each heading and add a few sentences of text. Example:o <h1>Background</h1>o <p>Insert your text here for background.</p>o <h1>Hobbies</h1>o <p>Insert your text here for hobbies.</p>o <h1>Career Goals</h1>o <p>Insert your text here for career goals.</p>

• Insert an image now. Use “trial.jpg” in your “images” folder. o Add an “alt” tag, which is the caption when you hover over the image.o Change the width and height.o <img src=“images/trial.jpg” “alt=“Hydrangeas are my favorite flower.”

width=“200px” height=“150px”/>


• Now save your work.• Click “refresh” to see your updates.• Hit “F12” on your keyboard to preview the page

in Internet Explorer.

TEMPLATE.HTMLTEMPLATE.HTMLDownloading, Saving, and Changing the “template.html”

File for Your Web Reporting Project

TEMPLATE.HTMLTEMPLATE.HTML• Create a new folder in your “cojo3530” folder. • Label the new folder “web”.• Now go to “Course Materials” on the class blog.• Click the “template.html - Web Reporting Project

Template”• Right-click, select “view source.” • Now go to File Save Page As and save it as

“template.html” in the newly created “web” folder.

• Open Dreamweaver.• Open your “template.html” page.

STYLE_REPORT.CSSSTYLE_REPORT.CSS• Go to “Course Materials” on the class blog.• Click the “style_report.css - Cascading

Style Sheet Needed for Template.HTML”• A css webpage will open.• Highlight all of the text by hitting “Control”

and then “a” on your keyboard.• Copy all of this text by hitting “Control”

and then “c” on your keyboard.

STYLE_REPORT.CSSSTYLE_REPORT.CSS• Now create a css file so you can paste this text.• In Dreamweaver, go to File New Blank Page

CSS Create• Paste your text here by hitting “Control” and then

“v” on your keyboard.• Save this css file as “style_report.css” in your

“web” folder.o Go to File Save As style_report.css

IMAGES.ZIPIMAGES.ZIP• Go to “Course Materials” on the class blog.• Click the “Compressed Images Folder Needed for

Template.HTML” link. • A dialog box appears. Choose to “Save File”.• Save the file to your “web” folder. • Now, open your “web” folder.• Right-click the “images.zip” folder. • Select the “Extract All” option.• A dialog box appears. Ensure that the folder will be

extracting to your “web” folder. • Select “Extract.” A new folder called “images” is created.• You can now delete the “images.zip” folder

TEMPLATE.HTMLTEMPLATE.HTML• Go to “template.html” and “refresh”. Hit “F12” on your keyboard to

view the file in Explorer. It should look correct now.• Let’s walk through the template from top to bottom.• Pay attention the <! -- Comment tags. These are my notes to you. --

>• You’re only changing what I request.

o Headlineo Your name in the bylineo Lead (can be several paragraphs long)o First chunk titleo First chunk paragrapho Second chunk titleo Second chunk paragrapho Images

• Add chunk titles and paragraphs by copying and pasting the code.

UPCOMING CLASSESUPCOMING CLASSES• Writing time to work on story• Computer time to work on Dreamweaver• Ask me for help!

Dreamweaver Dr. Kristen Landreville Wed. 09/29/10 – Fri. 10/08/10.

Documents

Transcript of Dreamweaver Dr. Kristen Landreville Wed. 09/29/10 – Fri. 10/08/10.