NOTE: This is part 2 of our 3 part Quick Start Tutorial. Part 1, Part 3.
Quick Start Tutorial Help Forum
Syntax convention:
Red: HTML tags.
Blue: Paths... Menu or System.
Green: You type...
Bold: You do.. Commands.
Go to and Click: Refers to Alleycode's menu. Most of the menu commands used in this tutorial are also available as toolbar button. However, for the sake of brevity references will only be made to menu commands.
Time for some Style...
Cascading Style Sheets (CSS) is a breakthrough in Web design because it allows developers to control the style and layout of multiple Web pages all at once. As a Web developer you can define a style for each HTML element and apply it to as many Web pages as you want. To make a global change, simply change the style, and all elements in the Web are updated automatically. Our index page tutorial will use an "Internal Style Sheet" which defines internal styles in the head section by using the <style> tag.
17) Ready for style, make sure your index.html page is focused...
a) Go to and Click Tools > Style Sheet Wizard.
b) The Style Sheet dialog opens at the "Action" tab. Option "1" is pre-selected "Add or Create a Style in an open HTML page?". That's our choice...
c) Click on the "Application - Text" tab.
d) Select "New Class Name" (it should already be selected by default) and change the word "NewClass" to "menu".
e) Check "Activate Font Set..." This enables all font related elements.
f) In "First" field use the dropdown menu arrow to locate available fonts on your system. Select "Arial". NOTE: In the unlikely event "Arial" is not available select a font of your choice.
g) In "Font Size" Click Length and use the up-down arrow to move (px) pixel size to 12.
h) In "Properties" change "Weight" field to "Bold" by using the dropdown arrow.
i) Click the "Alignment - Background" tab.
j) In "Color" Click on the (...) Foreground button. Color dialog opens.
k) In "Basic Colors" Click on white and Click OK. "#FFFFFF" color code is now in your "Foreground" field.
l) In the "Color" "Background" field type: #e9924c. As before this is the color I chose for this tutorial... Humor me, thanks.
m) Click " Insert" ... Top right corner of your CSS Wizard.
n) Generated style is automatically inserted in the <head></head> of your document.
o) CSS Wizards returns you to the "Application - Text" tab and prompts you to "Create another Style string or Exit!"
18) The following three sections of our Style deal with what happens when viewers run their cursor over and/or use your Menu. We'll start with A:link (A:link as well as the following "visited" and "hover" will actually be part of our "menu" class, they are called "Pseudo-classes"). For "A:link" we want the same default style as in (paragraph 17). If CSS Wizard is still open at "Create another Style string or Exit!" continue from there. Otherwise simply re-open CSS Wizard, accept default option 1 in the "Action" page and Click on "Application - Text" tab to continue...
a) Select "New Class Name" (it should already be selected by default) and change the word "NewClass" to "menu".
b) Check "Link Set".. "A:link" is now visible... Good that's our choice.
c) Check "Activate Font Set..." This enables all font related elements.
d) In "First" field use the dropdown menu arrow to locate available fonts on your system. Select "Arial".
e) In "Font Size" Click Length and use the up-down arrow to move (px) pixel size to 12.
f) In "Properties" change the "Decoration" field to "none".
g) Click the "Alignment - Background" tab.
h) In "Color" Click on the (...) Foreground button. Color dialog opens.
i) In "Basic Colors" Click on white and Click OK. "#FFFFFF" color code is now in your "Foreground" field.
j) Click " Insert" ... Top right corner of your CSS Wizard.
k) Generated style is automatically added to the existing Style sheet of your document.
l) CSS Wizards returns you to the "Application - Text" tab and prompts you to "Create another Style string or Exit!"
19) Still dealing with our Menu, next step is what happens after a link is visited (A:visited)... Again, default style (paragraph 17)...
a) Select "New Class Name" (it should already be selected by default) and change the word "NewClass" to "menu".
b) Check "Link Set".. "A:link" is visible... Use your dropdown arrow to change that to A:visited.
c) Check "Activate Font Set..." This enables all font related elements.
d) In "First" field use the dropdown menu arrow to locate available fonts on your system. Select "Arial".
e) In "Font Size" Click Length and use the up-down arrow to move (px) pixel size to 12.
f) In "Properties" change the "Decoration" field to "none".
g) Click the "Alignment - Background" tab.
h) In "Color" Click on the (...) Foreground button. Color dialog opens.
i) In "Basic Colors" Click on white and Click OK. "#FFFFFF" color code is now in your "Foreground" field.
j) Click " Insert" ... Top right corner of your CSS Wizard.
k) Generated style is automatically added to the existing Style sheet of your document.
l) CSS Wizards returns you to the "Application - Text" tab and prompts you to "Create another Style string or Exit!"
20) Our final Menu style deals with "Hover"... In this case we want our Menu to change when viewers run their cursor over a particular Menu index...
a) Select "New Class Name" (it should already be selected by default) and change the word "NewClass" to "menu".
b) Check "Link Set".. "A:link" is now visible... Use your dropdown arrow to change that to A:hover.
c) Check "Activate Font Set..." This enables all font related elements.
d) In "First" field use the dropdown menu arrow to locate available fonts on your system. Select "Arial".
e) In "Font Size" Click Length and use the up-down arrow to move (px) pixel size to 12.
f) In "Properties" change "Weight" field to "Bold" by using the dropdown arrow.
g) Click the "Alignment - Background" tab.
h) In "Color" Click on the (...) Foreground button. Color dialog opens.
i) In "Basic Colors" Click on black and Click OK. "#000000" color code is now in your "Foreground" field.
j) In the "Color" "Background" field type: #fbf3e1.
k) Click " Insert" ... Top right corner of your CSS Wizard.
l) Generated style is automatically added to the existing Style sheet of your document.
m) CSS Wizards returns you to the "Application - Text" tab and prompts you to "Create another Style string or Exit!"
21) The next two styles deal with borders. Our first creates a single solid orange/rust line around our main table...
a) Select "New Class Name" (it should already be selected by default) and change the word "NewClass" to "tableborder".
b) Click the "Tables - Borders" tab.
c) Check "Box Border"... This enables "Box Border" elements.
d) For "Size (px)" use the up-down arrow to move (px) pixel size to 1.
e) For "Style" use the dropdown box and select "solid".
f) In the "Color" field type: #e9924c.
g) Click " Insert" ... Top right corner of your CSS Wizard.
h) Generated style is automatically added to the existing Style sheet of your document.
i) CSS Wizards returns you to the "Application - Text" tab and prompts you to "Create another Style string or Exit!"
22) Our last Style generates a single solid orange/rust right border for our left bar to be consistent with our table border...
a) Select "New Class Name" (it should already be selected by default) and change the word "NewClass" to "tableborder".
b) Click the "Tables - Borders" tab.
c) Check "Right Border"... This enables "Right Border" elements.
d) For "Size (px)" use the up-down arrow to move (px) pixel size to 1.
e) For "Style" use the dropdown box and select "solid".
f) In the "Color" field type: #e9924c.
g) Click " Insert" ... Top right corner of your CSS Wizard.
h) Generated style is automatically added to the existing Style sheet of your document.
i) CSS Wizards returns you to the "Application - Text" tab and prompts you to "Create another Style string or Exit!" Click the "Close" button, you're done!
Your document should look like this! (Use the back button to return!)
Good now take a look at your Web site in Synchro View ( View > Synchro View or Double Click anywhere in your editor)...
23) Huh?... Nothing's changed?... That's because we haven't assigned any "classes" to our tags. We need to assign our "menu" class to lines 30, 31, 32, 33 and 34 ...
a) In line 30 create a space after the "d" of <td>.
b) Go to and Click Insert > CSS > Class Selector.
c) Type "menu" at the blinking cursor location.
d) Your line should look like this <td class="menu"><a href="index.html"> Home </a></td>
e) Repeat the above steps for lines 31, 32, 33, 34.
After repeating the above process 5 times you may be wondering why didn't we simply apply the "menu" class to the table? The answer is because we want our orange/rust background color applied to the Menu index only, not the width of the table...
24) Next we'll add our border Styles...
a) In line 39 create a space right after the word "<table.
b) Go to and Click Insert > CSS > Class Selector.
c) Type "tableborder" at the blinking cursor location.
a) In line 41 create a space right after the "d" of "<td"
b) Go to and Click Insert > CSS > Class Selector.
c) Type "tdborder" at the blinking cursor location.
Your document should look like this! (Use the back button to return!) ... Check out your work in Synchro View!
25) The final step for our main page is to add some content. To do this we will actually embed a table within a table for more control....
a) In line 42 place you cursor between <td></td>.
b) Go to and Click Tools >Table Wizard .Table dialog opens. Enter the following in the appropriate fields.
c) Row = 1
d) Column = 2
e) Width = 90 and change "Pixel" to "Percent". Use the dropdown arrow to change.
f) Align = "Center"
g) Click "Insert".
26) We need some text content to fill up our Web site. Either write a nice 3 paragraph autobiography or simply enter a bunch of "blablablas".
a) On line 45 just after the "d" of <td type width="60%" .
b) In line 45 place you cursor between <td width="60%"></td>.
c) Go to and Click Insert > HTML Tags > paragraph.
d) Write a nice 30- 45 word paragraph in between <p></p>.
e) Repeat steps "b" and "c" two more times.
27) Now we'll add some flavor to our site...
a) Place you cursor between <td></td>. Which is the second <td></td> of our embedded table.
b) Go to and Click Insert > Images > Default
c) Navigate to your Tutorial directory and open the "images" directory.
d) Locate "spacecadet.gif" and Click "Open".
e)Your line look like this: <td><img src="images/spacecadet.gif" width="143" height="205" border="0" alt=""></td>
f) In the "alt=" type "Yes... I could very well be a Space Cadet" (it's ok I know him well, go ahead).
28) Small finishing touches... (spacing and positioning)
a) Place your cursor in line 46 just after <td width="60%">
b) Go to and Click Insert > HTML Tags > Line Break Twice.
c) The beginning of your line should look like this: <td width="60%"><br><br><p>
a) Place your cursor right after the closing </p> of your third paragraph.
b) Go to and Click Insert > HTML Tags > Line Break Twice.
c) The end of your third paragraph should look something like this: "bla bla bla"</p><br><br></td>
a) Locate the line containing "spacecadet.gif"... Right after your paragraphs.
b) Type width="40%" right after the "d" of <td>.
c) Create a space and place your cursor right after the "%" of <td width="40%">.
c) Go an Click Insert > HTML Tags > Horizontal Align > Center
Your document should finally look like this! (Use the back button to return!)
Your last step is to upload your new Web site to your server. The most common approach is via FTP "File Protocol Transfer", a good hosting facility will always include FTP transfer. You will find FTP software here and a tutorial here.
Keep your directory structure as is. All links, images, and includes should stay intact when uploading to your server.
Congrats!... Your first Web (maybe) page... but not your last!
For now, our Web site consists of one finished page and 4 additional pages which are simply returning a title. Obviously you can repeat the above procedures and finish each of those extra pages individually. However, having to repeat the above steps four more times seems like a lot of work don't you think?... Wouldn't it be nice if there was a way to generate these pages automatically while still being able to individualize the content? Well of course there is... Actually there are several ways you can do it... My favorite is with the magic of PHP. And as I mentioned at the the top of this page CSS can control multiple Web pages at once using "External Style Sheets". See our Quick Start Tutorial - Advanced for details.
