Simple web design : getting started

1. Simple web design : getting started • This project will use Microsoft Word to design a web page. Information on the web page will incorporate the progress that has been made on previous projects. Projects 1 through 5 can be accessed from a student’s logged in page. Press button: and log in on the class web site. Then, use any information shown for this project.

2. Finding the Information • There is more than one way to retrieve information from previous projects. Click on the windows icon: and type in your name for the search box. This will display files saved with your name. Also, try typing in things like “project 1” to see all saved projects from a certain unit. Most files will be found in the Documents or on the Desktop.

3. Starting MSWord For Web Design • Microsoft Word can be used to create a simple web page. After opening up the Word program, click “Save As” under the Windows Icon in the upper left corner. Then, select the “Single File Web Page” option from the “Save as Type” drop down menu. The save as option is very powerful.

4. Copying Data from PowerPoint to Word • There are 3 ways to copy items from the All About Me Project to the MSWord web page. A student can right click on the slide in the “Slides” panel on the left side of the screen and select “Copy”. A student can press the “Print Screen” button on a PowerPoint window and paste the results to MSWord. A student can copy and paste individual elements from PowerPoint such as text boxes or pictures. Try a mix of these 3 to make the web page look professional.

5. Review • Simple Web Design: Getting Started • Finding the Information • Starting MSWord For Web Design • Copying Data From PP to Word

6. Adding previously written items • This project permits a student to use work from previously accomplished units. For example, there were at least 10 slides from Unit 1 so a student could take 3 or more of those slides for the summary on the web page. Make certain that each section has at least items. In some cases, the whole document fits well (like project 2). Students should choose what works best for their individual projects.

7. Using Word Art • Word art is a fast way to make any MSOffice document look nice. Click on “Insert” and “Word Art”. Word has different art than PowerPoint. A student can create the art in one program and then copy/paste it to another. Try adding Word art from PowerPoint to your word document to see if it suits the document better. With practice, word art can quickly make the page look great.

8. Adding Additional support text and support Graphics • It is okay to add additional supporting graphics, pictures, ideas or animations. However, keep in mind that this is sectioned in the final part of the rubric and can be worth a maximum of 20%. Don’t focus on the aesthetics until the other requirements have been met. Perform the functions designated by the rubric in order.

9. Viewing In Internet Explorer • In this project, students make web pages. If a student double clicks on a web page, it opens in a web browser. However, to edit the page, right click on the file and select to open with MSWord. Remember this if a document is not letting a student make changes. By opening a document in edit mode and not just double clicking on it, a student can edit a MSWord web page.

10. Review • Adding Previously Written Items • Using Word Art • Adding Additional Support and Text and Graphics • Viewing In Internet Explorer

11. Strategies for Successful Content • The web page must balance between having a lot of great information and not taking forever to load. Text tends to load very quickly so don’t be shy about writing a lot. Pictures tend to take a little longer. Animation and movies is the longest because they use the largest files. Try to have a balance in making the page look nice but not take forever to load.

12. Strategies for Successful Aesthetics • It is important that information be presented in a way that is not only informative but also aesthetically pleasing. People will close a page that looks ugly. People will close a page that does not have good information. First, make sure the information is strong. After the information is strong, a web page designer can work on making it look nice.

13. Managing Multiple Pages • Some times it is best to have information on a separate page so an Internet user can load less stuff. In our project, we will set it all up on one page. However, most commercial and organizational web sites have too much stuff to put in one page. To do this they have links to other pages that are all shown on a page called “Index”. The “Index” file functions like the index of a book except that it can use links to automatically get a person what they really want.

14. Links to your bff! • It is okay to add links to other student’s web pages and to the projects already created by a student. Find out the files names that you can link to by logging into a student account on the main class page. To refer to a friends page link in the format of “../scottbunin/1.pptx” to get to the PowerPoint made by student “scottbunin”.

15. Review • Strategies for successful content • Strategies for Successful Aesthetics • Managing Multiple Pages • Links to your BFF

16. Peer Review • When web pages get created on the Internet, the best ones get more links and are more likely to be found on things like a “google search”. To have a page that everyone visits, peers have to acknowledge that your page is worth something and link it from their page. Some times it is a good idea to link other people’s pages in hopes that they will reciprocate and put a link to your page on their page.

17. The Topic Sentence and How it Makes the Paragraph Easy • The first sentence in a paragraph tells the reader what the paragraph is about. If answering a question, rewrite the statement in question for. For example: “What did you learn in Unit 3?” could be answered by “In unit 3 students learned how to run a constitutional business”. Setting up a topic sentence makes the rest of the paragraph flow better.

18. Creating sentences based on the topic sentence Each body sentence makes a statement that supports the topic sentence. For example: • In Unit 3 we had to study the constitution to get the case answers correct • Then, we took the information and put it in Excel. • Finally, we summarized the information with both words and graphs. • Be sure to stay on the topic sentence and to use at least 3 examples or more.

19. Closing the Paragraph • Writing the final sentence of the paragraph is important to keep the flow of the text and let the reader expect a new topic. Each author will use their own style. One way to end a paragraph well is to restate the topic sentence in a summative way. Another is to talk about how you feel on a topic. For example: “We learned a lot about how to run a business in Unit 3.” “I really enjoy being the boss of a law firm.”

20. Review • Peer Review • The Topic Sentence and How it Makes the Paragraph Easy • Creating Sentences based on the topic sentence • Closing the paragraph

21. Organizing the Graphics • The pictures, colors, dividers, titles and sections of a web page usually look best with some congruency. Make it so that each section is divided in a similar way so that if a reader wants to find a certain section, it is easy to see where one part ends and another begins. Colors and flair can make things look nice. However, try to keep the style consistent or it will look like a little kid made the page instead of the mature young adults in this class.

22. Breaking into the Code • Even though this project is made in MSWord it still generates html code in the format for the Internet. To see the code, open it up in a web browser by double clicking the file and then click “view” and “source”. Inside the source code computer commands such as <imgsrc = “image001.gif“> tell the computer in a very specific language how to display an image. Eventually, students can learn how to write these commands them selves. For now, students save time by letting MSWord do it.

23. College Majors: Web Design • Any college student these days can benefit from being able to design on the web. However, some students can specifically focus their studies on how to create the latest and greatest web applications. The more powerful designs will need an understanding of Computer Science and Information Systems. Business majors, education majors, communication majors and many others will want some basic understanding so they can get their ideas out to the world.

24. Careers in web design • A new generation of web pages called “web 2.0” is becoming popular. These new pages not only give the user information, but allow people to interact in creative ways. Invent the newest Internet sensation such as “Facebook” and you too can go down in history with wealth and success. This powerful, developing technology can bring insurmountable success. However, inventing something that no one has seen before takes hard work and dedication.

25. Review • Organizing the graphics • Breaking Into the Code • College Majors: Web Design • Careers in Web Design