《《网页设计与制作》综合实训指南1037.docx》由会员分享，可在线阅读，更多相关《《网页设计与制作》综合实训指南1037.docx（15页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、Evaluation Warning: The document was created with Spire.Doc for .NET.网页设计与制作综合实训指导书网站开发的参考案例1.1规划网站1策划网网站主题题我们们网站是是德阳嘉嘉兴别墅墅设计公公司公司遵遵循“奉奉献精湛湛技艺、铸铸造温馨馨家园、炼炼就英雄雄团队、创创建百年年老店”的的发展理理念，坚坚持“客客户至上上、重信信守约、质质优价平平、热忱忱服务”的的经营宗宗旨，追追求“简简约明快快、美观观时尚、突突出个性性、实用用环保”的的装饰风风格，以以新颖时时尚的设设计、规规范精致致的施工工和热情情人性的的服务，为为业主构构筑温馨馨、舒适
2、适、精美美、典雅雅的家园园。2确定网网站风格格确定好站点点主题后后，根据据该主题题选择站站点的风风格。所所以本案案例所建建立的网网站是别别墅设计计类网站。本本网站的的主要特特点如下下：（1）设计计风格要要大众化化，为了了提高浏浏览速度度，尽量量减少图图片的使使用，更更多地使使用表格格或层实现现效果。（2）背景景颜色以以淡绿色色为主、白白色为辅辅，文字字颜色以以绿色为主主、黑色和淡绿绿色为辅辅。（3）文字字内容丰丰富、知知识性强强，标题题简洁明明了，字字体一般般采用宋宋体，大大小一般般为122像素。3构思网网站栏目目结构先在纸上绘绘制网站站的栏目目结构草草图，经经过反复复推敲，最最后确定定完整的
3、的栏目和和内容的的层次结结构。本本案例的的“别墅墅设计网网”的栏栏目结构构如表117-11所示。表17-11“别墅设设计网”的栏目目结构一级栏目二级栏目三级栏目及及内容页页面首页indexx.httml设计风格：sjffg.hhtmllwyjchh_xxx_xxx.httml经典案例：jdaal.hhtmllwyjq_xx_xx.htmml作品展示：zpzzs.hhtmllwytx_xx_xx.htmml公司简介：gsjjj.hhtmllwysc_xx_xx.htmml为了简化对对网站的的浏览过过程，大大部分网网页通过过二级栏栏目就能能浏览内内容页面面，首页页的主菜菜单包括括4个菜单单项：设设
4、计风格格，经典典案例，作作品展示示，公司司简介。4规划网网站目录录结构和和链接结结构根据网站策策划确定定的栏目目结构，创创建站点点目录，一一个网站站的目录录结构要要求层次次清晰、井井然有序序，首页页、栏目目页、内内容页区区分明确确，有利利于日后后的修改改。“别别墅设计计网”的的目录结结构，各各文件夹夹的所存存放文件件类型如如表177-3所所示。表17-33网网站的目目录结构构及其存存放的文文件类型型文件夹名称称存放的文件件类型cssCSS样式式文件。flashh 动画文件、视视频文件件。imagee图像文件、照照片。text文字素材。webpaage_1一级页面文文件，该该文件夹夹又有多多个子
5、文文件夹，例例如weebpaage_1_001。webpaage_2二级页面文文件，该该文件夹夹又有多多个子文文件夹，例例如weebpaage_2_001。indexx.httml主页网站的链接接结构与与目录结结构不同同，网站站的目录录结构指指站点的的文件存存放结构构，一般般只有设设计人员员可以直直接看到到，而网网站的链链接结构构指网站站通过页页面之间间的联系系表现的的结构，浏浏览者浏浏览网站站能够观观察到这这种结构构。本网网站的链链接结构构采用“网网状”链链接结构构，结构构图如图图17-2所示示。图17-22“网页教教学网”中的链链接结构构5主要页页面布局局设计使用表格对对首页与与其他几几个
6、主面面导航页页面的布布局结构构草图进进行设计计，主页页布局结结构草图图如图117-33所示，两两种形式式的导航航页面布布局结构构草图如如图177-4和和图177-5所所示。由于本网站站中许多多页面都都采用图图17-5所示示的布局局结构，所所以可以以将该网网页制作作成模板板。图17-33主主页的布布局结构构草图图17-44利利用“框架”制作的的导航页页面图17-55利利用“表格、层层、浮动动框架”制作的的导航页页面1.2准准备素材材根据网站的的栏目、内内容设计计，链接接结构设设计，首首页的布布局结构构，几个个主要导导航页面面的布局局结构，准准备所需需素材1准备文文本准备大量网网页中所所需的文文字
7、资料料，可以以从各类类网站、各各种书籍籍中搜集集文字资资料，然然后制作作成woord文文档或文文本文件件，注意意各种文文字资料料的文件件名命名名要科学学合理，避避免日后后找不到到所需的的文本内内容。2准备LLogoo利用Firrewoorkss或Phhotooshoop量身身定做本本网站的的Loggo标志志，Loogo标标志要与与本网站站的主题题相符，要要有新意意。3准备图图片及按按钮根据需要到到网上或或素材光光盘中搜搜集所需需的图片片和按钮钮、有些些图片、按按钮需要要自己利利用图像像处理软软件制作作。注意意图片文文件要尽尽可能小小。4准备动动画网站中的动动画最好好能突出出主题，起起到画龙龙点
8、睛之之功效。动动画一般般利用fflassh软件件制作，本本网站主主页和导导航页的的标题动动画就是是利用fflassh软件件量身定定做。5建立库库项目网页中经常常用到的的项目，例例如版权权区，可可以事先先定义为为库项目目，以备备制作网网页时重重复使用用，提高高工作效效率。1.3创创建网站站1创建本本地站点点在开始着手手设计网网页之前前，首先先要定义义站点。因因为网页页只是网网站的一一个组成成部分，所所有设计计的网页页和相关关文件都都要放置置于站点点之中。定定义站点点的好处处是：定定义站点点以后的的所有操操作都是是在站点点统一监监控之下下进行。如如果使用用了外部部文件，DDreaamweeavee
9、r就会会自动检检测并予予以提示示和询问问是否将将外部文文件复制制到站点点内，以以保持站站点的完完整性。如如果某个个文件夹夹或文件件重新命命名了，系系统会自自动更新新所有的的链接，以以保证原原有的链链接关系系的正确确性。创建站点之之前，要要求先建建立一个个文件夹夹，以便便创建站站点时为为站点指指定存储储位置。在在Winndowws操作作系统中中，打开开“资源源管理器器”，创创建一个个名为“网网页教学学网”的的文件夹夹。创建站点在在第3章章已有详详细介绍绍，在此此只作简简要说明明，与第第3章中中的步骤骤有所区区别，这这里假设设事先已已申请了了主页空空间，所所申址的的网址为为：zzzwebb.266
10、3000.coom.ccn，用用户名和和密码也也已经知知道。定义站点的的操作步步骤如下下：（1）在DDreaamweeaveer 88主窗口口中，单单击菜单单【站点点】【新新建站点点】，将将弹出如如图177-6所所示站点点定义对对话框。在在该对话话框中先先输入站站点的名名称，然然后输入入网址，如如图177-6所所示。接接着单击击【下一一步】按按钮，进进入到下下一步操操作。（2）选择择“否，我我不想使使用服务务器技术术”单选选按钮，然然后单击击【下一一步】按按钮，进进入到下下一步操操作。（3）选择择“编辑辑我的计计算机上上的本地地副本，完完成后再再上传到到服务器器（推荐荐）”单单选按钮钮，接着着
11、在下面面的文本本框中输输入站点点文件在在本地计计算机上上的存放放位置，也也可以选选择存储储位置，然然后单击击【下一一步】按按钮，进进入到下下一步操操作。（4）选择择连接到到远程服服务器的的方式为为“FTTP”,然后分分别输入入Webb服务器器的主机机名、在在服务器器上文件件的存储储位置、FFTP用用户名、FFTP密密码等参参数，如如图177-7所所示。然然后单击击【下一一步】按按钮。（5）选择择“否，不不启用存存回和取取出”单单选按钮钮，如图图17-8所示示。接着着单击【下下一步】按按钮，此此时会显显示所定定义的站站点信息息。如果果发现有有误可以以单击【上上一步】按按钮，返返回到上上一步操操作
12、的对对话框中中重新修修改。如如果站点点定义信信息符合合要求，可可以单击击【完成成】按钮钮，完成成站点的的定义。此时会自动动显示“文文件”面面板，并并且会自自动切换换到新创创建的网网站。图17-66输输入站点点名称及及网址图17-77设设置连接接远程服服务器的的参数2网站目目录结构构的搭建建创建站点后后，在“文文件”面面板中切切换到新新创建的的站点，然然后利用用快捷菜菜单创建建文件夹夹及子文文件夹，本本网站的的目录结结构如图图17-9所示示。图17-88选选择是否否启用存存回和取取出图17-99“网页教教学网站站”的目录录结构1.8查查看与设设置站点点地图站点地图使使用直观观的树状状结构显显示网
13、站站中文件件的链接接关系，在在站点视视图中可可以将文文件加入入到站点点中，或或者加入入、修改改、删除除链接。1查看站站点地图图在“文件”面面板中，单单击视图图列表中中的“地地图视图图”，如如图177-277所示，这这时，在在文件列列表中将将以站点点地图的的方式显显示网站站的文件件，展现现出站点点中文件件之间的的链接关关系。单击【展开开以显示示本地和和远端站站点】按按钮 ，将将把以地地图视图图显示的的“文件件”面板板展开，如如图177-288所示。在在图177-288中单击击工具栏栏的【站站点地图图】按钮钮 ，从从其下拉拉菜单中中选择“地地图和文文件”，如如图177-299所示，也也可以选选择“
14、仅仅地图”。在站点地图图视图中中，首页页文档iindeex.hhtmll显示在在最上方方，在iindeex.hhtmll文件名名下方的的页面都都是由首首页所链链向的页页面。在在站点地地图视图图中，不不仅能显显示出内内部链接接，还能能显示出出外部链链接、电电子邮件件链接、外外部样式式文件、图图像文件件等。图17-227选择“地图视视图”图17-228站点文文件以“地图”形式显显示2站点地地图中的的操作（1）隐藏藏文件在站点地图图中选定定一个或或几个要要隐藏的的文件，然然后单击击鼠标右右键，在在弹出的的快捷菜菜单单击击【显示示/隐藏藏】命令令，被选选中的文文件就会会在站点点地图中中消失。图17-2
15、29“站点地地图”下拉菜菜单注意如果菜单【查查看】【站点点地图选选项】中中的级联联菜单项项【显示示标记为为隐藏的的文件】已已经被选选中，则则设置隐隐藏文件件时，文文件就不不会从站站点地图图中消失失了。（2）显示示文件如果要显示示隐藏的的文件，可可以单击击菜单【查查看】【站点点地图选选项】【显示示标记为为隐藏的的文件】。在站点地图图可进行行的操作作较多，例例如可以以完成“链链接到新新文件”、“链链接到已已有文件件”、“改改变链接接”、“移移除链接接”、“打打开链接接源”、“显显示网页页标题”等等操作。3保存站站点地图图站点地图可可以作为为图形文文件保存存，操作作很简单单，单击击菜单【文文件】【保
16、存存站点地地图】，在在弹出的的“保存存站点地地图”对对话框，输输入文件件名，单单击【保保存】按按钮即可可。如图图17-30所所示即为为所保存存的站点点地图。图17-330所保存存的站点点地图1.9测测试网站站一个网站包包含很多多链接，可可能会出出现链接接错误或或断链现现象，在在发布站站点前有有必要检检查整个个站点的的链接，以以避免站站点发布布之后出出现无效效链接情情形。利利用Drreammweaaverr 8提提供的“检检查链接接”可以以检查网网站中存存在断链链、孤立立文件等等。链接检查无无误后，可可以在浏浏览器中中浏览各各个网页页，检查查文字、图图片、链链接是否否有误、是是否会出出现乱码码，
17、网网页元素素定位是是否准确确，浏览览速度和和视觉效效果是否否满意。经经过测试试、修改改、再测测试、再再修改，反反复多次次循环，直直到各方方面都合合格方可可发布网网站。1.10发布网网站发布网站就就是把网网页文件件上传到到Webb服务器器，发布布网站之之前先必必须申请请一个主主页空间间，拥有有网页空空间的访访问域名名、FTTP用户户名和密密码。如如果主页页空间已已成功申申请，可可以先与与远程WWeb服服务器进进行连接接，连接接成功后后，再通通过单击击“文件”面板上上的【上上传文件件】按钮钮，往远远程Weeb服务务器中上上传本地地站点，上上传成功功后，就就可以在在浏览器器中输入入正确的的网址访访问
18、网站站了。分工：艾燕燕萍负责责首页iindeex.hhtmll，子页页gsjjj.hhtmll，收集素素材，报报告书书书写 张娟娟负责子子页shhejiifg.htmml，收收集素材材，报告告书书写写 谢明明吉负责责子页jjdall.httml，收收集素材材，报告告书书写写子页页zpzzs.hhtmll由张娟娟和谢明明吉合伙伙完成素材材是大家家一起收收集，然然后筛选选出好的的，报告告书是大大家一起起讨论着着写的，总之，差不多每项每个人都有参与，只是专攻方向不同。 遇到的问问题有：（1） 首页HEAAD图太太大，无无法调小小，HEEAD层层无法正正确插入入FLAASH，不不知道要要怎么样样调整。
19、（2） 用有些浏览览器预览览要错位位，不能能确定是是浏览器器的问题题还是自自己代码码没有处处理好，因因为在有有些机子子上就有有正常显显示。（3） 鼠标经过图图像出现现过三张张图片，不不知道是是什么原原因，明明明插入入的是两两张图片片，不明明白。（4） 素材找得不不是很合合心，特特别是FFLASSH，处处理的不不好，（5） 导航出现过过错位，隐隐藏，但但是，在在我们的的修改下下，现在在做好了了一个完完美的导导航。不不过，还还是有点点宽。因因为导航航都是以以图片插插入，无无法调整整其大小小。、解决问题方方法：（1） 网上大量收收集素材材，然后后从中筛筛选出合合适的图图片满意意的图片片来做网网页（2） 不懂的大家家讨论合合伙解决决问题，大大家的力力量是强强大的 九九组 艾艾燕萍 张娟娟 谢明吉吉 软件007-11