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 on 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. |
| 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. |
| 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 re-sized and positioned by dragging. It remains in the position it is put relative to its container. 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. |
| 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. |
| browser | Surfs web: Mac browser is Safari |
| 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 to get properties for table on 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. |
| 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 |
| 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. |
| 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 |
| 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. |
| 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, 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 these 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 bold, change font size, etc. |
| 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 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 |
| 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 |
| 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. |
| 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 |
| 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. |
| 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) |
| 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 just for you in your site folder so make it explanatory, it is not helpful to you to have them called page1, page 2 etc. Web pages must have .html as the suffix. The file name is not the same as the Title |
| name, folder | 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. |
| 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. |
| 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 Page Properties in Properties Inspector Bar at the bottom of the page. There are limited choices of formatting here. More detailed formatting can be done in CSS |
| 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 | 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 bar at top of page. Links will not work in DW except in Preview. |
| 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, or on tag selector bar, brings up choices of formatting properties for that element. |
| 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 | It is useful to look at the code, 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 |
| screen re-set | To put panes back to DS defaults: Window → workspace layout → default (or, in some versions, designer). |
| search Engine | Searches the Web for words and web sites, eg Google, Yahoo. see Browser |
| 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 |
| size, page | The size ( W x H in pixels) of your page is shown on the bottom border of the page, on the right, together with the expected loading time. (This is not necessarily the size of what you have put on your page.) |
| 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, 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 row or column | With the cursor inside the table, choose Insert → Table Objects and choose column or row and where from the menu. This does not work if you have images in the cells as clicking in the table selects an image. To get round this add a row of cells using the Tab key (on keyboard) and click into new row. You can then delete the extra row after adding the new row or column. |
| table, sort | With the cursor inside the table choose Commands (top menu) → sort table, then choose which column to sort on, 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. |
| template, page from | To use a template to make a new page: Select Assets from Files panel. Choose Templates icon 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. 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. |
The title of your web site will be what you write in the title section of your index (home) page. It is what search engines will show when they find you so make it is what you want your searchers to find and want to open. It is not the same as the Site Folder name, nor the home page file name: index.html. It can be several words long, be in plain English and include spaces and capital letters.
The file name of your home page must be index.html but it will have a separate title. If you title it index or home it will join billions of others called the same on the Web.
The title of each page of your web site is also important both for accessibility and as some web crawlers look at page titles to aid searches. Each page will have a file name for your use, and a page title which you fill in to show more detail and which will appear on the Web. see file name |
|
| unordered list | A list with no numbering. See list to remove bullet points: New CSS Rule → <ul> → type → none |
| 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. |
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