资源预览内容
第1页 / 共99页
第2页 / 共99页
第3页 / 共99页
第4页 / 共99页
第5页 / 共99页
第6页 / 共99页
第7页 / 共99页
第8页 / 共99页
第9页 / 共99页
第10页 / 共99页
亲,该文档总共99页,到这儿已超出免费预览范围,如果喜欢就下载吧!
资源描述
问题:,同学们上网都做些什么? 还能做些什么?,网页使用者,网页制作者,网页制作工具,Dreamweaver 网页制作,Dreamweaver,Dreamweaver 由Micromedia公司出品,是当今流行的专业网页设计、网站管理、网页可视化编程应用软件。主要用于制作网站的静态网页。具有跨平台、跨浏览器的特点。,静态网页、动态网页,静态网页: HTML格式的网页,只是在页面上显示一些文本图象等信息,通常被称为静态网页。 在HTML格式的网页上,也可以出现各种动态的效果,例如:GIF格式的动画,FLASH,滚动字幕等等。然而,这些“动态效果”只是视觉上的。 动态网页: 静态网页是相对于ASP、JSP等数据库网页的,动态网页的页面上访问者可以与服务器进行数据交换。 静态网页制作工具主要有Dreamweaver, frontpage等,动态编程工具主要有ASP、JSP、PHP等。,目录,一、第一单元:创建个人网站 Dreamweaver 的窗口布局 建立站点 Mysite 建立站点文件夹结构 Dmysite index.html、 、,二、制作网页(重点) 1、首页:index.html 文本 图像简单处理 Css样式设置、应用 2、“作品展示”:works.html 表格 超链接 3、“心情日记”:diary.Html 框架、框架集 多媒体插件 4、“家乡山水”:travel.html 热点 锚记 层和行为(网页动态效果),文本操作 图像操作 表格操作 超链接操作 表单的使用 层、时间轴、行为的使用 框架的使用 插入多媒体,一、窗口布局,菜单栏,文档窗口,文档栏,属性面板,状态栏,对象面板,面板组,标签选择器,2.文档栏 常用按钮: 视图按钮:用于切换三种编辑网页的视图。 文档标题:浏览器浏览网页时,标题栏中显示的内容。 浏览按钮:网页编辑完后,点击此按钮可以打开浏览器浏览网页效果。,HTML简介,Html (Hypertext Markup Language)是最基本的Web页面开发语言,称为超文本标记语言。 Html是纯文本文件,可采用Windows中的记事本或写字板来编辑,也可以通过专用的网页设计程序编写,如Front Page、DreamWeaver等。,文档结构,HTML元素与标签 一个HTML文档是由一系列的标记组成. :HTML文档开始。 :文档头部开始。 :文档标题开始。 :文档标题结束。 :文档头部结束。 :文档主体开始。 :文档主体结束。 :HTML文档结束。,HTML语法非常简单,它通过各种标记来表示。 1. 实例代码 在记事本中输入以下代码(从开始到结束): HTML基础 一个简单的网页 2. 保存文件 然后执行【文件】-【保存】命令,注意要选择“保存类型”为:【所有文件】。输入文件名:test.htm,单击“保存”按钮。 3. 在IE浏览器查看所创建的文件,示例:一个简单的HTML网页,标记语法,1.单标记 语法: 例如:最常用的单标记是,换行 , 2.双标记 语法:内容 例如: ,强调(通常会以斜体显示) text to emphasize 3.标记属性 许多单标记和双标记的始标记内可以包含一些属性. 语法: 例如:,一、窗口布局,状态栏,一、窗口布局,面板组,4. 面板组 Dreamweaver 中的面板被组织到面板组中。 每个面板组都可以展开或折叠,并且可以和其它面板组停靠在一起或浮动。 文件、CSS、框架、层、行为(窗口菜单),一、窗口布局,属性面板,5. 属性面板 属性面板用于显示和修改已选定对象的属性,可以对文本、图像、表格、层等进行属性设置。不同的对像对应不同的属性面板。 打开“窗口”菜单选“属性”,可以显示或隐藏属性面板,二、创建和管理站点,Dreamweaver 站点用于组织所有与网站站点关联的文档(网页和其他对象)。 本地站点 和 远端站点: 本地站点:本地文件夹。一般位于本地计算机上 。 远端站点:远端文件夹。位于运行 Web 服务器的计算机上 。,1. 创建本地站点: 站点/新建站点 站点名称: 本地根文件夹,2. 管理站点 站点/管理站点 用户可以通过“管理站点”对话框完成对站点的新建、编辑、复制、删除、导出和导入操作,3.通过文件面板管理网站文件和文件夹: 操作: 新建 打开 更改名称 移动 删除等,4. 制作网站的基本流程 新建本地站点 建立站点结构 创建网页 编辑网页 设置网页的页面属性 网页元素的插入并进行属性设置 保存和预览网页,目录,一、Dreamweaver 的窗口布局 二、创建和管理站点 三、制作网页 文本操作 图像操作 表格操作 超链接操作 表单的使用 层、时间轴、行为的使用 框架的使用 插入多媒体,文本的输入与编辑 换行:【Shift+回车】,其 HTML标记为“”。 分段:【回车】,其 HTML标记为“ 字符串” ,与前一段落之间多出一个空行。,1. 文本操作文本格式,在字符之间添加空格 在Dreamweaver 中缺省设置只允许字符之间包含一个空格;要在文档中输入连续空格按 “ctrl+Shift+ 空格键”,其他文本 插入特殊字符 在字符之间添加空格 “ctrl+Shift+ 空格键” 插入时间 插入水平线 (html),设置段落格式 段落格式设置有“凸出”,“缩进”,“段落格式”,“对齐”,“列表” 使用属性面板中的相应操作 选择菜单”文本”,1. 文本操作段落格式,示例1插入水平线,水平线能将网页中不同功能的区域分割开来。 在页面单击鼠标确定水平线位置“插入”菜单“水平线”。 选中水平线在属性面板为水平线起名“line-1”。 宽度设为200像素,高度为10像素,若用“百分比”作宽度单位,表示宽度占浏览器窗口的百分比。设置水平线在页面中的对齐方式为“居中对齐”。如图所示。,2. 图像操作,添加背景图像 在网页上添加图像 Web页图像的格式通常有三种:GIF 、JPEG、PNG。 插入图像 “常用/图像” “选择图像源文件” (“文件系统”用来选择图形文件,“数据源”用来选择动态图像源文件) 设置图像的对齐方式 创建鼠标经过图像 “插入”菜单“图像对象”“鼠标经过图像”,3. 表格操作,表格是用于在 HTML 页上显示表格式数据以及对文本和图形进行布局的强有力的工具。 表格基本概念: 行、列、单元格 表格宽度: 宽度单位(百分比,像素) 单元格边距: 单元格间距:,插入表格 方法: 插入/表格 工具栏的表格按钮,注意:如果没有明确指定单元格间距和单元格边距的值,大多数浏览器按单元格边距都设置为 1,单元格间距设置为 2, 显示表格。 若要浏览器不显示表格中的边距和间距,必须在“单元格边距”和“单元格间距”设置为 0。,选中表格和表格元素(单元格、行、列、表格) 鼠标选择 表格元素: Ctrl+鼠标:不连续 拖动鼠标滑过:矩形区域 表格:鼠标点击表格边线 标签选择器:点击标签选择器中的标签 :单元格 :行 :表格,设置表格、单元格、行和列的属性,修改表格结构 “属性”检查器 “修改”菜单,嵌套表格 光标置于表格的某个单元格内,然后插入表格,就会在该单元格中嵌套一个表格,示例,示例1像素边框的表格,操作步骤, 1像素边框的表格 表格 边框:0 填充:0 间距:1 背景颜色:红色(#FF0000) 单元格:背景颜色:白色(#FFFFFF),示例用表格制作论坛界面,操作步骤:,1.页面属性:字体大小12pix 2.建立表格: 5行3列、宽度700pix、边框粗细1、其他设置为0. 第一列宽度100pix、第三列宽度150pix 合并单元格、拆分单元格 第一行背景颜色蓝色(#698cc3) 整个表格边框颜色蓝色(#698cc3) 如图:,3.插入图片输入文字 4、表格背景颜色:#FFFFCC 5.按ctrl键,选中所需单元格,用背景颜色中吸管选取插入图片的底色,将所选单元格的背景色变成鼠标点击处的颜色。 6.预览,4. 超链接操作,、超链接(hyperlink): 超级链接简称链接。是指从一个网页到另一个网页对象的链接关系。为了把百万数量级的Internet站点上众多分散的网页联系起来,构成一个整体,就必须在网页上加入链接。链接并不仅仅是网页与网页的链接,它还包括到图片、电子邮件、文档、媒体等的链接。 类型:文本、图像超链接、锚记链接、电子邮件链接、空链接 每个网页都有一个 惟一的地址,称为 统一资源定位器 (URL)。,2、链接路径 的表示方法: 绝对路径:提供所链接文档的完整URL。 http:/www.macromedia.com/support/dreamweaver/contents.html 文档相对路径:省略当前文档和所链接文档都相同的绝对URL部分,只提供不同的路径部分。 站点根目录相对路径:提供从站点文件夹到文档的路径。 例如 /support/dreamweaver/contents.html,相对路径 比如E:eshopindex.html链接到E:eshopbmaboutus.htm,可以把E:eshop去掉,只用bbsabout.htm。 假设一个站点的结构如下:,图5-1 站点结构,当要链接到与当前文档处于同一文件夹中的文档时,只需输入文件名。 比如要从 aboutus.htm 链接到 yewu.htm(两个文件在同一文件夹“bm”中,且目录深度相同),则其相对路径为yewu.htm。 当要链接到当前文档所在文件夹的子文件夹文档时,先要有子文件夹名称,然后跟符号“/”,在加文件名。 比如要从 index.html 链接到 yewu.htm(两个文件在同一文件夹“eshop”中,index.html处于父目录中,而yewu.htm处于子目录bm中),则其相对路径为bm/yewu.htm。 反过来,当要链接到当前文档所在文件夹的父文件夹的文档时,在文档名前要加“/”。 比如要从yewu.htm链接到index.html(两个文件在同一文件夹“eshop”中,index.html处于父目录中,而yewu.htm处于子目录bm中),则其相对路径为/ index.html。 当要链接到非同一目录的文档时,要先加“/”,后加文件夹名再加链接到的文件名。 比如要从 tupian.htm 链接到 aboutus.htm(两个文件在不同的目录中,tupian.htm在“album”目录中,aboutus.htm在“bm”目录中),则其相对路径为/bm/ aboutus.htm。,3、创建文本、图像超链接 一个文本超级链接只分配一个目标URL地址。 图像超级链接可以用两种方式分配目标RUL: 整个图像作为一个超级链接。 图像分为多个热点,用热点作为图像上的超级链接区域。,例如:在文件1.html中创建文本链接到text文件夹下的2.html.,指向文件按钮: 浏览文件按钮: 目标列表框: _blank 将链接的文档载入一个新的、未命名的浏览器窗口。 _parent 将链接的文档载入该链接所在框架的父框架或父窗口。 _self 将链接的文档载入链接所在的同一框架或窗口。此目标是默认的,所以通常不需要指定它。 _top 将链接的文档载入整个浏览器窗口,从而删除所有框架。,指向文件,浏览文件,目标列表框,4、命名锚记链接 命名锚记用于在文档中设置标记,这些标记通常放在文档的特定主题处或顶部,然后创建到这些命名锚记的链接。 创建到命名锚记的连接过程分两步: 创建命名锚记:将插入点置于要放置锚记的位置“插入”菜单“命名锚记”在“锚记名称”框中输入锚记名字单击“确定”。在插入点即出现一个锚记。 创建锚记链接:选定要添加链接的文字属性面板的“链接”框中输入“#”和锚记名字回车确认。,命名锚记:1,锚记链接,
网站客服QQ:2055934822
金锄头文库版权所有
经营许可证:蜀ICP备13022795号 | 川公网安备 51140202000112号