From the course: Productivity Tips for Web Designers
Unlock the full course today
Join today to access over 22,400 courses taught by industry experts or purchase this course individually.
Hiding and showing elements to create a simple image gallery
From the course: Productivity Tips for Web Designers
Hiding and showing elements to create a simple image gallery
- Hello friends, this is Sue Jenkins with Productivity Tips for Web Designers. In this week's lesson, I'll be showing you how to use Dreamweaver's Show-Hide Elements behavior to create a simple gallery of images from a set of stacked div containers. In Dreamweaver, hiding and showing layers refers to adjusting the visibility of a layer in the browser window using JavaScript. For instance, you can have a layer's visibility set to hidden when the page first loads in the browser. Then, with the magic of JavaScript, you can make the layer visible when a visitor performs some action, such as clicking on a text link or an image. Hiding and showing layers can be really useful for a variety of reasons, including creating image galleries or showing tooltips, even revealing product details. Truly, you can use this interactive technique for any content, as a way to enhance your site visitor's experience. Let's take a look at the starting page code. In this demonstration, I'll be showing you how…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
- 01_01_MakingBlogHeadlinesPop.zip
- 01_02_block_quotes.zip
- 01_04_pairingfonts.zip
- 01_05_linkstyles.zip
- 01_06_Readability.zip
- 02_01_Rulers_Grid_Guides.zip
- 02_02_Shadow_Effects.zip
- 02_03_Type_Shapes.zip
- 02_04_AIWebSetup_Layout_Outlines.zip
- 02_05_AI_Symbols.zip
- 02_06_AI_TextFormattingForTheWeb.zip
- 02_07_AI_GraphicStyles.zip
- 02_08_AI_WorkingWithTextures.zip
- 02_09_AI_TheArtofRoundingCorners.zip
- 02_10_AI_UsingTextWrapAsPadding.zip
- 03_01_Grabbing_Measurements.zip
- 03_02_SmartFilters.zip
- 03_03_Content_Aware_Scale.zip
- 03_05_SamplingColors.zip
- 03_06_Resize.zip
- 03_07_ColorTinting.zip
- 03_08_QuickTeethWhitening.zip
- 03_09_Levels.zip
- 03_10_Optimize.zip
- 04_01_GoogleFonts.zip
- 04_02_bootstrap.zip
- 04_03_master_css.zip
- 04_04_CSSShadows.zip
- 04_05_repeat.zip
- 04_06_TwoMinRotate.zip
- 04_07_stitchedborder.zip
- 04_08_dropcaps.zip
- 04_10_CSSRoundingImages.zip
- 04_09_entities.zip
- 04_11_textselectioncolor.zip
- 04_12_tintedimagerollovers.zip
- 05_02_Externalize_CSS_JS.zip
- 05_04_CodeCleanup.zip
- 05_05_about_fix.zip
- 05_06_validation.zip
- 05_07_CheckingLinks.zip
- 05_08_5_8_Using_Snippets.zip
- 05_09_5_9_EasyPopups.zip
- 05_10_5_10_HideShow.zip
- 05_11_about.zip
- 05_12_SEOchallenge.zip
Contents
-
-
-
-
-
-
-
Managing sites to harness the power of Dreamweaver5m 36s
-
Externalizing CSS and JavaScript for better efficiency7m 5s
-
Publishing using Dreamweaver's integrated FTP7m 56s
-
Cleaning up redundant and unnecessary code5m 19s
-
Using Find and Replace for rapid search and editing8m 8s
-
Validating your code to W3 standards5m 19s
-
Using the Link Checker to find broken links and orphans4m 27s
-
Building code snippets to save time6m 48s
-
Creating pop-up windows without writing JavaScript4m 35s
-
Hiding and showing elements to create a simple image gallery5m 6s
-
Understanding links and paths to write better code6m 25s
-
Organic and ethical SEO coding tips8m 11s
-