网页制作学习资料

2011-7-12姚燕妃PAGE2PAGE5网页制作学习资料第一课（初步认识网站）1、网页是由各种各样的元素如：文字，图像，和超级链接。2、具体是：标题，页址，文字，“BANNER”导航条，站点标识，LOGO，图像，超级链接。3、网页类型：（按位置分）可分为主页与内页；（按表现方式分）可分为静态网页与动态网页。4、网页的概念：万维网所说的3W或WWW是指WOLD，WIDE，WED的简称。如：/index.htm.(“http”:是通迅协议，/是主机名；“index.htm”是要访问的文件路径或文件名。)5、网页中的专用术语：A：超级链接，B：logo网页宗旨C：banner作宣传（可做近期的广告或活动宣传）D：表单具有交互性的动态网页，（如会员注册，邮箱申请，资料查索）E：导航条是这个网站的方向标，体现这个网站的所有内容，如书的目录一样。6、网站的内容分为：A门户网站；内容很广，有新闻，娱乐，体育，影视，文学，音乐，（新浪，网易）B个人网站：不具商业性质，不大（情感天空）C专业网站：单一，专业，专为某一领域的专业人士提供（CCTV），（榕树下）D职能网站：政府，商务，（阿里巴巴，卓越网）第二课（网页构架）一、网页构架：一般分六种1、“匚”右框型，顶部为LOGO，下方左面为菜单，右面为显示主要内容。（较为常见）初学者适用如：（）2、“亘”字型，最上方为导航条，LOGO，Banner,最下方版权信息，中间为内容区域（适合内容较少的网页）如：（榕树下）3、“日”可上下左右对称，（具有强烈的反差对比，视觉冲击力强，但是较为困难，适合设计者如：（风雨无阻体育网）4、“目”字型是以“匚”右框型的基础上稍做改动而成，右侧增加一个竖列，缩小中间内容宽度，菜单和导航条集中上方，下方横列。优点：是充分利用版面，信息时量大，一般用于大型网站。5、“POP”面局，适用于广告网页面局，如海报一样，不讲究内容，没有固定的排版模式，以精美的图片为主要核心，多用于“个人”或“娱乐”而大多数产品宣传单就是POP广告。6、综合布局，较为复杂，由上面几种布局结合而成，这种方式被广泛采用。二、布局所用的软件：1、Dreamweaver可以对网页进行可视化的设计编辑，具有网站管，维护的功能，最大的物点能够快速地建立各种动态网页，而且所生面的网页代码精小，合“初学者”学习的，那就是“实达铭公司”出品的“东方网页王”，它置了大量的模板，同是地还内置了大量的网页制作素材和特效等。2、flash:制作动画网页，可使网页具有动态感。3、photoshop,fireworks,是属于图像处理软件。4、各种软件的关系：核心是布局软件，但是没有其他辅助软件是不行的。（第三课）网页的制作步骤：收集，整理素材：网上下载，别人提供相关的文字，图像，动画等规划站点：即是存放，管理网页文档的场所。将同一个网站的素材放在同一个站点中，进行细分，以便上传。制作网页：A、网站是由一个个的网页构成的，要注意页面的框架，针对导航条，主题按钮，收集信息，将页面分为几部分等。B、填充内容：合理地插入各种网页元素，注意位置是否协调，如图像和文本对齐方式等。C、建立反回页面的链接：使浏览者能够随时回到首页，以便浏览其他的网页。D、建立导航条：由于网站的页面较多，因此应在网站的任何一个页面提供各个栏目的相关主题，以引导浏览者顺利浏览网站。4、进行网站测试：根据项目的大小，客户端的要求以及访问者将会合用的浏览器种类等到进行测试，一般将站点移到一个模拟调试服务器上对站点进行测试和编辑。5、发布及维护站点：在Internet上申请一个主页空间，（后面讲解）用作指定的网站或主页的位置。二、制作时的技巧：1、用色（主色调）总体协调，局部对比，如“旅游网站”可用草绿色搭配黄色，“校园”可用绿色，“游戏”可用黑色，“科技”可用深蓝色，“政治”可用红色加蓝色,“新闻”可用深红色或黑色再搭配高级灰色，“时装”可用高级灰色和紫色，“文字”要暗，对比度要高，“LOGO”一般用深色，也可以用网页内容的反色。（如果是制作公司的站点，一要考虑到公司的文化背景，CI，VI，标识系统的产品色调的搭配。三、元素的标准及使用技巧1、LOGO一般放在网页左上角2、Banner的国际尺寸（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个英文字之间。注意！主题：要针对性强，令人一目了然，内容简练，明了导航条：链接项目不宜太多，一般在6至8个链接比较好图像：不宜太多，会影响速度大小：通常是800*600像素的网页（第四课）布局软件的操作一、Dreamweaver的下载与安装序列号是WPD800504382803239991打开Dreamweaver。8。0：分有菜单，插入，文档工具，编辑窗口，属性面板，浮动面板。1、插入：分有A“常用”：只用于网面中插入各种元素，如：图像，日期，媒体，模板。B“布局”：用于页面布局可添加层，框架，表格，窗口模式的切换。C“表单”：用于插入表单对象，如文本文字，复选框，单先框按钮。D“文本”只要对文字进行设置，及添加特殊符号2、文档工具：进行文档的工作布局切换预览。A“代码”：显视代码视图，在窗口中可进行HTML语言，B“拆分”：同时显视代码视图与设计视图，C“设计”：可在窗口中进行网页设计。D“标题”只指是网页标题7、创建导航条，先插入—图像对像—导航条，插入导航条，在项目名称输入导航条的名称，该名称将显视在“导航条元件”列表中，这里只对导航条元件添中前两种状态，单击“状态图像”文本框后的“浏览”，在打开对话框中选择图像文件（），单击“鼠标经过的图像”的“浏览”选取图像文件，单击“按下时，前往URL”的“浏览”按钮，选取链接文件，选取一个网页文件，在“替换文本”输入“脸谱概述”设置好一个导航元件后单击“+”，然后重复以上步骤添加其他导航元件。设置完毕，单击“确定”按钮，关闭“插入导航条”对话框。8、修改导航条：选择修改导航条打开修改导航条的对话框。进行修改。第七课超级链接（茶文化）超级链接是链接各个网页的之间的重要桥梁。是由源端点和目标端点两部分组成，将网站中的每个页面连接起来，实现网站的从零到整，而且还能实现网站与网站之间的链接，源端点的链接有3种，文本，（以文本作为超级链接源端点，在文本链接下面通常有下划线）；图像，（以图像作为源端点的链接，具有美观实用的优点）；表单链接（填写完表单之后，单击提交或取消等到接钮时会自动跳到目标页面）目标端点链接有四种：外部，内部，局部，和电子邮件链接。根据链接路径分类：有3种，文档相对路径，绝对链接，和站点根目录相对路径。创建文本链接：打开一个网页文档，在网页中选取中需创建的链接的文本，单击属性面板的“浏览”文件，选取中所需的链接到的网页文档。击“确定”。在属性面板的：“目标”指定链接网页的打开方式。保存之后，预览。图像链接：方法相同，在属性面板是设置即可。热点图像链接：一个图像可做多个链接目标。创建命名锚记：使用锚记不仅可以跳到转到其他网页中的指定位置，还可以跳转到当前网页中的指定位置。方法：将光标定位到所需要命锚记的地方，“插入”—“命名锚记”输入一个名称如：“yy”。“确定”即可。锚记像文本一样可以复制，剪切，粘贴链接命名锚记：如：“回到开始”或是“反回”选中文本，在属性面板的“链接”下拉列表中输入所需的锚记名称及相应的前缀。如刚刚的“yy”.如果锚记在当前页，请在“链接”的文本框中输入一个“#”号再输入名称。在“目标”下拉列表中选“parent”保存后按“F12”可以预览。电子邮件的链接：单击电子邮件链接后将启动电子邮件软件向链接所指向的邮箱发送邮件。方法，选取中所要链接的文本，如“联系我们”的文本。“插入”—“电子邮件的链接”在“文本”栏自动显视中文，然后输入邮箱地址。保存后，按“F12”预览。第八课制作“产品的介绍”网页（表格的使用）页面布局是网页制作的一个重要部分，而使用表格布局页面是一种最常用的手段。表格的创建：选择“插入”“表格”Ctrl+Alt+T打开对话框后，进行设置。如插入一个行列各为3.宽为755像素的表格。表格插入后，可用光标作具体调整。嵌套表格：在原有的表格中再插入一个表格。将光标定要所要插入表格的地方，重复以上的步聚。注意大小。表格的基本操作,选中相邻表格,按光标左键不放,选中不相邻邦的单元格,按住Ctrl键不放,加选拆分单元格,选中单元格后,点击”拆分单元格”;合并单元格,选中单元格,点击“合并单元格”调整单元格“在修改”“可插入行或列”可将行或列作删除。在属性面面板上设置表格和单元格的属性。在表格中添加产品的图像以及产品的名称：选中表格，插入图像，注意统一大小，“产品介绍“的字体最好用36号，其他用24号字。移动表格的整行和整列，利用剪切，粘贴，表格的排序，在“命令”“排序表格“具体在对话框中操作。导入与导出数据：插入—表格对像—导入表格式数据，找到文件之后，在对话框中，“定界符”选“分号”“确定”。导出：选中网页表格，文件—导出—表格—“定界符”逗号保存一个位置。确定。在布局模式中使用表格：A、创建布局表格和布局单元格：将插入栏切换到布局插入栏，单击“布局”，“打开布局模式开始”，“确定”后，“从布局模式开始”进行布局模式。然后单击插入栏中的“布局表格”当光标变成“+”字形时，按住左键不放，拖到所需的位置，放开即可。在属性面板中可做合意的调整。（若要绘制多个表格，按住Ctrl拖动光标即可。）B、用同样的方法给绘制一个单元格。在“编辑”“首选参数”Crtl+U选中“布局模式”进行设置。第九课制作“奇花异草”网页（框架的使用）利用框架可以浏览器窗口划分若干个区域，每个区域可以添加任意网页元素，也可分别显示不同的网页。框架的创建：在新建文档对的话框中，在“类别”中“框架集”选取中一个“上方固定，械侧嵌套“的选项。在“窗口”中“框架”Shifl+F12认识框图架面板,此面板中显示了窗口中框架的结构,在不同的框架区域中显示框图架的名称..按住Alt键不放,单击框架,可以选中框架.若要选中框架集时,单击框架边缘即可.调整框架的大小,将光标放到框架边,直接拉申.拆分框架,到”修改”“框架集”选中你所要拆分的框架.若要删除框架,将光标将所要删除的框架移到页面外.设置框架的属性:框架名称—只能是字母,下划线,和符号等到组成的字符串,必须是字母开头,不能出现连字号,句点及空格；“滚动”的下拉框中选中“是”表示无论文档中的内容是否超出框架的大小都会显示滚动条。“否”表示相反。为网页框架添加内容：将光标定位到框架中，打开“页面属性”背景色为“#EOCEF2”是紫色。添加网页元素，如logo,banner,导航条，文本链接(字体大小在12号)保存框架或框架集:有框架的网页,保存选择“文件”“保存框架集”输入框架集的名称，保存即可。第十课制作“网上购物”网页“层”的使用在网页制作中，层的使用非常广泛，层的最大优点是灵活怕强，利用层可实现较多功能，如网页元素的重叠等。层的创建：建立一个空白网页，插入布局对象层（将“插入栏”切换到“布局拦”）单击“绘制层”在网页中创建嵌套层，将光标定位于一个层中，“插入布局对象层”层的首选参数:“ctrl+u”层的基本操作：认识层的面板在“窗口”“层”F2。单击层的边框可选中一个层，按住Shift可选中多个层。将光标放在层的六个定点，可以任意调整单个层的大小，调整多个层的大小，可在“修改”“排列顺序”“设成高度相同”“Ctrl+Shift+9”等多种对齐方式。设置层的属性：可以给层添加背景色，大小调整，若要设置多个层，选中多个层，具体操作以上步相同。选中层，右键，可以设置“可见性”或“隐藏”在层中添加网页元素，将光标插入定位层中，然后进行网页元素的添加。如logo,banner,导航条，超级链接，层与表格的相互换，A、将层转换为表格：“修改”“转换”“层到表格”在对话框中选中“置于页面中央”“确定”B、将表格转换为层：“修改”“转换”“表格到层”。在对框中取消“显视网格”和“靠齐到网格”“确定”第十一课制作“注册”网页表单的利用表单在网络中应用很广泛，如申请邮箱时填写个人信息的页面、论坛是的信息发布，网上购特填定子的购特单等都是表单。本章以在“注册”网页添中文本字段，密码域、单选项等表单对象为例。网站所有者都可以通过表单从访问者外收集需要的信息，从而实现网上交流，购物等功能，表单通常由多个表单对像组成，如单选项，复选框，文本框以及按钮等。创建表单：打开一个网页文档，“插入”“表单”“表单”设置表单属性：表单的名称可以更改表单的名称；类，可以选择控制表单的CSS样式；方法，可以选择表单的数据传输到服务器的方式。表单对象：文本字段，隐藏域，文本区域，复选框，单选按钮