By Lee Sykes
May 2006
Continuing our series on How to build a DotNetNuke website, we expand on the previous tutorial (Styling and formatting in the Text/HTML module) and add content to the Home and Portfolio pages of the Vortex Music website.
The first three videos of this tutorial focus on the Home page, in particular working with the Text/HTML module and the FCKEditor. We demonstrate the best practices when working with the Text/HTML module as well as working with images, uploading files and formatting the text.
The second half of the tutorial (6 videos) focuses on the portfolio page. This is a continuation of the principles introduced in the
Styling and formatting in the Text/HTML module tutorial.
We demonstrate how to programme the skin.css file and the FCKEditor so that you can quickly and easily create the Portfolio credits list (see image below). This page is created using just CSS, no tables are used and no images or formatting are placed in the source code of the page. The Portfolio page is styled completely using the skin.css file.
As with the quotes that we demonstrated in
issue 8, all you have to do is select a section of text and instantly turn it into a Portfolio credit aligned to the left or right with it’s own background image.
Portfolio page credits list
The videos cover:
Video 1 - Introduction and Examples
- Introduction to the tutorial
- Working with the Text/HTML module, skin.css file and the FCKEditor for styling the Home and Portfolio pages
- Demonstration of how easy it is to style the portfolio pages once we have programmed the skin.css file and FCKEditor
Time Length: 7min 51secs
Video 2 - Keyword Research, Text/HTML module, FileManager and images
- Intro, research keywords
- Adding Text/HTML module
- The best practice method for pasting content from Microsoft Word
- Uploading an image using the FileManager
- Creating a folder in your portal
- Uploading an image to the new folder
- How to upload an image using the FCKEditor
- Adding an image to the Text/HTML module
- Formatting the text, using bold, centering text etc.
Time Length: 11min 54secs
Video 3 - Adding content, working with containers, quick tips, completion of Home page
- Adding content to the TopPaneSE (Keyword search phrase at the top of the page)
- How to remove a container
- Adding text to the TopPaneSE content pane
- Adding H1 tags, explanation of search engine benefits
- Tip for working with Firefox and IE and speeding up editing / previewing a DotNetNuke website
- Adding Page title, description and keyword phrases for search engines
Time Length: 5min 58secs
Video 4 - Introduction to the Portfolio page
- Portfolio page – Adding content using the Text/HTML module
- (we are now ready to add the classes to the skin.css file to format the page)
Time Length: 1min 50secs
Video 5 - Setting the first portfolio properties in the skin.css file
- Beginning of editing the skin.css file for the portfolio page
- Copying across the skin files and images
- Opening in Visual Web Developer Express
- Adding first class, portfolio filmleft
- Viewing the changes in DotNetNuke
- Formatting a portfolio item to display the portfoliofilmleft class
- Converting into an un-ordered list
- Styling the portfoliofilmleft class list items to style the text for the portfolio page
Time Length: 10min 04secs
Video 6 - Creating portfolio items for the right side
- Viewing the new text styles for the portfoliofilmleft class
- Creating the portfoliopianoright class (background image)
- Portfoliopianoright class – unordered list section, grouping the classes
- Formatting a portfolio item to display the Portfoliopianoright class
- Styling the portfolio item by styling with unordered lists
Time Length: 6min 11secs
Video 7 - Grouping classes, completing all portfolio items, adding styles to FCKEditor
- Creating the Portfolioscoreleft class
- How to group together all of the left side classes to reduce the code size
- Adding all left and right side classes for the portfolio page
- Adding the styles to the FCKEditor
- Viewing the new styles in DotNetNuke
- Viewing the styles drop down list in the FCKEditor
- Formatting the rest of the portfolio items using the Styles drop down list from the FCKEditor
- Wrapping problem and the solutions
Time Length: 8min 10secs
Video 8 - Wrapping problems and solutions
- Demo of wrapping problem with large sized text and the solution using the clear class
- Showing all portfolio items correctly styled and the options available for fixing the layout problems
- Fixing the layout problems for text sized to largest
Time Length: 8min 39secs
Video 9 - Finishing touches to the portfolio page
- Adding the H2 and H3 tags with a clear class in the H3 tag
- Formatting the H2 and H3 tags using the skin.css file
- Viewing the changes, completing the layout of the portfolio page
- Viewing the portfolio page with the CSS stylesheet removed
- Viewing the portfolio page in Fangs (a programme that represents the page text as a screen reader)
- How to add a border to all images in a DotNetNuke portal using the skin.css file
- Viewing the images
Time Length: 8min 09secs
Total Time Length: 68min 46secs