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
Friday, 22 July 2011
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
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
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>
<link rel="stylesheet" type="text/css" href="mycss.css" />
<head>
<h1>
Laura Cheung's Notes
</h1>
</head>
<body>
<body>
</body>
</html>
</html>
Then I made a css file named mycss containing
body
{
background-image:url('header2.bmp');
background-repeat:no-repeat;
background-position:center top;
}
{
background-image:url('header2.bmp');
background-repeat:no-repeat;
background-position:center top;
}
body {
background-color:black;
overflow: hidden; }
background-color:black;
overflow: hidden; }
h1
{
color:white;
}
{
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...
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
http://answers.yahoo.com/question/index?qid=20081015022523AAXpDE7
Anyway, turns out i couldnt add one because i had been praciticing random PHP things from this website http://www.google.com.hk/url?sa=t&source=web&cd=1&ved=0CCAQFjAA&url=http%3A%2F%2Finpics.net%2Fphpbasics.html&ei=tSkQTvXoI4GPmQXgoPzRDg&usg=AFQjCNF6DTOEIzjSV5UNMPXNDAA6Y2M56Q
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.
Playing around with backgrounds
I was messing around a while ago, making these backgrounds, following tutorials from this website. I learnt to make brushes, i learnt more about layers and filters. This will eventually come in handy when i start making a background for the website.
Saturday, 2 July 2011
Summer is here! Lets start.
So...LETS START. First, I'll summarise what i said in my video in bullet points
- It is currently summer
- I am going to learn PHP and MySQL and reinforce my Javascripting skillls
- I am making a website for my dad
- I need to think about colour themes, layouts
- Basically, i'll spend this summer practicing PHP mainly and figuring out the layout i want
From http://royaltutorial.com/photoshop-tutorials-for-web-design-and-layouts/
This would be a really cool button. A button with a simple shape that could just pop out of the ground when you over it. Though im sure there would be plenty of tough javascripting involved. Perfect |
From http://www.megatemplate.com/index.php/detail/1098.html?action=detail&catID=Flash_-_Industrial_and_History&productID=1098
and
http://www.100years.ualberta.ca/history.cfm
respectively
and
http://www.100years.ualberta.ca/history.cfm
respectively
I like the colours |
I kind of like that background. I could put photos of previous field trips in the background. Maybe have a timeline somewhere??? |
Rather messy, but personally, i love it. Unfortunately, it doesnt seem appropriate for a history PROFESSOR. |
Subscribe to:
Posts (Atom)