收藏本站
 
设为主页
     您的位置:首页在线课堂高二级2017-2018学年度第二学期 》第二课
==※ 高二级 ※==
2017-2018学年第二学期






==※ 相关资源 ※==
 
太平洋电脑网
天极网
eNet网络学院
我要自学网
 
==※ 自由论坛  ※==
   
用户名:
密码:
 
忘记密码
游客请进
 
第二课 Dreamweaver之新建站点与新建网页
 
学习目的:认识Dreamweaver的界面,学会建立站点,编辑简单的页面;
     理解绝对路径和相对路径的概念。
学习重难点建立站点,编辑简单的页面;绝对路径和相对路径的概念。
教学方式:老师组织问答游戏,引导学生自主学习+动手实践。

学习内容:

一、Dreamweaver简要介绍:
 
  Dreamweaver 是一款“所见即所得”的网页编辑工具。是一款专业的 HTML 编辑器,用于对 Web 站点、Web 页和 Web 应用程序进行设计、编码和开发。
  Dreamweaver 与 FlashFirework 曾经并称为“网页制作三剑客”。


二、认识 DW 的界面:
 
  DW 的界面组成:
  

 
  其中,位于“文档”窗口上方的“文档工具栏”功能如下:
 


  位于“文档”窗口下方的“状态栏”功能如下:

  

  另外,“ 菜单栏”和菜单下方的“工具栏”的具体功能请同学们自己去了解一遍。
 

三、开始动手新建站点:(请跟上老师的操作步骤。)
 
 1、新建站点:
  单击【站点】菜单——【新建站点】,出现以下对话框。请填写好以下箭头所指的内容。
  

  填写完,单击“确定”后,“文件面板”里会出现你新建的站点的文件列表:

  
 
 2、新建文件:
  新建网页的方法有两种:
  方法一:在“文件面板”里右键单击你的站点文件列表的根部,然后选择“新建文件”,如下图:

  

  然后修改文件名为index.html,如下图:

  

  方法二:通过“文件”菜单-->“新建...”命令新建网页,页面类型有很多种,一般静态页面选择HTML,布局选择“<无>”。(注意:文件菜单新建的网页是未保存的,可以通过文件菜单的保存命令保存)



  网站首页的名称必须用“index.html”,这是约定俗成的规则。
  
  新建一个文件夹“images”,专门用来保存本网站用到的图片。
  将网站的图片、音乐、视频等,按不同类型分别放在不同文件夹中,这是一个好习惯。
  
 3、编辑网页文件:
 (1)在“文件面板”中双击首页文件“index.html”,进入网页“index.html”的编辑窗口。
 (2)首先修改“页面属性”:
  选择【修改】菜单——>【页面属性】,在这里,可以修改“标题”、“背景图像”、“背景颜色”、“文字颜色”等。 如下三图:

  

  
  
 (3)现在可以真正开始编辑网页了。
  A、输入文字:光标闪烁的地方就是输入文字的地方,输入文字的方法与Word相同。
  输入文字“畅游书海”,相邻两个字之间空两格。利用“属性工具栏”对文字格式进行修改。
  如下图,输入了文字“欢迎来到‘畅游书海’!”,并修改了文字的属性。
  网页文字的换行方式有两种:段落换行(按Enter键),段内换行(按Shift+Enter键),同学们可试试这两种方式有什么不同(试试设置文字居中)

  

  B、插入图像:
  step1——单击“工具栏”上的“图像”图标,如下图:

  

  step2——选择图像,如下图:

   

  step3——保存图像到你预先设定的图像文件夹的位置,如下三图:

  

  

  

  插入图像后的网页如下图:

  
  
 
 4、在 IE 浏览器中预览我们的网页:快捷键——> F12


◎ 本课小技巧:如何在页面中输入空格键?
  答:只要把中文输入法的“半角”状态改为“全角”就可以了。
 

四、绝对路径VS相对路径

  文件路径就是文件在电脑中的位置,表示文件路径的方式有两种,相对路径绝对路径。在网页设计中通过路径可以表示链接,插入图像、Flash、CSS文件的位置。

  绝对路径:是从盘符开始的路径,形如 F:\myweb\book.html。
  相对路径:是从当前路径开始的路径,假如当前路径为F:\myweb,要描述上述路径,只需输入 book.html。
  一旦将网站文件夹myweb移动到其他位置,网页中的所有绝对路径都会失效,但网页素材和网站根目录myweb的相对位置保持不变,所以网页中的相对路径依然有效。
  用Dreamweaver制作网站,一定要先新建站点再编辑站点中的网页,这样可以保证网页中使用相对路径。



* 友情提示:
本文档只供本校师生上课时辅助使用,不是正规的教学设计或教案。


 

 

Copyright © 东莞中学信息技术科 All Rights Reserved
IE4.0 or later / 800*600  For The Best View