Name:________________ Class:__________________ Date:_______________

Ch#2: Building Website ( Answer key)

Note: You do not need to memorize these answers. You can write answers in your own words but
your concept must be clear.

Q. Define the following.

Code View

Code view is a mode in Dreamweaver where you can write and edit the HTML, CSS, JavaScript, and
other code for your website directly.

- In Code view, you can see the underlying code structure of your web page.

Design View

Design view is a mode in Dreamweaver where you can design and build your website visually, without
writing code.

- In Design view, you can see a WYSIWYG (What You See Is What You Get) representation of your web
page.

- This view is useful for designers and developers who prefer to work visually and don't need to write
code manually.

Split View

Split view is a mode in Dreamweaver that allows you to see both the Code view and Design view
simultaneously, side by side.

- In Split view, you can see the code on one side and the visual representation of your web page on
the other.

- This view is useful for developers who need to make changes to the code and see the results
immediately in the Design view.

Q. How can Dreamweaver be helpful for the programmer in initial level?

Dreamweaver can be helpful for programmers at the initial level by providing a user-friendly
interface, code completion, syntax highlighting, and debugging tools that make it easier to learn and
develop web development skills.

Q. Define the purpose of Horizontal rule in Dreamweaver?

1. Visual separation: HR creates a visual separation between different sections of content on a web
page, making it easier to read and understand.
2. Organize content: HR helps to organize content into logical sections, improving the overall structure
and layout of the page.

Part a: Differentiate between inline and internal CSS

• An inline CSS is used to apply a unique style to a single HTML element.

• An internal CSS is used to define a style for a single HTML page.

Part b: Differentiate between paired and unpaired HTML tags.

• A paired tag consists of two tags, the first one is called an opening tag and the
second one is called a closing tag.
• An Unpaired tag is a single tag that does not need a companion tag.

Q
Part a: Describe the primary purpose of CSS in web development and provide an example of
how CSS can be used to style a webpage element.

Cascading Style Sheets (CSS) is a vital component of web development used to control the
presentation and layout of web content. For instance, CSS can be employed to change the colors
and font size of text, alter the spacing between elements, or create responsive layouts that adapt
to different screen sizes. By applying CSS rules to HTML elements, developers can achieve a
consistent and visually appealing design for their webpages.

Part b: Define HTML and its role in creating webpages. Give an example of an HTML-paired
tag and explain its significance in structuring web content.

HTML, which stands for Hypertext Markup Language, is the backbone of web content. It
provides the structure and semantics needed to organize information on a webpage. An example
of an HTML paired tag is the <p> tag used for paragraphs. Paired tags enclose content, allowing
developers to define its purpose and formatting. For instance, <p> tags demarcate paragraphs,
ensuring proper text spacing and alignment within the webpage.

Part a: What does the HTML acronym stand for, and how does it relate to the structure of web
pages?

Answer:
 • HTML stands for "Hypertext Markup Language."
• HTML is the standard markup language used to structure content on the World
Wide Web. It is responsible for defining the elements and layout of web pages, including
headings, paragraphs, links, images, and more. HTML uses tags to enclose and describe
different parts of a web page's content, allowing web browsers to interpret and display the
content as intended by the web developer.

Part b: What is the primary advantage of creating a website using a plain text editor like
Notepad, and how does it affect the coding process?

Answer:

• The primary advantage of creating a website using a plain text editor like Notepad
is that it provides complete control over the code without any automatic formatting or
interference.
• This means that web developers can write and edit HTML, CSS, and other code
directly in its raw form, ensuring precision and full customization. However, it also
requires a strong understanding of coding syntax and structure since there are no built-in
features to assist with code validation or suggestions like in more specialized web
development environments.

Scenario

Imagine you are a 7th-grade student assigned to create a website about your school's science fair
using Dreamweaver. Explain how you would use Dreamweaver's features to design the
homepage effectively. Provide two key steps you would take, and for each step, describe a
specific feature or action you would use, along with the reasons why it's important in creating an
engaging school science fair homepage.

Step 1 : First, I would start by opening Dreamweaver and creating a new HTML document for
the homepage. I would name it "index.html" as it's the default name for the homepage. This step
is crucial because it establishes the foundation for my website, and having an appropriate file
name ensures that it serves as the initial landing page when someone visits the site.

Step 2 : Next, I would focus on the visual design of the homepage. To do this, I would use
Dreamweaver's "Insert" menu to add elements like text, images, and headings to the page. For
instance, I'd insert an eye-catching banner image at the top with a title like "Our School Science
Fair." This step is important because it immediately grabs the visitors' attention and gives them a
clear idea of what the website is about.
Q

Scenario

Imagine you are designing a website for a local art gallery using Dreamweaver. Explain how you
can effectively use both tables and DIV elements to organize and display information about
different art exhibits on a single webpage. Provide two key reasons for using each of these layout
techniques and describe how they enhance the presentation of the gallery's information.

To create an engaging and organized webpage for the local art gallery using Dreamweaver, you
can effectively utilize both tables and DIV elements for different purposes.

Using Tables:

1. Structuring Exhibits: Tables can be employed to create a grid-like layout where

each cell represents a different art exhibit. This allows for a clear and structured
presentation of information, such as the exhibit name, artist, date, and a brief description.
2. Alignment and Consistency: Tables provide precise control over the alignment
and positioning of content. By using tables, you can ensure that all exhibit details align
neatly, creating a professional and uniform look throughout the webpage.

Using DIV Elements :

1. Styling and Flexibility: DIV elements are ideal for enclosing and styling
individual exhibit descriptions or sections. By wrapping exhibit details in DIVs, you can
apply custom CSS styles to each section, allowing for flexibility in terms of fonts, colors,
borders, and spacing. This enhances the visual appeal and customization of each exhibit
description.
2. Responsive Design: DIV elements can also be used to create a responsive design.
By using CSS media queries, you can adjust the layout and presentation of exhibit
information based on the screen size. This ensures that the gallery's website remains
accessible and visually appealing on various devices, including desktops, tablets, and
smartphones.

Q. Choose the correct answer.

1. Which of the following is a key consideration when designing a website's navigation

system?

A) The color scheme of the website

B) The font style used on the website

C) The ease of use and accessibility for visitors

D) The amount of content on the website

Answer: C) The ease of use and accessibility for visitors

1. Why is it important to consider the target audience when designing a website?

A) To ensure the website is visually appealing to the designer

B) To ensure the website is compatible with all devices and browsers

C) To ensure the website meets the needs and expectations of the users

D) To ensure the website is search engine optimized

Answer: C) To ensure the website meets the needs and expectations of the users

1. What is the purpose of using HTML and CSS when building a website?

A) To add interactive elements to the website

B) To create a database for the website

C) To define the structure and layout of the website

D) To test the website's functionality

Answer: C) To define the structure and layout of the website.

1. What is the primary function of HTML tags in building a website?

A) To add visual effects to the website

B) To define the structure and layout of the webpage

C) To write the code for the website

D) To test the website's functionality

Answer: B) To define the structure and layout of the webpage

1. What is the purpose of using Adobe Dreamweaver in building a website?

A) To create a database for the website

B) To add interactive elements to the website

C) To design and build the website's structure and layout

D) To test the website's functionality

Answer: C) To design and build the website's structure and layout

1. What is the term for the visual representation of a website's layout and design in
Adobe Dreamweaver?

A) Code view

B) Design view

C) Live view

D) Split view
Answer: B) Design view

1. What is the purpose of using HTML tags to structure a webpage?

A) To add visual effects to the webpage

B) To define the layout and organization of the webpage

C) To write the code for the webpage

D) To test the webpage's functionality

Answer: B) To define the layout and organization of the webpage

1. Which of the following is a key feature of Adobe Dreamweaver's interface?

A) Code view only

B) Design view only

C) Split view, allowing users to see both code and design views simultaneously

D) Live view only

Answer: C) Split view, allowing users to see both code and design views
simultaneously

1. Which of the following form elements is used to create a drop-down menu?

A) Text Field

B) Check Box

C) Radio Button

D) Select Menu

Answer: D) Select Menu

1. How do you set the action attribute of a form in Dreamweaver?

A) By typing the URL in the "Action" field

B) By selecting a file from the "Select File" dialog box

C) By using the "Browse" button to select a file

D) By using the "Code View" to manually enter the code

Answer: A) By typing the URL in the "Action" field

1. What is the purpose of the "Method" attribute in a form?

A) To specify the type of data being sent

B) To specify the URL of the form handler

C) To specify the HTTP method (GET or POST) used to send the form data

D) To specify the format of the form data

Answer: C) To specify the HTTP method (GET or POST) used to send the form
data

1. How do you add a Submit button to a form in Dreamweaver?

A) By dragging the "Submit Button" object from the "Insert" panel

B) By using the "Form" menu and selecting "Add Submit Button"

C) By typing the HTML code for a Submit button

D) By using the "Code View" to manually enter the code

1. What is the purpose of a Submit button in a form?

A) To reset the form fields

B) To submit the form data to the server

C) To cancel the form submission

D) To validate the form data

Answer: B) To submit the form data to the server

1. What type of form element is used to collect a single line of text from the user?

A) Text Area

B) Text Box

C) Radio Button

D) Check Box
Answer: B) Text Box

1. What type of form element is used to allow the user to select only one option from
a group of options?

A) Check Box

B) Radio Button

C) Drop-Down Menu

D) List Box

Answer: B) Radio Button

1. What type of form element is used to allow the user to select multiple options
from a group of options?

A) Radio Button

B) Check Box

C) Drop-Down Menu

D) List Box

Answer: B) Check Box

1. What type of form element is used to provide a list of options for the user to select
from?

A) List Box
B) Drop-Down Menu

C) Radio Button

D) Check Box

Answer: B) Drop-Down Menu

1. What type of form element is used to provide a scrollable list of options for the
user to select from?

A) Drop-Down Menu

B) List Box

C) Radio Button

D) Check Box

Answer: B) List Box

1. What type of form element is used to collect multiple lines of text from the user?

A) Text Box

B) Text Area

C) Radio Button

D) Check Box

Answer: B) Text Area

1. What type of form element is used to collect sensitive data, such as passwords,
from the user?

A) Text Box

B) Text Area

C) Password Field

D) Submit Button

Answer: C) Password Field