教你建立自己的网站(ppt 56页).ppt

04 03 2020 计算机网络应用基础 1 第10章建立自己的网站 10 1网站建设概述 一 网站的概念 1 网页 网页就是在浏览器上看到的一页 网页也称为Web页 如下图所示 04 03 2020 计算机网络应用基础 2 2 网站将大量网页放置在服务器中供Internet上的人浏览 就构成了一个网站 网站是通过超链接将网页有机地组织在一起 使网页之间形成一种逻辑关系 便于浏览 主页 首页 主页通常是进入网站首先浏览到的网页 具有引导用户浏览整个网站内容的作用 04 03 2020 计算机网络应用基础 3 163网站的主页 04 03 2020 计算机网络应用基础 4 3 个人网站个人网站是指个人创建的网站 也叫个人主页 网站是通过超链接将网页有机地组织在一起 使网页之间形成一种逻辑关系 便于浏览 主页 首页 主页通常是进入网站首先浏览到的网页 具有引导用户浏览整个网站内容的作用 04 03 2020 计算机网络应用基础 5 二 网站的规划与发展策略 1 网站的规划 规划内容包括 网站的目的网站的内容网站的风格 04 03 2020 计算机网络应用基础 6 1 网站的目的 展示网页制作的水平 尝试建立网站的感觉 展现多姿多彩的生活 以爱好结识网络朋友 发挥网站技术特长 体验网络经营风险 实现自我经营理念 04 03 2020 计算机网络应用基础 7 2 网站的内容 在确定个人网站的主题和题材时 应该遵循以下原则 主题小而精题材为己所长题材档次适宜 04 03 2020 计算机网络应用基础 8 3 网站的风格 网站的风格 指站点的整体形象给浏览者的综合感受 这个 整体形象 包括站点的标志 色彩 布局 浏览方式 交互性 文字 语气 内容价值和站点信誉等诸多因素 要想使自己的网站有风格而且 与众不凡 应该按下面的3个步骤进行 第1步确信风格是建立在有价值内容之上 第2步明确网站要给浏览者的综合印象 第3步在明确网站的综合印象后 开始努力建立和加强这种印象并付诸实施 04 03 2020 计算机网络应用基础 9 2 网站发展策略 网站发展的3个阶段 第一阶段是建站阶段第二阶段是生存阶段第三阶段是跨越阶段 针对3个阶段的发展策略 第一阶段技术策略第二阶段差异化策略第三阶段是聚焦策略 04 03 2020 计算机网络应用基础 10 三 网站的组建方法与步骤 1 网站的组建方法 1 空间租赁申请和租赁ISP InternetServerProvider 互联网服务提供商 空间 2 主机托管将自己的服务器交给ISP维护 管理 3 申请专线向ISP申请一条专门的数据线路 专线 自己架设服务器 自己管理 04 03 2020 计算机网络应用基础 11 2 网站的组建步骤 1 构建网站框架 2 设计网页版面 3 创建模板 4 制作主页 5 制作普通网页 6 添加更多功能 04 03 2020 计算机网络应用基础 12 四 网站的发布 1 申请空间申请空间就是向提供Internet服务器的网站申请一个个人主页空间 申请个人主页空间的步骤如下 1 注册新用户 2 申请空间 04 03 2020 计算机网络应用基础 13 2 上传网站上传网站就是将自己制作的网站上传到所申请的空间里 上传网站的方法 采用FTP软件 借助网页制作工具软件的上传功能 使用空间所在网站提供的FTP上传服务 04 03 2020 计算机网络应用基础 14 3 宣传网站 1 直接做广告 2 友情链接 3 在搜索网站登记站点 4 利用新闻组或BBS发信息 5 发电子邮件 04 03 2020 计算机网络应用基础 15 10 2网页制作 内容 FrontPage简介 HTML基础知识 简单网页制作 04 03 2020 计算机网络应用基础 16 一 FrontPage简介 1 FrontPage的界面 04 03 2020 计算机网络应用基础 17 2 FrontPage的网页视图 FrontPage的网页视图包含 普通 HTML 和 预览 3个选项卡 3 在FrontPage中输入HTML语言编写的脚本代码 输入步骤是 第1步单击 文件 菜单 选择 新建 中的 网页 命令 第2步在 新建 对话框的 常规 选项卡中 选择 普通网页 图标 并单击 确定 按钮 第3步在网页视图中 选择 HTML 选项卡按钮 切换到 HTML 选项卡 04 03 2020 计算机网络应用基础 18 第4步输入HTML脚本代码 第5步切换到 预览 选项卡查看网页设计效果 第6步单击 文件 菜单 选择 保存文件 命令 第7步在 另存为 对话框中输入网页的文件名 单击 保存 按钮 网页文件的扩展名是htm 04 03 2020 计算机网络应用基础 19 二 HTML基础知识 HTML HypertextMarkupLanguage 的含义是超文本标记语言 是网页制作的基础 也是最基本的工具 使用其他任何工具制作的网页 最终都要以HTML方式进行存储 1 HTML脚本的基本结构 先观看p304 305对应图10 7的HTML脚本 HTML是以标记来标示及排列对象的 标记本身则以 符号标识 04 03 2020 计算机网络应用基础 20 今日消息 计算机网络应用基础 经修订 再次出版 欢迎同学们使用 04 03 2020 计算机网络应用基础 21 图10 7HTML脚本在IE浏览器中的显示效果 04 03 2020 计算机网络应用基础 22 HTML脚本的基本结构 1 HTML脚本都是以标记开头 标记结尾 2 在和标记之间是HTML的脚本内容 一般情况下它分为两部分 头部和主体 头部是由和标记的 其中包含了该HTML脚本的标题和说明信息 如编码方式 关键字 编辑软件 作者信息等 主体是由作为起始标记 作为结束标记 其中所包含的就是在浏览器中所看到的内容 包括文字 图片 动画等 04 03 2020 计算机网络应用基础 23 HTML脚本的基本结构 网页标题 网页内容 04 03 2020 计算机网络应用基础 24 2 HTML脚本中的标记 1 标记有4种语法格式 内容内容 不同的标记采用不同的语法格式 其中的参数要加引号 04 03 2020 计算机网络应用基础 25 2 常用的标记 格式 内容其间的内容就是一个HTML的脚本 格式 内容HTML脚本的头部标记 其间的内容通常嵌套和标记 04 03 2020 计算机网络应用基础 26 格式 内容HTML脚本主体内容的标识标记 所有的内容都嵌套在这对标记中 04 03 2020 计算机网络应用基础 27 可以包含很多属性 这些属性对其间有关的对象起作用 它的属性见下表 04 03 2020 计算机网络应用基础 28 颜色 可以用数字代码表示形式为 RRGGBB 如text ff0000 也可以用英文单词表示如text red 04 03 2020 计算机网络应用基础 29 将图10 7的HTML脚本中的换为 图10 8给网页页面加背景图像 04 03 2020 计算机网络应用基础 30 格式 内容其间的内容是文字 是网页的标题 标题将显示在浏览器窗口的标题栏内 如 上面脚本中的 今日消息 是用来描述HTML脚本本身信息的标记 在网页中不出现 04 03 2020 计算机网络应用基础 31 格式1 单独的表示段落结束 是段落标记 格式2 内容表示其间的文字是同一个段落 浏览器会根据窗口的宽度自动将一个段落分行 它可以包含align属性 用于指定段落的对齐方式 默认为左对齐 比如 表示段落居中显示 04 03 2020 计算机网络应用基础 32 只能单独使用 表示在页面上加个回车 即用于文本的分段 与分段不同的是 用所分的各个段实际上仍属于一个段落 且的段间距与行间距相同 04 03 2020 计算机网络应用基础 33 格式 内容是文字标记 用于指明所包含文字的显示属性 如大小和颜色等 例 计算机网络应用基础 已经正式出版了 指明显示文字的方式是大小为5 颜色为红色 04 03 2020 计算机网络应用基础 34 的属性见下表 04 03 2020 计算机网络应用基础 35 格式 是在页面上划水平线的标记 属性width用于指定水平线的长度 它的值可以是百分比 表示水平线的长度相对于窗口宽度的比例 也可以是数字 表示像素数 属性color用来设置线条的颜色 默认为灰色 例 在页面上绘制一条长为窗口宽度85 的水平线 04 03 2020 计算机网络应用基础 36 图10 9页面添加水平线示例 04 03 2020 计算机网络应用基础 37 格式 图像标记 在网页中插入一幅图像 它只是指明一幅图像在网络上的位置 URL地址 而不是把这幅图像的所有数据信息包含进来 通常采用JPG和GIF格式的图像 04 03 2020 计算机网络应用基础 38 的属性 04 03 2020 计算机网络应用基础 39 例 表示在页面中插入 image001 jpg图像文件 它的说明是 水果与蔬菜 图像的宽是575 高是260 04 03 2020 计算机网络应用基础 40 超链接标记 是HTML页面的核心标记 通过它将图像或文字加上超链接 URL UniformResourceLocator 即统一资源定位器 是文件名的扩展 用来指定被链接对象的位置和名称 使用格式有3种 见下表 04 03 2020 计算机网络应用基础 41 例 在图10 9页面的脚本中添加3条代码 图片显示 将 图片显示 四个字超链接到页面page10 3 htm上 友情链接 搜狐网站 将 搜狐网站 四个字超链接到搜狐的主页上 效果见下图 04 03 2020 计算机网络应用基础 42 图10 11带超链接的页面示例 04 03 2020 计算机网络应用基础 43 格式 内容移动字幕标记 其间的内容将在页面上移动显示 的属性见下表 04 03 2020 计算机网络应用基础 44 04 03 2020 计算机网络应用基础 45 例 在图10 11页面的脚本中添加移动字幕的脚本代码 我们竭诚为大家服务 移动字幕的高度是20个像素数 宽度是窗口宽度的90 背景是桔黄色 移动字幕的文字是 我们竭诚为大家服务 字体是华文彩云 颜色是青蓝 字号是5 效果见下图 04 03 2020 计算机网络应用基础 46 图10 12添加有移动字幕的页面示例 04 03 2020 计算机网络应用基础 47 和 格式 内容内容内容 这3个是对其间的文字进行修饰的标记 第一个是对文字加粗 第二个是将文字变斜体 第三个是给文字加下划线 04 03 2020 计算机网络应用基础 48 三 简单网页制作 用HTML语言制作一张简单的网页 页面标题两个栏目区移动字幕 1 网页的内容 1 页面标题 页面的标题是 我网上的家 居中显示在页面的正上方 在其下方配有一条下划线 显示在标题栏的网页标题也是 我网上的家 04 03 2020 计算机网络应用基础 49 2 两个栏目区 第一个栏目是 诗词欣赏 位于页面标题的下方 页面的中央 放有一首唐代诗人贺知章的诗 诗名 回乡偶书 在此栏目的上下各加了一条水平线 第二个栏目是功能服务栏目 有两个功能 新闻浏览 查看邮箱 新闻浏览中有两个超链接 分别与搜狐网站 163网站相链接 查看邮箱是超链接到了126电子邮箱网站的主页 邮箱登录页面 3 移动字幕 移动字幕有两条 第一条移动字幕的文字是 常回家来看看 第二条移动字幕的文字是 二 五年六月 04 03 2020 计算机网络应用基础 50 2 网页的脚本代码 见教材p311 312 提示 为了使网页在上传或复制到其他计算机后都不因为文件路径而出问题 网页中访问其他文件都采用相对路径 而且还将整个网站的文件都存放在一个文件夹及其子文件夹中 一些标记的width height等属性的参数值既可以取相对值 相对于浏览器窗口的百分比 又可以取实际值 像素数 但一般情况选用相对值 这样可以保持合理的比例 04 03 2020 计算机网络应用基础 51 图10 13一张用HTML语言制作的简单网页 04 03 2020 计算机网络应用基础 52 10 3网站的管理与维护 一 网站的信息服务管理 包括 1 留言簿的管理2 电子邮件的处理3 投票调查栏目的管理4 BBS的管理5 信息资源的管理 04 03 2020 计算机网络应用基础 53 二 网站的数据维护 网站的数据维护实际上就是更新网页文件 1 更新网页的方法 1 上传文件更新 2 上传模板更新 3 使用库更新 2 网页更新要做到 1 定期更新新闻性栏目 2 时常检查相关链接 3 用户调查