Before We Begin Please download the files from as we will be using them in our walkthroughs

Dreamweaver 1: Getting Started

Services for Faculty, Staff, and GTAs Services for Students Instructional Design & Project Consulting Instructional Equipment Checkout Tech Training Workshops: Open-enrollment and Custom Tech Training Workshops Multimedia Equipment (Digital Aquarium)

Dreamweaver 1: Getting Started

Objectives In this course, you will learn how to: Create your site’s folder structure Navigate the Workspace Create a webpage Add text, images, embedded videos, and links to your pages Structure text & page layout

Lesson 1 Setting up A New Site

File Organization

1.Open Dreamweaver. 2.In the Create New menu, click Site Setup. 3.Enter Workshop in Site Name field. 4.Click folder icon for Local Site Folder field. 5.Click New folder icon in bottom of screen. 6.Type Websites and press Create. 7.Click New folder icon in bottom of screen. 8.Type Workshop and press Create (this will be your root folder for your site – think of it as your home folder). 9.Click New folder icon in bottom of screen. 10.Type Images and press Enter. 11.Navigate back up to Workshop folder and click Choose. 12.In Site Setup window, click Advanced Settings. 13.On Local Info tab, choose Images folder just created for Default Images folder: field and click Choose. 14.Navigate through other tabs, but let them know these are for more advanced features. 15.Click Save. 16.At this point move exercise files to this newly created Images folder. Dreamweaver 1: Getting Started

Walkthrough: Site Definition When finished Files Panel should look like this:

Lesson 2 Navigating the Workspace

Walkthrough Navigation

Tool Bar

Code/Design View

Document Window

Properties Inspector Properties

Insert Panel

CSS Styles Panel

Files Panel

Lesson 3 Creating a Webpage

HTML & CSS Webpages are built up of many different elements, the most common of which are: HTML – Hyper Text Markup Language CSS – Cascading Style Sheets

Getting started in HTML In this course, we will follow the principle that: Content is first (HTML) Presentation is second (CSS) As such, we will focus this workshop on HTML elements of site development, and handle CSS in Dreamweaver 2: Adding Style to Pages

Process 1.Select File > New... from the menu bar 2.Click the Blank Page tab, set the Page Type to HTML, Layout to, and DocType to HTML5. Click Create. 3.Choose Split view to display code and design views. 4.Enter Workshop in the Title field. 5.Open lorem_ipsum.rtf from your saved exercise files. 6.Copy the text from this file. 7.Paste your copied text in the Design View of the Document Window. 8.In Insert Panel, select Common from dropdown menu, then click Images: Image to add each image from the Images folder. Note: Enter Alt Text and a link to description files to accommodate screen readers. These files should also be in your Images folder 9.Save your page, naming the file index.html in the Save window

Walkthrough Page Creation

Lesson 4 Structuring Text

Structuring Text - Recap Broken into two sets of instructions: HTML – defines the type of text (header, paragraph, etc) CSS – defines the style of each type of text

Common Structure Tags TagTag NameDefinition Paragraphparagraph,,, etc Heading 1, 2, 3, etcheadings Unordered Listbulleted list Ordered Listnumbered list List Item items within an ordered or unordered list Anchorhyperlinks

Walkthrough Structuring Text

Lesson 4 Structuring Layout

Divs Provide a means, through HTML, to structurally differentiate layout elements Act as containers Are styled through CSS

Emerging Div Standards The most common names used for Div IDs are: header content nav sidebar footer

Process 1.Select text & images previously entered as main content for webpage (do not include the unordered list starting the text, or the hyperlink footer at the end of the text). 2.Click Insert Div Tag from Insert Panel. 3.Type content in ID field. 4.Click OK.

Walkthrough Structuring Layout

Remember!! Save your file for Dreamweaver 2

Review You should now be able to: Create your site’s folder structure Navigate the Workspace Create a webpage Add text, images, embedded videos, and links to your pages Structure text & page layout

Images Courtesy: Walkthrough images and descriptions: _the_central_cancer_research_labs.jpg at_the_central_cancer_research_labs.jpg y_at_the_central_cancer_research_labs.jpg Icons & interface: Adobe, Inc. & Apple, Inc. The E chang e

What’s next? Dreamweaver 2 – Adding Style to Pages Lynda.com - Dreamweaver CS6 Essential Training technology.gsu.edu/training The E chang e

Your feedback is important to us: The E chang e