《Dreamweaver8入门教程.ppt》由会员分享，可在线阅读，更多相关《Dreamweaver8入门教程.ppt（42页珍藏版）》请在三一文库上搜索。
1、1,基础知识网页设计简介,0.1网页设计概述 0.2初识Dreamweaver 8,2,0.1网页设计概述,0.1.1网页设计遵循的理念 0.1.2网站整体风格的确定 0.1.3网页创意 0.1.4网页色彩搭配简介 0.1.5常用网页设计工具简介,3,0.1.1网页设计遵循的理念,（1）考虑访问者的带宽问题。 （2）版面布局合理。 （3）网站标志的设计。 （4）站点内容要精、专，及时更新。,4,0.1.2网站整体风格的确定,网站的风格 指网站的整体形象给访问者的综合感受。 包含的因素 网站的标志设计、色彩、版面布局、浏览方式、交互性、文字和价值等。 例如： 儿童网站“WaWaYaYa”是生动活
2、泼的；大多商业网站如IBM，是专业严肃的。,5,http:/,6,http:/,7,确定网站的整体风格需要注意以下几个方面：,（1）网站标志要放在醒目位置要保持不变。 （2）反应网站精髓的标语并动态显示。 （3）导航放在每一张网页的相同位置。 （4）确定网站的主体颜色并注意颜色。 （5）页面的布局一般采用左边导航右边文字，或者上面导航下面文字的方法，或两者结合使用。 （6）内容结构简单且分类要简而精。,8,0.1.3网页创意,什么是创意？ （1）创意是传达信息的一种特殊手段。 （2）创意是将现有的要素重新组合。,9,0.1.4网页色彩搭配简介,网页色彩搭配应考虑以下因素： （1）色彩的鲜明性。
3、 （2）色彩的独特性。 （3）色度的合适性。 （4）色彩的代表性。,10,0.1.5常用网页设计工具简介,1网页设计软件Dreamweaver 2网络动画制作软件Flash 3网络图像处理软件Fireworks （本课程主讲Photoshop）,11,第1讲 Dreamweaver 8.0 界面及站点建设,12,第1讲 Dreamweaver 8.0 界面及站点建设,1.1 Dreamweaver 8.0简介 1.2 创建站点 1.3 网页文件的基本操作 1.4 设置页面属性 1.5 练习制作简单的网页站点,13,1.1 Dreamweaver 8.0简介,1.1.1 Dreamweaver
4、8.0的启动和退出 1.1.2 Dreamweaver 8.0的工作环境,14,1.1.1 Dreamweaver 8.0的启动和退出,1.启动Dreamweaver8.0 在Windows操作系统下，单击左下角的【开始】按钮，从【程序】菜单中选择Macromedia菜单，然后从子菜单中单击【Macromedia Dreamweaver 8】即可启动，如图所示。,15,2.退出Dreamweaver 8.0 退出Dreamweaver 8.0的方法很简单，我们可以有以下几种方式退出编辑界面： （1）单击Dreamweaver 8窗口右上方的关闭按钮； （2）按下“Alt+F4”组合键； （3）
5、选择“文件”菜单中的“退出”命令，或按快捷键Ctrl+Q退出系统。,16,1.1.2 Dreamweaver 8.0的工作环境,Dreamweaver 8.0的操作窗口,17,1.2创建站点,1.2.1 创建本地站点 1.2.2 管理站点 1.2.3 管理网站中的文件和文件夹,18,1.2.1 创建本地站点,步骤1：在本地硬盘上建立一个用来存放站点的文件夹，命名为“site”，该文件夹就是本地站点的根目录，是为网站特别建立的一个文件夹。 步骤2:打开Dreamweaver 8.0，选择“站点”菜单下的“管理站点”命令，或者选择文件面板中的“管理站点”命令，打开 “管理站点”对话框。,19,步骤
6、3:单击“管理站点”对话框中的“新建”按钮，在弹出菜单中选择“站点”命令。,20,步骤4：单击“站点”命令后，系统会弹出窗口，这是一个定义站点的向导，选择“基本”选项卡，给网站定义一个名称，例如“数学与计算机系”。,21,步骤5：单击“下一步”按钮，在窗口中设置网站是否使用服务器技术，例如：ASP、PHP等。由于我们要制作的是基本的静态网站，所以选择“否，我不想使用服务器技术”单选按钮。,22,步骤6：单击“下一步”按钮，开始设置网页的存储方法和存储路径。在上半部分的单选项中选择第一项“编辑我的计算机上的本地副本，完成后再上传到服务器（推荐）”。如果申请的网站空间支持在线编辑功能，那么可以选择
7、“使用本地网络直接在服务器上编辑”单选项。,23,24,步骤7：完成以上的设置后单击“下一步”按钮，在这里选择连接服务器的方式，以及网页在服务器上的存储位置。,25,步骤8：单击“下一步”按钮。在这里选择是否使用“存回”和“取出”。选中“是，启用存回和取出”选项，可以多人共同完成网站的维护工作。如果只需一个就能够完成网站的维护工作，可以选择“否”。,26,步骤9：至此完成了对网站的基本定义。单击“下一步”按钮，Dreamweaver 8.0会弹出对话框询问设置的信息是否准确，单击“完成”按钮，本地站点就创建成功了。,27,1.2.2 管理站点,1.切换站点 Dreamweaver 8.0中可以
8、同时存在多个站点，在文件面板左边的下拉列表框中选中某个已创建的站点，就可切换到对这个站点进行操作的状态。,28,1.2.2 管理站点,2编辑站点 如果要对站点进行编辑，可以在“管理站点”对话框中，选择要编辑的站点，然后用鼠标单击“管理站点”对话框中的“编辑”按钮，重新打开“站点定义”向导，根据需要一步一步修改站点的属性即可。,29,1.2.2 管理站点,3删除站点 如果不需要某个站点时，可以将其从站点列表中删除。选择“站点”菜单下的“管理站点”命令，打开“管理站点”对话框，在该对话框中选择一个站点，单击“删除”按钮，即可删除一个站点，对某一个站点进行删除操作后，网站的文件仍保存在硬盘原来的位置
9、上，并没有从硬盘上删除。,30,1.2.3管理网站中的文件和文件夹,1创建文件夹和文件 文件面板通常显示站点中的所有文件和文件夹，但新建的站点中不包含任何文件或文件夹。所有的文件和文件夹都需要新建，在文件面板中站点根目录上单击鼠标右键，然后从弹出的快捷菜单中单击菜单项“新建文件夹”或“新建文件”，接着给新的文件夹或文件命名。,31,1.2.3管理网站中的文件和文件夹,2重命名文件夹或文件 先选中需要重命名的文件夹或文件，然后单击右键，在弹出的快捷菜单中单击“编辑”选项的下级菜单中的“重命名”命令或者按【F2】快捷键，文件夹或文件的名称变为可编辑状态，重新输入新的名称，按Enter键确认即可。
10、3移动和复制文件 从“文件”面板的本地站点文件列表中，选中要移动或复制的文件夹或文件，如果要进行移动操作，在弹出的快捷菜单中单击“编辑”选项的下级菜单中的“剪切”命令；如果要进行复制操作，则执行“编辑”选项的“拷贝”命令，然后执行“编辑”选项下的“粘贴”命令，将文件夹或文件移动或复制到相应的文件夹中。 4删除文件夹或文件 要从本地站点文件列表中删除文件夹或文件，先选中要删除的文件夹或文件，然后执行“编辑”选项同上的“删除”命令或按Delete键，这时系统会弹出一个提示对话框，询问是否要真正删除文件夹或文件，单击“是”按钮确认后即可将文件夹或文件从本地站点中删除。,32,1.3 网页文件的基本操
11、作,1.3.1 创建网页和打开网页 1.3.2 保存网页 1.3.3 在浏览器中预览网页,33,1.3.1 创建网页和打开网页,1.新建网页 单击“文件”菜单下“新建”命令，即可弹出“新建文档”对话框。从“类别”列表框中选择“基本页”选项，然后选择“基本页”列表框中的“HTML”选项。单击“创建”按钮，即可新建一个空白的HTML网页文档。,34,1.3.1 创建网页和打开网页,2.打开网页 单击“文件”菜单选择“打开”命令，弹出“打开”对话框。在该对话框内选中要打开的HTML文档，单击“打开”按钮，即可将选定的HTML文档打开。也可以在“文件”面板上，双击“站点目录”中的网页文件也可以打开网页
12、文件。,35,1.3.2保存网页,在完成创建、编辑的网页之后，关键的一步就是保存网页，否则一切都是徒劳的，保存网页有如下几种方法： 单击“文件”菜单选择“保存”命令，可以原名字原路径保存当前的文档。 单击“文件”菜单选择“另保存”命令，可弹出“另存为”对话框。利用该对话框可以将当前的文档以其他名字保存。 单击“文件”菜单选择“保存全部”命令，可将当前正在编辑的所有文档以原名保存。,36,1.3.3在浏览器中预览网页,单击标准工具栏上的预览按钮或按“F12”可在浏览器中预览所编辑的网页。,37,1.4 设置页面属性,步骤1：打开Dreamweaver8.0，新建一个网页，或者打开一个现有的网页，
13、选择“修改”菜单下的“页面属性”命令，或者单击属性面板中的“页面属性”按钮，打开“页面属性”对话框。,38,1.4 设置页面属性,步骤2：在“页面属性”对话框中设置“外观”参数，选择“页面属性”中的“外观”选项同，在右侧可能设置具体的参数。,39,1.4 设置页面属性,步骤3：页面属性设置完成后，单击“确定”保存设置，然后中再打开“页面属性”对话框，并选择左侧的“分类”列表中的“链接”选项同，在右侧可以对链接的样式进行详细的设置。,40,1.5 练习制作简单的网页站点,1.创建一个名为“计算机基础精品课程”的站点，将其中的本地站点保存在“D:computer”文件夹下，远程站点保存在“D:co
14、mputer”文件夹下。根据如图所示的网站的逻辑图，为“计算机基础精品课程”网站建立一个存放图片的文件夹“images”，并新建名为“index.html”、“teacher.html”、“jiaoxue.html”、“shiyan.html”、“rili.html”、“kejian.html”和“luxiang.html”的网页文件，最后设置index.html的页面属性。,41,1.5 练习制作简单的网页站点,2. 创建一个“个人求职主页”的站点，将其中的本地站点保存在“D:self”文件夹下，远程站点保存在“D:self”文件夹下。根据网站的主页，为“个人求职主页”网站建立一个存放图片的文件夹“images”，并依据如图所示的网页建立网站目录，建立所需要的网页文件，最后设置index.html的页面属性。,42,1.5 练习制作简单的网页站点,3. 创建一个“公司产品销售”的站点，根据网站的主页，为“公司产品销售”网站建立一个站点，并依据如图所示的网页建立网站目录，建立所需要的网页文件，最后设置index.html的页面属性。,