Adobe Dreamweaver CS3 · Adobe Dreamweaver CS3 Tutorial – Lesson 1 Getting Started with...

ICT II

Adobe Dreamweaver CS3

Northwest Rankin Middle School

ICT II ‐ Dreamweaver Tutorial

Table of Contents Lesson 1: .......................................................................................................................... 3 Getting Started with Dreamweaver

The Adobe Dreamweaver CS3 Program .............................................................................................................................. 3

Using Dreamweaver Tools .................................................................................................................................................. 3

Explore the Dreamweaver Workspace ............................................................................................................................... 3

Working With Dreamweaver Views .................................................................................................................................... 4

Lesson 2: Viewing a Web Page .................................................................................................................................................. 5

Viewing Basic Web Page Elements ..................................................................................................................................... 5

Getting Help ........................................................................................................................................................................ 5

A Sample Web Page and Elements in Dreamweaver .......................................................................................................... 6

Lesson 3: Planning and Defining a Web Site ............................................................................................................................. 7

Understanding the Total Process ........................................................................................................................................ 7

Planning a Web Site ............................................................................................................................................................ 7

Setting Up the Basic Structure ............................................................................................................................................ 7

Creating the Web Pages and Collecting the Page Content ................................................................................................. 8

Testing the Pages ................................................................................................................................................................ 8

Modifying the Pages ........................................................................................................................................................... 8

Publishing the Site ............................................................................................................................................................... 8

Lesson 3 Activity 3‐1...Creating the Preplanning Document ................................................................................................... 9

Lesson 3 Activity 3‐2 ... Creating a Storyboard ...................................................................................................................... 10

Lesson 3 Activity 3‐3...Creating a New Site ........................................................................................................................... 10

Lesson 3 Activity 3‐4...Creating a Personal Logo in Photoshop ............................................................................................. 11

Lesson 3 Activity 3‐5...Creating a Website Banner in PowerPoint ........................................................................................ 12

Lesson 3 Activity 3‐6...Creating a “Photo Text” Image in Photoshop .................................................................................... 12

Lesson 4: Setting up the Pages of a Website .......................................................................................................................... 13

Setting the Home Page ..................................................................................................................................................... 13

Adding Pages to a Web Site .............................................................................................................................................. 13

Creating an Effective Navigation Structure ....................................................................................................................... 13

Changing the Appearance of a Worksheet, Part II ................................................................... Error! Bookmark not defined.

Changing the Appearance of a Cell ...................................................................................... Error! Bookmark not defined.

Changing Number Formats .................................................................................................. Error! Bookmark not defined.

Excel Activity 2.1 – Number Formats ....................................................................................... Error! Bookmark not defined.

Excel Activity 2.1 (Continued) – Change the Appearance of a Worksheet ............................... Error! Bookmark not defined.

Lesson 2 Step‐by‐step – Part B ............................................................................................. Error! Bookmark not defined.

Adobe Dreamweaver CS3 Tutorial – Lesson 1

Getting Started with Dreamweaver

The Adobe Dreamweaver CS3 Program

Adobe Dreamweaver CS3 is a Web development tool that lets you create dynamic (ever‐changing), interactive Web pages containing text, images, hyperlinks, animation, sounds, video, and other elements.

You can use Dreamweaver to create individual Web pages or complex Web sites consisting of many Web pages. A Web site is a group of related Web pages that are linked together and share a common interface and design.

You can save Dreamweaver files in many different file formats, but we will be saving our documents as .htm files.

You can still use HTML in Dreamweaver. Remember, HTML stands for HyperText Markup Language. You use a browser to view your Web pages on the Internet. A browser is a program, such as Internet Explorer, that lets you display HTML‐ (and Dreamweaver‐) developed Web pages on a computer.

Using Dreamweaver Tools Creating an excellent Web site is a complex task. Fortunately, Dreamweaver has an impressive number of tools that can help. It contains organizational tools that help you work with a team of people to create a Web site. You can also use Dreamweaver's management tools to help you manage a Web site after it is created.

For instance, you can use the files panel to create folders to organize and store the various files for your Web site, add pages to your Web site, and set the home page (the first page that viewers see when they visit the Web site). You can also use a site map, a graphical representation of how the pages within a Web site relate to each other, to view and edit the navigation structure of your Web site. The navigation structure is the way viewers navigate from page to page in your Web site. The site map for the Web site you will be creating is shown in the image to the right.

Explore the Dreamweaver Workspace The Dreamweaver workspace is the window setup of the tools you will need to design, create and edit Web pages.

The document window is the large white area in the Dreamweaver program window where you create and edit Web pages. The menu bar, located above the Document window, includes menu names, each of which contains Dreamweaver commands.

The Insert bar includes seven groups of buttons displayed as tabs: Common, Layout, Forms, Data, Spry, Text and Favorites. Clicking a tab on the Insert bar displays buttons and menus associated with that group.

For example, if you click the Layout tab, you will find buttons for using div tags, useful for creating blocks of content on pages, the Table button, used for inserting a table, and the Frames button, used for selecting one of the thirteen different frame layouts.

The Document toolbar contains buttons and drop‐down menus you can use to change the current work mode, preview Web pages, debug Web pages, choose visual aids, and view file‐management options.

ICT II ‐ Excel Tutorial

The Standard toolbar contains buttons you can use to execute frequently used commands also available on the File and Edit menus.

The Property Inspector, located at the bottom of the Dreamweaver window, lets you view and change the properties of a selected object. It changes according to the object that is selected in the Document window.

The status bar is located below the Document window. The left side of the status bar displays the tag selector, which shows the HTML tags used at the insertion point location. The right side displays the window size and estimated download time for the current page, as well as the select tool, used for page editing, the hand tool, used for panning, and the zoom tool, used for magnifying.

A panel is a window that displays information on a particular topic or contains related commands. Panel groups are sets of related panels that are grouped together. To view the contents of a particular panel in a panel group, click the panel tab. If a panel happens to close, it can be opened using the Window menu command.

Working With Dreamweaver Views A view is a particular way of displaying page content. Dreamweaver has three working views. Design view shows the page as it would appear in a browser and is primarily used for designing and creating a Web page. Code view shows the underlying HTML code for the page ‐ use this view to read or edit the underlying code. Code and Design view is a combination of Code view and Design view. This is the best view for debugging or correcting errors because you can immediately see how code modifications change the appearance of the page. The view buttons are located on the Document toolbar.



Viewing a Web Page

Viewing Basic Web Page Elements After starting Dreamweaver, you can create a new Web site, create a new Web page, or open an existing Web site or Web page. The first page that appears when viewers go to a Web site is called the home page. The home page sets the look and feel of the Web site and directs viewers to the rest of the pages in the Web site.

There are many elements that make up Web pages. They can be very simple and designed primarily with text, or they can be media‐rich with text, images, sound, and movies, creating an enhanced interactive Web experience.

Most information on a Web page is presented in the form of text. You can type text directly onto a Web page in Dreamweaver or import text created in other programs, such as Microsoft Word. You can then use the Property inspector to format text so that it is attractive and easy to read. Text should be short and to the point to prevent viewers from losing interest and leaving your site.

Hyperlinks, also known as simply links, are image or text elements on a Web page that users click to display another location on the page, another Web page on the same Web site, or a Web page on a different Web site.

Navigation bars are bars that contain multiple links that are usually organized in rows or columns. Sometimes navigation bars are used with an image map. An image map is an image that has been divided into sections, each of which contains a link.

Flash button objects are Flash objects that can be created in Dreamweaver and can serve as links to other files or Web pages. You can insert them onto a Web page without requiring the Adobe Flash program to be installed. They add visual interest to a Web page.

Images, which are graphics or pictures, add visual interest to a Web page. The saying that "less is more" is certainly true with images, though. Too many images cause the page to load slowly and discourage viewers from waiting for the page to download. Many pages have banners, which are images displayed across the top of the screen that can incorporate a company's logo, contact information, and links to the other pages in the site.

Getting Help Dreamweaver has an excellent Help feature that is both comprehensive and easy to use. When questions or problems arise, you can use the commands on the Help menu to find the answers you need.

Clicking the Using Dreamweaver command opens the Adobe help Viewer that contains two links you can use to search for answers in different ways.

The Contents link lists Dreamweaver help topics by category. The Index link lets you view topics in alphabetical order. The Search text box at the top of the window lets you enter a keyword to search for a specific topic.


A Sample Web Page and Elements in Dreamweaver

Lesson 2 Step‐by‐Step

To see the above image at work in Dreamweaver:

1. Start Dreamweaver. (Start > All Programs > Adobe Master Collection > Adobe Dreamweaver CS3) Right‐click and select Pin to Start Menu)

2. File ‐> Open.

3. Navigate to Templates ‐> ICT II 09_10 ‐> Unit 8 Web Design ‐> Dreamweaver Data Files ‐> Chapter 1; select the file dw1_1.html.

4. Then click Open (or just double‐click on the filename)

5. Locate each of the Web page elements shown in the image above.

6. Click the Show Code view button (right below the Insert bar). This will show you the HTML coding for the page.

7. Click the Split view button (shows both the Code and Design view) to see how the sections compare.

8. Click to Design view button to return to the design view of the Web page.

9. File ‐> Close and close the page WITHOUT SAVING IT.



Planning and Defining a Web Site

Understanding the Total Process Creating a Web site is a complex process. It can often involve a large team of people working in various roles to insure that the Web site contains accurate information, looks good, and works smoothly.

The image shown at the right illustrates the phases in a Web site development project.

Planning a Web Site Planning is probably the most important part of any successful project. Planning is an essential part of creating a Web site, and is a continuous process that overlaps the later phases.

To start planning your Web site, you need to create a checklist of questions and answers about the site.

For example: What are your goals for the site? Who is the audience you want to target? Teenagers? Children? Sports enthusiasts? Senior citizens? How can you design the site to appeal to the target audience?

The more questions you can answer about the site, the more prepared you will be when you begin the development phase.

Because of the public demand for "instant" information, your plan should include not just how to get the site up and running, but how to keep it current.

Setting Up the Basic Structure Once you complete the planning phase, you need to set up the structure of the site by creating a storyboard. A storyboard is a small sketch that represents every page in a Web site. Like a flowchart, a storyboard shows the relationship of each page in the Web site to all the other pages.

Storyboards are very helpful when planning a Web site, because they allow you to visualize how each page in the site is linked to the others. You can sketch a storyboard using a simple piece of paper and a pencil, or using a graphic program on a computer.

The image at the right shows the storyboard for the Striped Umbrella Web site that you opened in Dreamweaver earlier.

Notice that the home page appears at the top of the storyboard, and that it has four pages linked to it. The home page is called the parent page, because it is at a higher level than the other pages, and has pages linked to it. The pages linked below it are called child pages. The Activities page, which is a child page to the home page, is also a parent page to the Cruises and Fishing pages.


In addition to creating a storyboard for your site, you should also create a folder plan for all of the files that will be used for the Web site, using a descriptive name, such as the name of the company. This folder, known as the root folder or local root folder, will store all the Web pages for the site. Then create a subfolder called assets in which you store all of the files that are not Web pages, such as images or sound files.

You should avoid using spaces, special characters, or uppercase characters in your folder names to ensure that all your files can be read and linked successfully on all Web servers.

After you create your root folder, you need to define your Web site. When you define a Web site, the root folder and any folders and files it contains appear in the Files panel, the panel you use to manage your Web site's files and folders. Using the Files panel to manage your files ensures that the site links work correctly when the Web site is published. You also use the Files panel to add or delete pages.

Creating the Web Pages and Collecting the Page Content This is the fun part! After you create your storyboard, you need to gather the files that will be used to create the pages, including text, images, buttons, video and animation. Some of these files will come from other software programs, and some will be created in Dreamweaver. For example, you can create text in a word processing program and insert it into Dreamweaver, or you can create and format text in Dreamweaver.

Images, tables, colors and horizontal rules all contribute to making a page attractive and interesting. In choosing your elements, however, you should always carefully consider the file size of each page. A page with too many graphical elements might take a long time to load, which will cause visitors to leave your Web site.

Before you actually add content to each page, it is a good idea to use the Files panel to add all the pages to the site according to the structure you specified in your storyboard. Once all the blank pages are in place, you can add the content you have collected. This allows you to create and test the navigation links you will need for the site. The blank pages will act as placeholders.

Testing the Pages Once all your pages are completed, you need to test the site to make sure all the links work and that everything looks good. It is important to test your Web pages using different browser software. The two most common browsers are Mozilla Firefox and Internet Explorer.

You should test your Web site using a variety of screen sizes. Some viewers may have small monitors, while others have large, high‐resolution monitors.

You should also consider download time. Although more and more people are using cable modems or DSL, some are still using slower dial‐up modems. Testing is a continuous process, for which you should allocate plenty of time.

Modifying the Pages After you create a Web site, you will probably find that you need to keep making changes to it, especially when information on the site needs to be updated. Each time you make a change, such as adding a new button or image to a page, you should test the site again.

Publishing the Site Publishing a Web site means you transfer all the files for the site to a Web server, a computer that is connected to the Internet with an Internet Protocol (IP) address, so that it is available for viewing on the Internet. An IP address is an assigned series of numbers, separated by periods, that designates an address on the Internet.


For example, the IP address of the Adobe Web site is 192.150.20.61, while its domain name is www.adobe.com. A domain name is a Web address that is expressed in letters instead of numbers, and usually reflects the name of the business or organization because it is much easier to remember.

A Web site must be published or users of the Internet cannot view it.

Use the Files panel to transfer your files using the FTP (File Transfer Protocol) capability. FTP is the process of uploading and downloading files to and from a remote site.

Lesson 3 Activity 3‐1...Creating the Preplanning Document

You have read about how important planning is to Web site development. You are going to prepare a document in Microsoft Word that will allow you to do some of that planning, including answering some of the important questions.

Preplanning Information:

For this Dreamweaver Project, you will be creating a Web site about yourself and the ICT II program here at Northwest Rankin Middle School. You will first create an index page that has links to two other pages: About Me and ICT II.

About Me will have information about yourself that you want the world to know. It will contain the links to two other pages: A favorite extra‐curricular activity, and your Career/College plans.

ICT II will have a description of the class. It will contain links to five other pages: Photoshop, Flash, SimCity 3000, Microsoft Excel and ModelSmart Bridge Building.

Therefore, for this project you will be creating ten Web pages.

The activities you need to complete for this project are listed in the following table:

Dreamweaver Project Timeline

LESSON PROJECT DUE DATE

Lesson 3 Activities 3‐1 through 3‐6 TBA – see Daily Agenda

Lesson 4 Activity 4‐1 “

Lesson 5 Activities 5‐1 and 5‐2 “

Lesson 6 Activities 6‐1 through 6‐5 “

Lesson 7 Copying the Home Page “

Lesson 8 Completed Project No late projects will be accepted.

“

Activity 3‐1 Step‐by‐Step 1. If you have not already done so, create a Dreamweaver folder in your directory as directed by your

instructor.

2. Open Microsoft Word, create a new document, and Save As to save it in your Dreamweaver folder as website_preplanning_xx.

3. Add your usual footer and Save again.

4. Set up the document: Arial font, 1" margins (top, bottom, left and right).

5. Center, bold, font size 16, and underline the title, Dreamweaver Website Preplanning.

6. Return to left aligned, size 12 font. Save.


http://www.adobe.com/

7. Copy the following questions into the document and, using the Preplanning Information above, answer the questions that will help you in developing the Web site.

a. Who is the target (intended) audience?

b. How can I create the pages to appeal to that audience? (appropriate reading level, formal or casual language, colors, content, etc.)

c. What are the goals for the site? (Sell a product, provide information, persuade, etc.)

d. How will I gather the needed information?

e. What is my timeline? (When are the separate parts due, entire project?)

8. Save the document one more time. You will be adding content to it as you complete the next few activities.

Lesson 3 Activity 3‐2 ... Creating a Storyboard

In this activity, you will be designing a storyboard to show how your Web pages will be linked together.

In Lesson 1 of this tutorial, there is a site map of the Web site you will create. You can look at the image to see how your pages will link together. You may also refer to the Pre‐Planning Information listed in Activity 3.1 for a listing of the pages you will create and how they are linked together. You will be using drawing tools to create a storyboard in your Word document.

Activity 3‐2 Step‐by‐Step 1. Using the Striped Umbrella storyboard image in this lesson as an example, and the site map/ Pre‐

Planning Information discussed above, create a storyboard for your web site in the Microsoft Word document saved earlier (website preplanning_xx).

2. Add this storyboard drawing after the questions you answered earlier. Try to make the drawing small enough so it fits on the same page as the questions.

3. You will use the Flowchart Shape tools (Insert ‐> Shapes) to create the shapes representing each page and the lines showing how the pages will be linked together.

4. Add the Web page names to each object shape (right‐click on the shape; select Add Text) to identify the pages.

5. Save the document when you have finished the storyboard. You will be adding one more element to it before you Submit the final document.

Lesson 3 Activity 3‐3...Creating a New Site

First you must create a new folder for all of your Web site files, and then you will create the site.

Activity 3‐3 Step‐by‐Step 1. INSIDE the Dreamweaver folder in your H: drive / student directory (get there through My

Computer), create a new folder. Name it dreamweaver_project, and INSIDE this one, create another new folder called assets.

2. When you have created them, go back and make sure the asset folder is INSIDE the dreamweaver_project folder, not outside. Then proceed with the following instructions.

3. Start Dreamweaver and create a new document (File ‐> New ‐> Blank Page), and

4. Continue by choosing the page properties: Page Type: HTML; Layout: <none>

5. Create the New Site (In the Menu bar: Site ‐> New Site), and then click the Advanced tab.


6. Create the Site name as site_yourusername (Ex: site_brownj1234)

7. Local root folder: click on the tiny folder to the right; Browse to the new dreamweaver_project folder you just created. Be sure to NOT open the "assets" folder (just select the dreamweaver_project folder).

8. Default images folder: click on the tiny folder to the right; Browse to open your assets folder, then Select.

9. Click OK to complete the Site setup.

Your Dreamweaver screen should now look like the image below. Notice the Files panel to the right now shows the site and the asset folder.

If it does not, close out the site without saving it, and try again.

10. If the site is created successfully, take a screen shot (<Alt> + Print Screen) like the one above, and paste it into your Microsoft Word document from earlier. Paste it under the storyboard from the last activity. You may have to paste it to a second, or third, page to have the image large enough for the words to show clearly.

11. Save your changes, go to the Dreamweaver Assignments area in Blackboard, find the Lesson 3 Pre‐Planning assignment, attach your Word document, and Submit.

Lesson 3 Activity 3‐4...Creating a Personal Logo in Photoshop

You need a logo to enhance your Web pages.

You should have already created a personal logo in the Lesson 4 OYO project of the Photoshop unit. If after considering the visual look of your web site in your pre‐planning document (such as color scheme, surrounding content, etc.), you are unhappy with your existing personal logo, you may quickly recreate another more suited to the look of your site.

Save the new logo file (or re‐save your old logo file) as mylogo_username.gif in the assets folder of your dreamweaver_project folder.

Be sure to the image file INSIDE your assets folder so it will be available for your web pages. Make sure you save the file in the .gif format, not the original .psd file!


Lesson 3 Activity 3‐5...Creating a Website Banner in PowerPoint

Remember that a Website banner is an image that is displayed across the top of the screen on a Web site. A banner is typically displayed on all pages in a Website, providing a consistent look to the site and identifying each page as belonging to that site. A banner can incorporate a company's logo, contact information, and links to the other pages in the site.

You will create a banner for your Website using Microsoft PowerPoint. Learning to make a banner in PowerPoint as an alternative to a graphic design program like Adobe Photoshop is useful, since PowerPoint is more widely available to the average user.

Your banner should be appropriate for the overall purpose, audience, and “look” of your site, should be neat and attractive, and should identify each page as being a part of your Website.

Activity 3‐5 Step‐by‐Step 1. Open Microsoft PowerPoint.

2. Click the Design tab and choose Page Setup.

3. Click the "Slides sized for:" list arrow and then select the Banner option. It will create a banner that is 8" long and 1" tall.

4. On the Design tab, choose any theme, colors, or layouts you desire.

5. Add any graphic image and/or clip art images you desire for the banner. Remember, this logo is a reflection of YOU, so choose wisely. Be sure to save regularly as you work!!

6. Add any text you wish by clicking the Insert tab and clicking the Text Box button. Choose an appropriate font, size, and color. Alternately, you may incorporate text in the form of WordArt.

7. When you are finished with the design of your banner, save your work one last time.

To this point, you have been saving your work as a PowerPoint file. Be sure to save all work on your banner, including any final changes, in this format. If you later decide to go back and change anything in the image, you will have this original, editable file to work with. In order for your banner to be viewed on your Website, however, it must also be saved as an image file.

8. Click the Office Button and choose Save As ‐> Other Options ‐> and select JPEG File Interchange Format.

9. Save the file as: mybanner_username.jpg (don’t type the .jpg – it should apply this file extension when you choose the JPEG file format) in the assets folder of your dreamweaver_project folder in your student directory.

10. Click the Current Slide Only button when the dialog box appears. 11. Once you are sure you have SAVED your work click the Office Button, and Close.

Lesson 3 Activity 3‐6...Creating a “Photo Text” Image in Photoshop

You will include a “photo text” image of your name on the About Me page of your site. You should have already created one in the Lesson 5 project of the Photoshop unit. If you your existing photo text image is unsatisfactory, (time permitting) you may quickly recreate another more suited to the look of your site.

Save the new photo text image file (or re‐save your old file) as photoname_username.gif in the assets folder of your dreamweaver_project folder.

Be sure to the image file INSIDE your assets folder so it will be available for your web pages. Make sure you save the file in the .gif format, not the original .psd file!



Setting up the Pages of a Website

Setting the Home Page The home page is the very first page that viewers see when they visit your Web site. Most Web sites contain many other pages that all connect back to the home page.

Dreamweaver uses the home page that you have designated as a starting point for creating a site map, a graphical representation of the Web pages in a Web site. When you set the home page, you tell Dreamweaver which page you wish to designate as your home page. The home page filename usually has the name index.html (or index.htm)

Adding Pages to a Web Site Web sites may be as simple as one page or might contain hundreds of pages. When you create a Web site, you can add all the pages and specify where they should be placed in the Web site folder structure in the root folder. (Your root folder is your dreamweaver_project folder.)

Once you add and name all the pages in the Web site, you can then add the content, such as text and graphics, to each page. It is better to add as many blank pages as you think you will need in the beginning, rather than adding them one at a time with all the content in place. This will enable you to set up the navigation structure of the Web site at the beginning of the development process and view how each page is linked to others.

When you are satisfied with the overall structure, you can then add the content to each page.

Creating an Effective Navigation Structure When you create a Web site, it is important to consider how your viewers will navigate from page to page within the site. A navigation bar is a critical tool for moving around a Web site, so it is important that all text, buttons, and icons used in a navigation bar have a consistent look across all pages.

If a complex navigation bar is used, such as one that incorporates JavaScript or Flash, it is a good idea to also include plain text links in another location on the page for accessibility. Otherwise, viewers (especially those with limitations on their computer that prevent them from accessing scripted content) might become confused or lost within a site.

No matter what navigation structure you use, be sure that every page includes a link back to the home page. Don't make users rely on the Back button on the browser to return to the home page.

Lesson 4 Activity 4‐1… Creating the Pages and Setting the Home Page

You are going to create the home page and the additional pages that will make up your Web site.

Activity 4‐1 Step‐by‐Step 1. Start Dreamweaver.

Your site (site_username) should be open and showing in the Files panel. (If it is not, click the down arrow beside the site name that is showing in the Files panel, and click on your site so it opens.) Right now, you do not have any web pages showing, but your assets folder should be there.

2. You will create a new Web page and set the home page. Notice your root folder in the Files panel? (site_username under the words "Local Files.")


http://rcu.blackboard.com/webapps/blackboard/content/listContentEditable.jsp?content_id=_486617_1&course_id=_10358_1

3. Right‐click on the root folder name and choose New File. You will see a new icon appear under the asset folder, ready for you to name.

4. Type in index.html – now you have created your first Web page file! This will become your home page.

5. Once it is created, right‐click on the index.html filename in the Files panel. Choose Set as Home Page in the menu that appears.

6. Repeat steps 4 and 5 to create the other pages in your site: right‐click on the root folder and choose New File. You will need additional pages as follows:

• ict2.html

• photoshop.html

• excel.html

• modelsmart.html

• simcity.html

• flash.html

• about_me.html

• career_college.html

• extra_curricular.html

7. You will then notice all the pages appear under the asset folder, but linked to the root folder. You can click on the Refresh button (the blue circle right above the words Local files) and your pages will appear alphabetized. You have now created the files/documents needed for your Web site!

Refresh button

You will find that Dreamweaver saves these files for you as you create them. They are saved in the correct folder as you go, which is one of the great reasons to create your pages this way!



Creating Page Content

Creating Head Content A Web page is composed of two distinct sections; the head content and the body. The head content includes the page title that is displayed in the title bar of the browser and some important page elements, called meta tags, that are not visible in the browser. Page titles are not to be confused with filenames.

Meta tags are HTML codes that include information about the page, such as keywords and descriptions. Meta tags are read by screen readers (for viewers that have visual impairments) and are also used to provide the server information that is needed to display the page properly. Keywords are words that relate to the content of the Web site. A description is a short paragraph that describes the content and features of the Web site. For instance the words "beach" and "resort" might be keywords for the Striped Umbrella website.

You will determine your own keywords for your website. Search engines find Web pages by matching the title, description and keywords in the head content of Web pages with keywords that viewers enter into search engine text boxes. Therefore, it is important to include concise, useful information in the head content. Some search engines limit the number of keywords that they will index, so make sure you list the most important keywords first. Keep your keywords and descriptions short and concise to ensure that all search engines will include your site.

The body is the part of the page that appears in a browser window. It contains all the page content that is visible to viewers, such as text, images, and links.

Setting Web Page Properties When you create a Web page, one of the first design decisions that you should make is choosing the background color, or the color that fills the entire Web page. The background color should complement the colors used for text, links and images that are placed on the page. Many times, images are used for backgrounds for either the entire page, or part of the page, such as a table background.

A strong contrast between text color and the background color makes it easier to read the text on your web pages. You can choose a light background color with a dark text color, or you can choose a dark background color with a light text color. A white background with dark text, though not terribly exciting, provides good contrast and is easiest to read for most viewers.

Another design decision you need to make is whether to change the default font and default link colors, which are the colors used by the browser to display text, links, and visited links. The default color for unvisited links, or links that the viewer has not clicked yet, is blue. In Dreamweaver, unvisited links are simply called links. The default color for visited links, or links that have been previously clicked, is purple.

You can change the background color, text, and link colors using the color picker in the Page Properties dialog box.

Using Web‐safe Colors Prior to 1994, colors appeared differently on different types of computers. In 1994, Netscape developed the first Web‐safe color palette, a set of colors that appears consistently in all browsers.

If you want your Web pages to be viewed across a wide variety of computer platforms (Windows, UNIX, Mac, etc.) choose Web‐safe colors for all of your page elements. The default Web‐safe color palette for Dreamweaver is the Color Cube palette.


To change page colors, click Modify in the Menu bar, then click the Background, Text, or Links color box to open the color picker, and then click the color you want for each element.

Making Pages Accessible Not all of your viewers will have perfect vision and hearing or full use of both hands. There are several techniques you can use to ensure that your web site is accessible to individuals with disabilities.

These techniques include using alternative text for images, avoiding certain colors on Web pages, and supplying text as an alternative source for information that is presented in an audio file.

For additional information, visit the Adobe website at www.adobe.com/accessibility Here you will find suggestions for creating accessible Web sites, and explanation of the Federal code about accessibility, and how people with disabilities use assistive devices to navigate the Internet.

Create and View a Site Map As you add new pages to a Web site, it is easy to lose track of how they all link together. You can use the site map feature to help you keep track of the relationships between the pages.

Remember, a site map is a graphical representation of the pages in the Web site and shows the folder structure for the Web site.

You can find out details about each page by viewing the visual clues in the site map. For example, the site map uses icons to indicate pages with broken links, e‐mail links, and links to external Web sites.

Lesson 5 Activity 5‐1… Modifying the Web Pages

You are going to be adding important information to the Head element of your Web pages.

Activity 5‐1 Step‐by‐Step 1. Start Dreamweaver. Be sure YOUR site has opened (in the Files panel.)

2. Double‐click the index.html filename in the Files panel to open it in the Document window.

3. Click View in the Menu bar, and choose Head Content.

4. The Title icon and the Meta icon (see the image below) are now visible in the head content section.

5. Click the Title icon.


http://www.adobe.com/accessibility

6. In the Title text box, type Your first and last name/block ‐ My Dreamweaver Project Home Page (Example: Sue Smith/B2 ‐ My Dreamweaver Project Home Page)

7. Click the Common tab on the insert bar (if necessary).

8. Click the Head list arrow, then click Keywords.

9. You will be adding some keywords that will describe your site in one or two short words. For now, use the terms ICT2, ICT II, NWRMS, Northwest Rankin Middle School, Rankin County Schools, Mississippi Middle Schools

This should give viewers some terms to search for to find your site. NEVER USE YOUR FULL NAME, PHONE NUMBER, ADDRESS, OR ANY OTHER IDENTIFYING INFORMATION FOR YOUR KEYWORDS!!! 10. Click on the Head list arrow again and choose Description.

11. Type in just a few words to describe what your site is about, and why it has been created.

12. Click on the different view buttons on the Document toolbar (Code view, Split view) to see the code for the head content that Dreamweaver has written for you.

Lesson 5 Activity 5‐2… Setting the Background Colors for the Web Pages

Now you will change the colors for your Home page. Remember to choose contrasting colors that will be both attractive and make text easy to read.

Activity 5‐2 Step‐by‐Step 1. Start Dreamweaver (if it is not already)

2. Open the index.html page (double‐click on the filename in the Files panel) if it is not already open.

3. Click Modify in the Menu bar.

4. Click on Page Properties. Make sure Appearance is selected in the list to the left.

5. Click on the Background color box to open the color picker.

6. Click on a very light color (or just keep the white) to use as the background color of your home page. That will allow your text to show very well.

7. Click on the Text color box to choose a text color. Select a very dark color for good contrast. (again, you may choose to stick with black for good contrast.)

8. We will just leave the links as default for now.

9. Click on the Apply button. Then click OK.

10. Save your changes. (<Ctrl>+<S> or File ‐> Save).

Because you will add some other elements to your home page that you want to include on all of the pages in your site, and then copy the home page as a “template” to the other pages, we will leave the other pages blank for now.



Working in the Body of the Home Page

Using HTML Tables to Lay Out a Page You can simply enter text and images into a web page without the use of tables, but, page layout options are very limited. The only options you have are left‐ and right‐aligned, and centered. But, say you may want to have an image beside your text, for example. You must use a table to be able to do this on a web page.

Tables offer one solution for organizing text and graphics on a page. Tables are placeholders made up of small boxes called cells, into which you can insert text and graphics. Cells in a table are arranged horizontally in rows, and vertically in columns. Using tables on a Web page gives you total control over the placement of each object on the page.

You will learn how to create and format tables, work with table rows and column, and format the contents of table cells. You will also learn how to select and format table cells using table tags on the tag selector. Clicking the table tag on the tag selector selects the table elements associated with that tag.

Once you insert a table on a Web page, it becomes very easy to place text and graphics exactly where you want them on the page. You can use a table to control both the placement of elements in relation to each other, and the amount of space between them.

Before you insert a table, however, you should always plan how you would like your table to look with all the text and graphics in it. Even a rough sketch before you begin will save you time as you add content to the page.

The following image is an example of the table you will be using on your pages:

Sample Web Page Table for LayoutYour Personal Logo Website Banner (PPT)

Your Navigation Bar

Page Content(Changes for each page)

Contact Information

When you select the table once it is created, you will see the properties for that table in the Property Inspector.

To select the entire table, click in any cell, look at the tag selector (see image on the following page) and choose the <Table> tag. This selects the whole table, as indicated by the dark border around it.

Then you can change things such as the table size, the table background color, the text color for the table, etc. Explore some of the options in the image shown.


Creating a Table in Standard Mode Creating a table in Standard mode is useful when you want to create a table with a specific number of columns and rows. To create a table in Standard mode, click the Table button on the Insert bar to open the Table dialog box.

Enter values for the number of rows and columns, the border thickness, table width, cell padding, and cell spacing.

The border is the outline or frame around the table and the individual cells and is measured in pixels.

The table width can be specified in pixels or as a percentage of the browser window.

If the width is set to 100% of width, the contents spread across the entire browser window.

When the table width is specified by pixels, the table width stays the same, regardless of the size of the browser window ‐‐ the contents will not spread outside of that fixed width unless it contains an image that is wider than the table.

Cell padding is the distance between the cell content and the cell walls, the lines inside the cell borders. Cell spacing is the distance between cells.

Planning a Table Before you create a table, you should sketch a plan for it that shows its location on a web page and the placement of text and graphics in its cells. You should also decide whether to include borders around the tables and cells.

Setting the border value to "0" (zero) causes the table to appear invisible, so viewers can't see it and will not realize you used a table unless they look at the source code.

Lesson 6 Activity 6‐1… Creating the Table for Page Layout

Now you are going to be preparing the Home page for content. After you finish the Home page, you can simply copy the different elements of the page to your other Web pages. Most of the pages will be the same, with the exception of the body text, which will vary depending on the page itself.

Your Web pages will be using a table to establish the layout.

Each Web page will be based on the table illustrated on page 18.


Activity 6‐1 Step‐by‐Step To create the table:

1. Start Dreamweaver.

2. Open your index.html file.

3. Click the Layout tab on the Insert bar.

4. Click the Standard mode button, then click the Table button. (See the image).

5. In the Table dialog box, create the following settings:

• Rows: 3; Columns: 2

• Table width: 100% (this will make your table stretch across the screen)

• Border thickness: 0 (makes an invisible table to viewers in the browser ‐ you will see dotted lines for the table rows and columns)

• Cell padding: 2; cell spacing: 2

• Header: None

6. You will not enter any accessibility information for this table, so just click OK.

Your table will appear on your index page as a short, broken line figure. But, you will be able to see the six cells ‐ two columns of three rows.

Lesson 6 Activity 6‐2… Inserting and Aligning an Image in a Table

You can insert images in the cells of a table using the Image command in the Images menu on the Insert bar. When you add a large image to a cell, the cell expands to fit the inserted image.

Activity 6‐2 Step‐by‐Step To add your personal logo to your index.html page: 1. Click in the first cell of the left‐hand column. This

will put the cursor there to insert the image.

2. In the Property Inspector, you will set the properties for the information inside the cell.

You may need use the expand button at the right edge of the Property inspector as shown here to see all of the properties.

3. In the Horz box drop‐down arrow, choose Center in order to center‐align the image in the cell.

4. In the Vert box, choose Top. This forces the image to "bump" against the top of the selected cell.

Once you choose these options, you should notice your cursor moving to the center of the cell, ready for the image. ICT II ‐ Dreamweaver Tutorial

5. In the Insert bar click on the Common tab, then click on the Image button.

6. Browse to find your assets folder; double‐click to open the folder, then select the file mylogo_username.gif. Click OK to insert it into the cell.

7. Save your changes.

8. Now click in the right‐hand cell of the top row. Here you will be placing your Website banner you created in PowerPoint.

9. Follow steps 2 through 7 to setup the cell and insert the Website banner (mybanner_username.jpg).

10. Save your changes! You now have two cells of your table complete.

Lesson 6 Activity 6‐3… Insert Text and Format Cell Contents You can enter text in a table either by typing it in a cell, copying it from another source like Microsoft Word and pasting it into a cell, or importing it from another program.

Once you place text in a table cell, you can format it to make it more readable and more visually appealing on the Web page.

Making modifications and formatting changes to a table and its contents is easy to do.

To format the contents of a cell, select the contents of the cell, then apply the formatting to it. For example, you can select the text in a cell and use the Text Indent or Text Outdent buttons in the Property Inspector to move the text closer to, or further away from the cell borders, or bold the text by using the B button in the Property Inspector.

In the bottom right cell, you are going to place your contact information, which is information that should be included on every Web page in your site. This information should allow a viewer to contact you in case they have questions or comments.

You should also include the date the page was last updated. This allows the viewer to know if you keep your site current or not.

This is important to some viewers that want the latest information. It also shows that you care about your site and intend to maintain it regularly!

Activity 6‐3 Step‐by‐Step To add your contact information:

1. Click in the bottom right cell of the table.

2. In the Property Inspector, choose Horz: Center and Vert :Top as you did with your images earlier.

3. In the cell, type This page was created and developed by (Your Proper Name/Block) for the ICT II class of Northwest Rankin Middle School. <Enter> It was last updated on (type in today's date.)

4. Select both lines of text, and bold it. (Use the "B" button in the Property Inspector.)

Now you will make your name an email link.

5. Select the text (just your name/block).

6. Click on the Email link in the Insert/ Common toolbar (the tiny envelope).

7. Your name/block will already be showing in the dialog box. Just type your ENTIRE email address into the E‐Mail box as shown.

8. Then click OK to close it. Your name is now an Email link.


9. Now select the Northwest Rankin Middle School text. Use the Hyperlink button (little chain link) beside the Email button.

10. Enter the information as shown in the image. You MUST add the http://www.rcsd.ms/~web26 text to make the link work.

Now viewers can contact you if they have any questions or comments about your site. (If you were to upload these pages ‐ which we will not do.)

Lesson 6 Activity 6‐4… Creating the Navigation Bar Now you will be creating the Navigation bar, which will tie all the pages together into a working web site. You will use the Flash Button technique.

Activity 6‐4 Step‐by‐Step 1. You will be adding your navigation bar to the left column, center cell (the cell directly under

your logo). So, click there now to place the cursor in that cell.

2. From the Menu bar: select Insert ‐> Media ‐> Flash Button (be sure to select Flash Button, not just Flash!), and the following dialog box will appear.

3. In the red boxed in “Style” area, you will select a style for your buttons. Click on the different ones to see what is available. Do not use one of the arrows, control, or e‐commerce buttons as these have other uses.

4. In the orange boxed in “Button” text area, type in the name you want to appear on the button. For this first one, choose Home Page as your text.

5. In the yellow boxed in “Link” area, click on the Browse button to select the page to link this button to. For the Home Page, your link should be the index.html page. Just double‐click on the filename to select it.

6. In the green boxed in “Save As” area, click the Browse folder.

7. Save the file in the dreamweaver_project folder, name it button_home.swf (must type the .swf) for this first button. Do not save the button in the assets folder because it must be in the same folder as the Web page it is connect to.

8. Click OK to close the dialog box.

9. Your button image will be selected in the table. Click directly to the right of the button (or tap the right arrow key one time) to deselect it and place the cursor immediately to the right of it.


http://www.rcsd.ms/%7Eweb26

10. Now hold down the <Shift> key then press <Enter> so you can single space and have the buttons close together.

11. Now follow the same sequence of steps to create the button for the About Me page.

• Select the same style of button as before.

• In the orange area, type in About Me for the button name.

• In the yellow area, click the Browse folder and choose the about_me.html page.

• In the green area, save the button as button_about_me.swf in the same place as the Home button.

• Click OK to create the button.

• <Shift>+<Enter> to single space one more time.

12. Now create the next button for this navigation bar: the ICT 2 button. • Use the same style.

• Button name: ICT II

• Link to the ict2.html page

• Save the button as button_ict2.swf

• Click OK.

Now you have created your navigation bar buttons for the main three pages of your Web site.

Your Dreamweaver window should now be similar to this one: the page was "narrowed" to allow for both the Files panel and the navigation bar to show.

Using the same instructions, add the navigation buttons and links for your other seven Web pages. Use appropriate button text and button names so you will know which pages you are talking about as you create them.

Lesson 6 Activity 6‐5… Creating Text Navigation for the Web Pages

You will add a text navigation bar to your Web pages to give your viewers a choice of methods to switch from one page to another (this is an important accessibility feature for users with limitations preventing them from viewing/using the Flash buttons). You will add this text bar under the Website banner at the top of the page so it is easily seen.


Activity 6‐5 Step‐by‐Step 1. Click on the website banner image in the top right cell to select it. Now, use the right arrow key

on the keyboard to move the cursor beside the image.

2. Then <Enter> to create a new line below the image and expand the table cell. You should still be in the SAME cell as your Website banner, just BELOW it!

3. In the Property Inspector, click on the Center align button so your text navigation bar is centered in the cell. (You may adjust this later if you think it would look better left‐aligned, or right‐aligned.)

4. Type the following text: Home ‐ About Me ‐ ICT 2

5. Then <Enter> to make a new line.

6. Type: Career/College ‐ Extra Curricular ‐ Photoshop ‐ Flash ‐ Excel ‐ Bridge Building ‐ SimCity

7. Now we will set the formatting for the text. Select both lines of text.

8. Click the Size list arrow in the Property Inspector.

9. Click None. This removes any formatting that may have already been attached to the text.

10. Now click the Format list arrow in the Property Inspector.

11. Click Heading 4. 12. Click the Font list arrow in the Property Inspector and click Arial, Helvetica, sans‐serif

13. Click elsewhere on the screen to deselect the text. 14. Now we will create the link between the text and the Web page. Double‐click the word Home.

This will select it.

15. Click the Browse for File icon (the tiny folder) next to the Link text box in the Property Inspector. 16. Verify that the link is set to Relative to Document in the Relative to: list.

17. Click index.html, click OK, and then click anywhere on the page to deselect the text.

Home now appears in blue with an underline, indicating it is a link.

18. Repeat these steps (#14‐17) to create text links to all of the other pages in the Web site.



Copying the Home Page

Now that we have completed all the information on the Home page that will be shared with the other Web pages, it is time to copy it. This will allow us to add the personal logo, the Website banner, the contact information, and both navigation structures to the other pages easily.

Lesson 7 Activity 7‐1… Copying the Home Page to the other Pages

With the index.html page open in the Document window:

1. File ‐> Save As, and then click on about_me.html. You will get a warning about replacing the existing file; choose Yes.

2. Do the same for the other pages.

3. File ‐> Save All to save all the pages and the changes one more time.

4. You can check the navigation links by looking at the site in Internet Explorer. With the index.html page still open, click on the <F12> key. This opens the page in Internet Explorer (be patient, takes a minute or two!)

5. Now click on the links, both the Flash buttons and the text, to see if they work. Your pages should change as you click. (Of course, if you are on the Home page, and click the Home page button, nothing will happen!)

6. If all the links work, you are on the right track, and ready to proceed to Lesson 8 ‐ Individual Page content!

7. If the links do not work, go back to the appropriate lesson, and debug the Home page to see what the problem is.

8. If you find an error, save your changes, and complete these steps 1 through 3 above again to resave the pages correctly. Once the navigation structures are working, go on to lesson 8.



Individual Page Contents

IMPORTANT NOTE: Any image file, or other document, that you intend to use on the Web pages MUST be copied into the assets folder (as a .jpg or .gif file)of your site before you use it. Then, when you insert it into the page, browse tothe assets folder to link the files.

ANOTHER IMPORTANT NOTE: You might find it helpful to add another "invisible" table to the remaining cell on each page. Remember to make your border "0" so the table border won't be visible to the viewer.

If you make it one column and two or three rows, you can add an image in the top cell, type your information in the center cell, and another image in the bottom cell.

If you want to add an image beside the text, you would create a table of one row and two columns. This would give you a place to add an image in one cell or the other, and the text in the other cell.

Home Page – index.html Now is the time to begin filling the empty cell in the middle right‐hand column (above the cell with your contact information). This area will contain all the "meat" or information for each Web page. (You will leave the bottom left cell empty.)

For your Home page, just give a description of why this project was created.

It is basically applying the skills used in all of the computer applications learned in ICT II, for one thing.

It is also going to be a reflection of you and your interests.

You should also add a short sentence to tell what each of the other pages will be about. You want to create interest so viewers will want to check them out!

You can type this information in Microsoft Word to spell‐and grammar‐check it.

About Me! Page – about_me.html This page will be used for you to describe yourself, your family, your interests, etc.

Here would be a good place to insert your photo text name image at the top of the cell before you start your paragraph.

After some text about yourself, insert your picture of your Destination file you created in Photoshop, (the .jpg file ‐ you must open My Computer, copy this file, and paste it into your assets folder before you use it.)

Give a short description of the vacation you took there. (Remember, you cannot believe everything you read on the Internet!)

Be creative, but tasteful. Write something you could show your mama, your grandma, and your preacher.

Career/College Page – career_college.html This page will be used to describe the career you are interested in, and/or the college you are planning to attend.

You may get images from Google images to enhance this page. (College logo, etc.) Remember, you MUST save any image files in your assets folder.


Extra‐Curricular Page – extra_curricular.html This page will be used to describe an activity that you are involved with that is not done during school hours. It may be a sport you play, a club you are a member of, Junior Beta Club, Band, Scouts, a church activity, etc.

ICT II Page – ict2.html

For the ICT 2 page, you can gather some information from the About ICT II link in Blackboard.

There you will find a description of the course, and its units, which you will use to describe the course on this page.

For an image, you may want to copy the ICT II image on the Blackboard class site and use it. Remember to save it in the assets folder.

You might also want to describe in more detail the five units you are creating the linked Web pages for ‐ Flash, Photoshop, Excel, SimCity, and ModelSmart Bridge Building.

Photoshop, Flash, Excel, SimCity, and ModelSmart Bridge Building Pages

Here is the opportunity to highlight your work in each of these applications.

On each separate page, you will choose a file that was a favorite activity, like those for Flash and Photoshop.

************************************************************************************ Flash

On your Flash page, you must copy and paste your .swf file into your assets folder for it to work.

1. Open My Computer, navigate to your Flash folder in your directory. 2. Right‐click on the Flash file you want to use (be sure to select the .swf file – the white square

with the single red ‘f ’ ). 3. Copy it. 4. Navigate to your dreamweaver_project folder ‐> assets folder.

Paste it there. 5.

From the Menu bar, select Insert ‐> Media ‐> Flash. Your site folder will open.

elect it.

page.

Now back in Dreamweaver:

With your cursor where you want to put the image:

1.

2. Open the assets folder.

3. Click on the .swf file to s

This will insert the file into the Web

YOU WILL NOT BE ABLE TO VIEW IT IN DREAMWEAVER ‐ it shows like a missing image box.

e

file in Internet Explorer.

window) to show the page with the Flash file working.

4. Below the Flash object, tell why this was your favorite Flash project, and include a positivcomment about using the Flash program.

5. Save your changes, then <F12> to open the

6. You must Allow Blocked content (appears at the top of the browser



******

Photosho*****************************************************************************

p For Photoshop:

1. Choose your favorite image you created other than your destination file (You will highlight that one on your About Me page).

.gif or .jpg file of the image. 2. Insert the

3. Tell about what you learned in creating the project, and why is was your favorite.

the Photoshop unit.

********** SimCit

4. Add an additional positive comment about

**************************************************************************y

For SimCity you will create a screen capture of your final project to put on the page. (You will have to ask for

1. Open your city from within SimCity.

your assets folder as a .jpg file.

ut your eneral.

**************************************************** Mo

the SimCity CD to be able to open that file.)

2. <Alt><Print Screen> (found above the Insert key on the computer’s keyboard) 3. Paste the image into Photoshop. 4. Save the file for Web & Devices into5. Name it simcity_username.jpg 6. Tell about what you learned in building your city and add a positive comment abo

experience with the program in g

********************************delSmart Bridge Building

Do the thing in Model Smart Bridge Building for one of your best bridges.

d in building your bridges and add a positive comment about your

*********************************** Exc

same

1. Save it in the assets folder as bridge_username.jpg 2. Tell about what you learne

experience with the ModelSmart program in general.

*************************************************el

In Excel, choose a file that had a graph or chart and Print Screen to capture that image also.

Below the image, add some information about the Excel program, including a positive comment about the program.

***********************************

1. Save it in your asset folder as excel_username.jpg 2.

*************************************************

Adobe Dreamweaver CS3 · Adobe Dreamweaver CS3 Tutorial – Lesson 1 Getting Started with...

Documents

Transcript of Adobe Dreamweaver CS3 · Adobe Dreamweaver CS3 Tutorial – Lesson 1 Getting Started with...