Websites - General Background
Websites are written in code. The most common is called html. Some websites have more than one type of code such as javascript.
The code tells the browser (eg Internet Explorer) what to display on the screen. Most code is contained between tags. Eg A title tag would be <title>The name of your site<\title>.
Dreamweaver, like other web design software works on a code view basis, where you see the actual code and edit the code, and design view (WYSIWYG – What You See is What you Get) where you make the page look like what you want and Dreamweaver automatically generates the code.
Basics of Dreamweaver (DW)
Launch DW by clicking on the icon.
You then need to set up a site definition. This includes details of the webspace where your website will be and where on your pc the files will be held that you will work on.You only need to do this once
Now all your files can be viewed from the right hand panel in DW
If you change from local view to remote view in the right hand panel you can see the files on the web server.
Always work from local view.
To edit pictures you will need picture editing software eg Fireworks or Photoshop. Always resize images in picture editing software and not DW as it gives a much better quality result.
It’s best to create a folder called “images” for your pictures/logos etc.
Templates
Many sites are built using a template.
This means that every page generated with that template has certain elements that cannot be edited eg the logo, the navigation buttons etc. To change those elements you need to open the template. When you edit the template it changes every page that was created with that template.
To open a page, double click on it in the right hand panel under files in local view.
When you open a page, and hover over it with the mouse. some parts of the page have an O with a line across it. These are the bits you can only edit from the template.
The site also uses “layers”. These are invisible boxes if you like that you can put items in – either text or images. You can place one layer on top of another. The one that is on top is the one with the highest z-index number (shown in “properties” at the foot of the page).
To Create a New Layer
Create a layer. [Insert – Layout Objects – Layer (orAP div)]
You can then drag the layer to where you want it.
To Edit Text or Images
Click on the layer. Click where you want to edit the existing text and type it in like in a word processor. You can change the font, font size, make it bold or italic by highlighting the relevant text and then using the properties panel at the bottom of the page. It’s best to keep to one font, font size and colour.
To edit or remove an image, RIGHT click on it and go to [cut or edit with… and browse for image editing software].
To Insert New Text
Create a layer. [Insert – Layout Objects – AP div]
A new box is opened on the page. You can resize and reposition it by dragging. And then type in the text you want.
When you’ve finished editing the page, you can upload it to your web space (this is called ftp). It is a simple process from within DW:
With the page open –
Click on the two up/down arrows
Click Put
Click Yes
If it asks whether to put dependent files, click yes (this then uploads any images that you have inserted or changed.)
If it says the remote server is newer, click yes to al
To Create a New Page
To create a brand new page using the template, Click [File – New – Templates – and then make sure the template is highlighted – click create]
Choose a name for this file/page with no gaps eg oursponsors
Click [file – save as] and then type in the name you’ve chosen
To Create a Link
Highlight the text or image that you want to link from
1. A link on your own site – go to the properties panel (at the bottom) and click on the yellow file icon, navigate to the file/page you want to link to and click on it, the click ok. The file name should appear in the little box next to the file
2. A link to an external site – type in the website address. It must start http://www.
3. To link to email yout type mailto: and then type the email address
Tables
You can set up information in your site in a table.
Don’t use tables for just normal text, but for where a table would be appropriate.
If you make mistakes
Cntrl Z can be used to undo what you’ve just done.
Don’t upload mistakes to the web space!
If you can’t undo your mistakes, you can always download the good version from the server.
(In the right panel go to remote view and then click the download button and say yes to overwriting your local files)
Previewing your page
You could upload your page to the internet to check that it all looks ok. However Dreamweaver has a better way.
Click along the world icon, along the top bar, click edit browser list and navigate to your browser. This will then be setup so when you click on the world icon again it will say Preview in[your browser name eg ie8]. Just click on that and you can preview your page.