《《《网页设计与制作实训》指导书》》由会员分享，可在线阅读，更多相关《《《网页设计与制作实训》指导书》（10页珍藏版）》请在金锄头文库上搜索。
1、网页设计与制作实训指导书-以“五岳独尊泰山”为例、规划网站1. 策划网站主题在着手设计网站之前，要确定好网站的主题，每个网站都应该具有 一个明确的主题。本次所创建的网站是一个名山宣传类网站，主要以五 岳独尊泰山为主题，包括泰山简介、泰山文化、泰山名吃、泰山地质、 环境和神话传说等内容。2. 确定网站风格确定好站点主题后，就要根据该主题选择站点的风格。由于本次所 创建的网站是一个名山宣传类网站，要求结构清晰，能够展现出泰山的 魅力所在。本网站的主要特点如下：(1) 设计风格要大众化，为了提高浏览速度，精选图片，同时尽 景减少图片的使用，更多地使用层、表格实现效果。(2) 背景颜色以灰色和白色为主
2、，文字颜色以黑色为主、蓝色和 红色为辅。(3) 文字内容丰富、知识性强，标题简洁明了，字体一般采用宋 体，大小一般为14像素。(4) 首页的版式结构采用典型的“三”字型结构，首页如图1-1所示图1-1 首页设计浏览效果二级页面采用与首页统一的风格设计。该网站名称为“五岳独尊泰山”，所有网页的标题为“五岳独尊一泰山: 个人根据所定主题确定。英文名称为“MountTai :3. 构思网站栏目结构先在纸上绘制网站的栏目结构草图，经过反复推敲，最后确定完整 的栏目和内容的层次结构。“五岳独尊泰山”的栏目结构如表1-1所示。表1-1“五岳独尊泰山”的栏目结构五岳独尊泰山首页泰山简介泰山文化泰山名吃泰山自
3、然为了简化对网站的浏览过程，大部分网页通过栏目就能浏览内容页 面，首页的主菜单包括9个菜单项：泰山简介、泰山文化、泰山名吃、 泰山自然、泰山地质、神话传说、泰山景点、泰山美图、寄语泰山。4. 规划网站目录结构和链接结构根据网站策划确定的栏目结构，创建站点目录，一个网站的目录结 构要求层次清晰、井然有序，首页、栏目页、内容页区分明确，有利于 日后的修改。“五岳独尊泰山”的目录结构，各文件夹的所存放文件类型如 表1-2所下。注意文件夹和文件的名称建议不要使用中文名，因为中文名在 HTML 文档中容易生成乱码，导致链接产生错误。表1-2网站的目录结构及其存放的文件类型文件夹名称存放的文件类型cssC
4、SS样式文件。flash动圆文件、视频文件。image图像文件、照片。js外部脚本文件。Templates模板文件Library库文件。music宜乐、首频义件。index.html主页网站的链接结构与目录结构不同， 网站的目录结构指站点的文件存 放结构，一般只有设计人员可以直接看到，而网站的链接结构指网站通 过页面之间的联系表现的结构，浏览者浏览网站能够观察到这种结构。 本网站的链接结构采用“网状”链接结构，结构图如图1-2所示。图1-2“五岳独尊泰山”中的链接结构5. 主要页面布局设计使用CSS+DIV对首页的布局结构草图进行设计如图 1-3所示。整 个网站中其它页面的设计可参考首页设计进
5、行， 所以可以将该首页制作 成模板（但不要求用模板）。图1-3主页的布局结构草图二、准备素材根据网站的栏目、内容设计，链接结构设计，首页的布局结构，准 备所需素材1 .准备文本准备大景网页中所需的文字资料，可以从各类网站、各种书籍中搜 集文字资料，然后制彳成 word文档或文本文件，注意各种文字资料的 文件名命名要科学合理，避免日后找不到所需的文本内容。2 .准备Logo利用Fireworks或Photoshop景身定做本网站的 Logo标志，Logo 标志要与本网站的主题相符，要有新意。3. 准备图片及按钮根据需要到网上或素材光盘中搜集所需的图片和按钮、有些图片、 按钮需要自己利用图像处理软
6、件制作。注意图片文件要尽可能小。4. 准备动画网站中的动画最好能突出主题，起到画龙点睛之功效。动画一般利用flash软件制作，本网站主页和导航页的标题动画就是利用flash软件景身定做。o5.建立库项目网页中经常用到的项目，例如版权区，但不可使用。三、创建网站1. 创建本地站点在开始着手设计网页之前，首先要定义站点。因为网页只是网站的 一个组成部分，所有设计的网页和相关文件都要放置于站点之中。定义 站点的好处是：定义站点以后的所有操作都是在站点统一监控之下进 行。如果使用了外部文件，Dreamweaver就会自动检测并予以提示和 询问是否将外部文件复制到站点内，以保持站点的完整性。如果某个文
7、件夹或文件重新命名了，系统会自动更新所有的链接，以保证原有的链 接关系的正确性。创建站点之前，要求先建立一个文件夹，以便创建站点时为站点指 定存储位置。在 Windows操作系统中，打开“资源管理器”，在E盘创建 一个名为“五岳独尊泰山”的文件夹。创建站点已详细介绍，在此只作简要说明。定义站点的操作步骤如下：(1)在Dreamweaver CS6主窗口中，单击菜单【站点】，【新 建站点】，将弹出如图1-6所示站点定义对话框。在该对话框中先输入 站点的名称，选择本地站点文件夹，如图1-6所示。接着单击【下一步】 按钮，进入到下一步操作。口睥hDreamweef站点是困站中虔用的所肖文件和斑源的集
8、Dreamwedvei服曾器站点通常园奎商个部分：可在其中存储和述理文件的计黄机上的本地文件常本控制夹，以及可在其中将相同文件发布到由上的服务备上的逐程文年买.商钗役置您可以在此处为Dr匏rwe枷er站点注驿本埋艾件夹和名稗.站 点生称：I万岳独尊蕨山本地站点艾件夹：亏(2)点击保存即可。2. 网站目录结构的搭建创建站点后，在“文件”面板中切换到新创建的站点，然后利用快捷 菜单创建文件夹及子文件夹，本网站的目录结构如图1-7所示。支件1=五岳独尊赛山 用C I凸兮司I本地本囹回曰！.r .L: i.r.L.i:.r LCS5. G5S flmhirna.ge：slibr iirynusi ct
9、emplate郊文科文竹文肖文什文徂文化N-l图1-7“五岳独尊泰山”的目录结构3. 网站首页的设计与制作首先在网站根目录下创建首页文件index.html ,在设计视图状态下,打开index.html ,开始对首页进行布局。3.1网站首页的布局设计首页的布局方案如下(样式规则全部定义在css文件夹中的css.css 样式表文件中)：(1)整个页面如上图1-3所示，分为上中下3个区域，从上往下 依次为：not-可编辑修改-部 讪M iuin 觐饕初健 lillAf *60 fW fit*由3个DIV和其样式实现，如下：iiv横帽图片div首页ft llj简介 a href=J taiiuh.
10、hTZ.”秦山 文蛇mX/liliXa href=tainG, hluil*)泰ill 名定，迅奉山自燃 hrwf=tai己富*泰山地href=,vtaishc5,h-tnilnr神话传说“a hrefstaijd.林血1慕山 景点 hr 二Mind. htZ.*，泰山美囱 土，富槌CHXei Piref=faijy. IrtM”答语塞iJjEFQV/li样式规则如下:flheadermargin： 0 auto,width; ID 脚height: 34Ipsbackground-color:.back ground-image; url (r *. /images/headetbg. jp
11、g ), baukiouiul-iepeal; l Bpeat-x, backgrourvi-poEition; left bottom b ack g r ound-at t ackment:scroll.padding: Opxtflit-align: centerfont-siit；20px:H+opnargin:0 auto.width: lOOOpx：height: 2px,background-coloriYellowpadding: Dpsffnavigatormargin; auto:padding： Clpvwidth： 1 OOOpit: height :43px.menu
12、ma匚 wip:OpK;padding:Ops float: left: width: lOOOpx: height: 43ps, list-style-type:none1mmnu lifloat:left;font-size:14pz font-weight:bold. 卜.jn&nu li a: Lin,. ntenu li ai visited display:tlock;width: 90pt:height: 30px testalign:center test-decoration:none color:#OODOOO;padding-top: 13pz;,nenu li a;ho
13、ver(color:#ffffff.width:POps.herglft ； 3Op)t, teict-deccra+ ion： none : b&ckgrourL(3-colcr: green: fonrt-size：I5px: paiiinj-top:12px;内容区:由8个DIV和样式实现id=maindtvrtdiv idBaintopZ/div样式规则如下:#maindiv(margin:0 auto;width:1000px;height:400px;background-color:#ffffff;#maintop(margin:0 auto;background-color:yellow;width:1000px;height:180px;#maintopleft(margin:5px;padding:0px;float:left;width:290px;height:170px;background-color:Green;#maintopleft img(border:1px solid #000000;#maintopright
