DGME 169 CSS Spring 2013

2. Self Brainstorming
?
?
?
?
?
?
?
?
? ? ?

3. 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)

4. Then
Looking for Inspiration
http://www.siteinspire.com/
http://onetwentysix.com/blog/http://fffflckr.com/

5. Finally
I got my concept
Who I am…
What I like…
What I do…

6. This’s What I get

7. Talking About My Webpage
Simple
Clean ( as much as possible)
Easy to read
Easy to access
Modern Style

8. Frist Page ( Index or Home)
Divide into 3 parts
Top
Body ( Header and Navigations)
Bottom ( Photo Albums)

9. Top (Bar)
<div class="head-top">
<span class="right">
<a href="#">©Images by Saruta Bualop</a> </span>
<div class="clr"></div>
</div>

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

11. Bottom ( Photo Albums )

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

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

14. On the each story page
Photo
Video ( depends on
what I write about )
Arrows to go previous
story and next story Comment Box
http://www.freecommentscript.com/
Click to go back the
Main Blog Page

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

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

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

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

19. 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 !

20. Thank You for Your Time
Saruta ( Sandy ) Bualop