1 / 25

Basic Web Page Design Using WordPress

Basic Web Page Design Using WordPress. Dafni Greene Final Project – EDU 6617 Dr. Aisami. Goal: To provide user with basic understanding of WordPress and help him or her get started using the system.

idania
Télécharger la présentation

Basic Web Page Design Using WordPress

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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/.

More Related