24
WEB DESIGN BASICS

Web design basics_06

Embed Size (px)

DESCRIPTION

The 6th and last slideshow from the Web Design Basics course.

Citation preview

Page 1: Web design basics_06

WEB DESIGN BASICS

Page 4: Web design basics_06

01:36 AM 4

Jump to Top

Write your post;

Switch to the Text Editor;

Add <a id="top"></a> at the beginning of the post;

Add <a href="#top">top</a> at the end of the post.

Page 5: Web design basics_06

01:36 AM 5

Variations

Variation in <a href="#top">top</a> will change the name under which your

page jump link will be displayed.

<a href="#top”>Top of the Page</a><a href="#top">Jump to Top</a><a href="#top”>Go Up</a>

Page 6: Web design basics_06

01:36 AM 6

Now lets complicate things a bit…

Take a typical Wikipedia page:

Montreal

Page 7: Web design basics_06

01:36 AM 7

So how do we do that?

Page 8: Web design basics_06

01:36 AM 8

Let’s start by creating a sample page or postContents: Introduction Arguments Conclusion

IntroductionLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

ArgumentsLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

ConclusionLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

Page 9: Web design basics_06

01:36 AM 9

Make sure to chose an element for your headings/titles!

Page 10: Web design basics_06

01:36 AM 10

This is what your post/page text should look like in the Text Editor:

Contents:<ol>

<li>Introduction</li><li>Arguments</li><li>Conclusion</li>

</ol><h2>Introduction</h2>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean

commodo ligula eget dolor. Aenean massa.<h2>Arguments</h2>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean

commodo ligula eget dolor. Aenean massa.<h2>Conclusion</h2>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean

commodo ligula eget dolor. Aenean massa.

Page 11: Web design basics_06

01:36 AM 11

Let’s now modify the elements IDs:

<h2>Introduction</h2> becomes <h2 id="introduction">Introduction</h2>

<h2>Arguments</h2> <h2 id="arguments">Arguments</h2>

<h2>Conclusion</h2> <h2 id="conclusion">Conclusion</h2>

Page 12: Web design basics_06

01:36 AM 12

Lastly, link the element IDs to the Content list

Page 13: Web design basics_06

01:36 AM 13

Jumping to another page<a

href="http://startingmyownwebpage.wordpress.com/">Go to Home</a>

Broken down:

<a href="address of your page">Display Name of Your Link</a>

Page 14: Web design basics_06

01:36 AM 14

The More Tag Command

<!--more-->

Page 15: Web design basics_06

01:36 AM 15

Read More

<!--more-->

<!--more But wait, there's more!--><!--more Read More-->

<!--more See Full Post-->

Page 16: Web design basics_06

01:36 AM 16

A few Examples

http://startingmyownwebpage.wordpress.com

Page 18: Web design basics_06

01:36 AM 18

Themes that support Excerpts

Blix Fauna Flower Power Hemingway Steira Supposedly Clean Sweet Blossoms

Page 20: Web design basics_06

01:36 AM 20

Category Pages

Page 22: Web design basics_06

01:36 AM 22

Search Engine Optimization

Include any keywords that people might use to the search for your site in the content you post, especially first paragraphs and headers.

Use the Alternate Text space to describe relevant content using keywords.

Keep the site updated.

Page 23: Web design basics_06

01:36 AM 23

Publicize Your Site

E-Signatures, business cards, letterheads

Take advantage of social bookmarking sites, such as Del.icio.us, StumbleUpon, Digg, Reddit, and Pinterest

Take advantage of social media sites, such as Facebook, Twitter, Flickr, LinkedIn, YouTube, Google+

Page 24: Web design basics_06

01:36 AM 24

More…

5 Ways to Promote Your Website