第4章网页制作初步.

第4章网页制作初步信息学部计算机系主讲人：阮勇辉联系方式：QQ495912658知识回顾与上机问题解答HTML：超文本标记语言htmlhead/headbody/body/html网页内容（标签的开始）网页的隐藏信息（元数据）网页的显示信息（具体内容）网页内容（标签的结束）知识回顾与上机问题解答HTML标签知识的回顾标签形式之一xxx/xxx如标题title/title，段落p/p，超链接a/a，表格table/table，等。成对出现，其代表的内容写在标签对之间知识回顾与上机问题解答HTML标签知识的回顾标签形式之二xxx如图像img，水平线hr，换行br单个出现，其代表的内容写在尖括号之间知识回顾与上机问题解答HTML标签知识的回顾标签的上下级有些标签在表示一个网页元素时，由于其本身的结构复杂性，需要有下级标签进行配合。如表格元素用table/table标记，表格中的行用tr/tr标记，一行中的每个单元格用td/td标记。知识回顾与上机问题解答HTML标签知识的回顾标签的属性标签只是定义了一种网页元素的类型，但具体的表现形式还需要用属性来指定，属性位于开始标签内。如网页体body/body中，通过background属性指定网页的背景图片，例如：bodybackground=“图片/背景图像.jpg”/body属性值知识回顾与上机问题解答上机问题解答1.文件后缀名问题问题：“网页文件.html”与“文本文档.txt”的后缀名修改后不生效。解决：打开文件所在目录，在“工具栏”选择“组织”，“文件夹和搜索选项”，选择“查看”，将“隐藏已知文件类型的扩展名”取消勾选，点击“应用”和确定。知识回顾与上机问题解答上机问题解答2.网站的建立和保存问题新建文件夹，将网站下的网页文件，图片、音乐等资源全部放入新建的文件夹中；打开DreamWeaver软件，点击“站点”，“管理站点”解决：打开文件所在目录，在“工具栏”选择“组织”，“文件夹和搜索选项”，选择“查看”，将“隐藏已知文件类型的扩展名”取消勾选，点击“应用”和确定。知识回顾与上机问题解答上机问题解答3.图片路径问题问题：添加了图片元素，如设置背景图片，打开DreamWeaver软件，点击“站点”，“管理站点”解决：打开文件所在目录，在“工具栏”选择“组织”，“文件夹和搜索选项”，选择“查看”，将“隐藏已知文件类型的扩展名”取消勾选，点击“应用”和确定。知识回顾与上机问题解答上机问题解答4.图片的拼接新建文件夹，将网站下的网页文件，图片、音乐等资源全部放入新建的文件夹中；打开DreamWeaver软件，点击“站点”，“管理站点”解决：打开文件所在目录，在“工具栏”选择“组织”，“文件夹和搜索选项”，选择“查看”，将“隐藏已知文件类型的扩展名”取消勾选，点击“应用”和确定。知识回顾与上机问题解答上机问题解答5.图片的分辨率新建文件夹，将网站下的网页文件，图片、音乐等资源全部放入新建的文件夹中；打开DreamWeaver软件，点击“站点”，“管理站点”解决：打开文件所在目录，在“工具栏”选择“组织”，“文件夹和搜索选项”，选择“查看”，将“隐藏已知文件类型的扩展名”取消勾选，点击“应用”和确定。4.1.1规划站点在网站规划中一个很重要的问题就是确定站点结构。即确定站点子栏目,确定图片、多媒体文件的存放位置和导航条等等。例如，创建“昆明之光”网站站点，其网站结构规划图如图4-1所示。昆明之光首页云南映像昆明概况昆明旅游昆明特产昆明高校留言簿2.网站文件夹规划建立网站时，当网站结构规划完成之后，在定义站点之前，要对网站文件夹进行规划，以避免在一个文件夹内塞满几乎所有文件，使整个站点文件混乱不堪，不便于管理和维护。因此，要分类建立各个栏目文件夹、图像文件夹和多媒体文件夹等。对于昆明之光网站，建立站点根文件夹为“kunming”，子文件夹分别为“album”、“files”、“image”、“jiaoyu”、“liuyan”、“Fireworkshtml”以及“others”。“album”文件夹存放网站相册生成的子文件夹和文件“files”文件夹存放除首页以外的所有网页文件“image”文件夹存放所有图像文件“jiaoyu”文件夹存放昆明高校的框架集和框架页面“liuyan”文件夹存放留言簿的相关页面“Fireworkshtml”文件夹存放Fireworks导出的FireworksHTML文件及子文件夹“others”文件夹存放动画、音频或视频文件等其他类型的文件。4.1.2收集网页素材确定好站点目标和结构之后，接下来要做的就是收集有关网站的资源，其中包括以下资源：1.文字资料：文字是网站的主题。无论是什么类型的网站，都要离不开叙述性的文字。2.图片资料：网站的一个重要要求就是图文并茂。3.动画资料：在网页上插入动画可以增添页面的动感效果。4.其它资料：例如网站上的应用软件，音乐网站上的音乐文件、视频等等。4.2创建和管理站点设计任务:构建一个以“昆明之光”为主题的个人网站。（a）网站首页（b）昆明概况（d）昆明旅游景点（e）大观楼公园4.2.1创建站点Dreamweaver8的站点分为本地站点和远程站点。放置在本地磁盘上的网站被称为本地站点，位于互联网web服务器里的网站被称为远程站点。Dreamweaver8中打开站点定义对话框的方法有三种：（1）单击“起始页”中“创建新项目”下的“Dreamweaver站点”项。（2）单击菜单“站点”|“管理站点”，在弹出的“管理站点”对话框中单击“新建”按钮，在弹出的下拉菜单中单击“站点”项。（3）从“文件”面板左边的下拉列表中选择“管理站点”命令，打开“管理站点”对话框。站点定义对话框包括“基本”和“高级”两个选项卡。“基本”选项卡提供站点定义向导的方式帮助设计者一步一步地创建站点。“高级”选项卡则是以分类列表的形式对站点的各种属性进行设置。4.2.2管理站点1.编辑修改站点2.删除站点3.复制站点4.导入和导出站点4.2.3管理站点文件及文件夹1．打开文件2．新建文件或文件夹3．删除文件或文件夹4．重命名文件或文件夹5．移动文件或文件夹6．复制文件或文件夹4.3网页的新建、保存和编辑4.3.1新建网页4.3.2打开网页4.3.3保存网页4.4文本4.4.1插入文字要向Dreamweaver文档添加文本,几种方法如下：1、直接在Dreamweaver“文档”窗口中键入文本，也可以剪切/复制并粘贴。2、选择菜单“文件”|“导入”|“Word文档”，从word文档导入文本。3、选择菜单“文件”|“导入”|“表格式数据”可以导入表格数据。4.4文本4.4.2设置文字属性1、格式网页的文本分为段落和标题两种格式。“标题1”到“标题6”分别表示各级标题，应用于网页的标题部分。标题1字体最大，标题6字体最小，同时文字全部加粗。另外，在属性面板中可以定义文字的字号、颜色、加粗、加斜、水平对齐等内容。2、设置字体3、文字的其它设置在“属性”面板中包含“粗体”按钮、“斜体”按钮、“左对齐”按钮、“居中对齐”按钮、“右对齐”按钮、“两端对齐”按钮，可以对文字的加粗、倾斜、对齐方式等进行设置。文本分段：按Enter键。换行不分段：按Enter＋Shift键。要输入多个空格，有3种方法：①选择菜单“编辑”|“首选参数”，在“常规”选项中，选中“允许多个连续的空格”项。②打开一种中文输入法，切换成“全角”状态，再按空格键可以输入多个空格。③按Ctrl+Shift+空格。4．特殊字符要向网页中插入特殊字符，有两种方法：从“插入”工具栏选择“文本”，切换到字符插入栏，单击“文本”按钮。选择“插入”|“HTML”|“特殊字符”，也可以向网页中插入相应的特殊符号。5．插入列表列表是基于段落的。列表分为两种：有序列表和无序列表。通过文本缩进和文本凸出可形成多级列表。可以修改列表的类型和样式。6．滚动字幕使用marquee标记符可以在网页上创建一个滚动的文本字幕，将滚动的内容放在marquee/marquee之间即可。marquee的参数有：direction表示滚动的方向，值可以是left，right，up，down，默认为left。behavior表示滚动的方式，值可以是scroll（连续滚动）slide（滑动一次）alternate（来回滚动）。loop表示循环的次数，值是正整数，默认为无限循环。scrollamount表示运动速度，值是正整数，默认为6。scrolldelay表示停顿时间，值是正整数，默认为0，单位是毫秒。valign表示元素的垂直对齐方式，值可以是top，middle，bottom，默认为middle。align表示元素的水平对齐方式，值可以是left，center，right，默认为leftbgcolor表示运动区域的背景色，值是16进制的RGB颜色，默认为白色。height、width表示运动区域的高度和宽度，值是正整数（单位是像素）或百分数，默认width=100%height为标签内元素的高度。hspace、vspace表示元素到区域边界的水平距离和垂直距离，值是正整数，单位是像素。onmouseover=this.stop()onmouseout=this.start()表示当鼠标移上区域的时候滚动停止，当鼠标移开的时候又继续滚动。4.4.3插入水平线和日期1.水平线插入水平线有两种方法：选择插入工具栏的“HTML”项，单击HTML栏的“水平线”按钮。选择菜单“插入”|“HTML”|“水平线”。属性设置：2.日期插入日期有两种方法：单击“常用”插入栏的“日期”按钮选择菜单“插入”|“日期”。【例4-1】网页文字编辑实例4.5图像1、插入图像在制作网页时，先构想好网页布局，在图像处理软件中将需要插入的图片进行处理，然后存放在站点根目录下的文件夹里。插入图像的方法有四种：（1）菜单操作（2）使用“插入”工具栏（3）使用“资源”面板操作注意：该方法适用于将站点中已存在的图像文件插入到网页中。（4）使用Ctrl+Alt+I快捷键操作。4.5图像注意：如果在插入图片的时候，没有事先将图片保存在站点根目录下，会弹出图4-15所示的对话框，提醒我们要把图片复制进站点根文件夹，这时单击“是”按钮，然后选择本地站点的路径将图片保存，图像也可以被插入到网页中。2、设置图像属性4.5图像4.5.3插入图像占位符所谓图像占位符就是指图像在尚未编辑完成之前，用于保留该、图像的位置和尺寸的图像。插入图像占位符有两种方法：①单击常用工具栏上“图像”下拉列表中的“图像占位符”，打开“图像占位符”对话框。②选择菜单“插入”|“图像对象”|“图像占位符”，打开“图像占位符”对话框。4.5图像4.5.4插入鼠标经过图像鼠标经过图像是一种在浏览器中查看并使用鼠标指针移过它时发生变化的图像。鼠标经过图像实际上由两个图像组成，主图像（当首次载入页时显示的图像）和次图像（当鼠标指针移过主图像时显示的图像）【例4-2】网页插入图像实例在“昆明概况”网页gaikuang.html中插入图像。【例4-3】网页制作实例创建网页jindian.html，并添加文字及图片。4.5.5插入FireworksHTML文件用Fireworks可以导出FireworksHTML文件，在网页中插入FireworksHTML文件方法有两种：①单击常用工具栏上“图像”下拉列表中的“FireworksHTML文件”，打开“FireworksHTML文件”对话框。②选择菜单“插入”|“图像对象”|“FireworksHTML文件”，打开“FireworksHTML文件”对话框。【例4-4】网站首页实例制