第八章 电子商务网站建设
DESCRIPTION
第八章 电子商务网站建设. 创建电子商务网站的过程. FrontPage2003 的基本操作. 网页文本格式化、插入图像和超链接、丰富网页内容. 使用表格实现网页定位、增加页面层次. 框架的使用. 创建 CSS 样式表. 实训八. 练习题. 本章小结. 导航. 末页. 前一页. 后一页. 退出. 案例: 苏宁电器集团电子商务案例. 通过案例,请思考: 1 .目前主流的虚拟主机配置如何?如果你要为一新注册成立的公司搭建电子商务平台,你会怎样去做虚拟主机选型? 2 .搭建电子商务平台是选择自行购买主机,还是选择租赁虚拟主机,你的判断标准是什么? - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: 第八章 电子商务网站建设](https://reader033.vdocuments.mx/reader033/viewer/2022061612/568141e7550346895dadc874/html5/thumbnails/1.jpg)
第八章 电子商务网站建设创建电子商务网站的过程
FrontPage2003 的基本操作
网页文本格式化、插入图像和超链接、丰富网页内容
后一页前一页末页导航
使用表格实现网页定位、增加页面层次
框架的使用
实训八
练习题
本章小结
创建 CSS 样式表
退出
![Page 2: 第八章 电子商务网站建设](https://reader033.vdocuments.mx/reader033/viewer/2022061612/568141e7550346895dadc874/html5/thumbnails/2.jpg)
案例:苏宁电器集团电子商务案例通过案例,请思考:
1 .目前主流的虚拟主机配置如何?如果你要为一新注册成立的公司搭建电子商务平台,你会怎样去做虚拟主机选型?2 .搭建电子商务平台是选择自行购买主机,还是选择租赁虚拟主机,你的判断标准是什么?3 .网站信息发布系统对于电子商务网站的信息更新与维护有哪些帮助?你所用过或了解的这类软件有哪些?
![Page 3: 第八章 电子商务网站建设](https://reader033.vdocuments.mx/reader033/viewer/2022061612/568141e7550346895dadc874/html5/thumbnails/3.jpg)
8.1 创建电子商务网站的过程
8.1.1 申请域名8.1.2 选择主机8.1.3 选择操作系统、 WWW 服务器、开发工具和数据库8.1.4 网站建设与日常维护
后一页前一页末页导航 退出
![Page 4: 第八章 电子商务网站建设](https://reader033.vdocuments.mx/reader033/viewer/2022061612/568141e7550346895dadc874/html5/thumbnails/4.jpg)
8.1.1 申请域名 注册域名是电子商务网站规划的第一步。 域名的形式是以若干个英文字母、数字、中横线组
成,由“ .” 分隔成几部分。国际域名由 InterNIC 审批和维护。
中国互联网络信息中心( CNNIC )是我国域名注册管理机构和域名根服务器运行机构。
国内域名和国际域名在互联网上的使用上是没有本质区别的。
注册域名时用户向指定的域名注册服务机构提交域名申请表和有关证件等,由代理机构替用户进行域名注册的工作即可。
后一页前一页末页导航 退出
![Page 5: 第八章 电子商务网站建设](https://reader033.vdocuments.mx/reader033/viewer/2022061612/568141e7550346895dadc874/html5/thumbnails/5.jpg)
8.1.2 选择主机目前解决服务器空间的方式有多种: ( 1 )虚拟主机:虚拟主机即通常所谓的租用 ISP 硬盘空间。 ( 2 )主机 ( 服务器 ) 托管:企业自行购买 Web服务器后可以将自己的服务
器托管在 ISP 的机房里 。实现其与 Internet连接,从而省去用户自行申请专线接入到 Internet 。适用于大型企业,并有较强的计算机技术力量。
( 3 )租用 DDN专线:通过申请相应速率的 DDN线路连接到 Internet 上。 从价格角度看,这三种方式的成本投入是依次增加的。虚拟主机最为经济,每月只需支付几百元的租用费,采取远程登录的方式就可以实现对站点的维护和更改,自己的网站就可以被访问,而且速度与浏览互联网中的其他网站没有区别。服务器托管的价格界于虚拟主机和专线入网之间,一般月租金几千元,而专线入网的费用每个月要上万元。
后一页前一页末页导航 退出
![Page 6: 第八章 电子商务网站建设](https://reader033.vdocuments.mx/reader033/viewer/2022061612/568141e7550346895dadc874/html5/thumbnails/6.jpg)
8.1.3 选择操作系统、WWW 服务器、开发工具和数据库
服务器有不同厂商的不同品牌,有 PCServer ,也有企业级的服务器,主要根据用户的业务需求、数据量和访问人数来确定。如果打算在网站上使用数据库,那么选用一种合适的数据库是十分重要的。当数据量不大时,可以考虑使用微软的 Accsess 数据库,当数据量达到一定程度时需要安装专用数据库,如 SQLserver , Mysql 等。常用的操作系统有 Unix 和 WindowsNT 。
后一页前一页末页导航 退出
![Page 7: 第八章 电子商务网站建设](https://reader033.vdocuments.mx/reader033/viewer/2022061612/568141e7550346895dadc874/html5/thumbnails/7.jpg)
8.1.4 网站建设与日常维护
后一页前一页末页导航
网站建设包括几个要素: ( 1 )网站内容:( 2 )设计制作:( 3 )功能开发:( 4 )网站推广:( 5)网站维护与更新:
退出
![Page 8: 第八章 电子商务网站建设](https://reader033.vdocuments.mx/reader033/viewer/2022061612/568141e7550346895dadc874/html5/thumbnails/8.jpg)
8.2 FrontPage2003 的基本操作
8.2.1 FrontPage2003简介8.2.2 FrontPage2003 的基本操作
后一页前一页末页导航 退出
![Page 9: 第八章 电子商务网站建设](https://reader033.vdocuments.mx/reader033/viewer/2022061612/568141e7550346895dadc874/html5/thumbnails/9.jpg)
8.2.1 FrontPage2003简介
( 1 )网页是 WWW 的基本文档,它是用 HTML ( Hypertext Markup Language ,超文本标识语言)编写的,扩展名为 .htm 或 .html 。( 2 ) FrontPage 是一种“所见即所得”的网页编辑器,用户使用 FrontPage ,无需懂HTML 的语法和元素,就能做出引人入胜的具有一定专业水准的网页。( 3 ) FrontPage2003 是一种功能强大的、易于掌握的 Web页开发工具,微软公司将它集成到MicrosoftOffice20003 系列中,以保持Microsoft Office 系列的整体风格一致性。使用 FrontPage2003能够轻松愉快地进行网页编辑,能够方便、准确地进行 Web 网站的建立和管理。
后一页前一页末页导航 退出
![Page 10: 第八章 电子商务网站建设](https://reader033.vdocuments.mx/reader033/viewer/2022061612/568141e7550346895dadc874/html5/thumbnails/10.jpg)
8.2.1 FrontPage2003简介
FrontPage2003 的界面介绍 安装Office2003 后,单击【开始】菜单【程序】中的Microsoft FrontPage ,打开 FrontPage2003 ,界面如下页图所示。这个界面对于我们学过 Office 系列的用户来说是非常熟悉的,它秉承了 MicrosoftOffice 的界面风格。
退出后一页前一页末页导航
![Page 11: 第八章 电子商务网站建设](https://reader033.vdocuments.mx/reader033/viewer/2022061612/568141e7550346895dadc874/html5/thumbnails/11.jpg)
8.2.1 FrontPage2003简介
退出后一页前一页末页导航
![Page 12: 第八章 电子商务网站建设](https://reader033.vdocuments.mx/reader033/viewer/2022061612/568141e7550346895dadc874/html5/thumbnails/12.jpg)
后一页前一页末页导航
程序窗口包括: 窗口标题栏、菜单栏、工具栏、任务窗格、状态栏; 工作窗口包括:
标签栏、网页编辑区、网页编辑模式栏垂直 /水平滚动条。
FrontPage 由程序窗口和工作窗口共同组成
退出
![Page 13: 第八章 电子商务网站建设](https://reader033.vdocuments.mx/reader033/viewer/2022061612/568141e7550346895dadc874/html5/thumbnails/13.jpg)
8.2.2 FrontPage2003 的基本操作
后一页前一页末页导航
1. 建立站点 站点是指一系列可通过 Internet浏览器浏览的,具有相互超链接的多媒体文档的集合,以及完成这些文档的存放、查找、搜索、发布的物理设备和其他各种相关硬件、软件系统。通常的站点仅仅是指本地硬盘上的一个文件夹。站点是 FrontPage2003 操作的核心,所有的操作都是建立在站点之上的。操作步骤如下:
( 1 )在本地磁盘中建立一个“ huadian”文件夹。( 2 )单击【开始】菜单→【程序】→【MicrosoftFrontPage】,打开
FrontPage2003 。( 3 )单击菜单栏【文件】→【新建】→【站点】或单击工具栏中 按钮旁边的下拉菜单,从中选择【站点】命令,打开【新建站点】对话框,选取“个人网站”模板,在【指定新站点的位置】选项中输入“ C:\助理电子商务师 \huadian”,如图 8-2 所示。
退出
![Page 14: 第八章 电子商务网站建设](https://reader033.vdocuments.mx/reader033/viewer/2022061612/568141e7550346895dadc874/html5/thumbnails/14.jpg)
8.2.2 FrontPage2003 的基本操作
后一页前一页末页导航 退出
![Page 15: 第八章 电子商务网站建设](https://reader033.vdocuments.mx/reader033/viewer/2022061612/568141e7550346895dadc874/html5/thumbnails/15.jpg)
8.2.2 FrontPage2003 的基本操作
后一页前一页末页导航
2.编辑简单的网页 在 FrontPage2003 编辑区中输入文本,与其他文字处理软
件的操作一样,在光标所在位置直接输入文字,或者从已有的文档中复制文本等即可。例如,输入如图所示的网页。
退出
![Page 16: 第八章 电子商务网站建设](https://reader033.vdocuments.mx/reader033/viewer/2022061612/568141e7550346895dadc874/html5/thumbnails/16.jpg)
8.2.2 FrontPage2003 的基本操作
后一页前一页末页导航 退出
![Page 17: 第八章 电子商务网站建设](https://reader033.vdocuments.mx/reader033/viewer/2022061612/568141e7550346895dadc874/html5/thumbnails/17.jpg)
8.2.2 FrontPage2003 的基本操作
后一页前一页末页导航
3. 保存网页 单击菜单栏的【文件】→【保存文件】或单击工具栏中的保存按钮,保存
新建的文件 new_page_1.htm ,命名为 1_1.htm 。4. 退出 FrontPage 单击【文件】→【退出】,或者单击 FrontPage窗口右上角的关闭按钮。5. 打开网页 启动 FrontPage 后,单击【文件】→【打开】或单击工具栏上的打开按钮,
在查找范围中找到 C:\助理电子商务师 \huadian ,出现【打开】对话框。单击文件名“ 1_1.htm”,然后单击【打开】按钮。
6. 在浏览器中浏览网页 单击桌面上或任务栏上的图标,启动浏览器。在地址栏中直接输入网页的文
件名 C:\助理电子商务师 \huadian ,回车确认,或单击浏览器【文件】菜单下的【打开】,浏览器中出现相应的网页。
退出
![Page 18: 第八章 电子商务网站建设](https://reader033.vdocuments.mx/reader033/viewer/2022061612/568141e7550346895dadc874/html5/thumbnails/18.jpg)
8.3 网页文本格式化
8 . 3 . 1 设置文字与段落 8 . 3 . 2 插入图象和超链接 8 . 3 . 3 丰富网页内容
后一页前一页末页导航 退出
![Page 19: 第八章 电子商务网站建设](https://reader033.vdocuments.mx/reader033/viewer/2022061612/568141e7550346895dadc874/html5/thumbnails/19.jpg)
8.3.1 设置文字与段落
后一页前一页末页导航
1.设置文本的字符格式 ( 1 )启动 FrontPage, 打开需要格式化的文件。例如,打开上一节中建立的 C:\助理电子商务师 \1-1.htm文件。( 2 )选中需要进行格式化的文本。例如,选中第一行“我的花店”。有两种方法,一是利用格式工具栏的按钮,对选定的文本进行格式化。或者单击【格式】菜单下的【字体】,利用【字体】对话框进行设置。2.设置文本的段落格式 ( 1)选中需要进行格式化的段落。( 2 )单击格式栏上的按钮,对选定的段落进行格式化,或者在选定的段落上右击选择【段落】进行设置。
3.插入水平线 ( 1 )在需要插入水平线的位置单击,例如,在标题“我的花店”后面单击,表示将水平线插在该段的下面。( 2 )单击【插入】菜单下的【水平线】,即可插入一条水平线。默认情况下,插入的水平线与浏览器窗口等宽。如果要改变水平线的宽度、高度、颜色以及其他属性,可双击水平线,利用【水平线属性】对话框进行设置。
退出
![Page 20: 第八章 电子商务网站建设](https://reader033.vdocuments.mx/reader033/viewer/2022061612/568141e7550346895dadc874/html5/thumbnails/20.jpg)
8.3.1 设置文字与段落
后一页前一页末页导航
4.插入滚动字幕 ( 1 )选中文本“欢迎您访问我的花店”,单击【编辑】菜单下的【剪切】,或单击工具栏的按钮。
( 2 )单击菜单栏【插入】→【组件】→【字幕】,在弹出的【字幕属性】对话框中进行相应的设置,在【文本选项】中粘贴剪切的文字,滚动方向为左,滚动速度为4像素,字幕宽度 200 像素,背景色为紫色,如图 8-9所示。单击【确定】按钮即可。如果要使文本上下滚动,需要修改其 HTML 代码。
5. 页面属性的设置 ( 1)单击【格式】菜单下的【背景】,或在页面的空白位置处右击后选择【网页属性】。
( 2 )在【网页属性】对话框中分别进行【常规】、【背景】、【边距】的设置,将页面标题设置为“我的花店”,背景颜色设置为淡黄色,上边距设置为0。
退出
![Page 21: 第八章 电子商务网站建设](https://reader033.vdocuments.mx/reader033/viewer/2022061612/568141e7550346895dadc874/html5/thumbnails/21.jpg)
8.3.2 插入图象和超链接
后一页前一页末页导航
1.插入图像 ( 1 )网页中使用图像的原则:①一个网页最好不要超过 100KB(包括网页上的图像),下载时间不要超过 8秒,必要时需要利用一些软件对图像进行优化处理。
②在保证所需的清晰度的情况下,尽量压缩图像的大小。③采用分割图像的方法把大的图像分割成几小块,同时下载。④使用尽量少的颜色,因为图像的颜色种类越多,下载的时间越长。
⑤除了彩色照片和高色彩图像以外,尽量使用 GIF 格式图像。⑥给大图像设置一个预选下载的图像替代。
退出
![Page 22: 第八章 电子商务网站建设](https://reader033.vdocuments.mx/reader033/viewer/2022061612/568141e7550346895dadc874/html5/thumbnails/22.jpg)
8.3.2 插入图象和超链接
后一页前一页末页导航
( 2)插入图像的操作 如果要在适当位置插入图像,可执行如下操作:①将光标插入点定位到需要插入图像的位置。② 单击【插入】菜单下的【图像】或单击工具栏上的按钮,打开【图片】对话框。
③选择图像文件所在的位置及文件名,单击【确定】按钮完成图像的插入 。
④选中图片后右击选择【图片属性】,在【图片属性】对话框进行图片的属性设置,单击【确定】按钮完成设置。
⑤保存文件,预览效果。
退出
![Page 23: 第八章 电子商务网站建设](https://reader033.vdocuments.mx/reader033/viewer/2022061612/568141e7550346895dadc874/html5/thumbnails/23.jpg)
8.3.2 插入图象和超链接
后一页前一页末页导航
( 3)创建图像热点①选中需要创建热点的图像。②在如图 8-15所示的图片工具栏中选择多边形热点工具,在图像中选取范围后,打开【创建超链接】对话框进行超链接的设置。
③保存文件 。
退出
![Page 24: 第八章 电子商务网站建设](https://reader033.vdocuments.mx/reader033/viewer/2022061612/568141e7550346895dadc874/html5/thumbnails/24.jpg)
8.3.2 插入图象和超链接
后一页前一页末页导航
2.创建超链接 ①新建一个 1-11.htm 页面文件,将其保存在与 1-11.htm相同的文件夹下。
②在文件 1-1.htm 中选中需要创建超链接的对象,如文字“花可以传情”。
③单击【插入】菜单下的【超链接】或单击工具栏上的按钮,打开【创建超链接】对话框,选中 1-11.htm 文件, 如下图所示。
退出
![Page 25: 第八章 电子商务网站建设](https://reader033.vdocuments.mx/reader033/viewer/2022061612/568141e7550346895dadc874/html5/thumbnails/25.jpg)
8.3.2 插入图象和超链接
退出后一页前一页末页导航
![Page 26: 第八章 电子商务网站建设](https://reader033.vdocuments.mx/reader033/viewer/2022061612/568141e7550346895dadc874/html5/thumbnails/26.jpg)
8.3.2 插入图象和超链接
后一页前一页末页导航
④单击“目标框架”旁的编辑按钮,在弹出的【目标框架】对话框中进行链接目标的设置,此处选择“新建窗口”,如教材 P208 图 8-18 所示。
⑤单击【确定】按钮完成超链接的创建,结果会在选择的超链接文本下面出现蓝色的下划线。
⑥保存文件,预览效果。有超链接的地方会变成小手形状,单击此处即可在新窗口中打开所链接的页面。
退出
![Page 27: 第八章 电子商务网站建设](https://reader033.vdocuments.mx/reader033/viewer/2022061612/568141e7550346895dadc874/html5/thumbnails/27.jpg)
8.3.3 丰富网页内容
后一页前一页末页导航
1. 表格 表格可以帮助我们有序、整齐地组织网页上的信息。 FrontPage 的
表格功能很强,用户既可以直接插入表格,也可以自定义表格,甚至可以把网页上的文本转换为表格,将Word 文档中的表格转换为网页上的表格。表格单元中不仅可以输入文字,也可以插入图片。
表格操作可借助于表格工具栏。在缺省情况下,该工具栏是不显示的。在【视图】菜单下选择【表格工具栏】,可显示表格工具栏。
从左至右各按钮的作用为:自由画表格、擦除边框线、插入行、插入列、删除单元、合并单元格、拆分单元格、上对齐、垂直居中、下对齐、均匀分布各行、均匀分布各列、设置背景颜色。
基本操作有:( 1 )插入表格 ( 2 )编辑表格( 3 )设置表格属性 ( 4 )表格的格式化
退出
![Page 28: 第八章 电子商务网站建设](https://reader033.vdocuments.mx/reader033/viewer/2022061612/568141e7550346895dadc874/html5/thumbnails/28.jpg)
8.3.3 丰富网页内容
后一页前一页末页导航
2. 多媒体( 1)音频 在网页中插入音频文件有三种方法:嵌入、插入、超链接。1 )嵌入音频,操作步骤如下: →单击【插入】菜单的【高级】 【插件】选项,打开【插件属性】对话框,在【插件属性】对话框中单击数据源【浏览】按钮,选择要播放的音频文件,如图 8-25所示。可以对插件属性进行设置,然后单击【确定】按钮。
2 )插入音频,嵌入要使用插件来播放音频文件,离开了插件,嵌入的文件就不能够正常的播放。而插入则不同,它在播放多媒体时并不依赖插件,只和浏览器有关。插入音频的操作步骤如下:
在网页内右击选择【网页属性】,在打开的【网页属性】对话框【常规】选项下,单击背景音乐位置【浏览】按钮,选择插入的音频文件,还可以设置播放的次数,在默认情况下,不限次数复选框是选中的,表示文件将不断循环播放,然后单击【确定】按钮。
3 )链接音频,操作步骤同文字、图像的超链接相同。
退出
![Page 29: 第八章 电子商务网站建设](https://reader033.vdocuments.mx/reader033/viewer/2022061612/568141e7550346895dadc874/html5/thumbnails/29.jpg)
8.3.3 丰富网页内容
后一页前一页末页导航
( 2 )视频 用 FrontPage不仅可以灵活的使用音频,同时也可以很方便地控制视频。这和我们使用音频的方法差不多,我们可以使用嵌入、插入和链接的方法使用视频。
可以用嵌入、插入、链接的方法来使用视频和音频,最常用的方法是链接,一般来说,音频、视频文件都比较大,把它们放在站点里不是很合适,而链接可以指向任何位置,这样就可以在其他地方存放媒体文件,甚至链接到别的站点的音频、视频文件上;同时链接还可以让用户可以方便地进行媒体文件的下载。嵌入的方法可以使音频、视频和网页融为一体,也被许多浏览器支持,可以用它来增强网页的吸引力;插入音频、视频文件既可以在设计时设置媒体播放的方式,也不需要插件来播放,制作网页特效时可以采用。
退出
![Page 30: 第八章 电子商务网站建设](https://reader033.vdocuments.mx/reader033/viewer/2022061612/568141e7550346895dadc874/html5/thumbnails/30.jpg)
8.4 网页定位
后一页前一页末页导航
8 . 4 . 1 利用表格进行页面布局 8 . 4 . 2 利用表格增加页面层次 8 . 4 . 3 利用框架制作页面
退出
![Page 31: 第八章 电子商务网站建设](https://reader033.vdocuments.mx/reader033/viewer/2022061612/568141e7550346895dadc874/html5/thumbnails/31.jpg)
8.4.1 利用表格进行页面布局
后一页前一页末页导航
使用表格进行网页的布局定位时,通常第一层为一个 1×1 的表格,用于设定网页的尺寸。网页宽度和高度的设置原则是:在 800×600 分辨率下不会产生横向滚动条,可将表格的宽度设置为 760像素,表格的高度可根据需要自行设定,但宽度最好不要超过 778 像素。
退出
![Page 32: 第八章 电子商务网站建设](https://reader033.vdocuments.mx/reader033/viewer/2022061612/568141e7550346895dadc874/html5/thumbnails/32.jpg)
8.4.2 利用表格增加页面层次
后一页前一页末页导航
( 1 )在 FrontPage2003 中新建页面文件并保存。( 2 )打开【页面属性】对话框,进行页面背景图
像的设置。( 3 )单击【表格】菜单下的【插入】→【表格】,
插入一个 3×3 的表格,设置表格的背景图像,效果如下页图所示 :
( 4 )将光标置于中间的单元格中,设置此单元格的背景图像。
( 5 )将光标置于中间的单元格中,输入文本“网页层次”,效果如图 8-31 所示。此时的页面已含有 4 个层次,分别是页面背景层、表格背景层、单元格背景层及文字层。
退出
![Page 33: 第八章 电子商务网站建设](https://reader033.vdocuments.mx/reader033/viewer/2022061612/568141e7550346895dadc874/html5/thumbnails/33.jpg)
8.4.2 利用表格增加页面层次
后一页前一页末页导航 退出
![Page 34: 第八章 电子商务网站建设](https://reader033.vdocuments.mx/reader033/viewer/2022061612/568141e7550346895dadc874/html5/thumbnails/34.jpg)
8.4.3 使用框架制作页面
后一页前一页末页导航
框架也称为帧 (Frame) ,通过框架技术能够把Web浏览器的窗口分成几个独立的区域,每个区域即为一个框架。框架是能够独立变化和滚动的小窗口,可以单独显示一个网页。利用这些小窗口,通过合理的组织和编排,可以更好地展示Web 网页,使其更加美观。带有框架的网页称为框架网页。 在许多方面,框架与表格相似,所不同的是表格对页面区域进行划分,而框架对整个窗口进行划分。与表格相比,框架更有用,每个框架都有自己独立的网页文件,其内容不因另外框架内容的改变而改变。
退出
![Page 35: 第八章 电子商务网站建设](https://reader033.vdocuments.mx/reader033/viewer/2022061612/568141e7550346895dadc874/html5/thumbnails/35.jpg)
1. 创建框架页操作步骤:
后一页前一页末页导航
( 1 )启动 FrontPage 后,单击【文件】菜单下的【新建】→【其他网页模板】,在打开的【网页模板】对话框中选择【框架网页】选项,从中选择一种框架形式,此处选择“横幅和目录”框架形式,单击【确定】按钮即可创建如 P215图 8-32 所示的三框架网页。
每个框架区域内都有 2 个按钮:设置初始网页和新建网页,单击【设置初始网页】按钮可以为框架指定一个初始网页,单击【新建网页】按钮可以为框架新建一个网页。选中的框架边框会被加黑显示。此处在每个框架中单击【新建网页】按钮,系统会自动在每个框架中创建一个空白网页。
退出
![Page 36: 第八章 电子商务网站建设](https://reader033.vdocuments.mx/reader033/viewer/2022061612/568141e7550346895dadc874/html5/thumbnails/36.jpg)
8.4.3 使用框架制作页面
后一页前一页末页导航 退出
![Page 37: 第八章 电子商务网站建设](https://reader033.vdocuments.mx/reader033/viewer/2022061612/568141e7550346895dadc874/html5/thumbnails/37.jpg)
8.4.3 使用框架制作页面
后一页前一页末页导航
• ( 2 )为每个框架的新建网页输入内容,并对输入文本进行格式化,如 P215图 8-32 所示(下页图)。对于三框架网页,上边的框架通常显示标题,左边的框架通常显示栏目,右边的框架显示栏目的内容。
• 框架网页有五种视图方式,比普通网页多了以下两种:• ①无框架:当访问者试图打开某个框架网页时,若其使用的浏览器不支持框
架,那么浏览器中将显示这样一句话 "This page uses frames,but your browser doesn't support them."。若要改变上述提示信息,可以切换到无框架视图进行修改。
• ②框架网页 HTML :切换到该视图可显示整个框架的 HTML 代码。而切换到HTML视图,只能看到当前框架初始网页的 HTML 代码。
退出
![Page 38: 第八章 电子商务网站建设](https://reader033.vdocuments.mx/reader033/viewer/2022061612/568141e7550346895dadc874/html5/thumbnails/38.jpg)
8.4.3 使用框架制作页面
后一页前一页末页导航 退出
![Page 39: 第八章 电子商务网站建设](https://reader033.vdocuments.mx/reader033/viewer/2022061612/568141e7550346895dadc874/html5/thumbnails/39.jpg)
2.保存框架及框架页 操作步骤:
后一页前一页末页导航
( 1 )单击工具栏上的按钮,出现【另存为】对话框,如下页图所示。此时上边的框架为蓝色框,说明此时保存的是上边框架,输入文件名 top,单击【保存】按钮。
退出
![Page 40: 第八章 电子商务网站建设](https://reader033.vdocuments.mx/reader033/viewer/2022061612/568141e7550346895dadc874/html5/thumbnails/40.jpg)
2.保存框架及框架页 操作步骤:
后一页前一页末页导航 退出
![Page 41: 第八章 电子商务网站建设](https://reader033.vdocuments.mx/reader033/viewer/2022061612/568141e7550346895dadc874/html5/thumbnails/41.jpg)
2.保存框架及框架页操作步骤:
后一页前一页末页导航
( 2 )左边框架为蓝色时,输入文件名 list ,单击【保存】按钮。( 3 )右边框架为蓝色时,输入文件名 main ,单击【保存】按钮。( 4 )整个框架为蓝色框时,输入文件名 frame ,单击【保存】按钮。( 5)建立超链接。如将为左边的栏目创建超链接,并使链接目标在右框架中显示,操作步骤如下:选定文本“花语”,单击工具栏上的插入超链接按钮,在出现的【创建超链接】对话框中选择要链接的 hy.htm 网页,单击“目标框架”旁的编辑按钮,在弹出的【目标框架】对话框中进行链接目标的设置,此处选择右框架,如下页图所示,然后单击【确定】按钮。
退出
![Page 42: 第八章 电子商务网站建设](https://reader033.vdocuments.mx/reader033/viewer/2022061612/568141e7550346895dadc874/html5/thumbnails/42.jpg)
2.保存框架及框架页操作步骤:
后一页前一页末页导航 退出
![Page 43: 第八章 电子商务网站建设](https://reader033.vdocuments.mx/reader033/viewer/2022061612/568141e7550346895dadc874/html5/thumbnails/43.jpg)
3.编辑框架
后一页前一页末页导航
框架创建之后,可以根据需要对框架进行一些必要的编辑。
( 1 )拆分框架( 2 )删除框架
退出
![Page 44: 第八章 电子商务网站建设](https://reader033.vdocuments.mx/reader033/viewer/2022061612/568141e7550346895dadc874/html5/thumbnails/44.jpg)
4. 设置框架和框架网页的属性
后一页前一页末页导航
框架创建之后,还可以根据需要设置框架的属性和框架网页的属性。( 1 )设置框架属性操作步骤如下:1 )选择需设置属性的框架。2 )单击【框架】菜单下的【框架属性】,打开【框架属性】对话框,如下
页图所示。3 )在【框架属性】对话框中,可进行以下设置:名称:系统为每个框架提供了默认的名字,用户可以重新输入新的名字。初始页面:设置该框架的初始网页。框架大小:设置框架的宽度和高度。通常可以像素为单位给出高度 /宽度的绝对值,或者以浏览器窗口大小的百分比设置高度 /宽度。
边距:设置框架内的文本距离框架边缘的空白区的大小。选项:设置框架的可选选项。
退出
![Page 45: 第八章 电子商务网站建设](https://reader033.vdocuments.mx/reader033/viewer/2022061612/568141e7550346895dadc874/html5/thumbnails/45.jpg)
8.4.3 使用框架制作页面
退出后一页前一页末页导航
![Page 46: 第八章 电子商务网站建设](https://reader033.vdocuments.mx/reader033/viewer/2022061612/568141e7550346895dadc874/html5/thumbnails/46.jpg)
后一页前一页末页导航
1 )在【框架属性】对话框中单击【框架网页】按钮,打开【网页属性】对话框。
2 )在【网页属性】对话框的【框架】选项卡中,可进行以下设置:
框架间距:用于设置框架之间的距离。 显示边框:选中此复选框,表示框架之间有边界;取消选中该
“ ”项, 框架空间 中的数值将自动为 0,表示框架之间没有边界。有时,取消框架之间的边框,能够保持网页的完整性,使客户在浏览时感觉不到框架的存在。
( 2 )设置框架页属性操作步骤:
退出
![Page 47: 第八章 电子商务网站建设](https://reader033.vdocuments.mx/reader033/viewer/2022061612/568141e7550346895dadc874/html5/thumbnails/47.jpg)
后一页前一页末页导航
1 )一个网页上的框架最好不要超过 4 个,否则,将会显著增加网页下载的时间。
2 )与保存普通的网页相比,保存框架有两种方法:其一,单击【文件】菜单下的【保存】,或直接单击工具栏上按钮,将保存整个框架页以及每个框架中的网页;其二,单击【框架】菜单下的【保存页面】,只保存当前所选框架中的网页。
5. 使用框架注意的问题
退出
![Page 48: 第八章 电子商务网站建设](https://reader033.vdocuments.mx/reader033/viewer/2022061612/568141e7550346895dadc874/html5/thumbnails/48.jpg)
8.5 层叠式样式表的应用
后一页前一页末页导航
在 FrontPage2003里可以通过三种方式给网页增加样式表。只有在一个网页一、两个地方才用到的 CSS ,采用行内嵌入方式。只在单个网页中使用的 CSS ,采用内联方式。当有多个网页要用到的 CSS ,采用外联 CSS 文件的方式,这样网页的代码大大减少,修改起来非常方便。
8 . 5. 1 应用嵌入式样式 8 . 4 . 2 应用内联式样式 8 . 4 . 3 外联式样表的使用
退出
![Page 49: 第八章 电子商务网站建设](https://reader033.vdocuments.mx/reader033/viewer/2022061612/568141e7550346895dadc874/html5/thumbnails/49.jpg)
8.5.1 应用嵌入式样式
后一页前一页末页导航
通过 <style> 标记符,可将样式信息作为文档的一部分,用于 HTML 。该方式将样式信息放在文档头部区域中,在 <st
yle> 和 </style>之间定义样式。
退出
![Page 50: 第八章 电子商务网站建设](https://reader033.vdocuments.mx/reader033/viewer/2022061612/568141e7550346895dadc874/html5/thumbnails/50.jpg)
8.5.2 应用内联式样式
后一页前一页末页导航
内联式样式只包含在与它有关的标记内,通过使用内含样式表元素,单独指定样式表。在 FrontPage 2003编辑一个页面的时候,只要选中要发生变化的文字或图像等有关内容,然后点击右键,选择网页属性中的样式按钮就可以随时随地进行可视化操作了。
退出
![Page 51: 第八章 电子商务网站建设](https://reader033.vdocuments.mx/reader033/viewer/2022061612/568141e7550346895dadc874/html5/thumbnails/51.jpg)
8.5.3 外联式样表的使用
后一页前一页末页导航
当多个页面文件具有相同的样式时,可以将 CSS 样式保存为独立的文件,所有页面文件可以共享该样式文件。链接外部样式文件的方法为先在文档的头部区域以下输入以下代码,然后在 <body>
部分直接应用 CSS 中的定义即可。
退出
![Page 52: 第八章 电子商务网站建设](https://reader033.vdocuments.mx/reader033/viewer/2022061612/568141e7550346895dadc874/html5/thumbnails/52.jpg)
实训八 网页设计
【实验目的】 通过实验,使学生掌握 FrontPage2003 的基本操作和网页制作的过程,熟练操作网页文本格式化、插入图像和超链接以及如何使用表格实现网页定位等。
【实验内容】 利用 FrontPage2003制作一个花店的网站,网站包括四个部分,分别
是主页、鲜花展示、友情链接、联系本店。要求使用本章学习的各种网页制作的技术:页面文本的设置、插入滚动字幕、插入图像、创建超链接、表格的操作、利用表格进行页面定位、框架的使用等。
后一页前一页末页导航 退出
![Page 53: 第八章 电子商务网站建设](https://reader033.vdocuments.mx/reader033/viewer/2022061612/568141e7550346895dadc874/html5/thumbnails/53.jpg)
思考与练习
8-1 判断题1.在网页中插入图像时,用得最多的图像格式是 GIF 和 JPEG 。 (
)2. 表格对页面区域进行划分,而框架对整个窗口进行划分 。 ( )3. 主页是指个人或机构的基本信息页面,一般不包含超链接。 ( )4. 一幅图像上只能有一个热点,但热点的形状可以是任意的。 ( ) 5.FrontPage “ ” 处于 预览 状态时,可以进行内容修改。 ( )
后一页前一页末页导航
本次作业请通过电子邮件上传至 教师邮箱,要求:邮件以学号和姓名命名。
退出
![Page 54: 第八章 电子商务网站建设](https://reader033.vdocuments.mx/reader033/viewer/2022061612/568141e7550346895dadc874/html5/thumbnails/54.jpg)
思考与练习8-2 单选题1. 静态网页是一个( )文件。A) .htm B) .asp C) .jsp D) .doc
2. 下述哪个属于网页制作工具( )A) word B) FrontPage2003 C) outlook D) CAD
3. 一个两框架网页对应( )个网页。A) 1 B) 2 C) 3 D) 44. 在网站中,有效组织各种对象的纽带是( )A )主页 B )域名 C )超级链接 D) TCP/IP协议:5. 下述哪个是表格的作用( )A )链接到别的网站 B )提供插图C )提供文本输入 D)在网页上布置文本和图像
后一页前一页末页导航
本次作业请通过电子邮件上传至 教师邮箱,要求:邮件以学号和姓名命名。
退出
![Page 55: 第八章 电子商务网站建设](https://reader033.vdocuments.mx/reader033/viewer/2022061612/568141e7550346895dadc874/html5/thumbnails/55.jpg)
思考与练习6.以下关于使用 FrontPage 时保存框架网页的说法中,正确的是( )A)用【框架】 --【保存网页】的方式保存的是整个网页中所有框架的网页B)用【框架】 --【另保存新网页】的方式保存的是整个网页中所有框架的网页C)对于新创建的框架网页,第一次保存时,系统将提示用户依次保存各部分框架中的网页以及整个框架文件本身。
D)单击工具栏上的保存按钮,保存的是当前所选框架中的网页。7.关于 FrontPage 视图说法不正确的是( )A)可以在普通视图中直接编辑,同时自动将 HTML视图生成相应的 HTML代码。B)在普通视图中编辑网页要求使用者熟悉 HTML语言。C)可以在 HTML视图中直接用 HTML语言编辑网页。D)无论用哪种方式编辑网页,都可以通过预览视图预览,效果是一样的。8.FrontPage编辑器对于颜色超过 256 色的图像,转换为( )格式。A) GIG B) GIF C) PEH D) JPEG
后一页前一页末页导航
本次作业请通过电子邮件上传至 教师邮箱,要求:邮件以学号和姓名命名。
退出
![Page 56: 第八章 电子商务网站建设](https://reader033.vdocuments.mx/reader033/viewer/2022061612/568141e7550346895dadc874/html5/thumbnails/56.jpg)
思考与练习
9. 下列关于网页制作中表格属性的说法不正确的是( )A “ ”)把 边框线宽度 设置为 0,浏览时不会显示边框线B) FrontPage可以手工绘制表格C) FrontPage中通过表格可以实现网页定位D)工具栏的橡皮擦可以擦除表格的外框线10. 以下说法中正确的是( )A)默认情况下,单击带有超链接的文字和图像,将在当前窗口打开链接的目标。B)【创建超链接】的对话框中, URL文本框中不能直接输入网址。C)要预览编辑的网页效果,只能通过浏览器来实现。D) HTML语言可以描述网页中图像的位置、大小以及像素等属性。
后一页前一页末页导航
本次作业请通过电子邮件上传至 教师邮箱,要求:邮件以学号和姓名命名。
退出
![Page 57: 第八章 电子商务网站建设](https://reader033.vdocuments.mx/reader033/viewer/2022061612/568141e7550346895dadc874/html5/thumbnails/57.jpg)
思考与练习
8-3 问答题1.为什么网页中的图像不能与网页一起保存在同一个文件中?2.默认情况下,单击带有超链接的文字或图像,将在当前窗口打开链接的目标,如何设置在新窗口中打开链接的目标?
3.用表格工具栏上的橡皮擦是否可以擦除表格内部的所有框线?4.什么是框架?什么是框架网页?框架网页与普通网页有何异同?5.如何改变框架的布局?删除框架会同时删除框架中的网页吗?
8-4 操作题(说明各题的操作步骤)内容见教材
后一页前一页末页导航 退出
![Page 58: 第八章 电子商务网站建设](https://reader033.vdocuments.mx/reader033/viewer/2022061612/568141e7550346895dadc874/html5/thumbnails/58.jpg)
本章小结
本章主要阐述了电子商务网站的建设过程和使用 FrontPage2003进行网页制作的基本知识。
创建电子商务网站包括如下步骤:申请域名,选择主机,选择服务器、操作系统、数据库,网站的建设和维护。
FrontPage2003是一种所见即所得的网页制作工具,它简单易用,但功能强大。通过文字、图像、声音等组成丰富的网页内容,通过表格、框架等实现网页的布局、层次和定位,通过超链接有效的把网站组织起来。
后一页前一页末页导航 退出
![Page 59: 第八章 电子商务网站建设](https://reader033.vdocuments.mx/reader033/viewer/2022061612/568141e7550346895dadc874/html5/thumbnails/59.jpg)
结束
本课件仅供教学使用
导航 前一页末页
廊坊职业技术学院 魏亚萍
谢谢观赏谢谢观赏