Part One: Creating a Gallery page
-
Video - m06-01
-
This next exercise will require eight images. The images should all be the exact same size. In this case, we have eight images, 1000px wide, and 750px height. If you do not have your own images, you can use the images provided in the student files.
-
Open the gallery.html page
-
Switch to Code view, remove the placeholder content 'mainContent', press Enter/Return to add some space
-
Press F5 to refresh
-
In the Insert panel, select div. In the insert div dialog box, assign the div a class of "container."
-
Delete the place holder content in the newly added: <div class="container"></div>
-
Switch to Live view, and make sure that the div.container is selected in the DOM panel
-
Click the green bar in the visual media queries bar
-
Select Insert / Bootstrap Components
-
Add a Grid Row with column (1) inside the Container, use 'nest' for placement
-
Place your cursor inside the new div.container <div class="col-xs-12"> </div>
-
Select top menu Insert
-
Select Heading:H2
-
Change the placeholder text 'This is the content for Layout H2 Tag' h2 ' to 'Gallery'
-
We are going to be creating several pages with this same content, so we will same the code you created to a Dreamweaver snippet. Highlight all the code you have all to the page thus far.
-
Under 'Window' select 'Snippets' (or shift+F9)
-
On the bottom of the pop-up box, click the icon of a file with a '+' inside. A new shipped opens
-
In the name Field (top of the box) type 'Starting_Code'
-
Click 'Insert block'
-
Drag the new snipped to the 'Bootstrap_Snippets' folder
-
Close snippets.
-
Save gallery.html
-
Video - m06-02
-
Preparing to add images:
-
From the "Files" panel, Create a new folder in the "images" folder named "gallery"
-
If you are using your own images, you can drag and drop them into the newly created images folder.
-
If you are using the Tutorial files, drag the eight images from folder: tutorial/images/gallery into the newly created images folder
-
You should be working in Code view
-
Place the cursor after the <h2>Gallery</h2> tag
-
Select top menu Insert / Div
-
In CSS Designer, select 'styles.css' under Sources. Select 'GLOBAL' under @Media, and click the '+' under Selectors to add a new selector "#photoGallery"
-
Delete the placeholder content 'Content for New Div Tag Goes Here'
-
Press F5 to refresh the page
-
In the Property inspector, assign the div to the id "photoGallery"
-
Video - m06-03
-
Place the cursor inside the #photoGallery div
-
Switch to Design view, and choose insert image from the insert menu, or use the keyboard shortcut ctrl + alt + I
-
Navigate to the new gallery folder (inside the images folder)
-
Click with your cursor after the image you just inserted
-
Insert another image.
-
Repeat until you have added all eight images.
-
Click on the first image, and in the Property inspector, remove the Width and Height, and add in content for Alt and Title. Alt should be a short description, and Title should be an appropriate TItle for the image. Both Alt and Title may be the same.
-
Repeat for all images
-
Press F12 and Save All, and preview in browser
-
Video - m06-04
-
Switch to Live view
-
Select the img tag in the Status bar.
-
In the CSS Designer, select styles,css, GLOBAL, and click (+) to add a new Selector. Press the up arrow to select #photoGallery img
-
Add a property of width:100%. Notice how the image maintains its full size as the change with width of the viewport
-
Press F12 to preview in a browser, save all files.
-
We will now add media queries to change the size of the image based on the kind of web browser we are using.
-
In the CSS Designer, in @Media, click '+' to add new media query. In the dialog box, hover to the right of the existing query, and click on the '+' that appears to add a new query, with a minimum width of 768px
-
In the CSS Designer, in @Media, click '+' to add new media query. In the dialog box, hover to the right of the existing query, and click on the '+' that appears to add a new query, with a minimum width of 992px
-
In the CSS Designer, in @Media, click '+' to add new media query. In the dialog box, hover to the right of the existing query, and click on the '+' that appears to add a new query, with a minimum width of 1200px
-
Save All
-
Video - m06-05
-
In CSS Designer, with styles.css and our new rule, min-width:768px selected, click '+' to create a new selector, #photoGallery img
-
Set image width to 50%.
-
Move the Live View Scrubber to see the effect of the new media query
-
In CSS Designer, with styles.css and our new rule, min-width:1200px selected, click '+' to create a new selector, #photoGallery img
-
Set image width to 25%.
-
Press F12
-
Save All and Preview in Browser
-
Notice as you hover over an image, the title is displayed.
-
Return to the initial CSS selector, #photoGallery img, in the GLOBAL media query. If you do not see the selector, just click in the search field (magnifier) and start to type 'pho'
-
We are going to add a css transition property. The property changeshow one css property transitions into another property.
-
Scroll to the bottom of the Property panel, and add a property of transition: all 1.5s
-
Save All
-
Press F12 and preview in your browser. Notice the transition effect on the size change of the images
-
Video - m06-06
-
In CSS Designer, select styles.css from sources, min-width:768px from @Media, and #photoGallery img. Scroll to the bottom of the Property panel, and add a property of transform:rotate(360deg)
-
In CSS Designer, select styles.css from sources, min-width:1200px from @Media, and #photoGallery img. Scroll to the bottom of the Property panel, and add a property of transform:rotate(720deg)
-
Press F12 to save changes and test in browser. The images should rotate with size change!
-
Linking Images to Images to Open in a New Window
-
In Design or Live view
-
Select the first image, and copy the Src attribute in the Property Inspector, into the Link attribute.
-
Save changes and preview in browser. You will notice that if you click on the first image, a larger version of the image opens.
-
Change the target attribute to '_blank'. Save changes and preview in browser. You will notice now that the original window stays open, and the image opens in a new window.
-
Change all the images, copying the source attribute into the link attribute, and set the target attribute to '_blank'
Part Two: Using Font-Awesome (Icons)
-
Video - m06-07
-
Open the template.dwt template file.
-
We are going to use icons from font-awesome
-
We will not download the font-awesome icons, but rather use a content-delivery network, or cdn.
-
Switch to Code view
-
At the top of the page, add the following line of code after the various lines of code link to css files (nav.css, styles.css, bootstrap.css, etc):
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
-
Next select "Save All" from the standard menu, and allow Dreamweaver to update all your pages.
-
Scroll down to the bottom of your web page, to the footer code.
-
Highlight the text in the footer, "Copyright © Your Name"
-
Use the Inspector to apply a format of paragraph to the text.
-
Immediately after the opening footer tag <footer> but before the paragraph tag <p>, paste the following code:
<i class="fa fa-facebook" aria-hidden="true"></i>
-
Next paste this code
<i class="fa fa-google" aria-hidden="true"></i>
-
After this code, page:
<i class="fa fa-youtube" aria-hidden="true"></i>
-
And this code next:
<i class="fa fa-twitter" aria-hidden="true"></i>
-
Next select "Save All" from the standard menu, and allow Dreamweaver to update all your pages.
-
Press F12 to preview you work in a browser.
-
You can see the font-awesome icons in the footer, but they are a little small. We are go to use the Dreamweaver find/replace command to make all the icons larger.
-
In Code view, press Ctrl+f (find) or choose Find + Replace from the Edit menu
-
Make sure you have "selected text" selected
-
In the first field, "find" enter class="fa. In the second field, "replace" enter class="fa fa-3x
-
Click on "Replace All"
-
You should receive a confirmation message that 4 items were found.
-
Next select "Save All" from the standard menu, and allow Dreamweaver to update all your pages.
-
Press F12 to save your work and preview in a browser.
-
You will see that the icons are much larger. Font-Awesome icons can be any size you want, as small or as large as you need. But font-awesome includes five preset sizes. Learn more about font-awesome sizes at font-awesome.
-
Video - m06-08
-
We want to add some spacing for our font-awesome icons. In CSS Designer, select 'styles.css' under Sources. Select 'GLOBAL' under @Media, and click the '+' under Selectors to add a new selector, '#footer i'
-
In the Properties panel, add 8px of left padding, and 8px of right padding
-
Press F12 to save your work and preview in a browser. Since you only changed the styles.css file, you are not prompted to update all pages.
-
We want to link our font-awesome icons to web pages. Creating links for font-awesome icons is a little different than linking to text.
-
Use your cursor (or the Status bar) to highlight and select the code: <i class="fa fa-facebook"></i>
-
From the top menu, choose Insert / HTML / Hyperlink
-
In the Link field, enter "http://www.facebook.com"
-
In the Target field, choose '_blank'
-
In the Title field, enter 'Facebook'
-
Click 'OK'
-
Press F5 to refresh
-
Use your cursor (or the Status bar) to highlight and select the code: <i class="fa fa-google"></i>
-
From the top menu, choose Insert / HTML / Hyperlink
-
In the Link field, enter "http://www.google.com"
-
In the Target field, choose '_blank'
-
In the Title field, enter 'Google'
-
Click 'OK'
-
Press F5 to refresh
-
Use your cursor (or the Status bar) to highlight and select the code: <i class="fa fa-youtube"></i>
-
From the top menu, choose Insert / HTML / Hyperlink
-
In the Link field, enter "http://www.youtube.com"
-
In the Target field, choose '_blank'
-
In the Title field, enter 'Youtube'
-
Click 'OK'
-
Press F5 to refresh
-
Use your cursor (or the Status bar) to highlight and select the code: <i class="fa fa-twitter"></i>
-
From the top menu, choose Insert / HTML / Hyperlink
-
In the Link field, enter "http://www.twitter.com"
-
In the Target field, choose '_blank'
-
In the Title field, enter 'Twitter'
-
Click 'OK'
-
Press F5 to refresh
-
Next select "Save All" from the standard menu, and allow Dreamweaver to update all your pages.
-
Press F12 to preview your work in a browser.
Optional - Changing the Link Colors
-
Video - m06-09
-
When you preview in a browser, you will see you icons are blue, and green when you hover over them. This is because now they are html anchors, and they take on the property of anchors.
-
To change the colors, create a new style rule for "#footer a". This rule will target any anchors in the footer section.
-
In CSS Designer, select 'styles.css' under Sources. Select 'GLOBAL' under @Media, and click the '+' under Selectors to add a new selector, '#footer a'
-
Use the text color property to set the color of the text.
-
Under 'text-decoration' select 'none'. This will make sure we do not have an underline with our anchors.
-
Just in case we need the effect, click on the "more" icon, and add a transition property, with a value of all 0.5s
-
Press F12 to preview your site. Since you are only updating the styles.css file, and not making any changes to the html code, you are not prompted to update pages.
-
If you want your text to be a different when you hover on the icons, create a selector #footer a:hover. Use the text property to set the color.
Wayne Joness
West Los Angeles College, cs952
Fall