‘壹’ 简单网页制作
一、FrontPage 2003简介
FrontPage 2003是由Microsoft公司推出的Office 2003组件之一。FrontPage 2003的启动与退出、文件的打开与保存与Office系列中其他软件相同。FrontPage 2003启动后,主窗口如图6-61所示,菜单部分外貌与Office中的其他软件相似。
与以往的版本相比,FrontPage 2003有以下几个新功能:
(1)自定义浏览器分辨率预览检查;
(2)描摹图像;
(3)层功能;
(4)插入交互式按钮;
(5)行为的应用;
(6)使用网页重定向;
图6-61 FrontPage 2003启动界面
图6-62“新建”任务窗格
(7)检查网页错误;
(8)优化HTML代码;
(9)规划页面布局。
二、制作简单网页
我们在前面已经学会了用Word进行排版,其实你已经会制作一个简单网页了,只需将原来排好的Word文档,另存时选择保存类型为“Web页(*.htm;*.html)”就可保存为一个网页文件。
下面我们用FrontPage 2003制作一个简单网页。步骤如下:
1.启动FrontPage 2003
选择“开始”/“所有程序”/“Microsoft Office”/“FrontPage 2003”命令,打开如图6-61所示的界面。
图6-63 新的空白的网页
图6-64“网页模板”对话框
2.建立新网页
选择“文件”/“新建…”菜单命令,打开“新建”任务窗格,如图6-62所示。单击“空白网页”,也可以通过工具栏上的“新建”按钮建立一个新的空白的网页。如图6-63所示。
如果要根据 Microsoft FrontPage 的模板创建网页,单击“其他网页模板”,打开如图6-64所示的“网页模板”对话框,再单击所需模板类型的选项卡,然后单击某个模板。
3.输入如下内容
图6-65
4.编辑操作
网页中的文本编辑操作与Word的编辑操作类似。
本例中,将“我的第一个网页”应用“标题一”样式,并设为隶书,水平居中;将“你好!欢迎光临”应用“标题二”样式,将其余内容应用“普通”样式,并将行距设为“1.5倍行距”,设置完成后效果如图6-65所示。
5.保存网页文件
选择“文件”/“保存”命令,弹出“另存为”对话框,指定保存位置和文件名,然后单击“保存”按钮即可完成操作。
三、制作多媒体个人主页
我们以制作一个简易的个人网站为例,进一步学习使用FrontPage 2003。
1.规划
网站规划包括规划网站的风格、网站的结构和网站的配色等,是对网站的整体定位。本例设置了6个栏目,包括首页、自荐信、个人简历、荣誉证书、才艺展示、联系方式,链接的文件名分别为index.htm、zijian.htm、jianli.htm、zhengshu.htm、zhanshi.htm、lianxi.htm。当然也可以结合自己情况进行修改。页面布局如图6-66所示。
2.建立网站
在FrontPage 2003中,所谓网站,就是一些网页和程序的集合,各个网页之间通过超链接联系在一起,所有的网页和文件保存在一个文件夹中,通过网站把这些文件和网页统一起来。本地网站是指本地硬盘上用来存放整个网站的所有文档的文件夹。远程网站是指网络服务器上的网站,供用户浏览。
建立一个新网站,事实上就是建立一个单独的文件夹,然后在这个文件夹中建立各个网页文件,并且把它们链接在一起。
网页制作可以在新建网站中完成,也可以像前面那样单独新建一个网页。建议用新建网站的方法来制作网页。
下面我们首先创建新的FrontPage网站:
(1)在“文件”菜单上,单击“新建”,出现如图 6-66 所示的“新建”任务窗格。
图6-66
(2)在“新建”任务窗格中,单击“由一个网页组成的网站”。
(3)在“网站模板”对话框中,在“常规”选项卡下,单击需要的网站模板,本例选择“只有一个网页的网站”,并在指定新网的位置栏中,键入或选择新网的路径及名称,这里我们将默认的mysite改为myhome,如图6-67所示,然后单击“确定”按钮,出现创建新网站对话框,完成站点创建,完成后如图6-68所示。左边一列是文件夹列表,可以通过右键快捷菜单新建文件夹,对文件或文件夹进行复制、删除、重命名等操作。
图6-67“网站模板”对话框
图6-68
3.准备素材
将本例所需的图片动画素材复制到网站内的images文件夹下。
4.制作主页页眉
在“网页”视图中的文档窗口底部,单击“设计”
在文件夹列表中双击index.htm,打开该网页并进入编辑状态,开始首页制作。
(1)设置网页大小 在“视图”菜单上,指向“网页大小”,单击
(2)设置网页背景在“网页”视图中的文档窗口底部,单击“设计”
(3)插入一个一行两列的表格 方法与在Word中插入表格相同。
在显示设计视图模式下,通过常用工具栏的“插入表格”按钮,或在“插入”菜单上,指向“插入”,在级联菜单中单击“表格”;右击插入的表格,在弹出菜单中单击“表格属性”,并将单元格衬距、单元格间距和粗细栏均设为0,如图6-70所示,单击“确定”按钮。
图6-69 网页属性
图6-70 表格属性
(4)在第一个单元格内插入图片 将插入点放在第一个单元格,在“插入”菜单上,指向“图片”,再单击“来自文件”。找到要添加的文件(网站下images文件夹下的logo.gif),如图6-71所示,然后单击“插入”。
更简单的方法是从文件夹列表拖动图片文件到编辑区指定的位置即可。
(5)在第二个单元格内插入Flash动画 单击第二个单元格,在“插入”菜单上,指向“图片”,再单击“Flash影片”。弹出与图6-71相似的“选择文件”对话框,找到要添加的文件(网站下images文件夹下的banner_007.swf),然后单击“插入”。
(6)在第一个表格下插入一个1行1列的表格 同样将单元格衬距、单元格间距和粗细栏均设为0,设置好背景颜色,本例是选的其他颜色,如图6-72所示,在“值”文本框中输入Hex={C1,E8,C9}。
(7)制作滚动字幕 在第二个表格的单元格内单击,在“插入”菜单上,单击“Web组件”,弹出插入Web组件对话框,默认选中的是字幕,因此单击“完成”按钮,弹出字幕属性对话框,在“文本”框内输入:衷心感谢您垂阅我的简历,单击“确定”按钮。如图6-73所示。
图6-71 插入图片对话框
图6-72“其他颜色”对话框
5.制作正文和页脚
(1)在第二个表格下插入一个1行2列的表格,同样将单元格衬距、单元格间距设为0,但粗细设为1,暗边框设为白色,亮边框则设为其他颜色,在如图6-72所示的“值”文本框中输入Hex={99,CC,FF}。
(2)设置单元格背色。右击此表格的第一个单元格,在弹出菜单中单击“单元格属性”,弹出如图6-74所示的对话框,背景设为其他颜色,在如图6-72所示的“值”文本框中输入Hex={F1,F5,FC}。同样方法将第二个单元格设为白色。
图6-73 字幕属性对话框
图6-74 单元格属性
(3)调整单元格宽度,使之与第一个表格相同。
(4)在第一个单元格内插入一个8行1列的表格,并将单元格衬距、单元格间距和粗细栏均设为0。在单元格属性中将单元格对齐属性设为水平居中,垂直居中,行高调整为40。
在刚插入的表格第二行内插入图片homepage.gif,并在其后输入“首 页”;在第三行内插入图片sub_dot.gif,并在其后输入“自 荐信”,后面四行插入的图片均为sub_dot.gif,输入的文字依次为“个人简历”、“荣誉证书”、“才艺展示”、“联系方式”。
(5)在表格三的第二个单元格内插入一个3行3列的表格,并将单元格衬距、单元格间距和粗细栏均设为0。将中间一列调宽一些。
在该表格第一行第二列中输入“自荐信”,在第二行第二列输入自荐信的内容。设为1.5倍行距。
(6)在表格三后面插入一个2行1列的表格,并将单元格衬距、单元格间距和粗细栏均设为0;并且第一个单元格背景色设为与表格二背景色相同,在第二个单元格内输入“联系电话:023-683568XX E-mail:xiaohui@163.com”并设为居中。
6.链接网站文件
选中要建立超链接的文字或图像,单击常用工具栏中的“插入超链接”按钮或在“插入”菜单上单击“超链接”,或者是右击选中区域并单击“超链接”,均可打开“插入超链接”对话框。如图6-75所示。
图6-75“插入超链接”对话框
(1)选中“首页”,单击常用工具栏中的
(2)用同样的方法将“自荐信”链接到zijian.htm、“个人简历”链接到jianli.htm、“荣誉证书”链接到zhengshu.htm、“才艺展示”链接到zhanshi.htm、“联系方式”链接到lianxi.htm。
7.保存文件,按F12键预览网页
四、制作本网站内其他页面
首先在文件夹列表中将 index.htm 复制 5个,分别重命名为 zijian.htm、jianli.htm、zhengshu.htm、zhanshi.htm、lianxi.htm。只需将每个文件中自荐信部分修改为相应内容即可,页眉、超链接栏和页脚均不变。
五、网站发布
当我们完成上述内容后,需将制作的网页发布到Internet上的Web服务器中,才能供网上的访问者浏览。首先要到Internet服务提供商(ISP)那里申请购买存放网页的空间和域名,以前有很多网站(如网易等)都提供免费的个人主页存放空间,现在相对较少了,中国学生网仍在提供50M免费空间服务,大家可到http://web.6to23.com/去申请一个免费空间。
发布网站可以使用专门的FTP工具。但为了给用户提供方便,FrontPage 2003内置了网页发布功能,利用它,只需进行简单的设置,就可以轻松地完成网站发布任务。FrontPage 2003中的远程网站视图可以帮助我们将整个网站或单独的文件和文件夹发布到任何位置:扩展的 Web 服务器、支持文件传输协议(FTP)或基于 Web 的分布式创作和版本控制(WebDAV)的Web服务器或文件系统中的某个位置。
下面我们利用FrontPage 2003及文件传输协议(FTP)发布网站,步骤如下:
1.打开FrontPage网站
在“文件”菜单中单击“打开网站”或单击工具栏上的“打开”按钮边上的下拉标志,从下拉菜单中选“打开网站”,在弹出的“打开网站”对话框中找到需要打开的网站并单击“打开”按钮。
2.转至“远程网站”视图
若要转至该视图,请单击“网站”选项卡,然后单击窗口底部的“远程网站”按钮。或在“视图”菜单上,单击“远程网站”。如图6-76所示。
3.设置“远程网站属性”
在文档窗口顶部,单击“远程网站属性”。在弹出的对话框中,在“远程网站”选项卡上,在“远程 Web服务器类型”下,单击“FTP”。在“远程网站位置”框中,键入自己所选定的远程网站的地址及 FTP 协议(本例中输入“ftp://125.91.6.75”),如图6-77所示。单击“确定”按钮,在打开的“要求提供用户名和密码”对话框中输入ISP提供的用户名和密码,单击“确定”按钮。如图6-78所示。
图6-76
图6-77
4.发布网站
通过单击窗口右下角的“发布网站”按钮即可发布所有文件。也可发布单个文件,在本地网站选择一个文件,然后单击“本地到远程”按钮
图6-78
图6-79
‘贰’ 如何快速学习制作简单网页需要用到哪些软件
如果快速制作简单的网页,可以直接接用OFFICE里的WORD就可以了,只要在WORD中排好版式,然后保存时把格式选择成网页就可以了,如图:
如果,想做标准又专业的,那还是学个网页制作软件吧,最开始可以学DREAMWEAVER,这是制作网页的工具,入门挺容易的.可以快速制作出比较好的网页有成就感,激发学习兴趣.当然这些还是不够的,如果再进一步还要学习图片处理软件(如FIREWORKS,主要处理网页中要的图片,或制作网页效果图等),还可以再学FLASH制作动画,增加网页的吸引力.
后面还有HTML啊CSS啊也是要学的
再后面,可能还要学习一些动态语言如PHP,C#等,另外数据库知识啊,服务器配置,网络方面啊等等都要学习..这方面偏于后台编程,看你的爱好选择了.
就这么多,看起来挺吓人,不过只要你循序渐进,一步一步走,问题不大的,祝你成功!
‘叁’ 怎么用dreamweaver制作简单网页
第一步:打开dw,点击dw左上角的文件按钮。
‘肆’ 怎样制作一个H5页面
1、准备一个H5的制作工具,自行在网络搜索一下,这里以IH5为例,先注册一个账号。
‘伍’ 如何用PS制作JPG主页面图片
用DREAMWEAVER作HTML页面,站点的所有文件都应该在一个文件夹中,然后定义这个文件加为站点,文件调用一般都用的相对路径,比如说想插入一张叫做ps.jpg的图片,用这样几种形式:
ps.jpg
../ps.jpg
../1/ps.jpg
../../ps.jpg
images/ps.jpg
跟页面的关系是:
1.和页面在同级目录下,也就是在一个文件夹中,平级的;
2.图片位于页面的上一级目录下,图片和包含页面的文件夹同级;
3.图片位于页面的上一级目录下一个叫1的文件夹中,图片和包含页面的文件夹同级;
3.和2的情况一样,以此类推。
3.页面和images这个文件夹平级,图片位于images文件夹中。
如果要转移某个文件,最好在DREAMWEAVER中进行,例如当ps.jpg被转移的时候,那么软件会自动显示出哪些页面已经在使用这个文件,并询问是否更新页面对于这个文件的链接,选择是就ok了。
如果在外部转移了文件,那就要手动修改那些页面了,注意别落下了。
这样效果就不会错了。
如果考虑好了,也可以使用http那样的绝对路径,但如果对方图片不存在了,那你的效果自然也就错了。
文件名要最好用准确简单的英文,拼音,数字的图片具体功能的组合,只看文件名就能知道图片的内容,比如按钮可以用button_info.jpg, button_procts.jpg, 可以看出info的图片是介绍,后一个是产品按钮。
希望有所帮助,祝你成功!
‘陆’ 怎么制作自己的网页
初级前端
主要学习三个部分:HTML,CSS,JavaScript
到招聘网站,参考任聘要求,准没错,举例如下:
1.精通html和css,能制作符合W3C标准的静态页面;
2.精通JavaScript编程,对面向对象编程思想有深刻理解;
3.精通主流Javascript库/框架jQuery;
4.理解并掌握JavaScript语言核心技术DOM、BOM有Javascript性能优化经验;
5.对浏览器兼容性有深入的研究,精通各种浏览器问题 ;
6.了解Backbone.js、AngularJs等MVC框架并有实际项目开发经验;
7.了解http://asp.net等服务器后台技术和拥有一定的C#编程能力者优先;
8.对交互体验、可用性、用户体验有一定程度的理解;
9.有良好的责任心和团队合作能力、能承受较大的压力;
自己动手搜索下吧,确定目标和方向,以上是个人路线,仅供参考。
‘柒’ 如何制作一个简单的网页(一)
现在炫彩的网页很多,那都是怎么做出来的呢?为了帮助小白能快速学会一些基础知识,小鱼就不用代码而就直接用网页软件制作了。
首先得有这个软件,名字是Adobe Dreamweaver CS3,这个在网络上就能下到,提倡正版。
打开界面就是这样,想要做一个简单的网页就点击这个。
然后就进入这么个界面,因为一般做网页都是用表格来分割板块和规划界面,下来就插入一个表格简单示范。
点击插入记录里的表格。
在这里设置表格属性,因为小鱼在示范,就直接用1*1的了。
然后就是这个样子,可以随意拉伸调整,接下来我们插入一个图片。
点击插入记录里的图像。
在这里选择图片并确定。
在点击确定后就会弹出这个窗口,这个是确认路径,在网页中每个板块的内容都是在服务器上有确定的路径以防止错乱。
这里还是确认路径,点击小文件夹图标,再次选择上次选择的图片,并确认。
再次确认。
添加完毕就是这样,根据图片分辨率不同插进后大小会不同,进行调整就可以了。
然后就可以用网页打开试试了,点击如图的图标,会出现是否保存字样,将其保存到自己想要保存的文件路径就可以了,注意保存时文件后缀名.html不能改动。
这个就是打开的样子,下次会介绍如何添加网页标题和其中的一种网页链接方式。
‘捌’ 如何用frontpage制作简单的网页
Frontpage是由微软公司于1995年率先推出的一款网页制作入门软件,其特点就是简单易学易上手,但是该软件已于2007年停止更新了,目前该软件主要有三种模式分别是设计、程式码、预览。但是,有一点毋庸置疑即frontpage为我们的工作学习带来了很大的便利,我们在学习网页制作的前期,可以将frontpage和Dreamweaver结合去练习,便于我们更好的学习网页的制作。
所需的工具原料
Frontpage
HTML语言知识
相关的制作步骤:
下载Frontpage软件安装包,下载时为了安全起见尽量不要下载破解版;
预览一下自己设计的网页。
注意事项:
网页的制作一定要美观大方,才能获得更好的用户体验,不可敷衍了事;
掌握一定的代码知识,因为网页制作需要能看懂最基本的代码;
网页制作要有一定的创作意识,所以在平时的生活中要注重创作能力的培养。
‘玖’ 如何制作网页或网站
简单制作网页的方法:
工具、原料:
电脑
Dreamweaver CS5
方法步骤:
下载Dreamweaver软件。Dreamweaver是一款强大的网页制作工具。
‘拾’ 怎样制作个人网页,有教程,简单点。
具体步骤如下:
1、打开服务器中网站文件的目录,假设为D:\abcd。
6、完成上述步骤后,即可制作个人网页。