图像的基础及多媒体世界大学城概要PPT课件.ppt

第2章建立站点 本章要点 网站草图的设计站点的建立添加网页基本元素超级链接基础 2 1站点概述和网站的整体规划 2 1 1站点概述2 1 2设计草图 2 1 1站点概述 1 站点的定义2 本地站点和远端站点3 站点根目录4 Internet服务程序 1 站点的定义 站点是存放网站上所有文档和文件的地方 是一系列文档的组合 将各种信息制作成网页 以超级链接的形式组织起来 利用浏览器用户可以从一个文档跳转到另一个文档 并通过这样的操作实现对整个网站的浏览 2 本地站点和远端站点 本地站点对于浏览网页的用户来说 他们所使用的计算机被称为本地计算机 我们把存放在本地计算机上的站点和相关文档称为本地站点 远端站点在因特网上浏览的各种网站 实际上是用浏览器打开存放在远程服务器上的相关站点和文档 我们把这样的站点和相关文档称为远端站点 3 站点根目录 若站点文件较多 通常在站点根目录中创建几个子文件夹 将所有相关文件分门别类存放在子文件夹中 若站点的文件较少 只用一个站点根目录即可 网站上所有的资源都保存在站点内 站点的文件夹通常包括 gif images sound video css file 4 Internet服务程序 在本地机上安装Internet服务程序 可以将本地计算机与Internet服务器合二为一 不需要连入Internet就能测试站点 对于ASP而言 微软公司的IIS是必不可少的Internet服务程序 2 1 2设计草图 制作主页前需要总体规划一下网站的结构 根据原始素材来确定网站需要制作的内容 在网站草图中的每一个模块下还可以再扩充内容 网站的首页文件名通常是 index html或default html 通过设置也可以改为其它文件名 例如 小慧的作品很多 需要分类 在制作网站前先画出网站的草图 2 2站点的建立 1 站点建立的步骤2 文件夹的建立3 网页文件的创建 1 站点建立的步骤 2 文件夹的建立 3 网页文件的创建 2 3页面的架构 2 3 1视图概述2 3 2表格的简介2 3 3图像基本操作简介2 3 4文本的概述2 3 5水平线和日期2 3 6背景图片和背景音乐 2 3 1视图概述 代码 显示代码视图 可以直接编辑网页源代码 设计 显示设计视图 能方便我们美化网页和合理地布局网页 拆分 显示代码视图和设计视图 让我们能够更好地理解源代码 提高编程能力 2 3 2表格的简介 表格的基本属性如下 行数 确定行数 列数 确定列数 表格宽度 设置表格的宽度 有 像素 和 百分比 两个选项 一般选择 像素 边框粗细 以 像素 为单位设置表格边框的宽度 输入数字0就表示没有边框 单元格边距 指单元格内容和单元格边框之间的距离 以 像素 为单位 单元格间距 指单元格和单元格之间的距离 以 像素 为单位 页眉 有4种模式可以选择 辅助功能 可以输入表格的标题 选择标题的对齐模式 输入摘要等信息 例如 将行数和列数都设为2 表格宽度设为600 单元格边距和单元格间距都设为30 其他不变 设置完后单击 确定 按钮 在第一个单元格内输入 文字 二字 就可以看到表格的效果 2 3 3图像基本操作简介 向表格中插入图片的方法方法一 选择 logo gif 文件 按住鼠标左键不放 将其拖曳到单元格中 方法二 将光标移到要插入图像的位置 在 常用 工具栏中 单击 图像 按钮 方法三 执行 插入 图像 命令 在弹出 选择图像源文件 对话框中选择 logo gif 文件 例如 将logo gif插入表格的第1行第1列的单元格中 2 3 4文本的概述 1 输入网页的标题2 插入特殊文本字符3 文本简单的排版4 设置字体 颜色 大小 对齐方式和样式5 页面属性 1 输入网页的标题 首先给网页加上一个标题 小慧的家 2 插入特殊文本字符 切换到 插入 工具栏的 文本 项 单击 字符 按钮右边的下拉按钮进行选择 单击 回车换行符 右侧的下拉按钮 在弹出的菜单中选择 其他字符 命令 在弹出的 插入其他字符 对话框中选择特殊字符 选择一种中文输入法 右击小键盘图标 选择菜单中的 特殊符号 在弹出的特殊符号键盘上单击特殊符号即可实现插入 3 文本简单的排版 一 解决行间距过大的方法 单击文本工具栏中 字符 按钮右边的小三角按钮 在弹出的菜单中选择的 换行符 命令 或者将光标移动到要换行的位置 执行 插入 HTML 特殊字符 换行符 命令 可以使用Shift Enter快捷键 3 文本简单的排版 二 解决文章开头空两格的方法 单击 字符 按钮右边的小三角按钮 在弹出的菜单中选择 不换行空格 命令 或者执行 插入 HTML 特殊字符 不换行空格 命令 也可以使用快捷键Ctrl Shift Space 说明 每执行一次该命令 只空半个汉字的位置 还可以选择一种中文输入法 将半角状态切换到全角状态 按一下空格就可以空出一个汉字的位置 4 设置字体 颜色 大小 对齐方式和样式 选中网页文件中的文字 通过调整 属性 面板中各个参数可以改变文字的字体 颜色 大小和对齐方式 例如 设置 小小故事 给予 标题的样式 5 页面属性 正文的文字可以通过 页面属性 来完成设置 执行主菜单下 修改 页面属性 命令 打开 页面属性 对话框进行设置 或者单击 属性 面板上的 页面属性 按钮 打开 页面属性 对话框进行设置 例如 将 页面字体 设定为宋体 大小 设定为16像素 文本颜色 设定为蓝色 将 左边距 和 右边距 都设定为20像素 上边距 和 下边距 都设定为0像素 2 3 5水平线和日期 插入水平线执行 插入 HTML 水平线 命令 可以在编辑页面中插入一个水平线 插入日期执行 插入 日期 命令 或者单击 常用 工具栏上的日期按钮 在弹出的 插入日期 对话框中进行设置 2 3 6背景图片和背景音乐 插入背景图片在 页面属性 对话框的 外观 分类中 单击 背景图像 后面的 浏览 按钮 选择 images 目录下的 back gif 文件 单击 确定 按钮即可插入插入背景图片 插入背景音乐切换到代码视图 在与之间加入即可 loop 1 表示无限循环 2 4超级链接简介 2 4 1URL概述2 4 2超级链接2 4 3路径 2 4 1URL概述 URL是UniformResoureLocator的缩写 中文意思是 统一资源定位器 指WWW网页的地址 一个完整的URL由以下几个部分组成 资源类型 主机名 子目录 可选 文件名 可选 2 4 2超级链接 超级链接是 超文本链接 的缩略语 它提供了通过单击超级链接点将用户从WWW文档某一部分连接到不同文档或同一文档的其他部分 可以迅速从服务器的某一页转到另一页 也可以转到其他服务器页 MicrosoftInternetExplorer是一个Web浏览器 它可以搜索 查看和下载因特网上的各种信息 2 4 3路径 1 绝对路径2 相对路径 1 绝对路径 绝对路径是包含服务器协议的完全路径 是一种与源地址文件无关的路径形式 URL例如 例如 back gif指定的就是当前文件夹内的图片文档 back gif指定的则是当前文件夹上级目录中的图片文档 而images back gif则指定了当前文件夹 images 中的图片文档 2