第8章 网页制作初步及网站的建立.ppt

第8章网页制作初步及网站的建立
网页制作软件之—Dreamweaver 4的简介
定义站点
建立主页
网页的设计原则与标准
建立网站的一般步骤
网站的推广
网页制作软件之Dreamweaver 4的简介
图 8-1

主菜单中包括“文件”、“编辑”、“查看”、“插入”、“修改”、“文字”、“命令”、“站点管理”、“窗口”、“帮助”十个选项。
“文件”菜单里包含了对文件操作的各种命令。
“编辑”菜单里包含复制、粘贴、撤消和重做等命令。
“查看”菜单里包含查看不可见元素、标尺、网格和代码等网页设计组件命令。
“插入”菜单包含了插入图像、表格及其他组件的命令。
“修改”菜单包含了对网页中各种对象的修改工具。
“文字”菜单集合各种处理文字的工具。
“命令”菜单包含了对Dreamweaver 4设置修改的命令,如清理HTML、套用源格式、设置配色表、表格排序和格式化表格等命令。
“站点管理”菜单收集了站点设置和管理的工具。
“窗口”菜单集中了各种面板及文件窗口等命令。
“帮助”菜单包含了Dreamweaver 4的版本介绍、互动帮助信息的选项。
Dreamweaver 4的基本功能都可以在主菜单中找出,不过,Dreamweaver 4为了用户的方便,添加了友好的状态条、属性面板、对象面板和快捷启动面板,用户可以方便地在桌面上单击图标,就可以调用所需的功能。

在主菜单的下边有一列工具栏,这是Dreamweaver 4才增加上的新功能,可以通过菜单“查看”下面的“工具栏”子命令来显示和关闭工具栏。按从左到右的顺序各按钮依次是“代码视图按钮”、“代码与设计视图按钮”、“设计视图按钮”、“网页标题”、“文件状态按钮”、“浏览器中预览/调试按钮”、“刷新按钮”、“参考书按钮”、“代码导航按钮”、“显示选项按钮”。
(1) 代码视图按钮。按下此按钮以后,就可以直接编辑和查看HTML源代码。这个按钮相当于以前版本的HTML代码编辑窗口。
(2) 代码与设计视图按钮。按下这个按钮以后,就可以同屏显示源代码和页面的效果。这个功能对于网页制作来说是极其有用的,可以一边修改代码,一边看到其效果,无需在窗口间来回切换。
(3) 设计视图按钮。此按钮就是以前版本的Dreamweaver网页编辑窗口。
(4) 网页标题(Title)。以前网页标题修改是到菜单里面编辑。现在只要在Title的文本框中直接输入网页标题就可以了。
(5) 文件状态按钮。该按钮用来修改文件的状态。其中文件状态按钮包括如下选项:
①取消只读:去掉文件的只读属性。
②下载:文件的下载和上传。
③登录:登记/取消登记。
④还原注销:撤消Check out操作。
⑤设计备注:备注功能,用于查找文件在网站中的位置。可直接显示出当前页面在站点管理器中的位置,这样就不需要在网站中四处搜索了。
(6) 浏览器中预览/调试按钮。该按钮用来预览或进行调试。该按钮包含三个选项:
①预览在iexplore: Explore浏览器中浏览。
②调试在iexplore:在浏览器中调试JavaScript脚本。这是一个真正意义上的调试器,可以进行断点设置、变量跟踪等操作。
③编辑浏览器列表:编辑浏览器列表。可以指定在什么浏览器中进行预览,并且添加浏览器等操作。
(7) 刷新按钮。该按钮可以刷新文件列表和页面。
(8) 参考书按钮。这是Dreamweaver为专业网页设计提供的一个详细的参考手册。包括O’reilly的三本参考书HTML、CSS、JavaScript参考手册。里面有详细的语法和参考说明。对话框中的Book为选择参考书的种类,Tag为要查询的标签(包含标签和相关属性的查询)。
(9) 代码导航按钮。
(10) 显示选项按钮。该按钮可以调整多种显示选项,其中有如下选项:
①隐藏全部:隐藏所有的可视元素。
②可视化助理:可视元素——表格边框、层边框、框架边框、图像边框、不可见元素。
③文件头内容。
④标尺。
⑤网格。
⑥网页草图(跟踪图像)。
⑦在顶部设计查看。当设计视图和代码视图同时打开时,将设计视图放在最上面。