Katie’s Cafe

Skills

804- Perform image management procedures.
805-Demonstrate professional visual communication skills.
1502-Demonstrate proper use of a text editor.
1504-Add color and format text.
1511-Insert an image in a webpage.
1602-Create and utilize inline styles to change page attributes.
1603-Create and utilize embedded styles to change page attributes.
1607-Create and link an external style sheet.
804- Perform image management procedures.
805-Demonstrate professional visual communication skills.
1502-Demonstrate proper use of a text editor.
1504-Add color and format text.
1511-Insert an image in a webpage.
1513-Create image maps.
1602-Create and utilize inline styles to change page attributes.
1603-Create and utilize embedded styles to change page attributes.
1607-Create and link an external style sheet.

Resources:

Textbook: HTML5 and CSS

OVERVIEW

Katie’s Cafe is a unique coffee and food cafe located in San Fransico, California. They have hired you to create their new website based in the information they are providing you. In Dreamweaver you are to develop a website for Katie’s Cafe and use the provided resources. Creativity matters!

OBJECTIVE

You will create a website for a company using all of the skills that you learned in Dreamweaver including the Bootstrap Framework.

INSTRUCTIONS

1. You are creating a Bootstrap Dreamweaver site for a company called Katie’s Cafe. They have provided you with the content you need as far as text and images. Get to know the client by examining the Design Brief below. You will use this information to create and develop the website using the Bootstrap Framework.

2. Develop wireframes for each page of the site.

3. Start developing the site and follow the requirements below.

Requirements:

Save the pages appropriately (provided in the notes)
Title the pages appropriately (provided in the notes) within the title tag
Use all the text content provided for each page
Include images throughout (provided in the assets)
Follow the notes that are provided for each page
Follow the navigation Structure from the design brief
Include the Common Page items for each page
- Logo, Navigation, Social Media, Downloadable Menu, Secondary Navigation Meni
Each page must include a header, main area, and footer
Use a bootstrap grid structure
Have all the links working
Use a template
Do all styling in an external style sheet
Format text appropriately (Use headers)
Add INTERACTIVE COMPONENTS!

The information you need for each page as well as the assets for the website are provided HERE. All the text must be included from the designated pages. Follow the notes for each page.

DESIGN BRIEF

Company Name:	Katie’s Cafe
Description of the Company:	Katie’s Café is a small family-owned chain of cafés in San Francisco, California, USA. The original Katie’s location in Noe Valley opened it’s doors in the summer 2006 after founder Katie Ricks decided to spread her love of delicious baked goods and quality coffee to the neighborhood she resided in.Katie’s in Noe expanded its menu to include full meals in addition to baked goods in 2007. Soon afterward in spring 2008 Katie’s opened a new location in Laurel Heights just north of the University of San Francisco. A third location in Cole Valley opened in winter 2011. Every item served at Katie’s Café is created from Katie’s own recipes, painstakingly crafted through years of baking for friends and family.
Katie’s Cafe Mission Statement:	To provide the best tasting drinks and treats to people who enjoy high quality and fresh ingredient products.
Address and Contact Information:	Katie’s Cafe Noe Valley 123 Elizabeth StreetKatie’s Cafe Cole Valley 301 Carmel StreetKatie’s Cafe Laurel Heights 800 Spruce Street
The Location:	Katie’s Cafe is a unique modern atmosphere that showcases the specialty drinks and desserts they have through captivating imagery on the walls. Their locations are in downtown San Fransisco California, which attracts a lot of visitors.
About the Customers of Katie’s Cafe:	Customers of Katie’s Cafe appreciate high quality goods and services. They are looking for a decorative atmosphere that provides them the satisfaction that they are looking for in a high quality drinks and desserts. They want a website that’s easy to use and that has a clean and modern style to it.
Intended Target Audience of the Katie’s Cafe:	Current cafe patrons and potential new customers.

Navigation Structure Flowchart:

Color Scheme:

Logo Options:

Common Page Items:

Main Navigation in the header
Logo 1 or Logo 2 in the header
Social Media Icons: Facebook, Instagram, Twitter
Secondary Navigation Bar in the Footer
Downloadable Menu Link (See assets)

ASSESSMENT

You will be graded according to the following criteria to earn a total of 75 points:

Criteria	Description	Points
Content	All content that was provided was used.	10
Requirements	All requirements were met: Pages were saved appropriately Page Titles were correct The site included images throughout The notes that are provided for each page were followed Common Page items are included on each page Each page includes a header, main area, and footer Links are all working The site used a template All styling is done in an external style sheet	10
Bootstrap	An adequate bootstrap layout is used for the site. The layout was divided into grids and columns. The site is responsive.	10
Page Layout	Effective and well organized. Layout of the main content area of each page is professional and contains an extensive variety of content types. Different types of pages vary in layout to best support the content and create visual interest.	10
Aesthetics	Design is exceptionally attractive, matches the topic and advances the purpose of the site. Overall site looks appealing and professional.	5
Images	All graphics are relevant and enhance the understanding of the topic. Images are well cropped and sized. Multiple images are used in the content area of every page. Images have alternative text.	5
Repetition/ consistency	Each page repeats graphic, color, font, and/or text elements in a creative, attractive way to make the site look unified	5
Homepage	Homepage is professional and aesthetically appealing. It is visually distinct from the rest of the site. It informs as to the nature of the site, engages users and encourages them to further explore the site.	5
Type	The Web page uses appropriate fonts that can be read by users using any Web browser. The text is consistent throughout the page with respect to color, size, typestyles, and alignment. The point sizes of the text are appropriately applied for headings and body copy.	5
Mechanics	All elements on the Web page are working properly. There are no broken links or missing graphic images. All required Web site design software features have been properly applied. The student demonstrates the ability to follow and understand technical instructions.	5
Time Management	Project was turned in on time and classroom time was used effectively.	5