项目四 制作爱尚咖啡店网站.pptVIP

1.项目描述及分析 2.项目资讯 网站名称：爱尚咖啡店网站 网站子页 “爱尚文化”子页介绍咖啡店的发展和经营状况；“咖啡种类”和“咖啡DIY”子页利用布局精确的表格和精美的图片展示咖啡饮品的种类和制作方法，“您的建议”子页链接到用户的邮箱，方便用户给网站发送邮件；“联系我们”子页提供了咖啡店的联系方式、地址和服务预订电话等信息。 网站利用表格进行页面布局，插入布局表格后要进行表格大小、框线粗细等属性的设置。调整好表格后，再依次插入各网页元素，如Logo、Banner等，然后在相应的页面位置输入文字信息，插入所需的图片素材。不同子页面的内部结构不同，设计制作时要注重区域的划分和区块大小的搭配，图片素材要合理地选取和制作，图片的大小与色彩要与网站的整体风格协调一致 任务1. 进行咖啡店网站页面布局 3.项目制作 任务2.设计咖啡店网站首页 （1）、插入Logo 将鼠标光标移至表格第1行第1列单元格中，选择“插入”→“图像”命令或者在“插入”面板的“常用”选项卡中单击“图像”按钮，打开“选择图像源文件”对话框。在该对话框中，选择站点文件夹下images文件夹中的图片logo-3.jpg，如图所示。然后，单击“确定”按钮，完成图片的插入。 3.项目制作 （2）、插入Banner 3.项目制作 使用嵌套表格 1．插入嵌套表格 将鼠标光标移至表格的第3行中，选择“插入”→“表格”命令，打开“表格”对话框。设置“行数”为1、“列”为2、“表格宽度”为100和“百分比”、“边框粗细”为1像素，其他参数保持默认设置，如图所示。 3.项目制作 打开“.wenzi的CSS规则定义”对话框 。在“.wenzi的CSS规则定义”对话框中，设置Font-size（字体大小）为14像素，Line-height（行距）为22像素，其他选项保持默认设置，如图4-25所示。单击“确定”按钮，关闭该对话框，完成“.wenzi”CSS样式的定义。 3.项目制作 （3）、css样式的定义及应用 3.项目制作 采用同样的方法，定义网页中文本超链接的样式。操作步骤如下： （1）右击网页文档内的空白处，在弹出的快捷菜单中选择“CSS样式”→“新建”命令，打开“新建CSS规则”对话框。在“选择器类型”下拉列表中选择“复合内容（基于选择的内容）”选项，在“选择器名称”下拉列表中选择a:link选项，如图所示 3.项目制作 （2）单击“确定”按钮，关闭该对话框，打开“a:link的CSS规则定义”对话框。设置Font-size为14像素，设置Color（颜色）为#00F，在Text-decoration选项中选中none复选框，其他选项保持默认设置，如图所示。单击“确定”按钮，关闭该对话框，完成“a:link”CSS样式的定义。 3.项目制作 任务4.设计咖啡店网站子页 设计主要子页 设计其他子页 3.项目制作 ．“咖啡种类”子页设计 “咖啡种类”网页效果如图所示，页面内容以图片为主、文字为辅，利用表格进行图片、文字的定位和布局。下面对该网页的制作过程进行简略介绍。 3.项目制作 （1）插入嵌套表格。将光标定位在中间表格的右列单元格中，输入一段相关文字后，选择“插入”→“表格”命令，插入一个4行3列的表格。设置表格宽度为100%、边框粗细为0像素，单元格边距、单元格间距均设为1像素，其他属性保持默认设置。 （2）调整嵌套表格的行高和列宽。调整所有列的列宽为33%，第1行和第3行的行高为128像素，其他行不变。 （3）在第1、3行的6个单元格中依次插入图片，在第2、4行的6个单元格中依次输入文字内容，并设置文字为水平对齐。 最终效果如图所示： 3.项目制作 任务4.设计咖啡店网站子页 设计其他子页 3.项目制作 任务5.知 识 链 接 表格数据处理 （1）启动Dreamweaver CS4，建立一个文档。 （2）选择“文件”→“导入”→“表格式数据”命令，打开“导入表格式数据”对话框，如图 3.项目制作 任务5.知 识 链 接 导出数据 对表数据进行排序 5.项目拓展 任务6.餐饮类网站的设计要点 餐饮类网站的分类及特点 餐饮类网站的设计风格 实 训 制作健康美食网站，参考操作如下 ： （1）进行健康美食网站首页的布局规划。 （2）利用Dreamweaver CS4的表格进行美食网站首页布局（运用嵌套表格）。 （3）制作网站首页，设计Logo和Banner，制作导航条。 （4）定义并运用CSS样式。 （5）制作健康美食网站其他页面。 （6）测试、浏览网站整体效果。 * 项目四 制作爱尚咖啡店网站 一、项目描述及分析 二、进行咖啡店网站页面布局 三、设计咖啡店网站首页作 四、设计咖啡店网站子页 五、知