How to create a MOC Page: A LEGO® creation by John Daniels : MOCpages.com

How to create a MOC Page

Rate it

Add a comment

Zoom in

I don't know if anyone has ever made a tutorial like this. I hope I can make your creation uploading a-lot easier.

About this creation

I will break this into multiple easier to understand sections.

1 Uploading photo's

2 Text and spacing

3 Posting your page

4 HTML for these links

Section one

Uploading photo's and keeping track of them (this will come in handy later).

I won't go into taking the photo's but here is a link.
Sariel's photo tutorial

Click add photos when the window comes up drag and drop the photo's in the order you want them to appear. With Microsoft Word or a similar program write down the img number and the corresponding number next to each img number, number 1 being the main photo. When the html version of your photo's appear write this on the end of the first block (---------2){one is taken up by the main image} and the corresponding numbers on the other blocks. See below photos.

Sorry the photos didn't come out right, they were fine on my computer and then they went weird when I uploaded them.

If you have limited upload like I do or are just impatient re-size your photo's to 800 by 600 pixels, if your computer automatically adjusts the aspect ratio only adjust the horizontal amount.

Back to top

Section two

Text and spacing.

To make your MOC's story/description easier to read. Put 4 vertical spaces in-between each photo/block of html. The lines represent the spaces.

Spacing for description below the photo
Html version of photo here
----------------------------------------------------
Right text here for above photo
----------------------------------------------------
----------------------------------------------------
Html version of next photo here

Spacing for description above the photo
Html version of above photo here
----------------------------------------------------
----------------------------------------------------
Write text here for photo below
----------------------------------------------------
Html version of desired photo here

That takes care of photo and text spacing.

Adding the description for the photo can be difficult if you don't know which photo it is, that is where the numbering and writing down of the image number comes into play. Use the numbers to figure out the img number and then you know which description goes to which photo.

I think that covers section two.

Back to top

Section three

Posting your page.
Delete all of these (--------2). Warning MOCpages automatically signs you out after about 20 minutes which clears all of your work. Copy and paste your work to a Word document or a similar program. Now that you have saved your MOC click continue. If it asks you to type in your password type it in and then copy and paste your work from the word document. If not check to make sure your MOCpage is correct. If it isn't click "go back". If it is click continue and post your MOC. Here is where most people would be finished. Click this to learn some cool html techniques.
I hope this will make uploading MOCs easier for you.

Back to top

Advanced html section

Inner page links like the ones at the top of the page

What the html code looks like

<li><a href="#1">Section one</a></li>
<a name="4">Put this at the beginning of the section</a>

Put this above the links <a name="top"></a>
Put this at the end of each section <a href="top">Back to top</a>

This page will be changed and updated periodically as I see needed improvements and as I get recommendations.

If you have anything I can add, post a comment and I'll do my best to fit it in.

Comments