网页制作学习资料.docx

1、网页制作学习资料网页制作学习资料第一课(初步认识网站1、网页是由各种各样的元素 如:文字,图像,和超级链接。2、具体是:标题,页址,文字, “ BANNER ”导航条,站点标识, LOGO ,图像,超级链接。3、网页类型:(按位置分可分为主页与内页; (按表现方式分可分为静态网页与动态网页。4、网页的概念:万维网所说的 3W 或 WWW 是指 WOLD , WIDE , WED 的简称。如:” :是通迅协议, 名; “ index.htm ”是要 访问的文件路径或文件名。 5、 网页中的专用术语:A :超级链接, B :logo 网页宗旨 C :banner 作宣传 (可做近期的广告或活动宣传

2、 D :表单 具有交互性的动态网页, (如会员注册,邮箱申请,资料查索 E :导航条 是这个网站的方向标, 体现这个网站的所有内容,如书的目录一样。6、网站的内容分为:A 门户网站;内容很广,有新闻,娱乐,体育,影视,文学,音乐, (新浪,网易B 个人网站:不具商业性质,不大(情感天空C 专业网站:单一,专业,专为某一领域的专业人士提供(CCTV , (榕树下D 职能网站:政府,商务, (阿里巴巴,卓越网第二课(网页构架一、网页构架:一般分六种2、 “亘”字型,最上方为导航条, LOGO , Banner, 最下方版权信息,中间为内容区域(适合内容较少的网页 如:(榕树下 3、 “日”可上下左

3、右对称, (具有强烈的反差对比,视觉冲击力强,但是较为困难,适合设计者 如:(风雨 无阻体育网4、 “目”字型是以“匚”右框型的基础上稍做改动而成,右侧增加一个竖列,缩小中间内容宽度,菜单和导航 条集中上方,下方横列。优点:是充分利用版面,信息时量大,一般用于大型网站。5、 “ POP ”面局,适用于广告网页面局,如海报一样,不讲究内容,没有固定的排版模式,以精美的图片为主 要核心,多用于“个人”或“娱乐”而大多数产品宣传单就是 POP 广告。6、综合布局,较为复杂,由上面几种布局结合而成,这种方式被广泛采用。二、布局所用的软件:1、 Dreamweaver 可以对网页进行可视化的设计编辑,具

4、有网站管,维护的功能,最大的物点能够快速地建立各 种动态网页, 而且所生面的网页代码精小, 合 “初学者” 学习的, 那就是“实达铭公司” 出品的“东方网页王” , 它置了大量的模板,同是地还内置了大量的网页制作素材和特效等。2、 flash:制作动画网页,可使网页具有动态感。3、 photoshop,fireworks, 是属于图像处理软件。4、各种软件的关系:核心是布局软件,但是没有其他辅助软件是不行的。(第三课网页的制作一、 步骤:1、 收集,整理素材:网上下载,别人提供相关的文字,图像,动画等2、 规划站点:即是存放, 管理网页文档的场所。 将同一个网站的素材放在同一个站点中, 进行细

5、分, 以便上传。3、 制作网页 :A 、网站是由一个个的网页构成的,要注意页面的框架,针对导航条,主题按钮,收集信息,将 页面分为几部分等。B 、 填充内容:合理地插入各种网页元素,注意位置是否协调,如图像和文本对齐方式等。 C 、 建立反回页面的 链接:使浏览者能够随时回到首页,以便浏览其他的网页。D 、 建立导航条:由于网站的页面较多,因此应在网站的任何一个页面提供各个栏目的相关主题,以引导浏览 者顺利浏览网站。4、 进行网站测试:根据项目的大小,客户端的要求以及访问者将会合用的浏览器种类等到进行测试,一般将站 点移到一个模拟调试服务器上对站点进行测试和编辑。5、 发布及维护站点:在 In

6、ternet 上申请一个主页空间, (后面讲解用作指定的网站或主页的位置。二、制作时的技巧:1、 用色 (主色调总体协调,局部对比,如“旅游网站”可用草绿色搭配黄色, “校园”可用绿色, “游戏”可 用黑色, “科技”可用深蓝色, “政治”可用红色加蓝色 , “新闻”可用深红色或黑色再搭配高级灰色, “时装” 可用高级灰色和紫色, “文字”要暗,对比度要高, “ LOGO ”一般用深色,也可以用网页内容的反色。 (如果是 制作公司的站点,一要考虑到公司的文化背景, CI , VI ,标识系统的产品色调的搭配。三、元素的标准及使用技巧1、 LOGO 一般放在网页左上角2、 Banner 的国际尺

7、寸 (468*60 是全尺寸, 大小在 15到 22KB 之间, 用得较多; (125*125 是方型按钮; (88*31 是小型按钮,大小在 5到 7KB 之间,用得较多;而 120*240是垂直的 Banner 。3、 导航栏:用作引导浏览者浏览网页(在栏目不多的情况下通常是一排,多则两排或多排4、 按钮:协调,不能抢眼(有页面单调时可用按钮点燃如,提交,反回,同意。等5、 图像:图片的主题清晰可见, (含义简单明了背景与主题应在大概是 3:1或是 5:1之间。6、 文本:极为重要的元素,样式最好在三种以内,色要与背景有区别,长度最好在 20至 30个中文字之间, 40至 60个英文字之间

8、。注意!主题:要针对性强,令人一目了然,内容简练,明了导航条:链接项目不宜太多,一般在 6至 8个链接比较好图像:不宜太多,会影响速度大小:通常是 800*600像素的网页(第四课布局软件的操作一、 Dreamweaver 的下载与安装序列号是 WPD800-50438-28032-39991打开 Dreamweaver 。 8。 0:分有 菜单,插入,文档工具,编辑窗口,属性面板,浮动面板。1、 插入:分有 A “常用” :只用于网面中插入各种元素,如:图像,日期,媒体,模板。 B “布局” :用于页面 布局可添加层,框架,表格,窗口模式的切换。 C “表单” :用于插入表单对象,如文本文字

9、,复选框,单先框 按钮。 D “文本”只要对文字进行设置,及添加特殊符号2、 文档工具 :进行文档的工作布局切换预览。 A “代码” :显视代码视图,在窗口中可进行 HTML 语言, B “拆 分” :同时显视代码视图与设计视图, C “设计” :可在窗口中进行网页设计。 D “标题”只指是网页标题3、 浮动面板 :是浮动面板组的集合,是用于站占管理,事件添加等操作的场所,位于编辑窗口右侧4属性面板:用于设置和查看所选取各种对象的属性,位于界面底部二、创建网页保存与打开:1、 Ctrl+n或是基本页 -HTML-页面设计(有辅助功能的 -意见表2、 Ctrl+n动态页 -JSP (自己动手建个

10、动态网页3、网页的保存与其他软件相同, 注意 :在保存网页的过程中,不要在文件中和文件夹中使用特殊的符号或空格, 否则在上传文件时会导至服务器与文件的链接中断。三、网页的预览:在菜单 -文件 -在浏览器中预览 -iexplorer自己动手做个我的网页,然后预览。四、创建一个站点:是通过各种关联起来的我个网页文档就构成了站点, 这里提供了本地站点, 远程站点和测试 站点A , 本地站点; 指的是用户的工作目录, 也就是存放用户网页的地本地文件夹。 Dreamweaver 中将该 文件恶化作 为站点的本地站点,在制作一般网页时只建立本地站点即可。B , 远程站点; 为了不连接 Internet 而

11、能对所建军的站点进行测试,修改,需要在本地计算机上创建远程站点, 以模拟 Web 服务器环境地进行测试。C , 测试站点; 测试站点是 Dreamweaver 中处理动态页面的文件夹(场所 , Dreamweaver 使用此文件夹生成动 态内容并在工作时连接到数据库,主要是对动态网页进行测试。六、站点的创建 :在菜单中 窗口 -文件(F8可打开站点管理的对话框 -桌面 -的下拉列表中选中“管理站点” 新建 -站点 -的对话框。到“ ” 打你的网站名如:tianchuang 点击 “下一步” 到 点击 下一步。 站点的存放位置。 如 ” f:tianchuang” 下一步, “无” -下一步“完

12、成”七、 管理站点:打开文件面板,选取中站点根目录图标右击,可以添加文件或是文件夹或是在“编辑中”删除, 重命名八、编辑站点:打开管理站点的对话框,选中站点,点击“编辑” 。第五课(页面属性的设置1、外观,链接,标题,标题 /编码,跟踪图像的具体操作A 、如要删除背景图,在页面属性中直接删除图像的路径即可。B 、站点管理的导出与导入,在导出中保存为一个“ ste ” 的文件,可做为站点的备份,当站点不小心删除了, 可以导入中选中备份站点, , 可将站点还原, 这个恢复站点与文件夹之间的关联, 不代表已经删除的站点文件可 以从中恢复。制作网页(书院1、文本的添加:文本是网页中不可少的元素之一,极

13、为重要。它是传达信息的重要体裁。A 、可以在编辑窗口中直接输入,或是复制其他文本。 Ctrl+C, Ctrl+V2、添加空格:Ctrl+Shift+空格 空几格就按几次3、添加水平线:插入 -HTML-水平线(在面板中可以编辑水平线4、添加特殊符号:在文本插入栏中5、添加日期:插入 日期(不要星期 (不要时间6、文本的换行与分段:按 Shift+回车键,按回车键可分段,7、设置列表项:A 、编号列表, ;输入主题。在属性面板中点击“编号列表”的按钮,输入文本,直接按回车键 即可。 B 、项目列表,输入主题。在属性面板上点击“项目列表”输入文本,按回车即可。 C 、定义列表:如; 成语解释,回车

14、键,文本 -列表 定义列表 输入成语“排山倒海”按回车换行,系统会自动在新行的前面空 出一段距离。如果是列表太单调,可以打开“项目列表”自己设置。自己动手创建一个以大写罗马字母的样式。用标尺与网格定位网页元素:1、标尺的显视:Ctrl+ Alt+R 网格的显视:Ctrl+ Alt+G 对齐网格:Ctrl+ Alt+ Shift+G2、 CSS 的样式:Shift+F11是统一网页文本的好工具,可免去每个页面都有需手动设置文本格式的麻烦。3、创建 CSS 样式,打开 CSS 对话框,在新建 CSS 样式中输入名字,要以英文字母开头,保存,4、编辑 CSS 样式:分类型,背景,区块,方框,边框,列

15、表,定位,扩展5、应用 CSS :就是套用 CSS 。这样就不用对每个网页分别编辑相同的文本样式了,如,选中网页中的所有正文 文本,打开 CSS 的面板,击样 的“ +”使其展开,右击选中“套用”完成“套用”6、链接外部的 CSS ,如创建一个空白页面,打开 CSS 的样式,在面板中的“附加样式表”到“接外部样式表” 单击“浏览”找到刚刚定义的样式。 “确定”. 第六课,制作“脸谱”的网页1、 网页图像格式, 图像大小尽量要小,质量不能太差,格式有 gif,jpg,png, 这三种。通常是从网上下载或是从光 盘上或是自己制作。如素材网,素材精品屋。2、 添加图像 ,在菜单栏中“插入” “图像”

16、 “选择图像源文件” (Ctrl+ Alt+I在查找范围中“选中所需的图像” 或在“常用”中的“图像”也可以。如果没有想好要哪张图像,可用占位符来解决这个问题。3、 将光标定好位之后 , 选择 插入-图像对象-图像占位符, 下面用占位符添加图像的方式为网页添加 “ banner ” 打开图像占位符对话框 ,在名称文本中框 中国代入“ banner ” 单位为像素,宽度为 780,高度为 75。插入之后 双击“ banner ” 可以以插入图像的方法插入图像。4、 设置图像的属性 :选中图像之后可以属性栏上可做详细的设置。如图像的大小,重命名,文本说明,图像边 框 ,对齐方式,裁切图像,5创建鼠

17、标经过的图像 :是由原始图像与鼠标经过的图像组成,这是一种动态图像,可以为其创超级链接。如: 1将光标插入点定位到需要创建鼠标经过的图像的位置, 到插入 -图像对像 -鼠标经过的图像 -(在图像文本 框输入拼音“ hua ” 点击原始图像的“浏览”选择一张图像 1 jpg,用同样的方法设置鼠标经过的图像 2jpg, 然后单 击“按下时,前往的 url ” 选择 3jpg. 保存之后在浏览器中预览6、 网页导航条 :他是一个方向主标,通常是由图像或图像组组成,当浏览者单日击该 图像时,即可跳转到相应 的网页并查看相关的内容。导航条有垂直与水平两种。7、 创建导航条 , 先插入 图像对像 导航条,

18、 插入导航条, 在项目名称输入导航条的名称, 该 名称将显视在 “导 航条元件”列表中,这里只对导航条元件添中前两种状态,单击“状态图像”文本框后的“浏览” ,在打开对话 框中选择图像文件( ,单击“鼠标经过的图像”的“浏览”选取图像文件,单击“按下时,前往 URL ”的 “浏览”按钮,选取链接文件,选取一个网页文件,在“替换文本”输入“脸谱概述”设置好一个导航元件后 单击“ +” ,然后重复以上步骤添加其他导航元件。设置完毕,单击“确定”按钮,关闭“插入导航条”对话框。 8、 修改导航条:选择 -修改 -导航条 -打开修改导航条的对话框。进行修改。第七课超级链接(茶文化超级链接是链接各个网页

19、的之间的重要桥梁。 是由源端点和目标端点两部分组成, 将网站中的每个页面连接起来, 实现网站的从零到整,而且还能实现网站与网站之间的链接,1、 源端点的链接有 3种,文本, (以文本作为超级链接源端点,在文本链接下面通常有下划线 ;图像, (以图 像作为源端点的链接,具有美观实用的优点 ;表单链接(填写完表单之后,单击提交或取消等到接钮时会 自动跳到目标页面2、3、 根据链接路径分类:有 3种,文档相对路径,绝对链接,和站点根目录相对路径。4、 创建文本链接:打开一个网页文档,在网页中选取中需创建的链接的文本,单击属性面板的“浏览”文件, 选取中所需的链接到的网页文档。击“确定” 。在属性面板

20、的:“目标”指定链接网页的打开方式。保存之后, 预览。5、 图像链接:方法相同,在属性面板是设置即可。6、 热点图像链接:一个图像可做多个链接目标。7、 创建命名锚记:使用锚记不仅可以跳到转到其他网页中的指定位置,还可以跳转到当前网页中的指定位置。 方法:将光标定位到所需要命锚记的地方, “插入” “命名锚记”输入一个名称如:“ yy ” 。 “确定”即可。 锚记像文本一样可以复制,剪切,粘贴8、 链接命名锚记:如:“回到开始”或是“反回”选中文本,在属性面板的“链接”下拉列表中输入所需的锚 记名称及相应的前缀。如刚刚的“ yy ” . 如果锚记在当前页,请在“链接”的文本框中输入一个“ #”

21、号再输入 名称。在“目标”下拉列表中选“ parent ” 保存后按“ F12”可以预览。9、 电子邮件的链接:单击电子邮件链接后将启动电子邮件软件向链接所指向的邮箱发送邮件。方法,选取中所 要链接的文本,如“联系我们”的文本。 “插入” “电子邮件的链接”在“文本”栏自动显视中文,然后 输入邮箱地址。保存后,按“ F12”预览。第八课2011-7-12 姚燕妃 制作“产品的介绍”网页 （表格的使用） 页面布局是网页制作的一个重要部分，而使用表格布局页面是一种最常用的手段。 1、 表格的创建：选择“插入” “表格” Ctrl+ Alt+T 打开对话框后，进行设置。如插入一个行列各为 3.宽为

22、755 像素的表格。表格插入后，可用光标作具体调整。 2、 嵌套表格：在原有的表格中再插入一个表格。将光标定要所要插入表格的地方，重复以上的步聚。注意大小。 3、 表格的基本操作,选中相邻表格,按光标左键不放,选中不相邻邦的单元格,按住 Ctrl 键不放,加选 4、 拆分单元格,选中单元格后,点击”拆分单元格”;合并单元格,选中单元格,点击“合并单元格” 5、 调整单元格“在修改”-“可插入行或列”可将行或列作删除。 6、 在属性面面板上设置表格和单元格的属性。 7、 在表格中添加产品的图像以及产品的名称：选中表格，插入图像，注意统一大小， “产品介绍“的字体最好 用 36 号，其他用 24

23、号字。 8、 移动表格的整行和整列，利用剪切，粘贴， 9、 表格的排序，在“命令” “排序表格“具体在对话框中操作。 10、导入与导出数据：插入表格对像导入表格式数据，找到文件之后，在对话框中， “定界符”选“分号” “确定” 。导出：选中网页表格，文件导出表格“定界符”逗号-保存一个位置。确定。 11、 在布局模式中使用表格：A、创建布局表格和布局单元格：将插入栏切换到布局插入栏，单击“布局” ， “打开布局模式开始”“确定”后， ， “从布局模式开始”进行布局模式。然后单击插入栏中的“布局表格”当 光标变成“+”字形时，按住左键不放，拖到所需的位置，放开即可。在属性面板中可做合意的调整。

24、（若要绘 制多个表格，按住 Ctrl 拖动光标即可。 ）B、用同样的方法给绘制一个单元格。 12、 在“编辑” “首选参数”Crtl+U 选中“布局模式”进行设置。 第九课 制作“奇花异草”网页 （框架的使用） 利用框架可以浏览器窗口划分若干个区域，每个区域可以添加任意网页元素，也可分别显示不同的网页。 1、 框架的创建：在新建文档对的话框中，在“类别”中“框架集”选取中一个“上方固定，械侧嵌套“的选项。 2、 在“窗口”中“框架” Shifl+F12 认识框图架面板,此面板中显示了窗口中框架的结构, 在不同的框架区域 中显示框图架的名称. 3、 按住 Alt 键不放,单击框架,可以选中框架.

25、若要选中框架集时,单击框架边缘即可. 4、 调整框架的大小,将光标放到框架边,直接拉申. 5、 拆分框架,到”修改” “框架集” 选中你所要拆分的框架. 6、 若要删除框架,将光标将所要删除的框架移到页面外. 7、 设置框架的属性:框架名称只能是字母,下划线,和符号等到组成的字符串,必须是字母开头,不能出现连字号, 句点及空格； “滚动” 的下拉框中选中 “是” 表示无论文档中的内容是否超出框架的大小都会显示滚动条。 “否” 表示相反。 8、 为网页框架添加内容：将光标定位到框架中，打开“页面属性”背景色为“#EOCEF2”是紫色。添加网页元 素，如 logo,banner,导航条，文本链接(

26、字体大小在 12 号 9、 保存框架或框架集:有框架的网页,保存选择“文件” “保存框架集”输入框架集的名称，保存即可。 6 2011-7-12 姚燕妃 第十课 制作“网上购物”网页 “层”的使用 在网页制作中，层的使用非常广泛，层的最大优点是灵活怕强，利用层可实现较多功能，如网页元素的重叠等。 1、 层的创建：建立一个空白网页，插入-布局对象-层（将“插入栏”切换到“布局拦” ）单击“绘制层” 2、 在网页中创建嵌套层，将光标定位于一个层中， “插入-布局对象-层” 3、 层的首选参数: “ctrl+u” 4、 层的基本操作：认识层的面板在“窗口” “层”F2。单击层的边框可选中一个层，按住

27、 Shift 可选中多个层。 将光标放在层的六个定点，可以任意调整单个层的大小， 5、 调整多个层的大小，可在“修改” “排列顺序” “设成高度相同” “Ctrl+Shift+9”等多种对齐方式。 6、 设置层的属性：可以给层添加背景色，大小调整，若要设置多个层，选中多个层，具体操作以上步相同。 7、 选中层，右键，可以设置“可见性”或“隐藏” 8、 在层中添加网页元素，将光标插入定位层中，然后进行网页元素的添加。如 logo,banner,导航条，超级链接， 9、 层与表格的相互换，A、将层转换为表格： “修改” “转换” “层到表格”在对话框中选中“置于页面中央” “确 定” B、将表格转

28、换为层： “修改” “转换” 表格到层” “ 。在对框中取消“显视网格”和“靠齐到网格” “确 定” 第十一课 制作“注册”网页 表单的利用 1、 表单在网络中应用很广泛，如申请邮箱时填写个人信息的页面、论坛是的信息发布，网上购特填 定子的购 特单等都是表单。本章以在“注册”网页添中文本字段，密码域、单选项等表单对象为例。 2、 网站所有者都可以通过表单从访问者外收集需要的信息，从而实现网上交流，购物等功能，表单通常由多个 表单对像组成，如单选项，复选框，文本框以及按钮等。 3、 创建表单：打开一个网页文档， “插入” “表单” “表单” 4、 设置表单属性：表单的名称可以更改表单的名称；类，

29、可以选择控制表单的 CSS 样式；方法，可以选择表单 的数据传输到服务器的方式。 5、 表单对象：文本字段，隐藏域，文本区域，复选框，单选按钮，单选按钮组，列表/菜单，跳转菜单，铵钮。 图像域，文件域，标签。 6、 添加“文本字段”根据文本字段的行数和显示方式，可将其分为三种，单行文本字段，多行文本字段和密码 域。A、 “单行文本字段”在表单中添加一个 10 行 2 列的表格，在第一个单元格中输入“用户名”大小为 12 号，颜色为蓝色。在属性面板的“字符宽度”输入 10，在“最多字符”输入 16；在第五行中，输入“年 7 2011-7-12 姚燕妃 龄”其设置与“用户名”相同， “最多字符”是

30、 4.在第五行的第一个单元格输入“喜欢的游戏”设置同上， “最 多字符输入 50 到 100。B、在第十行添加， “多行文本字段”通常用于个人介绍，留言等，不同的是，属性 栏上出现“行数” 。若最多不超过 400 字，最宽字符是 50。行数是 8。C、密码域：在第二行输入“输入密码” “字符宽度”10，最多字符 20。 “再次输入密码”与其上相同。 7、 文本区域，单选框，复选框，按钮，单选按钮，都以上相同设置。 8、 添加单选按钮组；如学历：输入学历之后点击“+”号，继续，而列表/菜单栏以上相同，注意“列表值的使 用” 。如喜欢的游戏：分别输入各种游戏的名称，属性的设置都以上差不多，不同的是在“允许多选”复选 框中可允许访问者可以多选。 9、 添加跳转菜单，以上相同，在对话框中“文本”分别输入菜单后，如：音乐，电影，游戏，动漫，在“选择 时，跳转到 URL，的“浏览”中打开所需文档。 10、 添加按钮，在所在添加按钮的地方，插入按钮，如“提交。登录。 11、 添 加 图 像 域 和 文 件 域 以 上 相 同 。 第十二课 制作“凌霄公司”网页 模板的运动 8