Presented by Graduate Design Group 2 Meredith, Jennifer, Cammay and Diane.
-
Upload
georgiana-lane -
Category
Documents
-
view
215 -
download
1
Transcript of 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?
Graduate Design production 3
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?
Graduate Design production 4
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
Graduate Design production 5
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
Graduate Design production 6
Overview DW terms DW navigation DW tools/buttons Show Me Demonstration Knowledge Check Summary
Lesson 1: Introduction to Dreamweaver
Graduate Design production 7
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
Graduate Design production 8
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
Graduate Design production 9
Dreamweaver Navigation Made up of many windows in the same
screen. Can be customized by the user.
Walkin’ the walk
Graduate Design production 10
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
Graduate Design production 11
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
Graduate Design production 12
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.
Every expert needs their tools
Graduate Design production 13
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.
Every expert needs their tools
Graduate Design production 14
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
Every expert needs their tools
Graduate Design production 15
Dreamweaver Tools & Buttons◦ 5 CSS window:
Displays the html code that dictates the structure, format, and content of your website.
Every expert needs their tools
Graduate Design production 16
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.
Every expert needs their tools
Graduate Design production 17
Dreamweaver Tools & Buttons◦ 7 Document window:
Displays the template layout and content as you develop your site.
Every expert needs their tools
Graduate Design production 18
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
Every expert needs their tools
Graduate Design production 19
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.).
Every expert needs their tools
Graduate Design production 20
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.
Every expert needs their tools
Graduate Design production 21
Captivate Demo goes here.◦ Demo Dreamweaver Menus, Navigation, Tools and
Buttons◦ Less than 5 minutes.◦ With audio
Show Me Demonstration
Graduate Design production 22
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
Graduate Design production 23
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
Graduate Design production 24
Preparation Overview File set up Storyboarding Images and Sound Show Me Demonstration Knowledge Check Summary
Lesson 2: Preparation
Graduate Design production 25
By the end of this lesson, you should be able to:
Prepare for creating a website through the strategic gathering of information, files and documents.
Preparation Overview
Graduate Design production 26
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
Graduate Design production 27
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
Graduate Design production 28
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
Graduate Design production 29
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
Show Me Demonstration
Graduate Design production 30
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
Graduate Design production 31
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
Graduate Design production 32
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
Graduate Design production 33
By the end of this lesson, you should be able to:
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
Graduate Design production 34
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
Graduate Design production 35
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
Graduate Design production 36
Layout and Set up
Graduate Design production 37
Draft info in notes Screen shot needed
Adding Content
Graduate Design production 38
Adding sound/graphics
Graduate Design production 39
Linking Pages
Graduate Design production 40
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
Show Me Demonstration
Graduate Design production 41
Question
a. Answerb. Distracterc. Distracterd. Distracte
Question
e. Distracterf. Answerg. Distracterh. Distracter
Knowledge Check
Graduate Design production 42
Lesson 3 Summary
Graduate Design production 43
Overview Publishing options Loading to a server Show Me Demonstration Knowledge Check Summary
Lesson 4: Publishing Your Website
Graduate Design production 44
By the end of this lesson, you should be able to:
Understand the web site publishing options, and process.
Publishing Overview
Graduate Design production 45
Publishing options
Graduate Design production 46
Draft info in notes
Loading to a server
Graduate Design production 47
Captivate demo goes here. Shows:
◦ Location of publishing options◦ Demo publishing a page
Show Me Demonstration
Graduate Design production 48
Question
a. Distracterb. Distracterc. Answerd. Distracter
Question
e. Distracterf. Distracterg. Distracterh. Answer
Knowledge Check
Graduate Design production 49
Lesson 4 Summary
Graduate Design production 50
Overview Making changes after publishing Maintaining the web page Show Me Demonstration Knowledge Check Summary
Lesson 5: Editing Your Website
Graduate Design production 51
By the end of this lesson, you should be able to:
Edit and maintain your website after publication.
Editing Overview
Graduate Design production 52
Making Changes After Publishing
Graduate Design production 53
Captivate Demo goes here. Show:
◦ How to make changes after publishing◦ How to maintain the web page files.
Show Me Demonstration
Graduate Design production 54
Question
a. Distracterb. Answerc. Distracterd. Distracte
Question
e. Distracterf. Distracterg. Distracterh. Answer
Knowledge Check
Graduate Design production 55
Lesson 5 Summary
Graduate Design production 56
Module Review Knowledge Check
Lesson 6: Conclusion
Graduate Design production 57
Module Summary
Graduate Design production 58
Question
a. Distracterb. Distracterc. Answerd. Distracter
Question
e. Distracterf. Answerg. Distracterh. Distracter
Knowledge Check