网页制作基础课件.pptx

《网页制作基础课件.pptx》由会员分享，可在线阅读，更多相关《网页制作基础课件.pptx（32页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、1主要内容概述设计站点编辑网页页面布局建立超链接使用CSS样式层、行为和时间轴模板管理和发布站点第1页/共32页25.1 概述站点 具有相关主题的网页有机地整合在一起，集中进行管理，构成一个整体，这就是站点。超文本标记语言HTML 站点中的每个网页的内容都要使用一种标准的语言来描述，这就是超文本标记语言HTML。常用的网页制作软件 Microsoft Office中的FrontPageMacromedia公司的Dreamweaver第2页/共32页35.1 概述Dreamweaver概述HTML简介第3页/共32页45.1.1 Dreamweaver简述 Macromedia Dreamwea

2、ver 8 美国Micromedia公司开发集网页制作和网站管理于一体第4页/共32页55.1.1 Dreamweaver简述启动选择“开始”/“所有程序”/“Micromedia”/“Micromedia Dreamweaver 8”选项，Dreamweaver有两种工作区布局模式：设计器和编码器第一次运行显示第5页/共32页65.1.1 Dreamweaver简述启动Dreamweaver后，显示起始页。在起始页中可以打开最近使用过的网页，快速地创建新的网页。第6页/共32页75.1.1 Dreamweaver简述打开或者创建网页后的操作界面“插入”工具栏“标准”工具栏“文档”工具栏文档窗

3、口面板组属性检查器通过菜单通过菜单 查看查看工具栏工具栏XXX 来显示或隐藏某个工具栏，通过菜单来显示或隐藏某个工具栏，通过菜单 窗口窗口XXX 来显示或隐藏某个面板组或属性面板。来显示或隐藏某个面板组或属性面板。第7页/共32页85.1.2 HTML简介HTML(HyperText Mackup Language 超文本 标记 语言)制作超文本文档的简单标记语言只是提供一些语法标记给浏览器，由浏览器解释生成相应的页面。由格式标签和资源引用构成。标签来设置引用内容的格式，标签分头标签和尾标签，用“”括起来，与被标注的内容区分开来。第8页/共32页95.1.2 HTML简介文件的开始文件的结束头

4、部文件体网页标题段落图片Rwjgxltj.html第9页/共32页105.1.2 HTML简介和标签标志了文件的开始和结束，分成两部分：第一部分叫作头部以和标签标志开始和结束其中和标签用于定义网页的标题第二部分是文件体以和标签标志开始和结束包含对浏览器中显示的内容的具体描述和标签标志一个段落，之间的文本将显示在浏览器中；和标签控制文本的字体、大小、颜色等；和标签用于排版段落的格式；标签用于插入图片，没有结束标签，通常后面带有属性，表示图片文件的存储路径、对齐、以及大小。第10页/共32页11 .和和 .第11页/共32页125.2 设计站点网站设计定义本地站点管理站点资源（使用文件面板）新建（

5、快捷菜单：新建文件、新建文件夹）移动、复制（拖曳、Ctrl拖曳）删除、重命名（Del、两次单击）导入（复制/粘贴）打开、保存和预览网页打开（文件面板：双击文件）保存（标准工具栏：保存按钮、全部保存按钮）预览（标准工具栏：在浏览器中预览按钮）第12页/共32页135.2.1 网站设计网站：多个主题相关的网页按一定的组织结构、以超链接方式连接在一起，形成一个整体。网站主页：获取网站的信息的起点。建立网站：在本地硬盘建立一个本地站点（存放网站的所有文档的文件夹）网页设计、制作网页文档复制到服务器中第13页/共32页145.2.1 网站设计设计网站的基本步骤 对站点进行规划。确定站点的主题和风格，明确

6、建立站点的目的。收集素材。合理规划站点结构。例如：旅游天地第14页/共32页155.2.1 网站设计创建站点的基本结构。在本地站点中建立若干个文件夹，用于存放各类文档，必要时还可以建立子文件夹。创建和编辑网页。将本地站点的所有文档发布到服务器。第15页/共32页165.2.2 定义本地站点新建站点“站点”/“新建站点”第16页/共32页17单击开始演示新建站点第17页/共32页185.2.2 定义本地站点修改站点的设置信息“站点站点”/“管理站点管理站点”“编辑编辑”第18页/共32页195.2.2 定义本地站点打开站点选定站点，单击“完成”按钮同一时刻只能打开一个站点第19页/共32页20单

7、击5.2.2 定义本地站点建立多个站点“新建”按钮：再建立另一个站点复制站点“复制”按钮：建立一个与选定站点相同的站点删除站点“删除”按钮：删除选定站点导出、导入站点选中站点，单击“导出”按钮，将站点导出为包含站点设置的 XML 文件，其文件扩展名为.ste。以后单击“导入”按钮，可以导入该文件，并成为站点（注意选择站点根文件夹）。将导出的将导出的.ste.ste文件文件和站点的和站点的根文件夹根文件夹一起复制一起复制到另一台电脑上到另一台电脑上根文根文件夹件夹第20页/共32页21单击5.2.3 管理站点资源定义了本地站点后，在本地计算机中建立了一个用于存放站点中的文档的文件夹。初始状态下，

8、该文件夹是一个空文件夹，在此文件夹中可以进行新建文件夹、新建文件、复制文件、移动文件、删除文件、重命名文件等操作。右击第21页/共32页225.2.3 管理站点资源新建文件夹 右单击“文件”面板中要新建文件夹的位置（如：站点名称或子文件夹名），在弹出的快捷菜单中选择“新建文件夹”命令，建立一个以“untitled”为默认名称的文件夹，此时输入新建文件夹的名称（如：Picture），然后按Enter键即可。快捷菜单：新建文件夹快捷菜单：新建文件夹Contents：网页网页Picture:图片图片Css：样式样式Templates：模板模板第22页/共32页235.2.3 管理站点资源新建文件 1

9、.“文件”/“新建”命令，选择文件类别和类型（如：基本页），单击“创建”按钮。2.单击起始页的“从范例创建”栏中列出的选项。单击起始页的“创建新项目”栏中的选项。3.“文件”面板，快捷菜单“新建文件”命令，输入文件名；双击打开新建的文件。快捷菜单：新建文件快捷菜单：新建文件1.1.输入文件名：如输入文件名：如Index.htmlIndex.html2.2.双击打开该文件双击打开该文件返回第23页/共32页245.2.3 管理站点资源移动、复制文件和文件夹 选定拖放将出现“更新文件”对话框，提示是否要更新其他文件中有指向被移动的文件的超链接。拖曳拖曳第24页/共32页255.2.3 管理站点资源

10、复制文件，选定按住Ctrl键同时拖放Ctrl拖曳拖曳快捷菜单：快捷菜单：剪切剪切 拷贝拷贝 粘贴粘贴返回第25页/共32页265.2.3 管理站点资源删除、重命名文件和文件夹 选定按Delete键选定再次单击返回删除：Delete重命名：重命名：再次单击文件（文件夹）再次单击文件（文件夹）第26页/共32页275.2.3 管理站点资源导入文件和文件夹 选中非本站点的文件或文件夹选中非本站点的文件或文件夹编辑编辑/拷贝拷贝编辑编辑/粘贴粘贴本站点文件面板中本站点文件面板中从神秘的西藏从神秘的西藏网站网站第27页/共32页285.2.4 打开、保存和预览网页打开网页文档“文件”/“打开”“文件”/

11、“打开最近的文件”起始页中列出的最近打开的文件名；单击起始页中“打开”选项，在出现的“打开”对话框选择文件；在“文件”面板中双击文件名。本站点文件面板中本站点文件面板中双击文件名双击文件名返回第28页/共32页295.2.4 打开、保存和预览网页保存网页文档 标准工具栏标准工具栏“保存保存”按钮按钮“全部保存全部保存”按钮按钮返回第29页/共32页305.2.4 打开、保存和预览网页预览网页 标准工具栏标准工具栏“在浏览器中预览在浏览器中预览”按钮按钮F12F12键键第30页/共32页作业参见elearning网站31第31页/共32页大学计算机信息科技教程（第二版）第5章 网页制作基础32感谢您的观看！第32页/共32页