Class 3

Topics:

• Continue with FTP - File Transfer Protocol
• Website Development Cycle - Lecture
• Principles of Good Web Design - Lecture
• Planning and Setting up your Site - (Chapter 3 Dreamweaver 4)
• Site Management and Collaboration (Chapter 4 Dreamweaver 4)
• Project 1

Homework2 text
Homework 2 layout

Continue with FTP

Ensure the entire class is able to upload to their web hosting service.

The Website Development Cycle - Lecture

Production Crew: A team needs to be established to do the production of the site. For small production teams (one or two people), each of these positions might be divided and assigned as jobs.

1. Content Developer:
• Create the text, images, other media and build the structure for the site.
2. Page Editor:
• Vital, are fresh eyes reviewing new/developed pages.
• Proof readers are essential.
3. Content Manager:
• As content is implemented in HTML, it needs to be approved to ensure there has been no deviation from the original plan.
• All content should be approved and sign off by the designer(s) and client.

Production: Planning, testing, determining web content, structure, visual style, layout and technical specification.

1. Profile of Target Audience:
• Establish target audience to define the technical requirements.
2. Site Map & Navigation:
• Establish Site Structure.
• A System to Navigate for the site.
3. Visual Elements:
• Establish the basics: static graphics, animation, flash, buttons, type (font, size colour) and layout.
• Sketch ideas or make rough composite graphic (Photoshop) files (with layers).
4. Text Version #1:
• Text only version of the site.
• Go into detail with the index page and follow one of the most extensive lines of navigation (creating suggested pages with some detail about content).
• Test this on a small group, not familiar with the project.
5. Text Version #2:
• Make changes to the Text Version # from the feedback given in Text Version #1 testing.
• Test the site with changes on a new larger test group.
6. Visual Version #1:
• Make changes required from Text Version #2.
• Implement standard visual design of several lines of navigation.
• Test with small group, not familiar with the web project.
7. Visual Version #2:
   • Make changes needed from the text group for Visual Version #1.
   • Finish the development of the visual elements.
   • Test with new large test group.
8. Staging & Publishing:
   • Staging:
     • Upload pages to a Staging Server (in your control).
     • Without public access.
     • Test all aspects of the site.
     • Must be virtual, not local.
   • Publishing:
     • Upload to the clients server
     • Test all aspects of the site again.
   • Apply search engine technology where required, needed, contracted.
   • Register with a tracking service to collect data about the users, if required, needed, contracted.
   
   

Post Production: Involves maintaining, updating and making changes to the site.

• Site Updates & Additions:
• As standard content can change on a regular basic you need to have a follow-up agreement with the client.
• "Site tweaking" may be required to hit target audience or to encompass an audience not anticipated or discovered as a result of the publication of the site..
• Graphics may degrade over time.
• External Links can change.

Planning and Setting up your Site - (Chapter 3 Dreamweaver 4)

DW4 is a Creation and Management Tool. In order to build a website, simple and complex, you'll need to prepare by following these steps:

1. Planning and Design: With the Client, if possible, fully develop your ideas for the site.
• Determine Goals: Are you trying to develop awareness of your brand, attract prospective customers to your site or actually make sales?
  • What do you hope to accomplish with the web site?
  • Write down the goals for the site, to ensure they will be followed.
  • Have the Client sign-off your results.
• Target Audience: The best approach is to write a statement that describes exactly who you wish to attract with your ad. For example, "I want to reach 18-to-34-year-old women who are interested in kick boxing." Taking the time to name and label the types of people you want to reach will help you identify appropriate places to place your ad.
  • Who will visit your site?
    
  • To establish the Target Audience ask and answer these questions:
    • What kind of computer system will they be using? Mac? PC?
    • Which platform? Macintosh, Windows, Linux or other?
    • Which browser will they most likely use and which version?
    • What size of monitor will they be viewing the site?
    • Are you creating the site for an Intranet?
    • What type of connection speed will users be using when visiting the site?
  • Have the Client sign-off your results.
• Browser Compatibility: Windows Browser Chart
  • Set up Secondary Browser. Edit > Preferences > Preview in Browsers.
  • Will you develop secondary pages if part of your target audience will not be able to view important pages..
• Site File Structure:
  • Develop appropriate folders to hold your Site Assets.
  • Put related pages in the same folder.
  • Put related images in their own folder.
  • Develop abbreviating for files that are similar, so they can be located quickly, by alpha order.
  • Your local site and remote site must be developed with exactly the same site structure.
• Creating a "Look":
  • Create mockup or composite drawings.
  • Have the Client sign-off your results.
• Designing Navigation:
  • Should be consistent throughout the site.
  • Use Redundancy.
  • Have the Client sign-off your results.
• Assets: Are the visual & audible elements which make up your site.
  • Text (final proof), images, flash files, video, sound files and other media.
  • They need to be made available for development.
  • Use Templates and Library items to create Asset which will be reused and duplicated on your site.
    
    
2. Set up the Basic Site Structure in DW4:
   • Set up Site Structure locally before creating your pages.
     • Create New Site: Site > New Site. DW4 creates a cache to manage your new site.
     • Editing an Existing Site: Site > Define Site. Click New or Site > Open site > Define Site.
     • Download and Existing Site from the Internet: Simply create a folder, locally, to hold the content of the site you wish to download. Then, define that as the new site and set up the remote information to log into that remote site. Upload the required files locally.
     • Check to ensure all the content/assets have been transfered.

Site Management and Collaboration - (Chapter 3 Dreamweaver 4)

Site Window: In DW4

• Site File View: displays the file structure of the remote and local sites in the left and/or right windows.
• Site Map View: Displays a graphical map of your site structure based on what you have constructed locally.
• Site Pop-up Menu: Allows you to choose from sites you have previously defined.
• Connect/Disconnect: When your site has been defined to include FTPing, you will be able to select this button to connect or disconnect to/from your remote service.
• Refresh: Refreshes the local and remote files.
• Get Files: Copies the selected files from the remote site to your local site.
• Put Files: Copies the selected files from the local site to your remote site.

Working in the Site Window:

• Locally, you can view an HTML file by double clicking the icon for that file.
• Add New Folder: First select the folder in which the new folder will be placed. Then, File > New Folder. This option is available in the Context Menu, too.
• Add a New File: First select the folder in which the new file will be placed. Then, File > New File. This option is available in the Context Menu, too.
• Rename an Existing Folder or File: Right mouse click on the folder or file, choose Rename.

Site Maps in DW4: Ideal tool for laying out your Site Structure.

• Define a Home Page: Each site must have a Home Page, from which the site will root (usually index.html).
  • Site > Define Site > Select Site Map Layout in the Define Site window.
  • Browser to your Home Page or Right Mouse click and select Set As Home Page from the Context Menu.
• Viewing a Site Map: Allows you to view your site structure as linked up in DW4. Use the (-/+) signs to display more of your structure.
  • Window > Site Map or click the Site Map button.
  • Modify the Site Map Layout when you Define your Site.
  • Choose the Columns Option, the Number of Columns, Column Width, Icon Label for displaying the file name or the page title.
• Working with Pages in the Site Map: You can arrange, view and ultimately edit pages through the Site Map.
  • Double Click on a page to open that page.
  • Drag pages in place.
  • Create new pages.
  • Modify the Page Title.
  • Set New Home Page.
• Saving a Site Map as an Image: Once you are pleased with your site structure, you can save the site map as an image and print or publish a copy.
  • File > Save Site Map. Fill in the required fields in the Site Map dialog box saving the file as a .bmp or .png file.
• FTPing: File Transfer Protocol - up loading files to your remote site.
  • Site > Define Site. In the Define Site popup click on Remote Info. Select FTP from the dropdown list.
  • FTP Host Name: Enter the full internet address of your Host. EG: www.npconsultants.com (no need for HTTP://).
  • Host Directory: is the folder which your remote site is/will be located.
  • Login Name
  • Password
  • Use Firewall setting only as required.
• Checking In / Out: DW4 offers a collaborative element, which allows more than one person or team to be working on the site,. at one time. Once set up, files must be Checked Out and Checked In as they are worked on. This way work is only done once and each team member knows what is being worked on and what needs to be done.
• Synchronizing Files: Site > Synchronize allows you to ensure that the most up to date files are on the remote site.

1. Find three websites or articles that provide design tips. (Do's & Don't of Web Design)
2. Summarize the main points in each of these articles and use these summaries as a basis for analyzing one good, one mediocre, and one poorly designed commercial website, of your choice.
3. Upload your summaries, as a new web page titled "Project 1". Put a link to this page from your current home page, in an appropriately visible place.
4. Email a link, to your current Home Page to: ec106@npconsultants.com
5. Due: End of Class 6