Upload
gwen-moody
View
214
Download
2
Embed Size (px)
Citation preview
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.