Set up a Web Site
In order to set up a Web Site, you have to follow several steps:

  1. In the Files pane, click Manage Sites in the Files list. 
  2. When the Manage Sites window appears, click on the New button.
  3. When the Site Definition appears, type the name of your site in the first text box and then click the Next button
  4. When the second window appears check the No I don’t want to use server technology radio button, then click the Next button
  5. When the next screen appears leave the Edit local copies on my machine radio button checked. Then click Next button.
  6. When the next screen appears, click FTP in the How do you connect to your remote server? list.
  7. In the What is your hostname or FTP address of your Web server? box type the real address of your Web server. Then click the Next button.
  8. When the next screen appears, leave No do not enable check in and check out radio button checked. Then click Next button.
  9. When the Summary screen appears,  click the Done button

When those steps are done, you have to have on your screen the Summary:

Local Info(local root folder will be created)
Site name: WebQuest
Local root folder: C:\Documents and Settings\yourusername\My Documents\WebQuest

 Remote Info
Access:FTP
FTP Host: www.yourserver.com
Check in/out: Disabled.

 Testing server
Access: I’ll set up this later.

Now , we are going to create 7 HTML pages named: index, introduction, task, process, credits, conclusion, teacher page , all in WebQuest directory from My Documents .
To create a Home page, you will follow these instructions:

  1. On the Menu Bar, click File, then New
  2. When the New Document window appears, click HTML in the Basic Page column
  3. A blank page should open.
  4. On the Menu bar click  File then Save
  5. When Save as window appears, make sure the WebQuest folder appears in the Save in box.
  6. Then type index.html in File name. Click Save
  7. Index.html should now appear in File pane.
  8. Make sure Local view is selected
  9. Remember: the home page any Web site has the file name index.html.

Why? What is your opinion?
Part 2: Building a Website based on a template
Scenario 1:

  1. We already have saved 7  empty pages named:
    1. Index
    2. Introduction
    3. Task
    4. Process
    5. Credits
    6. Conclusion
    7. Teacher page
  2. We are going to create a template and we’ll apply it to all these 7 pages.

 

Scenario 2:

  1. The pages are created after the template is done .

What is a template?

  1. A template is a document you can use as a base for creating other documents.
  2. Each document based on a template uses the same layout and structure as the template
  3. Creating a template involves designating the areas that need to be editable in documents that are based on the template
  4. All other portions of the documents are locked and controlled by the parent template

Advantages and disadvantages of using Templates
Advantages are best seen in 2 situations:

  1. When you have a section or a set of pages that need to use an identical design and layout
  2. When a designer creates the look of the pages but editors add the content to the pages

 

    However, both of these advantages are pale in front of those presented by using external CSS files mainly because in this last case, the information is not carried by all pages, being just referred to (by including the link to the CSS file in  each of them).
  More about CSS vs. Templates

  1. What is common:
    1. All the elements controlled by the CSS /template are updated automatically in a single doc. or site-wide.
  1. What is different:
    1. CSS gives designers the ability to separate the content from the structure of Web pages. This can be beneficial in terms of increasing accessibility and flexibility, decreasing download time, and decreasing the amount of time that is needed to create and maintain pages.

 

Why/When using templates can be useful?

  1. However, if:
    1. you are not familiar with CSS and don’t know  how to write/use  the code
    2. the file representing your site is not big ( or your site is not accessed by very many visitors in a second !!)

 

 using templates can be a reasonable alternative to CSS.
Building a WebSite based on a template
Steps:

  1. Create a template
  2. Building the web pages based on that Template

 

Scenario 1:
Apply the template to your existing pages

Scenario 2:
Create new pages based on that template

Step 1: Create the Template

  1. The template we are going to create will provide the navigation, the site identity and the look and feel of the project site
  2. Before starting, as with any other web-page, we have to develop  the page design ( structure, navigation, and layout)

Getting started:
Create a new page which will be saved  as :
new template.dwt

    1. The template file should be saved in the “template” folder from the website’s root directory

Insert  layer1(header)  with the next properties:
Id: header
L:0px  W: 483px
T: 0px  H: 126px
Bg. Color: #FFFFFF

Insert layer 2 (content) which will host the navigation bar and create the links:

    1. Index
    2. Introduction
    3. Task
    4. Process
    5. Credits
    6. Conclusion
    7. Teacher page

Properties:
Id: content
L: 0px    W: 483px
T: 0px    H: 36px
Create the layer 3 (sidebar):
Id: sidebar
L: 484    W: 259px
T: 0px     H: 622px
Insert layer 4(main):
Id: main
L: 1px    W: 483px
T: 166px  H: 476px
Place placeholder1 in main layer (insert-image-placeholder):
Id: placeholder1
W: 296px
H: 230px
Adding editable areas to the template
All other areas are locked
Changes can be made only in the template file
One editable region can contain more elements :ex (one placeholder, one layer, etc) if they are selected at once.

  1. How to do it:  Insert bar (Common category ), Templates menu ,choose the Editable Region icon.

If you want to remove the editable property:
For the sidebar:
Modify -> Templates -> Edit sidebar [uncheck]

  1. 2. Make the placeholder editable :

Insert bar (Common Category) _> Template Menu -> Editable Region
You can place an image here-different in each page .
Try in Browser:
At this stage:

  1. All pages opened by navigation bar (menu) items are blank

(apart from the navigation bar)

  1. Insert image in header layout (locked area):

This image should be seen ( later ) in all pages built on this template:
Step 2: Building pages based on your template

Scenario 1:  The next step makes use of the template we created before and apply it to all the pages in the website  ( in our case to all 7 pages created at the beginning)

  1. How to do it (updating all pages): Modify-Template- all pages (for entire site):
  2. Or : Modify- Templates-Apply template to page ( for each page):

In your pages you can insert different pictures in placeholder and write different texts in sidebar ( edit the editable regions) as in the next example:

Verify in browser:
You should have all links working, the banner and the rest of editable elements included

Scenario 2:  Create a new page based on the template you have already created: