网页设计教学课件-项目4 制作爱尚咖啡店网站.pptVIP

项目四 制作爱尚咖啡店网站 一、项目描述及分析 二、进行咖啡店网站页面布局 三、设计咖啡店网站首页作 四、设计咖啡店网站子页 五、知识链接 目 录 六、拓展学习 项目描述及分析 项目描述： 制作一个咖啡店网站。重点是编辑网站首页和“咖啡种类”子页面。 项目描述及分析 项目分析： 咖啡馆类网站的设计，既要考虑商业性，又要考虑艺术性，设计风格可以时尚、另类，也可以唯美、优雅，总之要传递一种特别的情调或气氛。 爱尚咖啡是一家经营多款咖啡的老店，对咖啡经营有着一定的经验和独到的理念，其建站的目的是进行品牌宣传、增加人气和提高知名度。因此在设计时整体风格要大方、美观，结构目录要清晰得当，网站内容要突出恰当。 网站采用 “匡” 字型布局，由咖啡饮品知识介绍、特色产品展示和相关服务等部分构成。网站包括 “咖啡物语”、“爱尚文化”、“咖啡种类”、“咖啡DIY”、“您的建议” 和 “联系我们” 6个栏目，其中，“咖啡物语”是网站的首页。 网站利用表格进行页面布局，插入布局表格后要进行表格大小、框线粗细等属性的设置。调整好表格后，再依次插入各网页元素，如 Logo、Banner等，然后在相应的页面位置输入文字信息，插入所需的图片素材。 “爱尚文化” 子页介绍咖啡店的发展和经营状况；“咖啡种类” 和 “咖啡DIY” 子页利用布局精确的表格和精美的图片展示咖啡饮品的种类和制作方法，“您的建议” 子页链接到用户的邮箱，方便用户给网站发送邮件；“联系我们” 子页提供了咖啡店的联系方式、地址和服务预订电话等信息。 不同子页面的内部结构不同，设计制作时要注重区域的划分和区块大小的搭配，图片素材要合理地选取和制作，图片的大小与色彩要与网站的整体风格协调一致。 项目描述及分析 网站效果图 网站首页 “咖啡种类”子页 任务1. 进行咖啡店网站页面布局 1、进行页面布局规划 注意： 在进行网页布局时，应以方便用户进行信息浏览，能够快速直观地显示网站的内容及分类信息为目的。 2、用表格进行页面布局 【步骤1】插入与设置表格 【步骤2】编辑表格 任务2. 设计咖啡店网站首页 【步骤1】插入 Logo 和 Banner （1）定位至t1表格第1行1列单元格中，选择“插入”→“图像”命令，在“选择图像源文件”对话框中选择images 文件夹中的图片logo-3.jpg，进行图片插入。 （2）将图片banner2-1.jpg插入第1行2列的单元格中。 任务2. 设计咖啡店网站首页 插入Logo和Banner后的页面效果 任务2. 设计咖啡店网站首页 【步骤 2】使用嵌套表格进行页面布局 1．插入嵌套表格 定位至表格第3行中，选择“插入”→“表格”命令，打开“表格”对话框。设置行数为1、列数为2、“表格宽度”为100%、“边框粗细”为1像素。 单击“确定”按钮返回，即在原表格的第3行嵌套了一个新表格。 2、调整表格 调整潜逃表格的高度、列宽、对齐方式。 任务2. 设计咖啡店网站首页 【步骤 3】设计导航条 （1）设置t2表格列的对齐方式 （2）插入新表格 （3）输入导航文字并设置对齐方式 （4）插入水平分割线 （5）插入图像及空格符 任务2. 设计咖啡店网站首页 【步骤 4】输入网页内容并定义CSS （1）输入网页内容 （2）定义文本的CSS样式 任务2. 设计咖啡店网站首页 打开“CSS样式”面板，切换到“全部”模式。 单击 “新建CSS规则” 按钮，打开 “新建CSS规则” 对话框。 在“选择器类型”下拉列表中选择“类（可应用于任何HTML元素）”选项，在“选择器名称”文本框中输入wenzi，单击“确定”按钮，打开“.wenzi的CSS规则定义”对话框。 任务2. 设计咖啡店网站首页 设置Font-size（字体大小）为 14 像素，Line-height（行距）为 22 像素。完成 “.wenzi” CSS样式的定义。 任务2. 设计咖啡店网站首页 （3）定义文本超链接的CSS样式 打开 “新建CSS规则” 对话框。在“选择器类型”下拉列表中选择“复合内容（基于选择的内容）”选项，在“选择器名称”下拉列表中选择 a:link 选项。 任务2. 设计咖啡店网站首页 打开 “a:link的CSS规则定义” 对话框。设置Font-size为14像素，设置 Color（颜色）为 #00F，在 Text-decoration 选项中选中 none 复选框，其他选项保持默认设置。 重复上述步骤，分别进行a:visited、a:active、a:hover等CSS样式的定义 。 任务3.设计咖啡店网站子页 “咖啡种类” 子页面以图片为主、文字为辅，利用表格进行图片、文字的定位和布局。 “咖啡种类” 子页