Web Designing and

Development Training Guide Plan Your Next Web Design Project

PROF. SATISH JAIN AMBRISH K. RAI M. GEETHA IYER

„

Web Designing and Development Training Guide Plan Your Next Web Design Project

Prof. Satish Jain Ambrish K. Rai M. Geetha Iyer

www.bpbonline.com

i

ii

„

FIRST EDITION 2015 REVISED & UPDATED EDITION 2021 Copyright © BPB Publications, India ISBN: 978-81-8333-579-9 All Rights Reserved. No part of this publication may be reproduced or distributed in any form or by any means or stored in a database or retrieval system, without the prior written permission of the publisher with the exception to the program listings which may be entered, stored and executed in a computer system, but they can not be reproduced by the means of publication.

LIMITS OF LIABILITY AND DISCLAIMER OF WARRANTY The information contained in this book is true to correct and the best of author·s publisher·s knowledge. The author has made every eͿort to ensure the accuracy of these publications, but cannot be held responsible for any loss or damage arising from any information in this book. All trademarks referred to in the book are acknowledged as properties of their respective owners but BPB Publications cannot guarantee the accuracy of this information.

Distributors: BPB PUBLICATIONS

DECCAN AGENCIES

20, Ansari Road, Darya Ganj New Delhi-110002 Ph: 23254990/23254991

4-3-329, Bank Street, Hyderabad-500195 Ph: 24756967/24756400

MICRO MEDIA

BPB BOOK CENTRE

Shop No. 5, Mahendra Chambers, 150 DN Rd. Next to Capital Cinema, V.T. (C.S.T.) Station, MUMBAI-400 001 Ph: 22078296/22078297

376 Old Lajpat Rai Market, Delhi-110006 Ph: 23861747

Published by Manish Jain for BPB Publications, 20 Ansari Road, Darya Ganj, New Delhi-110002 and Printed by him at Repro India Ltd, Mumbai www.bpbonline.com

„

Dedicated to Mata Raj Rajeshwari and Sri Sai Baba whose blessings overcome all hurdles in life

iii

iv

„

Preface The objective of this book is to meet the growing need of the computer users and Web designers to build their Websites using Dreamweaver. This book tries to explore the four very versatile software packages namely, Dreamweaver, Photoshop and Flash. In addition, the Programming Language for Web Design called HyperText Markup Language (HTML) is also described in easy to understand manner. It is observed that most of the books available in the market do not explain these packages and HTML in a step-by-step manner from the Àrst time user·s point of view. We have pressed into service all our Teaching and Professional experience in writing this book in an easy-to-understand Language along with use of examples and Figures. A very useful feature of this book is that diͿerent types of HTML tag are explained with practical examples, so as to enable a reader to understand them without any outside help. We shall feel obliged to the readers if they send us their critical opinion of the presentation, readability and coverage in this book and send us suggestions at [email protected] in improving the subject matter. 17th February, 2021

Authors

„

v

Table of Contents 1. Web Publishing .......................................................................1 Introduction ....................................................................................1 Web Server ......................................................................................2 Apache Web Server ................................................................. 2 Internet Information Services (IIS) ........................................ 2 Internet ............................................................................................3 World Wide Web (WWW) ..................................................... 3 Hosting your Site ............................................................................3 Web Hosting ............................................................................ 3 Hosting Service Provider (HSP) ............................................. 5 Shared Hosting ................................................................... 5 Dedicated Hosting .............................................................. 5 Signing with ISP ...................................................................... 6 Using the Internet Service Provider ................................... 6 Things to consider with an ISP .......................................... 6 Types of the Internet access ..................................................... 7 How to choose an ISP? ....................................................... 7 Choosing your Domain Names............................................... 7 Document Interchange Standards ...............................................8 Connectionless and Connection-Oriented Protocols ............. 8 Stateless and Stateful Protocols ............................................... 8 Document Management ......................................................... 8 File Organization ............................................................... 8 Uploading ........................................................................... 9 File Names .......................................................................... 9 Backups............................................................................... 9 Planning your Website Design .....................................................9 Creating goals for your site ..................................................... 9

vi

„ Organizing the site structure................................................... 9 Creating your design look ..................................................... 10 Designing the navigation scheme.......................................... 10 Planning and gathering your assets ...................................... 10 Basic Website layout and structure ............................................11 The basic structure and layout of a Website ......................... 11 Home page ........................................................................ 11 Main Sections ................................................................... 12 Subsections ....................................................................... 12 The Website Design and Development Process .................... 13 Information Gathering .......................................................... 13 How to Develop a Website? ........................................................15 Search Engines ..............................................................................16 Find Information using a Search Engine .............................. 16 Finding People on the Internet...................................................18 Registering Domain Names ........................................................20 Domain Pointing ................................................................... 20 Publishing Tools ...........................................................................20 Netscape Navigator Gold ...................................................... 21 Macromedia’s Backstage Desktop Studio.............................. 21 Adobe PageMill and SiteMill ................................................ 21 SiteMill................................................................................... 21 Using PageMill....................................................................... 21 Other Web Publishing Tools.................................................. 22 GoLive............................................................................... 22 HotDog and HotDog Pro ................................................. 22 HoTMetaL and HoTMetaL Pro ...................................... 22 Dreamweaver ................................................................... 23 Choosing the right software to build your own Website ...... 23 XsitePro Features ................................................................... 23 Adobe Dreamweaver ........................................................ 24 Features of Dreamweaver ................................................ 24

„

vii

Microsoft Expression Web (formerly FrontPage) ............ 24 Professional Code Editor .................................................. 24 Professional Design Surface ............................................. 25 See effects of changes in real time .................................... 25 Ideal for building standards-based Websites ................... 25 Drag-and-Drop Controls ................................................. 25 Exercises ........................................................................................25 2. Setting up a Website and its Files..........................................27 Introduction ..................................................................................27 Understanding a Website Structure ...........................................27 Organizing the Root Folder................................................... 28 Dreamweaver File Types .............................................................28 Creating a Website................................................................. 29 To create a Website by using the Site Setup dialog box, do this: .............................................................................. 30 Working with a Website ..............................................................31 Duplicating a Website ........................................................... 31 To duplicate a Website, do this: ....................................... 31 Exporting a Website .............................................................. 32 To export a Website, do this: ............................................ 32 Opening or Importing a Website........................................... 33 To open Predefined Sites, do this: .................................... 33 To import a Website do this: ............................................ 34 Deleting a Website ................................................................ 34 To delete a Website, do this: ............................................. 34 Exercises ........................................................................................36 3. Creating Web Page using Dreamweaver ...............................37 Introduction ..................................................................................37 Creating a New Page ............................................................. 37 To create a new blank HTML Web page, do this: ........... 37 Saving the File ....................................................................... 39 To Save a Web page, do this: ............................................ 39

viii

„ Closing the File ...................................................................... 39 To close the file, do this: ................................................... 40 Quitting the Program ............................................................ 40 To quit the program, do this: ........................................... 40 Previewing Pages in a Browser ............................................. 40 To preview a Web page in a browser, do this: ................. 40 Adding Text in a Web Page ................................................... 40 To add text in the Dreamweaver document, do this: ........... 40 HTML Properties .................................................................. 41 Adding a Page Title ............................................................... 42 To add a title to a document, do this: .............................. 42 Setting Page Font/Font Size and Color of Text..................... 42 To set the page font and font size properties, do this: ..... 42 To set the text color, do this:............................................. 43 Creating Ordered/Unordered List......................................... 43 To convert selected text into unordered list, do this: ....... 44 Adding Horizontal Rule ........................................................ 45 To create a horizontal rule, do this: ...................................... 45 Using Tables in a Web Page .................................................. 45 To create a table in Dreamweaver, do this: ..................... 46 Editing Tables ........................................................................ 47 Merging and Splitting Table Cells ......................................... 48 To merge a cell of a table, do this:.................................... 48 To Split a cell, do this: ...................................................... 48 Using Cascading Style Sheets .....................................................50 CSS Rules ............................................................................... 50 Internal Style Sheet .......................................................... 51 To create an internal style sheet, do this:......................... 51 Inline Style Sheet ................................................................... 52 External Style Sheet ......................................................... 52 To link the external style sheet to the HTML document, do this: .............................................................................. 53 Exercises ........................................................................................54

„

ix

4. Adding Graphics to Web Page in Dreamweaver ..................56 Adding Graphics ..........................................................................56 Inserting an Image .......................................................................56 To insert an image into a Web page, do this: .................. 56 Setting Image Attributes with the PROPERTIES Inspector ..... 58 Resizing and Resetting the images ........................................ 59 Adding Image Borders ........................................................... 59 To add a border to the image, do this:............................. 59 Adding Background Image ................................................... 60 To insert an image as a background, do this: ................. 60 Edit images in Dreamweaver ......................................................62 Optimize ................................................................................ 62 Resample ................................................................................ 62 Crop ....................................................................................... 62 Brightness and Contrast ........................................................ 62 Sharpen .................................................................................. 62 Crop an image ....................................................................... 62 Create a rollover image ......................................................... 63 Image Name........................................................................... 63 Original image....................................................................... 64 Rollover Image ....................................................................... 64 Preload Rollover Image ......................................................... 64 Alternate Text ........................................................................ 64 When clicked, Go to URL ..................................................... 64 Creating an Image Map ........................................................ 64 To add a Hotspot to an image map, do this: ................... 64 Adding Multimedia Files ............................................................67 Understanding Flash File Formats ....................................... 67 Inserting a SWF File ............................................................. 68 To insert a swf file in the Web page, do this: ................... 68 Inserting a Flash Video File................................................... 70 To inset a Flash video file in a Web page, do this: .......... 70

x

„ Adding Shockwave Movies, Java Applets, and ActiveX Controls .............................................................. 74 Embedding a Sound File on a Web Page .............................. 75 To insert a sound in a Web page, do this: ....................... 76 Working with Hyperlinks............................................................77 Creating a Hyperlink ............................................................. 77 To create hyperlink, do this: ............................................. 77 Exercises ........................................................................................82 5. Working with Framesets and Frames ...................................83 Forms in Dreamweaver ...............................................................83 Inserting a Form ...........................................................................84 Inserting a Text field ....................................................................85 Inserting a Text Area....................................................................86 Inserting a Radio Button .............................................................87 Inserting a Drop-Down List .......................................................88 Inserting a Check Box .................................................................89 Inserting a Button ........................................................................90 Validating the Form .....................................................................91 Creating a Jump Menu.................................................................92 Exercises ........................................................................................93 6. Using HTML to Create Web Pages........................................95 Introduction ..................................................................................95 HTML History ..............................................................................95 Creating HTML Document in Text Editor (Notepad)......... 95 History time ...................................................................... 96 Shortcut key ...................................................................... 97 Viewing an HTML Document ...................................................97 Types of HTML Elements ..................................................... 97 Container Elements.......................................................... 97 Empty Elements................................................................ 97 Extra Byte ......................................................................... 97 HTML Document ........................................................................97

„

xi

HTML Page Structure ........................................................... 98 Background ...................................................................... 99 Syntax: .............................................................................. 99 BGCOLOR...................................................................... 100 Text ................................................................................. 100 Setting Margins...........................................................................101 Left Margin ..................................................................... 101 Top Margin ..................................................................... 102 Font Element .................................................................. 103 Font Size ......................................................................... 103 Font Face ........................................................................ 104 Font Color ............................................................................ 104 Horizontal Rule (HR) Element ...................................... 105 Heading Element ................................................................. 106 Paragraph

Tag ............................................................. 107 Extra Byte ....................................................................... 108 Style Tags ............................................................................. 108 Boldface .......................................................................... 108 Italics............................................................................... 108 Underline ........................................................................ 109 Preformat Element ............................. 110 Subscript Element .............................. 110 Superscript Element ........................... 110 E = MC2 ............................................... 110 Eat a BurgerTM Today! ....................... 110 Ordered List ............................................................... 110 Unordered List

........................................................... 112 IMG (Image Element) ...............................................................113 Aligning Image in Web Page .......................................... 113 Resizing an Image................................................................ 115 HTML Tables ..............................................................................116 Basic Table Tags .................................................................. 116

xii

„ Creating a Table .................................................................. 116 Table Attributes ................................................................... 117 Align ............................................................................... 117 Table’s Border Color ............................................................ 119 Working with Forms ..................................................................120 Tag ...................................................................... 120 Action Attribute ............................................................. 120 Method Attribute ........................................................... 121 Enctype Attribute ........................................................... 121 Form’s Elements ................................................................... 121 SELECT .......................................................................... 121 OPTION .............................................................................. 122 TEXTAREA ......................................................................... 122 INPUT ................................................................................. 122 HTML Form Program ........................................................ 123 Exercises ......................................................................................125

7. Photoshop CS6 ....................................................................126 Uses of Photoshop ......................................................................126 Understanding Computer Graphics ........................................126 Features of CS6 ...........................................................................127 Starting Photoshop.....................................................................127 Components of Photoshop .......................................................128 Options Bar .................................................................... 128 Default Mode.................................................................. 128 Document Area .............................................................. 128 Tools Panel ........................................................................... 129 Palettes .........................................................................................129 Creating an Image/New Canvas/Window ..............................130 To Open a Pre-existing Image ..................................................131 Saving a File ................................................................................133 Using Selection tools in Photoshop .........................................133 Marquee Tools ............................................................................133

„

xiii

Lasso Tool....................................................................................134 Polygonal Lasso Tool .................................................................135 Magnetic Lasso Tool ..................................................................135 Magic Wand Tool .......................................................................136 Cropping the Image ...................................................................136 Moving a Selection .....................................................................137 Rotate ...........................................................................................138 Closing an Image ........................................................................138 Image Editing Tools ...................................................................139 The Blur Tool ....................................................................... 139 The Sharpen Tool .......................................................................140 The Smudge Tool ................................................................. 140 Exercises ......................................................................................141 8. Flash Animation ..................................................................143 Introduction ................................................................................143 Creating Graphics in Flash Professional .................................143 Selecting Objects ........................................................................144 Using Selection Tool ............................................................. 144 To select the objects with the Selection Tool, do this: .... 144 To reshape the object with the Selection Tool, do this:.. 145 Subselection Tool ................................................................. 145 To use the Subselection Tool, do this: ............................ 145 Lasso Tool ............................................................................ 146 Selection using a Lasso Tool........................................... 147 To make a selection using Lasso Tool, do this: .............. 147 Lasso Tool with Polygon Modifier ................................. 148 To make a selection using Polygonal Lasso Tool, do this:.. 148 Draw Rectangles and Ovals.......................................................149 Rectangles and Squares ....................................................... 149 To draw rectangle and square, do this: .......................... 149 To draw rectangle using Rectangle Primitive Tool, do this:149 Oval and Circles .................................................................. 151

xiv

„ To draw oval and circle, do this: .................................... 151 To draw oval using Oval Primitive Tool, do this:.......... 151 Polygons and Stars .............................................................. 152 To draw polygon and polystar, do this: .......................... 152 Using Symbols...................................................................... 152 Creating a Symbol ............................................................... 154 Converting an existing object into Symbol, do this:...... 154 Creating a New or an Empty Symbol ................................. 154 To create new symbol, do this: ....................................... 154 Create Instances..........................................................................157 To create an instance of a symbol on the Stage, do this:.... 157 Editing Instance Properties ................................................. 157 Working with Timeline .............................................................157 Concept of Frames ............................................................... 158 Animation Basics .......................................................................158 How does Animation Work? ............................................... 158 Creating Animation ............................................................ 158 Types of Animation ............................................................. 159 Tweened Animation ............................................................ 159 Motion Tweens ............................................................... 159 Classic Tweens ................................................................ 159 Shape Tweens ................................................................. 159 Frame-by-Frame Animation............................................... 159 Inverse Kinematics .............................................................. 160 Classification of Animations in the Timeline ................ 160 Understanding Motion Tweens ................................................161 Tween Span .................................................................... 161 Motion Path.................................................................... 162 Property Keyframe .............................................................. 162 To create a Motion Tween animation, do this: ............. 162

„

xv

Shape Tweening ..........................................................................163 Creating a Shape Tween Animation ................................... 163 To create a shape tweening animation, do this: ............ 164 Understanding Actions..............................................................165 Add a code snippet to an object or Timeline frame ..............165 Add new snippets to the Code Snippets panel .......................166 Exercises ......................................................................................166 9. Working with Adobe XD ....................................................168 Introduction ................................................................................168 Get started with Adobe XD interface ......................................168 Creating layout in design view .................................................169 Starting a new design .................................................................169 Create background of prototype ..............................................170 Setting header .............................................................................171 Inserting the background for content area .............................172 Add some content ......................................................................172 Creating grid ...............................................................................173 Creating Artboard ......................................................................174 Setup homepage .........................................................................175 Creating interaction ...................................................................177 Preview Prototype ......................................................................178 Exercises ......................................................................................179

Web Designing and Development Training Guide DESCRIPTION The book is a step-by-step training manual for learning to design a web page. It covers the basic process of planning and maintenance of web pages and websites as well as the basic structure and layout of a website. After that, it explains how to set up a website and its files. It also explains how to create a website (using site setup dialog box) and a web page (using Dreamweaver). It then describes how to format web pages using Cascading Styles Sheets (CSS). The book explains how to add graphics to a web page using Dreamweaver and how to work with framesets and frames. Then, it covers HTML and explains how to create web pages using HTML tags to display information on a web browser. After that, the book covers the basics of Photoshop CS6, Flash Animation as well as the basics of Adobe XD.

KEY FEATURES Ÿ From planning to development, search engine optimization, and promotion, this guide takes the readers from being novices to becoming fully-fledged web designers. Ÿ There are concise explanations, clear illustrations, and plenty of useful and memorable tips.

WHAT YOU WILL LEARN No prior experience in building a website? This friendly guide is the perfect place to start! With this guide, you’ll begin with learning how the web and web pages work, and then you will steadily learn how to build a website from there. By the end of the book, you’ll have the skills to create a simple website.

WHO THIS BOOK IS FOR The book is ideal for students and professionals of all backgrounds and skill levels. It is also a useful reference for experienced developers to keep their skills up to date.

ISBN 978-81-8333-579-9