How to Make a Website (DW)/Step 1 - Plan Site

From WSU Technology Knowledge Base
Jump to: navigation, search

These instructions are designed for the beginner. They cover the basics of making a website with Dreamweaver.

Overview

The following plans need to be made before you begin creation of your web site and the design of your first web page.

What server will be holding your web site?
Your web site files may be created on your own computer but they will need to be "published" to a server on the internet (web) which can send those files/data/images/etc. out to a web browser. Many web servers are available for users to publish their web sites for a fee. A few web servers are free for development of limited blogs or web pages which are created using web-based content-editors; among the most popular of these are WordPress or Google Sites.
Students at WSU may use their StudentWebs to publish web sites. Sometimes in certain courses you may also be requested to publish your web site to a specific Classes server. Students who work with Student Clubs may also create/maintain web sites for these on a special server for StudentClubs.
What application will you use to create and manage your web site and pages?
These instructions will use Dreamweaver to create and manage your web site and pages. In these instructions we will suggest using Photoshop, Fireworks and Bridge for special features such as "banners" and "slideshows." These instructions are designed to help students use Dreamweaver to create a Portfolio, but can be adapted to make web sites for a number of purposes.
Web sites and pages can also be created and managed using iWeb (for a Mac); Contribute, WordPress and Google Sites. Instructions on using these are found with their own WIKI sections.
What is the purpose of your web site? What "pages" do you want to display?
Common uses for web sites are:
  • Student Clubs
  • Student Portfolios
  • Student course work - such as web design, or group projects
Typical pages for these web sites:
  • Student Clubs:
  1. home page info like purpose, meeting time and location;
  2. constitution;
  3. membership and officer list;
  • Student Portfolios:
  1. home page with basic info e.g. e-mail;
  2. resume;
  3. creative media slide show;
  4. writing samples

Identify Your Server

You can publish to your personal student web site. This is available to you as a "server-share" on the WSU network and can be accessed on your computer as shared drive. See Step 2 - Set-up Site! for instructions on how web sites are set up on Dreamweaver.

VERY IMPORTANT: You can have more than one website published on your StudentWebs sever. In the case of having more than one web site on your studentwebs, each website must be placed in it's own separate root "folder" or "directory." See below for details about how files on web sites are organized.

You can also publish to your Classes network share if you are instructed to do so, but this will not be accessible publicly through the web.

Finally, some students may be creating/managing Student Club web sites which are housed on a separate server. Again, see See Step 2 - Set-up Site! for instructions on how Student Club web sites are set up on Dreamweaver.

Outline Your Site

Build your site on paper before you start building it in Dreamweaver.

Make a list of the topics that you want to cover in your site and try to organize those topics into categories that you can then assign to specific Web pages. A single page can of course present many "files" or links to files which you want to display, for example, photographs or creative products in your portfolio.

Remember that each page will be hyperlinked to/from others. These links typically will be reflected in your menu.

Sketching out a site map, with rectangles representing Web pages and arrows representing hyperlinks, helps you visualize the size and scope of your project. Applications such as Microsoft Visio or PowerPoint's diagramtic tools offer tools for diagramming a potential website and showing relationships between pages and files.

Organize Your Files

Folder structure containing all the files for your web site on your PC should be identical to the folder structure on your web site.
Dreamweaver follows the organization of your web site as it exists on your personal computer.

Your web site should have a "root" folder (or default directory location). All of the files that are to be published to the web must be located within that root folder.

Dreamweaver will automatically manage the organization of the web site, ensuring that files are correctly located in the root, and will automatically update links, provided that the user is certain to upload/add/edit/delete files within the Dreamweaver application.

For example, if you want to place an image on your web page and the original file is located somewhere else your computer, Dreamweaver will prompt you to copy it to the root folder of your web site. This you must do in order for that file to correctly linked to the page and in order for it to be correctly published to your web site.

How to organize your web site on your personal computer

As shown in the illustration, you will organize your web site on your personal computer inside a folder named for that site.

The folder will contain your "index.html" (or equivalent home page) plus other pages that are connected to it, usually in the same hierarchy or folder.

Additional folders may contain other pages or objects used in the web site, such as images or scripts.

On your computer all the files for your website should be stored in one folder that contains the files for your website and nothing else. In addition to this, every file on your website or used to create your website must reside in this folder or in one of its subfolders for the site to function once uploaded online.

You cannot use the same folder for more then one site.

How files are organized on your web site

How your web site is organized will depend upon whether you have only one or more than one web sites installed on the server.

If you will use your student web server for only one web site, then the "root" of the server site will be where you put your home page. The home page is the "index.html" or "home.html" or "default.html" page. This is the page that will open first when you come to your root directory--your web address.

In this case your student web address is:

http://studentwebs.winona.edu/YOUR_WSU_USER_ID/

If you want to have more than one web site coming from your student web, you will need to give each web site its own folder or directory root inside your web site.

This will change your web address to something like this:

http://studentwebs.winona.edu/YOUR_WSU_USER_ID/YOUR_FOLDER_NAME/

When you open this web server on your Mac or PC, it will show as a storage device on your computer. This is the "root" directory. Folders inside of it will show as folders just like on your computer's hard drive.

Your remote web site will have the same hierarchy or organization of folders and files as the web site on your computer.

For more information about your student web site, see Student Webs

Steps to make a website in Dreamweaver