Website ss...

Mokonafan · **Posted:** Mon Sep 24, 2012 7:24 pm **(#1)**

I'm slowly but surly working on a website offline...
Here are 2 Screen Shots (ss):

Main Index Page:

Attachment:

indexpagess.png [ 1.36 MiB | Viewed 5804 times ]

Tutorial sub-page index:

Attachment:

tutss.png [ 94.84 KiB | Viewed 5804 times ]

What do you think? :X
Opinions welcomed!

~ God Bless ~

~ Moko

ZWard117 · **Joined:** Jan 20, 2012 **Posts:** 583

Great, I think for the bullets on the tutorials you could do different, like a hand drawn circle for a bullet, make it look more like its on a piece of paper.

Mokonafan · **Posted:** Mon Sep 24, 2012 9:24 pm **(#3)**

Hmm..Well, the bullets are part of the menu code, idk if I can change that image since it's actually not an image but code..I could look in to it though (unless some1 here knows. lol).

Thank you for the comment!

ZWard117 · **Joined:** Jan 20, 2012 **Posts:** 583

I do, you would have to use CSS to style the ul and li elements. If you want I can put together some code and examples for you?

Mokonafan · **Posted:** Mon Sep 24, 2012 10:05 pm **(#5)**

Hmm...Idk anything having to do with CSS, I use html...Idk how all this stuff works yet XD..
Is there a way to combine the 2 or something? :X
If there is, if you wanna do that then sure! I don't wanna bother you if it's too much trouble though. :X

ZWard117 · **Joined:** Jan 20, 2012 **Posts:** 583

Not at all too much trouble,
There are three things on the web.
HTML for the code, CSS for the style, and Javascript for the....well scripting.
I'll work on something for a little bit and if I finish it I'll post it here. I will also try to make it as simple as possible.
If you have your html page written, just post that in a code bracket or pm me it so that I can just work with realistic code rather than generated code.

Mokonafan · **Posted:** Mon Sep 24, 2012 10:40 pm **(#7)**

Oh...Okay! xD
Thank you for explaining that...I learned sth today! yay!

I use notepad ++ and it only allows one language at a time (from what I know of it, you'd know better than me lol)...So...the code will still work? :X
Thank you for your time!

ZWard117 · **Joined:** Jan 20, 2012 **Posts:** 583

Ya it would still work, it would just be styled. It would also allow for easier load times as you can create a small slice of the images and just repeat them for the background.

Mokonafan · **Posted:** Mon Sep 24, 2012 11:30 pm **(#9)**

For a patterned background I use smaller images, when it's got a picture within the pattern I make it a little bigger so it doesn't look blatantly repeated. xD

Kk, thank you!

Draconian · **Posted:** Tue Sep 25, 2012 6:29 am **(#10)**

I think the tutorial image meant to resemble notebook paper is a little overwhelming. It doesn't look anything like the real thing. The lines should be much much thinner and fainter. Remember they are only guides on paper not really design elements. You want people to be drawn to the subject matter and not the background image. Did you create that from scratch?

mariawendt · **Joined:** Sep 03, 2012 **Posts:** 171

Mokonafan wrote:

I use notepad ++ and it only allows one language at a time (from what I know of it, you'd know better than me lol)

I actually don't think that's correct, if you don't mind my saying so. I use Notepad++ and it allows for more than one language at a time (CSS and HTML).

But website is looking great!

Mokonafan · **Posted:** Tue Sep 25, 2012 10:20 am **(#12)**

Draconian wrote:

I think the tutorial image meant to resemble notebook paper is a little overwhelming. It doesn't look anything like the real thing. The lines should be much much thinner and fainter. Remember they are only guides on paper not really design elements. You want people to be drawn to the subject matter and not the background image. Did you create that from scratch?

Which image are you referring to as the tutorial image?
The button on the main index page, the button to direct you to a tutorial on the tutorial index page, the header to the tutorial page, or the background? xD
Or am I proving your point by the fact that there are too many images to know which you are referring to? xD

Yes I made the whole thing myself (Except the video screen image in the media button, that is a screen shot).
Thank you for the comment.

@Mariawendt:
You'd probably know better than me, so I'll take your work for it. xD
Thank you for the comment/compliment on the website! :tyspin

ZWard117 · **Joined:** Jan 20, 2012 **Posts:** 583

Still working on some code for you, testing it out tomorrow and I believe Drac was referring to the Background, I think its fine though, but Drac does bring up some good points.

Mokonafan · **Posted:** Thu Sep 27, 2012 11:26 am **(#14)**

Ooo okay, thank you for you time!
I figured it was the back ground in the end, so I lightened it and it looks good both ways.

Odinbc · **Posted:** Thu Sep 27, 2012 3:48 pm **(#15)**

Mokonafan wrote:

Oh...Okay! xD
Thank you for explaining that...I learned sth today! yay!

I use notepad ++ and it only allows one language at a time (from what I know of it, you'd know better than me lol)...So...the code will still work? :X
Thank you for your time!

I think it's great your using Notepad++ to learn HTML, that's the only way to go. CSS is something you should be using as well. As mariawendt pointed out both HTML & CSS work when you choose HTML language in Notepad++.

mariawendt wrote:

I actually don't think that's correct, if you don't mind my saying so. I use Notepad++ and it allows for more than one language at a time (CSS and HTML).

I agree with Drac that you should tone down the notebook background.

Draconian wrote:

I think the tutorial image meant to resemble notebook paper is a little overwhelming.

I see ZWard117 is helping you with some code. If you need any more help send me a PM.

ZWard117 wrote:

Still working on some code for you, testing it out tomorrow and I believe Drac was referring to the Background, I think its fine though, but Drac does bring up some good points.

One more thing to think about; once you get your basic web site design in place you can always use OpenOffice Writer as a WYSIWYG Editor (use Web view) for quicker content creation.

Mokonafan · **Posted:** Thu Sep 27, 2012 7:28 pm **(#16)**

What is a "WYSIWYG Editor"...I have opened office..I didn't know I could use it for web designing though. LOL!

Shows you what I know. xD
K so CSS works in the HTML thingy there..Okay! Thank you!

Thank you for all the help!

And I made the notepaper background a bit lighter so it's not so overwhelming.

b10h4z4rd · **Posted:** Thu Sep 27, 2012 9:05 pm **(#17)**

Quote:

What is a "WYSIWYG Editor"...

WISYWIG = What you see is what you get.

http://en.wikipedia.org/wiki/WYSIWYG

ZWard117 · **Joined:** Jan 20, 2012 **Posts:** 583

Code: Select all

<style>
ul
{
list-style-type: none;
padding: 0px;
margin: 0px;
}
.Handdrawn li
{
background-image: url(bullet.png);
background-repeat: no-repeat;
background-position: 0px 0px; 
padding-left: 35px; 
}

</style>




<ul class="Handdrawn"><li> Example Bullet text and link</li></ul>

Now you could do exactly what I have above, it will work. A better option would be to make a .css file and link to it in your header like so,

Code: Select all

<head><link rel="stylesheet" href="LINKTOCSS.css"/></head>

Mokonafan · **Posted:** Fri Sep 28, 2012 4:10 pm **(#19)**

Ooo Okay, I'll try that out! Thank you for your time and effort!

ZWard117 · **Joined:** Jan 20, 2012 **Posts:** 583

Ya not a prob, with the bullet.png, would be a link to whatever image you would use.