Dreamweaver 8. Project 5. Templates and Style Sheets
|
|
- Ezra Carter
- 6 years ago
- Views:
Transcription
1 Dreamweaver 8 Project 5 Templates and Style Sheets
2 Starting Dreamweaver and Opening the Colorado Parks Web Site Click the Start button on the Windows taskbar Point to All Programs on the Start menu, point to Macromedia on the All Programs submenu, and then click Macromedia Dreamweaver 8 on the Macromedia submenu If necessary, display the panel groups and expand the Property inspector Click the Files panel box arrow and then point to Colorado Parks on the Files pop-up menu Click Colorado Parks Project 5: Templates and Style Sheets 2
3 Creating a New Template Document Click New on the File menu Click Template page in the Category list and then click HTML template in the Template page list Click the Create button If the Insert bar is not displayed, click Window on the Insert bar and then click Insert If the Common category is not displayed, click the arrow to the right of the displayed category on the Insert bar and then click Common on the Insert bar pop-up menu Project 5: Templates and Style Sheets 3
4 Saving the Web Page as a Template Click File on the menu bar and then click Save Click OK Type spotlight_monuments in the Save as text box Click the Save button Click the plus sign to the left of the Templates folder Project 5: Templates and Style Sheets 4
5 Adding a Background Image and Title to the Template Page Click Modify on the menu bar and then click Page Properties Click the Browse button to the right of the Background image box If necessary, navigate to the images folder. Click bg.jpg and then click the OK button in the Select Image Source dialog box Project 5: Templates and Style Sheets 5
6 Adding a Background Image and Title to the Template Page Click the OK button in the Page Properties dialog box Click the Title text box, delete Untitled Document, and type Spotlight on Colorado National Monuments as the entry Press the ENTER key. If necessary, click the Document window Project 5: Templates and Style Sheets 6
7 Adding the Logo Image to the Template Click the Assets tab in the panel groups. If necessary, click the Images icon. Scroll down and click the logo.gif file Drag the logo.gif image to the top-left corner of the Document window Click the Alt text box and type Colorado National Monuments logo as the entry, and then press the ENTER key Click to the right of the image to deselect it and then press the ENTER key Project 5: Templates and Style Sheets 7
8 Adding the Logo Image to the Template Project 5: Templates and Style Sheets 8
9 Adding the Monument Name and Monument Description Prompts for the First Two Editable Regions Collapse the panel groups Type Spotlight on [name of national monument] as the heading prompt Click the Format box arrow in the Property inspector and apply Heading 2 to the spotlight prompt Press the ENTER key Type Add short description of monument as the prompt for the second editable region. Bold the text and then press the ENTER key Project 5: Templates and Style Sheets 9
10 Adding the Monument Name and Monument Description Prompts for the First Two Editable Regions Project 5: Templates and Style Sheets 10
11 Adding and Centering a Table as the Third Editable Region Click Insert on the menu bar and then click Table Enter the following data in the Insert Table dialog box: 1 for Rows, 2 for Columns, 70 percent for Table width, 0 for Border thickness, 5 for Cell padding, and 0 for Cell spacing. Type Spotlight on Colorado national monuments as the Summary text Click the OK button Click the Align box arrow in the Property inspector, and then click Center to center the table Click the left cell in the table and then drag to select both cells in the table Project 5: Templates and Style Sheets 11
12 Adding and Centering a Table as the Third Editable Region Click the Horz box arrow in the Property inspector and then click Center. Click the Vert box arrow and then click Middle Click the left cell in the table and then type Add additional columns and rows as necessary. Add images and short descriptions of image to each cell in the table as the prompt. Click the right cell. Click Insert on the menu bar, point to Image Objects, and then point to Image Placeholder Click Image Placeholder When the Image Placeholder dialog box is displayed, type add_image in the Name text box as the prompt Project 5: Templates and Style Sheets 12
13 Adding and Centering a Table as the Third Editable Region Press the TAB key. Type 64 for the Width Press the TAB key. If necessary, type 32 for the Height Click the OK button Click <table> in the tag selector and type spotlight in the Table ID box. Press the ENTER key Click to the right of the table and then press the ENTER key two times Project 5: Templates and Style Sheets 13
14 Adding and Centering a Table as the Fourth Editable Region Click Insert on the menu bar and then click Table to display the Insert Table dialog box Enter the following data in the Insert Table dialog box: 1 for Rows, 2 for Columns, 50 percent for Table width, 0 for Border thickness, 5 for Cell padding, and 0 for Cell spacing. Type Web site links as the Summary text. Click the OK button Click the Align box arrow in the Property inspector, and then center the table Project 5: Templates and Style Sheets 14
15 Adding and Centering a Table as the Fourth Editable Region Click the left cell and then drag to select both cells in the table Click the Horz box arrow in the Property inspector and then click Center. Click the Vert box arrow and then click Middle Click the left cell and then type Add additional columns as necessaryfor links as the prompt Select the table and name it links. Press the ENTER key Press CTRL+S to save the file. If a Dreamweaver warning box appears, click the OK button Project 5: Templates and Style Sheets 15
16 Adding and Centering a Table as the Fourth Editable Region Project 5: Templates and Style Sheets 16
17 Creating the First Editable Region If necessary, click Window on the menu bar and then click Insert If the Common category is not displayed, click the arrow to the right of the displayed category on the Insert bar and then click Common on the Insert bar pop-up menu Click the Property inspector expander arrow to hide the Property inspector If necessary, scroll to the top and then click to the left of the heading prompt Project 5: Templates and Style Sheets 17
18 Creating the First Editable Region Click the <h2> tag in the Tag selector Click the Templates pop-up menu arrow and point to Editable Region Click Editable Region Type monument_name in the Name text box Click the OK button Project 5: Templates and Style Sheets 18
19 Creating the Second Editable Region Click to the left of the prompt, Add short description of monument, in the Document window Click the <p> tag in the tag selector. Click the Templates pop-up menu and then click Editable Region Type monument_description in the Name text box and then click the OK button Project 5: Templates and Style Sheets 19
20 Creating the Third and Fourth Editable Regions Click in the left cell of the first table and then click the <table#spotlight> tag in the tag selector Click the Editable Region command on the Templates pop-up menu Type monument_images in the Name text box, and then click the OK button Project 5: Templates and Style Sheets 20
21 Creating the Third and Fourth Editable Regions If necessary, scroll down to display the second table, click in the left cell of the second table, click the <table#links> tag in the tag selector, and then click the Editable Region command on the Templates pop-up menu Type links in the Name text box and then click the OK button Click the Save button Project 5: Templates and Style Sheets 21
22 Creating the Third and Fourth Editable Regions Project 5: Templates and Style Sheets 22
23 Displaying the Design Panel Group Click the expand/ collapse arrow to expand the panel groups Move the mouse pointer over the vertical bar until it turns to a two-headed arrow Drag the vertical bar about 1 2 inch to the left to increase the width of the panel groups Click Window on the menu bar and then click CSS Styles Project 5: Templates and Style Sheets 23
24 Displaying the Design Panel Group Project 5: Templates and Style Sheets 24
25 Adding a Style and Saving the Style Sheet Click the Files panel tab Click to the left of the text, Spotlight on [name of national monument], in the monument_name editable region and then click the <h2> tag in the tag selector Click the New CSS Style button Click the Tag (redefines the look of a specific tag) radio button to select it Click the Tag box and type h2 as the tag name Project 5: Templates and Style Sheets 25
26 Adding a Style and Saving the Style Sheet Verify that (New Style Sheet File) is selected in the Define in: section Click the OK button Click the Save in box arrow and then click the parks folder name. Click the File name text box and then type spotlight as the style sheet name Click the Save button Click the Font box arrow, click Arial, Helvetica, sans-serif in the Font list, and then press the TAB key Project 5: Templates and Style Sheets 26
27 Adding a Style and Saving the Style Sheet Click the Size box arrow, click 24 in the Size list, and then press the TAB key two times Click the Weight box arrow, click bolder, and then press the TAB key Click the Style box arrow and then click italic Click the Color text box, type #420000, and then press the TAB key Click the OK button and then click anywhere in the monument_name editable region to deselect the heading prompt Project 5: Templates and Style Sheets 27
28 Creating a Style for the Paragraph Text Click to the left of the prompt, Add short description of monument, and then click the <p> tag in the tag selector Click the New CSS Rule button in the CSS Styles panel Click the OK button Click the Font box arrow and then click Arial, Helvetica, sans-serif Click the Size box arrow and then click 12 Project 5: Templates and Style Sheets 28
29 Creating a Style for the Paragraph Text Click the Weight box arrow and then click bold Click the Color text box and then type # for the color. Press the TAB key Click the OK button Click to the right of the paragraph to deselect it Project 5: Templates and Style Sheets 29
30 Adding a Background, Border, and Text Color to a Table Click in the first cell of the monument_images table Click the <table#spotlight> tag in the tag selector Click the New CSS Rule button in the CSS Styles panel Click the OK button Click the Font box arrow and then click Arial, Helvetica, sans-serif Project 5: Templates and Style Sheets 30
31 Adding a Background, Border, and Text Color to a Table Click the Color text box, type #FFFFFF, and then press the TAB key Click Background in the Category list Click the Background color text box, type # as the color and then press the TAB key Click Border in the Category list Verify that the Same for all check boxes are selected for Style, Width, and Color Project 5: Templates and Style Sheets 31
32 Adding a Background, Border, and Text Color to a Table Click the Top box arrow and then click groove in the Top pop-up menu Click the Width box arrow and then click thick in the Width pop-up menu Click the top text box in the Color area and then type #CC9900 for the border color. Press the TAB key Click the OK button and then, if necessary, scroll down in the Document window to display both tables Project 5: Templates and Style Sheets 32
33 Modifying the A:Link Attribute Select the links table Click the New CSS Rule button in the CSS Styles panel Click the Advanced (IDs, pseudo-class selectors) radio button If necessary, click the Define in spotlight.css radio button Click the Selector box arrow, and then point to a:link Project 5: Templates and Style Sheets 33
34 Modifying the A:Link Attribute Click a:link Click the OK button Click none to select the none Decoration attribute Click the Color text box, type #FFFFFF, and press the TAB key Click the OK Button Project 5: Templates and Style Sheets 34
35 Modifying the A:Link Attribute Project 5: Templates and Style Sheets 35
36 Adding the A:Visited Attribute Verify that the links table is selected. Click the New CSS Rule button in the CSS Styles panel to display the New CSS Rule dialog box Click the Advanced (IDs, pseudo-class selectors) radio button Verify that the Define in spotlight.css radio button is selected Click the Selector box arrow and then click a:visited Project 5: Templates and Style Sheets 36
37 Adding the A:Visited Attribute Click the OK button to display the CSS Rule Definition dialog box Click the none check box to select the none Decoration attribute Type #CC9900 in the Color text box and then press the TAB key Click the OK button Project 5: Templates and Style Sheets 37
38 Adding the A:Hover Attribute Verify that the links table is selected Click the New CSS Rule button in the CSS Styles panel to display the New CSS Rule dialog box If necessary, click the Advanced (IDs, pseudoclass selectors) radio button Click the Selector box arrow and then click a:hover Click the OK button to display the CSS Rule Definition for a:hover in spotlight.css dialog box Project 5: Templates and Style Sheets 38
39 Adding the A:Hover Attribute Type #FFCC66 in the Color text box and then press the TAB key. Click the none check box to select the None Decoration attribute Click the OK button and then click the Save button on the Standard toolbar If a Dreamweaver warning dialog box appears, click No. At this point, the template is not attached to any documents Close the spotlight_monuments template Click the Save button on the spotlight.css document and then close the style sheet Project 5: Templates and Style Sheets 39
40 Creating the Dinosaur National Monument Spotlight Web Page Click the CSS panel expand/collapse arrow to collapse the panel Click File on the menu bar and then click New Click Basic Page in the New Document dialog box Category and then click the Create button Click the Save button on the Standard toolbar and then save the page in the parks folder. Use dinosaur.htm as the file name If necessary, collapse the Property inspector Project 5: Templates and Style Sheets 40
41 Applying a Template to the Dinosaur National Monument Web page Click the Assets panel tab in the Files group panel If necessary, click the Templates icon in the Assets panel Click spotlight_monuments Click the Apply button Collapse the panel groups Project 5: Templates and Style Sheets 41
42 Applying a Template to the Dinosaur National Monument Web page Project 5: Templates and Style Sheets 42
43 Adding the Monument Name and Monument Description to the Dinosaur National Monument Web Page If necessary, click anywhere on the document. Move the mouse pointer over the page and note that in the non-editable sections, the pointer changes to a circle with a line through the middle. This icon indicates that this is a non-editable area Select the text and brackets, [name of national monument], in the monument_name editable region Project 5: Templates and Style Sheets 43
44 Adding the Monument Name and Monument Description to the Dinosaur National Monument Web Page Type Dinosaur National Monument as the monument name Select the prompt, Add short description of monument, in the monument_description editable region. Type the following text: Dinosaur National Monument spans the Colorado/Utah border in the northwest corner of Colorado. The Quarry Area contains a collection of some 1,600 fossilized dinosaur bones from 11 different dinosaur species. Visitors can view the bone displays by visiting the Douglas Quarry and Visitor Center. Program events and nature tours are available through the Center. Project 5: Templates and Style Sheets 44
45 Adding Rows to the Monument_images Table Click in the left cell of the monument_images table. Click Modify on the menu bar, point to Table, and then point to Insert Rows or Columns Click Insert Rows or Columns Double-click the Number of Rows text box and then type 2 for the number of rows Click the OK button Project 5: Templates and Style Sheets 45
46 Adding Images to the Monument_images Table Select the text in row 1, column 1 of the parks_images table and then press the DELETE key Press the F6 key to switch to Expanded Tables mode If a Getting Started in Expanded Tables Mode dialog box displays, read the information and then click the OK button Display the panel groups If necessary, click the Assets tab Project 5: Templates and Style Sheets 46
47 Adding Images to the Monument_images Table Click the Images icon in the Assets panel Drag the elephant_toes.jpg file to row 1, column 1 of the monument_images table Click to the right of the image Hold down the SHIFT key and then press the ENTER key. You will not see the insertion point until you begin typing Type Elephant Toes Mountain as the description Project 5: Templates and Style Sheets 47
48 Adding Images to the Monument_images Table Press the TAB key to move the insertion point to row 1, column 2 Press the DELETE key to delete the image placeholder and then drag the fall_cottonwoods.jpg file to the cell Click to the right of the image Hold down the SHIFT key and then press the ENTER key Type Fall cottonwoods along the river as the description Project 5: Templates and Style Sheets 48
49 Adding Images to the Monument_images Table Add the four other images and descriptions to the monument_images table as indicated in Table 5-2 on page DW 457. Scroll as necessary Drag each image to the appropriate table cell, click to the right of the image, hold down SHIFT and press the ENTER key, and then type the description Press the TAB key to move from cell to cell Press the F6 key to exit from Expanded Tables mode Project 5: Templates and Style Sheets 49
50 Adding Images to the Monument_images Table Hide the panel groups Display the Property inspector Click each image and add the ALT Text as indicated in Table 5-3 on page DW 457 Project 5: Templates and Style Sheets 50
51 Adding the Links to the Links Table Scroll down to display the links table. Select the text in the left cell of the links table and then press the DELETE key Type Home as the text link in the left cell and then select the text Click the Link text box in the Property inspector, type index.htm as the link text, and then press the TAB key Click the right cell in the links table. Type Dinosaur National Monument as the text for the link and then select the text Project 5: Templates and Style Sheets 51
52 Adding the Links to the Links Table Click the Link text box in the Property inspector and then type Click the Target box arrow and select _blank Click the Save button on the Standard toolbar Project 5: Templates and Style Sheets 52
53 Adding a Link from the Monuments Page to the Dinosaur National Monument Page Expand the panel groups and open the monuments.htm page. If necessary, click the Files tab Scroll to the bottom of the page and then click to the right of the Home link. Press the END key Hold down the SHIFT key and then press the ENTER key Type Featured Monument as the link text Project 5: Templates and Style Sheets 53
54 Adding a Link from the Monuments Page to the Dinosaur National Monument Page Select the text and then drag dinosaur.htm from the Files panel to the Property inspector Link text box Click the Save button on the Standard toolbar Press the F12 key to preview the dinosaur.htm page in your browser. Scroll down and then click the Featured Monument link to view the Dinosaur National Monument Web page, as shown in Figure 5-92 on page DW 461 Verify that the Dinosaur National Monument Web page links work Project 5: Templates and Style Sheets 54
55 Adding a Link from the Monuments Page to the Dinosaur National Monument Page If instructed to do so, print a copy of the Dinosaur National Monument Web page and submit it to your instructor If instructed to do so, upload your Web site to a remote server. Appendix C contains information on uploading to a remote server. A remote folder is required before you can upload to a remote server. Generally, the remote folder is defined by the Web server administrator or your instructor Close the browser Project 5: Templates and Style Sheets 55
56 Adding a Link from the Monuments Page to the Dinosaur National Monument Page Project 5: Templates and Style Sheets 56
57 Closing the Web Site and Quitting Dreamweaver Click the Close button on the upper-right corner of the Dreamweaver title bar Project 5: Templates and Style Sheets 57
How to set up a local root folder and site structure
Activity 2.1 guide How to set up a local root folder and site structure The first thing to do when creating a new website with Adobe Dreamweaver CS3 is to define a site and identify a root folder where
More informationHow to lay out a web page with CSS
Activity 2.6 guide How to lay out a web page with CSS You can use table design features in Adobe Dreamweaver CS4 to create a simple page layout. However, a more powerful technique is to use Cascading Style
More informationTaking Fireworks Template and Applying it to Dreamweaver
Taking Fireworks Template and Applying it to Dreamweaver Part 1: Define a New Site in Dreamweaver The first step to creating a site in Dreamweaver CS4 is to Define a New Site. The object is to recreate
More informationCreating Forms. Starting the Page. another way of applying a template to a page.
Creating Forms Chapter 9 Forms allow information to be obtained from users of a web site. The ability for someone to purchase items over the internet or receive information from internet users has become
More informationDreamweaver Basics. Planning your website Organize site structure Plan site design & navigation Gather your assets
Dreamweaver Basics Planning your website Organize site structure Plan site design & navigation Gather your assets Creating your website Dreamweaver workspace Define a site Create a web page Linking Manually
More informationHow to lay out a web page with CSS
How to lay out a web page with CSS You can use table design features in Adobe Dreamweaver CS3 to create a simple page layout. However, a more powerful technique is to use Cascading Style Sheets (CSS).
More information< building websites with dreamweaver mx >
< building websites with dreamweaver mx > < plano isd instructional technology department > < copyright = 2002 > < building websites with dreamweaver mx > Dreamweaver MX is a powerful Web authoring tool.
More informationClient Interview. Interview Topics. Goals and Target Audience. Activity 3.1 Worksheet. Client Name:
Activity 3.1 Worksheet Client Interview Team Name: Date: Client Name: Interview Topics Goals and target audience Content Design requirements Delivery requirements Goals and Target Audience Identify three
More informationHow to create and edit a CSS rule
Adobe Dreamweaver CS6 Project 3 guide How to create and edit a CSS rule You can create and edit a CSS rule in two locations: the Properties panel and the CSS Styles panel. When you apply CSS styles to
More informationDreamweaver Basics Outline
Dreamweaver Basics Outline The Interface Toolbar Status Bar Property Inspector Insert Toolbar Right Palette Modify Page Properties File Structure Define Site Building Our Webpage Working with Tables Working
More informationCreating your first website Part 4: Formatting your page with CSS
Adobe - Developer Center : Creating your first website Part 4: Formatting your page... Page 1 of 23 Dreamweaver Article Creating your first website Part 4: Formatting your page with CSS Jon Varese Adobe
More informationProject 1: Creating a Web Site from Scratch. Skills and Tools: Use Expression Web tools to create a Web site
E00EW3.qxp 4/14/2007 3:17 PM Page 1 Workshops w Introduction The Workshop is all about being creative and thinking outside of the box. These workshops will help your right-brain soar, while making your
More informationDreamweaver MX Overview. Maintaining a Web Site
Dreamweaver MX Overview Maintaining a Web Site... 1 The Process... 1 Filenames... 1 Starting Dreamweaver... 2 Uploading and Downloading Files... 6 Check In and Check Out Files... 6 Editing Pages in Dreamweaver...
More informationDreamweaver CS3 Concepts and Techniques
Dreamweaver CS3 Concepts and Techniques Chapter 3 Tables and Page Layout Part 1 Other pages will be inserted in the website Hierarchical structure shown in page DW206 Chapter 3: Tables and Page Layout
More informationIntroduction to Dreamweaver CS3
TUTORIAL 2 Introduction to Dreamweaver CS3 In Tutorial 2 you will create a sample site while you practice the following skills with Adobe Dreamweaver CS3: Creating pages based on a built-in CSS page layout
More informationCS Multimedia and Communications. Lab 06: Webpage Tables and Image Links (Website Design part 3 of 3)
CS 1033 Multimedia and Communications Lab 06: Webpage Tables and Image Links (Website Design part 3 of 3) REMEMBER TO BRING YOUR MEMORY STICK TO EVERY LAB! Table Properties Reference Guide The Property
More informationUsing Dreamweaver. 4 Creating a Template. Logo. Page Heading. Home About Us Gallery Ordering Contact Us Links. Page content in this area
4 Creating a Template Now that the main page of our website is complete, we need to create the rest of the pages. Each of them will have a layout that follows the plan that is shown below. Logo Page Heading
More informationNauticom NetEditor: A How-to Guide
Nauticom NetEditor: A How-to Guide Table of Contents 1. Getting Started 2. The Editor Full Screen Preview Search Check Spelling Clipboard: Cut, Copy, and Paste Undo / Redo Foreground Color Background Color
More informationUsing Dreamweaver CS6
6 So far we have used CSS to arrange the elements on our web page. We have also used CSS for some limited formatting. In this section we will take full advantage of using CSS to format our web site. Just
More informationUsing Dreamweaver CC. Logo. 4 Creating a Template. Page Heading. Page content in this area. About Us Gallery Ordering Contact Us Links
Using Dreamweaver CC 4 Creating a Template Now that the main page of our website is complete, we need to create the rest of the pages. Each of them will have a layout that follows the plan shown below.
More informationChapter 1 Introduction to Dreamweaver CS3 1. About Dreamweaver CS3 Interface...4. Creating New Webpages...10
CONTENTS Chapter 1 Introduction to Dreamweaver CS3 1 About Dreamweaver CS3 Interface...4 Title Bar... 4 Menu Bar... 4 Insert Bar... 5 Document Toolbar... 5 Coding Toolbar... 6 Document Window... 7 Properties
More informationTable Basics. The structure of an table
TABLE -FRAMESET Table Basics A table is a grid of rows and columns that intersect to form cells. Two different types of cells exist: Table cell that contains data, is created with the A cell that
More informationDear Candidate, Thank you, Adobe Education
Dear Candidate, In preparation for the Web Communication certification exam, we ve put together a set of practice materials and example exam items for you to review. What you ll find in this packet are:
More informationCreating Buttons and Pop-up Menus
Using Fireworks CHAPTER 12 Creating Buttons and Pop-up Menus 12 In Macromedia Fireworks 8 you can create a variety of JavaScript buttons and CSS or JavaScript pop-up menus, even if you know nothing about
More informationThe figure below shows the Dreamweaver Interface.
Dreamweaver Interface Dreamweaver Interface In this section you will learn about the interface of Dreamweaver. You will also learn about the various panels and properties of Dreamweaver. The Macromedia
More informationUsing Dreamweaver. 6 Styles in Websites. 1. Linked or Imported Stylesheets. 2. Embedded Styles. 3. Inline Styles
Using Dreamweaver 6 So far these exercises have deliberately avoided using HTML s formatting options such as the FONT tag. This is because the basic formatting available in HTML has been made largely redundant
More informationIntroducing Cascading Style Sheets. Cascading Style Sheet Basics Creating Styles Using Styles Manipulating Styles Text Formatting with CSS
Introducing Cascading Style Sheets Cascading Style Sheet Basics Creating Styles Using Styles Manipulating Styles Text Formatting with CSS Cascading Style Sheet Basics CSS has many benefits: The pages look
More informationDazzle the Web with Dynamic Dreamweaver, Part II
Dazzle the Web with Dynamic Dreamweaver, Part II In the second Dreamweaver workshop we will learn the following skills: 1. Adding hyperlinks to our home page 2. Adding images to our home page 3. Creating
More informationSeaMonkey Composer: Creating Web Pages
SeaMonkey Composer: Creating Web Pages v.1101 There are many ways to create and modify Web pages to be published on the Web. You can use any text editor such as Notepad to directly enter or modify the
More informationDreamweaver CS 5.5. University Information Technology Services. Training, Outreach, Learning Technologies, and Video Production
Dreamweaver CS 5.5 Creating Web Pages with a Template University Information Technology Services Training, Outreach, Learning Technologies, and Video Production Copyright 2012 KSU Department of Information
More informationExcel Select a template category in the Office.com Templates section. 5. Click the Download button.
Microsoft QUICK Excel 2010 Source Getting Started The Excel Window u v w z Creating a New Blank Workbook 2. Select New in the left pane. 3. Select the Blank workbook template in the Available Templates
More informationKillTest *KIJGT 3WCNKV[ $GVVGT 5GTXKEG Q&A NZZV ]]] QORRZKYZ IUS =K ULLKX LXKK [VJGZK YKX\OIK LUX UTK _KGX
KillTest Q&A Exam : 9A0-803 Title : Certified Dreamweaver 8 Developer Exam Version : DEMO 1 / 7 1. What area, in the Insert bar, is intended for customizing and organizing frequently used objects? A. Layout
More informationADOBE DREAMWEAVER CS4 BASICS
ADOBE DREAMWEAVER CS4 BASICS Dreamweaver CS4 2 This tutorial focuses on the basic steps involved in creating an attractive, functional website. In using this tutorial you will learn to design a site layout,
More informationChanging Worksheet Views
PROCEDURES LESSON 1: TOURING EXCEL Starting Excel 1 Click the Start button 2 Click All Programs 3 Click the Microsoft Office folder icon 4 Click Microsoft Excel 2010 Naming and Saving (Ctrl+S) a Workbook
More informationTable of Contents Chapter 9. Working with Cascading Style Sheets ... 1
Table of Contents Chapter 9.... 1 Introduction... 1 Introducing Cascading Style Sheets... 2 Create CSS Styles... 2 Attribute Styles... 2 Style Types... 3 Creating a Web Page with a CSS Layout... 4 Create
More informationFrontPage 2000 Tutorial -- Advanced
FrontPage 2000 Tutorial -- Advanced Shared Borders Shared Borders are parts of the web page that share content with the other pages in the web. They are located at the top, bottom, left side, or right
More informationElectronic Portfolios in the Classroom
Electronic Portfolios in the Classroom What are portfolios? Electronic Portfolios are a creative means of organizing, summarizing, and sharing artifacts, information, and ideas about teaching and/or learning,
More informationUSING STYLESHEETS TO DESIGN A WEB SITE IN DREAMWEAVER MX 2004
USING STYLESHEETS TO DESIGN A WEB SITE IN DREAMWEAVER MX 2004 Introduction This document assumes that you are familiar with the use of a computer keyboard and mouse, have a working knowledge of Microsoft
More informationPBwiki Basics Website:
Website: http://etc.usf.edu/te/ A wiki is a website that allows visitors to edit or add their own content to the pages on the site. The word wiki is Hawaiian for fast and this refers to how easy it is
More informationMore Skills 11 Format and Position Report Controls
= CHAPTER 5 Access More Skills 11 Format and Position Report Controls Controls can be aligned using buttons on the Ribbon. Using the Ribbon s alignment tools can be quicker and more accurate than positioning
More informationUnit 8. Lesson 8.1. Microsoft FrontPage. Introduction. Microsoft FrontPage-1. Microsoft FrontPage
Microsoft FrontPage Unit 8 Microsoft FrontPage Introduction Lesson 8.1 Microsoft FrontPage-1 A number of Software Packages are available in market for creating a website. Among popular software s are Dreamweaver,
More informationENGINEERING DATA HUB VISUAL DESIGN SPECIFICATIONS VERSION 3. Created: 2/10/2017
ENGINEERING DATA HUB VISUAL DESIGN SPECIFICATIONS VERSION 3 Created: 2/10/2017 Table of Contents ENGINEERING DATA HUB... 1 DESKTOP VIEW... 3 HEADER... 4 Logo... 5 Main Title... 6 User Menu... 7 Global
More informationUsing Dreamweaver CC. 6 Styles in Websites. Exercise 1 Linked Styles vs Embedded Styles
Using Dreamweaver CC 6 So far we have used CSS to arrange the elements on our web page. We have also used CSS for some limited formatting. In this section we will take full advantage of using CSS to format
More informationHow to lay out a web page with CSS
How to lay out a web page with CSS A CSS page layout uses the Cascading Style Sheets format, rather than traditional HTML tables or frames, to organize the content on a web page. The basic building block
More informationPage Layout Using Tables
This section describes various options for page layout using tables. Page Layout Using Tables Introduction HTML was originally designed to layout basic office documents such as memos and business reports,
More informationOverview of the Adobe Dreamweaver CS5 workspace
Adobe Dreamweaver CS5 Activity 2.1 guide Overview of the Adobe Dreamweaver CS5 workspace You can access Adobe Dreamweaver CS5 tools, commands, and features by using menus or by selecting options from one
More informationOU EDUCATE TRAINING MANUAL
OU EDUCATE TRAINING MANUAL OmniUpdate Web Content Management System El Camino College Staff Development 310-660-3868 Course Topics: Section 1: OU Educate Overview and Login Section 2: The OmniUpdate Interface
More informationLearning Adobe DreamWeaver CC. Module 1 Contents. Chapter 1: Introduction to DreamWeaver CC
Module 1 Contents Chapter 1: Introduction to DreamWeaver CC Design Considerations...1-1 Types of Graphics...1-2 Backgrounds and Text...1-2 Planning the Navigation...1-2 The DreamWeaver Screen...1-3 Workspaces...
More informationWord Select New in the left pane. 3. Select Blank document in the Available Templates pane. 4. Click the Create button.
Microsoft QUICK Word 2010 Source Getting Started The Word Window u v w x z Opening a Document 2. Select Open in the left pane. 3. In the Open dialog box, locate and select the file you want to open. 4.
More informationMicrosoft FrontPage. An Introduction to. Lecture No.1. Date: April Instructor: Mr. Mustafa Babagil. Prepared By: Nima Hashemian
An Introduction to Microsoft FrontPage Lecture No.1 Date: April 20. 2007 Instructor: Mr. Mustafa Babagil Prepared By: Nima Hashemian 2006 An Introduction to FrontPage Mathematics Department Eastern Mediterranean
More informationDreamweaver MX The Basics
Chapter 1 Dreamweaver MX 2004 - The Basics COPYRIGHTED MATERIAL Welcome to Dreamweaver MX 2004! Dreamweaver is a powerful Web page creation program created by Macromedia. It s included in the Macromedia
More informationA Dreamweaver Tutorial. Contents Page
A Dreamweaver Tutorial Contents Page Page 1-2 Things to do and know before we start Page 3-4 - Setting up the website Page 5 How to save your web pages Page 6 - Opening an existing web page Page 7 - Creating
More informationWeb design and content management from Microsoft FrontPage allows you to create, design, modify, and update your own website without learning any
Web design and content management from Microsoft FrontPage allows you to create, design, modify, and update your own website without learning any complex languages or codes. www.microsoft.com/frontpage
More informationCOMSC-031 Web Site Development- Part 2. Part-Time Instructor: Joenil Mistal
COMSC-031 Web Site Development- Part 2 Part-Time Instructor: Joenil Mistal Chapter 9 9 Creating Pages with Frames You can divide the display area of a Web browser into multiple panes by creating frames.
More informationAdditional catalogs display. Customize text size and colors.
Collapsible Skin The collapsible skin option displays the catalogs and categories in a collapsible format enabling enhanced navigation on Qnet. Categories can be expanded to view all of the sub categories
More informationJSN PageBuilder 3 Configuration Manual Introduction
JSN PageBuilder 3 Configuration Manual Introduction About JSN PageBuilder 3 JSN PageBuilder 3 is the latest innovation of Joomla! PageBuilder with great improvements in the interface, features, and user
More informationUsing Dreamweaver CS6
Using Dreamweaver CS6 4 Creating a Template Now that the main page of our website is complete, we need to create the rest of the pages. Each of them will have a layout that follows the plan shown below.
More informationTo illustrate how to set TAG styles the <body> and <h1> tags (for the BODY and the HEADING 1 styles) will be adjusted.
Chapter The formatting of CSS pages is carried out by setting the required styles. There are four different types of styles: Class which are custom styles that you create. You did this in Chapter 12. Tag
More informationWord 2007 Tables Objectives
Word 2007 Tables In this lesson you will learn how to create, modify and format tables. You will also learn to use the AutoFormat table option and to sort table rows. Objectives Create a table Modify a
More informationDreamweaver CS3. Chapter 1. Creating a Dreamweaver Web Page and Local Site. Part 1
Dreamweaver CS3 Chapter 1 Creating a Dreamweaver Web Page and Local Site Part 1 Starting Dreamweaver Click the Start button on the Windows taskbar, point to Adobe Dreamweaver CS3 on the Start menu or point
More informationChanging Worksheet Views
PROCEDURES LESSON 1: TOURING EXCEL Starting Excel From the Windows Start screen, click the Excel 2013 program tile 1 Right-click a blank area of the Windows Start screen 2 Click the All Apps button 3 Click
More information! " # $%& Html.htm Note: Files under html.htm are created in the previous lab exercises. (Just link it up)
! " # $%& # &'()*+ At the end of this lab exercise, students should be able to: Invoke the main components in Macromedia Dreamweaver MX 2004 Edit and format text using Macromedia Dreamweaver MX 2004 Create
More information1 Ctrl + X Cut the selected item. 2 Ctrl + C (or Ctrl + Insert) Copy the selected item. 3 Ctrl + V (or Shift + Insert) Paste the selected item
Tips and Tricks Recorder Actions Library XPath Syntax Hotkeys Windows Hotkeys General Keyboard Shortcuts Windows Explorer Shortcuts Command Prompt Shortcuts Dialog Box Keyboard Shortcuts Excel Hotkeys
More informationIn so many ways summary
In so many ways summary Many of Word s functions can be activated in a variety of different ways. Often you can use the menu, a tool on the toolbar or a shortcut key to achieve the same result. Rather
More informationEng 110, Spring Week 03 Lab02- Dreamwaver Session
Eng 110, Spring 2008 Week 03 Lab02- Dreamwaver Session Assignment Recreate the 3-page website you did last week by using Dreamweaver. You should use tables to control your layout. You should modify fonts,
More informationBuilding TPS Web Pages with Dreamweaver
Building TPS Web Pages with Dreamweaver Title Pages 1. Folder Management 7 2. Defining Your Site 8-11 3. Overview of Design Features 12-22 4. Working with Templates 23-25 5. Publishing Your Site to the
More informationStatus Bar: Right click on the Status Bar to add or remove features.
Excel 2013 Quick Start Guide The Excel Window File Tab: Click to access actions like Print, Save As, etc. Also to set Excel options. Ribbon: Logically organizes actions onto Tabs, Groups, and Buttons to
More informationAdobe Dreamweaver CS5 Tutorial
Adobe Dreamweaver CS5 Tutorial GETTING STARTED This tutorial focuses on the basic steps involved in creating an attractive, functional website. In using this tutorial you will learn to design a site layout,
More informationHTML, XHTML, and CSS 8/21/2011. Chapter Objectives. Chapter 4. Chapter Objectives. Chapter Objectives
HTML, XHTML, and CSS Sixth Edition Chapter 4 Creating Tables in a Web Site Using an External Style Sheet Chapter Objectives Define table elements Describe the steps used to plan, design, and code a table
More informationGoLive will first ask you if your new site will be for one individual or a work group; select for a Single User, and click Next.
Getting Started From the Start menu, located the Adobe folder which should contain the Adobe GoLive 6.0 folder. Inside this folder, click Adobe GoLive 6.0. GoLive will open to its initial project selection
More informationCreating a Website: Advanced Dreamweaver
Creating a Website: Advanced Dreamweaver Optimizing the Workspace for Accessible Page Design 1. Choose Edit > Preferences [Windows] or Dreamweaver > Preferences [Macintosh]. The Preferences dialog box
More informationDreamweaver Website 1: Managing a Website with Dreamweaver
Page 1 of 20 Web Design: Dreamweaver Websites Managing Websites with Dreamweaver Course Description: In this course, you will learn how to create and manage a website using Dreamweaver Templates and Library
More informationFirmSite Control. Tutorial
FirmSite Control Tutorial 1 Last Updated June 26, 2007 by Melinda France Contents A. Logging on to the Administrative Control Center... 3 Using the Editor Overview:... 3 Inserting an Image... 7 Inserting
More informationITSE 1401 Web Design Tools Lab Project 4 (Expression Web 4 - Units M, N, O, P) Last revised: 1/9/14
(Expression Web 4 - Units M, N, O, P) Last revised: 1/9/14 Directions: Perform the tasks below on your personal computer or a lab computer. Professor Smith shows the score points for each activity in parentheses.
More informationCreating a Website in Schoolwires
Creating a Website in Schoolwires Overview and Terminology... 2 Logging into Schoolwires... 2 Changing a password... 2 Navigating to an assigned section... 2 Accessing Site Manager... 2 Section Workspace
More informationUsing Styles In Microsoft Word 2002
INFORMATION SYSTEMS SERVICES Using Styles In Microsoft Word 2002 This document contains a series of exercises in the use of styles in the Microsoft Word 2002 word processing software. AUTHOR: Information
More informationUsing Adobe Contribute 4 A guide for new website authors
Using Adobe Contribute 4 A guide for new website authors Adobe Contribute allows you to easily update websites without any knowledge of HTML. This handout will provide an introduction to Adobe Contribute
More informationCAL 9-2: Café Soylent Green Chapter 12
CAL 9-2: Café Soylent Green Chapter 12 This version is for those students who are using Dreamweaver CC. You will be completing the Forms Tutorial from your textbook, Chapter 12 however, you will be skipping
More informationAdobe Dreamweaver CS5/6: Learning the Tools
Adobe Dreamweaver CS5/6: Learning the Tools Dreamweaver is an HTML (Hypertext Markup Language) editor, authoring tool, and Web site management tool. Dreamweaver is a WYSIWYG (what you see is what you get)
More informationCorrecting Grammar as You Type. 1. Right-click the text marked with the blue, wavy underline. 2. Click the desired option on the shortcut menu.
PROCEDURES LESSON 11: CHECKING SPELLING AND GRAMMAR Selecting Spelling and Grammar Options 2 Click Options 3 In the Word Options dialog box, click Proofing 4 Check options as necessary under the When correcting
More informationINFORMATION TECHNOLOGY
INFORMATION TECHNOLOGY PowerPoint Presentation Section Two: Formatting, Editing & Printing Section Two: Formatting, Editing & Printing By the end of this section you will be able to: Insert, Edit and Delete
More informationADJUST TABLE CELLS-ADJUST COLUMN AND ROW WIDTHS
ADJUST TABLE CELLS-ADJUST COLUMN AND ROW WIDTHS There are different options that may be used to adjust columns and rows in a table. These will be described in this document. ADJUST COLUMN WIDTHS Select
More informationSign in and join ADC Newsletters Feedback. Creating your first website Part 3: Adding content to pages
1 of 18 2/14/2008 2:34 PM Adobe Dreamweaver Article Adobe Developer Connection Sign in and join ADC Newsletters Feedback RSS Creating your first website Part 3: Adding content to pages Jon Varese Adobe
More informationFigure 1 Properties panel, HTML mode
How to add text Adding text to a document To add text to a Dreamweaver document, you can type text directly in the Document window, or you can cut and paste text. You modify text by using the Properties
More informationI. Planning Your Website
Dreamweaver Dimensions Presented by Jimmy D. Clark, Instructional Design Specialist, Instructional Development Services Teaching and Technology Trends Symposium October 21, 2005 Welcome to Dreamweaver
More informationDAY 4. Coding External Style Sheets
DAY 4 Coding External Style Sheets LESSON LEARNING TARGETS I can code and apply an embedded style sheet to a Web page. I can code and apply an external style sheet to multiple Web pages. I can code and
More informationCreating a Website in Schoolwires Technology Integration Center
Creating a Website in Schoolwires Technology Integration Center Overview and Terminology... 2 Logging into Schoolwires... 2 Changing a password... 2 Accessing Site Manager... 2 Section Workspace Overview...
More informationbutton Double-click any tab on the Ribbon to minimize it. To expand, click the Expand the Ribbon button
PROCEDURES LESSON 1: CREATING WD DOCUMENTS WITH HEADERS AND FOOTERS Starting Word 1 Click the Start button 2 Click All Programs 3 Click the Microsoft Office folder icon 4 Click Microsoft Word 2010 1 Click
More informationGetting Started with Eric Meyer's CSS Sculptor 1.0
Getting Started with Eric Meyer's CSS Sculptor 1.0 Eric Meyer s CSS Sculptor is a flexible, powerful tool for generating highly customized Web standards based CSS layouts. With CSS Sculptor, you can quickly
More informationSign in and join ADC Newsletters Feedback. Creating your first website Part 2: Creating the page layout
1 of 14 2/14/2008 2:31 PM Adobe Dreamweaver Article Adobe Developer Connection Sign in and join ADC Newsletters Feedback RSS Creating your first website Part 2: Creating the page layout Jon Varese Adobe
More informationActivity 4.1: Creating a new Cascading Style Sheet
UNIVERSITY OF BAHRAIN COLLEGE OF APPLIED STUDIES LAB 4 Understanding & Creating Cascading Style Sheets (CSS) Description: Cascading style sheets (CSS) are collections of formatting rules that control the
More informationInserting Information into PowerPoint
LESSON 6 6.1 Inserting Information into PowerPoint After completing this lesson, you will be able to: Change the layout of a slide. Insert a clip art image. Scale an image. Insert and format a table. Insert
More informationCOMSC-031 Web Site Development- Part 2
COMSC-031 Web Site Development- Part 2 Part-Time Instructor: Joenil Mistal December 5, 2013 Chapter 13 13 Designing a Web Site with CSS In addition to creating styles for text, you can use CSS to create
More informationThe Dreamweaver Interface
The Dreamweaver Interface Let s take a moment to discuss the different areas of the Dreamweaver screen. The Document Window The Document Window shows you the current document. This is where you are going
More informationDreamweaver MX Technical Support Services. Office of Information Technology, West Virginia University. OIT Help Desk ext.
Dreamweaver MX 2004 Technical Support Services Office of Information Technology, West Virginia University OIT Help Desk - 293.4444 ext.1 http://oit.wvu.edu/support/training/classmat/ Instructors: Rick
More informationThe Domino Designer QuickStart Tutorial
The Domino Designer QuickStart Tutorial 1. Welcome The Domino Designer QuickStart Tutorial You've installed Domino Designer, you've taken the Designer Guided Tour, and maybe you've even read some of the
More informationCreating Web Pages with SeaMonkey Composer
1 of 26 6/13/2011 11:26 PM Creating Web Pages with SeaMonkey Composer SeaMonkey Composer lets you create your own web pages and publish them on the web. You don't have to know HTML to use Composer; it
More informationCSS Selectors. element selectors. .class selectors. #id selectors
CSS Selectors Patterns used to select elements to style. CSS selectors refer either to a class, an id, an HTML element, or some combination thereof, followed by a list of styling declarations. Selectors
More informationAdobe Dreamweaver CC 17 Tutorial
Adobe Dreamweaver CC 17 Tutorial GETTING STARTED This tutorial focuses on the basic steps involved in creating an attractive, functional website. In using this tutorial you will learn to design a site
More informationSection 6: Dreamweaver
Section 6: Dreamweaver 1 Building TPS Web Pages with Dreamweaver Title Pages 1. Dreamweaver Storyboard Pages 3 2. Folder Management 4 3. Defining Your Site 5-8 4. Overview of Design Features 9-19 5. Working
More information