网页网站制作软件

高等学校计算机应用规划教材网页设计与制作实例教程(第2版)(微课版)方其桂著北京内容简介DreamweaverCS6是一款集网页制作和网站管理于一体的所见即所得的网页编辑器,是针对专业网页设计师特别开发的视觉化网页开发工具.
本书从实用的角度出发,以简明生动的语言,采用实例式教学方式,由浅入深地介绍了网页制作的过程,并详细介绍了实践中的经验和技巧.
全书图文并茂,理论与实践相结合,每个实例都给出了详细的步骤,便于读者学习.
本书可作为高等院校计算机、多媒体、电子商务等专业的教材,也可作为信息技术培训机构的培训用书,还可作为网页设计与制作人员、网站建设与开发人员、多媒体设计与开发人员的参考书.
本书封面贴有清华大学出版社防伪标签,无标签者不得销售.
版权所有,侵权必究.
侵权举报电话:010-6278298913701121933图书在版编目(CIP)数据网页设计与制作实例教程:微课版/方其桂著.
-2版.
-北京:清华大学出版社,2020.
6高等学校计算机应用规划教材ISBN978-7-302-53871-4Ⅰ.
①网…Ⅱ.
①方…Ⅲ.
①网页制作工具-高等学校-教材Ⅳ.
①TP393.
092中国版本图书馆CIP数据核字(2019)第212925号责任编辑:刘金喜封面设计:常雪影版式设计:孔祥峰责任校对:成凤进责任印制:出版发行:清华大学出版社网址:http://www.
tup.
com.
cn,http://www.
wqbook.
com地址:北京清华大学学研大厦A座邮编:100084社总机:010-62770175邮购:010-62786544投稿与读者服务:010-62776969,c-service@tup.
tsinghua.
edu.
cn质量反馈:010-62772015,zhiliang@tup.
tsinghua.
edu.
cn课件下载:http://www.
tup.
com.
cn,010-62794504印装者:经销:全国新华书店开本:185mm*260mm印张:18字数:427千字版次:2016年6月第1版2020年6月第2版印次:2020年6月第1次印刷定价:58.
00元———————————————————————————————————————————————————————————产品编号:前言一、学习网页制作的意义互联网已经成为覆盖面广、规模大、信息资源丰富的计算机信息网络,它不仅给人们提供了一个全新的获取信息的手段,而且正在逐步改变人们的生活、学习和工作方式.
互联网的迅速发展,使人们进入一个前所未有的信息化社会.
作为互联网的主要组成部分,网站得到了广泛的应用.
企业和机构通过网站宣传自己的技术和产品,人们从不同的网站获取所需要的信息.
网页是网站的主要组成部分,因此网页设计与制作技术越来越受到关注.
为适应社会的需求,目前,网页设计与制作已经成为许多高校计算机专业及越来越多的非计算机专业学生必须掌握的基本技能之一,因此各高校纷纷开设了网页设计及制作的相关课程.
二、本书修订《网页设计与制作实例教程》出版后,受到读者肯定,多次加印.
我们这次组织优秀教师对此书进行修订,修订时主要做了以下几个方面的改进.
更新软件:将所涉及的软件更新到最新版本,将软件升级为DreamweaverCC2018版.
更换案例:更新了多数网页案例,使之更贴近教学实践.
优化内容:补充一些实用性、技巧性强的内容,使其更切合网页制作所需.
完善体系:进一步精心修改完善内容,使内容的分布和知识点的详略科学、有度.
三、本书结构本书是专门为一线教师、师范院校的学生和专业从事网页设计与制作的人员编写的教材,为便于学习,设计了如下栏目.
跟我学:每个实例都通过"跟我学"轻松学习掌握,其中包括多个"阶段框",将任务进一步细分成若干个更小的任务,降低了阅读难度.
创新园:对所学知识进行多层次的巩固和强化.
知识库:介绍涉及的基本概念和理论知识,以便深入理解相关知识.
小结与习题:对全章内容进行归纳、总结,同时用习题来检测学习效果.
四、本书特色本书打破传统写法,各章节均以实例入手,逐步深入介绍Dreamweaver网页设计与制作的方法和技巧.
本书有以下几个特点.
内容实用:本书所有实例均选自网页主要应用领域,内容编排结构合理.
网页设计与制作实例教程(第2版)(微课版)II图文并茂:在介绍具体操作步骤过程中,语言简洁,基本上每一个步骤都配有对应的插图,用图文来分解复杂的步骤.
路径式图示引导,便于读者一边翻阅图书,一边上机操作.
提示技巧:本书对读者在学习过程中可能会遇到的问题以"小贴士"和"知识库"的形式进行了说明,以免读者在学习过程中走弯路.
便于上手:本书以实例为线索,利用实例将网页设计与制作技术串联起来,书中的实例都非常典型、实用.
五、教学资源为便于教学和自学,本书提供微课视频、实例源文件和PPT课件.
读者可通过扫描下方二维码,将链接地址推送到自己的邮箱进行下载;也可通过移动终端扫描正文中的二维码,直接观看实例微课视频.
PPT课件+案例源文件微课视频六、本书作者参与本书修订编写的作者有省级教研人员、一线信息技术教师,他们不仅长期从事信息技术教学,而且都有较为丰富的计算机图书编写经验.
本书由方其桂著并统稿,黎沙、张小龙担任副主编.
作者有黎沙、张青、何源、刘蓓、戴静、周本阔、张小龙、王军等,随书资料由方其桂整理制作.
参与本书编写的还有唐小华、黄金华等.
虽然我们有着十多年撰写计算机图书(累计已编写、出版一百余本)编写方面的经验,并尽力认真构思验证和反复审核修改,但仍难免有一些瑕疵.
我们深知一本图书的好坏,需要广大读者去检验评说,在这里,我们衷心希望您对本书提出宝贵的意见和建议.
读者在学习使用过程中,对同样实例的制作,可能会有更好的制作方法,也可能对书中某些实例的制作方法的科学性和实用性提出质疑,敬请读者批评指正.
服务邮箱:476371891@qq.
com.
方其桂2019年春目录第1章网页与网站基础.
11.
1网页网站知识.
21.
1.
1认识网站21.
1.
2认识网页61.
1.
3静态网页和动态网页71.
2网页的组成.
91.
2.
1网页的页面结构.
91.
2.
2网页基本组成元素.
101.
2.
3网页的结构类型.
111.
3网页编写语言与制作工具.
121.
3.
1网页设计语言基础.
121.
3.
2网页制作工具171.
3.
3网页美化工具171.
4网页设计的基本流程181.
4.
1规划网页181.
4.
2网页的测试.
231.
4.
3网页的上传和发布.
231.
5小结和习题.
251.
5.
1本章小结251.
5.
2强化练习25第2章初识网页制作软件272.
1Dreamweaver工作环境.
282.
1.
1认识界面282.
1.
2调整界面292.
1.
3选择视图模式302.
2创建管理站点.
322.
2.
1规划站点322.
2.
2创建站点332.
2.
3管理站点352.
3Dreamweaver基本操作.
392.
3.
1创建和保存网页.
392.
3.
2预览网页.
402.
3.
3设置页面属性422.
4小结和习题442.
4.
1本章小结.
442.
4.
2强化练习.
44第3章制作网页内容.
463.
1输入文本473.
1.
1输入网页文本473.
1.
2美化网页文本503.
1.
3插入列表.
543.
1.
4插入特殊元素563.
2插入图像583.
2.
1插入图像.
583.
2.
2设置图像对齐方式593.
2.
3制作鼠标经过图像603.
2.
4添加背景图像623.
3插入多媒体643.
3.
1插入动画.
643.
3.
2插入视频.
653.
3.
3插入音频.
663.
4使用模板快速制作网页693.
4.
1创建模板文件693.
4.
2管理模板文件773.
4.
3使用模板制作网页793.
5小结和习题813.
5.
1本章小结.
813.
5.
2强化练习.
82第4章设置网页超级链接.
844.
1认识超级链接854.
1.
1超级链接的分类.
854.
1.
2超级链接的路径.
86网页设计与制作实例教程(第2版)(微课版)IV4.
2创建超级链接.
884.
2.
1创建图像超级链接.
884.
2.
2创建文本超级链接.
894.
2.
3创建电子邮件超级链接.
.
.
.
.
.
.
914.
2.
4创建下载文件超级链接.
.
.
.
.
.
.
934.
2.
5创建热点区域链接.
944.
2.
6创建空链接及脚本链接.
.
.
.
.
.
.
964.
3管理超级链接.
974.
3.
1自动更新超级链接.
974.
3.
2设置超级链接显示效果.
.
.
.
.
.
.
984.
3.
3检查链接错误994.
4小结和习题.
994.
4.
1本章小结994.
4.
2强化练习100第5章使用CSS样式美化网页.
1015.
1了解CSS基础知识1025.
1.
1初识CSS样式1025.
1.
2编写CSS样式1045.
2学习CSS样式代码1085.
2.
1CSS常用选择器1085.
2.
2CSS选择器声明1115.
2.
3CSS属性单位1135.
3使用CSS样式美化文本.
1175.
3.
1设置字体属性1175.
3.
2设置段落属性1225.
4使用CSS样式美化页面.
1285.
4.
1设置图片样式1295.
4.
2设置背景与边框.
1355.
5小结和习题.
1395.
5.
1本章小结1395.
5.
2强化练习140第6章规划布局网页.
1436.
1网页布局基础知识.
1446.
1.
1网页布局的结构.
1446.
1.
2网页布局的方法.
1476.
1.
3网页布局技术1486.
2使用表格精确定位.
1496.
2.
1插入编辑表格1496.
2.
2美化设置表格1536.
2.
3表格布局网页1566.
3使用CSS灵活布局.
1616.
3.
1表格+CSS布局.
1616.
3.
2DIV+CSS布局.
1666.
4小结和习题1786.
4.
1本章小结.
1786.
4.
2强化练习.
178第7章添加网页特效.
1817.
1使用CSS3设计动画特效.
.
.
.
.
.
.
1827.
1.
1设计过渡动画特效1827.
1.
2设计变形动画特效1857.
1.
3设计关键帧动画特效.
1897.
2使用行为添加网页特效1937.
2.
1交换图像.
1937.
2.
2弹出信息.
1947.
2.
3打开窗口.
1957.
2.
4其他效果.
1967.
3使用框架设置网页特效1987.
3.
1设计选项卡特效.
1997.
3.
2设计手风琴特效.
2017.
4小结和习题2047.
4.
1本章小结.
2047.
4.
2强化练习.
204第8章构建动态网站.
2058.
1安装和配置IIS2068.
1.
1安装IIS2068.
1.
2配置IIS2078.
2制作网页表单2108.
2.
1创建表单.
2118.
2.
2验证表单.
2158.
3建立网站数据库.
2188.
3.
1创建Access数据库2188.
3.
2连接Access数据库2218.
4制作动态网页2268.
4.
1制作前台网页226目录V8.
4.
2制作后台管理网页.
2318.
5小结和习题.
2428.
5.
1本章小结2428.
5.
2强化练习243第9章网页设计与制作实例2459.
1规划网站2469.
1.
1网站需求分析2469.
1.
2规划网站内容2469.
1.
3设计网站版式2479.
1.
4撰写网站规划书.
2499.
2处理网站素材.
2509.
2.
1处理图片素材2509.
2.
2制作首页动画2569.
3制作网站2599.
3.
1建立站点.
2599.
3.
2制作首页.
2609.
3.
3制作分栏页面2669.
3.
4使用模板创建子页面.
2699.
4发布网站2719.
4.
1测试网站.
2719.
4.
2申请网站与空间.
2739.
4.
3上传网站.
2759.
4.
4维护、更新网站.
2769.
5小结和习题2779.
5.
1本章小结.
2779.
5.
2强化练习.
277网网页页与与网网站站基基础础如今网络已经成为人们生活、学习、娱乐和工作不可缺少的一部分,而网页是互联网信息来源和信息展示的主要途径.
随着网页设计制作工具更加完善、强大和操作更加简单、便捷,网页制作不再只局限于少数专业设计人员,对于一些具有计算机基础的人来说,只要选择合适的网页制作工具,也能设计制作出优秀的网页.
但在制作网页之前,有一些知识还要了解和掌握,如网页知识、网站的组成、网页编写语言、网页设计流程等.
通过本章的学习,读者将掌握网页与网站的基础知识,了解网页与网站的相关概念,感受网页编写语言,了解网站开发的流程.
希望通过这一章的学习,读者能够逐步掌握网页设计的基本概念,为下一步的学习打下基础.
本章内容:网页网站知识网页的组成网页编写语言与制作工具网页设计的基本流程第1章网页设计与制作实例教程(第2版)(微课版)21.
1网页网站知识随着网络技术的不断发展,网页网站设计制作水平的日益提高,在人才市场上对网页与网站设计制作工作人员的需求越来越大,要求也越来越高.
要想掌握网页与网站的设计与制作,必须先了解网页与网站的一些知识.
1.
1.
1认识网站Internet上有很多网站,它们为人们提供了各种各样的资源,通过浏览这些网站,可以获取很多信息.
1.
网站组成如果每个网页是一片"树叶",那么网站就是那棵"树",Internet就是"地球".
因此,网站即网页的集合地.
人们可以通过网站来发布自己想要公开的资讯,或者利用网站来提供相关的网络服务,也可以通过网页浏览器来访问网站,获取自己需要的资讯或者享受网络服务.
网站设计者先将整个网站结构规划好,然后再分别制作各个网页.
大多数网站都会为浏览者提供一个首页,然后再将其他网页与首页链接起来.
如图1-1所示为教育部网站的首页.
关键词搜索主菜单导航菜单动态内容图1-1教育部网站的首页网站由多个网页组成,通过链接将多个网页链接成一个整体,利用网站首页所提供的主菜单、导航菜单及关键词搜索等,可以方便地查找所需网页的内容.
2.
网站分类最直观的网站分类方法是按网站的主题进行分类.
主题就是网站的题材,它决定网站第1章网页与网站基础3的内容,体现网站代表的形象.
一般常见的题材有公司企业、休闲娱乐、教育培训、电脑网络、文化艺术、交通旅游等,而每一个题材又可以继续划分,如图1-2所示.
网站分类休闲娱乐公司企业教育培训电脑网络文化艺术交通旅游义务教育学前教育职业教育高等教育出国留学招生考试图1-2网站分类网站的分类方法有如下几种.
根据网站的用途分类,可分为门户网站(综合网站)、行业网站、娱乐网站等,如图1-3所示.
门户网站行业网站图1-3按网站的用途分类部分网站展示根据网站的功能分类,可分为单一网站(企业网站)、多功能网站(网络商城)等,如图1-4所示.
单一网站多功能网站图1-4按网站的功能分类部分网站展示网页设计与制作实例教程(第2版)(微课版)4根据网站的持有者分类,可分为个人网站、商业网站、政府网站、教育网站等,如图1-5所示.
个人网站教育网站图1-5按网站的持有者分类部分网站展示根据网站的商业目的分类,可分为营利性网站(如行业网站、论坛)和非营利性网站(如企业网站、政府网站、教育网站).
3.
网站特征访问了各类不同的网站后发现,虽然它们表面上看起来具有很大的差异,但实际上作为网站本身又具有很多共同的特征,这些特征主要表现在以下几个方面.
(1)大量的网页网站是由大量的网页组成的,所以从某种角度上讲,建设网站就是制作网页.
如图1-6所示,在所有的网页中,网站的主页是整个网站中最为重要的一个网页.
图1-6网站由多个网页链接组成(2)特色鲜明的网站标志任何一个网站都有自己的网站标志,而且都力求自己的网站标志标新立异、与众不同.
一个好的网站标志通常具有朗朗上口的名字和醒目的图片造型.
(3)统一的风格网站虽然有很多网页,但是作为一个整体来讲,它必须有一个统一的风格.
主页是网站最为重要的网页,所以它的风格往往决定了整个网站的风格.
第1章网页与网站基础5(4)便捷的导航系统导航是一个网站非常重要的组成部分,也是衡量一个网站是否优秀的主要标准.
便捷的导航系统能够帮助用户以最快的速度找到自己需要的网页.
导航系统最常用的实现方法就是导航条.
(5)分层的栏目组织将网站的内容分成若干个大栏目,再将大栏目分成若干个小栏目,然后再将小栏目分成若干个更小的栏目,这就是网站所用的最简单、最清晰的层次型组织方法.
(6)切合主题的内容任何网站都应有一个主题,然后所有的内容都围绕这个主题展开,不切合主题的内容不应出现在网站上.
例如,教育部网站是政府网站,因而所有的内容都围绕教育工作展开.
(7)网站互动栏目网站是一个开放的环境,除了发布信息之外,还有一个非常重要的功能就是收集用户的信息,与用户进行双向交流,如电子邮件、留言板、信息查询等.
(8)域名任何发布在因特网上的网站都有自己的域名.
4.
网站架构网站的体系结构一般有C/S结构、B/S结构和混合结构3种.
一般大型网游都采用C/S结构,分为客户端和服务器;新闻网站类一般都采用B/S结构,用户直接通过浏览器即可浏览;而淘宝网、酷狗音乐等网站一般以上两种结构都采用,既可以使用网页访问,又可以通过软件访问.
(1)C/S结构C/S(Client/Server,客户机/服务器)结构,是把数据库内容放在远程的服务器上,而在客户机上安装相应软件.
C/S软件一般采用两层结构,其分布的结构如图1-7所示.
图1-7C/S结构C/S结构由两部分构成:前端是客户机,即用户界面,用于接受用户的请求,并向数据库服务提出请求;后端是服务器,即数据管理,它将数据提交给客户端,客户端不仅要对数据进行计算并将结果呈现给用户,还要提供完美的安全保护及对数据完整性处理等操作,并允许多个客户同时访问同一个数据库.
在这种结构中,服务器的硬件必须具有足够的数据处理能力,这样才能满足各客户的要求.
网页设计与制作实例教程(第2版)(微课版)6(2)B/S结构B/S(Browser/Server,浏览器/服务器)体系结构,又称为BWD(Browser/WebServer/DBServer),是对C/S结构的一种变化或者改进的结构.
该结构的用户界面完全通过WWW浏览器实现,一部分事务逻辑在前端实现,主要事务逻辑在服务器端实现,形成所谓的三层结构.
第一层客户机是用户与整个系统的接口,用户在网页提供的申请表上输入信息提交给后台,并提出处理请求.
这个后台就是第二层的Web服务器.
第二层Web服务器将启动相应的进程来响应这一请求,并动态生成一串HTML代码,将其中嵌入处理的结果返回给客户机的浏览器.
如果客户提交的请求包括数据的存取,Web服务器还需与数据库服务器协同完成这一处理工作.
第三层数据库服务器负责协调不同的Web服务器发出的请求,管理数据库.
B/S结构如图1-8所示.
图1-8B/S结构(3)B/S与C/S结合的结构B/S与C/S结合的结构充分发挥了两种体系结构的优势,弥补了两者的不足.
信息发布采用B/S结构,保持了客户端的优点;数据库端采用C/S结构,可以构造非常复杂的应用,界面友好灵活,易于操作.
1.
1.
2认识网页网页是用来承载各种多媒体信息的文件,网站是由网页构成的,简单来说,网站就是一个个网页组成并相互关联的群体.
1.
网页概念网页(Web)就是网站上的某一个页面,是向浏览者传递信息的载体.
它以超文本和超媒体为技术,传递文字、图像、动画、音乐等,并通过客户端浏览器进行解析,从而向浏览者展示网页的各种内容.
如图1-9所示为"中华人民共和国教育部"网站的网页效果.
第1章网页与网站基础7图片网址文字图1-9"中华人民共和国教育部"网站的网页效果2.
网页特点网页特点主要表现在以下几个方面.
图形化的界面:在一个页面上同时显示色彩丰富的图形和文本,可以提供将图形、音频和视频等集于一体的信息资源.
兼容的系统平台:网页使用与系统平台无关,无论是Windows、UNIX、Macintosh、安卓等,用户都可以通过Internet访问网页,系统平台对用户浏览网页没有限制.
交互式的操作:当用户向Web提出请求后,Web就会提供用户需要的信息.
例如,用户在百度搜索引擎中输入想查看的信息,确认搜索后,服务器将给出相关网站的网址,这就是一个交互行为.
Web允许访问者在大量的信息中选择自己感兴趣的信息,然后跳转到相应的Web页面.
分布式的存储:在网络中有大量的图形、音频和视频信息,这会占用相当大的磁盘空间,不可以也没有必要将所有的信息都存储在一起,可以将其存放在不同的站点中,根据查询的情况进行选择来读取信息.
信息的时效性:Web站点上的信息是动态的、经常更新的,一般各信息站点都会尽量保证信息的时效性.
1.
1.
3静态网页和动态网页常见的网页有静态网页和动态网页两大类型:静态页面是不能随时改动的,静态是一次性写好放在服务器上进行浏览的,如果想改动,必须在页面上修改,然后再上传服务器覆盖原来的页面,这样才能更新信息,比较麻烦,使用者不能随时修改;动态页面是可以随时改变内容的,有前后台之分,管理员可以在后台随时更新网站的内容,前台页面的内容也会随之更新,比较简单易学.
网页设计与制作实例教程(第2版)(微课版)81.
静态网页静态网页是指没有程序代码的网页.
运行于客户端的程序、插件和组件等都属于静态网页,在网络中看到的静态网页文件通常是以htm或html为扩展名的,俗称HTML文件,静态网页访问方式如图1-10所示.
http协议HTML网页客户机浏览器WWW(HTML)服务器图1-10静态网页访问方式需要注意的是,静态网页并非是没有动画的页面,这种网页完全由HTML标签构成,可以直接针对浏览器发出的请求做出响应,制作起来速度快,成本低.
但是静态网页的模板一旦确定下来,不易修改,更新比较费时费事.
2.
动态网页动态网页就是含有程序代码的网页.
运行于服务器端的程序、网页和组件都属于动态网页,它们会随不同客户、不同时间及不同需要而返回不同的网页.
目前动态网页开发的技术标准分为多种,常见的是ASP、PHP和JSP等技术,它们虽然各有所长,但是都需要将脚本语言嵌入HTML中.
(1)动态网站的特点这里所说的动态网站,是指网站运用了服务器技术和网站动态生成的编程技术,网站的程序可以通过数据库中的数据动态更新和生成规模繁杂、功能强大的网站.
例如,购物系统、商务管理系统等类型的网站,网站的程序可以实现的主要特征如下.
交互性:网页会根据用户的选择和要求产生各种用户所需要的结果,进而完成各种数据交互功能,如用户订票系统、图书查询系统.
网站会根据用户提交的内容,自动查找到用户所需要的数据并生成用户所需要的网页.
这种交互性主要体现在网页的实际功能方面.
自动更新:用户不需要手工制作HTML文件,即可根据数据库中的数据生成各种网页.
例如,新闻系统和较大的门户网站上有大量的新闻和数据,这些新闻内容是利用网站系统自动生成的.
针对性:网页可以根据不同的地区、不同的人、不同时间的浏览,产生不同的内容,极大地丰富了网站的实用性.
例如,网易的本地新闻,就可以根据用户的所在地区,生成用户所在地区的新闻.
(2)动态网站的技术以前的动态网站主要是使用CGI技术,可以使用VisualBasic、Delphi或C/C++等语言开发CGI程序.
虽然CGI的功能强大,但是其语法复杂,开发效率低下,程序维护更新难度较大,因此逐渐被其他网站编程技术所取代.
现在比较流行的网页编程技术有ASP、PHP、JSP、ASP.
NET等.
HTTP第1章网页与网站基础9ASP:是微软开发的一种网站编程技术.
其主要特点是在网页中嵌入HTML代码,由IIS服务器解释运行网页.
ASP的语法规则虽然比较简单,但是功能强大,现在很多网站都是用ASP技术开发的,但只可以运行在微软的平台上.
PHP:即超文本预处理器,是一种非常流行的网站开发技术.
PHP融合了Java、C、Perl等语言的特点,开发人员很容易学习和接受这种语言,并且需要编写的代码量很少,用户只要很少的编程就可以实现功能强大的动态网站.
JSP:是由SUN公司推出的网站编辑技术,是基于JavaServlet及整个Java体系的Web开发技术.
其基本特点是网站运行于Java虚拟机上,具有Java程序的半编译半解释型特点.
ASP.
NET:是微软新推出的在.
NET平台下的Web应用服务编辑框架.
它与ASP的区别是,ASP是解释型的语言,ASP程序是靠IIS的解释来运行的;而ASP.
NET是编译型语言,ASP.
NET的网站在IIS上编译后以可执行程序的形式运行.
1.
2网页的组成网页结构即网页内容的布局,创建网页结构实际上就是对网页内容的布局进行规划,网页结构的创建是页面优化的重要环节之一,会直接影响用户体验效果.
一个完整的网页通常有页头、正文和页尾3个部分,包含图片、文字、动画、视频等内容.
1.
2.
1网页的页面结构网页的页面通常可以分为3个部分:页头、正文和页尾,几乎每个网页都包含这3部分内容.
同一网站中的正文的内容各不相同,但是页头和页尾内容都是相同的.
网页的页面结构如图1-11所示.
页头正文页尾图1-11网页的页面结构网页设计与制作实例教程(第2版)(微课版)101.
2.
2网页基本组成元素网页包含了许多元素,内容丰富,引人入胜,其基本构成元素包括文本、图像、动画、音频、视频等.
1.
文本文本是指网页中叙述性的文字,是最理想的网页信息载体与交流工具,网页中主要信息一般都以文本为主,与图像网页元素相比,文字虽然不如图像那样容易被浏览者注意,但却能简明扼要地表达出主题.
为了克服文本的一些固有缺点,网页制作者赋予了网页中的文本更多的属性,如字体、字号、颜色、底纹和边框等,用户可以根据需要设置网页文本的格式.
2.
图像图像是指网页中插入的具有说明性的图片.
图像拥有丰富的色彩和表现形式,能够表达更加丰富的内容和含义,并且具有文本无法达到的视觉效果.
添加适量的图像可以使制作的网页图文并茂,具有更好的活力和表现力.
在网页制作过程中合理地使用图像,可以使网页更加生动和具有视觉冲击力,但如果在网页中加入过多的图像,反而会影响网页的整体视觉效果,并会明显降低网页的下载速度.
在网页中可以使用GIF、JPEG、BMP、TIFF和PNG等格式的图像文件,其中使用最广泛的是GIF和JPEG两种图像文件格式.
3.
动画动画在网页中的作用是有效地吸引访问者更多的注意,用户在设计网页时可以通过在页面中加入动画使页面更加生动.
在网页中使用的动画主要有GIF和Flash两种方式.
GIF动画主要用在对动画效果要求不高的网页中,如在网页中制作友情链接时,Logo通常都使用GIF动画,且播放不需要插件.
Flash动画的品质优良,大型的、复杂的网页动画大多数都是使用Flash制作的,在Web浏览器中播放Flash动画需要安装Flash播放插件.
4.
音频音频是多媒体网页重要的组成部分.
在为网页添加声音效果时应充分考虑其格式、文件大小、品质和用途等因素.
另外,不同的浏览器对声音文件的处理方法也有所不同,它们彼此之间有可能并不兼容.
用于网络的音频文件的格式种类有很多,常用的有MP3、MIDI、WAV等.
5.
视频随着网络带宽的增加,越来越多的视频文件被应用到网页中,使得网页效果更加精彩第1章网页与网站基础11且富有动感.
常见的视频文件格式有MP4和FLV等.
1.
2.
3网页的结构类型从页面结构的角度上看,网页主要由导航栏、栏目及正文内容三大要素组成.
网页结构的创建、网页内容布局的规划实际也是围绕这三大组成要素展开的.
1.
导航栏导航栏是构成网页的重要元素之一,是网站频道入口的集合区域,相当于网站的菜单,如图1-12所示.
导航栏栏目正文内容图1-12导航栏2.
栏目栏目是指网页中存放相同性质内容的区域.
在对页面内容进行布局时,把性质相同的内容安排在网页的相同区域,可以帮助用户快速获取所需信息,对网站内容起到非常好的导航作用,如图1-12所示.
3.
正文内容正文内容是指页面中的主体内容.
例如一个文章类页面,正文内容就是文章本身;而对于展示产品的网站,正文内容就是产品信息,如图1-12所示.
网页设计与制作实例教程(第2版)(微课版)121.
3网页编写语言与制作工具网页编写语言有很多种,其中HTML是最基础的网页设计语言,虽然后面制作网页时用得不多,但需要了解其基础知识.
1.
3.
1网页设计语言基础网页的设计语言主要是HTML,它是网页设计人员必须掌握的基本知识,也是网页设计和制作的基础.
HTML的原文件是纯文本文件,可以用任何文本编辑器,如UNIX中的VI、DOS中的EDIT、Windows中的txt等.
1.
HTML简介HTML(HypertextMarkupLanguage)又称为超文本标记语言,不像其他语言一样被编译为指令,而只是提供一些语法标签,再由浏览器解释生成相应的页面.
举一个简单的HTML的例子,该程序段的作用是在一个标题为"测试一"的页面中显示一句话——"编写入门!
",这段程序在浏览器中显示的结果如图1-13所示.
图1-13简单HTML的显示效果2.
HTML文档基本结构HTML文档的构成是非常简单的,它主要包括文件头(开头和结尾)、表头和主体3个部分.
如图1-14所示的实例给出了一个基本的HTML文档.
其中,和为文件的开头和结尾;表头是指和,用来定义文档的属性和文档的标题;主体部分放在和之间,用来表示网页文字、图像、表格等内容.
3.
常用页面标签前面的例子仅是一个非常基本的HTML文测试一编写入门!
测试一编写入门!
开头结尾主体表头图1-14简单HTML文档的结构第1章网页与网站基础13档,而在页面布局中往往需要产生各种各样的效果,这就要使用到不同的HTML标签.
实例1不同子标题的显示效果本例中设定了6个子标题的格式,对前4个标题的位置做了特殊的规定:标题一和标题二居左,标题三、标题四居右,标题五居中,标题六位置没有做特殊规定,按照默认值将居左.
程序执行结果如图1-15所示.
测试在标题一标题二标题三标题四标题五标题六代码显示效果图1-15不同子标题的显示效果实例2段落和换行标签的显示效果本例显示和标签的用法,在代码中,设定一个段落采用标签,而在段落内部的语句之间换行则采用标签.
显示结果如图1-16所示.
<P>和<br>标签的用法下面是一个居中的段落段落中的语句之间没有空行段落中的语句之间没有空行段落结束了代码显示效果图1-16段落和换行标签的显示效果网页设计与制作实例教程(第2版)(微课版)14实例3标签的用法标签的用法通过几种不同的水平线显示,它们在宽度、长度、颜色、位置等方面分别有所不同.
水平线的颜色设定可以采用十六进制数,也可以直接输入对应的英文,如红色的水平线,可以设定为color=red或者color=#ff0000,如图1-17所示.
<P>标签的用法一条宽度为5个像素的水平线;高度为50个像素,且居中的水平线:没有三维效果,且红色的水平线:代码显示效果图1-17标签的用法的显示效果实例4标签的用法和标签显示的例子,效果如图1-18所示.
<P>标签的用法网页设计与制作教程主编:方其桂代码显示效果图1-18原文标签的显示效果高第1章网页与网站基础154.
页面布局综合实例经过前面的学习,读者对基本页面布局已经有了一个初步的了解,下面通过一个综合实例来运用、、、、等标签,如图1-19所示.
古诗欣赏古诗欣赏《青玉案》辛弃疾   东风夜放花千树.
更吹落,星如雨.
宝马雕车香满路.
凤箫声动,玉壶光转,一夜鱼龙舞.
   蛾儿雪柳黄金缕,笑语盈盈暗香去.
众里寻他千百度,蓦然回首,那人却在,灯火阑珊处.
"百度"二字源于中国宋朝词人辛弃疾的《青玉案·元夕》词句"众里寻他千百度",象征着百度对中文信息检索技术的执着追求.
代码显示效果图1-19网页布局显示效果5.
HTML扮演的角色HTML是Internet上用于设计网页的主要语言.
网页包括动画、多媒体、图形等各种复杂的元素,其基础架构都是HTML.
如图1-20所示,网页中包括了动画、图片、输入、查询模块等复杂元素,从浏览器菜单中选择"查看"→"源文件"命令,在打开的记事本中可以看到网页的源代码.
该网页的基础架构是HTML.
网页设计与制作实例教程(第2版)(微课版)16图1-20HTML网页与代码HTML是一种标记语言,它只能建议浏览器以什么方式或结构显示网页内容,这不同于程序设计语言.
因此,HTML比较好学,初学者只要掌握HTML的一些常用标记即可.
6.
HTML编辑环境HTML代码既可以在记事本中编写,也可以在其他任何文本编辑器中编写,用来制作网页,如写字板、Word、WPS等编辑程序,但在保存时要保存为.
html或.
htm格式.
网页文件不仅可以用IE浏览器查看,也可以用其他浏览器查看,HTML具有跨平台性.
只有通过浏览器才可以对HTML文档进行相应的解析.
7.
HTML开发工具为了使设计网页更加简单、方便,有些公司和人员设计了专用的HTML开发工具,主要分为三大类,如表1-1所示.
表1-1HTML开发工具比较分类介绍代表工具不足所见即所得工具所谓所见即所得,就是在编辑网页时看到的效果,与使用浏览器时看到的效果基本一致Drumbeat、NetobjectFusion容易产生废代码HTML代码编辑工具与完全的所见即所得工具相对应,用纯粹的HTML代码编辑工具,用户可以对页面进行完全的控制记事本等一些代码编译器用户必须掌握HTML混合型工具介于上面两种工具之间,混合型工具在所见即所得的工作环境下可以完成主要的工作,同时也能切换到一个文本编辑器AdobeDreamweaver、FrontPage、CutePager、QuickSiteaver通常不能完全控制HTML页的代码,也容易产生废代码第1章网页与网站基础171.
3.
2网页制作工具用于网页制作的软件有很多,以下列举的是一些常用的网页制作工具软件,选择适合的网页制作软件有时会事半功倍.
1.
Dreamweaver软件AdobeDreamweaver(DW,梦想编织者)是针对专业网页设计师特别开发的视觉化网页开发工具,利用它可以轻而易举地制作出跨越平台限制和浏览器限制的充满动感的网页.
Dreamweaver是所见即所得网页编辑器,操作容易,如果操作改变网页位置或档案名称,Dreamweaver会自动更新所有链接.
使用HTML代码、HTML属性标签和一般语法的搜寻及置换功能使得复杂的网站更新变得迅速又简单,很适合初学者学习使用.
2.
FrontPage软件FrontPage是微软公司出品的一款网页制作入门级软件,其特点是所见即所得,使用方便简单,该软件结合了设计、程序代码、预览3种模式.
FrontPage还允许设定数据库的交互功能,利用该功能,用户可以设置让指定的访问者通过浏览器来编辑数据库中的记录,或者在数据库中新增记录、查看已有的资料等.
使用FrontPage制作网页,能真正体会到"功能强大,简单易用"的含义.
页面制作由FrontPage中的Editor完成,其工作窗口由3个标签页组成,分别是"所见即所得"的编辑页、HTML代码编辑页和预览页.
FrontPage带有图形和GIF动画编辑器,支持CGI和CSS.
向导和模板都能使初学者在编辑网页时感到更加方便.
3.
记事本"记事本"软件相当常见,其存储文件的扩展名为.
txt,文件属性没有任何格式标签或者风格,所以相当适合纯文本编辑.
一般来说,使用记事本可以很方便地使用代码编辑方式编辑网页,只是在保存时需另存为对应网页格式的扩展名,而再次打开网页文件时,一定要选择打开方式,让网页文件用"记事本"软件打开,即可再次编辑.
记事本仅适合高级用户,因为在其里面的内容没有任何可视化的操作可直接制作网页,而只有编写各种HTML代码、CSS代码、JS代码和动态脚本才能制作出网页.
1.
3.
3网页美化工具网页制作最重要的一项工作是让页面美观,通过以下专业的网页美化工具软件,可以让所制作的网页赏心悦目.
1.
Fireworks软件Fireworks是一款专为网络图形设计的图形编辑软件,它大大简化了网络图形设计的工作难度,无论是专业设计者还是业余爱好者,使用Fireworks不仅可以轻松地制作出非常动网页设计与制作实例教程(第2版)(微课版)18感的GIF动画,还可以轻易地完成大图切割、动态按钮、动态翻转图等的制作.
Fireworks软件主要用于制作网页图像、网站标志、GIF动画、图像按钮和导航条等.
2.
Photoshop软件Photoshop是一款优秀而强大的图形图像处理软件,可以对图像做各种变换,如放大、缩小、旋转、倾斜、镜像、透视等;也可以进行复制、去除斑点、修补、修饰图像的残损等操作.
此外,它具有的强大功能已经完全涵盖了网页设计的需要.
3.
Flash软件Flash是一款动画制作软件,主要用于制作矢量动画,如广告条、网站片头动画、动画短片等.
网页设计者使用Flash软件不仅可以创作出既漂亮又能改变尺寸的导航界面及其他奇特的效果,还可以制作交互性很强的游戏、网页和课件等.
4.
CorelDRAW软件CorelDRAW是Corel公司出品的矢量图形制作工具软件,该图形工具给设计者提供了矢量动画、页面设计、网站制作、位图编辑和网页动画等多种功能,可用于矢量图及页面设计,以及图像编辑.
使用CorelDRAW软件可以制作简报、彩页、手册、产品包装、标识、网页等.
5.
AdobeIllustrator软件AdobeIllustrator是一种应用于出版、多媒体和在线图像的工业标准矢量插画的软件.
作为一款非常好的图片处理工具,AdobeIllustrator广泛应用于印刷出版、海报书籍排版、专业插画、多媒体图像处理和互联网页面的制作等,并可以提供较高的精度和控制,适合任何小型设计到大型的复杂项目.
1.
4网页设计的基本流程网页是一种新型的公众媒体,具有成本低、信息量大、传递信息快的优势.
网页的设计就是将自己的信息制作成可以放在网站上被浏览的网页的过程.
在设计时,进行有针对性的、艺术性的设计,能够制作出效果很好的网页.
1.
4.
1规划网页网页在设计建设时,需要进行内容定位、域名注册、空间租用、上传等工作.
在网页设计的学习中,需要了解网页、网站建设的一些流程与概念.
在规划时,往往不仅考虑单个网页,而是从整体考虑需求.
因而,规划网页最终还是在规划网站.
第1章网页与网站基础191.
主题定位网页的定位就是确定网站的形式.
网站是一种新式媒体,在日常生活、商业活动、娱乐资讯、新闻媒体等方面有着广泛的应用.
在网站开发之前,首先需要认识各种网站的主要特点,对网站进行定位.
常用的网站主要有以下几种.
(1)综合门户类网站综合门户类网站是网络中使用最多的网站,主要特点是功能强大、内容丰富、信息齐全,网站有着强大的管理功能与美观的页面.
例如,新浪、搜狐、网易这类网站的开发是一个庞大的项目,需要专业的开发团队来完成.
(2)新闻资讯网站新闻资讯网站是一种可以发布大量新闻与图片内容的网站,用户可以方便地查看这些新闻资源的内容.
这类网站的主要开发内容是网站的美术设计与网站内容的管理功能,如人民网、新华网等.
(3)公司宣传网站公司宣传网站是开发工作中最常见的网站类型.
企业借助于网站推广企业形象、树立企业品牌、发布企业产品,这类网站主要是对企业产品与企业服务进行发布.
企业网站的设计重点是内容网页和企业产品的发布管理功能,如腾讯、联想等.
(4)娱乐网站娱乐网站是一种很常用的网站形式,通常是明星资讯、娱乐新闻、音乐影视等内容.
娱乐网站的设计非常灵活,可以使用各种个性化的色彩和布局,如新浪娱乐、E视网等.
(5)电子商务网站电子商务网站是一种常见的网站形式,也是一种重要的应用形式,其内容主要是产品、广告、购物、市场推广等,如易趣网、淘宝网等.
电子商务网站的设计重点是网站的产品管理功能和用户的交互功能,页面需要制作得美观大方.
(6)政府与公益组织网站政府和一些民间组织可以借助网站进行相关的宣传或者开展一些活动.
现在有越来越多的政府和民间组织开发自己的网站,如中国网、教育部网站、希望工程等.
(7)电子邮件网站电子邮件是网站的一个重要应用,有很多门户网站提供电子邮件的功能,也有很多企业网站与服务器架设有电子邮件服务器与网站.
电子邮件网站需要使用专门的电子邮件软件,在网站中需要设计的只有用户登录界面和用户管理界面,如网易电子邮件、139电子邮件.
(8)网址导航类网站网址导航类网站是一种分类的网站类型,其内容是将一些常用的网站链接整理到一个网站上,方便用户查找.
很多网站也具有一定的网址导航功能.
网址导航类网站的开发重点是网站链接与分类的管理,如网址之间、265上网导航等.
网页设计与制作实例教程(第2版)(微课版)20(9)下载网站下载网站可以方便地为用户提供各种资料的下载,如天空软件、非凡软件等网站可以为用户提供软件、歌曲、影视、图书等内容的下载.
下载网站的开发重点是资料的管理与分类.
(10)搜索引擎网站搜索引擎网站是为用户提供内容搜索的网站,如百度、雅虎等.
在网站开发工作中,常需要开发具有一定搜索功能的网站.
网站中的搜索功能可以对产品、企业数据等内容进行管理.
搜索引擎网站的主要内容是实现网站的搜索功能与内容管理功能.
数据库是网站的设计重点.
2.
网站功能确定在网站定位之后,要明确网站的主要功能,下面以一个招聘求职网站为例进行说明.
招聘求职网站的功能,应该围绕招聘与求职来进行,针对的对象分别是企业与会员,这两个方面都需要通过编号设计出强大的功能.
在招聘功能上,企业通过注册成为企业会员,登录以后,可以发布企业招聘信息、查看会员的求职情况、设置企业的资料等内容.
在个人会员功能上,求职者通过注册成为网站的个人会员,个人会员登录以后,可以查看企业发布的招聘信息、向需要招聘的单位发送个人简历、管理自己的简历等.
网站还需要公告发布、招聘会发布、网站新闻等内容.
在不同功能板块之间存在着一定的逻辑关系.
网站的数据关系如图1-21所示.
图1-21网站的数据关系3.
网站标志设计网站标志设计包括Logo与Banner.
Logo主要是互联网上各个网站用来与其他网站链接的图形标志,Banner是网络广告的主要形式,一般是使用GIF格式的图像文件,可以使用静态图形,也可用多帧图像拼接为动画图像.
第1章网页与网站基础21(1)设计Logo网站的Logo是一个网站的标志,在各种场合都需要使用到网站的Logo,一个网站需要设计出一个有创意的Logo作为网站的品牌标识.
如图1-22所示为央视网的Logo.
图1-22央视网的Logo网站的Logo首先要突出网站的功能,让用户一看到这个Logo就可以联想到网站求职招聘的功能.
其次网站的Logo需要有鲜明的色彩与内容,使其在众多Logo链接中能够吸引用户的注意并单击这个Logo链接.
(2)设计Banner网站所有的广告中,首页的广告是最主要的,需要美观大方,因此网站中的Banner需要体现出"眼球效应",可以做成动画的形式,以动态的效果吸引用户的注意力;如果是静态图片则需要使用鲜明的颜色与内容.
如图1-23所示为央视网的Banner.
图1-23央视网的Banner4.
网站数据结构规划一般新闻网站中的数据内容比较简单,有个人会员、管理员、网站新闻等数据内容,这些数据有很强的逻辑关系.
新闻网站的数据关系如图1-24所示.
个人会员管理员个人会员信息表管理员信息表撰写新闻审核新闻发布新闻图1-24新闻网站的数据关系5.
网站整体规划在创建网站之前需对网站进行整体规划和设计,写好网站项目设计书,在以后的制作中按照这些规划和设计进行即可.
网站的整体规划需要从网站内容、网页美术效果和网站程序的构思3个方面进行.
网站内容:在进行网站开发之前,需要构思网站的内容,明确需要突出哪些主要内容.
例如个人网站,可以有个人文章、活动、照片、作品、联系方式等内容,而且要明确哪些是主要内容和需要在网站中突出制作的重点.
网页设计与制作实例教程(第2版)(微课版)22网页美术效果:网页美术效果往往决定一个网站的档次,网站需要有美观大方的版面,可以根据个人的喜好、页面内容等设计出自己喜欢的页面效果.
网站程序的构思:即网站的功能需要由什么样的程序来实现,如果是很简单的个人主页,则不需要经常更新.
6.
收集资料与素材网站的设计需要相关的资料和素材,有了丰富的内容才可以丰富网站的版面.
整理好资料后还需要对资料进行筛选和编辑.
图片:可以使用相机拍摄相关图片,可以使用扫描仪将已有照片输入计算机.
一些常见图片可以在网站上搜索或下载.
文档:收集和整理现有的文件、广告、电子表格等内容.
对纸制文件需要输入计算机形成电子文档.
文字类的资料需要进行整理和分析.
媒体内容:收集和整理现有的录音、视频等资料.
这些资料可以作为网站的多媒体内容.
7.
设计网站页面确定网站的基本内容与思路后,即可设计网站页面了.
网站网页设计包括首页的设计与内容的设计.
首页设计要规划以下内容:网页Logo的大小与样式、网页Banner的大小与样式、网页各个模块搭配、网页中导航条的位置与样式、网页中其他链接的位置与格式、网页各个模块的版式等.
内容的设计重点是网页的制作.
网页的制作有"切图输出"到网页与"模板制作"到网页两种方式.
使用切图输出方式,可先制作好效果图,再经过如Fireworks软件对其进行切片,最后保存为网页格式.
利用模板制作网页只需更改模板中已经设定的内容,即可完成新网页的制作,使用模板制作网页可以提高网站的设计制作速度.
8.
网页制作网页制作一般分为静态网页制作和动态网页制作两类.
(1)静态网页制作用HTML编写的网页通常称为静态页面,一般以.
htm、.
html等为扩展名.
在HTML的网页上,也可以展示各种动态效果.
(2)动态网页制作动态网页是与静态网页相对应的,之所以叫作动态网页,是因为能与后台数据库进行交互、数据传递,从而实现数据的实时更新,这是静态网页所做不到的.
动态网页是用PHP、ASP、.
NET等网络编程语言编写的网页.
动态网页的后缀名有.
asp、.
php等.
第1章网页与网站基础231.
4.
2网页的测试网页完成设计与制作后,还需要测试网页能否正确被浏览、有无错误、内容显示是否完整等,是针对网页的各项性能情况的一项检测工作.
它与软件测试有一定的区别,其除了要求外观的一致性以外,还要求在各个浏览器下的兼容性,以及在不同环境下的显示差异.
1.
性能测试(1)连接速度测试用户连接到电子商务网的速度与上网方式有关,有的用光纤上网,有的用无线上网.
(2)负载测试负载测试是指在某一负载级别下,检测电子商务系统的实际性能,也就是能允许多少个用户同时在线.
可以通过相应的软件在一台客户机上模拟多个用户来测试负载.
(3)压力测试压力测试是测试系统的限制和故障恢复能力,也就是测试电子商务系统会不会崩溃.
2.
安全性测试它需要针对网站的安全性(如服务器安全、脚本安全)进行可能有的漏洞测试、攻击性测试、错误性测试等.
对电子商务的客户服务器应用程序、数据、服务器、网络、防火墙等进行测试,用相对应的软件进行测试.
3.
基本测试基本测试包括色彩的搭配、连接的正确性、导航的方便和正确、CSS应用的统一性等.
4.
网站优化测试好的网页是看它是否经过搜索引擎优化,以及网站的架构、网页的栏目与静态情况等.
1.
4.
3网页的上传和发布建站首先要申请域名,再申请服务器空间,然后规划站点、创建与管理站点等.
1.
申请网站域名一个网站必须有一个世界范围内唯一可访问的名称,且这个名称还可方便地书写和记忆,这个就是网站的域名.
从网络体系结构上来讲,域名是域名管理系统进行全球统一管理的、用来映射主机IP地址的一种主机命名方式.
申请域名的步骤如下.
(1)查找域名注册选择域名注册时,注册与资费都在网上完成.
注册域名时,需要找到服务较好的域名代理商进行注册,可以在搜索引擎上查找到域名代理商.
网页设计与制作实例教程(第2版)(微课版)24(2)选择一个域名服务在网站上注册一个用户名,进行域名注册和购买服务器空间时,需要用户登录.
为了便于以后的业务联系,在域名注册时,需要填写正确的资料.
用已经注册的用户名登录,登录成功以后,将进入用户控制面板.
在用户控制的首页中可以显示用户的账户情况.
(3)查找可以注册的域名用户在网站首页的域名查询文本框中可输入需要查找的域名进行查找.
例如,要查找一个域名,在复选框中选择这个域名即可.
(4)注册域名在查找域名的结果中选择所需要的域名,单击"注册"按钮,将进入域名注册网页.
在域名注册的表格中填写域名的注册资料.
这些域名的注册资料可用于域名续费等其他业务,需要填写准确的注册信息.
填写完成后提交这个域名的注册信息.
域名资料提交成功以后,该域名即注册完成.
还需要按照网络公司的方式交费.
2.
申请服务器空间一个网站直接放在独立的服务器上是不实际的,实现方法是在商用服务器上租用一块服务空间,每年定期支付较少的服务器租用费即可把自己的网站放在服务器上运行.
租用的服务器空间,用户只需要管理和更新自己的网站,服务器维护和管理则由网络公司完成.
服务器空间的注册步骤如下.
(1)选择虚拟主机类型在网络公司的网站上登录已经注册的用户名.
登录成功后,在虚拟主机选择网页中,选择需要购买的虚拟主机类型,如购买一个100MB的ASP虚拟主机空间.
(2)填写注册资料在空间注册面板中,填写需要注册的资料.
这些注册资料可能用于以后的业务联系,需要填写正确的用户资料.
提交注册后,按照网页的提示交费,可以使用在线支付、ATM机刷卡、银行转账等方式进行支付.
交费以后,联系网络公司确认开通服务.
(3)管理网站空间进入网站主机管理面板,选择需要管理的网站空间.
在网站空间的管理面板中,可以对网站空间进行配置.
网站空间需要绑定网站域名及设置FTP账户和密码,经过设置后,即可在网站空间中上传网站和使用网站域名访问该网站.
3.
发布与上传网页完成设计以后,需要上传到租用的服务器空间中才能被用户访问.
网页的发布就是把自己计算机中的网页内容发布到网络服务器空间的过程.
(1)网页上传上传网页需要使用FTP软件,可使用FTP客户端软件把设计好的网页传到租用的网络第1章网页与网站基础25空间中.
(2)FTP服务器连接在FTP服务器地址栏中输入服务器地址,并在用户名和密码文本框中输入申请到的服务器空间的用户名和密码,即可连接到服务器的空间上.
(3)上传与下载文件在网络上传中,左边表示本地文件,右边表示服务器上的文件.
右击本地的文件或文件夹,选择"上传"命令,即可把文件上传到服务器.
同样,右击服务器上的文件,再选择"下载"命令,可以把服务器上的文件下载到本地计算机.
1.
5小结和习题1.
5.
1本章小结本章主要介绍了网页与网站的基础知识,具体包括以下主要内容.
网页与网站知识:详细介绍了网页与网站的一些概念、网页特点与网站的分类,介绍了网站的特征.
网页的组成结构:介绍了网页的页面结构、网页基本组成元素,并就常见的静态和动态网页进行分别介绍.
网页编写语言:介绍了HTML基本知识,并通过一组实例讲解HTML简单的编写过程.
同时,介绍了CSS代码片段、JavaScript代码片段,以及常用的网页制作与美化工具.
网页设计流程:详细介绍了网页设计制作的过程,从绘制页面草图到制作网页,从测试网页到上传发布网页等.
1.
5.
2强化练习一、选择题1.
能被绝大多数浏览器完全支持的图像格式为().
A.
gif和jpegB.
gif和pngC.
jpeg和pngD.
png和bmp2.
在CSS选择器中表示鼠标移上状态的样式是().
A.
a:linkB.
a:hoverC.
a:activeD.
a:visited3.
下列说法正确的是().
A.
创建网页前必须先创建站点B.
创建网页就是创建站点C.
创建网页也可以不必创建站点D.
网页和站点都是文件4.
下列软件中不能编辑HTML的是().
A.
记事本B.
FrontPageC.
WordD.
C语言网页设计与制作实例教程(第2版)(微课版)265.
当光标停留在超链接上时会出现的标记定义的文字是().
A.
titleB.
hrefC.
tableD.
word二、判断题1.
使用模板能够做到使众网页风格一致、结构统一.
()2.
基于模板的文件只能在模板保存时得到更新.
()3.
在网页的源代码中表示段落的标记是.
()4.
某个网页中使用了库以后,只能更新不能分离.
()5.
获取网站空间的方法有申请免费主页、申请付费空间、自己架设服务器.
()三、问答题1.
简述网页特点.
2.
简述网站的特征.
3.
请使用HTML写一段古诗代码.
4.
简述CSS语言在网页设计中的作用.
5.
请规划设计一个企业网站的开发流程.