Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
It's rare nowadays that people actually build entire pages using HTML tables. Most people now are starting to use CSS for layout. One of the nice things about Illustrator's Save for Web & Devices feature is that it does support the export of a slice layout using CSS divs instead of an HTML table. Before we do that, however, I want to show you a few settings that you can put in place to make life a little bit easier later on. Now, we know that you can select slices here inside of Illustrator and then go to choose Object and then choose Slice and then Slice Options to change some of the settings for the slices, but I actually like to prefer to do that in the Save for Web & Devices dialog box.
So I am going to make sure that this artboard is currently the active one. This is the one that I want to export right here. I am going to choose File > Save for Web & Devices, and I'm going to zoom out just a little bit here. I'm pressing Command+Minus or Ctrl+Minus if you're on a Windows computer. And I'm going to use my Slice Select tool to simply double-click on a slice. Notice that opens up the Slice Options dialog box, and I have this slice set to a type of image, but the name of the slice I've renamed it to be called navigation. In fact, if I take a look at some of these other slices, like I double-click on this one, this one is called main.
This one on the top here is called header, and maybe this one over here is called sidebar_main. By naming my slices in this way, when this file actually does get exported using CSS divs, the slice names will be translated, and they will turn into the div names. This will make it much easier for me, or a developer, to understand how the code is written and which content belongs in each of these divs. So with my slice names in place, I can now go ahead and choose to save this, but instead of choosing the settings here for Default Settings, I'm going to modify these by choosing Other.
Now, in the HTML section of the Output Settings dialog box, I am going to turn on this option called Output XHTML. And I am going to switch over here to where it says Slices, and rather than generate an HTML table, I am going to have Illustrated generate CSS instead. I can have them referenced by ID, and like I said before, because I went ahead and I name though my slices, those slice names will become to div IDs for each of the divs that get created in the CSS. So now I'll click OK to save those settings. Let me go ahead and now navigate to Chapter 09 over here.
Let's create a new folder. I am going to call this one css, and instead of choosing to save all of my slices, I just really want to create divs for all the user slices. Those are the ones that I've created slices for. I don't really care about the other information that's there. I am going to click Save. So now I am going to switch over to Dreamweaver, and let's take a look at what this page looks like. I'll choose File > Open. Let's go ahead now and navigate up to the CSS folder here and choose to open up this site_design.html page. And if I go ahead and I go to Design View for a second here, you can see that the divs that I specified inside of Illustrator with slices now exist here inside of Dreamweaver.
And if I change to the Code View here or the Split View I can see that the names of all of my divs have come through as well. So because I've named my slices navigation, and header, and main, for example, those now become the names of the divs. Now, it's important to realize that the divs that are created right here or what we call AP divs or Absolute Positioned divs. Now, normally in a regular web design layout, when you start to learn about using CSS, most people don't use these types of divs unless they want artwork to be positioned in a certain specific location on a page.
However, Illustrator is still kind of in the graphic mode here, so it creates all these divs in the precise location that they were designed on the page, meaning that the divs themselves won't flow as you change the layout. In fact, if you scroll up here in the code, you can see that these divs that are created here have their position set to Absolute. Still, it's a way to take what you've created inside of Illustrator and quickly turn it into code that you might use inside of Dreamweaver. Once you're here in Dreamweaver, you can adjust the code as needed.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.