教你建立自己的网站

1、教你建立自己的网站 2网站 将大量网页放置在服务器中供Internet上的人浏览，就构成了一个网站。 网站是通过超链接将网页有机地组织在一起，使网页之间形成一种逻辑关系，便于浏览。 主页（首页） 主页通常是进入网站首先浏览到的网页，具有引导用户浏览整个网站内容的作用。 8/22/20222计算机网络应用基础163网站的主页 8/22/20223计算机网络应用基础 3个人网站 个人网站是指个人创建的网站，也叫个人主页。 网站是通过超链接将网页有机地组织在一起，使网页之间形成一种逻辑关系，便于浏览。 主页（首页） 主页通常是进入网站首先浏览到的网页，具有引导用户浏览整个网站内容的作用。 8/22/

2、20224计算机网络应用基础 二、网站的规划与发展策略 1网站的规划 规划内容包括： 网站的目的 网站的内容 网站的风格 8/22/20225计算机网络应用基础 （1）网站的目的 展示网页制作的水平，尝试建立网站的感觉。 展现多姿多彩的生活，以爱好结识网络朋友。 发挥网站技术特长，体验网络经营风险， 实现自我经营理念。 8/22/20226计算机网络应用基础 （2）网站的内容 在确定个人网站的主题和题材时，应该遵循以下原则： 主题小而精 题材为己所长 题材档次适宜 8/22/20227计算机网络应用基础 （3）网站的风格 网站的风格:指站点的整体形象给浏览者的综合感受。 这个“整体形象”包括站

3、点的标志、色彩、布局、浏览方式、交互性、文字、语气、内容价值和站点信誉等诸多因素。 要想使自己的网站有风格而且“与众不凡”，应该按下面的3个步骤进行： 第1步 确信风格是建立在有价值内容之上。 第2步 明确网站要给浏览者的综合印象。 第3步 在明确网站的综合印象后，开始努力建立和加强这种印象并付诸实施。 8/22/20228计算机网络应用基础 2网站发展策略 网站发展的3个阶段： 第一阶段是建站阶段 第二阶段是生存阶段 第三阶段是跨越阶段 针对3个阶段的发展策略 ： 第一阶段 技术策略 第二阶段 差异化策略 第三阶段 是聚焦策略 8/22/20229计算机网络应用基础 三、网站的组建方法与步骤

4、 1网站的组建方法 （1）空间租赁 申请和租赁ISP（Internet Server Provider互联网服务提供商）空间。 （2）主机托管 将自己的服务器交给ISP维护、管理 。 （3）申请专线 向ISP申请一条专门的数据线路（专线），自己架设服务器，自己管理 。 8/22/202210计算机网络应用基础 2网站的组建步骤 （1）构建网站框架 （2）设计网页版面 （3）创建模板 （4）制作主页 （5）制作普通网页 （6）添加更多功能 8/22/202211计算机网络应用基础 四、网站的发布 1申请空间 申请空间就是向提供Internet服务器的网站申请一个个人主页空间。 申请个人主页空间的

5、步骤如下： （1）注册新用户 （2）申请空间 8/22/202212计算机网络应用基础 2上传网站 上传网站就是将自己制作的网站上传到所申请的空间里 。 上传网站的方法 ： 采用FTP软件 借助网页制作工具软件的上传功能 使用空间所在网站提供的FTP上传服务 8/22/202213计算机网络应用基础 3宣传网站 （1）直接做广告 （2）友情链接 （3）在搜索网站登记站点 （4）利用新闻组或BBS发信息 （5）发电子邮件 8/22/202214计算机网络应用基础10.2 网页制作 内容： FrontPage简介 HTML基础知识 简单网页制作 8/22/202215计算机网络应用基础 一、Fro

6、ntPage简介 1FrontPage的界面 主窗口工作区视图栏8/22/202216计算机网络应用基础 2FrontPage的网页视图 FrontPage的网页视图包含“普通”、“HTML”和“预览”3个选项卡 。 3在FrontPage中输入HTML语言编写的脚本代码 输入步骤是： 第1步 单击“文件”菜单，选择“新建”中的“网页”命令。 第2步 在“新建”对话框的“常规”选项卡中，选择“普通网页”图标，并单击“确定”按钮。 第3步 在网页视图中，选择“HTML”选项卡按钮，切换到“HTML”选项卡。 8/22/202217计算机网络应用基础 第4步 输入HTML脚本代码。 第5步 切换到

7、“预览”选项卡查看网页设计效果。 第6步 单击“文件”菜单，选择“保存文件”命令。 第7步 在“另存为”对话框中输入网页的文件名，单击“保存”按钮。 网页文件的扩展名是htm8/22/202218计算机网络应用基础 二、HTML基础知识 HTML（Hypertext Markup Language）的含义是超文本标记语言，是网页制作的基础，也是最基本的工具，使用其他任何工具制作的网页，最终都要以HTML方式进行存储。 1HTML脚本的基本结构 先观看 p304305对应 图10-7的HTML脚本 HTML是以标记来标示及排列对象的。 标记本身则以“”符号标识。 8/22/202219计算机网络

8、应用基础 今日消息 计算机网络应用基础经修订，再次出版！欢迎同学们使用！8/22/202220计算机网络应用基础图10-7 HTML脚本在IE浏览器中的显示效果 8/22/202221计算机网络应用基础 HTML脚本的基本结构：(1) HTML脚本都是以标记开头，标记结尾。(2) 在和标记之间是HTML的脚本内容，一般情况下它分为两部分：头部和主体。 头部 是由和标记的，其中包含了该HTML脚本的标题和说明信息（如编码方式、关键字、编辑软件、作者信息等）。主体 是由作为起始标记，作为结束标记，其中所包含的就是在浏览器中所看到的内容，包括文字、图片、动画等。8/22/202222计算机网络应用基

9、础 HTML脚本的基本结构： 网页标题 网页内容 8/22/202223计算机网络应用基础 2HTML脚本中的标记 （1）标记有4种语法格式： 内容 内容 不同的标记采用不同的语法格式，其中的参数要加引号。8/22/202224计算机网络应用基础 （2）常用的标记 格式： 内容其间的内容就是一个HTML的脚本 格式： 内容 HTML脚本的头部标记，其间的内容通常嵌套和标记。8/22/202225计算机网络应用基础 格式： 内容 HTML脚本主体内容的标识标记，所有的内容都嵌套在这对标记中。8/22/202226计算机网络应用基础 可以包含很多属性，这些属性对其间有关的对象起作用。它的属性见下表

10、：属性描述background=图像文件定位 设置页面背景图像文件 text=颜色 设置页面文本文字颜色，默认为黑色 link=颜色 设置页面尚未被访问过的超链接文字颜色，默认为蓝色 vlink=颜色 设置页面已被访问过的超链接文字的颜色，默认为蓝色 alink=颜色 设置页面超链接文字在访问瞬间的颜色，默认为蓝色 8/22/202227计算机网络应用基础 颜色: 可以用数字代码表示 形式为: #RRGGBB 如 text=#ff0000 也可以用英文单词表示 如 text=red 8/22/202228计算机网络应用基础将图10-7的HTML脚本中的 换为 图10-8 给网页页面加背景图像8

11、/22/202229计算机网络应用基础 格式： 内容 其间的内容是文字，是网页的标题。标题将显示在浏览器窗口的标题栏内。 如：上面脚本中的“今日消息” 是用来描述HTML脚本本身信息的标记，在网页中不出现。8/22/202230计算机网络应用基础 格式1： 单独的表示段落结束，是段落标记。 格式2： 内容 表示其间的文字是同一个段落，浏览器会根据窗口的宽度自动将一个段落分行。 它可以包含align属性，用于指定段落的对齐方式，默认为左对齐。 比如“”，表示段落居中显示。8/22/202231计算机网络应用基础 只能单独使用，表示在页面上加个回车，即用于文本的分段。与分段不同的是：用所分的各个段

12、实际上仍属于一个段落，且的段间距与行间距相同。8/22/202232计算机网络应用基础 格式： 内容 是文字标记，用于指明所包含文字的显示属性，如大小和颜色等。例： 计算机网络应用基础已经正式出版了！ 指明显示文字的方式是大小为5，颜色为红色。8/22/202233计算机网络应用基础 的属性见下表： 属 性描 述color=字体颜色设置文字颜色size=字号设置字号，取值范围17，1最小，7最大face=字体设置文字字体。文字是汉字，可以用汉字字体名，如：宋体、隶书等；文字是英文，则可以用英文字体名，如：Times New Roman等8/22/202234计算机网络应用基础 格式： 是在页面

13、上划水平线的标记。 属性width用于指定水平线的长度，它的值可以是百分比，表示水平线的长度相对于窗口宽度的比例；也可以是数字，表示像素数。 属性color用来设置线条的颜色，默认为灰色。 例： 在页面上绘制一条长为窗口宽度85%的水平线。 8/22/202235计算机网络应用基础图10-9 页面添加水平线示例 8/22/202236计算机网络应用基础 格式： 图像标记，在网页中插入一幅图像。它只是指明一幅图像在网络上的位置（URL地址），而不是把这幅图像的所有数据信息包含进来。通常采用JPG和GIF格式的图像。8/22/202237计算机网络应用基础 的属性：属性描述src=图像文件定位设置

14、插入图像的来源位置，路径可以是相对的，也可以是绝对的，这是不可缺少的属性 alt=图像说明 对这个图像的说明align=文本对齐方式默认情况下，文本放在图像的下面（bottom），也可以用middle、top参数设置文本位置 border=边宽厚度 设置图像边宽厚度，参数为数字，即像素数 width=图像宽度 设置图像宽度，参数可以是数字，即像素数，也可以是相对于窗口宽度的百分比 height=图像高度 设置图像高度，参数可以是数字，即像素数，也可以是相对于窗口高度的百分比 8/22/202238计算机网络应用基础例： 表示在页面中插入_image001.jpg图像文件，它的 说明是“水果与蔬

15、菜”，图像的宽是575，高是260 。8/22/202239计算机网络应用基础 超链接标记，是HTML页面的核心标记，通过它将图像或文字加上超链接。 URL（Uniform Resource Locator）即统一资源定位器，是文件名的扩展，用来指定被链接对象的位置和名称。使用格式有3种，见下表： 格 式说 明目标文本链接文本页内链接链接文本目标文本其他页面的页内链接链接内容链接到一个文件，可以是HTML文件，也可以是图像文件或其他8/22/202240计算机网络应用基础例：在图10-9页面的脚本中添加3条代码： 图片显示 将“图片显示”四个字超链接到页面3.htm上。 友情链接： 搜狐网站

16、将“搜狐网站”四个字超链接到搜狐的主页上。 效果见下图： 8/22/202241计算机网络应用基础图10-11 带超链接的页面示例 8/22/202242计算机网络应用基础 格式： 内容 移动字幕标记，其间的内容将在页面上移动显示。的属性见下表： 8/22/202243计算机网络应用基础 标记的属性 属 性描 述bgcolor=背景颜色设置字幕的背景颜色width=字幕宽度设置字幕的宽度，可以是数字（像素数），也可以是相对于窗口宽度的百分比height=字幕高度设置字幕的高度，只可以是数字（像素数）direction=移动方向参数值为left或right，表示字幕从右向左或从左向右移动，默认是

17、leftloop=循环次数设置字幕移动的循环次数，若为非正的数字则无限循环，默认是无限循环behavior=移动方式参数值为scroll或alternate，表示单向滚动或来回移动，默认是scroll8/22/202244计算机网络应用基础例： 在图10-11页面的脚本中添加移动字幕的脚本代码 我们竭诚为大家服务！ 移动字幕的高度是20个像素数，宽度是窗口宽度的90%，背景是桔黄色；移动字幕的文字是“我们竭诚为大家服务！”，字体是华文彩云，颜色是青蓝，字号是5。 效果见下图： 8/22/202245计算机网络应用基础图10-12 添加有移动字幕的页面示例 8/22/202246计算机网络应用基

18、础 、和 格式：内容 内容内容 这3个是对其间的文字进行修饰的标记。第一个是对文字加粗，第二个是将文字变斜体，第三个是给文字加下划线。 8/22/202247计算机网络应用基础 三、简单网页制作 用HTML语言制作一张简单的网页。 页面标题 两个栏目区 移动字幕 1网页的内容 （1）页面标题 页面的标题是“我网上的家”，居中显示在页面的正上方。在其下方配有一条下划线。显示在标题栏的网页标题也是“我网上的家”。8/22/202248计算机网络应用基础 （2）两个栏目区 第一个栏目是“诗词欣赏”，位于页面标题的下方、页面的中央，放有一首唐代诗人贺知章的诗，诗名“回乡偶书”，在此栏目的上下各加了一条水平线。 第二个栏目是功能服务栏目，有两个功能：新闻浏览、查看邮箱。新闻浏览中有两个超链接，分别与搜狐网站、163网站相链接；查看邮箱是超链接到了126电子邮箱网站的主页邮箱登录页面。 （3）移动字幕 移动字幕有两条：第一条移动字幕的文字是“常回家来看看！”，第二条移动字幕的文字是“_二