【项目说明】本项目是设计一个简单的个人网站,目的是通过....pptVIP

项目一 个人网站 【项目说明】 本项目是设计一个简单的个人网站，目的是通过完成本项目掌握dreamweaver cs4的基本操作，接触基本的html和css样式，为制作更加复杂的网站做好知识准备。 【技能目标】 掌握本地站点的设置和管理 基本掌握dreamweaver cs4的基本操作 【知识准备】 学习网站站点的建立和管理，学习Dreamweaver CS4的基本操作，学习简单的文本、图像等的基本设置。 个人网站效果图 项目一 个人网站 准备1 创建与管理站点 准备2 设置文本格式 准备3 滚动文本 准备4 插入图像 准备5 制作导航栏 准备6 创建网页链接 准备7 动态链接效果 任务一 index.html导航栏的实现 任务二 完成主页主页版块的设计 准备一 创建与管理站点 制作网页，第一步就是要创建站点，为网站指定本地文件夹和服务器，使之建立联系。创建本地站点可以使用向导创建，也可以使用高级面板创建。 【例1-1】.创建一个名为“my blog”的站点，并在站点中新建“image”文件夹。如图： 准备二 页面属性的设置 对于Dreamweaver 中创建的每个页面，您都可以使用“页面属性”对话框（“修改”“页面属性”）指定布局和格式设置属性。“页面属性”对话框让您可以指定页面的默认字体系列和字体大小、背景颜色、边距、链接样式及页面设计的其它许多方面。您可以为创建的每个新页面指定新的页面属性，也可以修改现有页面的属性. 您在“页面属性”对话框中所进行的更改将应用于整个页面。 Dreamweaver 为“页面属性”对话框的“外观 (CSS)”、“链接 (CSS)”和“标题 (CSS)”类别中指定的所有属性定义 CSS 规则。这些规则嵌入在页面的 head 部分中。 准备二 页面属性的设置 选择“修改”“页面属性”，或单击文本的属性检查器中的“页面属性”按钮，弹出对话框如图 准备二 页面属性的设置 提示/技巧： 如果选择的页面属性仅应用于活动文档，如果页面使用了外部 CSS 样式表，Dreamweaver 不会覆盖在该样式表中设置的标签，因为这将影响使用该样式表的其它所有页面。 准备二 页面属性的设置 【例1-2】.在站点文件夹“HTML”中新建一个名为index.html的网页文件，作为个人博客的首页，并设置页面属性。 准备三 设置文本格式 选择文本，设置文本格式，单击属性面板的“css按钮”，在目标规则下拉选项中，选择“新css规则”，然后点击“编辑规则”，弹出“新css”规则对话框，如图1.9所示在对话框中进行如下参数的设置： 准备三 设置文本格式 单击“确定”，会进入“.title的css规则定义”对话框 准备三 设置文本格式 同时，会在代码视窗的style/style中，产生一个.title的类的css定义。 用同样的方法设置“我的心灵驿站”文字的格式，设置结果如图 准备四 创建网页链接 每个 Web 页面都有一个唯一地址，称作统一资源定位器 (URL)。不过，在创建本地链接（即从一个文档到同一站点上另一个文档的链接）时，通常不指定作为链接目标的文档的完整 URL，而是指定一个始于当前文档或站点根文件夹的相对路径。 有三种类型的链接路径： 1、 绝对路径（例如 /support/dreamweaver/contents.html）。 2、 文档相对路径（例如 dreamweaver/contents.html）。 3、站点根目录相对路径（例如 /support/dreamweaver/contents.html）。 使用 Dreamweaver，可以方便地选择要为链接创建的文档路径的类型。 准备四 创建网页链接 提示/技巧：最好使用您最喜欢和最得心应手的链接类型 -- 站点相对路径或文档相对路径。与键入路径相比，浏览到链接能确保输入的路径始终正确。 绝对路径提供所链接文档的完整 URL，而且包括所使用的协议（如对于 Web 页面，通常使用 http://），例如，/support/dreamweaver/contents.html。 必须使用绝对路径，才能链接到其它服务器上的文档。对本地链接（即到同一站点内文档的链接）也可以使用绝对路径链接，但不建议采用这种方式，因为一旦将此站点移动到其它域，则所有本地绝对路径链接都将断开。通过对本地链接使用相对路径，还能够在需要在站点内移动文件时提高灵活性。 对网页设计，经常使用的是文档相对路径。在当前文档与所链接的文档位于同一文件夹中，而且可能保持这种状态的情况下，文档相对路径特别有用。文档相对路径还可用于链接到其它文件夹中的文档，方法是利用文件夹层次结构