电子商务网页制作教学课件ppt作者谢嵘011课件.ppt

主编：谢嵘 项目简介 这是本书中最全面的一个实例，主要目地就是使用Dreamweaver cs4来制作一个完整的电子商务网站。 该网站应用了表格、框架和DIV布局，也应用了大量的CSS和JavaScript脚本对网页进行了美化，同时还使用fireworks和flash制作了网站中使用到的图片和flash广告。为了使整个网站的风格趋于统一，也应用了Dreamweaver cs4中的模板和库功能，加快了网站的建设速度。 项目简介 一、建立站点 活动步骤： 首先在我们电脑的某一个盘符下新建一个文件夹，将它命名为“ebook”，并在该文件下再创建2个子文件夹，分别命名为“style”和“images”，这两个子文件夹分别用来存放站点中的CSS样式文件和图像文件。 一、建立站点 打开Dreamweaver cs4，单击“站点”菜单下的“创建站点”命令，在弹出的创建对话框中选择“高级”选项卡，然后在“本地信息”分类中将站点的名称、站点根目录和默认图像文件夹进行设置。 二、创建模板 站点创建完成之后，在“文件”菜单中选择“新建”命令，然后会弹出“新建文档”的对话框，选择“空白文档”中的“html”创建即可。 新页面创建好之后，在“标题”中输入文本内容“在线书店-首页”，然后直接将文件保存，文件名为“temp.html”。 三、创建CSS样式表 单击Dreamweaver cs4右侧的“CSS样式”面板，在展开的面板中单击“新建CSS规则”按钮，在弹出的设置面板中将“选择器类型”设置为“标签”，“选择器名称”中选择或是输入为“body”,“规定定义”在“新建样式表文件”。 单击确定后，会弹出“将样式表文件另存为”对话框，我们将这个样式表文件保存在站点的“style”文件夹下，样式表的文件名为“sytle.css”。 三、创建CSS样式表 样式表文件保存后，就会弹出一个新的窗口，这个窗口就是CSS的规则定义窗口了，先来设置网站中的字体大小，这里将“字体大小”设置为“12px”，切换到“背景”分类，单击设置背景图像旁边的“浏览”按钮，在弹出的对话框中选择我们提供的素材文件夹中的“body_bg.gif”文件，最后切换到“方框”分类，将“边界”中所有值都设置为“0px”。 四、使用表格布局 单击“插入”工具栏中的“表格”按钮，在弹出的对话框中设置插入表格的相关参数：3行2列，900像素宽度的表格，将边框粗细、单元格边距及单元格间距全部设置为0像素。 表格插入在页面中后，在属性面板中，先将表格的对齐方式设置为“居中对齐”，将第1行第1列的单元格高度设置为“94像素”，第二行的单元格高度设置为“38像素”。然后将第1行第1列的单元格宽度设置为“195像素”，第2行的两个单元格进行“合并”操作，第3行的单元格不作任务操作。 四、使用表格布局 选择这个表格的第1行的第2列单元格，在这个单元格再嵌入一个新的表格，表格参数为2行15列，宽度为590像素，其它参数都设置为0像素。 表格插入完成后，将这个表格的第1行所有单元格进行“合并”操作，然后将合并后的第1行单元格高度设置为59像素，第2行第1列的单元格高度设置为35像素。 四、使用表格布局 然后再分别将这个表格第2行的第1列、第3列、第5列、第7列、第9列、第11列、第13列和第15列单元格的宽度设置为70像素。 将这个表格框选中，在属性面板中，单击“，这样一来，第2行中间那些很窄的单元格，也会自动生成宽度。 四、使用表格布局 好了，这个内嵌表格设置好之后，再选择这个宽度为900像素的大表格的第3行的第1列单元格，在这个单元格插入一个“表单”。 将光标置入这个表单内，再嵌入一个5行1列的表格，宽度设置为“100%”，其它参数设置为0。 四、使用表格布局 切换到“拆分”视图，将光标置于“/form”代码的后面，然后再插入一个2行1列，宽度为“100%”的表格，其它参数设置为0，然后将这个表格的第1行和第2行的两个单元格宽度也设置为195像素。 切换到“设计”视图，将光标置于这个宽度为900像素的表格的外部，最后再插入一个2行1列的表格，表格的宽度也设置为900像素，其它参数为0，表格插入之后，也将对齐方式设置为“水平居中”。 五、使用样式表布局外观 首先，选择那个3行2列表格的第1行所有单元格，然后在属性面板中切换到“CSS”选项。 将目标规则设置为“新CSS规则”，然后单击“编辑规则”按钮，在弹出的“新建CSS规则”对话框中，选择器默认为“类”，将选择器名称输入为“.top_bg”，规则定义选择列表中的“style.css”。 五、使用样式表布局外观 单击“确定”后，在弹出的CSS设置窗口中，切换到“背景”分类，然后设置背景图片为提供的素材文件