《《创建基本网页》PPT课件.ppt》由会员分享，可在线阅读，更多相关《《创建基本网页》PPT课件.ppt（83页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、LOGO模块模块3 3 使用使用DreamweaverDreamweaver创建创建基本网页基本网页本模块任务本模块任务个人网站的建立 1 建立网站 制作课程简介页面 2 插入文本、图像 本模块任务本模块任务制作课程试听页面 3 插入媒体文件 网页超链接的设置 4 创建超链接 3.1 个人网站的建立-任务解析 index.htmljpsc.htmllzbg.htmlmwkt.html srda.htmlyhys.html hotpic.html图像文件夹pic首页精品收藏靓照曝光美文酷图私人档案有话要说热图抢鲜我的小站3.1 个人网站的建立完成效果完成效果 3.1 个人网站的建立-完成效果（文
2、件）我的小站3.1 个人网站的建立-完成效果（文件）文件夹PIC五个HTML文档3.1 个人网站的建立-完成效果（文件）PIC中的HTML3.1 个人网站的建立-关键方法 站点站点/新建站点新建站点面板（2）建立站点中的文件夹和文件-1（1）新建站点3.1 个人网站的建立-关键方法站点站点/新建站点新建站点（2）建立站点中的文件夹和文件-2快捷键CTRLa 建立文件夹SHIFTALTNb 建立文件CTRLSHIFTN3.1 个人网站的建立-关键方法 （3）删除站点3.1 个人网站的建立-过程总览命名选择服务器技术创建文件夹创建文件（主要为HTML）情境1 制作课程简介页面v创建本地站点v文本的
3、输入及格式设置v段落格式设置v图像插入及属性设置情境1任务1 创建本地站点完成效果站点 My Site情境1任务1 创建本地站点完成效果文件夹 My Site文件夹 My Site组成情境1任务1 创建本地站点完成效果网格标尺情境1任务1 创建本地站点完成效果辅助线情境1任务1 创建本地站点完成效果生成HTML文档情境1任务1 创建本地站点生成html页面后站点情境1任务1 创建本地站点-过程总览建立站点设置标尺、网格设置辅助线保存页面情境1任务1 创建本地站点-关键方法 站点站点/新建站点新建站点（2）设置网格（1）设置标尺情境1任务1 创建本地站点-关键方法 站点站点/新建站点新建站点（3
4、）创建辅助线情境1任务1 创建本地站点-关键方法 站点站点/新建站点新建站点（4）命名网页的文档标题 文档标题：浏览网页时窗口最上方标题栏中显示的表示网页的名称的标题，不同于保存名 情境1任务1 创建本地站点-关键方法 站点站点/新建站点新建站点（5）保存网页 保存名：网页以对应名字保存在相应位置。不同于网页的文档标题。CTRLS情境1任务2 插入文本-完成效果（总）段落设置文本设置插入字符项目列表编号列表日期水平线情境1任务2 插入文本-完成效果（1）页面设置项目列表编号列表情境1任务2 插入文本-完成效果（2）去掉空格（3）插入特殊字符特殊字符情境1任务2 插入文本-完成效果（4）插入空格
5、 连续空格情境1任务2 插入文本-完成效果（5）设置文本格式 text1情境1任务2 插入文本-完成效果（6）设置段落格式情境1任务2 插入文本-完成效果（7）创建项目符号和编号情境1任务2 插入文本-完成效果（8）插入日期（9）插入水平线水平线情境1任务2 插入文本-过程总览页面设置去掉空格插入特殊字符插入空格设置文本、段落格式项目符号和编号插入日期插入水平线情境1任务2 插入文本-关键方法（2）去掉空格（将空格替换掉）（1）页面设置情境1任务2 插入文本-关键方法（4）插入空格（连续空格）（3）插入特殊字符情境1任务2 插入文本-关键方法（5）设置文本、段落格式（文本）情境1任务2 插入文
6、本-关键方法（5）设置文本、段落格式（段落-以标题为例）情境1任务2 插入文本-关键方法（6）创建项目列表和编号列表项目列表（必须在上下都是空行，项目列表（必须在上下都是空行，且文本缩进后才能应用）且文本缩进后才能应用）编号列表编号列表情境1任务2 插入文本-关键方法（7）插入日期（8）插入水平线情境1任务3 插入图像-完成效果（总）图像鼠标经过图像情境1任务3 插入图像-完成效果 图像占位符图像占位符情境1任务3 插入图像-完成效果鼠标经过图像鼠鼠标指指针放上放上时情境1任务2 插入文本-过程总览插入图像设置图像属性插入图像占位符创建鼠标经过图像情境1任务3 插入图像-关键方法（2）设置图像
7、属性（1）插入图像宽、高、垂直边距、水平边距替换：当图像无法显示时，代替的显示文本情境1任务3 插入图像-关键方法（4）创建鼠标经过图像（3）插入图像占位符情境1 知识点扩展1 首页文件名 首页（主页、起始页）用户打开浏览器时自动打开的一个或多个页面，也可以指打开网站后看到的第一个页面 index.html情境1 知识点扩展2 站点组成 站点：属于某个网站的文档的本地或远程存储位置 站点组成：本地根文件夹 存储用户正在处理的文件 远程文件夹 存储用于测试、生产和协作等的文件 测试服务器文件夹 存储动态页情境2 制作课程试听页面vFlash元素的添加和设置v音频元素的添加和设置v其他多媒体元素的
8、添加和设置情境2任务1 插入媒体文件-效果（总）FLASHFLV视频情境2任务1 插入媒体文件-完成效果插入FLASH情境2任务1 插入媒体文件-完成效果插入FLV情境2任务1 插入媒体文件-完成效果插入音频情境2任务1 插入媒体文件-完成效果插入视频情境2任务1 插入媒体-过程总览插入FLASH动画插入FLV视频、FlashPaper插入声音插入视频情境2任务1 插入媒体-关键方法（1）插入FLASH情境2任务1 插入媒体-关键方法（2）插入FLV视频、FlashPaper情境2任务1 插入媒体-关键方法（3）插入声音（作为媒体插件）（4）插入视频（作为媒体插件）情境2 知识点扩展FLV（F
9、lash视频文件）累进式下载视频 流视频 累进式下载视频：允许下载完成前就开始播放 流视频：进行流式处理，在确保流畅播放的缓冲时间后 在网页上播放情境3任务1 网页超链接-过程总览文字、图像超链接电子邮件超链接锚点超链接导航条情境3任务1 网页超链接超链接超链接是指从一个网页指向一个目标的连接关系 目标分为：自身 用#表示另一个网页相同网页的不同位置 锚点超链接电子邮件地址 电子邮件超链接文件（如图像等）应用程序情境3任务1 网页超链接超链接超链接文档打开位置：_blank：链接文档在新浏览器窗口打开 _parent：链接文档加载到该链接所在框架的父框 架或父窗口 _self：链接文档在当前框
10、架或窗口打开。（默认）_top：链接文档载入整个浏览器窗口，删除所有框架情境3任务1 网页超链接图像地图图像被分为多个区域（称为热点）当单击某个热点时，会发生某种动作（如链接到页面）热点情境3任务1 网页超链接导航条：网站的目录，使访问者可以方便地访问到所需的内容，可以快速实现页面跳转 经常由一幅或一组图像组成，浏览网页时，这些图片会随着鼠标的移动而相互更替，合理地使用导航条，可以使网页层次分明 情境3任务1 网页超链接-导航条导航条实例：情境3任务1 网页超链接-导航条 情境3任务1 网页超链接-导航条 情境3任务1 网页超链接-完成效果超链接演示情境3任务1 网页超链接-完成效果文本超链接
11、图像超链接图像超链接演示图像超链接演示情境3任务1 网页超链接-完成效果热点电子邮件链接电子邮件链接演示电子邮件链接演示情境3任务1 网页超链接-完成效果设置锚点链接插入导航条情境3任务1 网页超链接-关键方法（1）文字、图像超链接1 修改页面链接格式2 设置文字超链接情境3任务1 网页超链接-关键方法3 图像超链接情境3任务1 网页超链接-关键方法4 图像热点超链接（先生成再设置）矩形热点圆形热点多边形热点情境3任务1 网页超链接-关键方法（2）电子邮件链接（先选中再设置）方法1方法2（mailto:电邮地址）情境3任务1 网页超链接-关键方法（3）锚点链接（设置对应跳转位置）情境3任务1
12、网页超链接-关键方法（4）插入导航条自动更新超链接情境3 知识点扩展绝对路径和相对路径 文件路径：文件在电脑中的位置 文件路径的两种表示方式：相对路径和绝对路径 绝对地址：水丰路100号 相对地址：地铁8号线延吉中路站，4号口出来，靖宇路往 东，水丰路往南情境3 知识点扩展相对路径分类 同目录相对路径 不同目录相对路径 站点根目录相对路径绝对路径 需将从磁盘到文件的所有文件夹都写全情境3 知识点扩展相对路径A（同一目录直接写文件名）My-site（根文件夹）SCHIndex.html（主页）C绝对地址：d:My-siteSC.htmlH绝对地址：d:My-siteSH.htmlC加入H超链接代
13、码：H.html情境3 知识点扩展相对路径B1（上一级目录 ./）My-site（根文件夹）SCHIndex.html（主页）C绝对地址：d:My-siteSC.htmlIndex绝对地址：d:My-siteIndex.htmlC加入Index超链接代码：H.html情境3 知识点扩展相对路径B2（下一级目录 ./）My-site（根文件夹）SCHIndex.html（主页）Index绝对地址：d:My-siteIndex.html C绝对地址：d:My-siteSC.htmlIndex加入C超链接代码：H.html情境3 知识点扩展相对路径C-站点根目录相对路径 以/开始My-site（根文件夹）SCHIndex.html（主页）C站点根目录相对路径：/S/C.html此表示方法是经常在Web站点中不同文件夹间移动HTML文件时，最佳方法 作业计算机文化基础 实验指导与自我测试191页 入门实验一201页 入门实验二 3月15日16点上机时交