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

DREAMWEAVER Familiarizing Yourself with Dreamweaver

DREAMWEAVER.HTML Open Dreamweaver. Create a blank HTML document. Use the split view. Save file as dreamweaver.html in your basic folder Change Untitled Document to your name. Remember all visible code goes between the and tags Create 3 large headings that read: o Background o Hobbies o Career Goals Click refresh to see your changes on the design view side.

DREAMWEAVER.HTML Create paragraphs under each heading and add a few sentences of text. Example: o Background o Insert your text here for background. o Hobbies o Insert your text here for hobbies. o Career Goals o Insert your text here for career goals. 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

DREAMWEAVER.HTML Now save your work. Click refresh to see your updates. Hit F12 on your keyboard to preview the page in Internet Explorer.

TEMPLATE.HTML Downloading, Saving, and Changing the template.html File for Your Web Reporting Project

TEMPLATE.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.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.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.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.HTML Go to template.html and refresh. Hit F12 on your keyboard to view the file in Explorer. It should look correct now. Lets walk through the template from top to bottom. Pay attention the Youre only changing what I request. o Headline o Your name in the byline o Lead (can be several paragraphs long) o First chunk title o First chunk paragraph o Second chunk title o Second chunk paragraph o Images Add chunk titles and paragraphs by copying and pasting the code.

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