Web DesignUnit 10

Mrs. Christine McManusITT Technical Institute

VC-240 Visual Design for the Web

Unit 10 Objectives

8: Publish a Web site on a server. 8.1: Use site maintenance tools to

update the content, organize the files, and manage assets.

8.2: Test a site on different Web browsers to check for inconsistent display.

8.3: Connect to a remote server to upload files.

8.4: Upload files to a server to publish a Web site.

Key Concepts

The following key concepts must be covered in class in order to achieve the course objectives.

1. Testing Pages in Different Web Browsers

2. Connecting to Remote Sites3. Managing Site Assets4. Running a Site Report5. Uploading Sites

Concept 1 Testing Pages in Web Browsers

How to download browsers to view web pages in a browser. Go to: http://browsers.evolt.org

This Web site promotes exchange of ideas, skills, and experiences among Web developers.

There is a difference between working locally and working with a direct connection to the server.

Lab 10.1 Use the Files Panel

What is the purpose?After you define a Web site, all

files that are part of the site appear in the Files panel.

You can use the Files panel to organize, open, and update your files and Dreamweaver will fix any associated links.

In this lab, you will practice exploring and using the Files panel that will help you save time and prevent breaks in site links.

Did it work?• Were you able to complete the

activity as instructed?• Were you able to organize your site

using folders and subfolders?

Lab 10.1 Use the Files Panel

What are the steps?1. Open your portfolio Web site.2. Follow the directions on pages

244-245 in the textbook Teach Yourself Visually™ Dreamweaver® CS3 to organize your files and folders.

3. Move all your portfolio pieces to the same subfolder.

4. Save your file.5. Have your instructor verify your

work.

Did it work?• Were you able to complete the

activity as instructed?• Were you able to organize your

site using folders and subfolders?

Lab 10.1 Use the Files Panel

Did it work?Were you able to complete the

activity as instructed?Were you able to organize your

site using folders and subfolders?

Concept 2 Connecting to Remote Sites

After a Web site is designed, the next step involves publishing the site to a server so users accessing the Internet can view the site.

Concept 2 Connecting to Remote Sites

The publishing process in detail. To set up a remote site—a site on the

server—in the site definition window in Dreamweaver.

Define the site. ▪ Go to Site> Manage Sites>▪ Advanced tab.▪ In the Remote Site category of the Site

Definition dialog choose File Transfer Protocol (FTP).

Concept 3 Managing Site Assets

With the use of the site maintenance tools that Dreamweaver provides allows you to keep a site updated.

1. Viewing the site map in Dreamweaver. Fixing any broken links.

2. Use the Assets panel to view and manage elements contained in your site Allows you to specify your favorite

assets used.

Concept 5 Uploading Sites

After you define your site, establish your root folder, and set up the FTP information for your remote site, the actual publishing of the site is simple.

Concept 4 Running a Site Report

The importance of running a report on your site and fixing problems before you upload files.

You can change or fix all the links on a site Go to Site> Check Links Sitewide.

Lab 10.2 Use of Site Maintenance ToolsWhat is the purpose?Dreamweaver offers site

maintenance tools that allow you to update a Web site easily. In this lab, you view the site map and manage the assets of your Web portfolio site. The purpose of this lab is to help you gain experience in keeping your site updated by using proper timesaving tools. You will use the textbook Teach Yourself Visually™ Dreamweaver® CS3 for this lab.

Lab 10.2 Use of Site Maintenance ToolsWhat are the steps?

Procedure1. Open your Web portfolio site.2. Follow the directions on pages

258-259 in the textbook to view the site

map and create and save a BMP image of the site map.

3. Print the site map.4. Follow the directions on pages

260-261 in the textbook to manage site assets.

Lab 10.2 Use of Site Maintenance ToolsWhat are the steps?

Procedure5. Follow the directions on pages

270-271 in the textbook run a site

report and fix any links.6. Print the site report.7. Save your file.8. Submit the site map and the

site report in Edmodo for assignment Lab 10.2.

.

Lab 10.2 Use of Site Maintenance ToolsDid it work?Were you able to complete the

activity as instructed?Were you able to save a BMP

image of your site?Were you able to print the site

report?

Concept 5 Uploading Sites

Go to the Files window, and use the tools to connect to the server and transfer the files The Connect button (Put and Get) Dependent files The FTP log panel

Concept 5 Uploading Sites

Explain that students can use other FTP tools, instead of using the Dreamweaver built-in tools. Such as: WS_FTP Fetch & Transmit.

These tools can be downloaded from www.download.com.

Web Hosting Startlogic: Offers premium Web hosting solutions.

www.startlogic.com Ace-Host: Offers enterprise Web hosting

www.ace-host.net Yahoo: Offers Web hosting with unlimited disk

space, data transfer, and email storage http://smallbusiness.yahoo.com

Active Web Hosting: Offers a free domain name, unlimited Web space, email, and ftp accounts www.activewebhosting.com

Blue Host: Offers affordable and reliable Web hosting solutions www.bluehost.com

Host Monster: Offers professional Web hosting www.hostmonster.com

Lab 9.2 Upload a Site

What is the purpose? In this lab, you will choose a Web

host, set up a remote server, and upload your Web portfolio site.

The purpose of this lab is to help you learn how to publish a Web site so that users can view it on the Internet.

You will use the textbook Teach Yourself Visually™ Dreamweaver® CS3 for this lab.

Lab 9.2 Upload a Site

What are the steps?1. Your instructor will help you

choose a Web host. Take a note of your FTP host, host directory, user name, and password.

2. Set up your remote site by following the directions on pages 246-247 in your textbook.

3. Follow the directions on pages 248-249 in the textbook to upload your files to the Web server.

Lab 9.2 Upload a Site

What are the steps?4. Open your site in a browser by

typing the URL. The published site should open.

5. Type the URL of your Web site in the Weebly assignment area or simply paste the link.

Final Project Information

Final Web Site and Presentation

Web Design for Dummies®

Chapter 11-Presenting Your Design Masterpiece

Assembling design option for a clients Creating an online and offline presentation Printing and mounting your mock-ups Presenting work to clients

Final Web Site and Presentation

Web Design for Dummies®

Chapter 17- Ten Information and Interaction Design

Tips Creating navigation sets Using wireframes to work out interaction design

and layout Labeling your buttons and icons Orientating people in your Web site Providing a link to the home page Designing buttons that look clickable

Final Web Site and Presentation

Web Design for Dummies®

Chapter 17- Ten Information and Interaction Design

Tips Grouping button of similar function together Developing a theme for your site Color-coding strategy

Course Project Part II: Creating the Portfolio in DreamweaverPurpose: In this project, you will build your

online Web portfolio site in Dreamweaver.

You will have the opportunity to explore all the techniques for creating a site.

Grading Weight- 15% of the final grade

3% grade- files10% grade - design and function2% grade - printed pages

Course Project Part II: Creating the Portfolio in DreamweaverDeliverables, Requirements and

Timeline1. Requirements• Create an online Web site using

the design documents from the course

Your site should showcase your work. It should include the following:

An introduction page Your resume or client

informationCompany or personal contact

information

Course Project Part II: Creating the Portfolio in Dreamweaver At least 7 to 12 art and design

projects. These are the files that you optimized and prepared for the Web in Project 3.

A navigational system that links all pages together Rollovers and behaviors Pages formatted by using tables or

CSS A root folder containing organized

files and subfolders

Course Project Part II: Creating the Portfolio in DreamweaverMake sure you define your site

and organize all your files in the root folder.

After building your site, preview it in a browser. Check all the links to make sure they work.

Print all Web pages from the browser.

Submit your files and a printed version of each page. Write your name on the reverse of all the pages.

Course Project Part II: Creating the Portfolio in Dreamweaver2. Deliverables

Submit the following:• All site files within the root

folder• A printed version of each Web-

ready image

3. Timeline• The project is assigned in Unit 5

and due in Unit 11.

Course Project Part III: Presenting Your SitePurpose: In this project, you will

create a presentation for your online portfolio Web site and present it to the class.

This project will give you an opportunity topractice presenting concepts to a client.

Grading Weight- 5% of the final grade

3% grade- presentation board2% grade – presentation to class

Course Project Part III: Presenting Your Site

Deliverables, Requirements and Timeline

1. Requirements• Create a presentation board of

your Web site. It should be well planned and designed to match the look and feel of your Web site.

Course Project Part III: Presenting Your SiteInclude the following items on this

board:1. Screen shots from a browser of your

home page and at least one other page.

2. Details of your navigational approach. Use examples of the navigational elements—buttons, icons, or images—you used as links.

3. The color scheme you used4. A title for your board. Include the

name of the project, the designer (you) and the client (you).

5. Your type scheme—an example of the fonts you used on the site.

Course Project Part III: Presenting Your SitePrint all your pieces on good-quality

paper.Mount them on black foam core using 3MStray Adhesive.

Present your concepts and your site to the class.

Use your Design Document as a guide for your presentation.

Plan your presentation and provide details of the planning process as well as the production process.

• Submit your presentation board to the instructor for evaluation.

Course Project Part III: Presenting Your SiteDeliverables

Submit your presentation board to the instructor for evaluation.