Before we get started
Before we start making our website in Adobe Dreamweaver, we’ll organise all our files/assets into one folder.
By this stage, you should have a clear idea as to what your site will look like and how it should function. Furthermore, you should have considered exactly what information will be placed in each page – this may be textual information, images, movies or .SWF animations. Divide your assets into appropriately labelled folders and keep everything organized. Dreamweaver will require to designate a project folder in the next step, so therefore our files need to be contained within it – it will also improve our workflow and enable us to operate on a more efficient level/
Open Dreamweaver & Manage a New Site
When you open Adobe Dreamweaver you will be need to manage a new site.
When you are prompted to do so, click on the ‘new site’ button and give your website a Site Name. Then, designate the folder you have created in the previous step as your Local Site Folder. This will tell Adobe Dreamweaver where to locate all our project files.
The next step is to start a new .HTML document and call it index.html. This is a conventional name for what is considered to be our websites home-page. If we are to upload this site to a server (to broadcast on the Internet), the server will automatically identify this page as the one to open first.
Getting to know Dreamweaver's Layout
Familiarise yourself with the Adobe Dreaweaver’s layout. For this task, learners will use the following features;
- Window/ Workspace Layout/ Classic,
- Code, Split or Design view,
- Properties panel, the difference between HTML and CSS, Format, Class, bullets, etc,
- Common bar and common ‘inserts’,
- Files Panel,
- CSS panel.
Your first line of (HTML) code
Make sure you are in ‘Split’ view and assess the HTML code in the code editor section.
The <!DOCTYPE> declaration must be the very first thing in your HTML document, before the <html> tag. The <!DOCTYPE> declaration is not an HTML tag; it is an instruction to the web browser about what version of HTML the page is written in.
Tip: Always add the <!DOCTYPE> declaration to your HTML documents, so that the browser knows what type of document to expect.
What is HTML?
HTML (Hypertext Markup Language) is a standardised code that allows you to present content (text, images, movies, etc) on the World Wide Web. All the coding you will do will be encased in the html tags (with the exception of the !DOCTYPE declaration.
What are HTML TAGS?
A HTML TAG is a line of code that defines every structure on an HTML page, including the placement of text and images and hypertext links. HTML tags begin with the less-than (<) character and end with greater-than (>). These symbols are also called “angle brackets.”
Changing your page title
Let’s start by changing the title of our web-page to ‘Home Page’.
This is done between the <head> TAGS. The HTML tag <head> is one of the most important elements of an HTML document. The <head> element is a container for all the head elements can include a title for the document, scripts, styles, meta information, and more.
Refer to the line of code below and change the title of your web-page:
Adding content to your web-page
Now let’s add some text to your website using HTML code:
When adding content that is intended to be visible on your web-page, you need to include it in-between the <body> tags. Lets add a few lines of code to get some text on our webpage:
In between the <body> tags, I have added a main heading, sub heading and body-text.
- The main heading is encased in its own tag: <h1>
- The subheading is encased in its own tag: <h4>
- The ‘h’ tags range in numbers from 1-6; 1 being the largest heading size and 6 being the smallest heading size.
- The body text is encased in its own tag: <p>
- The ‘p’ stands for paragraph and is a common tag used for regular body text
The text may look quite plain for now, but we’ll change the styling later using the power of CSS
Styling text using HTML tags
Text can be styled to a basic degree using html tags. For instance, if you want your text to be bold, using the tag <strong>
Changing text to italics
You can emphasize characters/words and change them to italics using the <em> tag. Don’t forget to close it using </em>.
Creating a Line Break
Text will naturally run across the screen until it reaches the edge of the browser. You can force a line break by using the tag <br>. This particular tag does NOT need to close.
Inserting an image
Before you insert an image into your website, you will need to place the original image/file into your nominated website folder. It’s important that all the files you intend on using in your website are appropriately labelled and contained.
To insert an image, use the following code: <<img src=”images/computer.jpg” width=200px>
My origional image is far too bog to fit on the screen, so I added some dimensions to the ‘width’ to size to down.