All the instructions are in the data zip file that’s attached. Also, if you need to add my name anywhere, my name is “Andre Torabian”. Please save the data zip under my name as well when you send it back to me and if needed, the course name is “CAOT 123”. I have attached TWO homework assignments with their instructions. Also, one Hands on Test-1 with instructions. Please email if you need further assistance. You might see a section where I have chosen “double spaced” but please ignore that. This assignment does not require writing.
hands_on_1_data_files.zip

homework_1_data_files.zip

homework_2.pdf

hands_on_1_data_files.zip

hands_on_test_1__1_.pdf

homework_1_data_files.zip

homework_2.pdf

homework_2_solution.pdf

Unformatted Attachment Preview

Homework 2 (Revised)
Create a site from a Bootstrap Starter Template
You will be creating and editing a website from scratch. No data files are needed for this exercise.
Getting Started
Create a folder on your Desktop (or some other location) named lastname‐bootstrap‐site. This will be
the site root folder for the site you create. When you finish, you will zip this folder and submit it.
1. Launch Dreamweaver. Define a new site named “Homework 2 Bootstrap Site”. Use the lastname‐
bootstrap‐site as the root folder.
2. Create a new file based on the Bootstrap‐Portfolio template.
[Hint: File > New > Starter Templates > Bootstrap Templates > Bootstrap‐Portfolio.]
3. Save your new page as index.html.
Delete unwanted elements from the nav bar (see pages 132 ‐ 134, 138 ‐ 139)
4. Select and delete the Search box and button.
[Hint 1: It is “form .navbar‐form…” ]
[Hint 2: Remember to use the tag selector to make your selections.]
5. Delete the dropdown menu.
[Hint: It is “li .dropdown” ]
6. Delete Brand
[Hint: It is “a .navbar‐brand” ]
7. Delete class=”active” from the first link.
[Hint: You may find it easier to do this in Code view.]
8. Delete the from the first link.
[Hint 1: You may find it easier to do this in Code view.]
[Hint 2: Be sure to delete the whole span, opening and closing.]
Add elements and format the nav bar (see pages 135 ‐ 138)
9. Add two more links that are exactly the same as the existing links.
[Hint 1: You may find it easier to do this in Code view.]
[Hint 2: Copy/paste is your friend.]
At this point, you should have four identical links in the nav bar.
10. Change the text of the links to “Home”, “Products”, “About Us”, “Contact Us”
11. Create a new style sheet named “main.css”.
[Hint: Use the +Sources in CSS Designer.]
12. Set the width of the nav bar to 350px.
[Hint: Create a new style selector named “div .nav.navbar‐nav”.]
1
13. Center the nav bar. (See page 153.)
[Hint: Set the margin to “0px auto”. Change the float to “none”.]
14. Change the background color of the navbar to #F8F3BC.
[Hint: Create a new style selector named “.navbar.navbar‐default”.]
15. Change the font color of the navbar to #50A3BB.
[Hint: Create a new style selector named “div .nav.navbar‐nav a:link”.]
16. Modify header background color to be a gradient from #47D9FF to #50A3BB
[Hint: Create a style selector named “.jumbotron.text‐center”.]
17. Change the font of the whole page to “Baskerville, “Palatino Linotype”…
[Hint 1: Create a style for the body.]
[Hint 2: This is one of the existing font stacks.]
When you have finished the exercise, check your index.html file in the browser or Live view; compare it
to the bootstrap‐site‐solution.pdf file.
Submit the assignment
When you are done with the exercise, you will have a folder named lastname‐bootstrap‐site. Zip that
folder, to create a file named lastname‐bootstrap‐site.zip. This is the file you will submit to Canvas.
See Canvas for more details on how to submit your file.
2
Hands‐On Test 1: House of Sushi
Getting Started
Create a folder on your Desktop (or some other location) named lastname‐sushi‐site. This will be the
site root folder for the site you create. When you finish, you will zip this folder and submit it.
There is one data file, “sushi‐text.txt”. You can find this in the Hands‐On 1 Data Files, which are in
Canvas. You can also find the PDF solution files there, for two different screen widths.
Exercise
1. Launch Dreamweaver. Define a new site named “House of Sushi”. Use the lastname‐sushi‐site as the
root folder.
2. Create a new page based on the “Bootstrap ‐ Agency” template.
3. Save your new page as layout.html.
Delete unwanted elements from the nav bar (see pages 132 ‐ 134, 138 ‐ 139)
4. Select and delete the right navbar (ul “nav navbar‐nav navbar‐right”).
5. Delete the Search box and button (form).
6. Delete Brand (“a .navbar‐brand” ]
7. Delete class=”active” from the first link.
8. Delete the from the first link. Delete the whole span, opening and closing.
Add elements and format the nav bar (see pages 135 ‐ 138)
9. Add two more links that are exactly the same as the existing links.
At this point, you should have four identical links in the nav bar.
10. Change the text of the links to “Home”, “Menu”, “Specials”, “Order”
11. Create a new style sheet named “sushi_styles.css”.
12. Change the background color of the navbar to #F4CB89.
Selector name: .navbar‐default
13. Change the font color of the navbar to #A30212.
Change the font weight of the navbar to bold.
Change the font size of the navbar to 2em.
Selector name: .nav.navbar‐nav li a
14. Change the background color of the body to #588C8C
Selector name: body
15. Change the font of the whole page to “artifika”, which is one of the Adobe Edge Web fonts (see
pages 187 ‐ 188).
Selector name: body
16. Delete the img‐circle class from all of the images that are circles. (There should be six.)
1
17. For the divs that hold the images (div class=”col‐lg‐4 col‐sm‐12 text‐center”), change the “.col‐sm‐
12” to “.col‐sm‐6”.
Note that you will see the change in your page only when viewing in the “small” size (768px ‐
991px). At that size, your images should be in two columns, with three rows.
18. Add the page title: “House of Sushi ‐ Page Title Here”
19. Save your files.
20. Save the layout page as a template named sushi.dwt. (See page 230.)
21. Insert the editable regions listed below (see pages 231 ‐ 233).
Area of page
Editable region name
header (area containing the “Learn more” button)
header1
section (area containing the “ABOUT US” text)
section1
22. Save and close the template.
23. Create a new page based on the “sushi” template. (See pages 236 ‐ 237.)
24. Save your page as specials.html.
25. Change the page title to “House of Shushi ‐‐ Specials”.
26. Change the h1 text (“Lorem ipsum dolor sit amet”) to “Not Just Sushi. Something Special.” (See page
238.)
27. After the “p .text‐center” placeholder (Its text is “Lorem ipsum dolor sit amet…”), copy/paste the
text from the data file “sushi‐text.txt”. Your new text should be in p tags.
28. (If necessary) Delete the original placeholder text in the previous step.
29. Change “ABOUT US” to “Specials”.
When you have finished the exercise, check your specials.html file in the browser or Live view; compare
it to the house of sushi specials.pdf file. Note that there are two different versions of the solution PDF;
the way your file looks will depend on the width of your screen.
Submit the assignment
When you are done with the exercise, you will have a folder named lastname‐sushi‐site. Zip that folder,
to create a file named lastname‐sushi‐site.zip. This is the file you will submit to Canvas.
2
Homework 2 (Revised)
Create a site from a Bootstrap Starter Template
You will be creating and editing a website from scratch. No data files are needed for this exercise.
Getting Started
Create a folder on your Desktop (or some other location) named lastname‐bootstrap‐site. This will be
the site root folder for the site you create. When you finish, you will zip this folder and submit it.
1. Launch Dreamweaver. Define a new site named “Homework 2 Bootstrap Site”. Use the lastname‐
bootstrap‐site as the root folder.
2. Create a new file based on the Bootstrap‐Portfolio template.
[Hint: File > New > Starter Templates > Bootstrap Templates > Bootstrap‐Portfolio.]
3. Save your new page as index.html.
Delete unwanted elements from the nav bar (see pages 132 ‐ 134, 138 ‐ 139)
4. Select and delete the Search box and button.
[Hint 1: It is “form .navbar‐form…” ]
[Hint 2: Remember to use the tag selector to make your selections.]
5. Delete the dropdown menu.
[Hint: It is “li .dropdown” ]
6. Delete Brand
[Hint: It is “a .navbar‐brand” ]
7. Delete class=”active” from the first link.
[Hint: You may find it easier to do this in Code view.]
8. Delete the from the first link.
[Hint 1: You may find it easier to do this in Code view.]
[Hint 2: Be sure to delete the whole span, opening and closing.]
Add elements and format the nav bar (see pages 135 ‐ 138)
9. Add two more links that are exactly the same as the existing links.
[Hint 1: You may find it easier to do this in Code view.]
[Hint 2: Copy/paste is your friend.]
At this point, you should have four identical links in the nav bar.
10. Change the text of the links to “Home”, “Products”, “About Us”, “Contact Us”
11. Create a new style sheet named “main.css”.
[Hint: Use the +Sources in CSS Designer.]
12. Set the width of the nav bar to 350px.
[Hint: Create a new style selector named “div .nav.navbar‐nav”.]
1
13. Center the nav bar. (See page 153.)
[Hint: Set the margin to “0px auto”. Change the float to “none”.]
14. Change the background color of the navbar to #F8F3BC.
[Hint: Create a new style selector named “.navbar.navbar‐default”.]
15. Change the font color of the navbar to #50A3BB.
[Hint: Create a new style selector named “div .nav.navbar‐nav a:link”.]
16. Modify header background color to be a gradient from #47D9FF to #50A3BB
[Hint: Create a style selector named “.jumbotron.text‐center”.]
17. Change the font of the whole page to “Baskerville, “Palatino Linotype”…
[Hint 1: Create a style for the body.]
[Hint 2: This is one of the existing font stacks.]
When you have finished the exercise, check your index.html file in the browser or Live view; compare it
to the bootstrap‐site‐solution.pdf file.
Submit the assignment
When you are done with the exercise, you will have a folder named lastname‐bootstrap‐site. Zip that
folder, to create a file named lastname‐bootstrap‐site.zip. This is the file you will submit to Canvas.
See Canvas for more details on how to submit your file.
2
Bootstrap Site (index.html)

Purchase answer to see full
attachment