Web Programming and Internet Teaching Methods

Transcription

1 Web Programming and Internet Teaching Methods Students handbook in English Municipal High School Gjorche Petrov Kriva Palanka, 2014

2 CONTENTS WEB DESIGN AND CSS SUBJECT 1: Preparation for development of a web site Research Planning and building the structure Design and development of the site Testing Maintenance....5 SUBJECT 2: The Dreamweaver 8 Interface Start working Setting up a local site Starting a new HTML page Saving a webpage - File/Save Rules to observe when naming a file The interface Working with panels and documents Insert bar (Insert) Page title Page preview...10 SUBJECT 3: Webpage designing with tables. Setting up tables. Formatting tables Setting up a table Formatting cells Properties panel Sorting a table Modifying a table Nested tables...14 SUBJECT 4: Text input in the webpage Text input

3 2. Setting up the content structure New lines Non-breaking space Text alignment Formatting characters Adding special characters Horizontal lines Automatic date insertion Lists...16 SUBJECT 5: HOW TO WORK WITH IMAGES Inclusion of images Working with images Editing images Creating image links and image mapping...22 SUBJECT 6: Hypertext and image links Insertion and locking to named anchors Designation Types Creating hyperlinks Modifying a link's destination Insertion of an anchor and creation of an internal link to it Insertion of an anchor and creation of an external link to it Editing anchors Setting a color and format for hyperlinks SUBJECT 7: Insertion of flash animations and flash buttons Creating flash text Insertion of flash buttons Insertion of flash animation SUBJECT 8: How to create a web photo album

4 SUBJECT 9: Interactive forms. Insertion of rollover images Advantages Tools for insertion of interactive elements Insertion of a rollover image SUBJECT 10: Developing new styles. Internal and external styles Definition Designation Types Creating new external files

5 EB 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. 5

6 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: - 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. 6

7 2. Setting up a local site 1. How to set up 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 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. 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

8 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 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. Dreamweaver automatically adds an HTML extension to the name of the file for HTML documents. If the default extension is not HTM then go to Edit/Preferences, category New Document and specify HTML in the input text field Default Extension. 8

9 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

10 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 formats: - If in a list menu format, you can change the format and display it as a combination of tabs with button Common/Show as Tabs; - If the format is the tab menu, you can switch to the list menu format 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, field Title). 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 designing 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. 10

11 1. Setting up a table 1w.) Insert bar, category Layout, button Table; 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. 11

12 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. table. Caption it is visible to all visitors and can be aligned to the top, bottom, left or right of the 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. 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. 12

13 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) modifying the size of rows and columns Properties panels, options 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) Dividing cells 13

14 1) select a cell 2) Properties panel, button Split Cell or Modify/Table/Split Cell d) Combining 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. 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 14

15 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 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 7. Adding 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 15

16 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) 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 16

17 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 1.Inclusion of images 1. Graphic formats on the web SUBJECT 5: HOW TO WORK WITH IMAGES 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: - 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 17

18 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) 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 18

19 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 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) 19

20 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 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 20

21 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. 3. Editing images 1w.) With an external graphic editor it must be installed on the computer and set up as follows: 1) Edit/Preferences 2) A dialog box Preferences opens it is used to link external graphic editors as default editors of files with different extensions. 3) Category File Types/Editors 4) Choose gif from the Extensions list. Press button + above the list Editors and select a graphic editor, such as Fireworks; button Make Primary 5) Repeat step 4) for extensions.jpeg and.png; OK 6) Select an image 7) Panel Properties Button Edit opens and modifies the image in an external application Button Optimize In Fireworks changes the image's shape, the quality (for JPEG) and the color pallette (for GIF) Button Resample changes the image resolution. It is good to start with a higher resolution and gradually reach a lower resolution of preference. 2w.) With the use of the built-in tools of Dreamweaver and Fireworks When you choose a tool, a message is displayed that the action will change the original image on the disk. Choose OK. This modification affects all copies of the image in the site as well. If you do not want this to happen, you should make a copy of the image, give it a different name and then work with it. - Cropping 1) Select the image 2) Properties panel, Crop tool You can see a selection area on the image. The area has central and end handlers on its sides. The selection is smaller than the image and it has almost the same proportions. The image inside it is clear. When you place the cursor in its center, it takes the shape of an arrow cross and at this point the selection can me moved. The image can be resized with the help of the handlers. 3) Modify the selection area as you like but leave it smaller that the image; Enter (or double click in the selection or click on the Crop icon in panel Properties) The is cropped by the selection. The size of the image is reduced. To undo the action, click in the Document window off the image (or Edit/Undo Crop or Ctrl+Z). - Brightness and contract 1) Select the image 2) Properties Panel, tool Brightness and Contrast 3) A dialog box opens Brightness/Contrast which has 2 slide switches with ranges from -100 to Make your adjustments.; OK - Image sharpening (acutance) 1) Select the image 21

22 2) Properties panel, tool Sharpen 3) The Sharpen dialog box opens with a slide switch of 0 to 10. Make your adjustments; Press OK. 5. Creating image links and image mapping 1. Creating image links 1) Select the image 2) Panel Properties, text field Link type the path to the linked object To refer to a document that is not in the local file system or the site's root folder, you will need to provide the object's absolute address. Absolute paths start with (HyperText Transfer Protocol) and they imply that the user is connecting to a web server. The rest of the absolute path is the site's address. All links to documents of external sites are absolute. 4) Save the file and test it in a browser 2. Image mapping (image map) Image mapping is used to devide an image into several areas called hotspots This method is useful at creating geographic maps. a) Creating a hotspot 1) Select the image 2) Panel Properties, text field Map (if hidden, click on the down arrow ( ) in the bottom right of the panel Properties) input a mapname (do not use spaces and special symbols) 3) Panel Properties, choose an instrument: Rectangular Hotspot creates a rectangular hotspot (draw a rectangle around the targeted area in the image) Shift + Rectangular Hotspot - creates a square hotspot Oval Hotspot - creates a circle hotspot Polygon Hotspot creates areas of complex shapes, each mouse click adds a new point; a straight line connects it to the next point b) resizing a map 1) Properties panel, tool Pointer Hotspot 2) drag a handler (so that the area includes only one hotspot) c) moving a hotspot place the cursor in it a drag it d) deletion of a hotspot select the hotspot and press Backspace or Delete e) addition of Alt text to a hotspot it describes what the link refers to - Properties panel, text field Alt for definition of the hotspot's reference - Properties panel, text field Hotspot Link input the path to the target Target specifies how the target is to be opened. SUBJECT 6: Hypertext and image links Insertion and locking to named anchors 1. Designation These links direct the users to documents in the site or other resources on the web. 22

23 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 address 1w.) Simultaneous insertion of the text and address 1. Click at the insertion point 2. Insert bar, category Common, button Link (or Insert/ Link) 3. A dialog box Link: in the Text field input your name; in field type in your 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 Link (or Insert/ Link) 3) Dialog box 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 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. 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. 23

24 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 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 24

25 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; 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 25

26 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 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. 26

27 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; b) Macromedia Flash; 27

28 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. 28

29 1. Definition. SUBJECT 10: Developing new styles. Internal and external styles. 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. 29

30 4. Creating new internal styles. 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 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. 30