Friday, 22 July 2011

Thinking about image galleries

Well today I was brainstorming image galleries in my notebook. I sketched out ideas and annotated them. Probably not the best way to do things but my mind works better if I write things down. Most of the time, writing things down helps me remember them.(I'll upload these sketches later) Then I decided to go look at other people's ideas at http://vandelaydesign.com/blog/web-development/jquery-image-galleries/
 Most didnt really strike me as what i wanted apart from a few of them. I shall later sketch these in my notebook and add any ideas in there as well. My little notebook is on it's way to becoming a full fledged book full of brainstorms and ideas

Monday, 11 July 2011

Chatbox tutorial

Today i followed a tutorial from
http://www.dreamincode.net/forums/topic/44808-simple-text-chat-box/
to make a chatbox. It was ridiculously difficult for me. So, I gave up halfway through. I'll go back to it when I'm better at PHP

Sunday, 10 July 2011

Client Feedback

I showed my dad my mini project and asked him about whether he thought this kind of layout would be okay for his website. He liked it a lot. I'm planning on making a minimum of three layouts and asking him to pick his favourite.

Did i mention that it was a kind of dropdown like thing? Here on my mini project, making a website for my notes, there is a drop down menu for science, languages, humanities and others. When you click on Science things drop down and the others move down to make space for it. This is similar to what Mr Dickson once showed us in our last lesson.

Saturday, 9 July 2011

JQuery navigation menus

I found many excellent tutorials on J query navigation menus...
http://www.google.com.hk/url?sa=t&source=web&cd=2&ved=0CCUQFjAB&url=http%3A%2F%2Fwww.noupe.com%2Fjquery%2F45-jquery-navigation-plugins-and-tutorials.html&ei=OUMZTrKsEYuImQWwy8UK&usg=AFQjCNEoEhG5izD5RpLTC_82FpxKWDb_Zw
I particularly like http://tutorialzine.com/2009/12/colorful-content-accordion-css-jquery/

So i copied and pasted chunks and started editing it. It feels like cheating but it works. It used to be in the center. I changed it by editing the code

ul.container{
 /* The topmost UL */
 width:240px;
 margin:0 auto;
 padding:50px;
}

to...
ul.container{
 /* The topmost UL */
 width:240px;
 margin:0 auto;
 padding:50px;
position:absolute;
left:0px;

}
so that it would be on the left instead of the center. I was unconfident about this and had to check it http://www.w3schools.com/css/css_align.asp

Tuesday, 5 July 2011

YES I DID IT

Well, after a lot of messing around and experimenting, i finally did it.

This is kind of what i wanted to achieve. Only....i think the lines could be a bit more wavy...and i should probably center the text. Okay let me say how i made this...
First, i followed a tutorial from http://psdlearning.com/2008/06/luminescent-lines/#more-45 to create the lines. Then, i stretched out the image a lot. Its width is 7000 pixels and height is 231 pixels. Next time, if i ever do this again, i'll make the lines more wavy and the rainbow needs to be denser so im not only seeing blue.
Then...i made an html file in notepad that contains
<html>
<link rel="stylesheet" type="text/css" href="mycss.css" />
<head>
<h1>
Laura Cheung's Notes
</h1>
</head>
<body>
</body>
</html>
Then I made a css file named mycss containing
body
{
background-image:url('header2.bmp');
background-repeat:no-repeat;
background-position:center top;
}
body {  
background-color:black;
 overflow: hidden;  }
h1
{
color:white;
}

By the way, header2 is what i named my image and i saved it as bmp because i like bmp.

CSS background images

Well, today, i started off looking for webhosts that supported PHP and MySQL. I found one
http://www.000webhost.com/
I felt like trying MySQL but....it looked really awkward and scary...jQuery looked really awkward and scary too. So i went back to the basics. CSS and HTML. So, i thought i'd give myself like a mini project to do. I decided that my mini project was going to be making a website for my notes. So...i wanted a header with a different background...but i forgot a lot of things. I found out how to embed my css into my html file here
http://www.w3schools.com/html/html_css.asp
<link rel="stylesheet" type="text/css" href="mystyle.css" />

and then i had to check how to put my image in.
http://www.w3schools.com/css/css_background.asp
body
{
background-image:url('img_tree.png');
}

...but...turns out it was too small! I then found out that there was a value called an "em" which changes the size of things in css.

I then took a look at this website http://www.google.com.hk/url?sa=t&source=web&cd=2&ved=0CCEQFjAB&url=http%3A%2F%2Fcss-tricks.com%2F766-how-to-resizeable-background-image%2F&ei=bOQTTsSnJeGhmQW-4dGbDg&usg=AFQjCNFxtMMTYzAwnOniWXxcDN8eGU9BMw which was mainly about Jquery...i completely did not understand. So i gave up and messed around by myself...and i got this...


Strangely enough theres a white space in between my wannabe header and my window. I need to fix that...

Sunday, 3 July 2011

PHP Basics

Well, today i took a look at making MySQL databases on XAMPP. I searched a bit and found this.
http://answers.yahoo.com/question/index?qid=20081015022523AAXpDE7
  

and i'd lost the original page. Luckily, i'd copied it before playing around in notepad, so i got it back. MySQL databases looked kind of scary to me so i didnt try to make one yet....

This was the stuff i had to copy and paste back


Okay, I shall now explain how to work XAMPP. First install it, of course. I was stupid and didnt ask it to put a shortcut on my desktop so i had to run it by going to start, run and typing C:\xampp\xampp-control.exe to get that little thing up in this screenshot


Then by clicking on admin on the first one, it will bring local host, a web page. Near the bottom, it says PHPMyAdmin. By clicking there, you can add a MySQL database.