网页制作步骤(DW3)

网页制作步骤(DW3)
网页制作步骤(DW3)

天津渤海职业技术学院

信息工程系

实验实训报告册

专业:电子商务

课程名称:网页制作技术训练

姓名:周全

班级:电子商务121

学号:40

完成日期:2014年5月30日

任课教师张玉娟指导教师张玉娟

实训名称制作大运会网站

实训时间2014年5月实训地点机房一

实训目的:通过本实训掌握dreamweaver软件的熟练使用,并能利用此软件进行网站的搭建,超链接设置,CSS的生成以及其它关键技术的实现。

实训内容:利用表格方式进行大运会网站的搭建,在网站中使用统一的样式表文件对所有页面进行外观的设置,在网站中要实现文字、图片、热点的链接,FLASH的插入,滚动字幕或图片,表单的创建及验证等关键技术,最终生成一个完整的静态网站。

硬件环境:PC机或台式机

软件环境:

DREAMWEA VER

FIREWORKS

FLASH

世博园网页制作

一、首页的制作

1、打开dreamweaver新建一个

2、将素材中给好的banner通过背景插入效果如图所:

3、做完后插入一个宽800高45的一行一列表格插入

背景素材。再建一个高宽一样的一行五列的表

格修改文字效果并做好链接:

4、上面做好后插入一个一行一列高800宽45的表格

背景插入素材如图所示

5、首先插入一个一行一列宽800的表格边框线2个像

素,颜色为蓝色:

6、在一行一列中宽800的表格边框线2个像素的表格

中插入四行四列表格:

7、在第一个单元格中插入素材计算大小:

8、在第三个单元格先插入一个一行一列高32宽176

的一行一列表格插入背景图片:

9、建好后再插入一个5行5列的表格并插入相应的图

片居中对齐

10、第二个单元格直接插入文字对齐,第四个单元格先插入一个一行一列高32宽176的一行一列表格插入背景图片建好后再插入一个3行4列的表格并插入相应的图片和文字居中对齐:

11、在在一行一列中宽800的表格边框线2个像素的表格后插入一个5行一列的表格写入文字,修改背景色:

12、将文件另存为index.html后;删除中间部分可以继续使用首尾位部分制作其他页面。命名gongg.Html

二、资讯页面制作

1、插入一行一列的宽800的单元格后在里面插入一个

一行3列宽800的单元格在第一行中先插入一行

一列插入标题在插入一个空白一行一列后插入8

行列:

2、输入文字后再插入一行一列空单元格效果如图:

3、在第三个单元格内直接输所需要的文字并作效果:

4、在中间的单元格内插入4行一列输入相应内容文件

另存为zx.htm格式。l

5、点击播放链接内容里将zx.html一行3列宽800的

单元格第2、3单元格内容删除单元格合并插入5

行5列并插入动画

6、给flash文件命名后给播放按钮加控制:

7、给flash文件命名后给暂停按钮加控制:

8、世园会先建一个一行一列宽800的单元格将文字先

输入进去:

9、在相应的位置插入图片,调整相片位置:

10、做业内链接,在页面的关键字位置加入命名锚记:

11、将业内链接做好文字连接和锚记对应:

三、游园指南制作

1、gongg.Html中建立一个一行一列宽800的表格插入

图片后做热点:

2、将做好的网页另存为yyzn.html后删除图片插入一

列三行的表格在中间位置再插入四行一列表格插

入图片及文字:

3、左右两边做法和上述重复效果如下:

四、图看世园制作

1、gongg.Html插入两行三列宽800的表格表格线粗细

2个像素颜色深绿色

2、在每个单元格中插入图片调整大小并居中对齐:

3、将图片插入完毕,并且居中对齐:

五、游客投诉制作

1、gongg.Html插入一行一列800的表格内插入表

2、在表单内部再插入16行一列的表格宽800并输入信

息插入文本字段:

3、将文字和所需的组件做完后让组件对齐:

4、在行为面板中加入表单检查:整张网页做完。

网页设计与制作实例教程

网页设计与制作实例教程 习题答案 第1章网页与网站基础 一、选择题 1.A 2.B 3.C 4.C 5.A 二、判断题 1.√2.×3.√4.×5.√ 三、问答题 略 第2章网页规划设计 一、选择题 1.D 2.A 3.C 4.A 5.C 二、判断题 1.×2.×3.×4.√5.√ 三、问答题 1.答:网站需求分析一般包括三个阶段的内容:网站背景分析、总体需求分析、具体需求分析。(每个阶段可再详细描述。) 2.答:可从以下几个方面来阐述网站设计的原则:①日期、时间和数字;②欢迎词; ③弹出窗口和引导页面;④新闻和公告信息;⑤网址;⑥控件;⑦链接;⑧主页内容 3.答:打开新浪网首页,分析其布局类型。(答案略) 4.答:网页色彩搭配方法可从以下两个方面去阐述:①根据页面风格以及产品本身的诉求确定主色;②根据主色确定配色。 网页色彩搭配技巧可从以下几个方面去阐述:①用一种色彩;②用两种色彩;③用一个色系;④用黑色和一种色彩以及色彩搭配忌讳的方面。 5.答:打开当当网,具体分析其规划过程。(答案略) 第3章初识网页制作软件 一、选择题 1.C 2.C 3.B

二、填空题 1.代码、拆分、设计2.文件、资源、规则3.超级链接 三、操作题 略 第4章制作网页内容 一、选择题 1.D 2.B 3.A 4.D 5.ABD 6.D 7.B 8.D 9.A 10.A 二、判断题 1.√2.√3.×4.√5.√6.√7.√8.√9.×10.√三、操作题 略 第5章设置网页超级链接 一、选择题 1.D 2.D 3.A 4.D 5. C 二、判断题 1.×2.×3.×4.√5.× 第6章使用CSS样式美化网页 一、选择题 1.B 2.C 3.C 4.B 5.A 6.D 7.D 8.D 9.B 10.C 11.A 12.A 13.C 14.D 15.D 16.A 17.A 18.B 19.D 20.D 二、简答题 1.×2.×3.×4.×5.×6.×7.√8.×9.√10.√11.×12.×13.×14.√15.√16.√ 第7章规划布局网页 一、选择题 1.B 2.A 3.B 4.B 5.D 二、简答题

个人网页制作全过程

个人网页制作全过程 [日期:10-12] 来源:作者:[字体:大中小] 如何制作个人网页全过程,送给刚学做网页的朋友们 第一讲网页的基本知识和FrontPage入门 一、网页的基本知识 1、网站与网页 我们在因特网上浏览时,看到的每一个页面,称为网页,很多网页组成一个网站。一个网站的第一个 网页称为主页。主页是所有网页的索引页,通过单击主页上的超链接,可以打开其他的网页。正是由于主 页在网站中的特殊作用,人们也常常用主页指代所有的网页,将个人网站称为“个人主页”,将建立个人网 站称为“网页制作”。 2、怎么建立个人网站? 要建立一个个人网站,必须经过网页制作、网站(页)发布和网站维护三个阶段 1)网页制作 一个网站和一本杂志一样,都是展示信息的载体,只有能提供他人需要信息(内容)的网站才能吸引 他人访问。这些都要靠制作有内容的网页来完成。确定网站主题和后,制作网页是建立个人网站的首要工作。 每个网页基本上都是一个HTML(Hyper Text Markup Language,即超文本标识语言)文件,所以网页文件的扩展名一般是.HTM或.HTML。主页文件的文件名字index.htm或index.html。 一般在电脑上写文章使用Word、Wps等文字处理软件,而制作网页则可使用Frontpage等网页制 作工具。 2)网页发布 做好的网页必须发布到因特网上,才能被大家看到。所谓发布到因特网上实际上就是将网页文件放到 始终与因特网联机的计算机上,这种计算机被称为“服务器”。实际上家里的PC机安装相应的服务器软件 且有固定的IP地址也可以做服务器,但一般都借用单位网站的服务器或租用一些空间提供商的服务器空间。这就和你要开商店必须租用一个场地一样。 3)网站维护 网页发布后就可供大家访问了,不管在什么地方,只要是与和因特网相连的计算机都可以访问到你的 网页。但这没有万事大吉。就和报纸、杂志一样,总是老内容,也就没人来访问了。需要经常更新,补充 新内容。另外网页上的错误也需要及时改正。实际上网站维护是网站建设的主要工作量。 2、什么软件可以做网页? 假如,你熟悉文字处理的相关软件,你不用专用软件,也可以作出网页来。比如,用Word,用Wps,甚至用你计算机附件自带的记事本也行。不过用Word做出来的网页体积太大,用记事本做网页则要会用一些HTML语言,而用HTML来制作网页是一件非常麻烦的事。FrontPage等网页制作工具则使我们可 以不必和这些难记、难懂的HTML代码打交道就作出较好的网页来。 初学的人,用微软公司的frontpage比较好,它的优点是易学易懂,上手快。FrontPage是微软公 司Office系列办公软件中的一个,它很好地实现了主页制作者与HTML的分离。就像在Word中编辑文 本一样,我们只需要在编辑器中输入文本或图片,并设置好格式,很快就可以作出一个简单的网页了。 除了Frontpage以外,还有许多制作网页的软件,如Hotdog等,其中最著名的是Macromedia公司的“网页三剑客”即Dreamweaver(网页制作工具)、Flash(动画制作工具)和Fireworks(图像编 辑工具)。 假如,你有了一定基础,还是用“网页三剑客”好。它们是专用的网页制作软件,用它们制作的网页, 体积小,占用资源少,兼容性好。 所以本讲座也从FrontPage入手学习网页制作。大家先学好FrontPage,打好基础,如果将来准备

网页制作基础教程

网页制作基础教程 一、什么是HTML HTML(超文本标记语言)是网页中使用的语言,他能被网页浏览器(IE或Netscape)解释,从而显示出丰富多彩的信息(图片、文字、声音、影象、动画等)。 制作网页前首先要弄懂什么是HTML。 在IE中点击"查看"→"源文档",就能看到该网页的HTML代码。下面是个网页文档(model.htm)的HTML代码: 这里是标题

第一段文字。

第二段文字。

【操作】请在记事本中输入以上代码,命名为test1.htm,存于D盘,然后双击打开看看。 标记一般是成对出现的,#FFFFFF表示使用的颜色是白色。 ...

... ...之间是该网页的标题 charset=gb2312表示语言字符集信息是中文简体,如big5则是中文繁体。 ...之间是网页的正文内容 表示网页的背景色是白色,默认的文字颜色是白色。

...

之间是h1号标题字

...

之间是h2号标题字 ...之间的文字为红色 HTML是一套国际标准,其标记有几百种,您并无需全部了解他们,只要记住其中常用的十几种,就能够做出很漂亮的网页来。 常用的标记举例:

简单网页制作实验总结报告

《大学计算机基础》 实验报告 专业名称: 电子商务2班 学号: xxxxxxxxxxx 姓名: x x 指导教师: x x 2011年12月24日

目录 第一章网站主题设计说明 (1) 1.1 主题内容 (1) 1.2 设计思路 (1) 第二章网站内容设计 (2) 1.1 链接1标题 (2) 1.2 链接2标题 (2) 1.3 flash制作说明 (2) 第三章网站技术难点 (3) 第四章心得体会..................................... ..... ......................... (4)

第一章网站主题设计说明 1.1 主题内容 (1) 网站主题为“四季の花”,包括春夏秋冬四个季节的比较典型的花朵及有关花的诗句,色彩缤纷,十分艳丽夺目。 1.2 设计思路 (2) 大多网站都设计的关于音乐,影视,购物等非常热门的东西,本站设计的主题是花,能让人们在闲下来的时候看看花,品品诗歌,所以做有关花的网页是个不错的选择。同时,让人们分清楚春夏秋冬都各有什么典型的花。

第二章网站内容设计 1.1链接1标题:春の花 春天是生命的季节,在这个季节里,万物复苏。所以就找了虞美人,桃花,牡丹,以及海棠花来作为春天的代表。同时配有与这些花有关的诗句。 1.2 链接2标题:夏の花 夏天充满了激情与阳光,我找了兰花,荷花,百合花等来代表这个季节,色彩艳丽,十分醒目夺人。 1.3 链接3标题:秋の花 大丽花,菊花,月季和牡丹花都竞相出现在本网页,色彩缤纷,赏心悦目。 1.4 链接4标题:冬の花 蝴蝶兰,水仙,迎春花,梅花是冬季的代表,他们刻画了一副傲立冬天的坚强的姿态。

frontpage2000网页制作教程(完全版)

第一课从一个网页开始 Frontpage2000教程第二课编辑网页 Frontpage2000教程第三课使用图形 Frontpage2000教程第四课超链接 Frontpage2000教程第五课使用表格 Frontpage2000教程第六课组件的使用 Frontpage2000教程七课使用框架 Frontpage2000教程第八课使用多媒体 Frontpage2000教程第九课站点操作 Frontpage2000教程第十课表单设计 Frontpage2000教程第十一课创建讨论组 Frontpage2000教程第十二课站点的发布 frontpage2000教程第一课从一个网页开始 作者:未知阅读人次:5527 文章来源:未知发布时间:2004-11-20 网 友评论(7)条 认识Frontpage2000 你是否紧跟时代的潮流上了网?你在聊天室里是否听过别人聊起自己的个人主页,你会不会觉得自己没有个人主页就落伍了?有没有想过自己也要做一个主页?想过?那你还瞎呆在那里干什么?赶快阅读本教程,你就该学会制作自己的主页了。 本教程教你学会使用微软公司的Frontpage2000,学会干什么?当然是做你的个人主页啦。或许你认为制作主页是一门很深奥的工作,需要懂得大量的计算机知识。我现在要告诉你,你错了。在这个流行图形操作系统的今天,制作主页不再需要你去学习复杂,烦躁的HTML语言了,你只需要知道一个概念:主页(也称网页,怎么样称呼都无所谓)就象一张白纸,你可以在上面写字,画画等等,通过自己的设计,那张白纸可以变成很漂亮。做主页时就是这个概念,只不过我们写字,画画是用笔和白纸,而做主页我们是用鼠标,键盘和Frontpage

制作一个简单的网页

制作一个简单的网页 教学目标: 1、知识目标:了解网页的基本概念以及建立网站的一般方法,学习制作只有文字的网页. 2、能力目标:让学生通过学习掌握建立网站的方法,学生通过学习能够建立只有文字网页. 3、情感目标:培养学生主动实践,勇于实践的勇气,和敢与参与的意识。教学重点: 建立网站制作网页 教学难点: 建立网站制作网页 教法、学法分析: 由于本节课作为制作网页的基础知识,学生可以根据所学知识自己进行操作,教师在此过程中进行适当的指导既可。为了让学生能够充分了解网页的概念,采用教师讲解的教学方法,为了培养学生主动实践的勇气与参与意识,采用学生自主学习的方法。 教学过程: 引入: 我们已经学习过因特网的基础知识和应用,实际体验了“网上冲浪”的滋味,网上世界的确很精彩!但是我们有什么方法能让更多的人了解自己或者自己的学校或家乡呢?最好的方法就是制作一个关于自己或家乡的网页并把它发布到网上。通过了今天的学习我们就能够做到了。

一、网页的概念: {通过多媒体展示“我的家乡”网页,向学生介绍网页的组成,让学生了解网页的概念,并做出总结} 网页就是把用文字、图形、声音、影视等多媒体形式表达的信息,以及分布在因特网上的相关信息,相互链接起来而构成的一种信息表达方式。 二、制作网页前的准备工作 1、认识网页制作工具FrontPage {学生打开FrontPage软件,通过以前学习过的知识认识该软件的窗口,并了解各栏中按钮的作用。} 2、准备好网页素材 [学生在因特网上查找关于“我的家乡”的相关资料,并保存在自己的文件夹中,以便在制作网页时作用。] 三、建立“我的家乡”网站 [根据“做一做”建立一个自己的网站“命名为”我的家乡。] 布置作业: 构思自己的网站,并在小组中进行讨论。 [学生思考问题,并进行操作。] {建立网站后,我们还需要在网站中加入网页,这样我们的网站才能充实起来。} [学生在自己的文件夹中建立一个站点命名为“我的家乡” 根据“做一做”中的提示制自己作主页并保存。然后分别建立其他几网页陕西风景欣赏、陕西古诗文欣赏、自我介绍。]

怎样制作网页制作网页详细操作步骤

怎样制作网页制作网页详细操作步骤 怎样制作网页制作网页详细操作步骤 制作网页主要有以下一些工具 Frontpage:office自带的一个工具,操作简单,实用,学起来 比较轻松,功能不咋地,我不太喜欢。 Dreamweaver:这是网页三剑客之一,专门制作网页的工具,可 以自动将网页生成代码,是普通网页制作者的首选工具,界面简单,实用功能比较强大。建议初学者选用。 另外一个工具就是代码编辑工具,例如写字本、EditPlus等, 这些工具主要编辑asp等动态网页。 大型的网站往往还需要数据库的支持,所以还得懂数据库。sql、甲骨文等。 总之,掌握好网页制作,能独立完成一个网站的制作工作,那就不要考虑吃饭问题。随便混就好了! 网站设计八步骤 由于目前所见即所得类型的工具越来越多,使用也越来越方便,所以制作网页已经变成了一件轻松的工作,不像以前要手工编写一 行行的源代码那样。一般初学者经过短暂的学习就可以学会制作网页,于是他们认为网页制作非常简单,就匆匆忙忙制作自己的网站,可是做出来之后与别人一比,才发现自己的网站非常粗糙,这是为 什么呢?常言道:“性急吃不了热豆腐”。建立一个网站就像盖一幢 大楼一样,它是一个系统工程,有自己特定的工作流程,你只有遵 循这个步骤,按部就班地一步步来,才能设计出一个满意的网站。 一、确定网站主题 网站主题就是你建立的网站所要包含的主要内容,一个网站必须要有一个明确的主题。特别是对于个人网站,你不可能像综合网站

那样做得内容大而全,包罗万象。你没有这个能力,也没这个精力,所以必须要找准一个自己最感兴趣内容,做深、做透,办出自己的 特色,这样才能给用户留下深刻的印象。网站的主题无定则,只要 是你感兴趣的,任何内容都可以,但主题要鲜明,在你的主题范围 内内容做到大而全、精而深。 二、搜集材料 明确了网站的主题以后,你就要围绕主题开始搜集材料了。常言道:“巧妇难为无米之炊”。要想让自己的网站有血有肉,能够吸 引住用户,你就要尽量搜集材料,搜集得材料越多,以后制作网站 就越容易。材料既可以从图书、报纸、光盘、多媒体上得来,也可 以从互联网上搜集,然后把搜集的材料去粗取精,去伪存真,作为 自己制作网页的素材。 三、规划网站 一个网站设计得成功与否,很大程度上决定于设计者的规划水平,规划网站就像设计师设计大楼一样,图纸设计好了,才能建成一座 漂亮的楼房。网站规划包含的内容很多,如网站的结构、栏目的设置、网站的风格、颜色搭配、版面布局、文字图片的运用等,你只 有在制作网页之前把这些方面都考虑到了,才能在制作时驾轻就熟,胸有成竹。也只有如此制作出来的网页才能有个性、有特色,具有 吸引力。如何规划网站的每一项具体内容,我们在下面会有详细介绍。四、选择合适的制作工具 尽管选择什么样的工具并不会影响你设计网页的好坏,但是一款功能强大、使用简单的软件往往可以起到事半功倍的效果。网页制 作涉及的工具比较多,首先就是网页制作工具了,目前大多数网民 选用的都是所见即所得的编辑工具,这其中的优秀者当然是Dreamweaver和Frontpage了,如果是初学者,Frontpage2000是首选。除此之外,还有图片编辑工具,如Photoshop、Photoimpact等;动画制作工具,如Flash、Cool3d、GifAnimator等;还有网页特效 工具,如有声有色等,网上有许多这方面的软件,你可以根据需要 灵活运用。

教你制作静态网页的方法

教您制作静态网页的方法 一、网页设计基础 1、熟悉Dreamweaver 8的工作环境 2、创建新站点 创建本地站点:站点----管理站点----新建----站点(前三步也可直接从“新建站点”进入下面的设置向导对话框)----跟随向导设置直至完成 3、网页文件的基本操作 a、创建、打开与保存网页文件 创建:文件----新建----创建 打开:文件---打开----选择欲打开的文件 或者在右边的文件浮动面版中选择打开 保存:文件---保存或另存为 b、设置网页的页面属性 修改---页面属性---然后设置(标题、背景、背景图像、文本等) c、设置网页对象的颜色 网页对象,如页面背景、文字、链接都经常需要设置颜色。 可在各自对应的属性面版中设置。 d、网页文本的输入与属性设置 文本可键入、导入、粘帖 文字可设置字体、大小、颜色、格式等。 键入空格的方法:1、汉字输入法设置为全角方式,按空格键即可输入。2、属性面版格式中:预先格式化的 换行:ENTER、SHIFT+ENTER 实例练习: 1、输入以下文字 书签夹在诗集里, 落叶夹在深秋里。 喜悦夹在生活里, 追求夹在人生里。 2、第一次设置格式为“无”,字体为“华文行楷”,字体颜色为“红色”,字号为“5号”,添加项目符号。然后保存、预览。 3、第二次设置格式为“标题一”,字体为“楷体”,字体颜色为“蓝色”,字号为“5号”,添加项目符号,对齐方式为“居中”。然后保存、预览。 比较两次设置的效果。 e、网页图片的插入与属性设置 插入图片,在对话框中选择图片。(最好在建立站点时将欲用的图片素材复制到本地站点目录中) 插入图像占位符,在图片准备好后再加入图片。加入方法:1、双击图像占位符;2、点“属性面版”中的“指向文件”,拖到右边文件中要插入的文件处。

会考专题之网页制作操作题

会考专题之网页操作题 上机前准备:请同学们们下载天安门的图片、一张蛋糕图片到c:\windows文件夹下,并分别取名为“天安门.jpg”和“蛋糕.jpg”以备后面操作使用。 用Frongtpage(网页制作软件)实现下列操作: 1、设置网页背景、插入超链接 C:\ata_mso\testing\154752-566\frongtpage_bo3\国庆.htm页面进行以下操作: (1)将网页的背景颜色改为红色。 (2)在网页上输入文本“天安门”,并把天安门建立超链接,链接到图片天安门.jpg (3)将该网页另存为“中华.htm”仍保存在: C:\ATA_MSO\testing\154752-566\frongtpage_bo3\文件夹下。操作步骤: ①点击屏幕左下角的图标启动frontpage。 ②设置网页背景:右单击网页空白处,执行“网页属性…”,打开格式标签,设置背景颜色为红色。 ③插入超链接:输入文本“天安门”→选中“天安门”→单击“插入”菜单→选择“超链接”→在左边选择“原有文件或网页”→然后在查找范围中按照给定的位置找到并选择“天安门.jpg”→确定。 ④保存:“文件”菜单→“另存为”→找到保存位置→文件名为“中华.htm”→保存。

2、设置网页标题、输入文字、插入图片 用Frontpage创建空白页面并进行以下操作:(1)将网页标题设为“爱我中华”。(2)在网页中输入文字“隆重庆祝新中国成立60周年”并将字体设置为黑体、24磅、居中,颜色为红色。(3)在文字下放插入一张名为天安门.jpg的图片 (4)将该网页命名为“index”,保存在C:\windows文件夹下。操作步骤: ①点击屏幕左下角的图标启动frontpage。 ②设置网页标题:右单击鼠标,执行“网页属性…”,在常规标签的标题栏中输入标题,“爱我中华”→确定。 ③在网页中输入:隆重庆祝新中国成立60周年—选中文字—格式—字体—依次设置字体为黑体、字号为24磅—确定,利用“格式工具栏”设置:对齐方式为居中、字体颜色为红色。 ④插入图片:“插入”菜单→图片→来自文件→选定“天安门.jpg”→插入。 ⑤保存。“文件”菜单→保存→找到保存位置→文件名为“index.htm”,保存类型选“网页”→保存。 3、设置网页背景、插入表格、插入图片 用Frontpage对d: \birthday.htm页面进行以下操作: (1)将图片d:\图片\背景.jpg 设置为该网页的背景

简单的网页制作教程-设计一个个人网站

题目:设计一个个人网站 一、要求: 1.使用Dreamweave网页工具制作一个个人网站; 2.包含至少四个网页: 包括首页、个人简介、个人相册等(可随意设计),网页之间用超链接相连。 3.网页中要有图片和文字内容,用表格进行页面布局; 4.添加至少两种行为,并为首页添加背景音乐。 5. 在网站中设计一个表单页面。 6. 首页必须包含页面标题,动态按钮导航栏。 首先新建一个文件夹,文件夹的名字不能为汉字,做网站所有的路径都必须用字母或者数字, 不能用汉字,我们就用名字吧,譬如说名字张三,那文件夹名字就是zs,如图 打开Dreamweaver软件,得到图 做网页要新建站点,关于站点配置服务器什么的,这里不讲了,只讲建立站点。 选择站点——新建站点。 我们建的文件夹就是站点根文件夹。

新建站点后得到这样一个界面 点选高级,得到界面 站点名称与我们建文件夹得名字相同,zs填进去就可以了本地根文件夹就是我们新建的那个文件夹zs, http地址为http://localhost/zs

接下来选择左侧栏里远程信息 点击无后面的那个三角,选择本地网络,远端文件夹同样选择我们新建的那个文件夹 接下来点选左面菜单里的测试服务器, 点选访问后面那个三角,选择本地网络,测试服务器文件夹也为我们建好的文件夹zs,在url前缀后面加上zs

然后点击确定就可以了得到这样一个界面。 下面看老师的第一条要求,是要至少四个网页,那我们就做四个 单击新建,然后单击 接下来,选择 然后单击创建,接下单击文件——保存,保存这个文件,保存在我们一开始建好的文件夹里面,保存名字不能是汉字,只能是字母或者数字,因为我们只坐四个网页,可以简单一点,把这四个网页命名为a、b、c、d,或者1、2、3、4,当然一个网站默认的索引首页名为index,这里也用index,

网页制作动态流程简介

实训13 FrontPage网页制作 1.实训目的 掌握FrontPage网页制作的基本方法。 掌握设置网页超链接、滚动字幕、悬停按钮等操作方法。 掌握网页浏览的方法。 2.实训内容 FrontPage的启动与关闭。 制作简单的网页。 对制作的网页进行编辑和修饰,效果如图11-34所示。 图11-34 效果图 3。实训步骤 (1)创建网页 启动FrontPage应用程序,单击“文件”下拉菜单中“新建”命令,弹出“新建”任务窗格,选择“新建网站”选项区的“由一个网页组成的网站…”,弹出“网站模板”对话框,选择“常规”选项卡中的“只有一个网页的网站”模板,如图11-35所示。 单击“确定”。

图11-35 “网站模板”对话框 (2)保存网页 单击“文件”菜单中的“另存为”命令,打开“另存为”对话框。 选择保存位置“我的文档\我的个人网站”,在“文件名”文本框中,输入“index”,在“保存类型”下拉列表框中,选择“网页”选项。单击“更改标题”按钮,将网页标题改为“我的个人主页”,单击“保存”按钮。 (3)插入滚动字幕 将光标定位于网页第一行位置。 单击“插入”菜单下的“Web组件”命令,弹出“插入Web组件”对话框,选择“动态效果”中的“字幕”,单击完成。 弹出“字幕属性”对话框,在“文本”框中输入“欢迎光临我的个人网站”,单击“样式”按钮,弹出“修改样式”对话框,再单击“格式”按钮,选择“字体”选项。 弹出“字体”对话框,设置字体为隶书、加粗、36pt、紫红色,然后按“确定”返回。 单击“预览”视图,可观看字幕效果。 (4)插入水平线 回到“设计”视图后,换行将鼠标指针置于第二行位置。 单击“插入”菜单下的“水平线”命令。 双击水平线,打开“水平线属性”对话框。 设置宽度为100%,高度为5像素,水平居中对齐方式,颜色为紫色。 (5)插入表格 将鼠标指针置于水平线的下一行,单击“表格”菜单中的“插入”“表格”命令,弹出“插入表格对话框。 在“大小”选项组中,设置表格的行数为4,列数为3。 在“布局”选项组中,设置表格的对齐方式为“居中”,边框粗细为1,单元格间距为1,指定宽度为650像素,指定高度为500像素。 单击“确定”按钮,一个表格便插入了网页中。 选中表格第一列,单击右键,弹出一快捷菜单,选择“合并单元格”命令。 在合并后的单元格中单击右键,再弹出的“快捷菜单”中选择“单元格属性”,在弹出的“单元格属性”对话框中作如下设置:对齐方式为居中,指定宽度为100像素,指定高度为550像素,行跨距为4,列跨距为1,背景颜色为粉色。

网页制作步骤

网页制作步骤 一、确定网站主题网站主题就是你建立的网站所要包含的主要内容,一个网站必须要有一个明确的主题。特别是对于个人网站,你不可能像综合网站那样做得内容大而全,包罗万象。你没有这个能力,也没这个精力,所以必须要找准一个自己最感兴趣内容,做深、做透,办出自己的特色,这样才能给用户留下深刻的印象。网站的主题无定则,只要是你感兴趣的,任何内容都可以,但主题要鲜明,在你的主题范围内内容做到大而全、精而深。二搜集材料明确了网站的主题以后,你就要围绕主题开始搜集材料了。常言道:“巧妇难为无米之炊”。要想让自己的网站有血有肉,能够吸引住用户,你就要尽量搜集材料,搜集得材料越多,以后制作网站就越容易。材料既可以从图书、报纸、光盘、多媒体上得来,也可以从互联网上搜集,然后把搜集的材料去粗取精,去伪存真,作为自己制作网页的素材。三、规划网站一个网站设计得成功与否,很大程度上决定于设计者的规划水平,规划网站就像设计师设计大楼一样,图纸设计好了,才能建成一座漂亮的楼房。网站规划包含的内容很多,如网站的结构、栏目的设置、网站的风格、颜色搭配、版面布局、文字图片的运用等,你只有在制作网页之前把这些方面都考虑到了,才能在制作时驾轻就熟,胸有成竹。也只有如此制作出来的网页才能有个性、有特色,具有吸引力。如何规划网站的每一项具体内容,我们在下面会有详细介绍。四、选择合适的制作工具尽管选择什么样的工具并不会影响你设计网页的好坏,但是一款功能强大、使用简单的软件往往可以起到事半功倍的效果。网页制作涉及的工具比较多,首先就是网页制作工具了,目前大多数网民选用的都是所见即所得的编辑工具,这其中的优秀者当然是Dreamweaver和Frontpage了,如果是初学者,Frontpage2000是首选。除此之外,还有图片编辑工具,如Photoshop、Photoimpact等;动画制作工具,如Flash、Cool 3d、Gif Animator等;还有网页特效工具,如有声有色等,网上有许多这方面的软件,你可以根据需要灵活运用。五、制作网页材料有了,工具也选好了,下面就需要按照规划一步步地把自己的想法变成现实了,这是一个复杂而细致的过程,一定要按照先大后小、先简单后复杂来进行制作。所谓先大后小,就是说在制作网页时,先把大的结构设计好,然后再逐步完善小的结构设计。所谓先简单后复杂,就是先设计出简单的内容,然后再设计复杂的内容,以便出现问题时好修改。在制作网页时要多灵活运用模板,这样可以大大提高制作效率。六、上传测试页制作完毕,最后要发布到Web服务器上,才能够让全世界的朋友观看,现在上传的工具有很多,有些网页制作工具本身就带有FTP 功能,利用这些FTP工具,你可以很方便地把网站发布到自己申请的主页存放服务器上。网站上传以后,你要在浏览器中打开自己的网站,逐页逐个链接的进行测试,发现问题,及时修改,然后再上传测试。全部测试完毕就可以把你的网址告诉给朋友,让他们来浏览。七、推广宣传网页做好之后,还要不断地进行宣传,这样才能让更多的朋友认识它,提高网站的访问率和知名度。推广的方法有很多,例如到搜索引擎上注册、与别的网站交换链接、加入广告链等。八、维护更新网站要注意经常维护更新内容,保持内容的新鲜,不要一做好就放在那儿不变了,只有不断地给它补充新的内容,才能够吸引住浏览者 在做我的个人网页这段时间里,我学到了好多东西,对网页有了一定的了解,当初上网,打开网页浏览时,从不去想这网页是怎么做的,我只是去看它的内容,网页做的好不好很少去问,只要有自己要的内容就行了。然而现在不一样了,现在自己要去学着做自己的网页了,这时候我才意识到,去看别人做的网页,不能光看内容了,它的布局,它的设计,对我的网页是有帮助的,我一定要去看,学习别人的特长。从此,不管上什么样的网站,看什么样的网页,我都不光去看它们的内容了,我还会去看它们的布局,看它们的代码,有的布局如此巧妙让我难以想像,这里面蕴涵了太多太多的技巧。好的网页我都迫不及待的把它们下载下来,以便日后为我所用。 制作过程中,有时碰到一个自己不怎么会的技巧,真的很着急,热锅上的蚂蚁一样,但蚂蚁

简单网页制作教学设计

《简单网页制作》教学设计 一、设计意图: 目前网络对学生的吸引力很大,学生上网都会浏览网页内容,对网页的制作也有很大的兴趣,想知道一个网页是怎样制作成功的。但是网页的制作相对复杂,对于一些的代码的编辑学生也较难理解,因此本课选择了FrontPage网页制作工具,引导学生简单的了解网页制作的过程,采用了所见即所得的形式避开代码的繁琐,调动学生自行设计的积极性,对网页制作有一个简单的入门了解。 二、教学目标 1、知识目标 (1)理解网页制作的简单步骤。 (2)学会用FrontPage的制作简单网页。 2、技能目标 (1)掌握的FrontPage的背景添加的操作。 (2)掌握FrontPage的文字编辑、艺术字、图片的插入的操作。 (3)知道HTML的简单编码。 3、情感目标 (1)培养学生的口头表达能力、操作和分析概括能力。 (2)培养学生展示自我、表现自我的能力。 (3)培养学生独立思考问题、解决问题的能力和团结协作精神。 (4)在网页制作的过程中,提高学生对FrontPage的认识。三、重难点、问题预测及对策

1、重难点 (1)重点:FrontPage的基本操作。 (2)难点:HTML的理解。 2、问题预测 本节课是网页制作的第一节内容,需要学生掌握的技能并不困难。由于在学习网页制作的过程中,需要培养学生的制作网页的积极性,才能引发学生对网页制作的兴趣,实现自主学习,自主开发。 3、对策 以制作班级自己的主页引起学生注意,引发学生的兴趣。让学生运用FrontPage的插入、背景修改等工具,通过作品展示激发学生的动力。 在教学过程的设计上,通过自主设计自己的个人主页来达到解决一个个知识点的目的,同时通过学生自己创作,引导学生正确的审美情趣和创作激情。 四、课前准备 精美网站、优秀班级主页、素材图片等。 五、教学流程 1、情感导入:通过优秀班级主页欣赏,引发学生兴趣,跃跃欲试。 2、自主学习:引导学生做自己班级的主页。 3、示范教学:学生归纳总结,老师帮助、提醒,使学生掌握正确的操作步骤。

网页制作教程,网页制作入门教程

选修课《网页设计》实践考核题 题目:设计一个个人网站 一、要求: 1.使用Dreamweave网页工具制作一个个人网站; 2.包含至少四个网页: 包括首页、个人简介、个人相册等(可随意设计),网页之间用超链接相连。 3.网页中要有图片和文字内容,用表格或框架进行页面布局; 4.添加至少两种行为,并为首页添加背景音乐。 5. 在网站中设计一个表单页面。 6. 首页必须包含页面标题,动态按钮导航栏。 下面我们大家统一一下软件版本,我用的是网页三剑客cs3版本的,大家可以去迅雷下载,因为我们要用到flash 建议大家也按装好flash 首先新建一个文件夹,文件夹的名字不能为汉字,做网站所有的路径都必须用字母或者数字, 不能用汉字,我们就用名字吧,譬如说名字张三,那文件夹名字就是zs,如图

打开Dreamweaver软件,得到图 做网页要新建站点,关于站点配置服务器什么的,这里不讲了,只讲建立站点。选择站点——新建站点。 我们建的文件夹就是站点根文件夹。 新建站点后得到这样一个界面 点选高级,得到界面

站点名称与我们建文件夹得名字相同,zs填进去就可以了 本地根文件夹就是我们新建的那个文件夹, http地址为http://localhost/zs 接下来选择左侧栏里远程信息 点击无后面的那个三角,选择本地网络,远端文件夹同样选择我们新建的那个文件夹

接下来点选左面菜单里的测试服务器, 点选访问后面那个三角,选择本地网络,测试服务器文件夹也为我们建好的文件夹zs,在url前缀后面加上zs 然后点击确定就可以了得到这样一个界面。 下面看老师的第一条要求,是要至少四个网页,那我们就做四个 单击新建,然后单击 接下来,选择

制作网页的步骤

■制作个人网页的步骤 一、准备材料 你首先做一个小计划,准备在主页上告诉人家什么?比如介绍三个方面:自我介绍,我的爱好,我的工作,那你就先起一个总目录(文件夹,比如d:\html),来放你的所有文件,然后再在这个目录建立三个子目录:myself,interest,job。文件名你可以任意,但最好全部小写,因为有的主机要认大小写。然后将你的材料copy进相应的子目录。比如你要在你的主页里展示你的靓照,那就将你的照片扫描成JPG格式的文件,放在myself的目录下. 要注意,网上只能使用JPG和GIF两种图象格式,其他诸如BMP和TIF等很通用的格式都不能用在网上,因为它们太大了,但你可以用图象软件进行转换,比如Office97的照片编辑器。把你准备在你主页上出现的图象放进相应的目录里后,你就可以开始制作了。 二、开始制作 你无须去记复杂的HTML语言,你可以用Netscape4.0或者WORD7.0,我用的是Frontpage.打开Netscape,在file菜单里选EditPage,便可以制作了.文字的处理基本跟Word没什么两样,关键是插入图片和产生链接.我们先做关于你自我介绍的一页,你先写上“大家好,我是superboy,下面是我的照片:”这时要放图片了,只须点击Insert菜单,选取Image,在Choosefile里选取你的图象文件即可,然后把这个文件保存为myself.html文件,放在myself 的目录下。好,现在必须做封面了,你在封面写:“欢迎来到superboy的主页”以下是“自我介绍,我的爱好,我的工作”。你的自我介绍要链接到下一页去,你只须用鼠标选“自我介绍”后按鼠标右键,再选createlink,然后再选你myself目录下的myself.html,就将“自我介绍”链接到下一页了,以后在浏览器中一按,就可以跳到镶有你靓照的页面啦。 在你的封面做好了所有链接和图片后,记住你必须将这一页保存为index.htm(有的主机要求必须为index.html),因为网页默认的主页名称是index.制作主页其实很简单,只要多实际制作,工多艺熟。还可以拿来主义,在网上看到什么好的主页,用另存为功能保存为.html 格式的文件,细细研究人家是如何做的。还可以借用网页模版来搞,我的就是~~~~~~ 三、将你制作好的安放在网上 要在网上安你自己的家,你必须先申请一个主页空间,即向某一个主机申请一快硬盘空间。现在有较多的主机提供免费主页空间,具体见实用链接栏目。这些主机不仅提供免费个人主页空间,并且还提供留言簿、计数器等很有用的功能。只要到有关站点申请即可,具体方法,参考相关题目。申请完成以后用FTP将你所有的主页文件上传至主机指定的目录就可以了! 需要注意的是,一定要保持网页的相对位置,否则会看不到网页的,有很多朋友都问我:为什么我的网页传上去了可是看不到,老是出现网页错误呢?其实他们都是因为位置的问题,只要把位置改动一下就可以的了。 怎样申请个人主页?到哪申请? https://www.360docs.net/doc/6b5902154.html,里面慢慢挑一个个人网页! 网页制作网址大全 https://www.360docs.net/doc/6b5902154.html,/page/060.htm 网站设计八步骤 一、确定网站主题 网站主题就是你建立的网站所要包含的主要内容,一个网站必须要有一个明确的主题。特别是对于个人网站,你不可能像综合网站那样做得内容大而全,包罗万象。你没有这个能力,也没这个精力,所以必须要找准一个自己最感兴趣内容,做深、做透,办出自己的特色,这样才能给用户留下深刻的印象。网站的主题无定则,只要是你感兴趣的,任何内容都可以,但主题要鲜明,在你的主题范围内内容做到大而全、精而深。

网页制作教程指导

第一章网页设计基础 教学目的: 本章将带领用户认识Dreamweaver MX,了解其新增功能。在开始学习该软件之前,了解一下Dreamweaver MX 的工作界面的一些简单设置。通过本章的学习,用户能熟悉Dreamweaver MX的工作界面,并能自行设置具有独特的个性化的工作环境。理解DW站点的作用,并掌握建立站点的方法及站点维护的方法。 教学重点: 1、认识Dreamweaver MX。 2、新增功能。 3、Dreamweaver MX主窗口。 4、自定义工作环境。 5、利用Dreamweaver建立站点的方法 教学难点: 1、认识Dreamweaver MX。 2、新增功能。 3、自定义工作环境。 教学方法:讲演法 教学课时:2课时

教学内容与教学过程: 一、介绍网页制作这门课程 1.学习这门课程的目的:让学生掌握HTML语言、以及利用相关网页制作工具制作网页的基本方法与技能。学生通过这门课程的学习,能够具备综合运用专业软件进行小型网站开发和静态网页页面设计的能力,同时积累一定的实践经验,为今后从事相应的网站设计制作工作打下良好基础。 2.这门课程的教学内容:在制作软件上:以网页制作软件DreamWeaver MX为主干进行网页制作教学,同时选择了Flash MX版本来制作网页中的动画素材,选择了图形图像工具Photoshop 7.0版本软件来处理和制作网页中的图片。教学内容安排上按照学生学习网页的渐进规律划以及学校制订的计划主要学习第1、2、3、5、6、9章,主要包括网页制作的基础知识、Dreamweaver MX软件的使用,初学者利用现有的素材设计制作出一个简单的网页;利用Photoshop7和Flash MX软件来美化网页,以及网页布局和用色方面的美术知识,如何设计网页的版面和结构,还要能对供给的素材按照网站的特点进行适当的美化处理;还能掌握中小型网站的建立方法。 3.这门课程的教学和学习方法:教学上以一个个案例为基础,采用项目教学的方法,由浅入深的介绍网页制作的各个知识点;教学中以学生会操作为目的,重视学生动手能力和自学能力的培养同学们学习时除了要掌握相应的操作技能以外,更要重视操作技能的使用,要努力完成每章教学案例的制作以及课后素材案例。在不断的练习过程中熟悉和升华所学的操作技能。同时,要学会学习,即要学会与老师或同学之间技术心得的交流,要学会能自主的依靠其他资源(网络、报纸杂志等)来扩展所学的知识体系。 课前思考: 1、Dreamweaver软件是干什么用的? 2、试用一下Dreamweaver,你觉得这个软件在界面上更象Word还是Photoshop,为什么? 3、试用一下Dreamweaver,按默认格式保存,文件的扩展名是什么? 4、双击网页文件,会自动打开Dreamweaver软件吗?这点上与Word软件相同吗? 1.1 Dreamweaver的基本概念 1、了解Dreamweaver与IE有什么区别? Dreamweaver是制作网页的工具,用它可以生成.htm或.html文件,而IE是浏览网页的工具,用IE只能看网页,而不能改网页,修改网页还是需要网页制作工具。 2、做网页只能使用Dreamweaver一种工具吗? 常用的网页制作软件有Dreamweaver和FrontPage。Dreamweaver由美国Macromedia公司开发,虽然初学者感到比较难学,但它的功能更强大,生成的网页代码质量好,是当今最流行的网页制作工具,适合专业网页设计人员使用,近年来它还获得过不少大奖呢。Frontpage是微软公司开发的Office办公软件中的一部分,比较容易上手,但功能不太强大,我们只在需要时(如向网页中加入微软格式的视频),才会使用FrontPage。 3、Dreamweaver最新版是多少? Dreamweaver从2.0、3.0、4.0、MX到现在最新的MX2004版,平均每过一年就出一个新版。可见计算机是多么的富有活力。今年常用的是MX版,建议大家在家里的电脑上也将这个版本,以便与学校的相同。对于软件,我并不认为版本越新越好,它们的基本功能还是相同的,一般版本越高,对计算机的要求也越高,如果计算机配置不高,初学时还是找个低版本比较好,当然所装的软件必须与书本上的相同,这也是学习其它软件的基本要求。 4、Dreamweaver与Firework、Flash有何关系? 它们都是Macromedia公司的软件,Dreamweaver是网页制作工具,Firework是图形处理工具,与photoshop相似,一般用于网页图形的制作,Flash是动画制作工具,在制作好的网页时,一般先用Firework和Flash先制作好网页中要用到的图形和动画素材,再用Dreamweaver把这些素材做成一张网页,只会Dreamweaver,不会图形处理和动画制作,是做不出好的网页的。有人把这三个软件称作网页设计“三剑客”。 1.2认识DreamWeaver 1.DreamWeaver的作用和特色 2.DreamWeaver功能界面的分解 3.DreamWeaver工作流程 4. DreamWeaver 的版本、安装、打开、保存等操作演示:练习制作第一张网页——作业一在主窗口中输入以下文字,并按以下格式排版,最后把文件以“学号姓名.htm”为名保存在桌面上。注意难点:设置字体、水平线、二个全角空格、回车会自动空一行,Shift+回车就不会空行了。

实验一做一个简单的html网页

实验报告 学生姓名:学号: 一、实验室名称:软件大楼302 二、实验项目名称:用HTML语言制作简单的网页 三、实验原理: 1.网页 (1)网页就是在浏览器上看到的一页,网页也称为Web页。 (2)主页通常是进入网站首先浏览的网页,具有引导用户浏览整个网站内 容的作用。 (3)超链接是网页中的特殊标记。它指向了WWW中的其他资源,如其他 网页、网页的另一个段落、声音文件等。这些资源可以位于自己的计算机上,也可以位于其他计算机上。用作超链接的标记可以是一段文字、一幅图像,也可以是一幅图像的一部分。在浏览网页时,单击超链接就可以跳转到超链接所指向的资源。超链接像一根一根的线一样,将各种网页链接在一起,形成一个庞大的信息网。 2.HTML语言 (1)HTML语言就是超文本标记语言,是网页制作的基础,也是基本的工具,使用其他任何工具制作的网页,最终都要以HTML方式存储在计算机里。 (2)HTML的脚本可用任何一种文本编辑器进行编写,如记事本、Microso ft Word等。保存时要将脚本保存成纯文本格式,扩展名必须是.htm。 (3)HTML脚本的基本结构。HTML脚本总是以标记开头,标记结尾,在和标记之间是HTML的所有内容, 一般情况下它分为两部分:头部和主体。头部总是由和标记定义

的,其中包含了HTML脚本的标题和说明信息;头部下面是HTML脚本的主体部分,它以作为起始标记,作为结束标记,其中所包含的就是在 浏览器中所看到的内容,包括文字、图片、动画等。 3.FrontPage,dreamwerver,notepad 以FrontPage为例,它是一种简单易学的Web管理和网页制作的软件。Front Page2000的窗口,如图1.1所示。 在窗口工作区的左下方是网页视图模式的3个状态按钮:“普通”、“HTM L”和“预览”。网页视图模式的默认状态是“普通”,用于以所见即所得的方式编辑网页。“HTML”网页视图模式用于以HTML语言的方式编辑网页。 制作网页过程中,想查看网页的制作效果,切换到“预览”网页视图模式即可。 切换网页视图使用鼠标单击相应的状态按钮即可。 图1.1 FrontPage 2000的窗口 选用其他网页开发工具也是可以的这里没有限制 四、实验目的: 1.简单了解HTML语言。 2.认识网页以及网页的结构。 3.掌握用HTML语言制作简单网页的方法。 五、实验内容:

相关文档
最新文档