my final dgme 169
DESCRIPTION
DGME 169 CSS Spring 2013TRANSCRIPT
![Page 1: My Final DGME 169](https://reader034.vdocuments.us/reader034/viewer/2022052508/559c306c1a28abb4518b4598/html5/thumbnails/1.jpg)
![Page 2: My Final DGME 169](https://reader034.vdocuments.us/reader034/viewer/2022052508/559c306c1a28abb4518b4598/html5/thumbnails/2.jpg)
Self Brainstorming
?
??
??
?
?
?
? ? ?
![Page 3: My Final DGME 169](https://reader034.vdocuments.us/reader034/viewer/2022052508/559c306c1a28abb4518b4598/html5/thumbnails/3.jpg)
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](https://reader034.vdocuments.us/reader034/viewer/2022052508/559c306c1a28abb4518b4598/html5/thumbnails/4.jpg)
Then
Looking for Inspirationhttp://www.siteinspire.com/
http://onetwentysix.com/blog/http://fffflckr.com/
![Page 5: My Final DGME 169](https://reader034.vdocuments.us/reader034/viewer/2022052508/559c306c1a28abb4518b4598/html5/thumbnails/5.jpg)
Finally
I got my concept
Who I am…
What I like…
What I do…
![Page 6: My Final DGME 169](https://reader034.vdocuments.us/reader034/viewer/2022052508/559c306c1a28abb4518b4598/html5/thumbnails/6.jpg)
This’s What I get
![Page 7: My Final DGME 169](https://reader034.vdocuments.us/reader034/viewer/2022052508/559c306c1a28abb4518b4598/html5/thumbnails/7.jpg)
Talking About My Webpage
Simple
Clean ( as much as possible)
Easy to read
Easy to access
Modern Style
![Page 8: My Final DGME 169](https://reader034.vdocuments.us/reader034/viewer/2022052508/559c306c1a28abb4518b4598/html5/thumbnails/8.jpg)
Frist Page ( Index or Home)
Divide into 3 parts
Top
Body ( Header and Navigations)
Bottom ( Photo Albums)
![Page 9: My Final DGME 169](https://reader034.vdocuments.us/reader034/viewer/2022052508/559c306c1a28abb4518b4598/html5/thumbnails/9.jpg)
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](https://reader034.vdocuments.us/reader034/viewer/2022052508/559c306c1a28abb4518b4598/html5/thumbnails/10.jpg)
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](https://reader034.vdocuments.us/reader034/viewer/2022052508/559c306c1a28abb4518b4598/html5/thumbnails/11.jpg)
Bottom ( Photo Albums )
![Page 12: My Final DGME 169](https://reader034.vdocuments.us/reader034/viewer/2022052508/559c306c1a28abb4518b4598/html5/thumbnails/12.jpg)
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](https://reader034.vdocuments.us/reader034/viewer/2022052508/559c306c1a28abb4518b4598/html5/thumbnails/13.jpg)
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](https://reader034.vdocuments.us/reader034/viewer/2022052508/559c306c1a28abb4518b4598/html5/thumbnails/14.jpg)
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](https://reader034.vdocuments.us/reader034/viewer/2022052508/559c306c1a28abb4518b4598/html5/thumbnails/15.jpg)
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](https://reader034.vdocuments.us/reader034/viewer/2022052508/559c306c1a28abb4518b4598/html5/thumbnails/16.jpg)
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](https://reader034.vdocuments.us/reader034/viewer/2022052508/559c306c1a28abb4518b4598/html5/thumbnails/17.jpg)
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](https://reader034.vdocuments.us/reader034/viewer/2022052508/559c306c1a28abb4518b4598/html5/thumbnails/18.jpg)
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](https://reader034.vdocuments.us/reader034/viewer/2022052508/559c306c1a28abb4518b4598/html5/thumbnails/19.jpg)
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](https://reader034.vdocuments.us/reader034/viewer/2022052508/559c306c1a28abb4518b4598/html5/thumbnails/20.jpg)
Thank You for Your Time
Saruta ( Sandy ) Bualop