第2章 创建“我爱旅游”网页

第2章创建“我爱旅游”网页,2014.11,网页设计与制作,第2章创建“我爱旅游”网页,网页设计与制作,本章要点,本章主要通过一个简单的网页制作实例来说明如何创建与编辑网络站点，建立与设置网页文件，申请主页空间与发布网站。创建本地站点创建网页文件夹与文件制作网页建立超级链接保存完整的Web站点申请主页空间与注册域名上传网页与更新网站,网页设计与制作,2.1创建“我爱旅游”站点,设置站点存储位置,2.1.1,操作实例2-1在C盘建立本地站点文件夹myweb操作步骤：在桌面双击打开“我的电脑”窗口。在“我的电脑”窗口中双击打开用于存储站点的硬盘驱动器C。使用“文件”菜单中的“新建”、“文件夹”选项，在C盘建立一个新文件夹myweb。如下图所示。,网页设计与制作,2.1创建“我爱旅游”站点,设置站点存储位置,2.1.1,网页设计与制作,2.1创建“我爱旅游”站点,建立Dreamweaver站点,操作实例2-2建立名称为“我爱旅游”的站点操作步骤：启动Dreamweaver工作窗口。启动“管理站点”对话框。在“站点”菜单选择“管理站点”选项，弹出“管理站点”对话框。,2.1.2,网页设计与制作,2.1创建“我爱旅游”站点,建立Dreamweaver站点,2.1.2,启动“站点设置对象”对话框。单击“新建站点”按钮，选择“站点”选项，进入“站点设置对象”对话框。设置站点信息。站点名称：输入“我爱旅游”。通过已定义的站点名称，可以直接进入定义为本地站点的文件夹；站点名称将显示在“文件”面板中。本地站点文件夹：输入“C:myweb”（或单击浏览按钮，选择“C：myweb”），作为本地站点所使用的文件夹。高级设置-本地信息-默认图像文件夹文本框中输入“C:mywebimage”，作为本地站点图像所使用的文件夹。高级设置-Spry中输入“C:mywebSpryAssets”，作为本地站点Spry资源所存储的文件夹。WebURL：输入本网站所使用的网址，网页上传后，用户可使用此网址访问本网站。缓存：选中“启用缓存”，当用户移动、重命名或删除此网址的文件时，可以提高链接更新的速度。,网页设计与制作,2.1创建“我爱旅游”站点,建立站点文件夹,2.1.3,网页设计与制作,2.1创建“我爱旅游”站点,操作实例2-3在“我爱旅游”站点建立子文件夹操作步骤：在“我爱旅游”站点窗口，选中“C：myweb”文件夹，单击鼠标右键，在快捷菜单中选择“新建文件夹”选项。输入文件夹名“image”，此文件夹用于存放图像文件。参照步骤，依次建立文件夹“swf”（用于存放Flash动画）、“html”（用于存放非首页的其他网页）、“music”（用于存放音乐文件）。,网页设计与制作,2.1创建“我爱旅游”站点,建立网页新文件,2.1.4,操作实例2-4在“我爱旅游”站点中建立网页新文件操作步骤：在“我爱旅游”站点窗口，首先选中“C：myweb”文件夹，然后在“文件”菜单选择“文件”、“新建文件”选项。输入主页文件名“index.html”。选中“html”文件夹，在“文件”菜单中选择“文件”、“新建文件”选项，建立网页文件wdzj.html（我的足迹）。参照步骤，分别建立网页文件blyx.html（柏林印象）、blzl.html（巴黎之旅）、bjmy.html（北京漫游）、dzxc.html（电子相册）、lyb.html（留言板）。,网页设计与制作,2.1创建“我爱旅游”站点,建立网页新文件,2.1.4,网页设计与制作,2.1创建“我爱旅游”站点,建立网页新文件,2.1.4,站点中的文件与文件夹的移动、复制、删除等操作，与Windows资源管理器的操作基本相同。例如，可以在站点文件夹采用直接拖动的方式移动文件或文件夹；选中文件或文件夹后，单击右键，在快捷菜单中选择“编辑”选项，可以完成删除、重命名、复制、剪切、粘贴等操作。,网页设计与制作,2.1创建“我爱旅游”站点,打开站点窗口,2.1.5,对于已经建立好的站点，在每次使用之前，应首先打开该站点窗口。操作实例2-5打开“我爱旅游”站点窗口操作步骤：方法一：启动Dreamweaver文档窗口，选择“站点”菜单的“管理站点”选项，进入对话框，选中“我爱旅游”，单击“完成”按钮即可打开相应的站点。方法二：在“文件”窗口，单击“站点选择”下拉列表，选择“我爱旅游”，即可打开相应的站点。注意：当关闭站点窗口后，站点信息将自动显示在“文件”面板上。,网页设计与制作,2.2制作“我爱旅游”网页,创建“我爱旅游”本地站点之后，即可开始制作网站内容。本节将制作“我爱旅游”网站的主页。图2-7所示的“我爱旅游”主页，可以划分为LOGO、导航栏，标题广告栏，水平分隔线，日期，文字域、图像域，版权等六个部分。,网页设计与制作,2.2制作“我爱旅游”网页,设置LOGO和导航栏,2.2.1,操作实例2-6打开“我爱旅游”主页操作步骤方法一：启动Dreamweaver。在“打开网页”的界面，单击“打开”选项，弹出“打开”对话框。在“查找范围”中，选择网页所在的文件夹，然后选中指定文件。例如，打开myweb文件夹下index.html文件。单击“打开”按钮，打开网页文件并进入Dreamweaver窗口。方法二：启动Dreamweaver，在文件窗口选择“站点-我爱旅游”。双击打开需要制作的网页文件。例如，双击打开主页文件index.html。此时主页是一个空白页。,网页设计与制作,2.2制作“我爱旅游”网页,插入表格为主页布局,2.2.1,操作实例2-7插入表格为主页布局“我爱旅游”主页，可以划分为六行，其中第五行又划分为三个部分。因此，可以采用“六行三列”的表格形式布局网页。操作步骤：1.打开“表格”对话框。方法一：在“插入”菜单选择“表格”选项，弹出“表格”对话框。方法二：按快捷键Ctrl+F2打开“常用”工具栏，选择“表格”选项。2.设置表格在“表格”对话框，设置“行数”为6，“列数”为3，“宽度”为1008，单位为“像素”。单击“确定”按钮，插入表格。此时表格处于选中状态，拖动控点（黑点）可以调整表格的大小。选中表格，在窗口下方的“属性”面板，可以设置或改变表格属性。例如，设置表格的边框为0。选中表格某列，在窗口下方的“列属性”面板，可以设置或改变列属性，也可以直接用鼠标拖动的方式调整列的大小。,网页设计与制作,2.2制作“我爱旅游”网页,插入表格为主页布局,2.2.1,操作实例2-7插入表格为主页布局“我爱旅游”主页，可以划分为六行，其中第五行又划分为三个部分。因此，可以采用“六行三列”的表格形式布局网页。操作步骤：1.打开“表格”对话框。方法一：在“插入”菜单选择“表格”选项，弹出“表格”对话框。方法二：按快捷键Ctrl+F2打开“常用”工具栏，选择“表格”选项。2.设置表格在“表格”对话框，设置“行数”为6，“列数”为3，“宽度”为1008，单位为“像素”。单击“确定”按钮，插入表格。此时表格处于选中状态，拖动控点（黑点）可以调整表格的大小。选中表格，在窗口下方的“属性”面板，可以设置或改变表格属性。例如，设置表格的边框为0。选中表格某列，在窗口下方的“列属性”面板，可以设置或改变列属性，也可以直接用鼠标拖动的方式调整列的大小。,网页设计与制作,2.2制作“我爱旅游”网页,插入表格为主页布局,2.2.1,网页设计与制作,2.2制作“我爱旅游”网页,插入图片添加LOGO和导航栏,2.2.1,操作实例2-8插入图片添加LOGO和导航栏利用布局表格第一行第一列插入LOGO图像；将布局表格第一行第二、三个单元格合并后，制作导航栏。插入LOGO。在表格的第一个单元格内单击鼠标，设置插入点，单击“常用”工具栏的“图像”按钮，进入“选择图像源文件”对话框，选择“image”文件夹，选中LOGO图片“logo.jpg”。单击“确定”按钮，弹出“图像标签辅助功能属性”对话框，单击“取消”退出。,网页设计与制作,2.2制作“我爱旅游”网页,插入图片添加LOGO和导航栏,2.2.1,合并第一行第2、3个单元格。连续选中表格第一行的第2、3个单元格，在表格“属性”面板，单击“合并单元格”按钮。设置合并单元格的背景。将光标定位在合并后的单元格中，将窗口视图切换到“拆分”状态。在“代码”视图中，将合并单元格所对应的代码行改写为：。其中，background是背景图像设置属性；bg01.jpg是背景图片，存放在image文件夹。,网页设计与制作,2.2制作“我爱旅游”网页,插入图片添加LOGO和导航栏,2.2.1,设置导航栏文字格式。将光标定位在添加背景后的单元格中，在表格“属性”面板，单击“CSS”按钮，切换到文本设置面板。将“水平”设置为“居中对齐”、“字体”设置为“默认字体”、“大小”设置为“18px”、“颜色”设置为“#FFF”。在弹出的“新建CSS规则”对话框的“选择器名称”文本框输入“daohang”，单击“确定”按钮。,网页设计与制作,2.2制作“我爱旅游”网页,插入图片添加LOGO和导航栏,2.2.1,输入导航栏文字。将光标定位在已设置文字格式的单元格中，录入导航栏文字：首页|我的足迹|柏林印象|巴黎之旅|北京漫游|电子相册|留言板录入完成后，按快捷键Ctrl+S保存网页。按快捷键F12，预览生成的网页。,网页设计与制作,2.2制作“我爱旅游”网页,插入标题广告和水平线,2.2.2,操作实例2-9插入主页标题广告图片利用布局表格第二行插入主页标题图像。操作步骤：将布局表格第二行的3个单元格合并，将“高”设置为“281”。将光标定位在要插入标题广告的单元格中，在“插入”菜单中选择“图像”选项。进入“选择图像源文件”对话框。选择“image”文件夹，选择标题广告图像文件“banner01.jpg”。单击“确定”按钮。,网页设计与制作,2.2制作“我爱旅游”网页,插入标题广告和水平线,2.2.2,操作实例2-10插入水平分隔线操作步骤：将表格第三行的3个单元格合并。将光标定位到合并后的单元格中，在“常用”工具栏选择“水平线”选项。标题广告图像的下面出现一条水平分隔线，并处于选中状态。在水平线“属性”面板中可以设置其属性。,网页设计与制作,2.2制作“我爱旅游”网页,插入标题广告和水平线,2.2.2,设置分隔线的宽度与高度。分隔线宽度和高度的设置分为两种方式，一种是以“像素”为单位，可直接输入实际数值；另一种是以“%”为单位，即设置分隔线占浏览器打开窗口的百分比。插入垂直分隔线。通常插入的分隔线是水平的，当需要插入垂直分隔线时，可利用改变分隔线高度和宽度的方法达到目的。例如：将分隔线的高度设为100象素，宽度设为2象素，则水平分隔线变为了垂直分隔线。设置分隔线的对齐方式。对齐方式包括“默认”、“左对齐”、“居中对齐”、“右对齐”。对齐功能只有在分隔线的宽度小于浏览器窗口的宽度时才有效。为分隔线添加阴影效果。选中“阴影”复选框，可将原本实心的分隔线设为立体效果，即阴影效果。,网页设计与制作,2.2制作“我爱旅游”网页,2.2.3插入日期,2.2.3,操作实例2-11插入日期操作步骤：在第四行第1个单元格设置日期插入点。输入文字“时间：”在“常用”工具栏选择“日期”选项，弹出“插入日期”对话框。选择所需要的日期格式，例如，选择“年月日”格式。“星期格式”与“时间格式”不选。选中“储存时自动更新”选项。单击“确定”按钮。日期插入完毕。,将光标定位在日期单元格，将窗口切换到“拆分”状态。在“代码”视图将日期单元格所对应的代码行改写为“”，为日期单元格设置背景图line04.jpg。将第四行第2、3个单元格合并，重复步骤的方法设置相同的背景图片。按快捷键Ctrl+S保存网页，按快捷键F12，预览生成的网页。,网页设计与制作,2.2制作“我爱旅游”网页,设置网页内容,2.2.4,操作实例2-12布局“网页内容”区域操作步骤：将布局表格第五行的3个单元格合并，作为“网页内容”制作区域。将光标定位在合并后的单元格中，利用“表格”对话框，插入一个“行数”为1、“列”为3、“表格宽度”为100百分比，“边框粗细”为0的表格。“会员登录”区域“资讯”区域“图片”区域将光标定位在“会员登录”区域，在“属性”面板，设置“宽”为300，“垂直”为“顶端”。将光标定位在“资讯”区域，在“属性”面板中，将“垂直”设置为“顶端”。将光标定位在“图片”区域，在“属性”面板中，将“宽”设置为230，“垂直”设置为“顶端”。,网页设计与制作,2.2制作“我爱旅游”网页,设置网页内容,2.2.4,操作实例2-13插入表单，制作“会员登录”区域操作步骤：设置“会员登录”区域布局为“6行1列”的表格。单击“常用”工具栏的“表格”按钮，利用“表格”对话框插入“行数”为6、“列”为1、“表格宽度”为100百分比、“边框粗细”为1的表格。将光标定位在第一行单元格中，在表格“属性”面板设置“水平”为“居中对齐”，然后输入文字“会员登录”。将光标定位在第二行单元格中，在“插入”菜单选择“表单”、“文本字段”选项，进入“输入标签辅助功能属性”对话框，在“ID”文本框输入“user”、在“标签”文本框输入“用户名：”、“位置”选择“在表单项前”。单击“确定”按钮，在弹出的“是否添加表单标签”对话框中选择“是”。将光标定位在第三行单元格中，重复步骤的操作，在“ID”文本框输入“password”，在“标签”文本框输入“密码：”。,网页设计与制作,2.2制作“我爱旅游”网页,设置网页内容,2.2.4,网页设计与制作,2.2制作“我爱旅游”网页,设置网页内容,2.2.4,将光标定位在第四行单元格，在表格“属性”面板，“水平”选择“居中对齐”。在“插入”菜单选择“表单”、“按钮”选项。默认“输入标签辅助功能属性”对话框选项设置，单击“确定”按钮。在弹出的“是否添加表单标签”对话框选择“是”。将窗口视图切换到“拆分”视图，将按钮对应代码中的“提交”修改为“登录”。将光标定位在“登录”按钮后，重复步骤插入按钮的操作，将按钮对应代码中的“提交”修改为“注册”。光标定位在第五行单元格，在表格“属性”面板，“水平”选择“居中对齐”。在“插入”菜单选择“表单”、“选择（列表/菜单）”选项。默认“输入标签辅助功能属性”对话框选项设置，单击“确定”按钮。在“是否添加表单标签”对话框选择“是”。选中插入的“选择（列表/菜单）”，在“选择”属性面板，为该菜单输入惟一的名称“select1”，“类型”选择“菜单”。,网页设计与制作,2.2制作“我爱旅游”网页,设置网页内容,2.2.4,单击“列表值”按钮，弹出“列表值”对话框。单击“+”号，在“项目标签”和“值”下方输入“友情链接”，重复上述操作，依次输入图所示的文字与数字。单击“确定”按钮，关闭“列表值”对话框。将光标定位在第六行单元格中，重复步骤，插入“合作伙伴”列表。列表名称为“select2”，列表值为“北京旅游网报价北京旅游网1”、“北京泰国旅游暑期精品线路2”。按快捷键Ctrl+S保存网页。按快捷键F12，预览生成的网页。,网页设计与制作,2.2制作“我爱旅游”网页,设置网页内容,2.2.4,操作实例2-14制作“资讯”区域的导航栏操作步骤：光标定位在“资讯”区域，利用“表格”对话框插入一个“行数”为2、“列”为4、“表格宽度”为95百分比、“边框粗细”为0的表格。光标定位在第一行第1个单元格中，单击“常用”工具栏的“图像”按钮，在“选择图像源文件”对话框中，选择image文件夹中的图像文件dot01.jpg（旅游咨询），不输入替换文本。参照步骤，依次为第2、第3个单元格插入图像源文件dot02.jpg（国内旅行）、dot03.jpg（国外旅行）。光标定位在第4个单元格中，输入文本“更多”。按快捷键Ctrl+S保存网页。,网页设计与制作,2.2制作“我爱旅游”网页,设置网页内容,2.2.4,操作实例2-15制作资讯“列表”操作步骤：将表格第二行的4个单元格合并。光标定位在合并后的单元格中，输入图所示的多行文本，每输入完一行，按回车键换行。,网页设计与制作,2.2制作“我爱旅游”网页,设置网页内容,2.2.4,在“插入”面板中，选择“文本”选项，将工具栏切换成“文本工具栏”。选中要设置为“列表”形式的全部文本，单击“文本”工具栏中的“ul项目列表”。列表属性可以决定整个列表或选定列表项的外观。通过“格式”菜单中的“列表”、“属性”选项，进入“列表属性”对话框，可以改变项目列表或编号列表的编号形式与起始编号。按快捷键Ctrl+S保存网页。按快捷键F12，预览生成的网页。,网页设计与制作,2.2制作“我爱旅游”网页,设置网页内容,2.2.4,操作实例2-16插入图像本例请参照“操作步骤”和前面讲的方法，自行设计。操作步骤：光标定位在“图片”区域，利用“表格”对话框插入一个“行数”为3、“列”为1、“表格宽度”为100百分比、“边框粗细”为0的表格。说明：本步骤插入的是“外表格”，并设置为“无边框”。光标定位在第1行的单元格中，插入一个“行数”为2，“列”为1，“表格宽度”为100百分比，“边框粗细”为1的表格说明：本步骤插入的是“内表格”，并设置为“有边框”。光标定位在第1个单元格中，在image文件夹中找到图片“image01.jpg，并插入。光标定位在第2个单元格中，将image文件夹中的图片line01.jpg设为背景，然后输入“旅行日志”。重复步骤，完成“精彩瞬间”部分的制作。按快捷键Ctrl+S保存网页。按快捷键F12，预览生成的网页。,网页设计与制作,2.2制作“我爱旅游”网页,设置网页内容,2.2.4,操作实例2-17插入版权信息操作步骤：光标定位在网页最后一行的单元格中。合并行内所有单元格，在“属性”面板，“水平”设置为“居中对齐”。在单元格中输入文本“版权信息2010我爱旅游网联系我们”。按快捷键Ctrl+S保存网页。按快捷键F12，预览生成的网页。至此，网页的基本结构制作完成,网页设计与制作,2.2制作“我爱旅游”网页,设置超级链接,2.2.5,超级链接是网页的灵魂，它的作用是建立网页之间的联系。通过超级链接，浏览者能够方便地在网页、网站乃至整个Internet随意遨游。超级链接技术使因特网成为一个四通八达的网络。设置超级链接的对象可以是一段文本、一幅图像或者其他的网页元素。在网页浏览器中，使用鼠标单击这些对象时，将会载入一个新的网页页面，或者跳到本网页的其它位置。,网页设计与制作,2.2制作“我爱旅游”网页,设置超级链接,2.2.5,操作实例2-18设置文字的超级链接操作步骤：选中设置超级链接的文字，例如，选中“全球最昂贵旅游城市排行出炉”。在文字上单击鼠标右键，在快捷菜单中选择“创建链接”选项。在弹出的“选择文件”对话框中，选择需要链接的文件。例如，选择html文件夹中的文件“news01.html”。单击“确定”按钮。按快捷键Ctrl+S保存网页。按快捷键F12，预览生成的网页。,网页设计与制作,2.2制作“我爱旅游”网页,设置超级链接,2.2.5,操作实例2-19设置图像的超级链接操作步骤：选中设置超级链接的图像。例如，选中“旅行日志”的图像。在图像“属性”面板，单击“浏览文件”图标，在“选择文件”对话框中，选择需要链接的文件。例如，选择html文件夹中的文件“lxrz.html”。单击“确定”按钮。按快捷键Ctrl+S保存网页。按快捷键F12，预览生成的网页。,网页设计与制作,2.2制作“我爱旅游”网页,设置页面属性,2.2.6,网页页面属性主要包括网页标题、网页背景图像与颜色、文本与超链接颜色、页边距等。网页标题可以标识和命名文档；网页背景图像与颜色可以设置文档的外观；文本颜色可以帮助浏览者区分普通文本和具有超链接的文本，并且可以识别已经访问过和尚未访问过的超链接。1.设置网页标题对网页来说，标题非常重要，它可以帮助浏览者在浏览时了解正在访问的内容，以及在历史记录和书签列表中标识页面。如果页面没有标题，则网页将作为“无标题文档”在文档窗口、浏览器窗口、历史记录和书签列表中出现。,网页设计与制作,2.2制作“我爱旅游”网页,设置页面属性,2.2.6,操作实例2-20为网页添加标题“我爱旅游网”操作步骤：方法一：打开index.html网页文件，直接在Dreamweaver文档工具栏的“标题”文本框中输入新标题。例如，输入“我爱旅游”。然后按回车键确定。如果文档工具栏没有显示，可通过“查看”菜单打开工具栏中的“文挡”显示。方法二：在“查看”菜单中，选择“文件头内容”选项，显示出文件头部分的内容。单击“标题”按钮，在“属性”面板的标题框中输入新标题，按回车键确定。方法三：选择“修改”菜单的“页面属性”选项，或在网页空白处单击鼠标右键，选择“页面属性”选项，进入“页面属性”对话框。在“分类”中选中“标题/编码”，在“标题”框中输入新标题。单击“确定”按钮完成。,网页设计与制作,2.2制作“我爱旅游”网页,设置页面属性,2.2.6,2.设置网页的背景图像或颜色操作实例2-21为网页设置背景图像和颜色操作步骤：打开“页面属性”对话框，在“分类”中选中“外观（HTML）”选项，单击“背景图像”文本框右侧的“浏览”按钮，弹出“选择图像源文件”对话框；或者在“背景图像”文本框中直接输入背景图像文件名与路径。在“选择图像源文件”对话框中选择一个图像文件。例如，选择image文件夹中的图片bg02.jpg。单击“确定”按钮。单击“页面属性”对话框中的“应用”按钮，背景图像将应用到网页中。在“页面属性”对话框中单击“背景颜色”右侧的按钮，光标变为滴管形状，并弹出一个颜色面板，可以使用取色滴管在颜色面板中选取一种颜色，也可以使用取色滴管选取屏幕上任意一点的颜色作为设定值。,网页设计与制作,2.2制作“我爱旅游”网页,设置页面属性,2.2.6,注意：同时设置背景图像和背景颜色的原因是当网络速度较慢时，背景图像可能显示迟缓，背景颜色将首先出现，让浏览者明白这是有图片的页面，需要稍加等候。,3.设置网页文本的属性设置网页文本的字体、大小与颜色，超级连接、已访问链接和活动链接的默认颜色与字体。,网页设计与制作,2.2制作“我爱旅游”网页,设置页面属性,2.2.6,其中：页面字体：当前网页中普通文本的字体。页面字体大小：当前网页中普通文本的字号大小。文本颜色：当前网页中普通文本的颜色，系统默认为黑色。链接字体：当前网页中超级链接文本的字体。系统默认与普通字体相同。链接字体大小：当前网页中超级链接文本的字体大小。系统默认与普通字体的大小相同。链接颜色：当前网页中没有访问过的超级链接文本的颜色。活动链接：当超级链接文本被鼠标单击时的颜色。图3-27设置链接文本的颜色已访问链接：当前网页中被访问过的超级链接文本的颜色。,网页设计与制作,2.2制作“我爱旅游”网页,设置页面属性,2.2.6,4.设置页面边距通过设置页面边距，可以使网页周围留出一些距离。设置页面边距的操作是在“页面属性”对话框中实现的，方法是直接在边界框中输入边距数值。左边距：文档中左侧边缘的空白数值。右边距：文档中右侧边缘的空白数值。上边距：文档中上侧边缘的空白数值。下边距：文档中下侧边缘的空白数值。5.设置文档编码在“页面属性”对话框的“标题/编码”对话框中，可以选择使用的汉字编码类型。对于中文网页，一般选用“简体中文（GB2312）”。,网页设计与制作,2.2制作“我爱旅游”网页,保存网页,2.2.7,随时保存文件是编辑任何文档时应该养成的良好习惯。在制作网页的过程中，随时有可能发生断电或机器故障，而Dreamweaver编辑器没有自动保存的功能，因此，要经常地保存正在编辑的网页，以避免由于意外而导致辛勤劳动付之东流。操作实例2-22保存网页操作步骤：在“文件”菜单中选择“保存”选项，或单击标准工具栏上的“保存”按钮，或按快捷键“Ctrl+S”。注意：“Ctrl+S”快捷键几乎是任何Windows应用程序保存文件的快捷键，养成随时按“Ctrl+S”快捷键的习惯会使你受益匪浅！如果网页文件已经建好或以前保存过，则文件继续保存；如果文件从未保存过，则弹出“另存为”对话框。在“保存在”列表中选择一个文件路径（注意：网页文件应保存在站点文件夹内），在“文件名”文本框中输入文件名，“保存类型”选择HTML文件，最后单击“保存”按钮。,网页设计与制作,2.2制作“我爱旅游”网页,保存网页,2.2.7,网页设计与制作,2.2制作“我爱旅游”网页,浏览网页,2.2.8,一个网页制作完成后，可以在浏览器中预览，并根据预览效果再对网页进行调整。操作实例2-23在浏览器中预览“我爱旅游”主页操作步骤：在“文件”菜单中选择“在浏览器中预览”、“iexplore”选项，或按快捷键F12，将启动IE浏览器，并将当前编辑的网页显示在窗口。也可单击文档工具栏上的“预览”按钮。将鼠标指向链接的文字或图像时，鼠标形状变为手形，状态栏将显示被链接文件的名称，单击即可切换到链接的页面。,网页设计与制作,2.3网页的操作,操作实例2-24网页的复制、重命名操作步骤：在指定站点窗口，选中需要复制的网页文件，例如，news.html。单击鼠标右键，在快捷菜单中选择“编辑”、“拷贝”选项。在指定站点窗口，选中目标文件夹，例如，html。单击鼠标右键，在快捷菜单中选择“编辑”、“粘贴”选项，则复制了一个网页文件。在指定站点窗口，选中需要重命名的网页文件，例如，news.html，单击鼠标右键，在快捷菜单中选择“编辑”、“重命名”选项，将该文件改名为news02.html。在指定站点窗口，选中需要删除的的网页文件，例如，old.html。单击鼠标右键，在快捷菜单中选择“编辑”、“删除”选项，将该文件删除,网页设计与制作,2.4网站上传,将制作完成的网站发布到Internet，一般需要三个步骤：在本地计算机保存完整的Web站点。申请网页空间。上传网页文件到服务器。,网页设计与制作,2.4网站上传,保存完整的Web站点,2.4.1,所谓完整的Web站点，是指保存在本地计算机上的站点必须具有完整性与独立性。站点文件夹必须包含所用到的全部文件。在网站上传之前，应进行必要的测试，以免发生图像不能显示或超级链接不能跳转的情况。,网页设计与制作,2.4网站上传,保存完整的Web站点,2.4.1,操作实例2-25检查站点的文件链接操作步骤：在“站点”菜单选择“检查站点范围的链接”选项，弹出“链接检查器”面板，自动检查整个站点中的链接情况并显示检查结果。在“文件”窗口，鼠标右击选中的站点，在快捷菜单选择“检查链接”、“整个本地站点”选项也可启动“链接检查器”面板。在“检查链接”按钮的下拉菜单中，有三种检查方式可供选择。检查结果将显示在面板窗口中。在“显示”下拉列表中提供了三种显示模式，用于显示检查结果。,网页设计与制作,2.4网站上传,申请网页空间与注册域名,2.4.2,1申请主页空间创建本地站点之后，需要申请网页空间，才能把本地站点上传到Internet上。获取网页空间有两种方式：（1）租用虚拟主机。适合于公司、企业和具有特殊需要的人。（2）申请免费空间。适合于个人。Internet上的一些知名网站均提供免费或收费的个人网页空间，利用搜索引擎，搜索“个人网页空间”，可找到很多可供选择的免费或收费的个人网页空间。申请网页空间时，只要按照站点上的提示进行操作即可。一般来说，站点提供的具体服务千差万别，可根据自己的实际需要进行选择。,网页设计与制作,2.4网站上传,申请网页空间与注册域名,2.4.2,2注册域名域名（DomainName）就是Web站点的名字，是Web站点在Internet中的地址。执行域名解析的计算机称为DNS（DomainNameSystem）服务器，功能是将域名自动转换为IP地址。在Internet中，域名是惟一的。在商界领域，域名已被誉为“企业的网上商标”。注册域名的规则是先申请再批准。中国互联网络信息中心（CNNIC）是我国cn域名的授权管理与运行机构，负责cn域名注册与国内用户注册国际com域名。可以在Internet上选择一个提供“免费域名”的网站，并从中申请域名。,网页设计与制作,2.4网站上传,上传网站,2.4.3,上传网页就是将制作好的网页发布到Internet上，即将网页文件加载到提供虚拟服务器的ISP（InternetServiceProvider）服务器中。上传网页前应准备好如下信息：（1）制作好的网页，一般是一个文件或文件夹。（2）上传网页的域名。（3）ISP服务商所提供的服务器的URL地址。（4）ISP服务商所分配的用户名与密码。,网页设计与制作,2.4网站上传,上传网站,2.4.3,操作实例2-26设置远程站点操作步骤：打开制作好的本地站点窗口，复制一个上传版本，然后将复制的站点窗口打开。在“站点”菜单选择“管理站点”选项，弹出“管理站点”对话框。如图2-50所示。从对话框的站点名称列表里选中指定的站点，单击“编辑当前选定的站点”按钮，弹出“站点设置对象”-“站点”对话框。选择“服务器”标签，在打开的对话框中单击“添加新服务器”按钮。在打开的“站点设置对象”-“服务器”-“基本”对话框中，设置如下：“服务器名称”：输入一个名称，便于识别。“连接方法”：选择“FTP”。“FTP地址”：填入Web服务器的FTP地址。当用户申请主页空间时，Web服务器的管理员将使用E-mail告诉用户该地址。“用户名”：此选项与“密码”选项是ISP授权的用户名与密码，是在申请网页空间时获取的。应填入申请网页空间时的“用户名”。“密码”：填入用户登录的密码。“端口”：一般为默认值21。单击“确定”按钮完成。,网页设计与制作,2.4网站上传,上传网站,2.4.3,网页设计与制作,2.4网站上传,上传网站,2.4.3,操作实例2-27上传站点操作步骤：连接到Internet。在“文件”窗口，单击“连接到远程服务器”按钮，开始连接到远程的FTP服务器。如果设置正确，将很快连接成功。在“文件”窗口中单击“展开以显示本地和远端站点”按钮，打开“站点窗口”。左侧子窗口显示远程服务器上的文件列表，右侧窗口显示本地的文件列表