Web Design Tutorial
When learning a new program such as Dreamweaver, it is important to understand various components of the program. Be sure to follow the lessons exactly as you should be creating a web pages which will eventually be linked together to create a web site.
You will be asked to save, open and close at various points throughout these lessons. It is imperative that you follow all instructions to ensure that you receive marks for all of the learned competencies.
This is a tutorial design to create a 5 page website using HTML and CSS. To begin you must understand that:
- HTML (hypertext markup language) is the code behind a web page that creates the structure of the page
- CSS (cascading stylesheets) are responsible for creating the presentation or look of the page..
When happy with the overall design, we will then duplicate the pages using “save as” to ensure that the presentation and structure will remain the same, resulting is a consistent, clean and professional looking website.
Before we begin will create a folder that will contain the contents of our website. A few simple rules to follow:
- Your home page (first page) should be called index.html. If your page was uploaded to web server, index.html is what the server will recognize as your home page and hence displays this file first.
- All files should be named in lower case.
- Filenames should contain no spaces. If a space is required it should be substituted with an underscore. This is to prevent "garbage" from being added to your URL (uniform resource locator)/address.
- All images should be stored in an images folder.
Throughout this tutorial you will be given instructions to "Try This". By completing these activities, you should ended up with a simple 5 page tutorial that you can use a reference to complete all remaining web assignments.
Try This:
- In your H:\semester2\btt\unit4 folder, create a folder called btt_web_design.
- Inside this folder, create a folder called images.
We are going to create basic HTML pages using Dreamweaver, a web site development tool, that makes web page creation easier. We will refer to the HTML code often to ensure understanding of the basic language responsible for web pages.
Choose Start >> Programs >> Tech >> Macromedia >> Dreamweaver MX
In Windows, the first time you start Dreamweaver, a dialog box appears that lets you choose a workspace layout.
To choose a workspace layout:
Select: Dreamweaver MX Workspace which is an integrated workspace using MDI (Multiple Document Interface), in which all Document windows and panels are integrated into one larger application window, with the panel groups docked on the right.