580 likes | 745 Views
How to build a web site in Dreamweaver. Presented by Graduate Design Group 2 Meredith, Jennifer, Cammay and Diane. What is Dreamweaver?. Dreamweaver is a software application: “ideal for web designers, web developers, and visual designers.” Authors websites and other applications.
E N D
How to build a web site in Dreamweaver Presented by Graduate Design Group 2 Meredith, Jennifer, Cammay and Diane
What is Dreamweaver? 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. Graduate Design production
Why do you need to know 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. Graduate Design production
Outline • 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 Graduate Design production
Objectives 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. Graduate Design production
Lesson 1: Introduction to Dreamweaver • Overview • DW terms • DW navigation • DW tools/buttons • Show Me Demonstration • Knowledge Check • Summary Graduate Design production
Dreamweaver Overview By the end of this lesson, you should be able to: • Use the correct terms, tools and buttons when you navigate through Dreamweaver. Graduate Design production
Talkin’ the talk • 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. Graduate Design production
Walkin’ the walk Dreamweaver Navigation • Made up of many windows in the same screen. • Can be customized by the user. Graduate Design production
1 3 2 4 5 6 • Application bar • Layout and formatting tabs • Workspace switcher • Document toolbar • CSS window • Files panel • Document window • Status bar • Properties inspector 7 8 9 Graduate Design production
Every expert needs their tools • Dreamweaver Tools & Buttons • 1 Application bar: Found at the top of the screen. It contains menus and other application controlsfor which you may already know from similar programs. Graduate Design production
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. Graduate Design production
Every expert needs their tools • Dreamweaver Tools & Buttons • 3 Workspace Switcher: Allows you to change the layout of your work environment. Example: Classic view shows the Document window. Designer view shows the CSS window. Graduate Design production
Every expert needs their tools • 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 Graduate Design production
Every expert needs their tools • Dreamweaver Tools & Buttons • 5 CSS window: Displays the html code that dictates the structure, format, and content of your website. Graduate Design production
Every expert needs their tools • Dreamweaver Tools & Buttons • 6 Files panel: View and manage the files (assets) in Your Dreamweaver site. Tip: You can customize the Files panel by changing the view in order to switch between your local or remote site more easily. Graduate Design production
Every expert needs their tools • Dreamweaver Tools & Buttons • 7 Document window: Displays the template layout and content as you develop your site. Graduate Design production
Every expert needs their tools • 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 Graduate Design production
Every expert needs their tools • 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.). Graduate Design production
Every expert needs their tools • 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 Codeview. Graduate Design production
Show Me Demonstration • Captivate Demo goes here. • Demo Dreamweaver Menus, Navigation, Tools and Buttons • Less than 5 minutes. • With audio Graduate Design production
Knowledge Check Where do you look for your assets in Dreamweaver? • Application bar • Files panel • Document window • Properties menu How do you change your view in Dreamweaver? • Workspace switcher • Status bar • Properties inspector • Layout and formatting tabs Graduate Design production
Lesson 1 Summary In this lesson, you learned: • Terms related to web development and Dreamweaver • Tools and buttons meant to help you navigate and use Dreamweaver. Graduate Design production
Lesson 2: Preparation • Preparation Overview • File set up • Storyboarding • Images and Sound • Show Me Demonstration • Knowledge Check • Summary Graduate Design production
Preparation Overview 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. Graduate Design production
File set up • 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. Graduate Design production
Storyboarding • 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. Graduate Design production
Images and sound • 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. Graduate Design production
Show Me Demonstration • 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 Graduate Design production
Knowledge Check What is a storyboard? • A folder of images • A folder of sounds • A folder of text documents • A graphic organizer What three folders should you create prior to starting Dreamweaver? • Text, images, and assets • Images, assets, and local root • Text, images, and sound • Sound, text, and assets Graduate Design production
Lesson 2 Summary 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. Graduate Design production
Lesson 3: Creating Your Own Website • Overview • Create pages • Layout and setup pages • Templates • Adding content • Adding sound/graphics • Linking pages • Show Me Demonstration • Knowledge Check • Summary Graduate Design production
Overview of Website Creation 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. Graduate Design production
Create Pages To identify your Local Root folder: • Assumption: You have opened Dreamweaverand see the Welcome screen. • Click: Dreamweaver Site… • Select: the Advanced tab. • Enter: your site name. • Select: the browse folder next to the Local root folder field. Navigate to the desired folder on your computer, and Select. • Review: the additional tabs and fields. Enter information where appropriate. • 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. Graduate Design production
Create Pages, continued To create your first page (with blank template): • Assumption: You are at the Welcome screen. • Click: More…under the Create New column. Result: A new document window appears. • Select: the Blank Page tab, and HTML template under Page Type. • Choose: a template type from the list, and click Create. • Select: File>Save As. Result: Your Local root folder will be shown by default. • 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. • 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. • Select: File>Save. Graduate Design production
Layout and Set up Graduate Design production
Adding Content • Draft info in notes • Screen shot needed Graduate Design production
Adding sound/graphics Graduate Design production
Linking Pages Graduate Design production
Show Me Demonstration • 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 Graduate Design production
Knowledge Check Question • Answer • Distracter • Distracter • Distracte Question • Distracter • Answer • Distracter • Distracter Graduate Design production
Lesson 3 Summary Graduate Design production
Lesson 4: Publishing Your Website • Overview • Publishing options • Loading to a server • Show Me Demonstration • Knowledge Check • Summary Graduate Design production
Publishing Overview By the end of this lesson, you should be able to: • Understand the web site publishing options, and process. Graduate Design production
Publishing options Graduate Design production
Loading to a server • Draft info in notes Graduate Design production
Show Me Demonstration • Captivate demo goes here. • Shows: • Location of publishing options • Demo publishing a page Graduate Design production
Knowledge Check Question • Distracter • Distracter • Answer • Distracter Question • Distracter • Distracter • Distracter • Answer Graduate Design production
Lesson 4 Summary Graduate Design production
Lesson 5: Editing Your Website • Overview • Making changes after publishing • Maintaining the web page • Show Me Demonstration • Knowledge Check • Summary Graduate Design production