2. Financed under IPA Bulgaria – Macedonia Cross-border Programme 2007 - 2013
2
CONTENTS
WEB DESIGN ..................................................................................................................................................................5
SUBJECT 1: Preparation for development of a web site..................................................................................................5
1. Research.........................................................................................................................................................................5
2. Planning and building the structure...............................................................................................................................5
3. Design and development of the site. .............................................................................................................................5
4. Testing. ..........................................................................................................................................................................5
5. Maintenance..................................................................................................................................................................5
SUBJECT 2: The Dreamweaver 8 Interface......................................................................................................................5
1. Start working .................................................................................................................................................................5
2. Setting up a local site.....................................................................................................................................................6
3. Starting a new HTML page ............................................................................................................................................7
4. Saving a webpage - File/Save. .......................................................................................................................................7
5. Rules to observe when naming a file .............................................................................................................................8
6. The interface..................................................................................................................................................................8
7. Working with panels and documents ............................................................................................................................8
8. Insert bar (Insert) ...........................................................................................................................................................9
9. Page title........................................................................................................................................................................9
10. Page preview ...............................................................................................................................................................9
SUBJECT 3: Webpage design with tables. Setting up tables. Formatting tables. .............................................................9
1. Setting up a table...........................................................................................................................................................9
2. Formatting cells – Properties panel .............................................................................................................................10
3. Sorting a table..............................................................................................................................................................11
4. Modifying a table.........................................................................................................................................................11
5. Nested tables ...............................................................................................................................................................11
SUBJECT 4: Text input in the webpage .........................................................................................................................11
1. Text input.....................................................................................................................................................................11
2. Setting up the content structure..................................................................................................................................12
3. Financed under IPA Bulgaria – Macedonia Cross-border Programme 2007 - 2013
3
3. New lines......................................................................................................................................................................12
4. Non-breaking space.....................................................................................................................................................12
5. Text alignment.............................................................................................................................................................12
6. Formatting characters .................................................................................................................................................12
7. Inserting special characters .........................................................................................................................................12
8. Horizontal lines ............................................................................................................................................................13
9. Automatic date insertion .............................................................................................................................................13
10. Lists ............................................................................................................................................................................13
SUBJECT 5: How to work with images ..........................................................................................................................14
1. Inclusion of images ......................................................................................................................................................14
2. Working with images...................................................................................................................................................16
SUBJECT 6: Hypertext and image links. Insertion and linking to named anchors. .........................................................18
1. Designation..................................................................................................................................................................18
2. Types............................................................................................................................................................................18
3. Creating hyperlinks. .....................................................................................................................................................18
4. Modifying a link's destination......................................................................................................................................18
6. Insertion of an anchor and creation of an internal link to it. .......................................................................................18
7. Insertion of an anchor and creation of an external link to it. ......................................................................................19
8. Editing anchors. ...........................................................................................................................................................19
9. Setting a color and format for hyperlinks. ...................................................................................................................19
SUBJECT 7: Insertion of flash animations and flash buttons .........................................................................................20
1. Creating flash text........................................................................................................................................................20
2. Insertion of flash buttons.............................................................................................................................................20
3. Insertion of flash animation.........................................................................................................................................21
SUBJECT 8: How to create a web photo album.............................................................................................................21
SUBJECT 9: Interactive forms. Insertion of rollover images ..........................................................................................22
1. Advantages. .................................................................................................................................................................22
2. Tools for insertion of interactive elements. .................................................................................................................22
3. Insertion of a rollover image........................................................................................................................................23
SUBJECT 10: Developing new styles. Internal and external styles.................................................................................24
5. Financed under IPA Bulgaria – Macedonia Cross-border Programme 2007 - 2013
5
WEB DESIGN
SUBJECT 1: Preparation for development of a web site
1. Research.
Before you start working on the site, it is good to know:
- what the target audience of your site will be; what the visitors' interests are;
- why there is a demand for the site;
- what its visitors would like to find;
- what is the most relevant contents for the site;
- what is the message of the site or what you would like to share with its visitors;
- it is important that you know your competitors and how they build their sites.
2. Planning and building the structure.
The key characteristics for the success of a web site is how comprehensible and easy to work
with it is.
a) the site's structure – in order to be clear, communicable and user-friendly you should plan
the site's structure. You need to develop a detailed map of the site.
b) build a structure of files and folders – we recommend that you make separate folders for
different file types (a folder for the HTML code, for images, multimedia, cascade sets of styles
(CSS)).
3. Design and development of the site.
This is the stage where you define general types of styles that provide specific information for
the appearance, interface, colors and styles that are to be used in the site.
4. Testing.
You should test how different browsers (Microsoft Internet Explorer, Mozilla Firefox, Opera,
Safari) display the pages, make sure you do this for all pages and links.
5. Maintenance.
This stage includes addition of new pages, update of links, change of contents and images.
SUBJECT 2: The Dreamweaver 8 Interface
1. Start working
When you launch Dreamweaver for the first time on your computer, you need to choose one
of the two options:
- Designer – integrates all Dreamweaver windows and panels in an enviroment which is
optimized for the purpose of visual web site development;
- Coder – suitable for programmers who work mainly with HTML and other languages
for web programming. Choose Designer.
Dreamweaver initial screen is displayed and it provides for:
6. Financed under IPA Bulgaria – Macedonia Cross-border Programme 2007 - 2013
6
- Open a Recent Item – quick access to recent documents;
- Create New – options to create a new documents of various file types;
- Create From Samples – template designs for web pages;
- Dreamweaver Exchange – comprises resources that can be used to broaden the range of
tools.
By default, the initial screen is displayed every time when you start the application unless you
check out the Don’t show again preference. If the initial screen does not show up, you can change
this in Edit/Preferences, General, by enabling the option Show start page.
2. Setting up a local site
1. What is a local site?
To set up a local site means that you need to create a local folder on your computer. This
folder will hold all files and folders of the site. You will not be able to load files that are on the hard
disk but not in this folder on a remote server.
2. Setting up a local site with the Basic option:
1. Create a new folder but make sure it is not in the Dreamweaver's folder. We recommend
that it be in My Documents.
2. Set up a new site:
1w.) In Dreamweaver's initial screen, Create New, choose Dreamweaver Site;
2w.) Site/New Site ;
3w.) Site/Manage Sites and press button New. Choose Site in the pop-up menu. A dialog
box opens Site Definition with two tabs – Basic (simple) and Advanced (complete). The default
option is Basic and it will take you through a number of steps. Advanced gives additional options and
settings and does not provide the text explanations available in Basic. Choose Basic.
7. Financed under IPA Bulgaria – Macedonia Cross-border Programme 2007 - 2013
7
3. Type the site name in the first input field (it will remain hidden for the site's visitors); press
button Next
4. Dreamweaver will ask you whether you would like to work with server technology. Choose
the first option, button Next.
5. Decide on how you will handle the files before you publish them – choose the first option.
6. Specify the folder where you will keep the local files – this is the local root folder that you
have already created; press Next.
7. Specify the remote server on which you will publish your files:
- None
- Local/Network – to test the files on you computer first
- FTP –to publish the files on a remote server
- Choose None and press Next
8. Review the information for the site and press Done.
3. Starting a new HTML page
1w.) File/New – a dialog box opens New Document with 2 tabs: General and Templates.
Choose General and then from the category Basic Page choose HTML. Press the Create button.
2w.) In Dreamweaver's initial screen, choose the column Create New, HTML.
4. Saving a webpage - File/Save.
If the file already exists, when importing images and other elements all paths to these will be
loaded properly.
8. Financed under IPA Bulgaria – Macedonia Cross-border Programme 2007 - 2013
8
Dreamweaver automatically adds an HTML extension to the name of the file for HTML
documents. If the default extension is not HTML then go to Edit/Preferences, category New
Document and specify HTML in the input text field Default Extension.
5. Rules to observe when naming a file
The filename can include letters from the Latin alphabet, Arabic numbers (the name cannot
start with a number though), underscore.
6. The interface
1.1 Title
1.2 Menu bar
1.3 Insert bar
1.4 Document bar – comprises buttons for 3 optional interfaces:
- Code – only the code is displayed
- Design – only the design is displayed
- Split – combination of the two views above
1.5 Standard bar - View/Toolbars – shows and hides Standard, Document and Insert bars.
1.6 Tag selector bar – located in the bottom left corner of the window, it always starts with
the start tag and lists in hierarchical order all the HTML tags applied to the selected element.
1.7 Panel Properties – located in the bottom of the screen and used to specify the format of
various elements in the page. It can be shown or hidden with the button on top - Window/Properties .
7. Working with panels and documents
They provide options for the input and change of the contents. They can be selected in the
Window menu. A mouse click on the arrow under the panel name will show or hide the panel. A
click on the icon against the panel name will open the panel menu. By default the CSS, Application,
Tag Inspector and Files groups are shown.
9. Financed under IPA Bulgaria – Macedonia Cross-border Programme 2007 - 2013
9
8. Insert bar (Insert)
a) designation – it is used to add contents to web pages. It can be visualized as a list or tab
menu.
b) to switch the display modes:
- If in a list menu mode, you can change it and display it as a combination of tabs with
button Common/Show as Tabs;
- If the mode is the tab menu, you can switch to the list menu display – from Options in the
upper right of the panel Insert/Show as menu.
c) options:
- Common – contains the most used elements of a web page like hyperlinks, tables, images,
templates.
- Layout –provides options for table creation, layers and frames; options for table appearance;
- Forms – contains all elements that build online forms;
- Text – with buttons for text formats;
- HTML – contains buttons for inclusion of data (meta data, key words and description) in the
Head section of the webpage;
- Application – for inclusion of dynamic webpage elements;
- Flash Elements – provides options for files that are created with Flash;
- Favorites – facilitates the user to make a list of preferred objects in the Insert bar.
9. Page title
The title of each page will be displayed in the browser's title bar and it should be specified
before you input the page's contents. (in the Document bar, the Title field).
10. Page preview
a) choose a browser – browsers display web pages differently and that is why the pages
should be tested beforehand:
1) File/Preview in Browser/Edit Browser List;
2) A dialog box opens - Preferences, choose category Preview in Browser – you can
see a list of installed browsers. You can add/remove a browser to/from the list (if you have more than
one browser on your computer) with the buttons (+) and (–).
b) page preview – Document bar, button Preview/Debug in Browser (F12).
SUBJECT 3: Webpage design with tables. Setting up tables. Formatting tables.
There are three layouts available in Dreamweaver: Standard, Layout, Expanded (choose a
layout in Insert bar, category Layout, buttons View/Тable Mode). The Expanded layout displays
tables slightly bigger and with thicker borders. The tables do not look the way they are displayed by
the browsers.
1. Setting up a table
1w.) Insert bar, category Layout, button Table;
10. Financed under IPA Bulgaria – Macedonia Cross-border Programme 2007 - 2013
10
2w.) Insert bar, category Common, button Table;
3w.) Insert/Table;
A dialog box opens – Table with the following fields:
Section Table Size;
Rows – the number of rows in the table;
Columns – the number of columns in the table;
Table Width – the table's width in pixels or as percentage % of the width of the
browser's window;
Border Thickness – the thickness of the table's border;
Cell Padding – the space between the cell contents and its border. A value of 0 will
leave no space;
Cell Spacing – the space between the cells without the frame. If you do not want a
space between the cells, specify 0. An empty option will use a value of 1 by default. The
default options may be changed by selecting a table first, Properties panel, and section Table
Size;
Section Header – options for the content of the heading cell: None – no heading cell,
Left – for rows only, Top – for columns only , Both – for both rows and columns.
Heading rows and columns describe the content. They are common for tables with data and
are not used when tables are set up for the sake of design and situation of different elements. Header
option has an attribute for scope – thus, the row and column heading cells content is considered the
identification of each cell.
Example: If you specify the option for top column title Top and you input Order in the
topmost cell of the first column, then the content of the rest cells in the column will begin with the
word Order.
Caption – it is visible to all visitors and can be aligned to the top, bottom, left or right of the
table.
Summary – the summary information is not displayed on the webpage. It only describes the
table's designation and context.
When a table is selected, horizontal and vertical lines are displayed. These mark the width and
the height of the rows and columns respectively. If you click outside the table, the lines disappear.
Table visual aids can be enabled/disabled in View/Visual Aids/Table Widths.
To move from cell to cell – use Tab. If the input text is long, the table automatically adjusts
the respective column's width to take the text. The top row is heading and the cell content is centered
and bold type.
2. Formatting cells – Properties panel
a) cell background – with Properties/BackGround Color (Bg) you can choose a background
color for the cell, button BackGround URL of cell selects an image.
b) automatical table formatting:
1) Commands/Format Table…
2) a dialog box Format Table – choose one of the proposed optional formats. This tool
is disabled for tables with headings.
c) alignment of cell content – panel Properties, tick Horz – horizontal alignment, Vert –
vertical.
11. Financed under IPA Bulgaria – Macedonia Cross-border Programme 2007 - 2013
11
d) No wrap – the text cannot be shown in multiple lines; the cell width gets bigger in order to
take the whole information; Header – specifies the selected cell as heading; the cell content is
centered and bold.
e) border color – button Brdr, Properties panel.
3. Sorting a table
You can sort the content of one column (or more). Tables with merged cells cannot be sorted.
1) select the table
2) Commands/Sort Table
3) A dialog box opens - Sort Table with the following options:
Sort By – specifies which column is to be sorted;
Order – whether the content is to be sorted alphabetically or numerically;
Then By – defines a second sorting criteria;
Sort Includes the First Row – whether the first row is included in the range
Sort Header Rows, Sort Footer Rows – whether the heading rows will be sorted too;
Keep All Row Colors The Same After the Sort has been Completed – if the option is
checked, row colors attributes do not change for the same data.
Example: Let us sort a table the first row of which is colored and after the sorting the content
of the first row moves to the second row. If the option is checked, then the color, too, will move onto
the second row. Alternatively, the color remains on the first row.
4. Modifying a table
a) To modify the size of rows and columns – Properties panels, fields W and H
b) Insert a new row/column:
1w.) Place the cursor in the last cell of the table and press Tab
2w.) Click in the last row/column, Modify/Table/Insert Row, Insert Columns, Insert
Rows or Columns
c) To split cells
1) Select a cell
2) Properties panel, button Split Cell or Modify/Table/Split Cell
d) To combine cells
1) Select the cells
2) Properties panel, button Merge Cell or Modify/Table/Merge Cell
You can combine any number of cells as long as their selection form a rectangular shape.
5. Nested tables
1) Set up two tables
2) Fill in the table that you want to insert into the other table
3) Select the table; Edit/Cut
4) Click in the cell of the second table where you wish to insert the first one;
Edit/Paste.
12. Financed under IPA Bulgaria – Macedonia Cross-border Programme 2007 - 2013
12
SUBJECT 4: Text input in the webpage
1. Text input
1w.) Direct input in Dreamweaver's screen
2w.) Text copy from other applications
3w.) Open an HTML document
4w.) Open text files directly in Dreamweaver's screen
Dreamweaver can open wordprocessors' text files as long as they are saved as ASCII text
files.
Text files (.txt) always open in a new window in Code view. To preserve the lines of the
ASCII files, you need to change the setting of Dreamweaver Line Break Type:
1) Edit/Preferences
2) A dialog box opens Preferences, Category list, Code Format
3) Line Break Type - CR LF
2. Setting up the content structure
HTML has six heading levels. Level 1 is the largest font, and level 6 – the smallest. When you
specify a text as heading, some space is automatically added to the line; this can me changed only in
CSS:
1) we select the heading 2) In Properties, menu Format, Heading 1- 6
3. New lines
To create a new line without space above it (new single line), you can do the following:
1w.) New line (line break) – Shift + Enter – note that this is a new line and not a new
paragraph, therefore you do not have additional space between the lines;
2w.) Insert/HTML/Special Character/Line break;
3w.) From Insert bar, tab Text, menu Characters, Line break;
4. Non-breaking space
It is inserted between characters, words or other elements that should not be separated as
mathematical equations, proper names or dates.
We place the cursor somewhere in between the words
1w.) Ctrl + Shift + Space;
2w.) Insert/HTML/Special Characters/Non-breaking Space;
3w.) The Insert bar, tab Text, menu Characters, Non-breaking Space;
5. Text alignment
There are five alignment alternatives: Default (no alignment is specified), Align Left (text
aligned to the left margin), Align Center (aligned to the center), Align Right (aligned to the right) as
well as Justify in panel Properties. The best alignment styles for text and images are provided with
CSS.
6. Formatting characters
1) Select the text to be formatted
2) Properties panel, buttons B, I or Text/Style
Teletype – characters are displayed with constant width
14. Financed under IPA Bulgaria – Macedonia Cross-border Programme 2007 - 2013
14
These may be with small dots or squares.
1w.) In Properties panel, button Unordered List
2w.) Text/List/Unordered List
3. Additional options
1) click anywhere in the list
2) Properties panel, button List Item… or Text/List/Properties
3) List Properties dialog box opens:
attribute List Type – type of the list
attribute Style – style of the list
attribute New Style – style of different list items (not the whole list)
attribute Reset Count to – change of numbering type starting from the point of
the cursor and on
4. Lists of definitions
These lists comprise of terms and their definitions. The defined term is aligned to the left and
its definition is indented to the right and placed on the next line.
Text/List/Definition List
5. Nested lists
Nested lists can be of the same type as of the parent list or different. When inserted in other
lists, the nested items receive different numbers. In bulleted lists, the leading symbols (bullets) are
different.
1) select the nested list; 2) button Text Indent
SUBJECT 5: How to work with images
1. Inclusion of images
1. Graphic formats on the web
The process of working with images to save them in a suitable for the web form is called
optimization and it can be done with computer software for graphic design such as Macromedia
Fireworks and Adobe Photoshop. The key consideration at the choice of design format is the best
possible quality at the smallest filesize.
a) GIF (Graphic Interchange Format) – it is suitable for text, vector graphic, images of few
colors or small size. GIF supports an 8-bit pallette, i.e. up to maximum of 256 colors. GIF images
load fast, there are a greater number of options for their optimization and they are used to create
animation and transparency effects. The file extension is gif.
b) JPEG (Joint Photographic Experts Group) – the best choice for photographs (you can save
smaller than the GIF files with a better quality) and images of a great color pallette. JPEG uses a 24-
bit pallette, preserving all nuances. The file extensions are jpg and jpeg.
c) PNG (Portable Network Graphic) – it provides more options for color control – you can
preserve all colors just like with JPEG, or limit their number as with GIF. PNG does not support
animation and such images are not displayed by some older browsers. The file extension is png.
2. Insertion of an image
The image can be:
15. Financed under IPA Bulgaria – Macedonia Cross-border Programme 2007 - 2013
15
- a small image tiled across the page and covering the whole background with the size of the
browser's window. It is not affected by the scrolls.
- a larger image whose location is specified by CSS. They define whether the image will be
tiled horizontally, vertically, in both directions or will not tile at all.
You should save your files before you import an image. The relative paths on the hard disk
will not be recognized on the remote server. If you insert an image without saving the document
beforehand you might get “incorrect” display.
a) In a separate page ( by creating a style)
1) Modify/Page Properties, category Appearance
2) Button Browse – to search for image files. There is an optional provision to specify
the image repetition. You can also define page fields – very useful when the image affects
their size.
b) In all pages of the site (by creating an external style)
1) In case you do not have an external style (rule)already, you will have to create one;
if you have one – panel CSS Styles, list All Rules – select the rule body (it redefines the tag
that contains the document contents), button Edit Style.
2) A dialog box opens, CSS Rule Definition for body in name_of_file, category
Background, button Browse
3) A dialog box opens, Select Image Source – find the image of preference; OK or
Select.
If the image file is not in the local site, then Dreamweaver displays a warning and asks
you to put it in the site. All the pages and elements that you use in the site are in the root
folder. Additionally, you can use elements which are not in the root folder, but can be found
on the Internet. For this purpose you will need their absolute addresses. Such elements are not
displayed in the Document window, so if you want to preview the page with them you will
have to do this in a browser.
4) A dialog box CSS Rule Definition:
- choose a repetition style for the selected image – menu Repeat. The available options are:
Repeat – y – the selected background image is repeated vertically
Repeat – x - the selected background image is repeated horizontally
Repeat - the selected background image is repeated both vertically and horizontally
(enabled by default)
No-Repeat – repetition is disabled
- Attachment – with this option you can specify whether the background image is with a fixed
position or it will scroll with the rest of the page (the option cannot be used with not repeated
images).
- Horizontal position and Vertical position – they are used to control the background image
position. The horizontal position values are left, center, right, and the vertical position ones - top,
center, bottom.
3. Deletion of an image
1w.) Modify/Page Properties, Appearance category, field Background – delete the name
of the file
2w.) panel CSS, Properties list, Background attribute– change or delete the name of the file
4. Placing images in the pages
1) In the Insert bar, Common category, Images menu– choose Image (or Insert/Image)
16. Financed under IPA Bulgaria – Macedonia Cross-border Programme 2007 - 2013
16
2) A dialog box opens, Select Image Source – select an image of preference
Preview images – while searching, you can see what the image looks like
Look in – select the folder you want to search in
Files of Type – use this option to filter the displayed files by file type
File name – displays the name of the selected file
URL – the path that the document will use to load the image
Relative to: Document (by default) – the path to the image that is relative to the
document; on the right you will see the name of document in which the image will be
inserted. Site Root – the path to the image that is relative to the site's root; the site's name is on
the right
Options for dynamic sites:
○ File System – this is the default method for file selection on sites that do not use server
technology
○ Data Sources – the document is created on application server (on dynamic sites)
3) OK
4) Type in alternative text in the filed of Alternate Text in the Image Tag Accessibility
Attributes; OK . The alternative text will be displayed when users disable images, browsers cannot
display images, an image cannot load or for some other reason the user cannot see the image. The Alt
text should be the image's text equivalent – it should describe its function. For a selected image, the
text can be modified in the Properties panel.
2. Working with images
1. Resizing and refreshing images
1w.) Select the image and change the values in the fields for W and H; press Enter or just
click in the Document window.
The new width and height attributes in the img tag make the image look smaller or bigger, yet its real
dimensions have not been decreased (increased). The filesize in the Properties panel does not
change.
2w.) Click on the selected image's handlers and resize it. To keep the proportions, press Shift
and drag the handler in the bottom right corner.
3w.) Use a graphic editor (for example Macromedia Fireworks or Adobe Photoshop) – this
method gives the smallest filesize.
To restore the original dimensions of the image press the button Reset Image To Original Size which
is in Properties panel (there is a refreshment icon that is on the border line between the W and H
fields).
If you need to use large images or images on other servers, then you can define images of not
so good quality (low source image) which load first. The full image is displayed in the same place
when it has loaded. The low source image is just like a dialog box, it can be 'loaded' and defined in
Properties panel, field low src.
2. Image positioning with CSS
Example: Alignment of an image to the left, text wrapping – to the right of the image
1) Panel CSS Styles, New CSS Rule button
2) ○ Class Selector Type; field Name – type in a name for the CSS file; OK
3) A dialog box opens, CSS Rule Definition, Box category
17. Financed under IPA Bulgaria – Macedonia Cross-border Programme 2007 - 2013
17
All elements in the document are mapped in rectangular areas called boxes. In CSS this concept is
used to control the objects' appearance, position, etc. There are blocks of boxes and each box can
hold other boxes in it.
Choose left in float menu (floating); OK
4) Select an image in the Document window
5) Properties Panel, Class menu– choose the name of the external file in step 2)
3. Naming an image
Use short names with small letters, do not include white spaces and special symbols. These
are only internal names.
1) Select the image.
2) Properties panel, type the name in the filename text field (the top left of the panel,
right under the image size).
4. Image borders
1w.) Through definitions in CSS
1) If you have already created CSS to manipulate the image, go to the CSS Style panel,
All Rules list, press button Edit Style; if you do not have a CSS style – create an external style
(rule) to control the image.
2) A dialog box CSS Rule Definition opens, category Border – Set your preferences
for Style, Width, Color; OK
2w.) Through the attribute border of the img tag
1) Select the image
2) Properties panel, field Border – specify your preference
When the image is also a link, the border color will be the default Link Color (unless there is
a CSS style).
5. Adjustment of margins around images
Margins are measured in pixels.
1w.) In CSS – each side of objects can be separately controlled
1) Same as in 4.1)
2) A dialog box CSS Rule Definition opens, category Box
In Margin uncheck the Same for all field and make adjustments for Top, Right, Bottom, Left;
Enter.
2w.) Through the attributes H space, V space of the img tag – they add the same margin on
both sides of the image (you cannot add a space to just one side as in CSS)
1) Select the image
2) Properties panel, fields H space, V space – input your preference
6. Preserving a space for an image
If an image is not available at the time of the page design, then you may use a placeholder. It
preserves the space and gives an idea of how the final image will look like in place and between the
other elements.
1) Place the cursor at the insertion point;
2) On Insert bar, category Common, menu Images, option Image Placeholder
3) A dialog box Image Placeholder opens – set up your preferences (Name, Width, Height,
Color, Alternate text); OK
18. Financed under IPA Bulgaria – Macedonia Cross-border Programme 2007 - 2013
18
The reserved space is indicated in the Document window. It is filled in with the specified
color and states the image file name and size. In the browser – you will see a missing image icon in
its place + alternative text in a rectangular box with the size and color, specified in the dialog box.
7. Replacing a placeholder (or one image with another)
1) In the Document window – double click on the placeholder.
2) Select Image Source dialog box opens – select an image; OK
3) The image is displayed in the space of the placeholder in the Document window. The
filename and the alternative text are not brought to the foreground of the image.
SUBJECT 6: Hypertext and image links. Insertion and linking to named anchors.
1. Designation
These links direct the users to documents in the site or other resources on the web.
2. Types.
a) Relative – they are limited to the same site and refer to objects located in the site's folders.
Use only that portion of the path that is external for the current referring document.
b) absolute – they provide the full web address of a site or information resource.
3. Creating hyperlinks.
a) Relative
1) Select the word (phrase)
2) Properties panel, button Browse to search for a file
3) Select a file on the hard disk; press OK – the name of the file is displayed in the text
field Link of the Properties panel
b) Absolute
1) Select the word (phrase)
2) Properties panel, text field Link – type in the target's absolute address; press Enter;
c) A hyperlink to an email address
1w.) Simultaneous insertion of the text and email address
1. Click at the insertion point
2. Insert bar, category Common, button Email Link (or Insert/Email Link)
3. A dialog box Email Link: in the Text field – input your name; in field E-mail
– type in your email address;
4. OK – the text is displayed on the page as a hyperlink;
2w.) Creating a link to an existing text on the page
1) Select the text
2) Insert bar, category Common, button Email Link (or Insert/Email Link)
3) Dialog box Email Link , the selected text will be displayed in the Text field
3w.) 1) Click at the point of preference
2) Input the text mailto: and the email address immediately after the word in
the field Link of the Properties panel
4. Modifying a link's destination.
1) Click anywhere in a link
2) Make the necessary changes in the Link field in the Properties panel.
19. Financed under IPA Bulgaria – Macedonia Cross-border Programme 2007 - 2013
19
5. Anchor. A certain spot in the page referred to by a link.
6. Insertion of an anchor and creation of an internal link to it.
1) Modify/Page Properties, category Links – set a color for hyperlinks
2) Place the cursor right before the word which will be referred to by a link
3) 1w.) Insert/Named Anchor
2w.) Insert bar, category Common, Named Anchor
4) A dialog box Named Anchor opens, in the text field Anchor Name – type a name for the
anchor
5) Select the text to be a hyperlink.
6) 1w.) Properties Panel, panel Link – input #anchor name. The # symbol is mandatory as it
instructs the browser that the link is internal.
2w.) With the mouse drag the Point to File icon on Properties to the anchor. Release the
mouse button when the cursor is over the anchor. The #anchor name is displayed in the text field
Link. This method eliminates typos.
7. Insertion of an anchor and creation of an external link to it.
1w.) 1) Create anchor in the file of reference.
2) Open the file where you will create the link and select the text for the hyperlink.
3) Properties, panel Link – input the name of the file that contains the anchor, #anchor
name
2w.) 1) Open the two files that contain both the anchor and the hyperlink in two separate
windows.
2) Select the link in one file, click on Point to File icon and then go to the designated
anchor in the second file.
8. Editing anchors.
1) Click on the anchor.
2) Properties, field Name – modify the anchor's name.
9. Setting a color and format for hyperlinks.
Unless otherwise specified, a browser will display the page's hyperlinks of its default
settings. They may differ for different browsers. Hyperlinks' color should be in contrast (but not
harshly) with the background and the other elements, so that they are distinctively visualized.
1) Modify/Page Properties…, category Links
2) We set link properties
Link Font – (same as page font) – hyperlinks inherit the styles created for the
document
Link Color – the color of the link before its being visited (the default color is blue)
Visited Links – the color of the link after it has been visited (the default color is purple)
Rollover Links – the color of the link when the cursor is rolled over it
Active Links – the color of the link on mouse click
The color of the link is a hexadecimal number. Or you can click in the color field on the left
of the text field – a palette of color hues opens (button – opens a menu with other color palettes)
Underline Style: - underline style enabled
Always Underline – underline style constantly turned on
Never Underline – underline style disabled
20. Financed under IPA Bulgaria – Macedonia Cross-border Programme 2007 - 2013
20
Show Underline Only on Rollover – underline style enabled only on cursor rollover the
hyperlink
Underline on Rollover – the underline disappears once the mouse loses focus on the
link.
3) OK
SUBJECT 7: Insertion of flash animations and flash buttons
1. Creating flash text
a) Description – Text of type Flash combines the best characteristics of text and images. You
can use any font and create the text in Dreamweaver. The created text is then saved as a Flash file
with extension .swf.
b) Creation:
1) Go to the insertion point.
2) Insert bar, category Common, menu Media, Flash Text
3) A dialog box Insert Flash Text opens with the following options:
- Font – font
- Size – size
- Color – color
- Text – text to be displayed on the page
- Rollover Color – a second color on mouse rollover the text
4) In the field Save as – input a name and choose extension .swf.
5) The flash text is displayed in the Document window and dialog Flash Accessibility
Attributes opens
6) In Title – enter the text
c) Changing the size of flash text
1) Select Flash text.
2) Drag one of the handlers to change the text size.
Text of type flash is a vector image that preserves its contents when it is resized or scaled. To
keep the dimensional ratio, while resizing the flash text you should keep button Shift pressed.
To view available effects, in panel Properties, press button Play
d) Modification of flash text
1) Double click on Flash text (if it is not enabled, first press button Stop on panel
Properties)
2) A dialog box opens Insert Flash Text – make the necessary changes
3) Button Apply – to see the result
2. Insertion of flash buttons
A flash graphic is vector, such files are of a small size and they are loaded faster compared to
raster graphics. You can insert flash button without having flash.
a) Flash buttons' status depending on the mouse cursor point and whether a mouse button is
pressed or not
1) The button's status when the mouse cursor is placed over it;
2) The button when the mouse cursor is placed over it but no mouse button is pressed;
21. Financed under IPA Bulgaria – Macedonia Cross-border Programme 2007 - 2013
21
3) The button when the mouse cursor is placed over it and the mouse button is pressed;
b) Creation:
1) The Insert bar, Common category, Media menu, Flash button icon
2) A dialog box Insert Flash Button
3) In the Style field – choose a style
Button Text – the text to be seen on the button
Font and Size – font and size of characters
Sample – preview of the button's appearance. To see how it works simply move
to mouse over the button.
Bg color – button's color
Save as – input a name with extension .swf; OK;
4) The Flash Accessibility Attributes dialog box opens – in the Title field – input the
title of the button (the text)
5) In the Properties panel press the Play button – you can see the button the way it
will be displayed in the browser.
c) Modifying of flash buttons
1) Double click on the Flash button icon
2) A dialog Insert Flash Button opens – make the necessary changes
3) Press the Apply button – you will see the result
d) Addition of new button templates
1) Create buttons in Flash as SWT Generator Template
2) Save these in ConfigurationFlash ObjectsFlash Buttons of the Dreamweaver's
folder.
3. Insertion of flash animation.
You can insert flash animation only if it has already been created. This type of animations
cannot be designed directly in Dreamweaver, you will need to use Flash.
1) Start a new paragraph.
2) On the Insert bar, Common category, Media menu, Flash
3) In the Select file dialog box – choose a video with an extension .swf. Browsers will not
display files of types .fla .swt. Press the Select button.
4) A dialog box Object Tag Accessibility Attributes opens – in the Title field – input the name
of the Flash animation file.
5) On the Properties panel:
Loop – check the option out for constant repetition;
Autoplay – check out if you want the animation to start automatically;
Play button – press the button to view the animation;
Stop button – the button stops the animation.
SUBJECT 8: How to create a web photo album
How to make a photo album of various designation using Dreamweaver? For any purpose
from showing family photos to friends to offering catalogs, etc. In your gallery, each photo has to
have a Thumbnail, in other words a smaller variant of the photo that will be displayed prior to the
22. Financed under IPA Bulgaria – Macedonia Cross-border Programme 2007 - 2013
22
real photo and will be referring to it. First decide on which photos to include in the gallery and place
them in one folder. Do not worry about their size, Fireworks will take care of that and will reduce
them and create their Thumbnails. And you will also have to start Fireworks…
1) Open one of your pages in Dreamweaver.
2) Make a separate folder for your photos. Give it a name like 'album', 'photoalbum' or
whatever comes to your mind.
3) Back in Dreamweaver, go to Commands --> Create Web Photo Album. You will see a box
with a lot of options and settings in it. Here is a list with their designation.
Photo Album Title – You will type the name of your album here.
Subheading Info – This field is optional, however, the text you input here will be
displayed with the big photo.
Other Info – You will see this text on your page along with the big photo.
Source Images Folder – Press the Browse button and point to the folder that contains
all your photos.
Destination Folder – This folder has a special function, it was created in step 2). So
click on the Browse button and point to it;
Thumbnail Size – You can specify the size of the thumbnails on your page, so make
your adjustment (Recommendation: 100 x 100 is the best size)
Columns – Set up your preference for the number of columns in which the thumbnails
will be arranged on the screen. (Recommendation: 4 or 5 is a good number)
Thumbnail Format – You can use either JPEG or GIF for your Thumbnails.
Photo Format - ou can use either JPEG or GIF for your big photos.
Once you have done the settings, press OK. Now Fireworks will start creating all those
smaller images we already mentioned earlier and which we called Thumbnails. That will take a few
minutes depending on the total number of the photos in the folder and their size. When Fireworks has
done its job, you will be able to look at your web album.
4) A new page with thumbnails will be displayed in your page. It will have the name
index.html. Now you will have to place your template on the page with the thumbnails.
5) Below the name of your photo album there will be three other folders: Thumbnails,
Images, and Pages.
- Thumbnails – all small images – icons will be in this folder.
- Images – all your photos (of original size) are here.
- Pages – all the pages that have links in them to the Thumbnails.
SUBJECT 9: Interactive forms. Insertion of rollover images
Interactive elements and user feedback are essential web site components. An interactive
process implements an action and its response, it is dual-direction communication.
1. Advantages.
a) Web site contents is easy to read and comprehend;
b) Direct and easy navigation through all the pages.
2. Tools for insertion of interactive elements.
a) Dynamic pages and use of database;
23. Financed under IPA Bulgaria – Macedonia Cross-border Programme 2007 - 2013
23
b) Macromedia Flash;
c) Quick Time Virtual Reality (QTVR) – a format that supports 360-degree panorama views
and interactive components;
d) JavaScript – used to create scripts executed for the user by the browser;
e) Java Server Pages (JSP) – scripts executed by the server and then the result is sent to the
user;
f) Behavior in Dreamweaver – a dialog with programs with JavaScript code that can be easily
included in the web site.
Behaviors are combinations of one action or series of actions and an event.
The action is what takes place as a consequence of the user's step ( for example replacement
of images).
The event is what provokes the action (for example the mouse rolls over an image or is
clicked).
- predefined behaviors
- addition of behaviors
- creation of custom behaviors
3. Insertion of a rollover image.
This is an images that changes when the user places the mouse over it. This is done with 2
images that are placed in the same position.
1) The Insert bar, Common category, Images menu, Rollover Image button (or
Insert/Interactive Image/Rollover Image)
2) A dialog box Insert Rollover Image opens
Image Name – image name (the default names are Image1, Image2, …..). Do not
include spaces or special symbols and do not start the name with a number.
Browse buttons – choose the files for the original (the first) and the alternative
(second) images. The two images must have equal dimensions.
Alternate Text – input Alt text
Preload Rollover Image – the browser loads the second image at the display of the
page. If the option is not enabled, the second image will load only after the user has placed the mouse
over the first image.
When Click Go to URL – use the Browse button to select the file that will be the link
for the rollover image. It will be shown in the Link field on the Properties panel when the rollover
image is selected.
24. Financed under IPA Bulgaria – Macedonia Cross-border Programme 2007 - 2013
24
SUBJECT 10: Developing new styles. Internal and external styles.
1. Definition.
a) A style – also called a rule – is a set of attributes that defines and controls the appearance
of each element. Each style has a name that tells the browsers how to display a certain element;
b) Style Sheets – a group of styles;
c) Cascading styles – they define the hierarchy and priority of the styles. Each new style in a
page predefines the previous style.
2. Designation.
Styles control the format, the appearance and the layout of the elements in the web pages. All
browsers of versions 4.0 and higher support CSS. The CSS style code is placed in the head tag of the
HTML page.
3. Types.
a) Internal – it is defined and used only in the current document (when certain formatting is
needed just for that page). Dreamweaver creates it automatically when you format a text or a page.
b) External – a text file containing formatting attributes (only CSS code). All pages that are to
be displayed with the created styles must contain a reference to it. This is used when the site is
designed to have one layout for all its pages.
4. Creating new internal files.
Modify/Page Properties, Appearance category
a) Specify the background color – Background Color
b) Modify the font – Page Font, the combinations of fonts in the Page Font menu tell the
browser how to display the text. If the first font in the list is not available, then the browser tries to
use the second. If it is not available either, then the browser attempts the third font. When neither of
the listed fonts is available, the browser applies its own default font.
c) Change the font size – Size
d) Choose the text color - Text Color
25. Financed under IPA Bulgaria – Macedonia Cross-border Programme 2007 - 2013
25
5. Creating new external files.
These are applied automatically on the contents included in them – in all documents that refer
to them.
A) Creating a style for a tag
1) Place the cursor in the text using the tag and select the tag in the Tag selector
2) In the CSS Styles panel, New CSS Rule icon
3) A dialog box New CSS Rule opens. Choose the Tag radio button
4) The Tag text field should be displaying the selected tag without the angle brackets < >
5) In the Define in field press the menu radio button and choose the referenced external set of
styles; OK
6) A dialog CSS Rule Definition …. in ….. opens
Put in your preferences; OK
The file of the external styles opens automatically in a new tab of the Document window. You
can review CSS files in the Code view. In case you intend to make changes in it, make sure you have
saved the CSS file first.
B) Creating a text formatting style with paragraph tags
1) Place the cursor in the paragraph – the Tag selector bar shows the HTML tag p for
paragraph definition
2) In the CSS Styles panel, New CSS Rule icon
3) A dialog box New CSS Rule opens. Choose the Tag radio button.
4) The Tag text field should contain p. If it is not there, include it.
5) In the Define in section press the menu radio button and select the document that will use
the styles; OK
6) A dialog box opens CSS Rule Definition …. in …..
Make adjustments; OK
C) Creating a style for predefined list formats
1) Place the cursor in the first line of the list. Click on the ul, ol in the Tag selector (these are
HTML tags for the whole list; li – refers to specified items in the list)
2) In the CSS Styles panel, New CSS Rule icon
3) A dialog box New CSS Rule opens. Choose the Tag radio button.
4) The Tag text field should contain ol. If not – select it.
5) In the Define in field press the menu radio button and choose the referenced external set of
styles; OK
6) A dialog CSS Rule Definition …. in ….. opens, Type category – make your adjustments;
OK.
This student’s handbook has been produced in the frame of the project " E-service
knowledge for social cohesion ", funded by IPA CBC Bulgaria - Macedonia, CCI number
2007CB16IPO007. The Project partners take full responsibility for the contents of the
handbook thus it does not represent the official views and policies of the European Union and
the Managing Authority.
