Академический Документы
Профессиональный Документы
Культура Документы
Dreamweaver 8 Notes
www.andrewmoreton.co.uk
These notes are © Andrew Moreton 2005
Screenshots and tradenames © Adobe Systems Incorporated 2005
The World Wide Web
The World Wide Web is the collection of documents that can be accessed over the internet using the HyperText Transfer
Protocol. Although the web is changing, most of the documents on it are created using HyperText Markup Language (HTML),
along with some other associated technologies like CSS (Cascading Style Sheets) and Flash.
The body responsible for the development of the Web and the technologies that make it up is called the World Wide Web
consortium. (w3.org)
Different browsers
Different browsers display pages in different ways. If you don’t want any nasty surprises you need to test your pages in all the
browsers that you think people visiting your web site might be using.
You can download just about any browser, ever, from http://browsers.evolt.org/
The two most fundamental technologies to grasp before learning Dreamweaver are HTML and CSS.
HTML is a markup language. This means that ordinary text is structured by adding tags that explain what the information means
in the context of the document.
For instance wrapping an <h1> tag around a text, like so, <h1>The World Wide Web</h1> tells a browser that the
words enclosed within the tag are a first level heading.
CSS is a simple styling language which can be used with HTML to format and layout web pages.
Simple guides to HTML and CSS can be found at:
http://www.htmldog.com/guides/htmlbeginner/ (HTML)
http://www.htmldog.com/guides/cssbeginner/ (CSS)
1
2
All windows and panels can be found under Window menu, with the exception of the Toolbars (View>Toolbars>)
1. The Insert Bar – adds items to your page. Note the pop-up menu on the left of the bar. This allows access to different
sets of icons.
All Insert Bar items can also be found under the Insert menu.
2. Document Tabs – view and move between open documents. Right clicking on a Document Tab brings up a list of useful
options.
. Toolbars – There are several toolbars associated with each open document – they can be turned on and off via
View>Toolbars>...:
(a) the Style Rendering toolbar – switches between different rendering styles
(b) The Document toolbar – buttons for switching between Dreamweaver view modes, titling documents, view options,
previewing and site management functions.
(c) the Standard Toolbar – opening, closing, saving etc.
. Code View – directly modify or create code.
5. Design View – use a WYSIWYG interface to design a page.
6. Status Bar – various – the tag selector, zoom and pan tools, window sizes, page weight.
7. Properties Inspector – amends and sets attributes of selected objects
8. Panels
Work out how your site is going to fit together, how people will find what they want, what the site is for, before you start work
in Dreamweaver.You’ll be pleased you did.
Once you’ve worked how your site is going to work, what it’s going to look like etc, you have to create a new folder which will
contain all the site’s assets.You can create this folder where you like.
Tell Dreamweaver about the site folder by going to Sites>New Site... The Site Definition dialogue box has two buttons
at the top, Basic and Advanced. Click on the Advanced button.
1
3
2
Here you’ll be asked where your site folder is located and what you want to refer to it as. 1) Site Name - your label for the site.
2) Local root folder – where your site folder is located. 3) If you know your site upload details you can fill them in under the
Remote info section.
To edit these details later go to Sites>Manage Sites...
You’ll need to find out what the default page name is for the server that’s going to be putting out your site. Typical names are
index.htm and home.htm but it could be anything so check with your network administrator.
New pages
Create new pages using File > New. From there you can choose between a large number of preset page and file types or
from templates you have set up for your site.
If you want just a basic blank page choose Basic Page from the Category list and HTML from the Basic Page: list and
click Create
Once you’ve made a new page, and before you add any content, give the page a title and then save it.
The title of a page can be added in the Document toolbar. The Title should explain the main content of the page.
Legitimate filenames
Dreamweaver makes sure that the links between your documents stay good, even when
you move files from one folder to another, rename them etc.
Remember, though, that if you want Dreamweaver to keep track of these things any of the
following tasks should be performed using the File Panel, otherwise links may get broken.
Use the File panel in the same way as Window’s Explorer or the Finder.
1. Renaming Files
2. Deleting Files,
3. Moving Files
4. Creating Folders
5. Moving Folders
6. Deleting Folders
Updating Links
When you do any of the above things, Dreamweaver will ask if you want to update
references to the files that you’ve altered or moved. Unless you’ve very good reason, always
choose Update.
Headings
Place your cursor in the block of text that you want to format and use the Properties Inspector’s Format pop-up menu to
choose the heading.
Paragraphs
Lists
HTML has two kind of lists, Ordered Lists, generally displayed as a numbered list and Unordered lists where items are displayed
preceeded by bullet points.
Create Lists by highlight text you want formating as a list and choosing one of the List icons from the Properties Inspector.
1. Unordered Lists (bullets)
2. Ordered Lists (numbrs)
3. Indent and outdent buttons
(will nest lists)
Importing text
Bring copy in by: Copying and pasting, or typing directly into Dreamweaver. Copying and pasting from Microsoft applications will
preserve most basic formatting.
When copying plain text be sure to paste text into Design view rather than Code view. Pasting into Code view disregards any
line breaks there may have been in your original text.
Special characters
When you need more unusual characters like &, ©, or > use Insert>HTML>Special Characters.
Link to external sites and pages by selecting the text (or image) in the Design view and going to the Properties Inspector and
filling in the full url that you want to link to, finally pressing Enter, to confirm the link.
Link between web pages and other documents on your site by selecting the text (or image) in the Design view and then either:
1. Clicking on the Browse for file icon and browsing for the file you want to link to
2. Linking with point to file
3. Choosing Insert>Hyperlink
Links between one section of a web page to another are called Named Anchors. Before you do this check that Dreamweaver
will show named anchors in the design view by going to Preferences>Invisible Elements and making sure that the
Named Anchor item has a checked box against it.
1. Place your cursor in the page at the point that you want to link to.
2. Go to Insert>Named Anchor
3. Give it a name
4. Link to the anchor by using a # in front of the name you gave it ie
#named_anchor
Preparing images
Inserting Images
You can add images by dragging and dropping from the files panel or by using Insert>Image
It’s very important that you provide alternative text descriptions which can be used by browsers that can’t, or don’t want to,
display images.
Add Alternative text by selecting an image and then adding text to the Alt field in the Properties Inspector.
Compel yourself to add alt attributes by setting Preferences>Accessibility Settings to checked. This makes sure
that everytime you add an image Dreamweaver will prompt you to fill in it’s alt attribute.
Applying styles
3. b) OR Right-click (CTRL-Click on Mac) name of style in Styles palette and choose apply.
CSS selectors
CSS applies itself to pages via CSS selectors. There are several kinds of Selectors, amongst them:
1. Basic Tag Selectors that use structural markup as a basis for formatting ie p, h1, strong,ul and other familiar HTML
elements
2. Selectors for links ie a:link, a:visited, a:hover and a:active
3. .class selectors for repeated formatting, ie .intropara, .newsitem, .saleitem
4. Grouped selectors which will group several selectors in to a single statement ie p, ul, table
5.
Adding tables
To create a Table go to Insert > Table. Select how many rows and columns you need then click OK
Editing Tables
2. Use the mouse to move the borders of tables and rows and columns
3. Merge cells or split them using the Properties Inspector
Creating templates
Any HTML page can be saved as a template. Once the design of your page is ready, choose File>Save as Template...
Dreamweaver creates a Templates folder at the top level the site folder. Do not rename or move the Templates folder or any
.dwt files unless you are sure what you are doing.
It’s very important that you create new documents from templates by using the File>New command and then choosing from
the Templates tab.
Adding metadata
Add information to help search engines identify your page by adding metadata - especially keywords and descriptions to your site.
1. Go to Insert>HTML>Head Tags>Keywords or Insert>HTML>Head Tags>Description
2. Add your keywords or descriptions.
Editing metadata
To edit Keywords or descriptions go to View>Head Objects. This turns on the Head Objects toolbar.
1. Go to Site>Manage Sites
2. Choose your site
3. Click Edit
4. Select Remote Info from the Categories list
5. Fill in the details for your site
Click OK
7. Click Connect