互联网单元1创建站点与浏览网页课件

单元1 创建站点与浏览网页,制作网页之前，应该先在本地计算机磁盘上建立一个站点，使用站点对网页文档、样式表文件、网页素材进行统一管理。 在制作网页之前，认识Dreamweaver CS4的工作界面，通过浏览网页，认识浏览器窗口的基本组成和网页的基本组成元素，认识网页的布局结构，了解网页的基本概念。,【教学导航】,【1.1 操作准备】,1创建所需的文件夹，拷贝所需的资源 在本地硬盘（例如D盘）中创建一个文件夹“网页设计与制作案例”，然后将光盘中的“单元1”（包括所有子文件夹以及文件）拷贝到该文件夹中。 2启动Dreamweaver CS4 单击【开始】【程序】【Adobe Dreamweaver CS4】菜单命令即可启动Dreamweaver CS4。,【1.2 操作演练】,【任务1-1】创建站点“易购网” 【任务描述】 创建一个名称为“易购网”的站点，保存在文件夹“操作演练”中。,【任务实施】 （1）启动站点定义向导 （2）定义站点名称 （3）选择是否使用服务器技术 （4）确定使用文件的方式，设置文件存储位置 （5）设置如何连接到远程服务器 （6）查看站点信息 至此，在Dreamweaver CS4中创建了一个本地站点“易购网”，“文件”面板中也显示了刚才新建的站点及其文件夹。,【任务1-2】管理本地站点 【任务描述】 利用【管理站点】对话框实现网站的新建、编辑、复制、删除、导出和导入等操作。 【任务实施】 1利用【管理站点】对话框创建一个名称为“e游天下”的站点,在【管理站点】对话框中单击【新建】按钮， 在弹出的下拉菜单中单击【站点】菜单项，如图 1-13所示。 启动“建立站点”向导，打开如图1-4所示的 【站点定义】对话框。 参照“任务1-1”所述的步骤创建一个名称为“e 游天下”的站点，该站点创建完成后的【管理站点】对话框如图1-14所示，单击该对话框中的【完成】 按钮即可完成新站点的创建。,2切换站点 3编辑站点 4复制站点 5删除站点 6导出站点 7导入站点,【任务1-3】认识Dreamweaver CS4的工作界面 Dreamweaver CS4的工作界面主要包括菜单栏、工具栏、文档窗口、属性面板、面板组等。 【任务描述】 （1）熟悉Dreamweaver CS4工作界面的基本组成 （2）熟悉“文件”面板的组成 （3）了解Dreamweaver CS4工作界面各个组成部分的主要功能,【任务实施】 Dreamweaver CS4的工作界面如图1-4所示。 （1）标题栏 标题栏显示网页的标题和网页文档的存储位置。 （2）菜单栏 Dreamweaver CS4的菜单栏包含10类菜单：文件、编辑、查看、插入、修改、格式、命令、站点、窗口和帮助，如图1-16所示。,图1-16 Dreamweaver CS4的界面布局与组成,（3）“插入”工具栏 显示“插入”工具栏的方法是：选择菜单命令【窗口】【插入】，在Dreamweaver CS4的主界面的右则将显示“插入”工具栏。 通常情况下会显示“常用”插入工具栏。 （4）“文档”工具栏 “文档”工具栏中包含用于切换文档窗口视图的 “代码”、“拆分”、“设计”、“实时视图”按钮、各种查看选项和一些常用操作。,（5）“标准”工具栏 “标准”工具栏中包含网页文档的基本操作按钮，例如新建、打开、保存、剪切、复制、粘贴等按钮。 （6）“文档”窗口 “文档”窗口也称为文档编辑区，该窗口所显示的内容可以是代码、网页，或者两者的共同体。,（7）“属性”面板 “属性”面板用于查看和更改所选取的对象或文本的 各种属性，每个对象有不同的属性。 打开“属性”面板的方法：在Dreamweaver CS4主界面中，选择菜单命令【窗口】【属性】即可。 （8）面板组 Dreamweaver CS4包括多个面板，这些面板都有不同的功能，将它们叠加在一起便形成了面板组，如图1-24所示。 面板组主要包括“插入”面板、“CSS”面板、“AP元素”面板、“标签检查器”面板、“文件”面板、“资源”面板和“代码片断”面板等。,（9）“文件”面板 网站是多个网页、图像、动画、程序等文件有机联系的整体，要有效地管理这些文件以及其联系，需要有一个有效的工具，文件面板便是这样的工具。 打开文件面板的方法：选择菜单【窗口】【文件】命令，或者按快捷键F8，可以显示文件面板。 （10）标签选择器 在文档窗口底部的状态栏中，显示环绕当前选定内容标签的层次结构，单击该层次结构中的任何标签，可以选择该标签及网页中对应的内容。,【任务1-4】管理网站中的文件和文件夹 【任务描述】 利用“文件”面板，对本地站点中的文件夹和文件进行创建、删除、移动和复制等操作。 【任务实施】 1新建文件夹和文件 2移动和复制文件 3重命名文件夹或文件 4删除文件夹或文件,【任务1-5】网页文档的基本操作 【任务描述】 （1）启动Dreamweaver CS4，打开一个网页文档0101.html。 （2）浏览网页0101.html。 （3）保存对网页0101.html的修改。 （4）关闭网页0101.html。,【任务实施】 1打开网页文档 在Dreamweaver CS4主窗口中，单击菜单命令【文件】【打开】，会弹出【打开】对话框，在【打开】对话框中选择需要打开的网页文档。 例如0101.html，然后单击【打开】按钮即可。,2浏览网页,按快捷键F12，网页0101.html的浏览效果如彩图1所示。 观察页面中标题、段落文字和项目列表的字体、大小、颜色和对齐方式。 重点观察所设置超链接的文字颜色，将鼠标指针指向导航栏的超链接文字“首页”观察颜色的变化。,3保存网页文档 4关闭网页文档 在Dreamweaver CS4主窗口中，如果需要关闭打开的网页文档，单击的菜单命令【文件】【关闭】或者【全部关闭】即可。,【任务1-6】设置首选参数 【任务描述】 （1）设置启动Dreamweaver CS4时不再显示欢迎屏幕。 （2）设置新建网页文档的默认扩展名为“.html”，默认编码为“Unicode (UTF- 8)”。 （3）设置复制文本时的参数为“带结构的文本以及全部格式（粗体、斜体、样式）”。,【任务实施】 （1）打开【首选参数】对话框 （2）设置启动Dreamweaver CS4时不再显示欢迎屏幕 （3）设置新建网页文档的默认扩展名为“.html”，默认编码为“Unicode (UTF-8)” （4）设置“复制/粘贴”参数,【任务1-7】认识浏览器的基本组成和网页的基本组成元素 【任务描述】 （1）认识浏览器窗口的基本组成。 （2）认识网页的基本组成元素。 【任务实施】 1认识浏览器窗口的基本组成 浏览器窗口由网页标题、菜单栏、命令栏、地址栏、网页窗口和状态栏等部分组成。,2认识网页的基本组成元素,（1）文本 （2）图像 （3）动画 （4）超级链接 （5）导航栏 （6）表单 （7）网站的Logo （8）视频 （9）其他元素,【1.3 技术提升】,【任务1-8】使用“资源”面板管理网站中的资源 【任务描述】 （1）打开“资源”面板，选择多个资源，且添 加到收藏列表。 （2）在网页0102.html中选择一个图片0104.gif，且添加到网页版权信息区域。 （3）改变网页0102.html中文字“站点地图”的颜色。,【任务实施】,图1-39 网页的基本组成元素,1认识“资源”面板 2选择一个或多个资源 3将资源加入收藏列表 4向网页文档中添加资源,（1）将光标定位于网页0102.html中想要加入资源 的位置。 （2）打开“资源”面板，选择“图像”按钮 。 （3）选择“站点”或者“收藏”单选按钮，然后 在列表中选择所要的图像资源0104.gif。 （4）从“资源”面板中拖动资源到“设计”视图中或者单击“资源”面板左下角的 按钮，这样资源就被插入到网页文档中。,图1-40 资源面板,5改变网页文档中所选文字的颜色,（1）选中网页文档中需要改变颜色的文字，即版权信息区域的“站点地图”。 （2）在“资源面板”中单击“颜色”按钮 。 （3）选择颜色列表中的颜色#666，然后单击 按钮。 弹出【新建 CSS 规则】对话框，在该对话框中“选择器名称”列表框中选择“.cat1 .last”，在“定义规则的位置”列表框中选择“01style.css”，然后单击【确定】按钮。,6编辑一个资源,（1）打开要编辑的资源 （2）对打开的资源进行编辑。 （3）编辑完成，进行保存即可。,【任务1-9】设置页面头部内容 【任务描述】 对网页“0102.html”文件头内容的设置要求如下： （1）设置网页的文字编码为“utf-8”。 （2）设置关键字为“易购网”、“易购数码”、“易购手机”和“最新手机”。 （3）设置说明信息为“易购网 质优价平，货到付款，尽在易购网！”。,【任务实施】 1设置META （1）设置Meta的属性 （2）编辑Meta的内容,2插入关键字 在如图1-46所示的菜单列表中单击【关键字】按钮，打开如图1-50所示的【关键字】对话框，在该对话框中输入关键字“易购网 易购数码 易购手机 最新手机”即可，单击【确定】按钮后，关键字就设置好了。 3插入说明 许多搜索引擎可以读取描述Meta标记的内容，插入说明的方法与插入关键字相似。,【任务1-10】使用辅助工具 标尺、网格和辅助线是Dreamweaver CS4网页排版的三大辅助工具。 【任务描述】 （1）了解窗口大小的配置方法。 （2）熟悉标尺、网格和辅助线等辅助工具的使用。 （3）熟悉网页内容和缩放和平移。,【任务实施】 1配置窗口大小 网页设计视图的编辑窗口下方的状态栏显示了当前的窗口大小，如图1-52所示，单击状态栏上窗口大小位置，可以打开窗口大小的选择菜单，该菜单上显示不同的窗口大小。,2使用标尺 （1）显示或隐藏标尺 （2）重设原点与恢复原点的默认位置 （3）改变标尺的度量单位 3使用网格 4使用辅助线 5使用缩放和平移,【1.4 考核评价】,【考核任务描述】 （1）利用“创建站点向导”的“高级”选项卡创建一个名称为“e游天下”的站点，保存在文件夹“考核评价”中。 （2）浏览“e游天下”站点中的网页0102.html，指出该页面中包含哪些基本网页元素。 （3）使用“资源”面板向网页0102.html版权信息区域的“版权所有”的右侧插入图像0111pic.gif。,（4）使用“资源”面板为网页0102.html版权 信息区域的文字“蝴蝶工作室”的颜色设置为“#ff6600”。 （5）网页0102.html的关键字设置为“旅游 游天下 国内游 国外游 景区景点 旅游线路 旅游攻略”。 （6）网页0102.html的说明设置为“e游天下介绍国内国外的旅游景点、旅游线路、旅游知识等”。 本