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