presented by graduate design group 2 meredith, jennifer, cammay and diane

How to build a web site in Dreamweaver

Presented by Graduate DesignGroup 2

Meredith, Jennifer, Cammay and Diane

Graduate Design production 2

Dreamweaver is a software application: “ideal for web designers, web developers,

and visual designers.” Authors websites and other applications. Creates web pages:

◦ From a template◦ With code◦ From scratch

Works with Photoshop and Fireworks.

What is Dreamweaver?


As an Instructional Designer, you may be asked to create training intended for the internet.

Benefits of Dreamweaver : Simplifies the web page building process. Supports the latest web technologies. Works on both Mac OS and Windows

platforms. Offers a variety of publishing options. Allows for easy web page maintenance.

Why do you need to know Dreamweaver?


Lesson 1: Dreamweaver Overview Lesson 2: Preparation Lesson 3: Creating Your Own Website Lesson 4: Publishing Your Website Lesson 5: Editing Your Website Lesson 6: Conclusion

Outline


By the end of this training module, you should be able to:

Use the correct terms, tools and buttons when you navigate through Dreamweaver.

Prepare for creating a website through the strategic gathering of information, files and documents.

Create a webpage by customizing the layout, and adding sound, graphics, and content.

Link multiple web pages together for a layered web site. Understand the web site publishing options, and

process. Edit and maintain your website after publication.

Objectives


Overview DW terms DW navigation DW tools/buttons Show Me Demonstration Knowledge Check Summary

Lesson 1: Introduction to Dreamweaver


By the end of this lesson, you should be able to:

Use the correct terms, tools and buttons when you navigate through Dreamweaver.

Dreamweaver Overview


Dreamweaver Terms◦ Adobe Creative Suite 4 Web Premium: Creates the full range of digital

experiences, including interactive websites, applications, user interfaces, presentations, and mobile device content through related Adobe products.

◦ JavaScript: A programming language used in websites for the internet.

◦ CSS: Cascading Style Sheets, style sheet language that describes the look and feel of an html website.

◦ HTML code: HyperText Markup Language, the language used to create and support the structure of a website.

◦ Database: a collection of files, stored to serve many needs.

◦ Assets: Elements, such as images and graphics, that help you build your website.

Talkin’ the talk


Dreamweaver Navigation Made up of many windows in the same

screen. Can be customized by the user.

Walkin’ the walk


1 Application bar2 Layout and formatting tabs3 Workspace switcher4 Document toolbar 5 CSS window6 Files panel7 Document window8 Status bar9 Properties inspector

1

24

5

6

3

7

9

8


Dreamweaver Tools & Buttons◦ 1 Application bar:

Found at the top of the screen. It contains menus and other application controls for which you may already know from similar programs.

Every expert needs their tools


Dreamweaver Tools & Buttons◦ 2 Layout and formatting tabs:

Shortcuts which contain many of the common operations that are needed when creating a website.

All of these operations can also be found in the Application bar.

Ex. Hyperlink = Insert>Hyperlink

Tip:These tabs only appear when working in the Classic view.



Dreamweaver Tools & Buttons◦ 3 Workspace Switcher:

Allows you to change the layout ofyour work environment.

Example:Classic view shows the Documentwindow.

Designer view shows the CSSwindow.



Dreamweaver Tools & Buttons◦ 4 Document toolbar:

Contains buttons that let you switch between different views of your document quickly. The toolbar also contains:◦ Common commands◦ Document viewing options◦ Options for transferring between the local and

remote sites



Dreamweaver Tools & Buttons◦ 5 CSS window:

Displays the html code that dictates the structure, format, and content of your website.



Dreamweaver Tools & Buttons◦ 6 Files panel:

View and manage the files (assets) inYour Dreamweaver site.

Tip:You can customize the Files panel by changing the view in order to switchbetween your local or remote site moreeasily.



Dreamweaver Tools & Buttons◦ 7 Document window:

Displays the template layout and content as you develop your site.



Dreamweaver Tools & Buttons◦ 8 Status bar

Located at the bottom of the Document window, displays additional information about the website you are creating.

Includes:◦ Tag selector◦ Select tool◦ Hand tool◦ Zoom tool and Set Magnification pop-up menu◦ Window size pop-up menu(Not available in Code view.)◦ Document size and download time◦ Encoding indicator



Dreamweaver Tools & Buttons◦ 9 Properties control

Allows you examine and edit the most common properties for the currently selected page element, such as text or an inserted object.

The contents of the Property inspector varies depending on the element selected.

Example: If you select an image on your page, the Property inspector changes to show properties for the image (the file path to the image, the width and height of the image, the border around the image, etc.).



Dreamweaver Tools & Buttons◦ Coding toolbar:

Contains buttons that allow you perform standard coding operations.

Example: collapsing and expanding code selections

Tip:The Coding toolbar appears vertically on the left side of the Document window, and is only visible in Code view.



Captivate Demo goes here.◦ Demo Dreamweaver Menus, Navigation, Tools and

Buttons◦ Less than 5 minutes.◦ With audio

Show Me Demonstration


Where do you look for your assets in Dreamweaver?

a. Application barb. Files panelc. Document windowd. Properties menu

How do you change your view in Dreamweaver?

e. Workspace switcherf. Status barg. Properties inspectorh. Layout and formatting tabs

Knowledge Check


In this lesson, you learned: Terms related to web development and

Dreamweaver Tools and buttons meant to help you

navigate and use Dreamweaver.

Lesson 1 Summary


Preparation Overview File set up Storyboarding Images and Sound Show Me Demonstration Knowledge Check Summary

Lesson 2: Preparation



Prepare for creating a website through the strategic gathering of information, files and documents.

Preparation Overview


Start by creating or identifying folders for the Local Root Folder.

A typical set up would include a folder with the following folders inside:◦ Text◦ Images◦ Sound

These folders are an important part of organizing the assets of your website.

File set up


What do you want your website to look like? 1st step: sketch out a comprehensive picture

of what the website will look like. Repeat for linked or additional websites. This will evolve into graphic organizer that

displays the websites in sequence for the purpose of pre-visualizing your project.

Storyboarding


It’s a good idea to collect and organize your image and sound files prior to beginning with Dreamweaver.

Check the file type and size so they can be utilized without problems later.

File them in the Local Root Folder you created in the beginning.

Images and sound


Captivate demo goes here. Shows:

◦ Where and how to access file storage/server info◦ How to set up and save images and graphics◦ How to set up and save audio files



What is a storyboard?

a. A folder of imagesb. A folder of soundsc. A folder of text documentsd. A graphic organizer

What three folders should you create prior to starting Dreamweaver?

e. Text, images, and assetsf. Images, assets, and local rootg. Text, images, and soundh. Sound, text, and assets

Knowledge Check


In this lesson, you have learned: How to set up your files for use in

Dreamweaver The importance of storyboarding your

website prior to creation. Where to save your image and audio files

for use in Dreamweaver.

Lesson 2 Summary


Overview Create pages Layout and setup pages Templates Adding content Adding sound/graphics Linking pages Show Me Demonstration Knowledge Check Summary

Lesson 3: Creating Your Own Website



Create a webpage by customizing the layout, and adding sound, graphics, and content.

Link multiple web pages together for a layered web site.

Overview of Website Creation


To identify your Local Root folder: Assumption: You have opened Dreamweaver and see the Welcome screen.

1. Click: Dreamweaver Site…

2. Select: the Advanced tab.

3. Enter: your site name.

4. Select: the browse folder next to the Local root folder field. Navigate to the desired folder on your computer, and Select.

5. Review: the additional tabs and fields. Enter information where appropriate.

6. Click: OK when you’re finished.Result: The Local root folder (and related folders) for all the files related to this Dreamweaver site have been identified. They appear in the Files panel.

Create Pages


To create your first page (with blank template): Assumption: You are at the Welcome screen.

1. Click: More…under the Create New column.

Result: A new document window appears.

2. Select: the Blank Page tab, and HTML template under Page Type.

3. Choose: a template type from the list, and click Create.

4. Select: File>Save As.

Result: Your Local root folder will be shown by default.

3. Enter: the File Name (index.html), and Save.

Result: The file name appears in the title bar at the top of the application window, as well as in the tab of your new document.

4. Type: the title of your page in the Document Title text box in the Document toolbar. Note: This is the title of your page (different from the file name) and will be seen by your site visitors when they view your page in a web browser.

5. Select: File>Save.

Create Pages, continued


Layout and Set up


Draft info in notes Screen shot needed

Adding Content


Adding sound/graphics


Linking Pages


Captivate Demo goes here. Shows:

◦ How to create a web page from a template◦ How to choose a layout and set up a page◦ How to create a template◦ How to add content, sound and graphics◦ How to link pages



Question

a. Answerb. Distracterc. Distracterd. Distracte

Question

e. Distracterf. Answerg. Distracterh. Distracter

Knowledge Check


Lesson 3 Summary


Overview Publishing options Loading to a server Show Me Demonstration Knowledge Check Summary

Lesson 4: Publishing Your Website



Understand the web site publishing options, and process.

Publishing Overview


Publishing options


Draft info in notes

Loading to a server


Captivate demo goes here. Shows:

◦ Location of publishing options◦ Demo publishing a page



Question

a. Distracterb. Distracterc. Answerd. Distracter

Question

e. Distracterf. Distracterg. Distracterh. Answer

Knowledge Check


Lesson 4 Summary


Overview Making changes after publishing Maintaining the web page Show Me Demonstration Knowledge Check Summary

Lesson 5: Editing Your Website



Edit and maintain your website after publication.

Editing Overview


Making Changes After Publishing


Captivate Demo goes here. Show:

◦ How to make changes after publishing◦ How to maintain the web page files.



Question

a. Distracterb. Answerc. Distracterd. Distracte

Question

e. Distracterf. Distracterg. Distracterh. Answer

Knowledge Check


Lesson 5 Summary


Module Review Knowledge Check

Lesson 6: Conclusion


Module Summary


Question

a. Distracterb. Distracterc. Answerd. Distracter

Question

e. Distracterf. Answerg. Distracterh. Distracter

Knowledge Check

presented by graduate design group 2 meredith, jennifer, cammay and diane

Documents