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

Adobe Learn 

Katie’s Cafe

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:

flowchart

Color Scheme:
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