200 likes | 631 Views
Planning a Web Site Unit Two Planning Steps Determine the audience & objectives. Sketch a storyboard or flowchart of the pages. Create a folder hierarchy. Collect the page content and create the pages. Test the pages. Modify the pages. Publish the site. 1. Determine the Audience
E N D
Planning a Web Site Unit Two
Planning Steps • Determine the audience & objectives. • Sketch a storyboard or flowchart of the pages. • Create a folder hierarchy. • Collect the page content and create the pages. • Test the pages. • Modify the pages. • Publish the site.
1. Determine the Audience • Customers? • Employees? • One industry? • Educational background? • Age? • Interest? • Make sure the site appeals to the audience.
1. Objectives • Advertise? • Inform? • Educate? • Provide a service? • Process an order?
2. Storyboard Introduction or Home Page Main Topics level Sub Topic Level (design for no more than 3 mouse clicks)
4. Page Layout • Introductory page • Fit on one screen • Z pattern • Logo and important info on top and bottom\ • Don’t use horizontal scroll bar
4. Page Layout • General layout for content pages • Be consistent, location, color, type • Link each page to previous and to introductory • Navigation bar on top and bottom • No active link to current page • Page heading at the top of each • Contact Information • Update Information
Design Rules • Be concise – simple sentences, bullets • Easy to read – text size, white space, short lines, indent, tables, serif font, colors, single word links, don’t say click here. • Easy to navigate – good descriptions, easy icons, don’t underline regular text, divide long pages, toc, site map • Interesting – color, bold, size – don’t overdo
Design Rules • Load quickly - < 60k, small images, thumbnails, reuse images • Limit frames – users don’t like them much • Limit animation – slow & distracting • Have an alternative to frames and animation • Consider browsers and resolution • Proofread and Test – continuously
Creating a Web Site • Create a folder on your disk drive using Windows Explorer called tripsmart • In Dreamweaver Site|Define Sites|New name it TripSmart and choose local Root folder then browse for tripsmart folder • Check Refresh Local File List Automatically • Check Enable Cache
Add a Folder to a Site • Make sure the Site window is open using the ShowSite icon on the Launcher bar • File|New Folder • Name is assets
Setting the Home Page • Open the file dmb_1.htm from the Unit B folder • Save it as index.htm in the tripsmart folder • Title bar in Design View shows path • Click Show Site icon • Choose index.htm • Site|Set as Home Page
Save images to Site • In Design View, select the logo • Property Inspector displays the SRC or location of the graphic • Click the folder icon and copy the file to the root folder? yes • Copy File As - assets folder
Add a New Pages • Show Site Window • File|New Files – name it products.htm • Add serices.htm, packages,htm, newletter.htm, clothing.htm and accessories.htm
You MUST use the SITE window for file maintenance and NOT windows explorer • Dreamweaver will not recognize any changes made in windows explorer and you will have to do it again.
Design Notes • Site|Define Sites • Choose TripSmart then Edit • Choose Design Notes • Check – Maintain Design Notes • Check – Upload Design Notes for Sharing • Design View of index.htm File|Design Notes|Basic Info tab choose Draft • Insert Date icon • Type – Ask Bob for a copy of the company history. • Check – Show When File is Opened
Setting up Web Server Access • Site View • Site – choose Define Sites – Edit • Remote Info – Access list – FTP • Host Site – ftp://hsb-faculty.baylor.edu/milligan/yourlastname • Enable File check In and Check Out • Check Out Files when Opening • Check Out Name – type name and email addr
Creating & Viewing Site Map • Site Window • Site|Define Sites • TripSmart Edit • Site Map Layout • Verify index.htm as the home page • Select Page Titles option Done • Sit Map icon Choose Map and Files
Save the Site Map • File|Save Site Map • Save as bmp (to print or put in word) or • png (portable network) to put in html
Modify Pages in Site Window • Site Map view • Refresh icon • Click TripSmart page icon • Change the name to Welcome to TripSmart – The Smart Way to Go • Save and Exit