刀剑神域动漫网页设计作品 学生表格布局网页作业成品 table漫画网站制作 dreamweaver静态HTML学生网页制作模板

刀剑神域网页设计
本学生作业使用Dreamweaver通过table布局制作了一个关于刀剑神域动漫的六页网页,包含导航栏及底部版权区域,整体宽度1200PX,展示了作品背景、故事介绍等内容。

知识点介绍

使用dreamweaver制作采用table表格布局、网页背景颜色、底部版权区域

网页制作说明

本学生网页设计作业作品使用dreamweaver采用表格table布局制作,网页设计成品共6页,大小为5.3M,题材为刀剑神域动漫。
整体页面宽度为1200PX,页面精美,但技术简单,经典上中下结构,制作了底部版权区。

网页代码演示

导航代码

<table width="1200" border="0" cellspacing="0" id="menu" >
  <tr valign="top">
    <td><a href="">网站首页</a></td>
    <td><a href="">作品背景</a></td>
    <td><a href="">故事介绍</a></td>
    <td><a href="">登场角色</a></td>
    <td><a href="">关联作品</a></td>
	<td><a href="">精美图册</a></td>
  </tr>
</table>

正文代码

<table width="1200" border="0" id="zheng">
  <tr>
    <td width="330" rowspan="2"><img src="images/sy.jpg" width="314"/></td>
    <td height="60"><p>刀剑神域是由川原砾著作,abec负责插画,电击文库所属的轻小说,也是作者继《加速世界》后又一文库化的作品。繁体中文版由台湾角川发行,简体中文版由天闻角川发行,并授权爱奇艺轻小说、SF轻小说、咪咕阅读在其平台上发布电子版。</p></td>
  </tr>
  <tr>
    <td><table width="840" border="0" id="jj">
  <tr>
    <td width="100">中文名</td>
    <td width="300">刀剑神域</td>
    <td width="100">原版名称</td>
    <td>ソードアート・オンライン</td>
  </tr>
  <tr>
    <td width="100">出版社</td>
    <td width="300">ASCII Media Works</td>
    <td width="100">所属文库</td>
    <td>电击文库</td>
  </tr>
  <tr>
    <td width="100">出版期间</td>
    <td width="300">2009年04月10日—未完结</td>
    <td width="100">刊行册数</td>
    <td>22卷(未完结)</td>
  </tr>
  <tr>
    <td width="100">作    者</td>
    <td width="300">川原砾</td>
    <td width="100">插    画</td>
    <td>abec</td>
  </tr>
  <tr>
    <td width="100">译    者</td>
    <td colspan="4">周庭旭(第1卷+3-18卷)(中国台湾)、林星宇(第2卷)(中国台湾)、幽远(10-20卷)(中国大陆)、陈定刚(第21卷)(中国大陆)</td>
  </tr>
</table>
</td>
  </tr>
</table>

网页效果预览

动漫网页设计制作

成品地址

stu-works.com/html/dongman/209.html

### 动态404错误页面设计思路 创建一个以刀剑神域为主题的动态404错误页面,可以通过HTMLCSS和JavaScript的结合实现。首先,需要确定页面的整体风格与刀剑神域的主题相符,例如使用游戏中的背景图片、角色形象以及相关的配色方案。 ### 页面结构设计 在HTML中,可以使用基本的标签来构建页面结构,包括标题、主内容区域和底部信息。为了增强视觉效果,可以在页面中添加背景图片和动画效果[^2]。 ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>404 - 刀剑神域</title> <link rel="stylesheet" href="style.css"> <script src="script.js"></script> </head> <body> <div class="container"> <h1>404</h1> <p>Oops! 页面未找到。</p> <img src="sao_logo.png" alt="刀剑神域Logo"> <button onclick="goBack()">返回首页</button> </div> </body> </html> ``` ### 样式设计 在CSS文件中,可以定义页面的样式,包括背景颜色、字体大小、按钮样式等。此外,还可以为页面元素添加动画效果,使其更加生动[^3]。 ```css body { background: url('sao_background.jpg') no-repeat center center fixed; background-size: cover; font-family: Arial, sans-serif; color: white; text-align: center; padding-top: 100px; } .container { background-color: rgba(0, 0, 0, 0.7); border-radius: 10px; padding: 20px; display: inline-block; } h1 { font-size: 5em; margin-bottom: 0.5em; } p { font-size: 2em; margin-bottom: 1em; } img { width: 200px; height: auto; margin-bottom: 1em; } button { padding: 10px 20px; font-size: 1em; cursor: pointer; background-color: #ff69b4; border: none; border-radius: 5px; color: white; } ``` ### 动态功能实现 在JavaScript文件中,可以编写函数来处理按钮点击事件,例如返回首页的功能。此外,也可以添加一些动态效果,如定时更新的背景图片或文字[^1]。 ```javascript function goBack() { window.history.back(); } // 添加动态背景切换效果 let images = ['sao_background1.jpg', 'sao_background2.jpg']; let index = 0; setInterval(() => { document.body.style.backgroundImage = `url('${images[index++ % images.length]}')`; }, 5000); ``` ###
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

STU网页设计

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值