C: Make a website, for beginners, open for questions

Time or subject based training

C: Make a website, for beginners, open for questions

Postby Daenerys » Tue Nov 16, 2010 10:32 am

Make a website, for beginners

Subject-based, intensive, open until January 31st 2011
CLOSED

Some sites were finished, some where not. Feel free to pm me if you need help. This workshop is done.

WHAT:
Based on a simple layout I am giving out for free, you will learn how to modify a layout, how to code a simple website and how to upload it to a webs.com (or similar) site. I'll also give tips and hints about updating, backups and keeping things organised. Includes CSS, Tables (yes) and Iframes (yes again).

Preview and download zip file

http://daenelia.webs.com/ is the work in progress on a free webs.com site.

WHO:
Three trainees will be accepted, who do not have a website yet. If you are currently using dA, a free template or just your Photobucket account you are eligible to sign up as well. If you have coded your own site before, this will be too simple.

PLEASE apply in this thread. I will likely accept the first 3 sign ups.

1. Umrae
2. -- empty
3. Twigg
WHO ELSE:
You may ask questions in this thread, even if you're not one of the trainees! Make your questions simple and to the point. If it can be answered in a short post, I'll answer.

HOW:
Based on the free layout I made, we'll decide what parts you will use for your own site and how you will modify the layout with code and graphics. I'll give 'assignments' for each individual trainee, based on their site and wishes. Trainees can ask questions in the thread or in PM (if they prefer).

WHEN:
This workshop has started. No more trainees! But if you have a short question about the layouts/html, ask and I will attempt to answer.
Last edited by Daenerys on Wed Feb 02, 2011 12:38 pm, edited 11 times in total.
Image Image
Five and Dae :: PixiStar Base Search :: The Sims Random Stories :: Daenelia's Ramblings
:: To hear with eyes belongs to love's fine wit ::
User avatar
Daenerys
Super star
Super star
 
Posts: 2391
Joined: Sun Jan 18, 2009 3:43 pm
Diamonds on hand: 953.00
Dolling Style: Tool and Pixel
Avatar Base: Mine.

Postby Umrae » Tue Nov 16, 2010 11:09 am

Sign me up! (I really don't know much about making websites, I've always used photobucket or blogs to publish my stuff).
Avi base is mine.
User avatar
Umrae
Supporting Role
Supporting Role
 
Posts: 211
Joined: Wed Sep 22, 2010 10:28 am
Diamonds on hand: 1,721.00
Location: Brazil

Postby Daenerys » Tue Nov 16, 2010 2:26 pm

Woah, you're quick! :D

Well, then we can start on assignment 1 for you. I don't have the layout quite ready yet, but that is actually a good thing. Now we can start a little slower.

Umrae, assignment 1:

a. Most dolls sites have a few pages with different things on them. Most have a homepage (with an introduction and some news updates), a page with dolls, an about page and a link page. You may have more ideas, but we'll try to keep it simple and organised. Can you list the pages you'd like to include on your site? And do you need to have separate categories for your dolls (such as Fantasy, Fashion, or maybe sorted by basemaker)? Try to stick to 5-6 'main pages' and about 4-5 dolls categories.

b. Some starter's coding! To make a website you really only need Notepad (on windows. I think the Mac has a similar program). A web page is written in HTML. Here is some basic HTML for your first web page. All you have to do is copy it into an empty Notepad page and save it as umrae.html.

Play around with the text and the tags, you can't break it. Each <tag> has to be closed again like so</tag>. Most tags are obvious. You can see the html page has a head and a body. It is the body-part that people see in their browser. <p> stands for paragraph, <b> stands for bold text, <i> stands for italics.

Code: Select all
<html>
<head>
<title>My First Site | Freedom Finally</title>
</head>

<body>
<p>Hello world!</p>

<p>This is Umrae's <b>first page</b>. You can write HTML pages in Notepad, and you can view them in a browser. There are many <i>browsers</i> these days.</p>

<p>Each paragraph of this text starts with a tag, a 'P' with brackets around it. An HTML page has many tags in brackets. The tags tell the browser how to show the text. HTML is a 'mark-up language', which basically means that plain text has been marked to be shown a certain way, using the tags.</p>

<p>Write your own text here!</p>

</body>
</html>


Once you have copied and saved it, you can double click on the file, and it will open in a browser as a web page.

c. Extra question, what browser do YOU mostly use, and which browsers do you have on your computer? And do you have Notepad?
Image Image
Five and Dae :: PixiStar Base Search :: The Sims Random Stories :: Daenelia's Ramblings
:: To hear with eyes belongs to love's fine wit ::
User avatar
Daenerys
Super star
Super star
 
Posts: 2391
Joined: Sun Jan 18, 2009 3:43 pm
Diamonds on hand: 953.00
Dolling Style: Tool and Pixel
Avatar Base: Mine.

Postby allpixeledout » Tue Nov 16, 2010 2:57 pm

Ooh, sign me up. :D
Image
User avatar
allpixeledout
Cast
Cast
 
Posts: 77
Joined: Fri Jul 23, 2010 10:03 pm
Diamonds on hand: 775.00
Location: America
Dolling Style: Pixel
Avatar Base: Base by DHF (site down)

Postby Daenerys » Tue Nov 16, 2010 3:11 pm

Wow! Another quick one! Well, we can largely copy the first assignment for you as well. But let's do this right :P

allpixeledout, assignment 1:

a. I can see from your dA that you don't have masses of dolls, yet. That means that for now, you don't have to worry about different categories to put your dolls in. But can you list 4-6 pages you would like to include on your site-to-be? Remember, only think up pages you will actually fill. It's such a waste if half a site is empty or has 'coming soon!' banners.


b. Some starter's coding! To make a website you really only need Notepad (on windows. I think the Mac has a similar program). A web page is written in HTML. Here is some basic HTML for your first web page. All you have to do is copy it into an empty Notepad page and save it as apo.html

Play around with the text and the tags, you can't break it. Each <tag> has to be closed again like so</tag>. Most tags are obvious. You can see the html page has a head and a body. It is the body-part that people see in their browser. <p> stands for paragraph, <b> stands for bold text, <i> stands for italics.

Code: Select all
<html>
<head>
<title>My First Site | Freedom Finally</title>
</head>

<body>
<p>Hello world!</p>

<p>This is Allpixeledout's <b>first page</b>. You can write HTML pages in Notepad, and you can view them in a browser. There are many <i>browsers</i> these days.</p>

<p>Each paragraph of this text starts with a tag, a 'P' with brackets around it. An HTML page has many tags in brackets. The tags tell the browser how to show the text. HTML is a 'mark-up language', which basically means that plain text has been marked to be shown a certain way, using the tags.</p>

<p>Write your own text here!</p>

</body>
</html>


Once you have copied and saved it, you can double click on the file, and it will open in a browser as a web page.

c. Some extra questions: What browser do you use? And name 2 or 3 dolls sites that you like! So we kinda know where you might want to go with your own site.

Any questions, just ask!
Image Image
Five and Dae :: PixiStar Base Search :: The Sims Random Stories :: Daenelia's Ramblings
:: To hear with eyes belongs to love's fine wit ::
User avatar
Daenerys
Super star
Super star
 
Posts: 2391
Joined: Sun Jan 18, 2009 3:43 pm
Diamonds on hand: 953.00
Dolling Style: Tool and Pixel
Avatar Base: Mine.

Postby allpixeledout » Tue Nov 16, 2010 7:46 pm

Pages:
-Home
-About Me
-Rules
-Dolls
-Resources
-Links


I don't really use dA that much. I've got a lot more dolls that that. xD

I use Internet Explorer.

And...hm...
I really, really love DHF's layout. And m o o n p i x e l.
Image
User avatar
allpixeledout
Cast
Cast
 
Posts: 77
Joined: Fri Jul 23, 2010 10:03 pm
Diamonds on hand: 775.00
Location: America
Dolling Style: Pixel
Avatar Base: Base by DHF (site down)

Postby Umrae » Wed Nov 17, 2010 6:40 am

Done, done.

Home
* Dolls
- Original
- Fan art
* Bases
* Props
* Kaoanis
* Adoptables
* Terms of use
* Contact / links

I use Firefox, mostly. I also have IE and Chrome.
Avi base is mine.
User avatar
Umrae
Supporting Role
Supporting Role
 
Posts: 211
Joined: Wed Sep 22, 2010 10:28 am
Diamonds on hand: 1,721.00
Location: Brazil

Postby Daenerys » Wed Nov 17, 2010 11:15 am

Just to make sure you get the zip file and the preview:

Preview and download zip file

http://daenelia.webs.com/ is the work in progress on a free webs.com site.

If you're not allowed to download a zip file (some parents or partners are creeped out by the idea), you can save each the preview site in your browser. Technically, you'd still have 'downloaded' something, but it wouldn't upset people.

General warning about downloading: I have an up-to-date virus scanner, but I can't be 100% sure I have not come across something that my virus scanner did not detect. Please, also use your own up-to-date virus scanner to scan files you download. Always.

Right. On with the show!

------
allpixeledout
I completely understand. I only have 10 dolls on my dA. I don't even have all my dolls on my site! My aim is to help you set up a site you can easily expand with new pages when you need to.

The DHF layouts are always amazing. But we'll go for something simple, with the ambition to become an amazing layout when you are confident about coding and graphics.

Umrae
Oww, fanart :) I actually made an example page called fan-art in the layout! If you look at the preview on webs.com in both IE and FF you will see they look pretty much the same. That's cross browser compatibility, which we aim for. You could look at the site in chrome and tell me if anything is really off or weird looking, compared to FF and IE... *must get chrome too*

allpixeledout, Umrae; second assignment

(it will be basically the same)

Now that you have made your first page (the copy, paste and save code!) you have experience the magic of seeing a web page come to life :P Now it is time to find webspace, if you like. You can register a free account on webs.com. It's easy, and it is free. It does have drawbacks, but for a first site, webs.com is perfect.

Next, you can also download the zipfile, and unzip it to your computer. Let me know if that is a problem. Make a folder where you will put ALL your web-stuff, just to be organised. Once the file is unzipped, you can double click on the 'index.html' file, to browse the site on your own computer.

Then you can open the index.html file in notepad (right click, 'Open with...'). You will see the little messages I put in there, that don't show up on the actual page. All the files in the zip have these notes. They will tell you what parts of the code do, and how you can modify it.

So, a, b, c:

A. Make a webs.com account for free (or find other webspace)
B. Download the zip file
C. Open the index.html page in Notepad and see the inside of the index page.

Let me know what your website address is (url), when you've downloaded the zip file, and if you could open the index page in notepad. Then we'll modify and edit the index page next time!

(We're still open for one more trainee! Easy to catch up now!)
Image Image
Five and Dae :: PixiStar Base Search :: The Sims Random Stories :: Daenelia's Ramblings
:: To hear with eyes belongs to love's fine wit ::
User avatar
Daenerys
Super star
Super star
 
Posts: 2391
Joined: Sun Jan 18, 2009 3:43 pm
Diamonds on hand: 953.00
Dolling Style: Tool and Pixel
Avatar Base: Mine.

Postby Umrae » Wed Nov 17, 2010 12:36 pm

http://thepixelcrate.webs.com/

This will be my address.

Files downloaded and opened with no problem.
Last edited by Umrae on Wed Nov 17, 2010 2:55 pm, edited 1 time in total.
Avi base is mine.
User avatar
Umrae
Supporting Role
Supporting Role
 
Posts: 211
Joined: Wed Sep 22, 2010 10:28 am
Diamonds on hand: 1,721.00
Location: Brazil

Postby Daenerys » Wed Nov 17, 2010 1:22 pm

Okay! I see you are using a template they provide. That's awesome, but we're going to need to access the part where we can upload out own HTML pages.

This FAQ file is about the site's settings. I seem to remember that once you switch to html, you can't switch back to using a template. So if you're worried about that, you may want to create a test account.

The setting to switch to html should be in Site Settings account, after you log in on the main page of webs. It's under More Settings, above 'delete this site' (don't hit that one!). After you switch, it should say this in your settings page:
Account Type: HTML Mode (Upgrade)

By switching to html, you can upload your own pages. One at a time. Which is slow, but we're going to upload 7-12 pages and some images. You may decide to link to your dolls on your photobucket account!

Umrea, assignment 3

Editing the index page. Now we get to the fun bit.


Code: Select all
<html>
<head>
<title>My First Site | Freedom Finally</title>
<!-- You can change the title if you like -->

<meta name="description" content="My First Site: Your Own Description Goes Here.">
<meta name="keywords" content="doll, dolls, dollz, digital dolls, pixel dolls, pixels, fashion, fantasy">
<!-- You can change the description text and keywords if you like -->

<link href="css/main.css" rel="stylesheet" type="text/css">
</head>


This is the header of your index page. It is the 'shell' in which the other pages, with dolls and stuff, appear in an iframe. An iframe is like a hole in a page, through which you can show other pages.

The reason I chose this form is that the index is static. Anything you put on it, like the links to other pages in your site, will always be there, and won't need to be copied to other pages. You can put a shoutbox here, later, or buttons for affiliates or sisters, or anything you want to always be in view of the visitor.

First, you can change the title :) You don't have to use the | and you can write anything you want there. It is what shows up at the top of your browser or on your taskbar when a page is closed like with Glam, right now, for me it says 'GLAM! - View topic ...'

My First Site | Freedom Finally can become 'My awesome doll site - look on my works, ye mighty, and despair!'

meta name="description" and meta name="keywords" is what is important for search engines. Google will read the description and show that when your sight shows up in search results. The keywords are words that your site are about. Mind you, they do have to match your actual content. If you write 'harry potter', 'daniel radcliff' and 'potter fiction' there, but your site is about how to bake bread, the search engine is not going to like it, and not list you in results.

Next:
Code: Select all
<link href="css/main.css" rel="stylesheet" type="text/css">


This last bit of the head is linking to your stylesheet, in the folder css. The main.css determines how your index page looks. The other css file is called 'frames.css' and rules the pages inside the frame. You can have as many separate css files as you like, or roll them all into one. But we'll get to that later!

This concludes the head-part.

The body part starts next.
Code: Select all
<body>

<!-- Freewebs Sticker -->
<script language="JavaScript" src="http://images.freewebs.com/JS/Freebar/bar_sideblack.js">
</script>

<!-- This is where the index page is created-->

<div id="main">
   <div id="header">
   <!-- In the header you can change the image url -->
   <img src="img/logo1.png" /><br /><br />

   <!-- LINKS go here copy the entire link tag for a new link, change the link name -->
   <a href="home01.html" target="inlineframe">Home</a> - <a href="dolls01.html" target="inlineframe">Dolls</a> - <a href="other01.html" target="inlineframe">Other</a> - <a href="about01.html" target="inlineframe">About</a> - <a href="links01.html" target="inlineframe">Links</a>
   </div>


I included the webs.com sticker in the code, but you can stick another in there later on.

There is an image in the code called 'img/logo1.png'. You can find the image in the folder 'img'. You can make your own logo image with a doll of your choice, or what ever you like. You can even give it a different name. But remember to change the name or link in the code as well.

The img-tag is short. It has no end tag! That's why the backslash is at the end of the tag />

<br /> is a break tag. It is a single tag as well. It ends the line, and puts what comes after it on the next line. You can use in in a <p> tag.

Code: Select all
<a href="home01.html" target="inlineframe">Home</a>


This is a navigation link on your site. It links to the home01.html page. It opens it in the target called 'inlineframe'. That is the iframe name, the hole in the page. Scroll down a bit and you'll find it. All your pages should open in this. Except if you're linking to other sites. Would be weird if Glam! opened in the hole in your index page...

Your task: Make links for your pages. Even if you don't know what you will call the html-files yet.

Home << you already have this one!
* Dolls
(- Original<< these will go on another page, so you don't have to include them)
(- Fan art<< these will go on another page, so you don't have to include them)
* Bases
* Props
* Kaoanis
* Adoptables
* Terms of use
* Contact / links

You can change the names of pages you won't use, for instance About can be changed into 'Terms of Use'.

Still with me? Am I going to slow or too fast? Any suggestions as to what you really want to do next?
Image Image
Five and Dae :: PixiStar Base Search :: The Sims Random Stories :: Daenelia's Ramblings
:: To hear with eyes belongs to love's fine wit ::
User avatar
Daenerys
Super star
Super star
 
Posts: 2391
Joined: Sun Jan 18, 2009 3:43 pm
Diamonds on hand: 953.00
Dolling Style: Tool and Pixel
Avatar Base: Mine.

Postby allpixeledout » Wed Nov 17, 2010 2:03 pm

Okay. I had no problems with the zip file, and my url is allpixeledout.webs.com :D

EDIT: Aah. I did the same thing Umrae did. I'll go fix that.
Image
User avatar
allpixeledout
Cast
Cast
 
Posts: 77
Joined: Fri Jul 23, 2010 10:03 pm
Diamonds on hand: 775.00
Location: America
Dolling Style: Pixel
Avatar Base: Base by DHF (site down)

Postby Daenerys » Wed Nov 17, 2010 2:16 pm

Allpixeledout: looks great already! Basically what I wrote for Umrae goes for you too :)

If you want to keep the template as Webs offers it, it's better to make another test account for uploading your handcoded site.

Allpixeledout, assignment 3
Read what I wrote for Umrae (wall of text)...

You can then change the title of your page/site in the code, write a short description and pick some keywords (up to 50, but you don't have to :P) and change the links in the navigation.

Pages:
-Home << you have that one already too!
-About Me << you can move the link
-Rules << you could rename Other to 'Rules'
-Dolls
-Resources << you need to copy one of the full link tags and paste it in the code.
Code: Select all
<a href="home01.html" target="inlineframe">Home</a>

Then rename it:
Code: Select all
<a href="resources01.html" target="inlineframe">Resources</a>

-Links

Any questions? Things that aren't clear?

I'll be back online tomorrow, going offline now to watch a film :) Have fun!

edit: I also changed the things on my layout at http://daenelia.webs.com/
The original is at http://daenerys.fiveanddae.com/glamworkshop/
Image Image
Five and Dae :: PixiStar Base Search :: The Sims Random Stories :: Daenelia's Ramblings
:: To hear with eyes belongs to love's fine wit ::
User avatar
Daenerys
Super star
Super star
 
Posts: 2391
Joined: Sun Jan 18, 2009 3:43 pm
Diamonds on hand: 953.00
Dolling Style: Tool and Pixel
Avatar Base: Mine.

Postby Umrae » Wed Nov 17, 2010 2:18 pm

allpixeledout wrote:Okay. I had no problems with the zip file, and my url is allpixeledout.webs.com :D

EDIT: Aah. I did the same thing Umrae did. I'll go fix that.


Lol, it's the default option. I didn't even see that there was an html option at first. I fixed that already and now I'm working on the assignment.

Link structure is fixed (but the only existing page is the Kaoanis one). I still have to make the images for the banner, background, etc.
Last edited by Umrae on Wed Nov 17, 2010 9:52 pm, edited 1 time in total.
Avi base is mine.
User avatar
Umrae
Supporting Role
Supporting Role
 
Posts: 211
Joined: Wed Sep 22, 2010 10:28 am
Diamonds on hand: 1,721.00
Location: Brazil

Postby Twigg » Wed Nov 17, 2010 3:29 pm

Can I sign up?
:D

I need me a website.
User avatar
Twigg
Super star
Super star
 
Posts: 719
Joined: Thu Jul 10, 2008 2:37 am
Diamonds on hand: 2,282.00
Dolling Style: Pixel

Postby Daenerys » Thu Nov 18, 2010 2:27 am

Welcome Twigg :D

Let's get this started!

Twigg: assignment 1, 2 and 3

:P

You can read Umrae's and Allpixeledout's first 3 assignments. Then we need some basics.

a. What browser do YOU mostly use, and which browsers do you have on your computer? Do you have one or two favourite websites?

b. Make a list of 4-6 pages you'd like to include, and some subcategories for your dolls (if you have more than 12 you want to include on your site).

c. Do play around with the example code, copied and pasted to notepad, then saved as twigg.html (I'm sorry I am not personalising it this time, too many walls of text already :P)

d. Download the zip file at http://daenerys.fiveanddae.com/
See the preview of the site at http://daenerys.fiveanddae.com/glamworkshop/

e. Create an account at webs.com, or find other webspace.

f. Edit the index.html file from the zip file, the way I pointed out in assignment 3 for Umrae and Allpixeled out.

g. Have a cuppa of tea... Nah, now you're up to speed.

I'll be online again in about 9 hours, so any questions will be answered in time. If this is going to fast, just tell me where you are, so I know your still working on it.

Umrae, if you want to work on making images, I'll give some pointers.

The logo img is a transparent png. I did it that way because it will be layered on top of a background image in the div layer called 'header'. The background colour of the pages inside the frame can flow out into that background image.
So if you want to think about the images, you could go and pick a colourscheme. Which means I'll be talking about the css files next.

But if you keep the logo image with a transparent background, you can go ahead and make that, because it will be separate from the actual background.

You can find a link to a colour scheme generator in the readme folder, in a file called 'colourscheme.txt'

That will be fun to play around with :)
Image Image
Five and Dae :: PixiStar Base Search :: The Sims Random Stories :: Daenelia's Ramblings
:: To hear with eyes belongs to love's fine wit ::
User avatar
Daenerys
Super star
Super star
 
Posts: 2391
Joined: Sun Jan 18, 2009 3:43 pm
Diamonds on hand: 953.00
Dolling Style: Tool and Pixel
Avatar Base: Mine.

Postby Umrae » Thu Nov 18, 2010 6:13 am

I think I'll work on the code for now, The images will take a lot of time and effort, and I've got too much stuff from college to do for now. But I think I've already got an idea of what the color scheme will be like. I'll get the hexadecimal values of the colors.
Avi base is mine.
User avatar
Umrae
Supporting Role
Supporting Role
 
Posts: 211
Joined: Wed Sep 22, 2010 10:28 am
Diamonds on hand: 1,721.00
Location: Brazil

Postby Daenerys » Thu Nov 18, 2010 10:47 am

Okay, status update so far:

Umrae
- link structure done
- uploaded site partially http://thepixelcrate.webs.com/
- created a new page with Kaoanis (yay for figuring that out!)

recommend: uploading the main.css file to the css-folder on webs, and uploading all the files from the zip file. That way, you can see what the site looks like while working on it.

allpixeledout
- no rush, but let me know if you have any questions.
- created site at http://allpixeledout.webs.com/

recommend: uploading all the files in the same structure as they are in the zip file. That means you have to create 3 new folders css, img and dolls, and put all the files in the right folder or the 'root' (that is your top folder, or base folder. On webs, it is automatically created, and has the standard index file in it. You need to upload your own index.html page over it.)

Twigg
- is reading and downloading the zip file ;)

-----
I'll just leave this for a day and wait for questions. I'll write out the next bit of the assignments tomorrow around this time.
-----

Going well :) Love to see that site grow, Umrae!
Image Image
Five and Dae :: PixiStar Base Search :: The Sims Random Stories :: Daenelia's Ramblings
:: To hear with eyes belongs to love's fine wit ::
User avatar
Daenerys
Super star
Super star
 
Posts: 2391
Joined: Sun Jan 18, 2009 3:43 pm
Diamonds on hand: 953.00
Dolling Style: Tool and Pixel
Avatar Base: Mine.

Postby allpixeledout » Thu Nov 18, 2010 3:04 pm

I edited the index file in Notepad.
Under manage files, there's a file named index.htm. Do I need to edit that, too?
Sorry if the answers obvious. I just woke up. :lol:
Image
User avatar
allpixeledout
Cast
Cast
 
Posts: 77
Joined: Fri Jul 23, 2010 10:03 pm
Diamonds on hand: 775.00
Location: America
Dolling Style: Pixel
Avatar Base: Base by DHF (site down)

Postby Daenerys » Thu Nov 18, 2010 4:23 pm

allpixeledout wrote:I edited the index file in Notepad.
Under manage files, there's a file named index.htm. Do I need to edit that, too?
Sorry if the answers obvious. I just woke up. :lol:


Webs automatically makes an empty index file. The one your edited should be uploaded, so that it over-writes that. So you can just use 'single file uploaded' and upload the index.html file you edited.

Then you can do the same for all the other files from the zip file.

Your site will be viewable for all, then. But you can also create your site offline, on your own computer. That's handy in case you ever want to do a new layout, and want to put that all online in one go.

But for now, it is handy to upload your unfinished site, so I can see where you are :P

You just woke up, I'm off to bed! :P If there are anymore questions or things that seem unclear, just ask them here. I'll see them tomorrow, and answer them! Night night!
Image Image
Five and Dae :: PixiStar Base Search :: The Sims Random Stories :: Daenelia's Ramblings
:: To hear with eyes belongs to love's fine wit ::
User avatar
Daenerys
Super star
Super star
 
Posts: 2391
Joined: Sun Jan 18, 2009 3:43 pm
Diamonds on hand: 953.00
Dolling Style: Tool and Pixel
Avatar Base: Mine.

Postby Daenerys » Sat Nov 20, 2010 3:48 am

Allpixeledout
I see you replaced the index.html file with the one from the zip file. For your site to show up properly, you need to upload all the other files as well. In site manager you can upload each separate html page (index.html, home01.html, etc) to the 'root' folder. That is where the index file is, right now.

Then you need to make 3 new folders. You can do this by clicking on the green button 'new folder'. Name them:
- css
- dolls
- img

Look at the files from the zip file, which you should have saved unzipped on your computer. In the files there are the exact three folders. Put the files from the folder called 'css' (main.css and frame.css) in the css-folder you made on Webs. Do the same for the other files in dolls and img.

If you go to your url http://allpixeledout.webs.com/, you should then see the actual site with the layout!

Umrae
Wow! :D
http://thepixelcrate.webs.com/, I am impressed! You've really gotten your teeth into it! I'm just going to let you do your own thing, but if something is unclear, just ask :)


Alright, I'm ready to write out assignment 4, so you guys can go forwards with stuff when you're ready. If you have any questions, just ask.

Assignment 4: links and making a new page


A typical link tag looks like this:
Code: Select all
<a href="http://www.url.com">Link text</a>


It's pretty easy to see what happens: the a href-bit calls the url, and the Link text-bit is where you can write the text people can click on to go to that link. Then the tag is closed with /a

(btw, on the index-page I made a typo with the link in the 'footer' at the bottom of the page. It's in the credit link... at the end.)

To make a link open in e new page or in an iframe, you need to add a target for the page to open in:
Code: Select all
<a href="http://www.url.com" target="inlineframe">Link text</a>


So: target= inlineframe means the browser finds the iframe called inlineframe and opens the page in that frame. That is how the other pages open in the 'hole' of the index.html page!

Now you know this, making new pages to appear in the iframe called 'inlineframe' is easy. If you have more than one iframe on your page, or other frames, you need to give each frame bit a name that is different. But we won't be doing that in this layout.

If you want to include links to other pages, like Glam!, you don't want that to open in your iframe... So you need to add another target:
Code: Select all
<a href="http://www.url.com" target="_blank">Link text</a>


The _blank-bit tells the browser to open the link in a new tab (or window, in older browsers). Use this to link to pages outside your own site.

Oh! One moe thing: if you don't like to have text as a link, but want to use an image or button, replace the Link text with an img-tag, inside the a href-tag:
Code: Select all
<a href="http://www.url.com" target="_blank"><img src="button.gif" border="0" /></a>


The border=0 bit removes the link-colour border around the image. If you actually want a line around the image, you can edit the 0 into a number (for the pixels of border) or remove the border bit.

Making a new page for the layout

You can either rename the links that link to the pages that come with the layout, and modify those pages. Or, you can create a new page to be linked to.

So if you have smilies you want to show off, you can pick a page to show them on. Or you copy and paste the code from one of pages to a new file. You can do this with notepad.

When you ave that new file, name it something sensible, like 'smilies01.html'. You then need to link to it from your main navigation links on the index page:

Code: Select all
<a href="home01.html" target="inlineframe">Home</a> - <a href="smilies01.html" target="inlineframe">SMILIES</a> - <a href="dolls01.html" target="inlineframe">Dolls</a>


You can now do this for all pages you want to add in the layout:

- make the page and save it (like 'smilies01.html')
- add the link to the index.html (<a href="smilies01.html" target="inlineframe">SMILIES</a> )

Before moving on to assigment 5, upload your whole site to webs.com Including your edited index.html and your new pages.

Next step will be: editing the home01.html file, so you can write an introduction, show your latest work and link to your dA or something.
Image Image
Five and Dae :: PixiStar Base Search :: The Sims Random Stories :: Daenelia's Ramblings
:: To hear with eyes belongs to love's fine wit ::
User avatar
Daenerys
Super star
Super star
 
Posts: 2391
Joined: Sun Jan 18, 2009 3:43 pm
Diamonds on hand: 953.00
Dolling Style: Tool and Pixel
Avatar Base: Mine.

Postby Twigg » Sat Nov 20, 2010 5:17 pm

Okay, here we go!
Trying to catch up as soon as possible.
Dx

Pages:

Dolls
- Shop Orders
- Original Characters
- Fanart
- Misc
Bases
Links ( Links in and links out )
About Me

I use Firefox. I also have Internet Explorer, but I never use it.

Some sites I like, based on the layouts are:
http://www.fainelloth.de/
http://www.starfireresearch.com/as/
http://www.kawaiihannah.com/pixelart/

http://twiggypop.webs.com

^ What I have so far. Unsure of what to do next. D:
I get confused kind of easily, sorry.
User avatar
Twigg
Super star
Super star
 
Posts: 719
Joined: Thu Jul 10, 2008 2:37 am
Diamonds on hand: 2,282.00
Dolling Style: Pixel

Postby Daenerys » Sun Nov 21, 2010 2:15 am

Twigg
You're catching up nicely!

The best thing to do next, is to make the html-files for the pages you want to include on your site.

Dolls
Bases
Links ( Links in and links out )
About Me

You can look at the basic html pages that came with the standard layout, and think which layout of those pages looks best for your page. The dolls.html page for instance has a table that you can use to show off dolls with the base credit neatly underneath it.

You can either make a new html-file in notepad, and name it the same as the links you created on the index.html page (like dolls01.html or bases01.html) or rename the existing html-files from the original layout. Then upload those, so the 'hole' in the index on your site gets filled ;)

And if you want to do something more creative and colourful: if you look in the folder with the readme.txt, you'll also see a file called colourscheme.txt. Maybe you would like to visit the site where the colourscheme came from, and mess about with some colours you like until you get a colourscheme YOU like.

The site allows you to save your colourscheme as a txt-file, with RGB- and hexadecimal values for colours. Or you can easily save it as a html-page! The thing that's important is that you get those 6 numbers that make up a code for a colour, like #FF7373, because that's what we will use in the css. It will help if you can also recreate that same colour in your graphics program, for when you make images for the layout.

So: make html pages, and mess about with colours!

And ask anything you're not sure about.
Image Image
Five and Dae :: PixiStar Base Search :: The Sims Random Stories :: Daenelia's Ramblings
:: To hear with eyes belongs to love's fine wit ::
User avatar
Daenerys
Super star
Super star
 
Posts: 2391
Joined: Sun Jan 18, 2009 3:43 pm
Diamonds on hand: 953.00
Dolling Style: Tool and Pixel
Avatar Base: Mine.

Postby Twigg » Mon Nov 22, 2010 12:24 am

Okay, sorry for being difficult, but I'm not quite understanding.
So, for the new pages, I just copy the html for the home page, then, and edit? Or, what?

And for the color thing, where do I upload these files to to implement the colors?

I'm sorry, I'm kind of html retarded. ):
User avatar
Twigg
Super star
Super star
 
Posts: 719
Joined: Thu Jul 10, 2008 2:37 am
Diamonds on hand: 2,282.00
Dolling Style: Pixel

Postby Daenerys » Mon Nov 22, 2010 10:48 am

When a student expresses confusion, the teacher is to blame.
~ Confucius... No, wait,, that's just me saying that. :P

True, though. So I'll try to explain better.

Making a new page
I made different types of pages in the basic layout. Each page, each html-file, works best for a certain section of your site. For dolls you can use the file 'cat_fanart.html', because it has a table layout with dolls in cells, and a place to give credit right underneath the doll.

But of you want to create a page for your bases, you may want to choose a different layout.

The 'links.html' file is the most open page. So if you copy all the html code into a new notepad file, and save it as 'bases01.html', you can use it later on for showing your bases.

But if you want to use the same layout of linking-through as in 'dolls01.html' (where you can put the name of each base set instead of the links to 'fanart'), you could choose to copy the html from dolls01.html into a new fresh notepad file and save it as 'bases01.html'.

You already created the link in your index.html file to a page called bases01.html. So you're good there.

That part is for creating a new page.
-----

Uploading the rest of the files
But you still need to upload the rest of the html-files to your website. And you can upload your new 'bases01.html' file once it is created.

You can also edit the text in the 'home01.html' file! It has some latin in it now (Lorem ipsum dolor sit amet, consectetur adipiscing elit.) That is filler text, so you can see what the site looks like with text. But you can write what you want where you see that text. Just make sure that each paragraph starts with <p> and ends with </p>. These tags are there to tell the browser 'This is a paragraph.' It will keep that text together.
-----

Colours
As for the colour scheme file, you don't have to upload that.

We will use the codes (#ffffff for instance) to change the codes in the css files. Which is what we'll do next, after you have created all the basic pages you want and they've been uploaded.

It's just to inspire you to keep working on the site, knowing what colours you will use.

Just take it one step at a time. But don't be afraid to try it. It can be very cool to see text you wrote in the code on an actual website, online. And knowing that other people can see it too! But you have to edit, and try and do.
Image Image
Five and Dae :: PixiStar Base Search :: The Sims Random Stories :: Daenelia's Ramblings
:: To hear with eyes belongs to love's fine wit ::
User avatar
Daenerys
Super star
Super star
 
Posts: 2391
Joined: Sun Jan 18, 2009 3:43 pm
Diamonds on hand: 953.00
Dolling Style: Tool and Pixel
Avatar Base: Mine.

Postby Daenerys » Mon Nov 22, 2010 2:32 pm

Update

I've now added a new page to my layout, for rules. I changed the navigation links. And I also edited some text and dolls into the 'home.html' page.

http://daenelia.webs.com/

If you are curious what I did in the code so far: rightclick on the page and choose 'view page source'. You will see the code in a window. If you want to see the page inside the frame, rightclick on the area in the frame in the middle of the page.

This way, you can see the code, and see what I did.

Remember: ask questions if things are not clear. If you don't understand something, it is not your fault; it is mine, for not explaining well enough.

(yeah, you can tell impatient and annoying teachers at school it's their fault if you dont understand something they were supposed to teach you ;) )
Image Image
Five and Dae :: PixiStar Base Search :: The Sims Random Stories :: Daenelia's Ramblings
:: To hear with eyes belongs to love's fine wit ::
User avatar
Daenerys
Super star
Super star
 
Posts: 2391
Joined: Sun Jan 18, 2009 3:43 pm
Diamonds on hand: 953.00
Dolling Style: Tool and Pixel
Avatar Base: Mine.

Next

Return to Actor's Workshops

Who is online

Users browsing this forum: No registered users and 1 guest

cron