中职网站设计与制作项目整套课件完整版ppt教学教程最全电子讲义教案（最新）.pptx

网站设计与制作项目教程;【项目说明】 本项目是设计一个简单的个人网站，目的是通过完成本项目掌握dreamweaver cs4的基本操作，接触基本的html和css样式，为制作更加复杂的网站做好知识准备。 【技能目标】 掌握本地站点的设置和管理 基本掌握dreamweaver cs4的基本操作 【知识准备】 学习网站站点的建立和管理，学习Dreamweaver CS4的基本操作，学习简单的文本、图像等的基本设置。;个人网站效果图;项目一 个人网站;准备一 创建与管理站点 ;准备二 页面属性的设置 ;准备二 页面属性的设置;准备二 页面属性的设置;准备二 页面属性的设置;准备三 设置文本格式 ;单击“确定”，会进入“.title的css规则定义”对话框 ;同时，会在代码视窗的<style></style>中，产生一个.title的类的css定义。 用同样的方法设置“我的心灵驿站”文字的格式，设置结果如图 ;准备四 创建网页链接 ;提示/技巧：最好使用您最喜欢和最得心应手的链接类型 -- 站点相对路径或文档相对路径。与键入路径相比，浏览到链接能确保输入的路径始终正确。 绝对路径提供所链接文档的完整 URL，而且包括所使用的协议（如对于 Web 页面，通常使用 http://），例如，/support/dreamweaver/contents.html。 必须使用绝对路径，才能链接到其它服务器上的文档。对本地链接（即到同一站点内文档的链接）也可以使用绝对路径链接，但不建议采用这种方式，因为一旦将此站点移动到其它域，则所有本地绝对路径链接都将断开。通过对本地链接使用相对路径，还能够在需要在站点内移动文件时提高灵活性。 对网页设计，经常使用的是文档相对路径。在当前文档与所链接的文档位于同一文件夹中，而且可能保持这种状态的情况下，文档相对路径特别有用。文档相对路径还可用于链接到其它文件夹中的文档，方法是利用文件夹层次结构，指定从当前文档到所链接文档的路径。 ;例如，假设一个站点的结构如图所示：;准备五 插入图像 ;插入图像的方法 1）在“插入”面板的“常用”类别中，单击“图像”图标 。 2）选择“插入”>“图像”。 提示/技巧： 根据您的需要，可以在其中一个或两个文本框中输入信息。屏幕阅读器会朗读图像的 Alt 属性。 当您单击“取消”时，该图像将出现在文档中，但 Dreamweaver 不会将它与辅助功能标签或属性相关联。;设置图像属性 在菜单栏中单击“窗口”>“属性”中，会打开图像的属性面板，如图 宽和高：图像的宽度和高度，以像素表示。在页面中插入图像时，Dreamweaver 会自动用图像的原始尺寸更新这些文本框。 提示/技巧：您可以更改这些值来缩放该图像实例的显示大小，但这不会缩短下载时间，因为浏览器先下载所有图像数据再缩放图像。若要缩短下载时间并确保所有图像实例以相同大小显示，请使用图像编辑应用程序缩放图像。 ;准备六 滚动文本设置;任务一 index.html导航栏的实现 ;任务一 index.html导航栏的实现;任务二 完成主页主页版块的设计;任务步骤 步骤1： 设计如图所示的个人资料栏：;步骤2： 在公告栏位置设置如图所示的内容块。设置公告中的文字滚动。 ;步骤 3： 制作如图所示的兴趣爱好栏 ;步骤 4：完成如图所示的最新日记版块：;任务检测与评估 ;【项目评价】;网站设计与制作项目教程;【项目说明】 本项目是设计一个简单的个人网站，目的是通过完成本项目掌握dreamweaver cs4的基本操作，接触基本的html和css样式，为制作更加复杂的网站做好知识准备。 【技能目标】 掌握本地站点的设置和管理 基本掌握dreamweaver cs4的基本操作 【知识准备】 学习网站站点的建立和管理，学习Dreamweaver CS4的基本操作，学习简单的文本、图像等的基本设置。;项目二 文学社团网站效果图;项目二 文学社团网站;准备1 表格的插入及其属性设置;提示/技巧：如果没有明确指定边框粗细或单元格间距和单元格边距的值，则大多数浏览器都按边框粗细和单元格边距设置为 1、单元格间距设置为 2 来显示表格。若要确保浏览器显示表格时不显示边距或间距，请将“单元格边距”和“单元格间距”设置为 0。;准备1 表格的插入及其属性设置;设置单元格的属性 当光标单元格内时，可在“属性”面板中设置单元格属性。 水平：指定单元格、行或列内容的水平对齐方式。 垂直：指定单元格、行或列内容的垂直对齐方式。 宽和高：所选单元格的宽度和高度，以像素为单位或按整个表格宽度或高度的百分比指定。若要指定百分比，请在值后面使用百分比符号 (%)。若要让浏览器根据单元