Tne next meeting of the PACS CSS Workshop will be this Saturday, November 18. The topic will be two-column layouts.
We have a special schedule this month. Because the Javascript Workshop will not be meeting, CSS and Flash will each expand by thirty minutes. So we will spend the usual 9-10 period for our regular workshop where we will be putting together the CSS properties we have been working on and use them to create two-column layouts in a few different ways. By the end, we will have templates to quickly create pages, letting you just paste content right into the templates.
For our extra half hour, we will change gears and look at tools for editing CSS. Up to now, we have been composing our style sheets by hand with just a text editor. A dedicated CSS editor can make the job easier. We will look at a couple of those editors.
And we can talk about other tools as time permits.
Flash will then start at 10:30. Mike has some special topics of interest for his extra 30 minutes.
Finally, at Web Design, Reed will continue on page layouts, and we will raffle off a copy of a new book on CSS, Beginning CSS Web Development: From Novice to Professional.
November 17, 2006
November 11, 2006
October 2006 Meeting Notes:
Layout Properties
At the October session, we continued with the the CSS attributes of float and clear. I have uploaded to the Sample Pages section (see sidebar)a couple of the files we used at the meeting, for those who want to review them and work with these styles.
We used a sample file to compare the HTML use of align and clear with the CSS use of float and clear. That file might be of interest if you want to play with the basics of each. We also used a file to show how to use float and clear to create a drop-cap effect.
We then began putting these properties together to create two column layouts. We will expand on this topic at the November meeting when we work on different types of layouts using CSS.
We used a sample file to compare the HTML use of align and clear with the CSS use of float and clear. That file might be of interest if you want to play with the basics of each. We also used a file to show how to use float and clear to create a drop-cap effect.
We then began putting these properties together to create two column layouts. We will expand on this topic at the November meeting when we work on different types of layouts using CSS.
October 18, 2006
October 21 Meeting Announcement
The next meeting of the CSS Workshop will be this Saturday, October 21, from 9 to 10 am.
We will continue this month on the topic of using CSS to lay out webpages. If you missed last month's session, we will do a quick review before moving on, so you should be able to catch up quickly.
We will work with the float and clear properties, and then possibly get into position. It will be an interesting hour, and we will be laying the foundation for some advanced uses of CSS.
We will continue this month on the topic of using CSS to lay out webpages. If you missed last month's session, we will do a quick review before moving on, so you should be able to catch up quickly.
We will work with the float and clear properties, and then possibly get into position. It will be an interesting hour, and we will be laying the foundation for some advanced uses of CSS.
September 18, 2006
September 2006 Meeting Notes:
Beginning CSS Layout
At our September meeting, we started on using CSS to define the layout of a webpage. We began by reviewing the use of tables to format a page, a technique that is still useful and can be used to structure a page which is then styled with CSS. This kind of hybrid approach has its advantages, as is pointed out in this article at Builder.com.
To move on to pure CSS layout techniques, we started by looking at the HTML align attribute. Align is used with images and tables to move the element to the margin and let subsequent text wrap around it. We then looked at the clear attribute that is used with <BR> to begin text after an aligned item.
CSS introduces the float property that allows any element to be positioned along a margin with text wrapping around the element. And the clear property can be used with any element, not just line break. We did some work with these properties to show how they are used with images instead of using HTML align.
At our next meeting, we will start with a brief review of the box model, the basis for page layout. To see some visual representations of the box model, do a Google image search for "css box model." For a review of the box model, see this Builder.com article. For practice with the different properties of boxes, go to the Index of Sample Pages on this site (link in sidebar), and go down to Basic Boxes and the subsequent samples. Download them and check the comments to try out different properties that affect boxes.
To move on to pure CSS layout techniques, we started by looking at the HTML align attribute. Align is used with images and tables to move the element to the margin and let subsequent text wrap around it. We then looked at the clear attribute that is used with <BR> to begin text after an aligned item.
CSS introduces the float property that allows any element to be positioned along a margin with text wrapping around the element. And the clear property can be used with any element, not just line break. We did some work with these properties to show how they are used with images instead of using HTML align.
At our next meeting, we will start with a brief review of the box model, the basis for page layout. To see some visual representations of the box model, do a Google image search for "css box model." For a review of the box model, see this Builder.com article. For practice with the different properties of boxes, go to the Index of Sample Pages on this site (link in sidebar), and go down to Basic Boxes and the subsequent samples. Download them and check the comments to try out different properties that affect boxes.
September 09, 2006
September 16 Meeting Announcement
The first PACS meeting of the season will be next Saturday, September 16. The CSS Workshop will be meeting at the same time and place as last year, Room 713, 9 - 10 am.
We will be start the new season with a whole new topic: Page Layout. The old HTML way of structuring pages was to use (or mis-use) tables to organize elements on the browser page. CSS introduced new ways of structuring pages by separating presentation from structure. The properties that make layouts happen are float and position, and we will work through these topics in the first few meetings of the year.
We will start this month by reviewing the use of tables to structure pages and then see how to do the same thing with CSS. The basis of CSS layout is the box model, and we will review that subject briefly before getting into the float property. If you want to prepare a little bit, I suggest reviewing material on the CSS box model. A good article is Make better Web pages by understanding the CSS box model. You might also want to take a look at the sample pages of our website for the examples of boxes, borders, and margin and padding: Sample Pages for Testing CSS.
This month, PACS has the usual full schedule of web-related sessions on tap, including JavaScript, Flash, and a new workshop on ASP.net. The main Web Design SIG is at 1 pm, and we will be raffling off a copy of the first version of the book Designing with Web Standards, by Jeffrey Zeldman to all members who attend.
Complete details of this month's activities are at the new and improved PACS website. And in fact, the Web Design SIG will be a review of the process of updating that site.
See you Saturday.
We will be start the new season with a whole new topic: Page Layout. The old HTML way of structuring pages was to use (or mis-use) tables to organize elements on the browser page. CSS introduced new ways of structuring pages by separating presentation from structure. The properties that make layouts happen are float and position, and we will work through these topics in the first few meetings of the year.
We will start this month by reviewing the use of tables to structure pages and then see how to do the same thing with CSS. The basis of CSS layout is the box model, and we will review that subject briefly before getting into the float property. If you want to prepare a little bit, I suggest reviewing material on the CSS box model. A good article is Make better Web pages by understanding the CSS box model. You might also want to take a look at the sample pages of our website for the examples of boxes, borders, and margin and padding: Sample Pages for Testing CSS.
This month, PACS has the usual full schedule of web-related sessions on tap, including JavaScript, Flash, and a new workshop on ASP.net. The main Web Design SIG is at 1 pm, and we will be raffling off a copy of the first version of the book Designing with Web Standards, by Jeffrey Zeldman to all members who attend.
Complete details of this month's activities are at the new and improved PACS website. And in fact, the Web Design SIG will be a review of the process of updating that site.
See you Saturday.
September 02, 2006
New E-mail notification system
Subscribers to this site's e-mail notifications will notice a different type of notification coming into their mail boxes. I had been using a system called Bloglet, but the system has not been maintained, and in fact, notice of the the August 28 update might not have been mailed to you. For details on Bloglet, see the statement on the Bloglet site.
I followed Bloglet's recommendation and converted to Feedblitz. If anyone has trouble withe Feedblitz, let me know. It seems to run well, and it has an easy unsubscribe feature.
I followed Bloglet's recommendation and converted to Feedblitz. If anyone has trouble withe Feedblitz, let me know. It seems to run well, and it has an easy unsubscribe feature.
August 28, 2006
Details on Microsoft's CSS changes for IE7
Excuse the interruption to everyone's summer, but I thought folks would find this interesting:
Microsoft is close to finishing version 7 of Internet Explorer, and in fact a release candidate is now available. One of the developments many of us have been following is the CSS support in the new version. For the latest information on this topic, see the blog entry from Microsoft called IEBlog : Details on our CSS changes for IE7.
There is a pretty full list of changes and improvements shown there. And most encouraging is the working relationship between MSFT and the W3C.
Life just keep getting better!
Microsoft is close to finishing version 7 of Internet Explorer, and in fact a release candidate is now available. One of the developments many of us have been following is the CSS support in the new version. For the latest information on this topic, see the blog entry from Microsoft called IEBlog : Details on our CSS changes for IE7.
There is a pretty full list of changes and improvements shown there. And most encouraging is the working relationship between MSFT and the W3C.
Life just keep getting better!
June 11, 2006
June 2006 Meeting Report -- Navigation Menus
The June meeting of the PACS CSS Workshop was the last until September.
This month, we covered different techniques for using CSS to style navigation menus. We used a number of online resources to demonstrate different techniques for taking a set of links and styling them to display as interesting and functional navigation elements. The sites are below, and I encourage you to try their examples in order to develop your CSS abilities. (These links open into new browser windows.)
This month, we covered different techniques for using CSS to style navigation menus. We used a number of online resources to demonstrate different techniques for taking a set of links and styling them to display as interesting and functional navigation elements. The sites are below, and I encourage you to try their examples in order to develop your CSS abilities. (These links open into new browser windows.)
- 3D button effect
- Go to number 9 on this list of favorite tricks to see the 3D effect that we demonstrated. The rest of the tricks are worth your time as well.
- Menu tutorial
- We followed this tutorial from one of our favorite CSS sites to create a vertical menu from a simple line of links and then a horizontal menu from the same CSS by just adding a couple of properties.
- Tableless rollover navigation bars
- This simple CSS creates a nice horizontal menu bar with a rollover effect.
- List-u-Like CSS Generator
- Instead of writing your CSS and guessing how it will look, try this generator to just make your property and value selections and then preview the results.
- Tabbed menus
- This site has a whole collection of different tabbed menus using CSS. The site says they are free. Just look at the source for the techniques used.
June 04, 2006
June 10 Meeting Announcement
The next meeting of the PACS CSS Workshop will be this coming Saturday, June 10, at the usual 9-10 hour. This month's PACS meeting is on the second Saturday of the month due to the school schedule.
This month we will work some more on styling navigation menus. We started last month, and we will continue in June with vertical menus, then move on to horizontal menus. Depending on time, we may be able to look at some more advanced ideas.
This meeting is the last of the season. We will take the summer off, and if there is interest in continuing this workshop, we will pick up again in September. Please give me some feedback.
This month's PACS meeting is particularly rich with web-related topics. In addition to the usual workshops, the guest speaker at the main meeting will be Eric Pascarello, who will talk about AJAX and the new developments that are changing the way we use the internet. Eric will also be the speaker at the Web Design SIG at 1-2. These are sessions you don't want to miss. More information is available at the PACS website.
Finally, I have blogged an interesting new website called Vitamin (see below).
Hope to see you all Saturday.
This month we will work some more on styling navigation menus. We started last month, and we will continue in June with vertical menus, then move on to horizontal menus. Depending on time, we may be able to look at some more advanced ideas.
This meeting is the last of the season. We will take the summer off, and if there is interest in continuing this workshop, we will pick up again in September. Please give me some feedback.
This month's PACS meeting is particularly rich with web-related topics. In addition to the usual workshops, the guest speaker at the main meeting will be Eric Pascarello, who will talk about AJAX and the new developments that are changing the way we use the internet. Eric will also be the speaker at the Web Design SIG at 1-2. These are sessions you don't want to miss. More information is available at the PACS website.
Finally, I have blogged an interesting new website called Vitamin (see below).
Hope to see you all Saturday.
Vitamin - A resource for web developers, designers and entrepreneurs
A new online magazine called Vitamin - A resource for web developers, designers and entrepreneurs looks as though it will be an excellent source for information on all things web-related.
The site is the product of Carson Systems, a company I have seen mentioned as sponsoring some high-level web development seminars. The list of advisors to this new site is impressive and includes a lot of people whose names are easily recognizable.
I suggest checking out Vitamin and adding the RSS feed to your reader.
The site is the product of Carson Systems, a company I have seen mentioned as sponsoring some high-level web development seminars. The list of advisors to this new site is impressive and includes a lot of people whose names are easily recognizable.
I suggest checking out Vitamin and adding the RSS feed to your reader.
Subscribe to:
Posts (Atom)