home | list of instructions pages
A | B | C | D | E | F | G | H | I | J | K | L | M | N | O | P | Q | R | S | T | U | V | W | X | Y | Z
| © | To insert this bon a page: insert (top menu bar) → html → special character → copyright |
| # | (hash) To get this sign using a Mac use alt+3. # is on the Windows keyboard. |
| Absolute path | the full address of a web page, including http// etc. Find it by visiting the web page. Used to make an external link. f |
| Accessibility | When planning your site consider its accessibility by people with difficulties. DW offers an alt text slot when you insert an image so always complete this. For example, Alternative text can be read out to people with software to help visual impairment. See DW Help on Accessibility. |
| Action (PS) | PS will record frequently used actions such as re-sizing so that they can be used on other images. PS Batch process or Droplet process can then use the Action to process a folder of images. PS also can use a saved Action in its Image Processor process. see PS Repetitions instructions page |
| Alternative text, alt text | Always complete this slot when DW offers it as it aids accessibility. To add it later: select image and see alt text box on Properties Inspector bar. Fill in. You can check for missing alt text: Site → Reports → from pop-up menu choose which document(s) to check and tick the Missing alt text box → Run. The report appears below the Properties bar. |
| anchor link | Internal link to a place on a long page or a specific place on another page. See anchor link instructions page Anchor link icon: |
| AP element or AP Tag | Absolutely positioned element: a DW design element - a Div Tag with an absolute position assigned to it. It can be drawn, re-sized and positioned by dragging. It remains in the position it is put relative to its container. It can be styled using CSS. Choose the icon from the Insert toolbar  see Div Tag. |
| assets | Assets is a file manager in DW that holds folders of favourite items including images, templates, library items, etc. Access Assets on tab just below blue files bar on right of screen. |
| attach style | To attach a CSS style to a file: open the file, click on the attach icon in the CSS section (the icon looks like a chain), browse to the style sheet you want. Attach style icon:  |
| attribute | A property of an element or tag (eg its colour, size, etc.) You can find the formatted attributes in the Tag Inspector |
| batch (PS) | A Photoshop process that allows you to apply an action to a set of files in a folder. You need to have recorded an Action in PS to use Batch. see also Image Processor and PS Repetitions instructions page |
| behaviours panel | Find this in the Tag list above the files list on the right. There are two tabs: Attributes and Behaviours. If it does not show go to Window → Behaviours. Behaviours is used to add effects. |
| body | The whole area of a page, the rest of the page is within it, often in a container, or wrapper. In a file's code the body is preceded by the head. |
| browse files | Use the browse files icon:  to find files, for instance when making a link or inserting an image |
| browser | Browsers give access to pages on the Web. eg MS Explorer, Safari, Firefox, Opera, etc. Do not confuse browser with search engine |
| browser preview | Check your page in Preview in Browser:  |
| centre, Div Tag | To centre a Div Tag, eg the container, on a page: in Box section of CSS Styles menu, see margin and untick ‘same for all’; make left and right auto, top and bottom 0. |
| centre, table | To centre a table on a page if it is not in a Div Tag: click on the word <table> on bottom left of page (tag selector bar) this selects the table andshows the properties for the table on the Properties Inspector bar: choose align → centre |
| check links | DW will report on the state of your links: File → Check Page → Links. Here you can specify whether you want DW to check broken links, external links or orphaned files. Broken links are ones that have nowhere to go and orphaned files are ones with marked links that no longer come from anywhere. OR choose Site → Check links Sitewide. Results appear in Results panel. |
| check spelling | Spell check is in Text menu on top bar |
| cloak, cloaking | A way of marking folders on your site so they do not upload when you publish. Cloaked folders appear in the files list with a red line through the name. To cloak: select the folder from the file list (right click in Windows, Ctrl+click in Mac) and choose cloaking → cloak from pop-up menu. Uncloak using the same method. Cloaked folder icon: |
| CMYK | cyan, magenta, yellow, and black - the ink colours used by printers. (K is for key) Web browsers cannot read this colour mode so in Photoshop use RGB (red, green, blue) colour mode when setting up a new page, these are the optical colours used for images. |
| code | Code is the html language that DW writes as you design. See the very basic Code page for more information. |
| container | A Div tag that holds the contents of a page, also known as wrapper. The word container is sometimes also used for another Div tag that contains something else. (eg a footer that also contains links) |
| CSS | Cascading Style Sheets: DW method for formatting your page. see Basic CSS instruction page. |
| CSS ready-made layout templates | Ready-made layouts for page design. File → new → html. Choose from list – click on each to show what they offer then choose Create. Choices are: fixed, elastic and liquid and combinations of these. When you get the page look at the tag selector bar to see CSS tags, eg <container>, <body>, etc. (see DW Help: Create a page with CSS layout) |
| data table | Eg Excel file. Can be imported to a table. Save as tab delimited file, suffix: .txt, save anywhere suitable. (do not just add suffix – you have to choose format from menu) |
| declaration | Defines the style properties that an element will have. In html code the declaration follows the selector |
| declaration block | In html code: a set of declarations following a selector. |
| defaults, page layout | DW has page layout defaults including margins and padding and blank lines before paragraphs. To turn these off: New CSS Rule → put * in Selector box → OK → box → padding 0 and margins 0. |
| define a Site | Start a new site. See define site instructions page |
| delete file or folder | Mac: Command+click on file or folder for menu → Edit → delete. Windows: right click on file or folder for menu → Edit → delete. see modfying your web site, though |
| Description | Sentences that you write that some search engines use to find your site. Use the Head icon from the Insert panel to get the Description panel. Write in two or three good sentences to describe your site and its contents. See also Keywords |
| Div Tag | A CSS design element. Div Tags can have other elements in them such as images, tables, etc. They can be invisible eg a container but hold formatting, or can show with borders, backgrounds, etc. See also AP element and tag. Insert using the Insert toolbar and div tag icon: |
| document Flow | The order of tags – see the list of those on the tag selector of a page. See also Basic CSS Instruction page. |
| domain name | This is the registered name for the web s that you use for your web site. You will need to pay to register this although some web hosts include the registration in the hosting fee. |
| Dreamweaver | Get to know the menus – especially the main ones along the top bar. Get to know the icons. (hover over an icon to see its name) Do not forget Dreamweaver Help which will tell you all you need to know, and more. |
| Droplet (PS) | A Photoshop process that applies an Action to one or more images, or a folder of images, that you drag on to the Droplet icon. see PS Repetitions instructions page |
| dwt | the suffix of a template made in DW. |
| editable region | An area of a template that can be changed or have things added such as text or images. See template and template instructions page |
| elastic layout | DW ready-made page layouts offer a selection with different page properties. Elastic layout pages have the property of the design adapting if the site viewer changes the font size. See DW layout page Follow link for an example using DW ready-made elastic layout Compare with liquid layout |
| element | An object on a page, including Div Tags, images, text, header, etc. |
| email link | A link on a page that allows the site visitor to send an email to you. see links page for how to insert. Email link icon in the Common section of the top Insert Bar: |
| FAQ | Frequently asked questions. Do not invent these on your web site – use those that are really asked. |
| file, new | Windows: right click on folder → new file Mac: Command+click on folder → new file or use icon on top bar: |
| files | Each page of a web site will have a separate file in the web site root folder. You need to organise files in Dreamweaver not outside in computer files or else they will not be linked and will trash the web site. Do not confuse folders and files. DW usually puts your files in alphabetical order as you make them. If it has not done so you can do this by clicking on the folder icon in the files list. See Folder, Title, Name |
| Fireworks | A program related to DW that prepares images for your web pages. FW files have .png as suffix or can be saved as .gif. |
| Flash button, flash text, video | To make: on insert menu bar choose media icon → flash button (or text or video) complete menu choices. Or Top Menu Insert → media → flash button/text/video CS4 version of Dreamweaver (Oct 2008) no longer has Flash buttons/text. |
| Flash text | Is a vector tool, not a bitmap so does not pixellate if enlarged. |
| float | This positions div tags in relation to other tags, margins and borders. This is done in CSS formatting via Positioning → type → relative and Box → float → |
| Folder | Folders in DW hold files: folder names can have spaces and should be short but explanatory. They can be renamed – DW will update links. All sub folders should be inside the Root folder. Do not re-name a folder after you have published your site as people who have bookmarked a page in that folder will be annoyed to get a 404 message. |
| Folder, name | Folder names can have spaces and should help you recognise what they contain. Do not use Library, or Templates as folder names because DW uses these names to make folders when you first make a library item or a template. Your Site Folder is the overall folder for your whole site and will contain sub-folder and files. |
| Folder, new | Windows: right click on root folder → new folder Mac: Command+click on root folder → new folder |
| Font | Research shows that Verdana is the most popular font for site visitors. This is Verdana. DW default font is Times New Roman. Change font in the Properties Inspector bar at the bottom of the page or through New CSS Rule. Use one of the common fonts offered by DW. If you use an unusual font a site visitor may not have it on their computer and so would not be able to read it. For this reason if you make (e.g.) a header in a funny font turn it into a gif so that it can be read by all. |
| Gallery | A set of files and folders showing a group of images - usually having a page with thumbnails of images leading to separate pages showing larger versions of the same images and additional information. |
| Gallery, from scratch | A gallery can be made from scratch: see the instruction page and sample home-made gallery |
| Gallery, made in FW or PS | DW makes galleries through FW that can have the layout edited. PS makes a larger variety of galleries but they cannot be edited as much. see the galleries instruction page and example galleries |
| gif | Format for saving flat images |
| guide | DW has size guides to help you locate margins and tags etc. Drag them from the rulers. see View (top bar) → Guides |
| head | The section of Code of a file that appears first and which contains the title, CSS formatting and Styles. Keywords and Description are added using the Head icon on the Insert menu. These are read by browsers to find your site. In a file's code the head is followed by the body. |
| header | A major title at the top of your page - sometimes called banner. |
| headings | Use the pre-formatted styles (called h tags) as headings on pages so that they are read by search engines and in accessibility software (eg for blind people they are read out loud). The formatting can be changed, use format menu or CSS. Do not just make headings bold or change the font size, etc. as they will not be recognised by search engines. |
| Html | Hypertext markup language - computer language used to create web pages |
| hyperlink | A link to another web site. Insert (top menu) → hyperlink → complete menu box. The web site address must be in full including http: etc so it is best to actually go to the web site and copy the full address and paste it into the link menu box. Or you can select text and paste the full address into the Link box on the Properties Inspector bar. |
| image | You can insert an image on to your DW page or use an image as a background: see instructions page |
| image map | An image map on a DW page is an image that has hotspots that make an action occur, such as a link. see image map instructions page |
| Image Processor (PS) | A Photoshop process that allows you to convert and save a set of images as a different file type and size and will also include a saved Action. See PS Repetitions instructions page |
| import style | You can use a CSS style from a page you have styled and formatted on another page by importing the style. see Import Style instructions page |
| indent | To indent a paragraph: click on indent icon in Properties Inspector bar This writes <blockquote> in the code. Click twice for more indentation. You can also modify the amount of indentation by choosing blockquote from the bottom bar of the page then New CSS Rule → block → text indent |
| index page | You must have an index page for each web site. It is the first page that opens on a web site. It should be in the root folder but not within a sub-folder. The file name must be index.html and nothing else but it should also have a Title - several words in plain English that describe the site to search engines and visitors. see define a site instructions page Index pages are also made for galleries by FW and PS, make sure these are inside a gallery folder so there is no confusion. |
| insert | On the top menu bar click Insert for a choice - including layout objects, images, tables, etc. There is also the Insert menu bar below the main bar - here there are icons to choose from in various sections, eg common, layout, forms, etc. |
| jpeg | Format for saving photo images – is a condensed psd (Photoshop format) |
| jump Menu | This offers site viewers choices which are then links to other pages. Top menu Insert → Form → jump menu. See jump menu instructions page |
| keywords | Words that some search engines use to find your site. Use Head icon from Common panel of Insert bar to get keyword insertion box. Write in 10 - 15 separate words that are significant to your site. See also Description |
| layers in Photoshop | see Nick Barker's overview also Damian's instructions |
| layout, DW ready mades | DW gives a variety of ready-made layouts. See DW layout page |
| layout with Div Tags | How to layout a page using div tags from a blank. See Layout page with Div Tags instructions page. |
| lbi | the suffix of a library item made in DW. |
| library item | An item such as wording, images, tables, etc. that DW stores in a separate folder for use anywhere on your site. If you alter the library item the changes will appear in all instances of it. see library item instructions page. Library items icon in Assets: |
| line, new | DW default gives you a new paragraph when you press enter when typing words on to a page. If you want a new line without the space above a new paragraph use shift+enter. |
| link, anchor | Internal link to a place on a long page or a specific place on another page. See anchor link instructions page. Anchor link icon: |
| link, CSS formatting | DW calls links <a>. The four states are: Or, with fewer choices, format through Page Properties – click to show formatting box including links. see format links instruction page which shows how to make links look like buttons. |
| link, dummy | It is sometimes useful to put in a dummy link when designing a page or trying out formatting. If you are not ready to make the actual link but want to remind yourself to do so later, a dummy will indicate that a link should be there by looking like one (but not working). see links page The official way to put in a dummy link is to type javascript:; into the link box (or a hash sign: #) |
| link, email | Use this to allow your site visitor to send you an email. From Insert → Email Link (from top menu bar) or use email icon on Insert bar (it looks like an envelope) and complete the box. see links page Email link icon: |
| link, external | To make a link to another web site. In the links box on the Properties Inspector bar type in the full name of the web site. Note: here it is best to actually go to the web site and copy and paste its full name including http etc. into the link box. This is called an absolute path. Check in Preview to make sure it works. see general links page. |
| link, relative (internal) | Relative links are internal to the web site – they take the viewer to another place or page on the same web site. see the links instructions page for more information about the various kinds of links and how to set them up. |
| link, same page | see anchor link instructions page |
| links, check | see links page or check links above |
| Links, general | see the general Links page, and internal links, external links, and formatting links instructions page |
| links, properties | These can be changed. Default is underlined to show it is a link; blue colour, changing to magenta when it has been used; red when active i.e. when clicked on. Links are called <a> in DW code. See formatting links instructions page |
| liquid layout | DW ready-made page layouts offer a selection with different page properties. Liquid layouts adapt if the site visitor changes the size of the browser window. Follow the link for an example using DW ready-made Liquid layout Compare with elastic layout and see DW layout page |
| list | DW treats lists as single entities that can be formatted together. It calls unordered lists <ul> and list items<li>. (An unordered list has no numbering or lettering.) To make items into a list: Items must have paragraphs between them, then select them all and click on numbering icon on Properties Inspector bar for an ordered list and the bulleting icon for an unordered list. |
| margin | Space outside an element between it and the next element. (padding is space inside an element eg Div Tag to separate it from its border) |
| meta tag | Text inserted into the source code of a web page that includes keywords in order to provide information to a search engine about the contents of the page for search engine optimization. To insert meta tags: Insert → HTML → Head Tags → Meta. (or use icon: |
| menu box | When formatting in a menu box with several choices use Apply to stay in the box if you want to continue formatting, use OK to apply and then close box. |
| modify site | Once online consider carefully about changing your site. see modify your site page |
| name, file | File names must not have spaces in them but can have underscores to show spaces: like_this. The file name is for you in your site folder so make it explanatory, it is not helpful to you to have files called page1, page 2 etc. Web pages must have .html as the suffix. The file name is not the same as the Title see page on files, folders, names and titles for more details. |
| name, folder | Folder names can have spaces and names should help you recognise what they contain. Do not use Library, or Templates as folder names because DW uses these names to make folders when you first make a library item or a template. Your Site Folder is the overall folder for your whole site and will contain sub-folders, files, images, etc. |
| navigation | methods of getting round a page, web site or to other sites through various kinds of links including Spry menus and navigation bars. See Links |
| navigation bar | a row of buttons that are links to other pages and/or other sites. You can make buttons as links or use FW button editor to make a navigation bar. |
| open | Open a file: use the icon
|
| optimise in FW or PS | Used to prepare images for your web site, especially to make loading fast. see optimise image instructions page. |
| padding | Space inside the border of an element (eg a Div Tag) to separate text or image from the border. (Margin is space outside an element, to separate it from the next element) |
| page properties | See the Page Properties tab in Properties Inspector Bar at the bottom of the screen. Click to open. There are limited choices of formatting here. More detailed formatting can be done in CSS
example of Properties Inspector Bar showing Page Properties box at the bottom:
|
| page, new | A new page is a new file in DW. Ctrl+click on root folder → new file → untitled html – change name afterwards, but make sure you keep the .html. No spaces or punctuation in names. |
| Photo software | Separate software is needed to optimise and prepare images for use on the web site. Fireworks or Photoshop are usual. |
| Photoshop files | PS files are saved as .psd – or .jpeg. If wanted on a web page use file → save for web (can be optimised here and made into .jpeg (photo) or .gif (flat images) Images used for web pages should be in a sub-folder in root folder of the site. |
| pipe symbol [|] | A keyboard symbol that is often put between horizontal links to separate them. |
| preview | Preview In Browser – this will show you what the page will look like on the web. (if save option comes up then save) Use globe icon on menu bar at top of page. Use this to check your links they will not work in DW except in Preview. Preview in Browser icon: |
| Properties Inspector Bar | This is at the bottom of the page: show or hide it with the arrow. OR Window → Properties. Clicking into an element on the page, changes what you see to show choices of formatting properties for that element.
Example showing Properties Inspector Bar for a table:
Example showing Properties Inspector Bar for an ap div tag:
|
| radio button | Little round button with a dot in it. Usually one of a row of buttons to make choices - the dot indicates that that is the answer expected and by pressing Enter you make this selection. |
| ready made layouts/templates | See DW layout page for brief a outlline of DW ready made pages. It is useful to look at the code of these pages, especially the pale grey notes which give guidance on why things are done in a particular way. |
| rename file or folder | Mac: Command+click on folder, → Edit → rename. Windows: right click, → Edit → rename. DW updates the links automatically. It is a bad idea to rename folders after you have published your site as people may have bookmarked pages in them and will not be able to find them subsequently. |
| reports | DW will check your pages and your site. Site → reports → choose the page(s) and tick the things you want to be checked (eg missing alt text). Links can be checked using Site → Check Links Sitewide. The Results appear below the Properties Inspector bar at the bottom of your screen. |
| results panel | Window → Results to show or hide results panel. The panel gives reports on checking page, links, etc. see Reports |
| RGB (in Photoshop) | red, green, blue. The optical colours read by web browsers. Use this colour mode when designing for the web in Photoshop. Printers use cyan, yellow, magenta and black (CMYK) which web browsers cannot read. |
rollover image |
A rollover works when the mouse is rolled over an image – a different, image appears. A rollover picture is two linked images (eg versions of same picture). See Rollover image instructions page and swap image instructions page |
| save * | DW reminds you that you have unsaved work by putting an * next to the file name at the top of the page. In Mac use cmd+S; in Windows use ctrl+S. Save icon:  (it goes grey when the file is saved) |
| screen re-set | To put panes back to DW defaults: Window → workspace layout → default (or, in some versions, Designer). |
| search Engine | Search engines find web sites and web pages. eg Google, Yahoo, Bing, etc. Search engines use titles, file names, headings, meta tags, etc to find your pages so make them useful words. (do not confuse search engine with Browser) see brief information on optimising your page |
| selector | A term in html that identifies an element (eg p for paragraph, h for header, etc) followed in code by the declaration or declaration block which defines the style the element will have. |
| site, new | see Define a Site instructions Your Site Folder is the overall folder for your whole site and will contain sub-folders, files, images, etc. |
| size, page | The window size ( W x H in pixels) and the file size in pixels of your page is shown on the bottom border of the page, on the right, together with the expected loading time. |
| software/programs | Dreamweaver (Adobe) is industry standard for web design, sold separately or bundled with Fireworks, Flash, etc. (but not Photoshop) Version CS4 new in October 08 Flash for movement/animation Photoshop (Adobe), for photo manipulation |
| sort table | with the cursor inside the table choose Commands (top menu) → sort table, then choose which column to sort on, ( note the choice of whether there is a header row) click OK |
| special characters | To insert on page: Insert (top menu bar) → html → special character (eg:© ™ ® € ¥) You can also cut and paste them from a word processor You can store them in the Library section of your Assets, too. |
| spell checker | Spell check is in Text menu on top bar (or in Windows: shift+F7) |
| Spry | Spry allows you to create widgets such as accordions and menu bars, (so your visitor can interact with your site) and add different kinds of effects to various page elements. Spry widgets are a kind of link. Insert (top bar) → Spry and follow menus and complete boxes. See Spry Effects page and Spry Widgets page |
| swap image | DW has Swap Image facility in Behaviours to allow you to make rollovers and multiple event rollovers. see the Swap Image instructions page. |
| table, format | Click into <table> on tag selector bar to format cell padding and cell margins in Properties Inspector Bar. Click into <tar> (row) or <td> (cell) to format or delete these. The table can also be formatted in CSS. |
| table, insert | To insert a table: Insert → table to use the table icon:  |
| table, insert row or column | With the cursor inside the table, choose Insert → Table Objects and choose column or row and where from the menu. Be careful doing this when you have images in the cells: make sure you place the cursor at the edge of an image so as not to select the image itself. |
| table, sort | With the cursor inside the table choose Commands (top menu) → sort table, then choose which column to sort on. Note the choice of whether there is a header row or not. click OK |
| tag | The general name for a page element – eg body, container, table, div tag, heading, etc. DW puts the names on the tag selector bar along the bottom left border of the page. If two words are used to name a tag it is customary to capitalise the second word likeThis (note no spaces) see also: tag selector, Div Tag and AP element |
| tag inspector | This is a section on the right of the screen: a blue bar, above Files. Here there are two tabs: Attributes and Behaviours. Inspect or edit tags in Attributes. This is where you can give a tag an id if you want and have not previously done so. Select id from list and tab (keyboard) and a box wll appear to contain the new name. Behaviours is used to add effects. |
| tag selector | Use the tag selector to select, edit, or remove tags without leaving Design view. The tag selector is located in the status bar at the bottom of the Document window and shows a series of tags: eg <body> <div#container> <table> etc. Click into these to show formatting opportunities in the Properties Inspector Bar or to set up or edit CSS Rules. Click into <body> tag to highlight all the text. Example of the tag selector bar showing various tags: |
| template, page from | To use a template to make a new page: Select Assets from Files panel. Choose Templates icon: see templates instruction page |
| text image | See text image instructions page on how to fill text with an image in Photoshop to use in DW. |
Titles are brief page descriptions, written in plain English with usual word spacing, about 60 characters maximum. They are written in the title space in the Common section of the Insert menu bar. (see image below). Each page of your site will have its own title. Titles are found by search engines so make sure they describe your site or pages well. Dreamweaver starts each new page called Untitled Document: do not leave it called that. Page titles appear at the top of each page when they are displayed on the web.
Your home (index) page should have a title that describes your site so that people will want to visit it. Do not call it Home: it will never be found amongst the 4.6 billion others out there.
Titles are not the same as file or folder names.
also see file name, and page on files, folders, names and titles for fuller details
|
|
| unordered list | A list with no numbering. See list to remove bullet points: New CSS Rule → <ul> → type → none |
| untitled documents, check | Site → Reports.... → Untitled Documents. See Reports below the Properties Inspector Bar. |
| URL | Uniform Resource Locator - the unique address of a web page |
| visitor/viewer | Think about the visitor/viewer when making a web site – it is important that it is easy to read, easy to get around and that it is accessible to all. Also speed of loading is important – people will not wait if it is slow and some still have slow computers. Also size of page is important: too wide will cause horizontal scrolling for some which they do not like. (They do not mind vertical scrolling so much) Size of images should be as small as possible (in pixels) so they load quickly. (Optimised) |
| Web host | In order to publish your site on the Web you need to use a Web host. This is a company that rents out web space and arranges it so that you just upload your files. The cost of this varies depending on how long you sign up for and what services the host is offering. Some are free but offer limited space. Expect to pay around £30+ per year minimum. I use JustHost.com who are reasonably hassle-free. |
| window | Use Window → , on the top menu bar to control which windows you want to see. |
wrapper |
a Div Tag that holds the contents of a page, also known as container. The wrapper is inside the body. |
on Common tool bar)
or click on the file in the files list
and the template wanted. Chose files icon (right of files bar) → New from Template. This opens a new file with the template outline. Do not just open the template and change it and save it as a .html. 
A | B | C | D | E | F | G | H | I | J | K | L | M | N | O | P | Q | R | S | T | U | V | W | X | Y | Z
dictionary updated 5/June/10