How to set up a Dreamweaver Website

Important Suggestions

Prior to making your website a good bit of planing would be beneficial. You should write down some of the content and draw a basic layout of your website. Another helpful thing in my opinion would be to make a "family tree style" site map, diagramming all of the HTML pages, folders, images, scripts, and styles.

Lesson

HTML and Dreamweaver for Beginners

Buy Videos

Start by opening up your web development program, for purposes of this demonstration I am using Adobe Dreamweaver CS5( HTML on CS3,CS4 are the same, so it doesn't matter what CS your using).

I highly recommend the set of videos "HTML and Dreamweaver for Beginners", they guide you through the process of creating a fully functional website. You can buy the videos on the link located leftward.

Step 1 - Opening the HTML
On the desktop create a folder for your website, its name can be anything.Go to File>New>HTML and make sure "none" is selected. In the code section of Dreamweaver will appear some code, declaring font type, titles, meta tags, etc...

Step 2 - Making Names
Go to Site>New Site. A menu will appear asking for the name of your site, this name is NOT the URL name, rather it is your own name for the site; I suggest you pick something that pertains to the site. The next space asks for a site root folder, this is the name of the folder that holds all of the site information; in Step 1 you created the folder. Select that name of the folder by clicking on the folder icon left of the text box and find your folder.

Step 3 - Selecting Servers
This step you can skip if you don't have a website host yet.

On the same "site setup" menu, on the left tab bar select Servers and click on the "+" on the lower left hand corner, this menu will pop up. "Server Name:" can be anything. Select FTP(File Transfer Protocol) on the drop down menu. Under the "FTP Address:"; enter your domain name without "www." or any other prefix. When you registered your hosting for your website, you created a user name and password, enter it in the spaces.NOTE This is not your domain web-page log in password, it is separate. And in the final space is "Web URL:", enter the complete URL of your website.

Step 4 - Making the Hompage
Go to File>Save As. Name the file "index.html". It is VERY important that the homepage be index.html or else your host server wont recognize it.

Step 5 - Setting up the HTML "bones" of the Layout
When designing your website you have to keep functionality and ease of update in mind. Open up the "Code" tab or use the "Split" tab. Once you have the code up find the <body> tag, and hit the return key between the <body> and the </body> a few times to give us some space. Accordingly to your design that you should of planned of earlier, create the <div> id tags as so:

Example: Type of website i'm making is 3 column with header and footer. A "#" identifies the <div> as an id and a later you will see a ".", and it identifies a class. Your layout should look similar to mine, however there are at least 2 ways to do the HTML layout:
Block Style
```
<body>
<div id="wrapper">
<div id="banner">
</div>
<div id="main">
</div>
<div id="events">
</div>
<div id="navigation">
</div>
</div>
<div id="copyright">
</div>
</body>
```
Flow Style
```
<body>
<div id="wrapper">
<div id="banner">
</div>
<div id="main">
<div id="events">
<div id="navigation">
</div>
</div>
</div>
</div>
<div id="copyright">
</div>
</body>
```
I prefer the "Block Style" because, later if you apply PHP to your website, you can make .inc files with the specific block parts of the website making it much more versatile.

Step 6 - Deciding your layout
There are 3 different types of layouts in website design.
- Fixed Layout: The website is designed upon pixel values that do not dynamically change upon the user resizing the window.
  Example: This Site
  - Pros
    - Navigation Bars, Text, and other media stay the same size upon the user resizing the window.
    - You don't have to waste your time designing your website in the "what-if" scenarios of resizing.
- Liquid:The website is designed upon percentage values of the total browser window that dynamically changes upon the user resizing the window.
  Example:Google News
- Elastic:The website is designed upon the users preferences for text size units in "ems". The sites navigation bars and other boxes don't change in width upon the size of the window, rather the size of the text.
  Example:HTML Dog
Step 7 - Putting layout tags in the right spots
When creating the layout of the website you want to assign id's to prominent features such as navbars, copyright info, news, etc... Because when you apply CSS to the site you need to have something for the CSS to identify and manipulate. Usually classes are reserved for other media embedded within the id tag, although neither one is dependent upon each other, so you can use a class without a id and vice-versa. At this point in the design of your website it is not needed to start applying CSS classes to future additions, for you will apply CSS as you design the website.

Conclusion

You Know...
- how to plan an effective website.
- how to open up an HTML page within your program.
- how to setup your site name, root folder, server, and establish an FTP connection.
- how to create and position appropriate <div> tags.
- how to declare a homepage
- how to layout HTML source order for CSS.
- how to choose the site layout that best fits you
- how to create ids and classes for CSS to recognize
Questions or Comments? Hit the "Questions/Help" tab

You need to log into your account to post comments!Sign In