Webdesign - Software for Web Creation

Content of the lesson:

Questions at the Beginning

Before we start creating a web we should ask several questions:

• Why do we want to create a website?
• Who will visit it and why?
• Should we use a lot of graphic elements (effect, speed)?
• How many pages will be necessary to create (small vs. large presentation, static vs. dynamic website)?
• Clever and uniform system of file names and files layout.
• Sketch on a paper (how will the website look like).

Process of Creating a Web

The process of creating a new web usually follows these steps:

• Receiving material (logos, photos, ...), requirements for layout, color schemes
  It is optimal to get everything in electronic source files (logo in a vector editor like Adobe Illustrator or Corel Draw, photos in full resolution, colors in CMYK or RGB format). See a sample of logotype material of HR Manager company: HR Manager logotype
• Creating a graphic preview.
  This task requires software like Adobe Photoshop or Corel because these programs have enough functions to simply create a quality graphic preview.
• Basic HTML code of the page and its CSS styling.
  You should choose whether to use a WYSIWYG editor for a simple website or to use specialized software (in case of complex websites where you have to solve problems with graphic elements).
• Fill the website using a pseudo-random text.
• Show the preview to be validated and adjust it as needed.
• In case of successful validation fill the web with real texts and data (images, forms, videos, ...).
• The final adjustments according to the requirements of your client.

Which Software to Use for Creating WWW Pages

Graphic Preview

• Adobe Photoshop - an industrial basement for any graphic creation nowadays (http://www.adobe.com/cz/products/photoshop/family/)
• Corel - actually the CorelDRAW Graphics Suite X4 (http://apps.corel.com/int/cz/)
• Gimp (freeware) - an excellent free graphical editor (http://www.gimp.org)

HTML and CSS

To create a www website you can use any simple text editor which is able to save a plain text. However, it is better to use a specialized HTML editor because of syntax highlighting and checking, completing code, SEO optimization, validating and more).

• Adobe Dreamweaver - a perfect and complex solution for creating websites (http://www.adobe.com/cz/products/dreamweaver/)
• Microsoft Visual Web Developer - similar to Adobe Dreamweaver, support of .NET platform, Express version is free for non-commercial use
• Microsoft Frontpage (in 2006 replaced by Microsoft Expression Web)
• PSpad (freeware) - excellent Czech text editor (http://www.pspad.com/cz/)
• Notepad - a component of Windows - it is possible to write the whole website using Notepad but it is too slow and uncomfortable compared to other editors (if you have Windows XP, try to open Notepad, write the phrase "bush hid the facts" and save your file, then close the Notepad and open the file again... - this mistake was removed in Windows Vista and 7).
• Microsoft Word - this is a WYSIWYG editor which allows you to save file to HTML but the result can be confusing and too large.

Saving Visually Designed Website in Different HTML Editors

Try to use Adobe Dreamweaver (a specialized software for website creation) and Microsoft Word 2007 (WYSIWYG text processor with the ability to save to HTML) to create a simple website.

Preview of the Final HTML Page

HTML Page in Microsoft Word 2007 and Adobe Dreamweaver CS4

Microsoft Word 2007

Adobe Dreamweaver CS4

HTML from Microsoft Word 2007

Preview of final HTML code of this www page created by Microsoft Word 2007 (saved as web page - on the top of that 2 additional xml files were created):

HTML from Microsoft Wordu 2007 (simplyfied www page)

Preview of final HTML code of this www page created by Microsoft Word 2007 (saved as simplified web page - the result is better arranged than the previous one):

HTML from Adobe Dreamweaver CS4

Preview of final HTML code of this www page created by Adobe Dreamweaver (this result is the best one):

You can see that the final code produced by WYSIWYG editors can be very different. It is essential to choose the right editor when creating websites. If you want to create a simple and quick HTML site and you are not familiar with HTML, you can use a simple application but in case you need to create a complex and well-arranged website you have to use applications like Adobe Dreamweaver which can make your work faster and better.

There are many other applications for creating graphics and webs of course, only those which are mostly used were mentioned.

Practical Part

Create a simple website using the visual interface inside Adobe Dreamweaver (select any topic) - it should contain a headline, a few paragraphs and two images at least. The text should contain a common font and you should highlight some parts in bold or in italics. Add one link to another website at least.

Additional Texts

Questions

1. Name and describe the steps to create a website.
2. Name at least two programs to create graphic preview of websites.
3. Name at least two programs to write the final HTML code of your website.
4. What does acronym WYSIWYG mean?
5. Do WYSIWYG editors produce the same HTML code?
6. Find at least two more programs for creating graphics in the Internet. Try to find also an image of their interface and the price.
7. Find at least two more programs for writing HTML and CSS codes in the Internet. Try to find also an image of their interface and the price.
8. Try to find the most actual comparison of graphic and HTML editors and present your conclusions.