第一讲网页设计与制作 DreamweaveCs5.ppt

1、1.1安装和启动Dreamweaver,1.1.1安装Dreamweaver 安装Dreamweaver（中文版）的过程如下： （1）双击Dreamweaver安装盘中的“setup.exe”文件，此时开始加载安装向导。出现Installshield Wizard界面，如图1-1所示。,图1-1 加载安装向导,1.1安装和启动Dreamweaver,（2）接着出现欢迎使用Dreamweaver和一些版权警告信息，如图1-2所示。,图1-2“欢迎使用和版权警告” 对话框,1.1安装和启动Dreamweaver,（3）单击“下一步”按钮，出现Dreamweaver“许可证协议”对话框，选择“我接收

2、该许可证协议中的条款（A）”，如图1-3所示。,图1-3 “许可证协议”对话框,1.1安装和启动Dreamweaver,（4）单击“下一步”按钮，出现Dreamweaver “目标文件夹和快捷方式”对话框，如图1-4所示。,图1-4 “目标文件夹和快捷方式”对话框,1.1安装和启动Dreamweaver,（5）直接单击“下一步”按钮，此时出现“默认编辑器”对话框，如图1-5所示。,图 1-5“默认编辑器”对话框,1.1安装和启动Dreamweaver,（6）单击“下一步”按钮，此时出现“正在安装您选择的程序功能”对话框，安装时间的长短取决于你的计算机硬件配置情况，如图1-6所示。,图 1-6

3、“正在安装您选择的程序功能”对话框,1.1安装和启动Dreamweaver,（7）安装完后，直接单击“完成”按钮，如图1-7所示。,图1-7 安装完成,1.2 Dreamweaver的操作界面组成,图 1-14 Dreamweaver的操作界面,1.2 Dreamweaver的操作界面组成,1.2.1标题栏 Dreamweaver软件的最上面是标题栏，显示程序名称，和当时编辑的文件名称，如果该文件改动后没有保存，则文件名后面会有一个“*”号，还有最大化按钮，最小化按钮和关闭按钮，如图1-15所示。,图 1-15 标题栏,1.2 Dreamweaver的操作界面组成,1.2.3工具栏 工具栏把一

4、些菜单中常用的功能提取出来以方便用户操作。工具栏中包含： “插入”、“样式呈现”、“文档”、“标准”四个子工具栏。在窗口相应位置处单击鼠标右键，可以一一把这四个子工具栏显示出来，如图1-16所示。,图 1-16工具栏,1.2 Dreamweaver的操作界面组成,2.2.2菜单栏 Dreamweaver的绝大部分操作都可以利用菜单栏来完成，它主要包括10个菜单，其功能如表1-1所示：,1.2 Dreamweaver的操作界面组成,“插入”工具栏：主要用于在文档中插入各种对象。它又包括“常用”、“布局”、“表单”等8项，如图1-17所示。,图 1-17 “插入”工具栏,1.2 Dreamweav

5、er的操作界面组成,当选择“显示为制表符”时，更加方便操作，显示效果如图1-18所示。,图 1-18 “插入”工具栏（制表符样式）,1.2 Dreamweaver的操作界面组成,“样式呈现”工具栏：当在文档中使用依赖于媒体的样式表时，此工具栏才有用，能够查看设计在不同媒体类型中的呈现方式，如图1-19所示。,图 1-19 “样式呈现”工具栏,“文档”工具栏：包含编辑文档的常用按钮，如切换视图、设置标题、上传、下载网页等功能，如图1-20所示。,图 1-20 “文档”工具栏,1.2 Dreamweaver的操作界面组成,“标准” 工具栏：主要就是为了方便新建网页、保存网页、以及复制、粘贴等最常用

6、的功能，如图1-21所示。,图 1-21 “标准” 工具栏,1.2 Dreamweaver的操作界面组成,1.2.4文档窗口 文档窗口用来显示当前创建或编辑的文档，可以加入任何有关的网页组件。默认的文档窗口创建的内容“所见即所得”，极大的方便了用户，甚至可以不经过浏览器直接在文档中播放动画。Dreamweaver为用户提供了三种视图方式以方便不同的用户：可以通过单击“文档”工具栏中的“代码”、“拆分”、“设计”三个按钮来分别显示“代码”视图、“拆分”视图、“设计”视图,1.2 Dreamweaver的操作界面组成,1.“代码”视图 “代码”视图是个手工编码环境，如可以用于编写HTML、CSS、

7、JavaScript以及服务器端脚本语言（如asp，php，jsp等）。主要用于满足喜欢手写代码的用户，通常要求比较高，如图1-22所示。,图 1-22 “代码”视图,1.2 Dreamweaver的操作界面组成,2.“拆分”视图 “拆分”视图同时兼顾“代码”视图和“设计”视图的编辑方式，同户可以在单个窗口中同时体验代码编写和可视化编辑两种方式的优点，如图1-23所示。,图 1-23 “拆分”视图,1.2 Dreamweaver的操作界面组成,3.“设计”视图 “设计”视图是本书的重点，它“所见即所得”，用于可视化页面布局、可视化编辑文档、可视化开发服务器端脚本语言等。本书的大部分设计工作就是

8、在“设计”视图模式下，主要用于开发静态网页，如图1-24所示。,图 1-24 “设计”视图,1.2 Dreamweaver的操作界面组成,1.2.5属性面板 属性面板主要用于自动显示用户在文档窗口中选中的对象属性，当选中对象不同时，属性面板显示的属性也不同。选中文档中的文本时属性面板相应变化情况如图1-25所示。,图1-25 选中文本“世界杯”时的属性面板,1.2 Dreamweaver的操作界面组成,1.2.6状态栏 状态栏是对当前编辑文档的一些说明，比如选中了哪个对象（比如表格、层、图像等），当前文档窗口大小、下载文件大小/估计下载时间等，如图1-28所示。,图1-28 状态栏,1.2 D

9、reamweaver的操作界面组成,1.2.7面板组面板组是Dreamweaver中常用的资源面板，主要包括“CSS”、“应用程序”、“标签检查器”、“文件”、“历史记录”等面板，可以通过窗口菜单显示或隐藏面板。一个面板又有一个或多个子面板，如“文件”面板下有三个子面板：“文件”面板、“资源”面板、“代码片断”面板，通过单击文件面板前面的三角形，可以打开文件子面板，如图1-29所示。,图1-29 展开“文件”子面板,1.3【课堂讲解】创建站点,1.3.1 创建本地站点 （1）执行【站点】-【新建站点】命令，再选择“基本”选项卡，如图3-1所示， 把“您打算为您的站点起什么名字？”项的“未命名站

10、点 1”改为所需要的名字，中文英文均可，比如本例中输入“myweb”作为网站名字，实际上只起个标签的作用，完全不影响网页显示的内容。,图3-1站点定义输入网站名称,1.3.1【课堂讲解】创建站点,（2）单击“下一步”按钮，会显示如图3-2 所示的对话框 “您是否打算使用服务器技术，如ColdFusion、asp、jsp 或php?”本书主要讲解静态网页设计技术，所以选择第一项“否，我不想使用服务器技术。”项，如果读者以后学习服务器端编程语言，那就要选择第二项了。,图3-2询问是否使用服务器端技术,1.3.1【课堂讲解】创建站点,（3）单击“下一步”按钮，会显示如图3-3 所示的对话框“在开发过

11、程中，您打算如何使用您的文件？”按默认选项，即选择“编辑我的计算机上的本地副本，完成后再上传到服务器（推荐）”。单击“您将把文件存储在计算机上的什么位置？”右侧的文件夹按钮，设置本地站点。,图3-3选择本地文件夹,1.3.1【课堂讲解】创建站点,（4）在打开的“选择站点 myweb 的本地文件夹”项中，选择本地文件夹位置，比如E: myweb，选择“myweb”文件夹，单击“打开”按钮，如图3-4所示，然后再单击“选择”按钮。,图3-4创建本地站点,1.3.1【课堂讲解】创建站点,（5）单击“下一步”按钮，会显示如图3-5 所示的对话框 “您如何连接到远程服务器？”选择“无”项。,图3-5询问

12、如何连接到远程服务器,1.3.1【课堂讲解】创建站点,（6）单击“下一步”按钮，出现站点定义的总结信息，包括本地信息、远程信息、测试服务器信息等，如图3-6所示。,图3-6本地站点基本信息,1.3.1【课堂讲解】创建站点,（7）单击“完成”按钮，这样站点定义就完成了。在Dreamweaver屏幕右侧的文件面板中可以看到刚刚创建的本地站点，如图3-7所示。执行【站点】-【管理站点】命令，打开“管理站点”对话框，可以看到如图3-8所示的“myweb”标签，它就是刚刚创建的本地站点，可以单击“编辑”按钮对它的一些选项进行更改,图3-7 “文本”面板的站点信息,图3-8管理站点, 文档的

13、创建和保存,首先启动Dreamweaver后，选择屏幕中的【创建新项目】-【HTML】项，如图3-10所示，这时一个新的网页文档就创建完成了。大家一定要养成一个好习惯：经常保存网页，以防机器故障或软件故障使劳动成果付之东流。执行【文件】-【保存】命令，然后输入要保存的文件名如：daili（扩展名“.html”可以不加，保存时系统会自动加上的），然后单击“保存”按钮。系统会自动保存到上一节创建的站点“xiaoxing”文件夹下。,图3-10文档的创建, 输入文本,在Dreamweaver中输入文字可不象Word那样随心所欲，输入文本需要注意以下问题： 换行：按快捷键【Shift+回

14、车】（对应代码为“”）， 分段：直接按快捷键【回车】（对应代码为“ 字符串”）。 输入空格：第一种方法是插入不换行空格，按快捷键【Ctrl+Shirt+Space】（对应代码为“ ”)；第二种方法是在确保输入法处于“全角”模式时输入空格。, 插入字符,执行【插入】-【HTML】-【特殊字符】命令，来插入所需的字符，如图3-13所示。最快捷的方法是：在“插入”栏的“文本”类别中单击“字符”按钮上的箭头，然后选择所需的字符。插入的字符可以为：不换行空格（对应代码“ ”）、货币符号（如英镑符号，日元符号等）、版权信息等。当然也可以插入其他字符，或者执行【插入】-【HTM

15、L】-【特殊字符】-【其他字符】命令来打开“插入其他字符”对话框。,图3-14 “文本”工具栏, 格式化文本,使用文本属性面板“文本”菜单或“文本”工具栏，可以方便地进行文本的格式设置。文本属性面板显示文档中被选中文本的格式属性。可以在文本属性面板中更改格式。Dreamweaver默认的属性面板即是文本属性面板，如图3-23所示。如果没有显示属性面板，可以通过执行【窗口】-【属性】命令打开它。 文本属性面板各选项作用： “格式”下拉列表框：选择属性面板中的“格式”下拉列表框，可以设置选定文本的级别。 “字体”下拉列表框：选择字体。如果是第一次安装Dreamweaver，会发现中文

16、字体非常少，选择字体下拉列表框中的“编辑字体列表”项，这时弹出“编辑字体列表”对话框，如图3-24所示。在“可用字体”选项中选择一种字体比如“黑体”，单击 按钮，然后单击“确定”按钮，就可以把“黑体”字体加入字体列表中了，如图3-25所示。 “样式”下拉列表框：设置文本的CSS样式。 “大小”下拉列表框：设置字体大小。 “文本颜色”选择器：设置文字颜色。, 格式化文本,文本属性面板还有设置字体粗细、文本对齐方式、文本超级链接等项。当然也可以通过菜单来设置文本属性，比文本属性面板的选项更多。 在文档中选择文本“电脑”，然后在“格式”下拉列表框选择“标题3”，“字体”下拉列表框中选择

17、“黑体”，并单击“ ”按钮使其以粗体显示，类似方法可以设置文字“数码相机”、“投影机”、“办公打印/耗材”；在文档中选择文本“6665￥”，利用“文本颜色”选择器设置文本颜色，比如：#FF0000（红色）；在文档中选择文本“6765￥”，单击“ ”按钮使其以斜体显示，再利用菜单【文本】-【样式】-【删除线】设置字体样式为删除线型。,图3-23文本属性面板, 格式化文本,图3-24 编辑字体列表,3-25 “编辑字体列表”对话框,1.4.1网页图像基础,计算机图像格式有成百上千种，但网页中使用的只有3中，即JPEG/JPG，GIF和PNG。 4.1.1图像格式 1.JPEG/JPG

18、格式 扩展名是.jpg/.jpeg，其全称为Joint Photograhic Experts Group（联合图象专家组，一种压缩标准），JPEG是一种有损压缩格式，当读者将图像保存为JPEG格式时，可以指定图像的品质和压缩级别，应用于网页中的JPEG格式品质一般选中等的，比如在photoshop软件中读者可以选用压缩级别为6。JPEG格式可以支持多达16M种颜色，能很好地实现全彩图像，有利于表现带有渐变色彩且没有清晰轮廓的图像。网络上自然风景图片、鲜花图片多为JPEG格式，比如牡丹花，如图4-1所示。 2.GIF格式 扩展名是.gif，其全称为Graphics Interchange Fo

19、rmat（交换的图像文件格式），GIF采用无损压缩存储，在不影响图像质量的情况下。,1.4.1网页图像基础,它还支持透明色，可以去掉图像的背景。但是GIF只支持最多256色，因此多用于渐变色彩不明显或者轮廓清晰的图像。GIF最突出的一个特点是可以制作动画图像。网络上很多图标、按钮、漫画卡通图片等多为GIF格式，如图4-2所示。 3.PNG格式 扩展名是*.png，其全称为Portable Network Graphics（可移植的网络图象文件格式），从其名称就可以看出，它是专门为网络而生的图像格式。PNG是一种能存储32位信息的位图文件格式，和GIF格式一样，png也使用无损压缩方式。类似于G

20、IF，PNG可以也可以是动画，比GIF能容纳更多的颜色，如图4-3所示。,1.4.1网页图像基础,图4-1 JPEG 图4-2 GIF 图4-3 PNG,网页图像应用策略 读者可以打开一个或多个网页，然后打开“C:Documents and SettingsxiaoxingLocal SettingsTemporary Internet Files”（网络临时文件）文件夹，如图4-4所示。可以看到这里有各种文件类型，如“.htm”，“.swf”，“.js”，“.css”和图像文件等，也就是说当浏览网页时，浏览器把请求的网页文件都缓冲到 “Temporary Internet Fi

21、les”文件夹下，所以文件越大越多下载的时间也越长。一般来说图像文件是比较大的。因此一定要注意图像文件适可而止，同时要讲究一些应用图像的策略。 总结：网页的图像格式一般为：gif格式、jpg格式、png格式三种。 GIF格式优点为：可以制作动画，其缺点为：最多只可以支持到256色。 而JPEG格式的优点为：可以支持真彩色，其缺点为：只能为静态图像。 PNG格式的优点为：既可以制作动画又可以支持真彩色，其缺点为：文件大，下载速度慢。 当只需要静态图像且色彩要求也不高时：当所选用图像较小时用gif格式文件小；而当所选用图像大时用jpg格式文件小。此时png格式不具备优势。,图4-4网络临时文件文件

22、夹,针对上面最后一条结论，读者可以做一个试验来证明。选取一幅图像，用软件分别转换为JPEG格式和GIF格式，两者都为44像素，且同为256色。但是可以看到JPEG格式图像大小为343字节，如图4-5所示；而GIF格式图像大小仅为46字节，如图4-6所示（图像被放大16倍）。这就印证了“当所选用图像较小时用gif格式文件小”这条准则。网页中背景图像、小图标等文件比较小，所以多为GIF格式图像。,图4-5 JPEG（343字节） 图4-6 GIF（46字节）,选取一幅图像，用软件分别转换为JPEG格式和GIF格式，两者都为640480像素，且同为256色。但是可以看到JPEG格式图像大小仅为23.

23、0 KB，如图4-7所示；而GIF格式图像大小为126 KB，如图4-8所示。这就印证了“当所选用图像大时用jpg格式文件小”这条准则。,图4-7 JPEG（23.0 KB） 图4-8 GIF（126 KB）,插入图像 在建立了一个站点，比如“eshop”，一般要在站点目录下建立一个图像目录，比如“images”，方法是：在文件面板中选中站点“eshop”（“商城”为站点标签），单击鼠标右键，执行【新文件夹】命令，。然后把文件夹名称“untitled”改为“images”即可，如图4-11所示。,图4-11 新建“images”文件夹,创建一个空白网页，保存网页，把网页文档命名为

24、“index.html”。插入图像的步骤如下： （1）执行【插入】-【图像】命令，或者在“插入”栏的“常用”类别中单击图像图标，如图4-12所示。打开“选择图像源文件”对话框，如图4-13所示。,图4-12 插入图像图标,图4-13“选择图像源文件”对话框,（2）找到所需的图像“sc_logo.jpg”后，单击“确定”按钮，如图4-13所示。如果读者没有预先保存网页，会显示如图4-14所示的对话框，提示要先保存网页。,图4-14提示保存网页,（3）接着Dreamweaver会提示所选择的图像不在本地站点“eshop”下，建议拷贝到“eshop”下，如图4-15所示，要把所选的图像“sc_log

25、o.jpg”拷贝到上面建立的“images”目录下，如图4-16所示。,图4-15 建议拷贝到站点“eshop”中,（4）单击“保存”按钮，出现“图像标签辅助功能属性”对话框，如图4-17所示，设置“替换文本”项为“电脑商城logo”，所谓的“替换文本”也就是网页的Alt 属性（即“敏感提示信息”），预览效果如图4-18所示。,图4-17 “图像标签辅助功能属性”对话框,图4-18 预览替换文本,（5）运用同样的方法插入图像“sc_banner.gif”后，预览效果如图4-19所示。,图4-19 浏览“index.htm”网页,图像插入到网页中后，不一定完全符合要求，还需要对它进行修改加工。这

26、就要用图像属性面板进行编辑，如图4-20所示。,图4-20 图像属性面板,1.5 练习,名词解释 WWW URL FTP HTML 填空题 （1） WWW是_的缩写，其中文译名为_。 （2）URL是_的缩写，其中文译名为_。 （3）HTML是_的缩写，其中文译名为_。 （4）在 UNIX平台中，HTML文档的后缀名为_，而在 WINDOWS平台中则为_，网站的首页文件多命名为_。 （5）标签表示_。 （6）表示_。 （7）当启动Dreamweaver“工作区设置”对话框时，有哪两种布局可供选择_。,（7）当启动Dreamweaver“工作区设置”对话框时，有哪两种布局可供选择_。 （8）Dreamweaver的工具栏主要作用是_。 （9）Dreamweave