WEB+DESIGN

These are your notes for our brief Web Design unit.

=**MAY 24-25: CONTENT TIME!**=


 * Web content ** is the textual, visual **content ** that is encountered as part of the user experience on websites. It may include—among other things—text, images, sounds, videos and animations.


 * READ DIRECTIONS MULTIPLE TIMES for understanding. You have much work to do in just two days, so get busy right away.**

For the next two days, you will COMPLETE your **content** for a FIVE PAGE WEB SITE. You will not be working in code, but in Drive.

=First, you need a Google Drive Doc (NOT shared with me) entitled, **Web Page Planner**.= =Periods 4-6 created their file on Monday, but periods 1 and 2 did not.=

Content for my Web Pages (5) - and descriptions of images to be used on each page
 * //At the top of the document, type://**

Then type: **Home - index.htm.** Under this will be the content for your Web site's Home page (Home page file is ALWAYS called index)

Be certain to write descriptions of images to be used on your home page. Unlike a presentation where one large image is used, you can put a few on each Web page. Use Drive's copyright free image search if you would like to add more than what is in your presentation. Using your speaker notes and Farm Project Presentation, copy and paste content and type new content if need be. List all images to be used on this page.

Once you think that you have enough information and images to make it necessary for the user to scroll to see it all, then you can move on to your next pages.

From the list below, OR from your own mind, choose FOUR MORE PAGES for your site. This list is just for IDEAS. You can certainly use your own.
 * THINK** about what pages you could make that you already have content for!

Events - events.htm (birthday parties, weddings) Recipes - recipes.htm About Us - about.htm Our History - history.htm Food - food.htm Products - products.htm Employment - employment.htm Jobs - jobs.htm Contact Us - contact.htm (map and written directions) Location(s) - location.htm (map and written directions) Directions - directions.htm (map and written directions) Growing Tips - growing.htm Start Your Own Farm - start.htm Hours of Operation - hours.htm Market - market.htm Farm Stand - stand.htm Where to Buy - buy.htm Build - build.htm Tour - tour.htm Plant Info - plant.htm Farm Fresh Food Benefits - fresh.htm Classes / Educational Opportunities - learn.htm Challenges - challenges.htm FAQ - faq.htm - Frequently Asked Questions (always a good choice) must have a MINIMUM of TEN questions and answers - no yes/no answers, always explain. Pros and Cons (of farm life) - pandc.htm
 * EXAMPLE of faq:** Q.: **Do you give farm tours?** A.:** At this time, due to the cost of insurance, we cannot offer tours.

Many of you will need to get more images from Drive to make your pages really interesting. DO NOT choose more images until you have FINISHED typing the TEXT portion of content for all FIVE pages in your Web Page Planner document in Drive.

Once you have chosen your FOUR pages, for a total of FIVE, including index.htm, get busy! Here's how:

 * Webpage Content Template**


 * Pre-Writing Questions:**

 What is the goal of this page?

 Which audience/persona is this page targeting?

 Which phase of their buying cycle is this page addressing?

 Based on the topic you’re covering, what are the 3 primary benefits you want to communicate?

What keywords and phrases do you need to include?


 * Page Headline / Title For example, About Us**

First paragraph – What is the ONE thing you want the reader to understand after they’ve read the copy? This ONE thing should be captured in the first couple sentences followed by a summarization of the benefits on the rest of the page. This paragraph should also include the payoff (linked call-to-action). Bolded Sub-Headline (Benefit #1) summarize the first main benefit discussed in the following paragraph, and include keyword/phrase if possible)

Back up the main benefit with supporting point.

May use bullets to highlight some features or additional points. Bolded Sub-Headline (Benefit #2), summarize the second main benefit discussed in the following paragraph, and include keyword/phrase if possible)

Back up the main benefit with supporting point.

1. May use a numbered list

2. To highlight information

3. In an easy-to read, step-by-step format. Bolded Sub-Headline (Benefit #3), summarize the third main benefit discussed in the following paragraph, and include keyword/phrase if possible)

Back up the main benefit with supporting point.

Bolded, Linked Call-to-Action Line (provide clear direction as to where the reader should go next)

Is the page content 250 to 500 words?  Is the headline clear and catchy?  Is this piece of content relevant to your target audience/persona? Does it address at least one of their problems and provoke them to take the next step (call-to-action)? (Give your audience a charge!) Have you used short sentences and paragraphs and broken up paragraphs with subheadlines?  Have you stated your main point in the first couple sentences?  Is the content conversational? Are you addressing the reader as “you”?  Is it interesting?  Is the piece free of typos and grammatical errors? (hint: have someone else read it)  Is there a clear call to action?
 * Post-Writing Checklist:** 


 * MAY 23 - COLOR!**

Intro to hexadecimal code/numbers: @http://www.w3schools.com/colors/colors_picker.asp

HEXADECIMAL CODE/NUMBER: is a 6 digit code used to identify a color New attribute (must be INSIDE a tag): bgcolor="000000" Tags in which to use bgcolor:

- rarely

Tables are clear until you give them bgcolor.


 * VALUE:**




 * HUE:**



**HTML**: HyperText Markup Language

**URL**: Uniform Resource Locator (the Web address of a Web site)


 * Web pages are just text. **

 Opening HTML Tag  Closing Body Tag

< : Opening bracket > : Closing bracket

 Table Row Tag  Table Data Tag (cell)

= SKELETON WEB PAGE CODE (typed in Notepad and Save As **skeleton.htm)**: =

Skeleton Web Page Code looks like this when you go to your task bar (bottom of screen) and click Files>Rt Click>Open with>Chrome:


==
 * Default Web Layout Code (DWL): **

=**Your DWL will look like this in a browser:**=