《网页设计与制作》课程实训指导书.docx

《《网页设计与制作》课程实训指导书.docx》由会员分享，可在线阅读，更多相关《《网页设计与制作》课程实训指导书.docx（42页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、网页设计与制作课程设计实训指导书实训目的网页制作课程设计是电子商务专业的一门重要的专业必修课 程，也是该专业的一门重点建设课程。随着电子商务的快速进展，网站的建设也越来越重要.目前很多企业都在上网，开展网络营销活动，设 计并制作企业自己的商务网站则是企业实现网络化经营的重要手段。因此，作为电子商务专业的学生，学习网页的设计与制作是格外必要的。通过课程设计的训练，使每位学生在把握理论学问根底上，通过身体力行的实践具备网页设计与制作的相关技术及网页制作的操作技能，能独立设计小型WEB 站点。实训任务通过对网站的设计,使学生娴熟应用网站设计软件，使学生对网站建设有一个综合系统的把握。在制作过程中,主

2、要完成对网页的布局、颜色的搭配、框架的应用、层的运用、行为的实现、表单的使用、模板和库的应用等,完成工程作 品。具体要求是：（1） 网站中网页的个数不少于 10 页（2） 至少有一页用到表格布局(3至少有一页用到CSS+DIV 布局(4至少有一页使用框架布局，至少有一页使用页内框架5)为该网站设计一个调研问卷6)适当使用图片，并把全部的图片放在一个文件夹下(7可以借助Dreamweaver 工具实训打算工程任务分析，画出网站构造草图1确定栏目1进展版面设计1搜集素材1建立站点1制作网页进展主页的设计与制作22进展其他页面的设计2建立几个页面间的链接关系13测试网站检查网页的运行状况14作品提交

3、与评分依照评分表进展考核15实训报告的编写参见附录(课后完成0合计12序号任务内容课时1网站筹划实训考核与评分依据实训期间的纪律考核状况、对待实训的态度,站点的名目构造， 各个页面的布局构造、颜色搭配，文字、图像、动画的合理搭配，网页之间的链接是否顺畅，网页制作技术的应用，网站的整体扫瞄效果等方面进展综合评分。评分参考标准如下表所示。网站开发实训的参考评分标准序号考核工程评分比例1(1内容方面：主题明确，内容安康、具体，各个页面的文字、图像、动画能够清楚地表达主题。(2)版面构造：版面构造合理，每个页面都有返回上一级或链接到网站效果其他页面的文字或按钮.70(3视觉感受：颜色搭配协调、美观，页

4、面设计标准，没有消灭乱码、空链接和错误链接。4网站风格：网站具有特色，主题、文字、图像、动画有创。2纪律考核实训期间组织纪律性强，无迟到、早退、缺课现象103创状况制作的网页具有独创性，构思奇异、有意5%4成员协作全部的成员在规定时间内完成实训任务,无雷同现象或抄袭现象.55实训报告实训报告书写认真、完整、字迹清楚、页面干净,实训收获较大合计10100作品完成状况当场验收考核，实训报告在 14 周上交。附录一:实训报告内容封面 名目 网站全名及 logo 标志； 建立网站的目的、意义; 网页设计制作最突出的创意如 Amgo “俺们走” ,logo 设计有特色； 网站的栏目设计； 颜色搭配及其含

5、义如绿色 + 金黄 + 淡白，表达优雅 ， 舒适的感觉；) 网站的构造图和页面组成； 网站设计中具体实现的几个关键功能和相关技术说明(例如布局 的方法:应用层、应用表格、应用模板、应用 Flash 或其他脚本技术； 对所做各网页的抓图,并做简要说明; 网站建设的心得体会和扩展性分析； 参考资料附录二:参考网站主题1制作教学资源网站。2制作个人网站。3制作班级网站。(4 制作学习网站.(5制作学校网站。6制作旅游网站。7制作公司网站。附录三：网站设计与制作案例3.1 规划网站1. 筹划网站主题在首手设计网站之前，要确定好网站的主题，每个网站都应当具有一个明确的主题.本章所创立的网站是一个学习类网

6、站,主要介绍网页制作的根底学问、网站建立的根底学问、网页制作的技巧、网页特效的制作方法、网络编程语言、动画制作方法、图像处理方法等内容，同时为读者供给大量的网页制作素材、学习网页设计和编程的视频教程，解决学习网页设计与制作过程中遇到的问题。所以该网站的主题是“供给制作素材、解决学习问题、指导网页制作”。2. 确定网站风格确定好站点主题后，就要依据该主题选择站点的风格.由于本章所建立的网站是一个学习类网站,要求构造清楚，结合现代教学理念,将学习与网络合理整合，实现教学对象广泛、使用便利、时间自由。本网站的主要特点如下：1设计风格要群众化,为了提高扫瞄速度，尽量削减图片的使用， 更多地使用表格实现

7、效果。(2背景颜色以灰色和白色为主、黄色为辅，文字颜色以黑色为主、蓝色和红色为辅.（3） 文字内容丰富、学问性强，标题简洁明白,字体一般承受宋体 ，大小一般为 12 像素。（4） 首页的版式构造承受典型的“国”字型构造,二级栏目网页承受“顶部和嵌套的左侧框架”构造以及简洁的“左右型”构造。本章所介绍的网站名称为“网页设计与制作教学网“，简称为“网页教学网”，英文名称为“zzwebjx”.3. 构思网站栏目构造先在纸上绘制网站的栏目构造草图,经过反复推敲，最终确定完整的栏目和内容的层次构造。本章的“网页教学网”的栏目构造如表 171 所示。图 17-1“网页设计与制作教学网”的首页扫瞄效果表 1

8、7-1“网页教学网“的栏目构造一级栏目二级栏目网页制作根底：wyjch。html网页制作技巧:wyjq。首页htmlindex.html网页特效制作：wytx.html网页素材下载：wysc.html三级栏目及内容页面wyjch_xx_xx.htmlwyjq_xx_xx.htmlwytx_xx_xx。html wysc_xx_xx。html网络编程技术：wybch。html网页书籍扫瞄:wybook。html网络课程浏wybch_xx_xx.htmlwybook_xx_xx。htmlwykch_xx_xx。html览:wykch.html教学沟通答疑：wyjl。html网站建设指南：wzjsh

9、。html图像动画制作：txdh.htmlwyjl_xx_xx。htmlwzjsh_xx_xx。htmltxdh_xx_xx。html练习考试题库：examtk。 examtk_xx_xx.htmlhtml教学论坛 ：/www。webjxbbs。com为了简化对网站的扫瞄过程，大局部网页通过二级栏目就能扫瞄内容页面，首页的主菜单包括 11 个菜单项:制作根底、制作技巧、网页特效、网页素材、网络编程、网页书籍、网络课程、教学沟通、建站指南、图像动画、考试题库,各个主菜单所包括的弹出子菜单如表 172 所示。三级栏目及内容页面用数字标识其所属子类，例如利用JavaScript 脚本制作网页的第一个

10、内容页面，其文件名为： wytx_02_01.html,“02”代表所属的子类，这一层次的网页与首页中的子菜单对应，“01”代表第一个内容页面的序号。表 172首页中的菜单首页中主菜弹出式子菜单名称单名称Dreamweaver、Front、HTML、XML、CSS、制作根底JavaScript、VBScript。网页文本、网页图像、网页链接、网页导航、表制作技巧格布局、层的布局、框架网页、模板与库、媒体应用、网页美化、表单网页、颜色搭配。网页特效标记特效、脚本特效、行为特效、插件特效。 网页模板、Logo 图片、首页背景、精巧按钮、网网页素材页广告、网页赏识、动画图片、扩展插件、导航菜单。网络

11、编程ASP、PHP、JSP、。NET、Java、数据库.网页书籍网页制作、网页特效、网络编程、图形图像、动画制作、网站建设、艺术设计.网络课程教学沟通建站指南学习入门、操作指导、教学向导。有问必答、阅历沟通、方法探讨、制作心得。 方案设计、创意设计、网站构造、申请域名、申请空间、网站测试、网站公布.图像动画Fireworks、Photoshop、Flash。考试题库视频教程理论题库、操作题库、实训题库、成套题库、模拟实训。Dreamweaver 视频教程、Fireworks 视频教程、Flash视频教程、Photoshop 视频教程、 常用软件。4. 规划网站名目构造和链接构造依据网站筹划确定

12、的栏目构造，创立站点名目，一个网站的名目构造要求层次清楚、井然有序，首页、栏目页、内容页区清楚确，有利于日后的修改。“网页教学网”的名目构造,各文件夹的所存放文件类型如表 17-3 所示。留意文件夹和文件的名称建议不要使用中文名，由于中文名在 HTML文档中简洁生成乱码，导致链接产生错误.表 17-3网站的名目构造及其存放的文件类型文件夹名称cssCSS 样式文件.存放的文件类型flash image js Library musicTemplates text web_1动画文件、视频文件。图像文件、照片.外部脚本文件。库文件.音乐、音频文件。模板文件。文字素材.一级页面文件，该文件夹又有多

13、个子文件夹，例如web_1_01。web_2二级页面文件,该文件夹又有多个子文件夹，例如other webstandbyweb_2_01。 其他类型的文件。备用页面、备用素材index。html主页网站的链接构造与名目构造不同,网站的名目构造指站点的文件存 放构造，一般只有设计人员可以直接看到，而网站的链接构造指网站通过页面之间的联系表现的构造，扫瞄者扫瞄网站能够观看到这种构造 .本网站的链接构造承受“网状”链接构造，构造图如图172 所示。图 17-2“网页教学网”中的链接构造5. 主要页面布局设计使用表格对首页与其他几个主面导航页面的布局构造草图进展设 计，主页布局构造草图如图173 所示

14、，两种形式的导航页面布局构造草图如图 174 和图 17-5 所示。由于本网站中很多页面都承受图 17-5 所示的布局构造，所以可以将该网页制作成模板。图 17-3主页的布局构造草图图 174利用“框架”制作的导航页面图 175利用“表格、层、浮动框架“制作的导航页面3.2 预备素材依据网站的栏目、内容设计，链接构造设计，首页的布局构造，几个主要导航页面的布局构造，预备所需素材1. 预备文本预备大量网页中所需的文字资料，可以从各类网站、各种书籍中搜集文字资料,然后制作成word 文档或文本文件，留意各种文字资料的文件名命名要科学合理，避开日后找不到所需的文本内容。2. 预备Logo利用 Fir

15、eworks 或 Photoshop 量身定做本网站的 Logo 标志,Logo 标志要与本网站的主题相符，要有意。3. 预备图片及按钮依据需要到网上或素材光盘中搜集所需的图片和按钮、有些图片、按钮需要自己利用图像处理软件制作。留意图片文件要尽可能小。4. 预备动画网站中的动画最好能突出主题，起到画龙点睛之成效。动画一般利用flash 软件制作,本网站主页和导航页的标题动画就是利用flash 软件量身定做。5. 建立库工程网页中常常用到的工程，例如版权区,可以事先定义为库工程，以备制作网页时重复使用,提高工作效率。3。3创立网站1. 创立本地站点在开头着手设计网页之前，首先要定义站点。由于网页

16、只是网站的一个组成局部,全部设计的网页和相关文件都要放置于站点之中。定义站点的好处是:定义站点以后的全部操作都是在站点统一监控之下进展。假设使用了外部文件，Dreamweaver 就会自动检测并予以提示和询问是否将外部文件复制到站点内，以保持站点的完整性。假设某个文件夹或文件重命名了，系统会自动更全部的链接，以保证原有的链接关系的正确性.创立站点之前,要求先建立一个文件夹，以便创立站点时为站点指定存储位置。在 Windows 操作系统中，翻开“资源治理器“，创立一个名为“网页教学网”的文件夹。创立站点在第 3 章已有具体介绍，在此只作简要说明，与第3 章中的步骤有所区分，这里假设事先已申请了主

17、页空间，所申址的网址为： zzweb。26300 .cn，用户名和密码也已经知道。定义站点的操作步骤如下：1在 Dreamweaver 8 主窗口中，单击菜单【站点】【建站点】，将弹出如图 176 所示站点定义对话框。在该对话框中先输入站点的名称,然后输入网址，如图 176 所示。接着单击【下一步】按钮， 进入到下一步操作。2)选择“否，我不想使用效劳器技术”单项选择按钮,然后单击【下一步】按钮,进入到下一步操作.3选择“编辑我的计算机上的本地副本,完成后再上传到效劳器推举”单项选择按钮，接着在下面的文本框中输入站点文件在本地计算机上的存放位置，也可以选择存储位置，然后单击【下一步】按钮,进入

18、到下一步操作。(4)选择连接到远程效劳器的方式为“FTP”，然后分别输入 Web 效劳器的主机名、在效劳器上文件的存储位置、FTP 用户名、FTP 密码等参数,如图 177 所示.然后单击【下一步】按钮。5选择“否，不启用存回和取出”单项选择按钮,如图 178 所示。接着单击【下一步】按钮,此时会显示所定义的站点信息。假设觉察有误可以单击【上一步】按钮,返回到上一步操作的对话框中重修改.假设站点定义信息符合要求，可以单击【完成】按钮，完成站点的定义。此时会自动显示“文件“面板,并且会自动切换到创立的网站。图 17-6输入站点名称及网址 图 177设置连接远程效劳器的参数2. 网站名目构造的搭建

19、创立站点后，在“文件”面板中切换到创立的站点,然后利用快捷菜单创立文件夹及子文件夹,本网站的名目构造如图 179 所示.图 178选择是否启用存回和取出图 17-9“网页教学网站”的名目构造3.4 网站首页的设计与制作首先在网站根名目下创立首页文件index.html，在设计视图状态下， 翻开index。html，开头对首页进展布局。3.4.1 网站首页的布局设计首页的布局方案如下：（1） 整个页面分为9 个区域，从上往下依次为：表格 1、页面区域1、页面区域2、页面区域 3、表格 2、表格3、页面区域4、页面区域 5、页面区域 6。（2） 表格 1 为 1 行 1 列760120)，用于插入

20、flash 动画和 Logo 标志；表格 2 和表格 3 为 1 行 3 列；页面区域 1 为 76022，为导航栏； 页面区域 2 为 76020，为导航栏，页面区域 3 为 76020,当前位置标识；页面区域 4 为 76033，图片型友情链接；页面区域 5 为 76022, 文字型友情链接；页面区域6：76066,文字型导航菜单与版权信息区。（3） 表格2 的第一列插入表格 214 行 1 列,其次列插入表格 225 行 2 列，第三列插入表格234 行 1 列;表格 21 中第 4 行插入表格 21118 行 2 列)；表格 22 中其次列插入表格 22116 行 2 列；表格 23

21、中第 4 行插入表格 231(18 行 2 列。（4） 表格 3 的构造与表格 2 一样。网站首页的布局示意图如图 1713 所示。图 17-10网站首页的布局示意图留意页面中的间隔线是将表格中有些单元格的背景设置网状点所致.3.4.2 编辑CSS 样式文件建一个CSS 样式文件“style1。css“，其主要代码代码如下所示: body fontsize： 12px； font-family： ”宋体”;td fontsize: 12px; lineheight: 160； font-family: “宋体“a:hover color: #990000; textdecoration： un

22、derlinea color： 000000； textdecoration: none.menu:link color： #ff0000； text-decoration： underline。menu：hover color： #ff0000； text-decoration: underline.menu:visited top color: 000000； textdecoration： noneclear: both;borderright： #0000001pxsolid; bordertop: #000000 1px solid;border-left： 0000001pxsol

23、id；width： 760px； padding: 3px;height:70px#banner width: 756px;textalign: right；paddingright： 4px;#nav background-image： url(。 /image/d2_bg。gif; backgroundposition： top； width：750px； border-right: 000000 1px solid;borderleft: #000000 1px solid;height：22px;textalign： center; padding： 8px；nav1 backgrou

24、ndposition： top； width:762px； borderright： #000000 1px solid;borderleft: 0000001pxsolid; height:20px ;textalign: left;top: 2px ;background-color： #ffcc99；padding： 2px;nav4 background: #f8e587; background-position： top;width：766px； borderright: #000000 1px solid； border-left: #000000 1px solid;height

25、:20px;text-align： left；paddingtop： 5pxtext fontsize: 14px； margin： 12px;line-height： 160%； textalign： left#foot background： eaba27; backgroundposition: top；width：766px; border-top: 000000 1px solid； borderright: #000000 1px solid;borderleft： #000000 1px solid； borderbottom: #000000 1px solid；textali

26、gn： center; padding-top: 3px#logolink background： ffffff ； backgroundposition： top;width:766px ； height：33px;text-align： cente r; paddingtop： 5px ; bordertopwidth： 1px ;borderright-width: 1px;borderleftwidth： 1px ;border-topstyle： solid； border-rightstyle： solid ；border-left-style: solid； bordertopc

27、olor: 000000 ;border-rightcolor: #000000 ;border-left-color: #000000;wordlink 766px;background： #ffffff ； background-position： top ;width：height:22px ；text-align: center ;padding-top： 5px ;bordertopwidth： 1px ； border-rightwidth： 1px ；borderleft-width: 1px ； border-topstyle： solid ；border-right-styl

28、e： solid ； borderleft-style: solid ;border-top-color: 000000 ； borderrightcolor： #000000 ； borderleft-color:#000000；在 网 站 首 页 代 码 的 HEAD 部 分 添 加 一 行 代 码 link href=”css/style1.css” rel=“stylesheet“ type=“text/css” /，引入 CSS 样式文件。3.4。3网站首页的布局设计1. 网站首页的主体布局在首页中插入三个表格 ,定义六个块 (用 div 标记符定义，并在style1。css 样式文

29、件中为这六个块定义样式.首页主体布局的扫瞄效果如图 1711 所示。图 1711网站首页布局的扫瞄效果首页主体布局的HTML 代码如下：base onmouseover=”window。status=网页教学网!！;return true“ /link href=“css/style1。css” rel=“stylesheet” type=”text/css” /body bgcolor=“#ffffff“ leftmargin=”0“ topmargin=”3“div align=“center“tableid=”table1“border=”0”cellpadding=”0“ cellsp

30、acing=”0”trtdwidth=“760” height=”120“ valign=“middle”表格 1/divdiv align=“center”div id=”nav” 页面区域 1!首页菜单-/div/divdiv id=”nav1” 页面区域 2/divdiv align=”center”div id=“nav4“页面区域 3/divtableid=“table2“ cellspacing=”0”width=“760” align=“center“ border=”0“tbody tr表格 2：a 单元格/tdtd width=”381” height=“200” align

31、=”center” valign=“middle”bgcolor=”ffffff” style=“border-right: 000000 1px solid; border-bottom：#111111 1px solid；“表格2：b 单元格表格 2：c 单元格/td/tabletrtd width=”176“ height=“200” align=“center” valign=”middle”style=“borderright: 111111 1pxsolid;border-left:#000000 1px solid“表格 3：a 单元格表格 3：b 单元格/tdtdheight=

32、“200” align=”center“ valign=“middle“style=“border-right： #000000 1px solid”表格 3：c 单元格/tbody/table页面区域 4 /div/div/divdiv id=“foot“页面区域 6 /div/html2. 插入嵌套表格分别在表格 2 和表格 3 的三个单元格各插入一个表格,例如在表格 2 的 B 单元格中插入一个 5 行 2 列的嵌套表格 22，该表格的HTML 代码如下，其他的几个嵌套表格的HTML 代码与表格 22 相像.tablewidth=“100 “height=”200“border=”0”a

33、lign=”center“ cellspacing=”0”tbodytd colspan=”2” background=“ image/line.gif” height=“1“表格22：A 单元格/td/trtr表格 22:C 单元格/td/trtr表格22：D 单元格/trtrtd height=”168“ align=”center“ valign=“middle”表格22:E 单元格/tdtd valign=“top“ align=”middle”表格 22:F 单元格/tdtd colspan=“2” background=“ image/line。gif“height=”1“表格22

34、:G 单元格/td/tr/table接下来在表格 21、表格 22、表格 23、表格 31、表格 32、表格 33 中再插入嵌套表格，形成三层嵌套构造，例如表格23 中插入一个 18 行2 列的表格 231,该表格的的 HTML 代码如下.其也的几个表格的 HTML 代码与表格 231 相像。table cellspacing=“0” cellpadding=”0” width=”100“ border=“0”td width=“25” height=“23”/tdtd width=”157” height=”23”tr/trtrtd width=“157“ height=“23“/trtr/

35、td3。4。4编辑美化网站首页在首页中输入文字、插入图片、flash 动画、脚本代码,对首页进展编辑和美化，主要操作内容如下：1设置页面属性网页标题设置为“网页设计与制作教学网网页教学网页制作 网页特效|建站指南网络编程|素材下载教程下载|HTML|CSS数据库”,“上边距”设置为 0.(2在表格 1 插入标题flash 和Logo 标志。3)在页面区域 1 中输入导航文字“：制作根底 制作技巧 网页特效 网页素材 | 网络编程 网页书籍 网络课程 教学沟通 | 建站指南 | 图像动画 | 考试题库”。4在页面区域 2 左侧输入“当前位置：网页教学网 首页“， 右侧输入文字“日期：”，然后插入

36、日期与时间，中间用空格分隔。插入显示日期与时间的JavaScript 代码的步骤如下:在Dreamweaver 8 主窗口中，单击菜单【插入】【HTML】【脚本对象】【脚本】，在弹出的“脚本”对话框“内容”列表框中输入以下代码：span id=”showtime“ scriptsetInterval(”showtime.innerHTML=new Date )。toLocaleString+” 星期”+日一二三四五六”。charAt(new Date.getDay；”， 1000)；/script/span如图 17-15 所示的“脚本”对话框，然后单击【确定】按钮,在首页中文字“日期:“右侧

37、将会动态显示扫瞄网页的日期和时间。图 17-12“脚本“对话框5)在页面区域 3 输入文字：“推举视频教程：Dreamweaver 视频教程 | Fireworks 视频教程 | Flash 视频教程 Photoshop 视频教程 常用软件”。（6） 在表格 21、表格 211、表格22、表格221、表格23、表格 231中插入图像、输入文字，留意将间隔单元的背景设置为网状点图片。（7） 在表格 31、表格 311、表格32、表格321、表格33、表格 331中插入图像、输入文字，留意将间隔单元的背景设置为网状点图片.8)在页面区域4 中插入图片型友情链接,在页页区域5 中插入文字型友情链接,在页面区域 6 中输入导航菜单文字和版权信息。9利用属性面板,对添加的各网页元素进展修饰,包括文字或图片的对齐方式，表格或单元格的背景颜色等。10)应用CSS 样式页面区域应用的样式的HTML 代码页面区域 1div id=”top”/div页面区域 2/div页面区域 3/div页面区域 4/div页面区域 5div id=“wordlink”页