Basic Web Page Design Using WordPress

1. Basic Web Page DesignUsing WordPress Dafni Greene Final Project – EDU 6617 Dr. Aisami

2. Goal: To provide user with basic understanding of WordPress and help him or her get started using the system. Objective: To provide user with knowledge of WordPress that will enable him or her to design a basic webpage.

3. Student Objectives Objective 1: Student will be able to give a brief explanation of what WordPress is and how it can be used Objective 2: Student will be able to create a static web page in WordPress Objective 3: Student will be able to add text to the web page Objective 4: Student will be able to add video to the web page Objective 5: Student will be able to add audio to the web page Objective 6: Student will be able to add links to the web page Home

4. Overview • Lesson 1- IntroductionLesson 2 - Get StartedLesson 3 – Create pageLesson 4 – Add TextLesson 5 – Add VideoLesson 6 – Add AudioLesson 7 – Add LinksLesson 8 – Conclusion Home

5. 1. Introduction Home WordPress is a website that offers blog posting for users You can use WordPress to create a website Upgrades are available for a price Best of all – basic design is FREE!

6. 1. Introduction (continued) Home http://wordpress.com/

7. 2. Get Started • Go to WordPress.com • Click on 24/7 support link at bottom of page • Click on Sign Up & Activate account https://en.wordpress.com/signup/ • Fill out one page form Home

8. 2. Get Started (continued) • Create Username • Create password • Enter e-mail address Home

9. 2. Get Started (continued) • Select URL such as USERNAME.wordpress.com • Note: Since we are creating webpages for the department your URL should reflect program name in place of user name Home

10. 2. Get Started (continued) Home

11. 3. Create Page • WordPress is set up for a default blog setting • To create a webpage you must create a static page • Login to your WordPress account • You will see the Dashboard Home

12. 3.Create Page (continued) • Click Pages, Select Add New Page link • Title the page with the program name or Home • Type the content you want displayed • Click Settings, Reading • Choose static page and save Home

13. 3.Create Page (continued) Home

14. 4. Add Text • Before adding text, go to dashboard menu • Select appearance, then select theme • The theme you choose will affect your text options • Select Pages, then Add New link Home

15. 4.Add Text (continued) • The screen will prompt you for a title • There will also be a default Text Box for you to enter text • Make sure you choose text that is readable for your audience Home

16. 4.Add Text (continued) • Square serifs are often used in educational materials (Georgia – designed specifically to optimize screen reading) • Many people prefer Sans Serif for computer presentations (Trebuchet, Verdana) • Georgia The quick brown fox jumped. • Trebuchet The quick brown fox jumped. • Verdana The quick brown fox jumped. Home

17. 5. Add Video • Adding video is easy in Wordpress • To embed a YouTube video, copy the video’s URL from browser • Go to pages editor and paste URL • Click on upload video icon Home

18. 5. Add Video (continued) Home You can embed videos from the following sources into WordPress for free: Blip.tv DailyMotion Flickr Video Google Video Kyte.tv LiveVideo PodTech Redlasso

19. 5. Add Video (continued) Home You can embed videos from the following sources into WordPress for free: Splashcast TED Talks Viddler Videolog Vimeo Vodpod YouTube

20. 6. Add Audio • If you wish to add audio files to your webpage, then you would need to buy and add a space upgrade • Full directions can be found here http://en.support.wordpress.com/media/media-add-new/This option allows you to upload mp3, m4a, wav, and ogg files from your media library Home

21. 6. Add Audio (continued) • Free audio version – Find a mp3 file on the internet (make sure it is FREE for sharing/use!) • Upload an mp3file from the internet and link to it using audio shortcode • Go to page editor and switch to HTML view • Next, enter the shortcode, which looks like this: [audio ], with the address inside. • Example:[audio http://wpcom.files.wordpress.com/2007/01/mattmullenweg-interview.mp3] Home

22. 7. Add Links • While in your Page editor, select text that you wish to link • After you highlight text, a link icon will appear • Click on the link icon Home

23. 7. Add Links (continued) • Enter the URL you wish to link to in the popup box that appears • Enter title if desired • Click update and the text will turn blue to signify the link is active Home

24. 8. Conclusion Home WordPress is very easy to use It is a free service You can create a nice webpage with basic elements such as text, video, audio, and links

25. References Aisami, R. EDU 6617 Graphic Design In Multimedia. Retrieved from Lecture Notes Online Web site: http://troy.blackboard.com/webapps/portal/frameset.jsp?tab_tab_group_id=_17_1&url=%2Fwebapps%2Fblackboard%2Fexecute%2Flauncher%3Ftype%3DCourse%26id%3D_266573_1%26url%3D. Lohr, L.L. (2008). Creating Graphics for Learning and Performance. Upper Saddle River, New Jersey: Pearson Education, Inc. WordPress support pages. Retrieved from http://en.support.wordpress.com/.