20

My Final DGME 169

Embed Size (px)

DESCRIPTION

DGME 169 CSS Spring 2013

Citation preview

Page 1: My Final DGME 169
Page 2: My Final DGME 169

Self Brainstorming

?

??

??

?

?

?

? ? ?

Page 3: My Final DGME 169

Don’t know what to do !

Portfolio ? – No ( I don’t have too much my works)

Company Website ? – No ( Nothing New about it )

Hotel Website ? - No ( I don’t have enough photos)

I want to do something that I like and feel fun

✔✔Home Page, Blog, Diary, Photos Book

- Yes ( That’s What I like)

Page 4: My Final DGME 169

Then

Looking for Inspirationhttp://www.siteinspire.com/

http://onetwentysix.com/blog/http://fffflckr.com/

Page 5: My Final DGME 169

Finally

I got my concept

Who I am…

What I like…

What I do…

Page 6: My Final DGME 169

This’s What I get

Page 7: My Final DGME 169

Talking About My Webpage

Simple

Clean ( as much as possible)

Easy to read

Easy to access

Modern Style

Page 8: My Final DGME 169

Frist Page ( Index or Home)

Divide into 3 parts

Top

Body ( Header and Navigations)

Bottom ( Photo Albums)

Page 9: My Final DGME 169

Top (Bar)

<div class="head-top">

<span class="right">

<a href="#">©Images by Saruta Bualop</a> </span>

<div class="clr"></div>

</div>

Page 10: My Final DGME 169

Body ( Header & Navigation)

<header><h1></h1><div

id="nav"></div>

<!--What's this all then-->

<div id="text1" class="lb-

overlay"></div>

<!-- End WTAT

<!--Get in Touch-->

<div id="text2" class="lb-

overlay"></div>

<!-- End GIT-->

</header>

Page 11: My Final DGME 169

Bottom ( Photo Albums )

Page 12: My Final DGME 169

Click and Show Large Images

For Photo Albums Part, Using CSS and JavaScript

Click to go

back main

albums

Click to previous photo Click to next photo

Page 13: My Final DGME 169

Page 2 ( Blog )

Have arrows to go back to

the main page ( First Index

Page )

Click on Photo or

Read more to get the

new page of that

story

Page 14: My Final DGME 169

On the each story page

Photo

Video ( depends on

what I write about )

Arrows to go previous

story and next story Comment Boxhttp://www.freecommentscript.com/

Click to go back the

Main Blog Page

Page 15: My Final DGME 169

Page 3 ( About me )

About Me or What’s this all then

Using the Lightbox

Click X to close the lightbox

Using Css for Lightbox

.lb-overlay

.lb-album

Page 16: My Final DGME 169

Page 4 ( Contact )

Contact or Get in touch

Using the Lightbox

Click X to close the lightbox

Using Css for Lightbox

.lb-overlay

.lb-album

Link to E-mail

Link to Facebook

Link to Instagram

Page 17: My Final DGME 169

The Problem that I face

The position ( all the time. , but it’s not to difficult)

The size of the page, big screen mess up my site ( still don’t get it very well, but I’m trying to fix and learn)

The lightbox code ( try many codes but not work, but finally Dave recommended me some code and it works ! Thanks a lot )

jQuery ( don’t get it, but I will)

And, Etc.

Page 18: My Final DGME 169

What I have learned ( from this class)

CSS ( a lot of new and cool code, design )

JavaScript ( Difficult but worth to learn )

jQuery ( Still don’t get it, need to learn more )

Sharing Experience in the classroom.

Friendships

Page 19: My Final DGME 169

The Last

Thank you everyone who has helped me, and

encouraged me.

Finally, I did finish my website.

I promise to myself I will continue learning and

doing my websites.

Hope everyone have a great time in Summer !

Page 20: My Final DGME 169

Thank You for Your Time

Saruta ( Sandy ) Bualop