Getting Started

For this tutorial, we assume that you're a brand new user on DitDat and you want to get up to speed quickly. So we'll show you how to create a new test page, add text and images to it, and then delete the page.

The first thing to remember is that you are working on a live site. This means three things:

If you add something, it's there on your site instantly for everyone in the world to see.
If you change something, it's changed instantly for everyone to see.
If you delete something, it's gone. We can pay somebody to roll back your site, but it will cost you a bit of money, so be careful when you delete things!

Understanding the Builder Bar

One of the main tools you’ll use on your DitDat web site is called the “Builder Bar.” Here’s how to find it:

Go to the home page of your DitDat web site.
If you are logged in as the site owner, you'll see a yellow bar across the top of your browser window. We call this the "Builder Bar" because it gives you the tools you need to build your site.
If you are not logged in as the site owner, you won't see the Builder Bar. People who visit your site will not be able to make changes to your site. Only you can do that, and only when you're logged in as the site owner.
If you are not currently logged in, please do so now by clicking the Login link in the upper right corner of your screen.

Create A New Page On Your Site

You are going to create a new test page on your site. Follow these steps:

Click on "Create New Page" in the Builder Bar.
A dialog named "Create New Page" will appear.
In the "Title" text field, type in "Test".
As you type, a new text field will appear below it with the label "URL". It will be filled in automatically to say "/test".
Click on the "Create New Page" button in the lower right corner of the dialog.
The dialog will close and you'll be taken to the new page you just created. The title of the page will appear in the header.

That’s it! You’ve created a new page which has an address that looks something like this: http://your_name.ditdat.com/test.

Remember that the address of your home page looks like this:

http://your_name.ditdat.com.

The page you created is a “daughter” of your home page. It is just below your home page in the family tree.

Every page on DitDat can have as many daughter pages as you like. The address of a daughter page starts out the same as the address of its parent page, and then it has a forward slash "/" followed by the name of the daughter.

Add Some Text To Your Test Page

You are going to add some text to the test page on your site. Follow these steps:

Look at the test page you just created. Just below the menu bar, you’ll see a headline that says “Text”. Just below that are the words “Click on the pencil icon to create and edit text.”
Double-click on the word “Click” and then drag your mouse to the right so that you highlight the entire sentence.
A small box will appear around the sentence.
Type this sentence: “Hello, I am a space alien from the planet Dantooine.”
Click the mouse somewhere outside of the small box containing the text.
The sentence you typed now shows up on the page and it is LIVE on your web site. Anyone in the world can now see what you just typed.

That’s it! You’ve just added some text to your web site. This is one of the main tasks you’ll do in creating your web site.

Change The Headline

You are going to change the headline on the test page on your site. Follow these steps:

Click your mouse on the browser window containing your test page.
Hover your mouse pointer above the headline that says “Text”.
A yellow “Edit Button” will pop up. It contains a Pencil Icon, a red X, and six small dots.
Click on the Pencil Icon.
A Text Dialog will appear on your screen.
Change the “Widget Title” to say “Top Scientists Are Now Convinced…”
Click the “Save” button to close the dialog.

That’s it! You’ve now changed the headline on your page.

The headline and the text are part of a single unit, which we call a “Text Widget.” DitDat provides you with many different kinds of widgets--they make it easy for you to put text, images, e-mail signup boxes, Facebook Like buttons, Twitter buttons, and dozens of other cool things on any page.

Here is a general principle: You can do most of the things you want to do on your DitDat web site by one of the following two operations:

Click on one of the menu items on the Builder Bar.

Edit a widget on your page by hovering over it and clicking on the Pencil Icon.

Add A Picture To Your Page

You are going to add a picture to the test page on your site. Follow these steps:

Click your mouse on the “Add Widget” menu item in the Builder Bar.
A dark region will come down from the Builder Bar, containing the names of a number of widgets.
Click the mouse on the “Photo Album” and drag it down onto the page.
As you drag the Photo Album widget, you’ll see the other widgets on the page dance around to make a place for your new widget. A dotted rectangle will appear on the screen, showing the place where the new widget will land when you release the mouse.
Drop the Photo Album widget below your Text widget.
A line of text will appear that says “Photo Album”.
Hover the mouse over the Photo Album widget and then click on the Pencil Icon that appears in the yellow box.
A “Photo Album Dialog” will appear on the screen.
Click on the button that says “Add Photo”.
A file browser dialog will appear on the screen. Use it to browse through your computer to find a picture you like.
Select a picture file that is not very large and click the Open button.
The picture will upload to your web site. If it’s a very large picture, it will take a long time to upload and it will also take a long time to appear on the page when people view your site. So it’s best to use pictures that are as small as possible on your site.
Click the “Save” button to close the dialog.

That’s it! The picture will now display on your screen. You’ll notice that it expands to fill up the full width of the area where you put your Photo Album widget.

You have many other kinds of widgets you could have put on the page. Each of these does one main thing, and it does it well. We’ve created enough widgets to give you a lot of options.

Move The Picture

You are going to move the picture to a new position on the test page on your site. Follow these steps:

Hover your mouse above the Photo Album widget.
The yellow box will appear. Notice that it has six small dots arranged in a small grid pattern. We call these the “Grippy Dots.” You use them to move the widget around.
Move the mouse point over the Grippy Dots and press the mouse button down and hold it while you drag the mouse away.
The widget will now move along with the mouse pointer and you can put it anywhere on the page you want. Try dropping it in various places to see what happens. You can’t hurt anything, so it’s OK to play a bit.

That’s it! You’ve moved the Photo Album widget from one location to another.

Notice that no matter where you put the Photo Album widget, it resizes itself to fill up whatever horizontal space is available.

You can move any widget on the page by using the same operation--hover over the widget, use the Grippy Dots to drag the widget to a new location, and release the mouse button.

Delete The Picture

You are going to delete the picture from the test page on your site. Follow these steps:

Hover your mouse above the Photo Album widget.
The yellow box will appear. Notice that it has a small red X between the Pencil Icon and the Grippy Dots.
Click the red X.
A small dialog box will pop up asking you if you’re sure you want to remove this widget.
Click on the “OK” button.
The dialog will disappear and so will the Photo Album widget.

That’s it! You’ve just deleted the Photo Album widget.

You can remove any widget you like by using the same method--hover over the widget, click the red X, and then confirm that you really want to remove the widget.

Remember that when you delete a widget, it’s really gone. It’s not easy to get it back. (We can hire a webmaster to roll back your web site, but this costs money.)

Fortunately, if you delete a widget, it’s not that hard to create a new one. It may take some time to fill in the text, so we recommend this very important principle:

Write the text for your web site in a Word document first and save a copy on your computer. Then you can copy and paste it into a Text widget. If you accidentally delete the widget, you’ll still have the text on your computer.

Delete Your Test Page

You are going to delete the test page from your site. Follow these steps:

Double-check that you are on the test page for your site. Once you delete this page, it’s going to be gone!
Click on the “Delete Page” button in the Builder Bar.
A “Really Delete Page” dialog will appear that asks if you’re sure you want to remove the page.
Click on the “Delete” button.
The dialog will disappear and your page will be deleted. You’ll return to the home page for your web site.

That’s it! You’ve just deleted the test page from your web site.

You can use the same procedure to delete any page on your site. Be careful, because once the page is gone, it’s really gone.

What's Next?

You’ve now completed the Getting Started tutorial. You’re ready to start work on the QuickStart Guide to building your web site.