Web Design Unit 10 Mrs. Christine McManus ITT Technical Institute VC-240 Visual Design for the Web

 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.

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 Sites  3. Managing Site Assets  4. Running a Site Report  5. Uploading Sites

 How to download browsers to view web pages in a browser. Go to:  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.

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? 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?

What are the steps? 1. Open your portfolio Web site. 2. Follow the directions on pages 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? What are the steps? 1. Open your portfolio Web site. 2. Follow the directions on pages 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?

Did it work?  Were you able to complete the activity as instructed?  Were you able to organize your site using folders and subfolders? Did it work?  Were you able to complete the activity as instructed?  Were you able to organize your site using folders and subfolders?

 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.

 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).

 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.

 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.

 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.

What 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. What 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.

What are the steps? Procedure  1. Open your Web portfolio site.  2. Follow the directions on pages 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 in the textbook to manage site assets. What are the steps? Procedure  1. Open your Web portfolio site.  2. Follow the directions on pages 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 in the textbook to manage site assets.

What are the steps? Procedure  5. Follow the directions on pages 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 . What are the steps? Procedure  5. Follow the directions on pages 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 .

Did 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? Did 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?

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

 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

 Startlogic: Offers premium Web hosting solutions.  Ace-Host: Offers enterprise Web hosting  Yahoo: Offers Web hosting with unlimited disk space, data transfer, and storage  Active Web Hosting: Offers a free domain name, unlimited Web space, , and ftp accounts  Blue Host: Offers affordable and reliable Web hosting solutions  Host Monster: Offers professional Web hosting

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. 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.

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 in your textbook. 3. Follow the directions on pages in the textbook to upload your files to the Web server. 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 in your textbook. 3. Follow the directions on pages in the textbook to upload your files to the Web server.

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. 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.

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

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

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

Purpose:  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- files  10% grade - design and function  2% grade - printed pages Purpose:  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- files  10% grade - design and function  2% grade - printed pages

Deliverables, Requirements and Timeline 1. 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 information  Company or personal contact information Deliverables, Requirements and Timeline 1. 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 information  Company or personal contact information

 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  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

 Make 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.  Make 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.

2. 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 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.

 Purpose: 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 to practice presenting concepts to a client. Grading Weight- 5% of the final grade  3% grade- presentation board  2% grade – presentation to class  Purpose: 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 to practice presenting concepts to a client. Grading Weight- 5% of the final grade  3% grade- presentation board  2% grade – presentation to class

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. 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.

Include 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 used 4. 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. Include 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 used 4. 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.

Print all your pieces on good-quality paper. Mount them on black foam core using 3M Stray 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. Print all your pieces on good-quality paper. Mount them on black foam core using 3M Stray 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.

Deliverables Submit your presentation board to the instructor for evaluation. Deliverables Submit your presentation board to the instructor for evaluation.