1 / 21

Web Design Essentials: Layout, Tools, and Optimization Tips

Learn website layout basics, software tools overview, and proposal guidelines for creating an effective web presence. Explore HTML coding, WordPress, SEO, and more. Get hands-on with HTML code for bold, italics, underline, paragraphs, breaks, hyperlinks, and styling combinations. Dive into file transfer tools like Filezilla FTP and WordPress for building your site anywhere. Discover key elements like headers, body, footer, navigation, graphics, favicon, domain name, web hosting, and search engine optimization. Study examples and create download links with ease. Complete your homework assignments by finding interesting websites and starting your web design proposal. Get ready to unleash your creativity and skills in web design!

hilel-burnett
Télécharger la présentation

Web Design Essentials: Layout, Tools, and Optimization Tips

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. Elements of Webdesign Week 1 \\ Website Layout, Software Overview, Proposal Guidelines

  2. Website elements • Header-body-footer Header Body

  3. Website elements • Header-body-footer Body Footer

  4. Website elements • Header-body-footer • Navigation • Graphics • Favicon • Domain name

  5. Website elements HTML • http://www.roanmountain.com/statepark.htm WordPress/some online system • http://www.weather.gov/ • http://hmcpl.org/ • http://www.weatherbellmodels.com/weather/ • http://www.amazon.com/ • http://www.simonscat.com/ • http://www.optimumorg.com/dyn/index.php/it-main/it-webdesign/it-wd-portofolio/ Flash • http://www.thehobbit.com/index.html • Look for… • Header-body-footer • Navigation • Graphics/favicon • Domain name! • Webhost • Search engine optimization

  6. Software Overview Elements of Webdesign \\ Week 1

  7. Software • Filezilla FTP • WordPress • Serif Webplus X6

  8. Make a Website ANYWHERE Elements of Webdesign \\ Week 1

  9. Make a Website ANYWHERE • Write “HTML” (HyperTextMarkup Language) code • Bold • Italics • Underline • Paragraphs and breaks • Hyperlink • Examples on a website

  10. Make a Website ANYWHERE • Bold: <b> Code: <b>Howdy there! This is a bold line.</b> Output: Howdy there! This is a bold line.

  11. Make a Website ANYWHERE • Italics: <i> Code: <i>Howdy there! These are italics.</i> Output: Howdy there! This is a bold line.

  12. Make a Website ANYWHERE • Underline: <u> Code: <u>I’m underlined!</u> Output: I’m underlined!

  13. Make a Website ANYWHERE • Paragraphs: <p> Code: <p>The quick brown fox</p><p>jumps over the lazy dog.</p> Output: The quick brown fox jumps over the lazy dog.

  14. Make a Website ANYWHERE • Breaks: <br> Code: The quick brown fox<br>jumps over the lazy dog. Output: The quick brown fox jumps over the lazy dog.

  15. Make a Website ANYWHERE • Hyperlinks: <a> Code: The website is located <a href=“http://www.google.com”>download here</a>. Output: The website is located over here.

  16. Make a Website ANYWHERE • Combinations: Code: There once was a <i>man</i> who had a <b>dog</b>, and<br> <u>Bingo</u><br> was his name-o. Output: There once was a man who had a dog, and Bingo was his name-o.

  17. Make a Website ANYWHERE • Examples of these codes ON a live website • How to make a quick download link to a website or photo or video, show copy and paste

  18. Homework Assignment Elements of Webdesign \\ Week 1

  19. Homework Assignment • Find three interesting websites, email their links before next class • Read articles under week 1 on the class website (posted by Sunday) • Start milling ideas for the proposal, contact the client this week! • Explore software

More Related