Upload
lunga01
View
215
Download
0
Embed Size (px)
Citation preview
8/7/2019 Dreamweaver_8_Notes
1/19
Andrew Moretons
Dreamweaver 8 Notes
www.andrewmoreton.co.uk
8/7/2019 Dreamweaver_8_Notes
2/19
8/7/2019 Dreamweaver_8_Notes
3/19Introduction to Dreamweaver Page
The World Wide Web
The WWW, HTML and the WC
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 dont 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/
HTML & CSS
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 tag around a text, like so, The World Wide Web tells a browser that the
words enclosed within the tag are a rst 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)
8/7/2019 Dreamweaver_8_Notes
4/19Page Introduction to Dreamweaver
The Dreamweaver interface
All windows and panels can be found under Window menu, with the exception of the Toolbars (View>Toolbars>)
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.
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.
Design View use a WYSIWYG interface to design a page.Status Bar various the tag selector, zoom and pan tools, window sizes, page weight.
Properties Inspector amends and sets attributes of selected objects
Panels
1.
2.
.
.
5.6.
7.
8.
21
5
6
7
8
21
5
6
7
8
8/7/2019 Dreamweaver_8_Notes
5/19Introduction to Dreamweaver Page 5
Beginning a web site with Dreamweaver 8
Plan your site
Work out how your site is going to t together, how people will nd what they want, what the site is for, before you start work
in Dreamweaver. Youll be pleased you did.
Set up a site folder
Once youve worked how your site is going to work, what its going to look like etc, you have to create a new folder which will
contain all the sites assets. You can create this folder where you like.
Tell Dreamweaver about the site folder by going to Sites>New Site... The Site Denition dialogue box has two buttons
at the top, Basic and Advanced. Click on the Advanced button.
Here youll 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 ll them in under the
Remote info section.
To edit these details later go to Sites>Manage Sites...
Find out default page and server details
Youll need to nd out what the default page name is for the server thats 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.
1
2
1
2
8/7/2019 Dreamweaver_8_Notes
6/19Page 6 Introduction to Dreamweaver
Creating & saving new pages
New pages
Create new pages using File > New. From there you can choose between a large number of preset page and le 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
clickCreate
Title and save
Once youve 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 lenames
Filenames should have NEVER have spaces in them.
Use only numbers, letters, hyphens and underscores
Always include a sufx ie .htm., or .html
1.
2.
3.
8/7/2019 Dreamweaver_8_Notes
7/19Introduction to Dreamweaver Page 7
File & link management
The File Panel
Dreamweaver makes sure that the links between your documents stay good, even when
you move les 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 Windows Explorer or the Finder.
Renaming Files
Deleting Files,
Moving Files
Creating Folders
Moving Folders
Deleting Folders
Updating Links
When you do any of the above things, Dreamweaver will ask if you want to update
references to the les that youve altered or moved. Unless youve very good reason, always
choose Update.
1.
2.
3.
4.
5.
6.
8/7/2019 Dreamweaver_8_Notes
8/19Page 8 Introduction to Dreamweaver
Structuring text with HTML
Its important to structure your text with HTML.
This lets browsers, both visual and non-visual know that some headings are more important than others, that some blocks of
text have been quoted from another source, that other blocks of text are paragraphs or lists.
Well structured HTML will work effectively across all browsers and will make your pages more accessible.
Headings
Place your cursor in the block of text that you want to format and use the Properties Inspectors Format pop-up menu to
choose the heading.
Paragraphs
As above but choose Paragraph
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.
Unordered Lists (bullets)
Ordered Lists (numbrs)
Indent and outdent buttons
(will nest lists)
1.
2.
3.
8/7/2019 Dreamweaver_8_Notes
9/19Introduction to Dreamweaver Page
More text...
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.
8/7/2019 Dreamweaver_8_Notes
10/19Page 10 Introduction to Dreamweaver
Hyperlinks
Creating links to other Sites (absolute links)
Link to external sites and pages by selecting the text (or image) in the Design view and going to the Properties Inspector and
lling in the full url that you want to link to, nally pressing Enter, to conrm the link.
Creating links between your pages (relative links)
Link between web pages and other documents on your site by selecting the text (or image) in the Design view and then either:
Clicking on the Browse for le icon and browsing for the le you want to link to
Linking with point to le
Choosing Insert>Hyperlink
Creating internal links (anchors)
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.
Place your cursor in the page at the point that you want to link to.
Go to Insert>Named Anchor
Give it a name
Link to the anchor by using a # in front of the name you gave it ie
#named_anchor
1.
2.
3.
1.
2.
3.
4.
8/7/2019 Dreamweaver_8_Notes
11/19Introduction to Dreamweaver Page 11
Images
Preparing images
Images need to be saved in either the JPEG or GIF format.
As a rule of thumb GIF is more suitable for images with a very limited number of at colours.
JPEG is more appropriate for photographic images.
Make sure you save your images at exactly the dimensions you intend using them.
Inserting Images
You can add images by dragging and dropping from the les panel or by using Insert>Image
Images and accessibility
Its very important that you provide alternative text descriptions which can be used by browsers that cant, or dont want to,
display images.
Add Alternative text by selecting an image and then adding text to the Alt eld 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 ll in its alt attribute.
Adding Rollover ImagesRollover images are used mostly to create interactive buttons. A rollover is an image that, when viewed in a browser, changes
when the pointer moves across it.
Before you can add a Rollover to a web page youll need two identically sized images.
Add a Rollover images using Insert>Rollover Image
8/7/2019 Dreamweaver_8_Notes
12/19Page 12 Introduction to Dreamweaver
Adding style with CSS
Cascading Style Sheets (CSS) are a collection of formatting rules that control the rendering
of content on a web page.
CSS styles give a lot of exibility and control of page appearance, from layout to setting
specic fonts and styles.
Ideally style sheet rules are stored in external CSS documents that HTML pages link to for
their formatting information although style rules can be embedded in individual pages.
Linking to an external style sheet
Link to external style sheets by
Open Styles panel (Window>CSS Styles)
Click Attach Style Sheet button
a) Browsing for a CSS le
b) Adding the URL of a CSS le
Editing an exisiting style sheet
Stylesheets can be edited directly in code view, alternatively
Open Styles panel (Window>CSS Styles)
Select the style you want to edit
Click Edit Style Sheet button
Applying styles
Place cursor in paragraph to be formatted
a) Select style from Styles pop-up menu on the Properties Inspector
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:
Basic Tag Selectors that use structural markup as a basis for formatting ie p,h1,strong,ul and other familiar HTML
elements
Selectors for links ie a:link,a:visited,a:hover and a:active
.class selectors for repeated formatting, ie .intropara,.newsitem,.saleitem
Grouped selectors which will group several selectors in to a single statement ie p, ul, table
1.
2.
3.
4.
1.
2.
3.
1.
2.
3.
1.
2.
3.
4.
5.
8/7/2019 Dreamweaver_8_Notes
13/19Introduction to Dreamweaver Page 1
Adding new styles to an existing style sheet
Add new styles to an external style sheets by
Open Styles panel (Window>CSS Styles)
Click New CSS Style button
Choose or name your selector
Use the Dene In pop-up and radio button to determine which style sheet you want to add your style to.
Creating a new style sheet
Creating a new external style sheet by
Open Styles panel (Window>CSS Styles)
Click New CSS Style button
Choose or name your selector
Use the Dene In pop-up and radio button to create a new stylesheet
Name and save it
1.
2.
3.
4.
1.
2.
3.
4.
5.
8/7/2019 Dreamweaver_8_Notes
14/19Page 1 Introduction to Dreamweaver
Tables
Tables can be used to show relationship between data and they can also be used for layout. Using tables for layout involves using
the cells of a table to hold content such as text or images at specic positions on the page.
Adding tables
To create a Table go to Insert > Table. Select how many rows and columns you need then click OK
Editing Tables
Edit tables using these techniques
Add rows and columns, alter width and height with the Properties Inspector
Use the mouse to move the borders of tables and rows and columns
Merge cells or split them using the Properties Inspector
1.
2.
3.
8/7/2019 Dreamweaver_8_Notes
15/19Introduction to Dreamweaver Page 15
Templates
Dreamweavers Templates (.dwt les) help you retain a consistent design across your site as well as making it easier to update
the design of multiple pages. They contains area of content that you want to appear on multiple pages, for instance banner areas
and navigation.
Templates also contain placeholders for a pages unique content like new stories, images or catalogue numbers. These areas
are called Editable Regions.When a modication needs to be made to a websites design, such as adding an extra button to a
navigation area or updating copyright information, you can make changes quickly by changing the .dwt les directly. The pages
that are linked to the template les are automatically updated.
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 les unless you are sure what you are doing.
Creating Editable Regions
Select area you want to make editable
Go to Insert>Template Objects>Editable Region... OR right-click on the selected area.
Name the Editable Region
1.
2.
3.
8/7/2019 Dreamweaver_8_Notes
16/19Page 16 Introduction to Dreamweaver
Creating new documents from templates
Its very important that you create new documents from templates by using the File>New command and then choosing from
the Templates tab.
Updating template based pages
Open a .dwt le
Make your alterations
Save the le
When asked to whether to update pages click OK.
1.
2.
3.
4.
8/7/2019 Dreamweaver_8_Notes
17/19Introduction to Dreamweaver Page 17
Metadata
Adding metadata
Add information to help search engines identify your page by adding metadata - especially keywords and descriptions to your site.
Go to Insert>HTML>Head Tags>Keywords or Insert>HTML>Head Tags>Description
Add your keywords or descriptions.
Editing metadata
To edit Keywords or descriptions go to View>Head Objects. This turns on the Head Objects toolbar.
Clicking on either the Keywords button
or the Description button
invokes either the Keywords or Descriptions modes of the Properties Inspector
1.
2.
8/7/2019 Dreamweaver_8_Notes
18/19Page 18 Introduction to Dreamweaver
Publishing your site with FTP
Youll need to know your FTP (File Transfer Protocal) details:
ftp host
user name
password
To upload the site for rst time
Go to Site>Manage Sites
Choose your site
ClickEdit
Select Remote Info from the Categories list
Fill in the details for your site
ClickOK
1.
2.
3.
1.
2.
3.
4.
5.
8/7/2019 Dreamweaver_8_Notes
19/19
Expand the Files panel
Click Connect
Select your local site folder and click Put
Updating your site with Synchonize
Make changes, close and save open les
Expand Files panel
Select your local site folder
Go to Sites>Synchronize Site Wide...
6.
7.
8.
1.
2.
3.
4.