Handbook for students

E-Services

and

Web Programming STUDENT MANUAL

Vocational High School of Economics and Management

„Yordan Zahariev”

Kyustendil 2014

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

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


4

1. Definition. .................................................................................................................................................................... 24

2. Designation. ................................................................................................................................................................. 24

3. Types. ........................................................................................................................................................................... 24

4. Creating new internal files. .......................................................................................................................................... 24

5. Creating new external files. ......................................................................................................................................... 24


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

- 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

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

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

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

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

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

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


13

7. Inserting special characters

We can add characters that do not have a respective button on the keyboard. These have

special HTML codes and alternative key combinations.

The Insert bar, Text page, menu Characters, choose a symbol

Example: © - copyright information

The Characters menu is not complete. For additional symbols – Insert/HTML Special

Characters/Other

8. Horizontal lines

a) Insertion – Horizontal lines (horizontal rules) run across the page and visually divide it into

sections.

1w.) The Insert bar, HTML page, button Horizontal rule

2w.) Insert/HTML/Horizontal rule

A horizontal line places with preliminary set up spaces above and below, this can be modified

only in CSS.

b) Horizontal line properties – they are displayed in the Properties panel when the line is

selected.

W – line width

H – line height

Pixels – measurement units (pixels, percent)

Shading – shadow

Align – alignment style

Class – CSS styles

9. Automatic date insertion

Dreamweaver provides you with an option to insert date and time and trace the time of the

last page modification. The program updates these automatically each time the page is saved. This

date is not dynamic and it does not change to reflect the time when the page is just read.

1w.) The Insert bar, category Common, button Date

2w.) Insert/Date – a dialog box opens:

Day format – choose the day

Date format – choose a date format

Time format – choose a time format

Update automatically on save – if the option is checked, the is automatically

updated each time the page is saved, the date format can me changed at any time by:

1) Set the date

2) In Properties panel, Edit date format – An Insert date dialog box opens –

make the necessary changes; OK

10. Lists

There are three types of lists in Dreamweaver: numbered (ordered), bulleted (unordered) and

lists of definitions (definition lists).

1. Numbered lists

1w.) In Properties panel, button Ordered List

2w.) Text/List/Ordered List

2. Bulleted lists (lists starting with symbols)


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

- 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

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

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

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

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

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

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 Configuration\Flash Objects\Flash 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

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

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

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

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


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)


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.


26

Education

Handbook for students