chapter4利用Dreamweaver制作简单网页.pptxVIP

第4章　利用Dreamweaver制作简单网页——制作“慧衡”页面计算机工程学院　计算机基础教学部.学习目标了解Dreamweaver CS6认识HTML标记语言分析网页的页面结构及代码结构创建站点及制作简单网页计算机工程学院　计算机基础教研室.实训项目深圳慧衡科技有限公司需要制作一个二级页面“慧衡”，用于介绍公司的基本情况。计算机工程学院　计算机基础教研室.项目分析设计思路：（1）页面元素：包括相应的公司介绍文字、公司的logo、客户案例展示的Flash影片、水平线和特殊字符等。（2）页面布局：由于是初识网页设计，还不懂布局技术，本案例只做一个简单的图文页面，采用较普遍的上中下结构，自上而下对页面元素进行排版，3个版块的排列情况及其中的元素如图所示。（3）配色方案：采用蓝灰色以体现的企业的稳健、深远、平静和谐。配有一些橙色使稳健中增添活力。计算机工程学院　计算机基础教研室.设计目标计算机工程学院　计算机基础教研室.预备知识：初识Dreamweaver CS6Dreamweaver CS6工作界面计算机工程学院　计算机基础教研室.预备知识：初识Dreamweaver CS6工作界面包括：1．菜单栏：含有“文件”、“编辑”等10个菜单分类。2．文档工具栏：包含了一些与查看文档等相关的常用命令和选项。3．插入面板：包括用于创建和插入各种对象（如表格、AP元素和图像）的按钮。当鼠标指针移动到一个按钮上时，会出现该按钮的名称的提示。4．文档窗口：是Dreamweaver的主工作区，用于显示和编辑当前创建的文档。计算机工程学院　计算机基础教研室.预备知识：初识Dreamweaver CS65．属性面板：用于检查和编辑当前选定页面元素（如文本、图像或其他插入的对象）的最常用属性，其内容根据选定的元素会有不同变化。6．状态栏：位于文档窗口底部，提供与文档相关的其他信息。7．浮动面板：集中了网页编辑和站点管理过程中最常用的一些操作。可以展开和折叠这些面板，在菜单栏中的“窗口”下拉菜单中单击面板名称可以显示或者隐藏这些面板。8．代码窗口：当在“文档工具栏”中点击“拆分”或“代码”后可以看到代码窗口。在代码窗口中能够查看、输入和修改网页的代码。垂直于代码窗口左侧的是编码工具栏，包含用于执行多种标准编码的操作按钮。计算机工程学院　计算机基础教研室.预备知识：HTML——HTML文档结构一个标准的HTML网页文档的基本代码结构，如图所示。其标签含义：超文本标记语言标签htmlhtml/html在文档的最外层，文档中的所有文本和HTML标签都包含在其中，它表示该文档是以超文本标记语言（HTML）编写的。计算机工程学院　计算机基础教研室.预备知识：HTML——HTML文档结构头标签headhead/head是HTML文档的头部标签，在浏览器窗口中，头部信息是不被显示在正文中的，在此标签中可以插入其它标记，用以说明文件的标题和整个文件的一些公共属性。标题标签titletitle和/title是嵌套在head头部标签中的，标签之间的文本是文档标题，文档标题显示在浏览器窗口的标题栏。网页主体区标签bodybody /body标记一般不省略，标签之间的文本是正文，是在浏览器中要显示的页面内容。计算机工程学院　计算机基础教研室.预备知识：HTML——HTML语法形式HTML标签通常有三种格式：?　不带属性的双标签：格式为标签名称内容/标签名称。例如：h1…/h1 用于设置一级标题?　带有属性的双标签：格式为标签名称 属性名称1=值 属性名称2=值……内容/标签名称。属性名称（name）和值（value）一起使用。例如：hr size=3 align=left width=800 /?　单标签：格式为标签名称/。例如：br /换行标签。计算机工程学院　计算机基础教研室.预备知识：HTML——HTML语法规则?　Web文档中，标签采用“”和“”作为分割字符。?　HTML标签不区分大小写，如HTML和html是相同的标签。?　大多数HTML标签可以嵌套，但不能交叉，各层标签为全包容关系。?　Web文档一行可以书写多个标签，一个标签也可以分多行书写。?　HTML源代码中的换行、回车符和多个连续空格在浏览时都是无效的。?　网页中所有显示的内容都应该受限于一个或多个标签，不能存在游离于标签之外的文字或图像等，否则会产生错误。计算机工程学院　计算机基础教研室.预备知识：HTML——HTML常用标签强制换行标签br/：放在一行的末尾，可以使后面的文字、图片、表格等显示于下一行，而又不会在行与行之间留下空行，强制换段标签p /p：HTML的分段完全依赖于分段标记元素p。标题标签hn/hn：用于把文字设置为各种大小不同的标题。共有六级标题。标签中“h”后面的数字代表标题的级别，该数字