Lesson 7: Web Design Applications
BIT Semester 1 - Application Packages
Duration: 08 Hours (04 hrs of Lecture + 04 hrs of Practical) Learning Outcomes:
• Determine the basic principles of designing a web page • Identify the different types of Web Design Applications • Use the Macromedia Dreamweaver environment to create web pages • Develop the basic skills needed to design a web page • Create and use Cascading Style Sheets
Overview It is an interesting thing to find everything on the web. We don’t need to go from place to place for learning, buying and selling and even for entertaining with music, films or games. All this is provided by the Internet with its facility World Wide Web. We use a Browser like Internet Explorer or Mozilla Firefox to browse pages from Internet, from our network place or even from our own computer. How are these pages created? Can we also create pages like that and browse from a browser application? If you save a web page from Internet using the browser’s File drop down menu, then the next time you can open it from your computer. But if you click on a link on that page only some of the links may work. How are the contents on these pages written? Let’s see the source from the browser application. Move your cursor to the View option on the Menu Bar and select the option Source. It’s a huge content? What is this language? If you try to read it, at least you’ll be able to read part of it. But it seems little familiar and we can easily grab the pattern of writing. You can see “<” marks and “>” marks covering meaningful words and within two terms as that you see a paragraph, a sentence, a phrase, a word or a character. Is there a way to write all those stuff quickly and accurately? Yes, there are computer application packages and by using one like that you’ll be able to author a fully interactive, attractive and a professional looking web page without knowing anything about an authoring language.
IT1303
©UCSC
1
Lesson 7: Web Design Applications
BIT Semester 1 - Application Packages
Table of Content 7.1
Designing Web Pages for Different Uses [5 min] 7.1.1
What are Web Pages and Web Sites?
7.1.2
Designing Web Pages
7.1.3
Design considerations for different Web Sites
7.2
Web Authoring Languages [5 min]
7.3
Common Features of Web Design Applications [5min]
7.4
Getting Started with Macromedia Dreamweaver [30 min]
7.5
7.6
7.7
IT1303
7.4.1
Starting the Program
7.4.2
Getting Familiar to the Working Environment
7.4.3
Working with Different Types of Views
7.4.4
Toolbars
7.4.5
Panel Groups
7.4.6
Property Inspector
7.4.7
Status Bar
Basic File Operations [30 min] 7.5.1
Opening a Web Page
7.5.2
Creating a New File
7.5.3
Working with Multiple Web Pages
7.5.4
Closing and Saving Files
Working with Websites [30 min] 7.6.1
Creating a Website
7.6.2
Managing a Website
Working with Headings and Paragraphs [45 min] 7.7.1
Inserting Headings
7.7.2
Format Headings
7.7.3
Inserting Paragraphs
7.7.4
Editing and Formatting Text / Paragraphs
©UCSC
2
Lesson 7: Web Design Applications
7.8
7.9
BIT Semester 1 - Application Packages
Creating Lists [45 min] 7.8.1
Inserting Ordered/Numbered Lists
7.8.2
Unordered Lists
7.8.3
Nested Ordered/Unordered Lists
7.8.4
Modifying List Types and Bullets
Page Property Settings [30 min]
7.10 Creating Tables [1 hrs] 7.10.1 How tables are used in Web Pages? 7.10.2 How to insert a table? 7.10.3 Formatting Tables 7.10.4 How to insert a column or a row? 7.10.5 Merging and Splitting Cells 7.11 Inserting Media Element [45 min] 7.11.1 Inserting Pictures to the Web Page 7.11.2 Formatting Pictures 7.11.3 Adding Sound Files 7.11.4 Adding Video 7.11.5 Inserting Flash Button 7.12 Using Hyperlinks [1 hrs] 7.12.1 Creating Text / Image Links 7.12.2 Image Hotspots 7.12.3 Image Rollovers 7.13 Using Frames [1 hrs] 7.13.1 Creating Frame Structures 7.13.2 Opening Pages into Frames 7.13.3 Handling Hyperlinks within Frames 7.14 Creating Styles [30 min] 7.14.1 What CSS is 7.14.2 How to create a CSS file? 7.14.3 How to attach a CSS file? 7.14.4 How to edit a style?
IT1303
©UCSC
3
Lesson 7: Web Design Applications
BIT Semester 1 - Application Packages
Lesson 7 Web Design Applications 7.1 Designing Web Pages for Different Uses [5 min] 7.1.1 What are Web Pages and Web Sites? Web pages are the files which can be displayed using a web browser application like Internet Explorer, Netscape Navigator, Firefox …etc. Once you create web pages, if you want them to be accessed from other computers connected to the Internet, then you need to have a web Server to hold the web pages. Here, we use the phrase “uploading to a Web Server”. [Web Server is another computer running web server software.] When you have lots of web pages possibly accessed through links connected to the home page, we call it as a web site. The place where the site files are saved is the web address which is used in the Address field of the browser to access the site. 7.1.2 Designing Web Pages In designing web pages you should consider the design of all types of media elements that you are going to use to create the web pages. What types of media are you going to use? Probably you will need text. Other than that you may use graphics, animations, audio and video clips. You should design a common template that can hold any type of media you are going to use in the web site. This design template should describe how and where the media is to be placed. 7.1.3 Design considerations for different Web Sites Design of the web page should be matched with the purpose of creating the web page, the field (commerce, education, government, health, etc.), the target audience and the customer’s taste (to whom you develop the site). Commercial web sites are designed to attract the audience for business dealings. The product information highlighting the best features of the product should be shown first. The photographs or videos of the product can be added to the web pages. If possible the customers should be able to make orders through the web. You may use dark colours and fancy font styles to grab the attention
IT1303
©UCSC
4
Lesson 7: Web Design Applications
BIT Semester 1 - Application Packages
the customers and background music may also be there to attract the site visitors. But if you are designing web sites for educational purpose your designs should support for teaching and learning. You should use light colour backgrounds and dark colour text. Text formatting should be done meaningfully to show or highlight the different levels of topics and key words. Media clips should be selected wisely not to disturb or confuse the learner but to help him/her to acquire the learning objectives fast.
7.2 Web Authoring Languages [5 min] What is Web Authoring? Web authoring is creating web pages. You should use a web authoring language to create the web page. There are different types of web authoring languages like HTML, JSP, ASP, PHP, XHTML and XML which are used in developing web sites for different server platforms and for different uses. What is HTML? HTML (HyperText Markup Language) is the basic but most commonly and heavily used web authoring language. Who ever starts designing and developing web pages should know the HTML basics before using any other Web authoring language. HTML is a tag language using markups to describe the elements on the web page. For example it uses; to tell the browser that this is HTML not plain text,
for the heading 1 style and for the heading 2 style
to start a table structure for a list item…etc. A web page in HTML uses the structure; … (Page information to the Servers and the Browser) … (Content of the Web Page that you see on the Browser) The authored Web pages should be previewed using one or more Browser Applications to check whether your audience having different Browser Applications will see the pages in the same design.
IT1303
©UCSC
5
Lesson 7: Web Design Applications
BIT Semester 1 - Application Packages
7.3 Common Features of Web Design Applications [5min] There are lots of Web Design Applications; Macromedia Dreamweaver, Front Page, Home Site …etc. These Applications are used to design and develop web pages/sites quickly and easily. Most popular Web Design Applications are with the feature called “What You See Is What You Get” (WYSIWYG). That means it supports you to design the media on the working area of the application and save it as a Web page to view it as you designed. Most applications provide you two views as Code View and Design View to author Web pages. They support for more than one Web authoring language. You can select the desired Web authoring language in which you like to create the Web page. The user interfaces of these applications support even a beginner to find Web designing and authoring more easy and interesting. Every element you may need to insert or write into the Web page can be easily done with command buttons available on toolbars or with options available on Menus. Application itself provides you pre-build scripts and codes which can be customized as you want and easily insert into your page. Help is also there to overcome your problems in working with the application.
7.4 Getting Started with Macromedia Dreamweaver [30 min] 7.4.1 Starting the Program You can use the Dreamweaver shortcut icon on the Desktop to start the program quickly or start Dreamweaver Application by selecting Start > Programs > Macromedia > Dream weaver. The program starts with a flash screen showing the product information of the application program and next you’ll see the start page. The start page will help you to select the type of language you want to use for authoring the Web Page. Under the Create new category you can see there are lots of different types of Web Authoring languages and even it supports you to add some more from the Dreamweaver site. It lists you the recently created Web pages on the left hand side of this page, and you don’t need to remember where you saved them to continue with the development next time. If you are running the application for the first time then you will not see anything listed there other than the link to open the existing document from the machine. On the right hand side of this page, it lists you the samples which are already created and can be used for your developments with some modifications to them. You can add your content to those samples and make them look as your own creation.
IT1303
©UCSC
6
Lesson 7: Web Design Applications
BIT Semester 1 - Application Packages
Flash Screen
Start Page If you cannot see the start page in your application then you can set it to be opened using the Preferences dialog box from Edit > Preferences. You have to select the check box, “Show start page” at the “Document options” under the General category and click OK. Before closing the Preferences dialog box you can have a look at it to identify the other important settings on this dialog box.
IT1303
©UCSC
7
Lesson 7: Web Design Applications
BIT Semester 1 - Application Packages
Preferences Dialog Box To start working with Dreamweaver for the first time you may select the link HTML under the Create New category on the Start page to create an HTML page. 7.4.2 Getting Familiar to the Working Environment Once you select an authoring language to create a new page you‘ll get the Dreamweaver working environment adjusted to provide support for the authoring with the selected language. The Macromedia Dreamweaver working environment is with menus, Toolbars and lots of Panels. Those Window components take lots of space on the Window and sometimes you may feel like closing or removing most of components to get some more space for the Document Window. But you can have more space without closing them. You can click on the buttons available on the borders; left to the Panel groups and top of the Properties Inspector. You can see the button available on the left border as the figure below;
Once you click on this button (the button left to the panel groups) then the panel groups collaps and if you click on the button again the panel groups expand.
IT1303
©UCSC
8
Lesson 7: Web Design Applications
BIT Semester 1 - Application Packages
Manu Bar
Panel Groups
Insert Toolbar
Document Toolbar Document Window
Files Panel
Property Inspector
Dreamweaver Design Workspace 7.4.3 Working with Different Types of Views Dreamweaver provides you a very nice working environment. It displays three views as Code View, Design View and Split View. If you are a beginner and weak in or have no knowledge of HTML then you can use the Design View quite comfortably and create professional Web Sites. If you are an expert and quite familiar with the Authoring language you are using then you can work in the Code View. If you are not a beginner or not an expert then you may use the Split View (Code and Design Views) where you can see what is happening in the Code View at the time of designing something in the Design View. To select a View you can use the Document Toolbar open it from View > Toolbars > Document. The Document toolbar appears at the top of the Document window.
IT1303
©UCSC
9
Lesson 7: Web Design Applications
BIT Semester 1 - Application Packages
7.4.4 Toolbars There are three most useful toolbars in Macromedia Dreamweaver; the Insert Toolbar, the Document Toolbar and the Standard toolbar. You can get any of these toolbars from View > Toolbars. Insert Toolbar – This toolbar is located just below the Menu Bar. There are two arrangements of this toolbar; as Tabs or as Menus.
As a Menu Here (in the figure as a Menu), you can see only the commands available under the common category. If you want to select an option on another category first you have to select the category name by clicking on the down arrow next to Common. You can shift from this toolbar arrangement to the other by clicking on the down arrow next to Common and selecting the option As Tabs.
As Tabs Tab arrangement is more user-friendly than the other as it shows all available category names in tabs and each tab lists its set of buttons in a row allowing the user to select the required command quickly.
Document Toolbar -
Document Toolbar is the toolbar which lists buttons to shift from one Document Window view to the other. Next to those three buttons you can see the field Title where you can type the Window title of the Web page. What you type here will be displayed on the Browser Title Bar. So, type something meaningful. There is another important button on this toolbar; Page Preview button. You can click on this to preview the Page in a Browser. This will help you to browse the page over the Dreamweaver application
IT1303
©UCSC
10
Lesson 7: Web Design Applications
BIT Semester 1 - Application Packages
Window. Once you have finished checking the page on the browser, you can close it just by clicking on the Close button on the top right hand corner of the window. Standard Toolbar – This toolbar is located just below the Document Toolbar and it contains almost all the commands you’d find on most Standard Windows toolbars. There is only one change that is the Save All button. The Save All button is really helpful when you are editing the site files. All opened site files get listed on the Document Window / Workspace in tabs and you can save them all quicky by clicking on the Save All button.
New - Create a new document Open - Open an existing document Save - Save the current document Save All - Save all open documents
Cut - Cut the current selection Copy - Copy the current selection Paste - Paste the contents of the clipboard Undo - Undo the last action Redo - Redo the last action in the undo history 7.4.5 Panel Groups
IT1303
©UCSC
11
Lesson 7: Web Design Applications
BIT Semester 1 - Application Packages
There are lots of Panel Groups in Macromedia Dreamweaver. You can open any of them using the Window drop down menu. The panels are categorized into groups and Window menu lists them in groups using a separator line. But when you select one panel it opens you the whole Panel Group. All panel groups, are displayed vertically on the right side of the Dreamweaver window. The selected panel is displayed on a tab. You can collapse or expand these panels. To expand a panel group and view its available panels, click on the right arrow in the upper left corner of the group or just click on the name of the panel group. To collapse it you can click on the down arrow or on the name of the panel group. There is a menu on the top right corner of the panel group. You can see the same menu by right clicking o the top left corner of the panel group. This menu helps you to group the selected panel with another panel group, close the panel or panel group…etc.
7.4.6 Property Inspector The Property Inspector lets you specify the properties of the text or object that’s currently selected on the Document Window. The content on the Property Inspector vary depending on the current selection. For example, if you select some text or place the cursor on an area of text, you can see the following panel.
IT1303
©UCSC
12
Lesson 7: Web Design Applications
BIT Semester 1 - Application Packages
The fields and button available on the property inspector show what you can do to the selected elements on the Document Window. You can open the Properties inspector from Window > Properties or by pressing the Ctrl key together with the F3 key. 7.4.7 Status Bar The Status Bar is the small row at the bottom of the Document window. In Dreamweaver 8, it lists you the tag selector, Select Tool, Hand Tool, Zoon Tool, Set Magnification menu, Window Size menu and the document size and the estimated download time.
Zoom Tool
Tag selector
Select Tool
Set Magnification Menu
Hand Tool
Set Magnification Menu
Document size and the Estimated Download Time
By clicking on a tag listed on the Tag Selector you can select the content of that tag on the document. Next, there are three tools listed on this bar. The first one, the Select Tool helps you to select the content on the Document. The second one, the Hand Tool helps you to move the document by clicking and dragging the document from any place to any direction. The third one, the Zoom Tool helps you to zoom in the document just by clicking on the document having selected the tool. To unselect a tool you have to select another. You better select the Select Tool if you are not using the Zoom Tool or the Hand Tool. The Status Bar lists the menu “Set Magnification” next to the Zoom Tool and you can use it for Zoom in or out the document. You can also use the key strokes Ctrl++ for Zoom in or Ctrl — for Zoom out operation. Next to the “Set Magnification menu, you can see the Window Size menu. This pop-up menu is visible only on the Design View and with this you can resize the Document Window to predetermined or custom dimensions. The last figures shown on the Status Bar indicates the Document Size/Download Time. This value changes as you add content to the document. The download speed depends on the connection speed you have set. To set the connection speed, you can select the last option, Edit sizes on the Window Size pop-up menu or select the option Edit > Preferences and
IT1303
©UCSC
13
Lesson 7: Web Design Applications
BIT Semester 1 - Application Packages
select the category Status Bar. Set the connection speed on the Preferences dialog box and observe the download speed on the Status Bar.
7.5 Basic File Operations [30 min] 7.5.1 Opening a Web Page To open an existing Web Page you can select the option File > Open or click on the Open button on the Standard Toolbar. Locate the file in the Open dialog box and click on the button Open to open it to the Document Window. But if you have already created a Web Site and you are working with site files then you can see the file listed on the File Panel and you can open it by clicking on it. 7.5.2 Creating a New File You can open a new page to the Document Window by clicking on the New button on the Standard Toolbar. This opens you the New Document dialog box and you can select the type of document you want to create. Let’s create a Basic HTML page. So, select the option Basic page from the category list and select the HTML from the list of Basic Page. Next, click on the button Create.
IT1303
©UCSC
14
Lesson 7: Web Design Applications
BIT Semester 1 - Application Packages
This will give you a new blank untitled document opened on the Document Window. But if you have already created a Web Site and you want to create the file for the Web Site, then open the File panel from Window > Files and right click on the folder or drive where you want to create the file and select the option New File. 7.5.3 Working with Multiple Web Pages All the opened documents get listed on the Document Window in tabs. You can click on the tab to shift from one document to the other. In the following figure the top.html is currently selected but if you want you can click on the tabs having the names of the other files and work on them. Once you have finished, you can click on the Save All button to save all the opened documents.
IT1303
©UCSC
15
Lesson 7: Web Design Applications
BIT Semester 1 - Application Packages
When you change the path of a file (file saved location), the Dreamweaver prompts you to update the links of the related files and because of this admirable feature we don’t need to manually edit all links of the interconnected files. 7.5.4 Closing and Saving Files How to Save a Web Page? Once you have created a Web page you can save it using the Save button on the Standard Toolbar or using the option File > Save. If you have lots of opened files and you want to save them all then simply select the option File >Save All or click on the Save All button on the Standard Toolbar. Also you can use the keyboard shortcut Ctrl +S to save the file. If you are saving the file for the first time then you need to give a name for the file in the Save As dialog box. Next you have to select the file type or let the default setting All Documents be there and type the file name with the appropriate file extension in the File name field. If you do not specify the file extension with the option “All Documents” in the field, “File type”, the Dreamweaver saves your HTML file with a .htm extension.
IT1303
©UCSC
16
Lesson 7: Web Design Applications
BIT Semester 1 - Application Packages
When you are deciding a name for the file you should try to have a short but meaningful file name. Type all letters on lowercase. Do not put spaces in the name of a file to overcome some problems that you may face in linking the files in servers (You can use an underscore or a hyphen to separate two words) How to close a file? Use the black cross button on the Document Window to close the currently working documents. If you like to use the menu options; to close the currently working document select the option File > Close and to close all the opened documents select the option File > Close All. Also to close the current working file you can use the keyboard shortcut Ctrl+W. When you try to close a file without saving, if you have done some changes to it then Dreamweaver prompts you to save the file before closing. You can see that an asterisk mark appearing on the tab next to the name of the file if you have done some changes after the last saving.
IT1303
©UCSC
17
Lesson 7: Web Design Applications
BIT Semester 1 - Application Packages
7.6 Working with Websites [30 min] 7.6.1 Creating a Website Macromedia Dreamweaver supports you to organize and manage all your site content in a folder and automatically track and maintain your links, manage and share files. To create a Site with basic HTML pages you have to; 1. Define a Site using the menu option Site > New Site… (with Dreamweaver 8) on the Menu Bar. [This will open you a Wizard to define and create a Site.] 2. On its first step you have to enter a Site name and if you have already decided the Site address then you can put the Site Address as well.
3. Click on the Next button to proceed 4. Next, select the 2nd option button as you are not going to use any server technology in this Site 5. Click on the Next button 6. Next, it asks how you want to Work with the Site files during the development.
IT1303
©UCSC
18
Lesson 7: Web Design Applications
BIT Semester 1 - Application Packages
7. If you are going to work on the Server then you can select the 2nd option else select the 1st option to edit files in the local machine and upload to the Server when ready. 8. Click on the Next button 9. Next, you have to select the option which describes how you want to connect to the remote Server and the path to the folder in Server where you are going to upload the files. If you are not going to connect to a remote Server then select the option None for the first field. 10. Click on the Next button 11. Wizard shows you the summary of options you have selected. If you do not agree with that you can click on the Back button and edit the previous settings. If you agree you can click on the Done button. 12. Open the Files panel from Window > Files if it does not display on the screen. Here, you will see Site folder.
Once you have created a Site folder, whatever you want to add to the Site should be saved in this folder. You should create separate folders to save image files, Audio Files, Video Files…etc. All these folders should be created in the Site folder. 7.6.2 Managing a Website If you have dislocated your previous Web Site then Macromedia Dreamweaver requests you to manage the Web Site as soon as you start the application. Sometimes you may also want to change some settings you previously set for the defining of the Site. You can use the Manage Site dialog box for these.
IT1303
©UCSC
19
Lesson 7: Web Design Applications
BIT Semester 1 - Application Packages
How to use the Manage Sites dialog box? 1. Select the option Site > Manage Site… from the Menu Bar
2. Select the site form the list of sites 3. Click on the button Edit… [This will open you the Site Definition dialog box] 4. Follow the steps in the Wizard that you did in creating the Site and do the changes where necessary 5. Click on the Done button once you are back on the Manage Site dialog box
7.7 Working with Headings and Paragraphs [45 min] 7.7.1 Inserting Headings Headings can be inserted using the Insert Toolbar or you can change the selected text to a heading by applying a heading format using the Properties Inspector. There are six levels of headings in HTML as H1, H2, H3,…H6 ( Heading 1, Heading 2, …Heading 6) where the largest is H1 and the smallest is H6. When you insert headings you should not change the order of headings. You can start form any level, but you should preceed with the next smaller size and so on.
IT1303
©UCSC
20
Lesson 7: Web Design Applications
BIT Semester 1 - Application Packages
To insert a heading 1. Click on the h1, h2 or h3 on the Insert Toolbar 2. Type the text which should appear as heading 3. Press Enter key and you will be back on the paragraph style 7.7.2 Format Headings Heading or the text which is to be appeared as a heading should be selected and formatted using the Properties Inspector. Open the Properties Inspector from Window > Properties if it is not displaying on the Screen. How to apply a different heading style? 1. Select the text/heading 2. Select the appropriate heading style from the format field on the Properties Inspector or select the option Text > Paragraph Format and select the appropriate Heading level [You can also apply a heading style using
How to change the font style, Size, colour…etc? 1. Select the heading 2. Set the property attributes using the fields on the Properties Inspector or use the menu options at Text > Paragraph Format 7.7.3 Inserting Paragraphs You can start typing from any where in a new line on the document without applying any format then by default the Dreamweaver adds you a paragraph. Once you press the Enter key it creates you a new paragraph in the next line. 7.7.4 Editing and Formatting Text / Paragraphs How to edit the text on a paragraph? Just like editing a Word Document you can edit the text on a paragraph in Macromedia Dreamweaver. You can use the methods of cut and paste, move (drag and drop), delete and copy with the help of the keyboard short cuts or with the help of the command buttons on the Standard Toolbar.
IT1303
©UCSC
21
Lesson 7: Web Design Applications
BIT Semester 1 - Application Packages
Cut
Copy
Paste
Redo
Undo
How to format a paragraph? To format a paragraph you can use the Property Inspector or the Text drop down Menu. If you select the paragraph and use the Property Inspector you can see the following fields and buttons on it. You can change the font type, size, colour, bold or italic and the alignment
Bold
Font Type
Size
Italic
Alignment
Color
Settings on the Property Inspector can be done easily but it contains only a limited number of options. But if you use the Text drop down menu options you can find all the possible formatting options.
The Text drop down menu helps you to check the spelling of the document too.
IT1303
©UCSC
22
Lesson 7: Web Design Applications
BIT Semester 1 - Application Packages
How to underline some text? The underlining text on a Web page should be done wisely as it may mislead the users. By default the text links on a Web page appear in blue colour with an underline mark and when you click on them, they change their colour from blue to green or red. Some developers use different colour variations for links. So, it is not good to use the underline mark for normal text on the Web page unless you really want to have them. To underline text you can use the menu option Text > Style > Underline. How to set the font size? In HTML font sizes are defined in 7 sizes as 1, 2, 3, 4, 5, 6, 7. Font sizes can be set in two different ways; with the exact number referring to the size or with a relative size (+1 or -1 to +4 or -3). The size 3 is the default font size and if you want to increase the font size by 1(one) then you can select the relative size as +1 or the exact font size as 4. You can set the font sizes using the Property Inspector or the Text > Size or Text > Size Change sub menus. The Property Inspector in Macromedia Dreamweaver sets the font size by defining a style and in the font size menu it shows eight different font values (9, 10, 12 …36) and eight different relative font sizes (xxsmall, x-small,…xx-large).
7.8 Creating Lists [45 min] 7.8.1 Inserting Ordered/Numbered Lists If you want to list something in an order you may need to create ordered lists. To create and ordered list use the Insert Tool bar or the Property Inspector. How to create an ordered list using the Insert Toolbar? 1. Click on the Text tab on the Insert Toolbar in tabs or select the option Text from the Insert Toolbar in menus 2. Click on the button “ol” 3. Start typing the list items 4. Press the Enter key once you finish typing one item and type the next on the next line How to create an ordered list using the Properties Inspector? 1. Click on the Ordered List button on the Properties Inspector 2. Start typing the list items 3. Press the Enter key once you finish typing one item and type the next on the next line
IT1303
©UCSC
23
Lesson 7: Web Design Applications
BIT Semester 1 - Application Packages
7.8.2 Unordered Lists Unordered lists are created when we want to list some items not in an order. This can be inserted to the page using the Insert Toolbar or the Property Inspector. To create an unordered list using the Insert Toolbar 1. Click on the Text tab on the Insert Toolbar in tabs or select the option Text from the Insert Toolbar in menus 2. 3. 4.
Click on the button “ul” Start typing the list items Press the Enter key once you finish typing one item and type the next on the next line
How to create an unordered list using the Properties Inspector? 1. Click on the Unordered List button on the Properties Inspector 2. Start typing the list items 3. Press the Enter key once you finish typing one item and type the next on the next line 7.8.3 Nested Ordered/Unordered Lists Sometimes we want to create lists with two three levels where we get sub lists within one list. Following is an example of a nested list. Fruits and vegetables of my taste Vegetables 1. Beans o Butter Beans o Green Beans 2. Carrots 3. Cabbages 4. Radish Fruits 1. Apples a. American Apples b. Chinese Apples 2. Papaws 3. Graphs 4. Oranges Herbs
IT1303
©UCSC
24
Lesson 7: Web Design Applications
BIT Semester 1 - Application Packages
Here, you need to start with one number/bullet style and change into another for the sub list. You can start the ordered/unordered list as usual and when you want to shift to the 2nd level you have to click on the “Text Indent” button on the Property Inspector. Then, it automatically starts another numbered list or if it is a bulleted list then changes the bullet style to another bullet style and creates you the sub-list. To come back to the 1st level you have to click on the “Text Outdent” button. 7.8.4 Modifying List Types and Bullets If you want to have a different number style or bullet style then; 1. Place the cursor at a list item of the list of which the bullet or number style should be changed 2. Click on the List Item… button on the Properties Inspector [This will open you the List Properties dialog box 3. Select a deferent style at the “Style” field If it is a numbered list and if you want you can change the starting number of the list item. If only that particular list item number/bullet style is to be changed then select a different style at the field “New style” on the frame “List item”.
IT1303
©UCSC
25
Lesson 7: Web Design Applications
BIT Semester 1 - Application Packages
7.9 Page Property Settings [30 min] Properties like base-font (default font for the page), font colour, Font size, background colour / background image, page margins…etc can be set for the whole page. How to set a default font type, colour and size? 1. Place the cursor on a text area or a blank space 2. Right click and select the option Page Properties from the popup menu or click on the Page Properties… button on the Properties Inspector. [You’ll see the Page Properties dialog box.] 3. Select the category Appearance and set the Page font as you want 4. Set the font size for the page 5. Click on the small box at the field Text colour to set a font colour 6. Set the other properties as you want 7. Click on the Apply button 8. Click OK
How to apply a background color? Background colour of the page should be matched with the text and the content of the page. Decide a colour which will help to improve the look and the readability of your site content. To set background colour you can use the Page Properties dialog box. Click on the colour box at the field Background colour. Your cursor will change to the dropper and you can select any colour from the colour palette. If you want you can get a colour from the page content by moving the dropper (cursor point) over the colour you want to apply and clicking.
IT1303
©UCSC
26
Lesson 7: Web Design Applications
BIT Semester 1 - Application Packages
How to insert a background image? When you apply a background image it repeatedly apply (tiles) on page background. If you have applied a background colour then you will not be able to see that colour any longer. You should use light weight tiny image as a background image. The image’s colours and designs should not disturb or the content of the page. To apply a background image; 1. Open the Page Properties dialog box 2. Click on the Browse button in front of the Background image filed on the Appearance category [You’ll open the Select Image Source dialog box]
3. Locate the desired image [ Select a small image] 4. Click OK 5. If you have not saved the Web page then, Dreamweaver prompts you to save your Web page
IT1303
©UCSC
27
Lesson 7: Web Design Applications
BIT Semester 1 - Application Packages
6. Click OK [ If the selected image file is not in your site folder then Dreamweaver prompts you to save it to your folder]
7. Click on the Yes button to save the file 8. Save the image to your Web Site folder
9. [You’ll be back on the Page Properties dialog box] Click on the Apply button 10. Click on the OK button
7.10 Creating Tables [1 hrs] 7.10.1 How tables are used in Web Pages? Tables can be used to present data in fields. Also, they are heavily used in creating the structure of the Web page. Before authoring any Web page should be planned out and the design should be drawn at least on a piece of paper. You have to decide where the text, images and other elements should appear on the page.
IT1303
©UCSC
28
Lesson 7: Web Design Applications
BIT Semester 1 - Application Packages
Next, decide for how much of space is allocated between the elements to make the Web page readable and clear. Finally, you can design the structure in a table. 7.10.2 How to insert a table? You can use the Common tab/menu or the Layout tab/menu on the Insert Toolbar and click on the Table button or use the menu option Table on Insert > Table to start inserting a table. This will give you the Table dialog box.
Enter the number of rows and columns you wish to have. You can enter the width of the table and the border thickness as well. Next there are two fields called Cell padding and Cell Spacing. Cell padding is the padding distance (distance from the border to the cell content) and the Cell Spacing is the space between two cells of the table. These values can be changed as you wish even after creating the table. Finally click on the OK button to insert the table. 7.10.3 Formatting Tables Use the Property Inspector to modify the table. To make the Property Inspector updated with the Properties of the table first you have to select the table. To select the table you can click on the table structure showing on the top left corner of the table or click on the tag at the Tag Selector on the Status Bar.
IT1303
©UCSC
29
Lesson 7: Web Design Applications
BIT Semester 1 - Application Packages
Then your Properties Inspector displays the properties of the table. You can modify the values on the fields of the Properties Inspector. Click on the document to update the document accordingly. In Dreamweaver, you can select the table elements (rows, columns or cells) separately as you do the selection in the tables of MS Word. After selecting the table element, you can modify its properties without affecting the other elements of the table. 7.10.4 How to insert a column or a row? Method 1 To Insert a Row; 1. Place the cursor in a cell (You’ll insert the new row above the row of the cell where the cursor is) 2. Right click and select the option Table > Insert Row from the popup menu To Insert a Column; 1. Place the cursor in a cell (You’ll insert the new column left to the column of the cell where the cursor is) 2. Right click and select the option Table > Insert Column from the popup menu Method 2: To insert a row or a column; 1. Place the cursor in a cell 2. Select the appropriate menu option from Insert > Table Objects submenu
IT1303
©UCSC
30
Lesson 7: Web Design Applications
BIT Semester 1 - Application Packages
7.10.5 Merging and Splitting Cells How to merge some cells? 1. Click inside the cell and drag over the adjoining cells to select the neighboring cells which are to be merged 2. Click on the Merge button (Merges selected cells using spans) on the Properties Inspector or select the menu option Modify > Table > Merge Cells or use the key strokes Ctrl+Alt+M How to split a cell into number of cells? 1. Place the cursor on the cell which is to be split 2. Click on the Split button (Split cells into rows or columns) on the Properties Inspector or select the menu option Modify > Table > Split Cell 3. This will open you the Split Cell dialog box. 4. Select the option button, Rows or Columns which matches your need 5. Enter the number of rows or columns you need the cell to be split in the next field 6. Click on the OK button
7.11 Inserting Media Element [45 min] 7.11.1 Inserting Pictures to the Web Page You can insert GIF, JPEG, or PNG files to Dreamweaver Web Pages. To insert an image; 1. Select the menu option Insert > Image or use the keystrokes Ctrl+Alt + I or Click on the Image button on the Common tab/menu of the Insert Toolbar [This will open you the Image Source dialog box] 2. Locate the image file 3. Click OK
IT1303
©UCSC
31
Lesson 7: Web Design Applications
BIT Semester 1 - Application Packages
4. If you have not saved the Web page then, Dreamweaver prompts you to save your Web page
5. Click OK [ If the selected image file is not in your site folder then Dreamweaver prompts you to save a copy of it to your folder]
6. Click on the Yes button to save the file 7. Save the image to your Web Site folder
IT1303
©UCSC
32
Lesson 7: Web Design Applications
BIT Semester 1 - Application Packages
You’ll get another dialog box where you can enter the alternative text that you may like to show the user when they place the cursor over the image or display on the place of the image when the picture is not accessible. 8. Enter the alternative text
9. Click on the OK button You’ll get the image inserted to the document. 7.11.2 Formatting Pictures Use the Properties Inspector to edit the image.
Edit in Fireworks
Optimize in Fireworks Crop
Resample
Brightness & Contrast
Sharpen
You can change the width and height of the image, edit the image using Macromedia Fireworks if you have installed that in your computer, set the brightness and contrast values and sharpen the image. How to change the width and Height of the image without distorting the picture? If you change the width on the Properties Inspector you cannot predict the due height proportionate to the width to set the height without distorting the
IT1303
©UCSC
33
Lesson 7: Web Design Applications
BIT Semester 1 - Application Packages
image. You can change the width and height of the picture by dragging selection handles.
Selection Handles To resize the image without distorting; 1. Hold the Shift key down 2. Drag the image up from the bottom right selection handle Resizing an image changes the appearance of the image on the screen and it does not change the exact size of the image file. So, if you have reduced the size of the image by resizing then click on the resample button on the Property Inspector to reduce the download time by reducing the file size accordingly. 7.11.3 Adding Sound Files You can play lots of different types of audio files on Web; .midi, .aif, .wav, mp3, Real Audio, Quick Time files…etc. There are two ways to play an audio file on Web; 1. On request (as a link) 2. As background music or playing audio with more control over the audio player (as an embedded file) How to link an audio file? Text or images on the page can be linked to an external audio file. Then the user needs to click on it to access and play the file. So, this method is more userfriendly. Users will click on the link to play the audio only if they want to listen to it.
IT1303
©UCSC
34
Lesson 7: Web Design Applications
BIT Semester 1 - Application Packages
To 1. 2. 3.
link an audio file; Select the text or image you want to use as the link to the audio file. Open the Property Inspector from Window > Properties Click on the folder icon next to the Link filed to browse the file [You’ll open the Select file dialog box] 4. Locate the audio file 5. Let Dreamweaver to save a copy of it to the site folder if it resides out side the Site folder. How to embed an audio file? If you embed an audio file to the Web page then your users should have necessary plug-ins to play it in their computers. This method should be used only if you want to play the file as background music or if you want to control the volume, the way the player looks on the page, or the beginning and ending points of the sound file. To embed an audio file in your Web page; 1. Position the cursor where you want to insert the control panel of the player 2. Select the menu option Insert > Media > Plugin or click on the Plugin button on the Media drop down menu on the Common tab/menu of the Insert Toolbar 3. Use the Property Inspector to change the properties of it
7.11.4 Adding Video You can insert or embed video files of format AVI or MPEG to a Web page. Linking or embedding can be done as you link or embed audio files. To embed an video file; 1. Position the cursor where you want to insert the player of the video 2. Select the menu option Insert > Media > Plugin or click on the Plugin button on the Media drop down menu on the Common tab/menu of the Insert Toolbar [The Plugin placeholder gets inserted to the page and by default it is displayed as a 32 x 32 icon] 3. Use the Property Inspector to change the properties of it [But you can resize it as you resize an image on the Document Window]
IT1303
©UCSC
35
Lesson 7: Web Design Applications
BIT Semester 1 - Application Packages
When you embed a video file to a document on Dreamweaver, you’ll see a green colour play button on the Property Inspector. You can play the video on Dreamweaver’s Document Window by selecting the plugin place holder and clicking on the Play button on the Property Inspector. Then, the green button becomes a red Stop button and you can stop playback, just by clicking on the Stop button. 7.11.5 Inserting Flash Button Macromedia Dreamweaver supports you to customize built-in Flash button and insert them to your Web page. To insert a Flash button; 1. Place the cursor where you want to insert the Flash button 2. Select the option Insert > Media > Flash Button from the Menu Bar or click on the Flash button option on the Media drop down menu on the Common tab/ menu of the Insert Toolbar [This will open you the Insert Flash Button dialog box.]
IT1303
©UCSC
36
Lesson 7: Web Design Applications
BIT Semester 1 - Application Packages
3. Select a button style from the Style list box [You can preview the on it on the sample] 4. Add some meaningful text to the Button Text field 5. Select a Font from the Font combo box 6. Set the other properties as you want [All these can be modified later with the properties Inspector] 7. Click on the button Apply 8. Click OK You’ll get another dialog box where you can set the Flash accessibility attributes. But it is optional to enter this information and if you don’t want to provide any information as this, you can open the Preferences dialog box and remove the check marks in front of the options on the Accessibility category. Note that the accessibility information is provided to support your Site visitors with disabilities of visual, auditory, motor and other.
IT1303
©UCSC
37
Lesson 7: Web Design Applications
BIT Semester 1 - Application Packages
7.12 Using Hyperlinks [1 hrs] 7.12.1 Creating Text / Image Links Links helps you to navigate from one page to the other and jump from one location to the other. There two different methods to create a text or an image link to open a file. If the file to be linked with is inside the Site folder you can view it from the File panel. Hence you can easily use the Point to File method. But if the file to be linked is not inside the Site folder then you should browse for it. Point to File Method; 1. Select the text/image on the document that you want to convert to a link 2. Open the File panel from Window > Files 3. Open the Properties Inspector from Window > Properties 4. Place the cursor over the Link to File icon next to the Link field on the Properties Inspector 5. Click and drag on to the file to be linked with on the File Panel [You’ll get an arrow pointing to the linked file] 6. Release the mouse button [You’ll see the file name with the relative path of the file appears on the Link field on the Properties Inspector] Browsing for File Method; 1. Select the text/image on the document that you want to convert to a link 2. Open the Properties Inspector from Window > Properties 3. Click on the folder icon next to the Link field on the Properties Inspector 4. Locate the file you want to link on the Select File dialog box 5. Click OK
IT1303
©UCSC
38
Lesson 7: Web Design Applications
BIT Semester 1 - Application Packages
You can open a linked file on a normal web page as a popup or by replacing the previous file. The default setting will open the second page replacing the previous page. So, if you want to open the second file as a popup then select the option _blank in the target field on the Properties Inspector. 7.12.2 Image Hotspots After inserting an image into a web page sometimes you may want to mark a particular area of that image and make it a link. A link like this can be used to show detail information of the selected area of the image on the linked page. The areas marked on the image as links are called as Hotspots and the image with Hotspots is called as Image Map. There are three Hotspot tools on the Properties dialog box as Rectangle Hotspot Tool, Oval Hotspot Tool and Polygon Hotspot Tool. To create a Hotspot; 1. Select the inserted image on the Document Window 2. Open the Properties Inspector 3. Enter a unique name for your image map in the Map text box
4. Click on a Hotspot Tool to describe a rectangle, oval, or polygon shape. 5. Use the Pointer Hotspot Tool to select and edit Hotspot points [Click and drag on the point to be modified] When you have finished drawing a hotspot, Dreamweaver displays the properties of it on the Properties Inspector.
IT1303
©UCSC
39
Lesson 7: Web Design Applications
BIT Semester 1 - Application Packages
6. Select a hotspot and enter the link address on the Link field or use the “Point to File” or “Browse to File” icon to link the Hotspot to the required file. 7.12.3 Image Rollovers You may like to have buttons or image links which changes its image to another with the mouse over event and changes to the previous with the mouse out event. To create buttons or image links like this need scripting languages to be incorporated with HTML. But if you use Dreamweaver for creating rollovers, you don’t need to know anything about a scripting language. How to create a rollover? 1. Place the cursor where you want the rollover image to appear 2. Select Insert > Image Objects > Rollover Image, or select Rollover Image from the Images menu on the Insert Toolbar’s Common category 3. Enter a unique name for the rollover image in the field, “Image name” 4. Browse for the two images, original image and the rollover image 5. Enter an Alternative text to display when the image is not accessible 6. Next, enter the URL of the file you want to open by clicking on the rollover image 7. Select the option Preload Images to load the images before they are requested to be. So that ,there will not be any delay in loading the images.
IT1303
©UCSC
40
Lesson 7: Web Design Applications
BIT Semester 1 - Application Packages
7.13 Using Frames [1 hrs] 7.13.1 Creating Frame Structures A normal Web page opens on one Window and once you click on a link on the Web page with the default setting you’ll open the second file replacing the first file. If you set the target property of the link to “_blank” then you’ll open a popup. But if you don’t like to replace the original file having links and if you want to show the links all the time then, you can use the Frames to open the pages. The frames divide the window into several segments and in each segment you can have a different Web page. When you have more than one frame on a Window we refer to them as a set and call it as frameset. How to create a frameset? 1. Click on the “New” button on the Standard Toolbar to open a new page 2. In the New Document dialog box, choose the Framesets category 3. Select a frameset option on the category Frameset 4. Click on the button, Create Dreamweaver will create you a set of frames and you can handle each frame as a different page. You can add content in each frame and save them all by clicking on the button Save All on the Standard Toolbar. Click on a border of the frameset then you can see the properties of the frameset on the Properties Inspector Open the Frames panel from Window > Frames and click on a frame to see its properties on the Properties Inspector. There is another method to create a frameset. If you have already opened a new page then split that into frames using the menus of the Frames button on the Layout tab/menu of the Insert Toolbar.
IT1303
©UCSC
41
Lesson 7: Web Design Applications
BIT Semester 1 - Application Packages
To modify the existing frame structure select an option which describes how you want to split the frame from Modify > Frameset. 7.13.2 Opening Pages into Frames If you have already created the pages then you can open them into frames. 1. Select the option File > Open in Frame from the Menu Bar or press Ctrl + Shift +O. 2. Locate the file in the Select HTML File dialog box 3. Click OK 7.13.3 Handling Hyperlinks within Frames Frames in a frameset are named with meaningful names to find where they are. When we have hyperlinks on a page in a frame, we can open the target file into the parent frame, into another frame or as a popup. You can use the Target field on the Properties Inspector to do the necessary settings. How to target a link to a section of your frameset? 1. Select the text or image in one frame which you want to use as a link. 2. In Link field of the Property inspector, enter the URL of the file to be linked or click on the “Point to File” or “Browse for File” icons to add the link address 3. Select the name of the frame where you want to open the linked file in the field Target on the Properties Inspector There are lots of other options other than the frame names on the Target combo box; _blank: Opens the linked file on a different Window as a popup _parent: Opens the linked file into the parent frameset of the current frame _self: Opens the linked file into the current frame, replacing its contents (the default) _top: Opens the linked file into the outermost frameset of the current Web page, replacing all frames
7.14 Creating Styles [30 min] 7.14.1 What CSS is CSS stands for Cascading Style Sheets. They are a different type of files which declared style effects. Those styles defined in a CSS file can be accessed from a Web page and format the content on the Web page accordingly. There is a separate panel called “CSS Styles” to handle CSS files.
IT1303
©UCSC
42
Lesson 7: Web Design Applications
BIT Semester 1 - Application Packages
New CSS Rule
Attach Style Sheet
Delete CSS Property
Edit style…
7.14.2 How to create a CSS file? 1. Open the CSS Style panel from Window > CSS Styles 2. Click on the New CSS Rule button on the CSS Style Panel [This will open you the New CSS Rule dialog box] 3. Select a selector type for the style effect 4. In the Name field enter a name for the CSS style [This field changes according to the Selector type you selected. For example; if you have selected the selector type as “Tag” then this field name gets changed into “Tag” and you have to select a tag used on the document] 5. In the Define in category select the first option if you want to create a new CSS file or the 2nd option to define the style in the current document itself 6. Click OK
IT1303
©UCSC
43
Lesson 7: Web Design Applications
BIT Semester 1 - Application Packages
If you select the option New Style Sheet File then you’ll get the Save Style Sheet File As dialog box to Save the file.
7. Locate the CSS folder in the Web Site Folder [If you haven’t created a separate CSS folder first you should create one] 8. Enter a file name on the field File name 9. Select the Save as type; Style Sheet Files (*.css) 10. Click Save [ Next, you’ll get the CSS Rule Definition dialog box] 11. Select a category form the Category list box 12. Set the properties for the CSS style 13. Repeat the steps 11-12 for any number of properties 14. Click Apply 15. Click OK
IT1303
©UCSC
44
Lesson 7: Web Design Applications
BIT Semester 1 - Application Packages
7.14.3 How to attach a CSS file? 1. Select the text or other content on the document 2. Click on the combo box at the Style field of the Properties Inspector 3. Select a style you defined earlier [You can attach a style sheet by linking or importing too.]
IT1303
©UCSC
45
Lesson 7: Web Design Applications
BIT Semester 1 - Application Packages
7.7.4 How to Edit a Style? 1.
Select the text or content on the page where you have applied the style
2.
Click on the CSS button next to the Style field on the Properties Inspector [This will open you the CSS Style panel having selected the current style] Click on the Edit Style… button on the CSS Style panel Do the relevant property changes on the CSS Rule Definition dialog box Click Apply Click OK
3. 4. 5. 6.
You can edit any style listed on the CSS Style panel by selecting it and clicking on the Edit Style… button on the CSS Style panel.
IT1303
©UCSC
46
Related Documents
