网页制作——基础操作.doc

网页设计与制作课程设计目 录一、引言2二、课程题目：2三、系统开发及运行环境21、硬件环境32、软件环境3四、制作本网站的设计思路3五、网站的目录结构和网站的链接结构图3六、网站建设及各页面设计的过程41、新建站点42、首页的制作63、新闻页的制作144、制作超链接15九、参考文献15一、引言 Dreamweaver是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。随着互联网(Internet) 的家喻户晓，HTML技术的不断发展和完善，随之而产生了众多网页编辑器，从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器（则原始代码编辑器），两者各有千秋。所见则所得网页编辑器的优点就是直观性，使用方便，容易上手，您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点： 1、 难以精确达到与浏览器完全一致的显示效果。也就是说我们在所见即所得网页编辑器中制作的网页放到浏览器中是很难完全达到我们真正想要的效果，这一点在结构复杂一些的网页（如分帧结构、动态网页结构）中便可以体现出来； 2、 页面原始代码的难以控制性，比如我们在所见即所得编辑器中制作一张表格也要几分钟，但我们要它完全符合您要求可能需要几十分钟，甚至更多时间。而相比之下，非所见则所得的网页编辑器，就不存在这个问题，因为所有的HTML代码 都在我们的监控下产生，但是由于非所见则所得编辑器的先天条件就注定了它的工作低效率。如何实现两者的完美结合，则既产生干净、准确的HTML代码，又具备则见则所得的高效率、直观性，一直是网页设计师梦想。在DREAMWEAVER之前，FRONTPAGE98一直被人们认为是最好的所见即所得网页编辑器，但是它同样继承了所见即所得的种种劣性。但是这是在DREAMWEAVER之前，虽然现在还不能说DREAMWEAVER已经实现网页设计师的梦想，但DREAMWEAVER正在努力向这个梦想一步步走去。我们做的课程设计既是让我们能在制作网页的过程中逐步了解DREAMEAVER的功能，并且能掌握它。二、课程题目：牛牛动漫网三、系统开发及运行环境1、硬件环境 Intel (R) Core (TM)2 Dou CPU T5750 2.00GHz 2.00 GHz, 2.00 GB2、软件环境 Micorosoft windows XP Professional 版本2002 Service Pack 3 Dreamweaver 8, Adobe Photoshop CS2, 可牛影响四、制作本网站的设计思路在点击进入网站主页后，可以根据想要知道的信息点击进入不同的页面。主页下有由“首页”“2010新番动漫”“热门连载”“cosplay专区”组成的导航。五、网站的目录结构和网站的链接结构图 （网站的目录结构图）（网站的链接结构图）六、网站建设及各页面设计的过程首先，在“我的电脑”中的D盘建立文件夹，命名为“dongmanwang”。打开Dreamweaver 8应用软件。如下图:1、 新建站点在菜单栏单击“站点”“新建站点”，如图：跟着步骤按键，在“您将把文件储存在计算机上的什么位置？”键入“D:dongmanwang”，如图：单击“下一步”，在“您如何链接到远程服务器？”的下拉菜单选择“无”。单击“下一步”后如图，再点击“完成”，站点就建立好了。2、 首页的制作A、 新建网页，单击菜单栏的“文件”“新建”，弹出“新建文档”对话框，选择“基本页”的“HTML”创建，如图：B、 定位光标在空白处，在插入栏，如图：点击“表格”，即第四个按钮，插入表格，如图：行数键入“3”，列数键入“1”，表格宽度键入“167”，边框粗细键入“1”，然后点击“确定”建立好表格。C、 把光标定在第一行表格内，单击菜单栏的“插入”“图像”，如图：选择“image”“niuniu”，插入本网站标志图。第二行也是如此，插入本网站名字图。D、 在第三行插入时间，单击菜单栏的“插入”“日期”，见如图：在星期格式的下拉菜单中，选择“星期四.”，日期格式选择“1974年3月7日”，然后选择“储存时自动更新”的复选框。整个网站的标志栏就做好了，如图：E、 在标志栏旁插入表格，属性为： 1行，5列，宽145，填充0，间距0，边框0，居中对齐。在每列插入制作好的图片，最后效果如图：F、 制作导航，插入表格，属性为：1行，4列，宽790，居中对齐，边框0。在每列分别键入：首页，2010新番动漫，热门连载，cosplay专区。字体属性：大小18像素，颜色“#993333”。效果如图：G、 在导航下定位光标，插入水平线，单击菜单栏的“插入”“HTML”“水平线”，选择水平线，点击“拆分”，在hr 后键入“color=#FF9966”。H、 水平线下定位光标，插入层Layer2，单击菜单栏的“插入”“布局对象”“层”。插入图片，如图：I、 光标定在Layer2下面，插入层Layer3，在其中插入表格，属性为：8行，2列，宽249，边框1。在第一列每行插入相同的图片，第二列每行键入不同的新闻标题。如图：J、 定位光标在新闻栏旁，插入层Layer5，插入图片，其属性如图：K、 在Layer5里插入4个子层：Layer6，Layer7，Layer8，Layer9，它们的属性分别如图所示： Layer6： Layer7： Layer8： Layer9：并在4个子层中分别插入表格，编辑内容，效果如图：L、 在Layer5层上定位光标，插入层Layer10，插入图片，在插入子层Layer11，插入图片。制作Layer11的“时间轴”，让其可以移动。选中Layer11，单击菜单栏的“修改”“时间轴”“增加对象到时间轴”，即出现时间轴面板。拖动Layer11到时间轴面板，选择第一帧，定位图片，再选择第15帧，把图片定位在不同的位置，以此类推，即浮动窗口就做好了。其属性如图：M、 如Layer11的做法，制作Layer13和Layer14的浮动窗口。属性如图：其上时间轴面板如图：层结构如图：N、 定位光标，插入表格，属性：2行，1列，宽263，边框0，右对齐。在第一行插入图片。光标定位在第二行，单击菜单栏的“窗口”“行为”，使“行为”选项处于被选中状态，在窗口右边的面板组中，“行为”面板展开了，如图： 单击按钮，在弹出的下拉菜单中选择“播放声音”命令，弹出“播放声音”对话框，如图：在弹出的对话框中选择如图，插入到页面中。页面中出现一个插件图标，将这个图标移动到表格第二行。如图：选中刚插入页面的插件，在其“属性”面板中单击“参数”按钮，在弹出的“参数”对话框中，如图设置：O、 保存网页，命名为“index.html”，按【F12】浏览网页，整个首页的效果如图：3、 新闻页的制作A、 首先，新建网页，把首页的网站标志栏和导航栏、水平线复制到该页面；其次，从首页把动漫新闻的导航栏复制到该页面。效果如图：（首页的标志栏和导航栏）（动漫新闻的导航栏）B、把光标定位在动漫新闻导航栏的右边，插入表格，选中整个表格，设置属性：居中对齐。根据不同的新闻内容，表格的行数不同，在表格中插入图片和文字。C、保存页面，命名为“the news_*.html”。然后逐页制作不同的新闻页面。其中一个效果如图：4、 制作超链接 首先，选中导航的“首页”，其属性如图：在链接选项单击“指向文件”按钮，指向右边的文件面板的“index.html”文件。 其次，操作步骤如，逐步把导航中的“2010新番动漫”链接“2010new.html”文件，“热门连载”链接“hotgoing.html”文件，“cosplay”链接“cosplay.html”文件。 最后，选中动漫新闻表格中的每条新闻